From 5da6791a96f2361cf215268d36724419baad1ada Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 15 Apr 2025 10:16:12 -0500 Subject: [PATCH 1/6] ref(insights): Refactor `ResourceSummaryCharts` into separate modules Part of https://github.com/getsentry/sentry/issues/88560 --- .../charts/resourceLandingPageCharts.tsx | 70 +------------- .../charts/resourceSummaryCharts.tsx | 96 ++----------------- .../resources/components/resourceView.tsx | 21 +--- .../resources/views/resourceSummaryPage.tsx | 2 +- .../hooks/useResourceLandingSeries.tsx | 67 +++++++++++++ .../hooks/useResourceSummarySeries.tsx | 47 +++++++++ .../resourceLandingDurationChartWidget.tsx | 22 +++++ .../resourceLandingThroughputChartWidget.tsx | 19 ++++ .../resourceSummaryAverageSizeChartWidget.tsx | 43 +++++++++ .../resourceSummaryDurationChartWidget.tsx | 25 +++++ .../resourceSummaryThroughputChartWidget.tsx | 22 +++++ 11 files changed, 259 insertions(+), 175 deletions(-) create mode 100644 static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx create mode 100644 static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx create mode 100644 static/app/views/insights/common/components/widgets/resourceLandingDurationChartWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/resourceLandingThroughputChartWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/resourceSummaryAverageSizeChartWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/resourceSummaryDurationChartWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/resourceSummaryThroughputChartWidget.tsx diff --git a/static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx b/static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx index 437901eff9a0fc..cb186b085e06d2 100644 --- a/static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx +++ b/static/app/views/insights/browser/resources/components/charts/resourceLandingPageCharts.tsx @@ -1,83 +1,23 @@ import styled from '@emotion/styled'; import {space} from 'sentry/styles/space'; -import {EMPTY_OPTION_VALUE, MutableSearch} from 'sentry/utils/tokenizeSearch'; -import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; -import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; -import type {ModuleFilters} from 'sentry/views/insights/common/views/spans/types'; -import { - getDurationChartTitle, - getThroughputChartTitle, -} from 'sentry/views/insights/common/views/spans/types'; -import {SpanMetricsField} from 'sentry/views/insights/types'; - -const {SPAN_SELF_TIME, NORMALIZED_DESCRIPTION, SPAN_DOMAIN} = SpanMetricsField; - -type Props = { - appliedFilters: ModuleFilters; - extraQuery?: string[]; -}; - -export function ResourceLandingPageCharts({appliedFilters, extraQuery}: Props) { - let query: string = buildDiscoverQueryConditions(appliedFilters); - - if (extraQuery) { - query += ` ${extraQuery.join(' ')}`; - } - - const {data, isPending, error} = useSpanMetricsSeries( - { - search: new MutableSearch(query), - yAxis: ['epm()', `avg(${SPAN_SELF_TIME})`], - transformAliasToInputFormat: true, - }, - 'api.starfish.span-time-charts' - ); +import {ResourceLandingDurationChartWidget} from 'sentry/views/insights/common/components/widgets/resourceLandingDurationChartWidget'; +import {ResourceLandingThroughputChartWidget} from 'sentry/views/insights/common/components/widgets/resourceLandingThroughputChartWidget'; +export function ResourceLandingPageCharts() { return ( - + - + ); } -const SPAN_FILTER_KEYS = ['span_operation', SPAN_DOMAIN, 'action']; - -const buildDiscoverQueryConditions = (appliedFilters: ModuleFilters) => { - const result = Object.keys(appliedFilters) - .filter(key => SPAN_FILTER_KEYS.includes(key)) - // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message - .filter(key => Boolean(appliedFilters[key])) - .map(key => { - // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message - const value = appliedFilters[key]; - if (key === SPAN_DOMAIN && value === EMPTY_OPTION_VALUE) { - return [`!has:${SPAN_DOMAIN}`]; - } - return `${key}:${value}`; - }); - - result.push(`has:${NORMALIZED_DESCRIPTION}`); - - return result.join(' '); -}; - const ChartsContainer = styled('div')` display: flex; flex-direction: row; diff --git a/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx b/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx index 18726cb67f0db9..fa9a2abf99f481 100644 --- a/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx +++ b/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx @@ -1,105 +1,23 @@ import {Fragment} from 'react'; -import {t} from 'sentry/locale'; -import {MutableSearch} from 'sentry/utils/tokenizeSearch'; -import {Referrer} from 'sentry/views/insights/browser/resources/referrer'; -import {DATA_TYPE, FIELD_ALIASES} from 'sentry/views/insights/browser/resources/settings'; -import {useResourceModuleFilters} from 'sentry/views/insights/browser/resources/utils/useResourceFilters'; -import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout'; -import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; -import { - getDurationChartTitle, - getThroughputChartTitle, -} from 'sentry/views/insights/common/views/spans/types'; -import {SpanMetricsField} from 'sentry/views/insights/types'; - -const { - SPAN_SELF_TIME, - HTTP_RESPONSE_CONTENT_LENGTH, - HTTP_DECODED_RESPONSE_CONTENT_LENGTH, - HTTP_RESPONSE_TRANSFER_SIZE, - RESOURCE_RENDER_BLOCKING_STATUS, -} = SpanMetricsField; - -function ResourceSummaryCharts(props: {groupId: string}) { - const filters = useResourceModuleFilters(); - - const mutableSearch = MutableSearch.fromQueryObject({ - 'span.group': props.groupId, - ...(filters[RESOURCE_RENDER_BLOCKING_STATUS] - ? { - [RESOURCE_RENDER_BLOCKING_STATUS]: filters[RESOURCE_RENDER_BLOCKING_STATUS], - } - : {}), - ...(filters[SpanMetricsField.USER_GEO_SUBREGION] - ? { - [SpanMetricsField.USER_GEO_SUBREGION]: `[${filters[SpanMetricsField.USER_GEO_SUBREGION].join(',')}]`, - } - : {}), - }); - - const { - data: spanMetricsSeriesData, - isPending: areSpanMetricsSeriesLoading, - error: spanMetricsSeriesError, - } = useSpanMetricsSeries( - { - search: mutableSearch, - yAxis: [ - `epm()`, - `avg(${SPAN_SELF_TIME})`, - `avg(${HTTP_RESPONSE_CONTENT_LENGTH})`, - `avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`, - `avg(${HTTP_RESPONSE_TRANSFER_SIZE})`, - ], - enabled: Boolean(props.groupId), - transformAliasToInputFormat: true, - }, - Referrer.RESOURCE_SUMMARY_CHARTS - ); - - if (spanMetricsSeriesData) { - spanMetricsSeriesData[`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`].lineStyle = { - type: 'dashed', - }; - spanMetricsSeriesData[`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`].lineStyle = { - type: 'dashed', - }; - } +import {ResourceSummaryAverageSizeChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryAverageSizeChartWidget'; +import {ResourceSummaryDurationChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryDurationChartWidget'; +import {ResourceSummaryThroughputChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryThroughtputChartWidget'; +function ResourceSummaryCharts() { return ( - + - + - + ); diff --git a/static/app/views/insights/browser/resources/components/resourceView.tsx b/static/app/views/insights/browser/resources/components/resourceView.tsx index ddec211538d010..0abf456916a7bc 100644 --- a/static/app/views/insights/browser/resources/components/resourceView.tsx +++ b/static/app/views/insights/browser/resources/components/resourceView.tsx @@ -8,7 +8,6 @@ import {trackAnalytics} from 'sentry/utils/analytics'; import {useLocation} from 'sentry/utils/useLocation'; import {useNavigate} from 'sentry/utils/useNavigate'; import useOrganization from 'sentry/utils/useOrganization'; -import {getResourceTypeFilter} from 'sentry/views/insights/browser/common/queries/useResourcesQuery'; import RenderBlockingSelector from 'sentry/views/insights/browser/resources/components/renderBlockingSelector'; import ResourceTable from 'sentry/views/insights/browser/resources/components/tables/resourceTable'; import { @@ -24,16 +23,13 @@ import { import {useResourceSort} from 'sentry/views/insights/browser/resources/utils/useResourceSort'; import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters'; import {TransactionSelector} from 'sentry/views/insights/common/views/spans/selectors/transactionSelector'; -import type {ModuleFilters} from 'sentry/views/insights/common/views/spans/types'; import {ResourceLandingPageCharts} from './charts/resourceLandingPageCharts'; const { SPAN_OP: RESOURCE_TYPE, - SPAN_DOMAIN, TRANSACTION, RESOURCE_RENDER_BLOCKING_STATUS, - USER_GEO_SUBREGION, } = BrowserStarfishFields; type Option = { @@ -45,25 +41,10 @@ function ResourceView() { const filters = useResourceModuleFilters(); const sort = useResourceSort(); - const spanTimeChartsFilters: ModuleFilters = { - 'span.op': `[${DEFAULT_RESOURCE_TYPES.join(',')}]`, - ...(filters[SPAN_DOMAIN] ? {[SPAN_DOMAIN]: filters[SPAN_DOMAIN]} : {}), - }; - - const extraQuery = [ - ...getResourceTypeFilter(undefined, DEFAULT_RESOURCE_TYPES), - ...(filters[USER_GEO_SUBREGION] - ? [`user.geo.subregion:[${filters[USER_GEO_SUBREGION].join(',')}]`] - : []), - ]; - return ( - + diff --git a/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx b/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx index 921d252fb2cf42..d8390dc864510e 100644 --- a/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx +++ b/static/app/views/insights/browser/resources/views/resourceSummaryPage.tsx @@ -155,7 +155,7 @@ function ResourceSummary() { )} - + diff --git a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx new file mode 100644 index 00000000000000..8b8df8eabf1551 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx @@ -0,0 +1,67 @@ +import {EMPTY_OPTION_VALUE, MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {getResourceTypeFilter} from 'sentry/views/insights/browser/common/queries/useResourcesQuery'; +import {DEFAULT_RESOURCE_TYPES} from 'sentry/views/insights/browser/resources/settings'; +import { + BrowserStarfishFields, + useResourceModuleFilters, +} from 'sentry/views/insights/browser/resources/utils/useResourceFilters'; +import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; +import type {ModuleFilters} from 'sentry/views/insights/common/views/spans/types'; +import {SpanMetricsField} from 'sentry/views/insights/types'; + +const {SPAN_SELF_TIME, NORMALIZED_DESCRIPTION, SPAN_DOMAIN} = SpanMetricsField; +const {SPAN_DOMAIN: STARFISH_SPAN_DOMAIN, USER_GEO_SUBREGION} = BrowserStarfishFields; + +const SPAN_FILTER_KEYS = ['span_operation', SPAN_DOMAIN, 'action']; + +const buildDiscoverQueryConditions = (appliedFilters: ModuleFilters) => { + const result = Object.keys(appliedFilters) + .filter(key => SPAN_FILTER_KEYS.includes(key)) + // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message + .filter(key => Boolean(appliedFilters[key])) + .map(key => { + // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message + const value = appliedFilters[key]; + if (key === SPAN_DOMAIN && value === EMPTY_OPTION_VALUE) { + return [`!has:${SPAN_DOMAIN}`]; + } + return `${key}:${value}`; + }); + + result.push(`has:${NORMALIZED_DESCRIPTION}`); + + return result.join(' '); +}; + +export function useResourceLandingSeries() { + const filters = useResourceModuleFilters(); + + const spanTimeChartsFilters: ModuleFilters = { + 'span.op': `[${DEFAULT_RESOURCE_TYPES.join(',')}]`, + ...(filters[STARFISH_SPAN_DOMAIN] + ? {[STARFISH_SPAN_DOMAIN]: filters[STARFISH_SPAN_DOMAIN]} + : {}), + }; + + const extraQuery = [ + ...getResourceTypeFilter(undefined, DEFAULT_RESOURCE_TYPES), + ...(filters[USER_GEO_SUBREGION] + ? [`user.geo.subregion:[${filters[USER_GEO_SUBREGION].join(',')}]`] + : []), + ]; + + let query: string = buildDiscoverQueryConditions(spanTimeChartsFilters); + + if (extraQuery) { + query += ` ${extraQuery.join(' ')}`; + } + + return useSpanMetricsSeries( + { + search: new MutableSearch(query), + yAxis: ['epm()', `avg(${SPAN_SELF_TIME})`], + transformAliasToInputFormat: true, + }, + 'api.starfish.span-time-charts' + ); +} diff --git a/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx b/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx new file mode 100644 index 00000000000000..e2a33fd7c88eb3 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx @@ -0,0 +1,47 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {Referrer} from 'sentry/views/insights/browser/resources/referrer'; +import {useResourceModuleFilters} from 'sentry/views/insights/browser/resources/utils/useResourceFilters'; +import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; +import {SpanMetricsField} from 'sentry/views/insights/types'; + +const { + SPAN_SELF_TIME, + HTTP_RESPONSE_CONTENT_LENGTH, + HTTP_DECODED_RESPONSE_CONTENT_LENGTH, + HTTP_RESPONSE_TRANSFER_SIZE, + RESOURCE_RENDER_BLOCKING_STATUS, +} = SpanMetricsField; + +export function useResourceSummarySeries({groupId}: {groupId?: string}) { + const filters = useResourceModuleFilters(); + + const mutableSearch = MutableSearch.fromQueryObject({ + 'span.group': groupId, + ...(filters[RESOURCE_RENDER_BLOCKING_STATUS] + ? { + [RESOURCE_RENDER_BLOCKING_STATUS]: filters[RESOURCE_RENDER_BLOCKING_STATUS], + } + : {}), + ...(filters[SpanMetricsField.USER_GEO_SUBREGION] + ? { + [SpanMetricsField.USER_GEO_SUBREGION]: `[${filters[SpanMetricsField.USER_GEO_SUBREGION].join(',')}]`, + } + : {}), + }); + + return useSpanMetricsSeries( + { + search: mutableSearch, + yAxis: [ + `epm()`, + `avg(${SPAN_SELF_TIME})`, + `avg(${HTTP_RESPONSE_CONTENT_LENGTH})`, + `avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`, + `avg(${HTTP_RESPONSE_TRANSFER_SIZE})`, + ], + enabled: Boolean(groupId), + transformAliasToInputFormat: true, + }, + Referrer.RESOURCE_SUMMARY_CHARTS + ); +} diff --git a/static/app/views/insights/common/components/widgets/resourceLandingDurationChartWidget.tsx b/static/app/views/insights/common/components/widgets/resourceLandingDurationChartWidget.tsx new file mode 100644 index 00000000000000..3aa73f72bcbdcb --- /dev/null +++ b/static/app/views/insights/common/components/widgets/resourceLandingDurationChartWidget.tsx @@ -0,0 +1,22 @@ +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useResourceLandingSeries} from 'sentry/views/insights/common/components/widgets/hooks/useResourceLandingSeries'; +import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; +import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types'; +import {SpanMetricsField} from 'sentry/views/insights/types'; + +const {SPAN_SELF_TIME} = SpanMetricsField; + +export function ResourceLandingDurationChartWidget(props: LoadableChartWidgetProps) { + const {data, isPending, error} = useResourceLandingSeries(); + + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/resourceLandingThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/resourceLandingThroughputChartWidget.tsx new file mode 100644 index 00000000000000..372e2f59bc1b82 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/resourceLandingThroughputChartWidget.tsx @@ -0,0 +1,19 @@ +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useResourceLandingSeries} from 'sentry/views/insights/common/components/widgets/hooks/useResourceLandingSeries'; +import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; +import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types'; + +export function ResourceLandingThroughputChartWidget(props: LoadableChartWidgetProps) { + const {data, isPending, error} = useResourceLandingSeries(); + + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/resourceSummaryAverageSizeChartWidget.tsx b/static/app/views/insights/common/components/widgets/resourceSummaryAverageSizeChartWidget.tsx new file mode 100644 index 00000000000000..030137a9830794 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/resourceSummaryAverageSizeChartWidget.tsx @@ -0,0 +1,43 @@ +import {t} from 'sentry/locale'; +import {useParams} from 'sentry/utils/useParams'; +import {DATA_TYPE, FIELD_ALIASES} from 'sentry/views/insights/browser/resources/settings'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useResourceSummarySeries} from 'sentry/views/insights/common/components/widgets/hooks/useResourceSummarySeries'; +import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; +import {SpanMetricsField} from 'sentry/views/insights/types'; + +const { + HTTP_RESPONSE_CONTENT_LENGTH, + HTTP_DECODED_RESPONSE_CONTENT_LENGTH, + HTTP_RESPONSE_TRANSFER_SIZE, +} = SpanMetricsField; + +export function ResourceSummaryAverageSizeChartWidget(props: LoadableChartWidgetProps) { + const {groupId} = useParams(); + + const {data, isPending, error} = useResourceSummarySeries({groupId}); + + if (data) { + data[`avg(${HTTP_RESPONSE_TRANSFER_SIZE})`].lineStyle = { + type: 'dashed', + }; + data[`avg(${HTTP_DECODED_RESPONSE_CONTENT_LENGTH})`].lineStyle = { + type: 'dashed', + }; + } + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/resourceSummaryDurationChartWidget.tsx b/static/app/views/insights/common/components/widgets/resourceSummaryDurationChartWidget.tsx new file mode 100644 index 00000000000000..79be249df3c9f9 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/resourceSummaryDurationChartWidget.tsx @@ -0,0 +1,25 @@ +import {useParams} from 'sentry/utils/useParams'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useResourceSummarySeries} from 'sentry/views/insights/common/components/widgets/hooks/useResourceSummarySeries'; +import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; +import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types'; +import {SpanMetricsField} from 'sentry/views/insights/types'; + +const {SPAN_SELF_TIME} = SpanMetricsField; + +export function ResourceSummaryDurationChartWidget(props: LoadableChartWidgetProps) { + const {groupId} = useParams(); + + const {data, isPending, error} = useResourceSummarySeries({groupId}); + + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/resourceSummaryThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/resourceSummaryThroughputChartWidget.tsx new file mode 100644 index 00000000000000..5b69b5212f34d6 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/resourceSummaryThroughputChartWidget.tsx @@ -0,0 +1,22 @@ +import {useParams} from 'sentry/utils/useParams'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useResourceSummarySeries} from 'sentry/views/insights/common/components/widgets/hooks/useResourceSummarySeries'; +import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; +import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types'; + +export function ResourceSummaryThroughputChartWidget(props: LoadableChartWidgetProps) { + const {groupId} = useParams(); + + const {data, isPending, error} = useResourceSummarySeries({groupId}); + + return ( + + ); +} From ecd50f8a02435b69460beff38b3c719c07b7bcd8 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 15 Apr 2025 11:11:09 -0500 Subject: [PATCH 2/6] typo --- .../resources/components/charts/resourceSummaryCharts.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx b/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx index fa9a2abf99f481..8ca6b7a8a04a7d 100644 --- a/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx +++ b/static/app/views/insights/browser/resources/components/charts/resourceSummaryCharts.tsx @@ -3,7 +3,7 @@ import {Fragment} from 'react'; import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout'; import {ResourceSummaryAverageSizeChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryAverageSizeChartWidget'; import {ResourceSummaryDurationChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryDurationChartWidget'; -import {ResourceSummaryThroughputChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryThroughtputChartWidget'; +import {ResourceSummaryThroughputChartWidget} from 'sentry/views/insights/common/components/widgets/resourceSummaryThroughputChartWidget'; function ResourceSummaryCharts() { return ( From bd878a02a10908e1e1cef14a1dca8ad098fdcfed Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 15 Apr 2025 12:27:41 -0500 Subject: [PATCH 3/6] override pageFilters --- .../widgets/hooks/useResourceLandingSeries.tsx | 10 ++++++++-- .../widgets/hooks/useResourceSummarySeries.tsx | 11 +++++++++-- .../widgets/resourceLandingDurationChartWidget.tsx | 4 +++- .../widgets/resourceLandingThroughputChartWidget.tsx | 4 +++- .../widgets/resourceSummaryAverageSizeChartWidget.tsx | 5 ++++- .../widgets/resourceSummaryDurationChartWidget.tsx | 5 ++++- .../widgets/resourceSummaryThroughputChartWidget.tsx | 5 ++++- 7 files changed, 35 insertions(+), 9 deletions(-) diff --git a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx index 8b8df8eabf1551..4aa671c45aad9b 100644 --- a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx +++ b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx @@ -1,3 +1,4 @@ +import type {PageFilters} from 'sentry/types/core'; import {EMPTY_OPTION_VALUE, MutableSearch} from 'sentry/utils/tokenizeSearch'; import {getResourceTypeFilter} from 'sentry/views/insights/browser/common/queries/useResourcesQuery'; import {DEFAULT_RESOURCE_TYPES} from 'sentry/views/insights/browser/resources/settings'; @@ -33,7 +34,11 @@ const buildDiscoverQueryConditions = (appliedFilters: ModuleFilters) => { return result.join(' '); }; -export function useResourceLandingSeries() { +interface Props { + pageFilters?: PageFilters; +} + +export function useResourceLandingSeries(props?: Props) { const filters = useResourceModuleFilters(); const spanTimeChartsFilters: ModuleFilters = { @@ -62,6 +67,7 @@ export function useResourceLandingSeries() { yAxis: ['epm()', `avg(${SPAN_SELF_TIME})`], transformAliasToInputFormat: true, }, - 'api.starfish.span-time-charts' + 'api.starfish.span-time-charts', + props.pageFilters ); } diff --git a/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx b/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx index e2a33fd7c88eb3..e4a8dff06a6ff8 100644 --- a/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx +++ b/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx @@ -1,3 +1,4 @@ +import type {PageFilters} from 'sentry/types/core'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import {Referrer} from 'sentry/views/insights/browser/resources/referrer'; import {useResourceModuleFilters} from 'sentry/views/insights/browser/resources/utils/useResourceFilters'; @@ -12,7 +13,12 @@ const { RESOURCE_RENDER_BLOCKING_STATUS, } = SpanMetricsField; -export function useResourceSummarySeries({groupId}: {groupId?: string}) { +interface Props { + groupId?: string; + pageFilters?: PageFilters; +} + +export function useResourceSummarySeries({pageFilters, groupId}: Props) { const filters = useResourceModuleFilters(); const mutableSearch = MutableSearch.fromQueryObject({ @@ -42,6 +48,7 @@ export function useResourceSummarySeries({groupId}: {groupId?: string}) { enabled: Boolean(groupId), transformAliasToInputFormat: true, }, - Referrer.RESOURCE_SUMMARY_CHARTS + Referrer.RESOURCE_SUMMARY_CHARTS, + pageFilters ); } diff --git a/static/app/views/insights/common/components/widgets/resourceLandingDurationChartWidget.tsx b/static/app/views/insights/common/components/widgets/resourceLandingDurationChartWidget.tsx index 3aa73f72bcbdcb..9435c251386350 100644 --- a/static/app/views/insights/common/components/widgets/resourceLandingDurationChartWidget.tsx +++ b/static/app/views/insights/common/components/widgets/resourceLandingDurationChartWidget.tsx @@ -7,7 +7,9 @@ import {SpanMetricsField} from 'sentry/views/insights/types'; const {SPAN_SELF_TIME} = SpanMetricsField; export function ResourceLandingDurationChartWidget(props: LoadableChartWidgetProps) { - const {data, isPending, error} = useResourceLandingSeries(); + const {data, isPending, error} = useResourceLandingSeries({ + pageFilters: props.pageFilters, + }); return ( Date: Tue, 15 Apr 2025 14:35:35 -0500 Subject: [PATCH 4/6] optional --- .../components/widgets/hooks/useResourceLandingSeries.tsx | 2 +- .../components/widgets/hooks/useResourceSummarySeries.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx index 4aa671c45aad9b..686f3ea2e68224 100644 --- a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx +++ b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx @@ -38,7 +38,7 @@ interface Props { pageFilters?: PageFilters; } -export function useResourceLandingSeries(props?: Props) { +export function useResourceLandingSeries(props: Props = {}) { const filters = useResourceModuleFilters(); const spanTimeChartsFilters: ModuleFilters = { diff --git a/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx b/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx index e4a8dff06a6ff8..f8ad5a17334e6f 100644 --- a/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx +++ b/static/app/views/insights/common/components/widgets/hooks/useResourceSummarySeries.tsx @@ -18,7 +18,7 @@ interface Props { pageFilters?: PageFilters; } -export function useResourceSummarySeries({pageFilters, groupId}: Props) { +export function useResourceSummarySeries({pageFilters, groupId}: Props = {}) { const filters = useResourceModuleFilters(); const mutableSearch = MutableSearch.fromQueryObject({ From b36d178f753a52008e460ab31f6639d60f3d0c4c Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 22 Apr 2025 10:59:22 -0400 Subject: [PATCH 5/6] remove BrowserStarfishFields usage --- .../widgets/hooks/useResourceLandingSeries.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx index 686f3ea2e68224..874941a5069496 100644 --- a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx +++ b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx @@ -2,16 +2,13 @@ import type {PageFilters} from 'sentry/types/core'; import {EMPTY_OPTION_VALUE, MutableSearch} from 'sentry/utils/tokenizeSearch'; import {getResourceTypeFilter} from 'sentry/views/insights/browser/common/queries/useResourcesQuery'; import {DEFAULT_RESOURCE_TYPES} from 'sentry/views/insights/browser/resources/settings'; -import { - BrowserStarfishFields, - useResourceModuleFilters, -} from 'sentry/views/insights/browser/resources/utils/useResourceFilters'; +import {useResourceModuleFilters} from 'sentry/views/insights/browser/resources/utils/useResourceFilters'; import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; import type {ModuleFilters} from 'sentry/views/insights/common/views/spans/types'; import {SpanMetricsField} from 'sentry/views/insights/types'; -const {SPAN_SELF_TIME, NORMALIZED_DESCRIPTION, SPAN_DOMAIN} = SpanMetricsField; -const {SPAN_DOMAIN: STARFISH_SPAN_DOMAIN, USER_GEO_SUBREGION} = BrowserStarfishFields; +const {NORMALIZED_DESCRIPTION, SPAN_DOMAIN, SPAN_SELF_TIME, USER_GEO_SUBREGION} = + SpanMetricsField; const SPAN_FILTER_KEYS = ['span_operation', SPAN_DOMAIN, 'action']; @@ -43,9 +40,7 @@ export function useResourceLandingSeries(props: Props = {}) { const spanTimeChartsFilters: ModuleFilters = { 'span.op': `[${DEFAULT_RESOURCE_TYPES.join(',')}]`, - ...(filters[STARFISH_SPAN_DOMAIN] - ? {[STARFISH_SPAN_DOMAIN]: filters[STARFISH_SPAN_DOMAIN]} - : {}), + ...(filters[SPAN_DOMAIN] ? {[SPAN_DOMAIN]: filters[SPAN_DOMAIN]} : {}), }; const extraQuery = [ From 4090c5c973406b37fad914a78a361171f03ab4de Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Tue, 22 Apr 2025 11:56:03 -0400 Subject: [PATCH 6/6] Update static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx --- .../components/widgets/hooks/useResourceLandingSeries.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx index 874941a5069496..7392b688d115a5 100644 --- a/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx +++ b/static/app/views/insights/common/components/widgets/hooks/useResourceLandingSeries.tsx @@ -52,7 +52,7 @@ export function useResourceLandingSeries(props: Props = {}) { let query: string = buildDiscoverQueryConditions(spanTimeChartsFilters); - if (extraQuery) { + if (extraQuery.length) { query += ` ${extraQuery.join(' ')}`; }