From bc24e5b26b45413952f207406c7efdfcf43ddd81 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Thu, 10 Apr 2025 15:23:33 -0400 Subject: [PATCH 1/5] ref(insights): Combine data loading + widget rendering for Insights -> Http pages As part of an effort to be able to [deeplink to charts via the Releases Drawer](https://github.com/getsentry/sentry/issues/88560), we need to move data fetching + chart rendering into a self-contained component (with a unique id). This refactors the widgets on `httpLandingPage` and `httpDomainSummaryPage` so that we get an idea of what this will look like. --- .../components/insightsTimeSeriesWidget.tsx | 1 + .../hooks/useHttpDomainSummaryFilter.tsx | 23 ++++ .../widgets/hooks/useHttpLandingFilter.tsx | 22 ++++ .../httpDomainSummaryDurationWidget.tsx | 33 ++++++ .../httpDomainSummaryResponseCodesWidget.tsx | 38 ++++++ .../httpDomainSummaryThroughputWidget.tsx | 32 +++++ .../components/widgets/httpDurationWidget.tsx | 32 +++++ .../widgets/httpResponseCodesWidget.tsx | 38 ++++++ .../widgets/httpThroughputWidget.tsx | 32 +++++ .../http/views/httpDomainSummaryPage.spec.tsx | 2 +- .../http/views/httpDomainSummaryPage.tsx | 93 ++------------- .../http/views/httpLandingPage.spec.tsx | 4 +- .../insights/http/views/httpLandingPage.tsx | 109 +++--------------- 13 files changed, 278 insertions(+), 181 deletions(-) create mode 100644 static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter.tsx create mode 100644 static/app/views/insights/common/components/widgets/hooks/useHttpLandingFilter.tsx create mode 100644 static/app/views/insights/common/components/widgets/httpDomainSummaryDurationWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/httpDurationWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/httpResponseCodesWidget.tsx create mode 100644 static/app/views/insights/common/components/widgets/httpThroughputWidget.tsx diff --git a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx index 4af680ef3e99e8..3e0ee2fdf69c1f 100644 --- a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx +++ b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx @@ -41,6 +41,7 @@ export interface InsightsTimeSeriesWidgetProps extends WidgetTitleProps { aliases?: Record; description?: React.ReactNode; height?: string | number; + id?: string; interactiveTitle?: () => React.ReactNode; legendSelection?: LegendSelection | undefined; onLegendSelectionChange?: ((selection: LegendSelection) => void) | undefined; diff --git a/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter.tsx b/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter.tsx new file mode 100644 index 00000000000000..fb06fef0658d7d --- /dev/null +++ b/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter.tsx @@ -0,0 +1,23 @@ +import {decodeList, decodeScalar} from 'sentry/utils/queryString'; +import {EMPTY_OPTION_VALUE, escapeFilterValue} from 'sentry/utils/tokenizeSearch'; +import useLocationQuery from 'sentry/utils/url/useLocationQuery'; +import {BASE_FILTERS} from 'sentry/views/insights/http/settings'; +import {SpanMetricsField} from 'sentry/views/insights/types'; + +export function useHttpDomainSummaryFilter() { + const {domain, [SpanMetricsField.USER_GEO_SUBREGION]: subregions} = useLocationQuery({ + fields: { + domain: decodeScalar, + [SpanMetricsField.USER_GEO_SUBREGION]: decodeList, + }, + }); + return { + ...BASE_FILTERS, + 'span.domain': domain === '' ? EMPTY_OPTION_VALUE : escapeFilterValue(domain), + ...(subregions.length > 0 + ? { + [SpanMetricsField.USER_GEO_SUBREGION]: `[${subregions.join(',')}]`, + } + : {}), + }; +} diff --git a/static/app/views/insights/common/components/widgets/hooks/useHttpLandingFilter.tsx b/static/app/views/insights/common/components/widgets/hooks/useHttpLandingFilter.tsx new file mode 100644 index 00000000000000..fe014ae0498bcd --- /dev/null +++ b/static/app/views/insights/common/components/widgets/hooks/useHttpLandingFilter.tsx @@ -0,0 +1,22 @@ +import {decodeList, decodeScalar} from 'sentry/utils/queryString'; +import useLocationQuery from 'sentry/utils/url/useLocationQuery'; +import {BASE_FILTERS} from 'sentry/views/insights/http/settings'; +import {SpanMetricsField} from 'sentry/views/insights/types'; + +export function useHttpLandingFilter() { + const query = useLocationQuery({ + fields: { + 'span.domain': decodeScalar, + [SpanMetricsField.USER_GEO_SUBREGION]: decodeList, + }, + }); + + return { + ...BASE_FILTERS, + ...(query[SpanMetricsField.USER_GEO_SUBREGION].length > 0 + ? { + [SpanMetricsField.USER_GEO_SUBREGION]: `[${query[SpanMetricsField.USER_GEO_SUBREGION].join(',')}]`, + } + : {}), + }; +} diff --git a/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationWidget.tsx new file mode 100644 index 00000000000000..49d4dd31909cce --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationWidget.tsx @@ -0,0 +1,33 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; +import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; +import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types'; +import {Referrer} from 'sentry/views/insights/http/referrers'; +import {SpanMetricsField} from 'sentry/views/insights/types'; + +export default function HttpDomainSummaryDurationWidget() { + const chartFilters = useHttpDomainSummaryFilter(); + const { + isPending: isDurationDataLoading, + data: durationData, + error: durationError, + } = useSpanMetricsSeries( + { + search: MutableSearch.fromQueryObject(chartFilters), + yAxis: [`avg(${SpanMetricsField.SPAN_SELF_TIME})`], + transformAliasToInputFormat: true, + }, + Referrer.DOMAIN_SUMMARY_DURATION_CHART + ); + + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesWidget.tsx new file mode 100644 index 00000000000000..25161211843076 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesWidget.tsx @@ -0,0 +1,38 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; +import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; +import {DataTitles} from 'sentry/views/insights/common/views/spans/types'; +import {Referrer} from 'sentry/views/insights/http/referrers'; +import {FIELD_ALIASES} from 'sentry/views/insights/http/settings'; + +export default function HttpDomainSummaryResponseCodesWidget() { + const chartFilters = useHttpDomainSummaryFilter(); + const { + isPending: isResponseCodeDataLoading, + data: responseCodeData, + error: responseCodeError, + } = useSpanMetricsSeries( + { + search: MutableSearch.fromQueryObject(chartFilters), + yAxis: ['http_response_rate(3)', 'http_response_rate(4)', 'http_response_rate(5)'], + transformAliasToInputFormat: true, + }, + Referrer.DOMAIN_SUMMARY_RESPONSE_CODE_CHART + ); + + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputWidget.tsx new file mode 100644 index 00000000000000..e9e1e83662e4bd --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputWidget.tsx @@ -0,0 +1,32 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; +import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; +import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types'; +import {Referrer} from 'sentry/views/insights/http/referrers'; + +export default function HttpDomainSummaryThroughputChart() { + const chartFilters = useHttpDomainSummaryFilter(); + const { + isPending: isThroughputDataLoading, + data: throughputData, + error: throughputError, + } = useSpanMetricsSeries( + { + search: MutableSearch.fromQueryObject(chartFilters), + yAxis: ['epm()'], + transformAliasToInputFormat: true, + }, + Referrer.DOMAIN_SUMMARY_THROUGHPUT_CHART + ); + + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/httpDurationWidget.tsx b/static/app/views/insights/common/components/widgets/httpDurationWidget.tsx new file mode 100644 index 00000000000000..d546d0fc5feaf9 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpDurationWidget.tsx @@ -0,0 +1,32 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpLandingFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpLandingFilter'; +import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; +import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types'; +import {Referrer} from 'sentry/views/insights/http/referrers'; + +export default function HttpDurationWidget() { + const chartFilters = useHttpLandingFilter(); + const { + isPending: isDurationDataLoading, + data: durationData, + error: durationError, + } = useSpanMetricsSeries( + { + search: MutableSearch.fromQueryObject(chartFilters), + yAxis: ['avg(span.self_time)'], + transformAliasToInputFormat: true, + }, + Referrer.LANDING_DURATION_CHART + ); + + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/httpResponseCodesWidget.tsx b/static/app/views/insights/common/components/widgets/httpResponseCodesWidget.tsx new file mode 100644 index 00000000000000..6ec0e37dc19c70 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpResponseCodesWidget.tsx @@ -0,0 +1,38 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpLandingFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpLandingFilter'; +import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; +import {DataTitles} from 'sentry/views/insights/common/views/spans/types'; +import {Referrer} from 'sentry/views/insights/http/referrers'; +import {FIELD_ALIASES} from 'sentry/views/insights/http/settings'; + +export default function HttpResponseCodesWidget() { + const chartFilters = useHttpLandingFilter(); + const { + isPending: isResponseCodeDataLoading, + data: responseCodeData, + error: responseCodeError, + } = useSpanMetricsSeries( + { + search: MutableSearch.fromQueryObject(chartFilters), + yAxis: ['http_response_rate(3)', 'http_response_rate(4)', 'http_response_rate(5)'], + transformAliasToInputFormat: true, + }, + Referrer.LANDING_RESPONSE_CODE_CHART + ); + + return ( + + ); +} diff --git a/static/app/views/insights/common/components/widgets/httpThroughputWidget.tsx b/static/app/views/insights/common/components/widgets/httpThroughputWidget.tsx new file mode 100644 index 00000000000000..ce22315ad4f850 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpThroughputWidget.tsx @@ -0,0 +1,32 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpLandingFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpLandingFilter'; +import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; +import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types'; +import {Referrer} from 'sentry/views/insights/http/referrers'; + +export default function HttpThroughputWidget() { + const chartFilters = useHttpLandingFilter(); + const { + isPending: isThroughputDataLoading, + data: throughputData, + error: throughputError, + } = useSpanMetricsSeries( + { + search: MutableSearch.fromQueryObject(chartFilters), + yAxis: ['epm()'], + transformAliasToInputFormat: true, + }, + Referrer.LANDING_THROUGHPUT_CHART + ); + + return ( + + ); +} diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.spec.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.spec.tsx index d8fbf6c3ebcd4b..402528be7d9f10 100644 --- a/static/app/views/insights/http/views/httpDomainSummaryPage.spec.tsx +++ b/static/app/views/insights/http/views/httpDomainSummaryPage.spec.tsx @@ -17,7 +17,7 @@ import {useReleaseStats} from 'sentry/utils/useReleaseStats'; jest.mock('sentry/utils/useReleaseStats'); -describe('HTTPSummaryPage', function () { +describe('HTTPDomainSummaryPage', function () { const organization = OrganizationFixture({features: ['insights-initial-modules']}); let throughputRequestMock!: jest.Mock; diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx index 8fa9171f7bfd13..7575a1caaacc5f 100644 --- a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx +++ b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx @@ -7,11 +7,7 @@ import ExternalLink from 'sentry/components/links/externalLink'; import {t, tct} from 'sentry/locale'; import {DurationUnit, RateUnit} from 'sentry/utils/discover/fields'; import {decodeList, decodeScalar, decodeSorts} from 'sentry/utils/queryString'; -import { - EMPTY_OPTION_VALUE, - escapeFilterValue, - MutableSearch, -} from 'sentry/utils/tokenizeSearch'; +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import useProjects from 'sentry/utils/useProjects'; import {HeaderContainer} from 'sentry/views/insights/common/components/headerContainer'; @@ -22,14 +18,15 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper'; import {ReadoutRibbon, ToolRibbon} from 'sentry/views/insights/common/components/ribbon'; import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell'; +import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; +import HttpDomainSummaryDurationWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryDurationWidget'; +import HttpDomainSummaryResponseCodesWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryResponseCodesWidget'; +import HttpDomainSummaryThroughputChart from 'sentry/views/insights/common/components/widgets/httpDomainSummaryThroughputWidget'; import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover'; -import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters'; import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector'; import { DataTitles, - getDurationChartTitle, - getThroughputChartTitle, getThroughputTitle, } from 'sentry/views/insights/common/views/spans/types'; import {DomainStatusLink} from 'sentry/views/insights/http/components/domainStatusLink'; @@ -40,8 +37,6 @@ import { } from 'sentry/views/insights/http/components/tables/domainTransactionsTable'; import {Referrer} from 'sentry/views/insights/http/referrers'; import { - BASE_FILTERS, - FIELD_ALIASES, MODULE_DOC_LINK, NULL_DOMAIN_DESCRIPTION, } from 'sentry/views/insights/http/settings'; @@ -52,22 +47,20 @@ import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/se import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader'; import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings'; import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters'; -import type {SpanMetricsQueryFilters} from 'sentry/views/insights/types'; import {ModuleName, SpanFunction, SpanMetricsField} from 'sentry/views/insights/types'; -import {InsightsLineChartWidget} from '../../common/components/insightsLineChartWidget'; import {useSamplesDrawer} from '../../common/utils/useSamplesDrawer'; export function HTTPDomainSummaryPage() { const {projects} = useProjects(); const {view} = useDomainViewFilters(); + const filters = useHttpDomainSummaryFilter(); const { domain, project: projectId, [QueryParameterNames.TRANSACTIONS_CURSOR]: cursor, [QueryParameterNames.TRANSACTIONS_SORT]: sortField, - [SpanMetricsField.USER_GEO_SUBREGION]: subregions, } = useLocationQuery({ fields: { project: decodeScalar, @@ -87,15 +80,6 @@ export function HTTPDomainSummaryPage() { }); const project = projects.find(p => projectId === p.id); - const filters: SpanMetricsQueryFilters = { - ...BASE_FILTERS, - 'span.domain': domain === '' ? EMPTY_OPTION_VALUE : escapeFilterValue(domain), - ...(subregions.length > 0 - ? { - [SpanMetricsField.USER_GEO_SUBREGION]: `[${subregions.join(',')}]`, - } - : {}), - }; const {data: domainMetrics, isPending: areDomainMetricsLoading} = useSpanMetrics( { @@ -113,45 +97,6 @@ export function HTTPDomainSummaryPage() { Referrer.DOMAIN_SUMMARY_METRICS_RIBBON ); - const { - isPending: isThroughputDataLoading, - data: throughputData, - error: throughputError, - } = useSpanMetricsSeries( - { - search: MutableSearch.fromQueryObject(filters), - yAxis: ['epm()'], - transformAliasToInputFormat: true, - }, - Referrer.DOMAIN_SUMMARY_THROUGHPUT_CHART - ); - - const { - isPending: isDurationDataLoading, - data: durationData, - error: durationError, - } = useSpanMetricsSeries( - { - search: MutableSearch.fromQueryObject(filters), - yAxis: [`avg(${SpanMetricsField.SPAN_SELF_TIME})`], - transformAliasToInputFormat: true, - }, - Referrer.DOMAIN_SUMMARY_DURATION_CHART - ); - - const { - isPending: isResponseCodeDataLoading, - data: responseCodeData, - error: responseCodeError, - } = useSpanMetricsSeries( - { - search: MutableSearch.fromQueryObject(filters), - yAxis: ['http_response_rate(3)', 'http_response_rate(4)', 'http_response_rate(5)'], - transformAliasToInputFormat: true, - }, - Referrer.DOMAIN_SUMMARY_RESPONSE_CODE_CHART - ); - const { isPending: isTransactionsListLoading, data: transactionsList, @@ -284,35 +229,15 @@ export function HTTPDomainSummaryPage() { - + - + - + diff --git a/static/app/views/insights/http/views/httpLandingPage.spec.tsx b/static/app/views/insights/http/views/httpLandingPage.spec.tsx index 11eb6a2886f429..fd4867ae9aaf77 100644 --- a/static/app/views/insights/http/views/httpLandingPage.spec.tsx +++ b/static/app/views/insights/http/views/httpLandingPage.spec.tsx @@ -260,6 +260,8 @@ describe('HTTPLandingPage', function () { it('fetches module data', async function () { render(, {organization}); + await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator')); + expect(throughputRequestMock).toHaveBeenNthCalledWith( 1, `/organizations/${organization.slug}/events-stats/`, @@ -388,8 +390,6 @@ describe('HTTPLandingPage', function () { }, }) ); - - await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator')); }); it('renders a list of domains', async function () { diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx index 402c2eac9125e0..7c5107e4d63647 100644 --- a/static/app/views/insights/http/views/httpLandingPage.tsx +++ b/static/app/views/insights/http/views/httpLandingPage.tsx @@ -4,7 +4,7 @@ import * as Layout from 'sentry/components/layouts/thirds'; import SearchBar from 'sentry/components/searchBar'; import {t} from 'sentry/locale'; import {trackAnalytics} from 'sentry/utils/analytics'; -import {decodeList, decodeScalar, decodeSorts} from 'sentry/utils/queryString'; +import {decodeScalar, decodeSorts} from 'sentry/utils/queryString'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import {useLocation} from 'sentry/utils/useLocation'; @@ -16,8 +16,11 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding'; import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper'; import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon'; +import {useHttpLandingFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpLandingFilter'; +import HttpDurationWidget from 'sentry/views/insights/common/components/widgets/httpDurationWidget'; +import HttpResponseCodesWidget from 'sentry/views/insights/common/components/widgets/httpResponseCodesWidget'; +import HttpThroughputWidget from 'sentry/views/insights/common/components/widgets/httpThroughputWidget'; import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover'; -import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters'; import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector'; import { @@ -25,7 +28,6 @@ import { isAValidSort, } from 'sentry/views/insights/http/components/tables/domainsTable'; import {Referrer} from 'sentry/views/insights/http/referrers'; -import {BASE_FILTERS, FIELD_ALIASES} from 'sentry/views/insights/http/settings'; import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader'; import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings'; import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader'; @@ -33,14 +35,7 @@ import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/se import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader'; import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings'; import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters'; -import {ModuleName, SpanMetricsField} from 'sentry/views/insights/types'; - -import {InsightsLineChartWidget} from '../../common/components/insightsLineChartWidget'; -import { - DataTitles, - getDurationChartTitle, - getThroughputChartTitle, -} from '../../common/views/spans/types'; +import {ModuleName} from 'sentry/views/insights/types'; export function HTTPLandingPage() { const organization = useOrganization(); @@ -48,38 +43,23 @@ export function HTTPLandingPage() { const location = useLocation(); const {view} = useDomainViewFilters(); - const sortField = decodeScalar(location.query?.[QueryParameterNames.DOMAINS_SORT]); - - // TODO: Pull this using `useLocationQuery` below - const sort = decodeSorts(sortField).find(isAValidSort) ?? DEFAULT_SORT; - const query = useLocationQuery({ fields: { 'span.domain': decodeScalar, - [SpanMetricsField.USER_GEO_SUBREGION]: decodeList, + [QueryParameterNames.DOMAINS_SORT]: decodeScalar, }, }); + const sort = + decodeSorts(QueryParameterNames.DOMAINS_SORT).find(isAValidSort) ?? DEFAULT_SORT; + const cursor = decodeScalar(location.query?.[QueryParameterNames.DOMAINS_CURSOR]); - const ADDITIONAL_FILTERS: {[SpanMetricsField.USER_GEO_SUBREGION]?: string} = {}; - - if (query[SpanMetricsField.USER_GEO_SUBREGION].length > 0) { - ADDITIONAL_FILTERS[SpanMetricsField.USER_GEO_SUBREGION] = - `[${query[SpanMetricsField.USER_GEO_SUBREGION].join(',')}]`; - } - - const chartFilters = { - ...BASE_FILTERS, - ...ADDITIONAL_FILTERS, - }; + const chartFilters = useHttpLandingFilter(); const tableFilters = { - ...BASE_FILTERS, - ...ADDITIONAL_FILTERS, + ...chartFilters, 'span.domain': query['span.domain'] ? `*${query['span.domain']}*` : undefined, }; - const cursor = decodeScalar(location.query?.[QueryParameterNames.DOMAINS_CURSOR]); - const handleSearch = (newDomain: string) => { trackAnalytics('insight.general.search', { organization, @@ -96,45 +76,6 @@ export function HTTPLandingPage() { }); }; - const { - isPending: isThroughputDataLoading, - data: throughputData, - error: throughputError, - } = useSpanMetricsSeries( - { - search: MutableSearch.fromQueryObject(chartFilters), - yAxis: ['epm()'], - transformAliasToInputFormat: true, - }, - Referrer.LANDING_THROUGHPUT_CHART - ); - - const { - isPending: isDurationDataLoading, - data: durationData, - error: durationError, - } = useSpanMetricsSeries( - { - search: MutableSearch.fromQueryObject(chartFilters), - yAxis: ['avg(span.self_time)'], - transformAliasToInputFormat: true, - }, - Referrer.LANDING_DURATION_CHART - ); - - const { - isPending: isResponseCodeDataLoading, - data: responseCodeData, - error: responseCodeError, - } = useSpanMetricsSeries( - { - search: MutableSearch.fromQueryObject(chartFilters), - yAxis: ['http_response_rate(3)', 'http_response_rate(4)', 'http_response_rate(5)'], - transformAliasToInputFormat: true, - }, - Referrer.LANDING_RESPONSE_CODE_CHART - ); - const domainsListResponse = useSpanMetrics( { search: MutableSearch.fromQueryObject(tableFilters), @@ -182,35 +123,15 @@ export function HTTPLandingPage() { - + - + - + From 22e96bc2bd1c053c914361f0abd2b810422ec86f Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 11 Apr 2025 10:20:03 -0400 Subject: [PATCH 2/5] rename to include Chart --- ...gFilter.tsx => useHttpLandingChartFilter.tsx} | 2 +- ... => httpDomainSummaryDurationChartWidget.tsx} | 4 ++-- ...ttpDomainSummaryResponseCodesChartWidget.tsx} | 0 ...> httpDomainSummaryThroughputChartWidget.tsx} | 4 ++-- ...ionWidget.tsx => httpDurationChartWidget.tsx} | 8 ++++---- ...dget.tsx => httpResponseCodesChartWidget.tsx} | 8 ++++---- ...tWidget.tsx => httpThroughputChartWidget.tsx} | 8 ++++---- .../insights/http/views/httpLandingPage.tsx | 16 ++++++++-------- 8 files changed, 25 insertions(+), 25 deletions(-) rename static/app/views/insights/common/components/widgets/hooks/{useHttpLandingFilter.tsx => useHttpLandingChartFilter.tsx} (93%) rename static/app/views/insights/common/components/widgets/{httpDomainSummaryDurationWidget.tsx => httpDomainSummaryDurationChartWidget.tsx} (91%) rename static/app/views/insights/common/components/widgets/{httpDomainSummaryResponseCodesWidget.tsx => httpDomainSummaryResponseCodesChartWidget.tsx} (100%) rename static/app/views/insights/common/components/widgets/{httpDomainSummaryThroughputWidget.tsx => httpDomainSummaryThroughputChartWidget.tsx} (90%) rename static/app/views/insights/common/components/widgets/{httpDurationWidget.tsx => httpDurationChartWidget.tsx} (78%) rename static/app/views/insights/common/components/widgets/{httpResponseCodesWidget.tsx => httpResponseCodesChartWidget.tsx} (81%) rename static/app/views/insights/common/components/widgets/{httpThroughputWidget.tsx => httpThroughputChartWidget.tsx} (77%) diff --git a/static/app/views/insights/common/components/widgets/hooks/useHttpLandingFilter.tsx b/static/app/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter.tsx similarity index 93% rename from static/app/views/insights/common/components/widgets/hooks/useHttpLandingFilter.tsx rename to static/app/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter.tsx index fe014ae0498bcd..4a75693f2983ae 100644 --- a/static/app/views/insights/common/components/widgets/hooks/useHttpLandingFilter.tsx +++ b/static/app/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter.tsx @@ -3,7 +3,7 @@ import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import {BASE_FILTERS} from 'sentry/views/insights/http/settings'; import {SpanMetricsField} from 'sentry/views/insights/types'; -export function useHttpLandingFilter() { +export function useHttpLandingChartFilter() { const query = useLocationQuery({ fields: { 'span.domain': decodeScalar, diff --git a/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx similarity index 91% rename from static/app/views/insights/common/components/widgets/httpDomainSummaryDurationWidget.tsx rename to static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx index 49d4dd31909cce..c29f15ffb7d423 100644 --- a/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationWidget.tsx +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx @@ -6,7 +6,7 @@ import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/ty import {Referrer} from 'sentry/views/insights/http/referrers'; import {SpanMetricsField} from 'sentry/views/insights/types'; -export default function HttpDomainSummaryDurationWidget() { +export default function HttpDomainSummaryDurationChartWidget() { const chartFilters = useHttpDomainSummaryFilter(); const { isPending: isDurationDataLoading, @@ -23,7 +23,7 @@ export default function HttpDomainSummaryDurationWidget() { return ( - + - + - + From 646513f25b55a209e32de8ddccd2259aaa1446ca Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 11 Apr 2025 10:22:42 -0400 Subject: [PATCH 3/5] update DomainSummaryPage --- .../insights/http/views/httpDomainSummaryPage.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx index 7575a1caaacc5f..8c968dbc66e2f8 100644 --- a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx +++ b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx @@ -19,9 +19,9 @@ import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/modu import {ReadoutRibbon, ToolRibbon} from 'sentry/views/insights/common/components/ribbon'; import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell'; import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; -import HttpDomainSummaryDurationWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryDurationWidget'; -import HttpDomainSummaryResponseCodesWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryResponseCodesWidget'; -import HttpDomainSummaryThroughputChart from 'sentry/views/insights/common/components/widgets/httpDomainSummaryThroughputWidget'; +import HttpDomainSummaryDurationChartWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget'; +import HttpDomainSummaryResponseCodesChartWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget'; +import HttpDomainSummaryThroughputChartWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryThroughputChartWidget'; import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover'; import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters'; import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector'; @@ -229,15 +229,15 @@ export function HTTPDomainSummaryPage() { - + - + - + From b9d30f82cda8ee1e1fb38d478ffc624e152cfb16 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 11 Apr 2025 10:25:58 -0400 Subject: [PATCH 4/5] update domain summary hook --- ...nSummaryFilter.tsx => useHttpDomainSummaryChartFilter.tsx} | 2 +- .../widgets/httpDomainSummaryDurationChartWidget.tsx | 4 ++-- .../widgets/httpDomainSummaryResponseCodesChartWidget.tsx | 4 ++-- .../widgets/httpDomainSummaryThroughputChartWidget.tsx | 4 ++-- .../app/views/insights/http/views/httpDomainSummaryPage.tsx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) rename static/app/views/insights/common/components/widgets/hooks/{useHttpDomainSummaryFilter.tsx => useHttpDomainSummaryChartFilter.tsx} (93%) diff --git a/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter.tsx b/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter.tsx similarity index 93% rename from static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter.tsx rename to static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter.tsx index fb06fef0658d7d..585e23b4605eb2 100644 --- a/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter.tsx +++ b/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter.tsx @@ -4,7 +4,7 @@ import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import {BASE_FILTERS} from 'sentry/views/insights/http/settings'; import {SpanMetricsField} from 'sentry/views/insights/types'; -export function useHttpDomainSummaryFilter() { +export function useHttpDomainSummaryChartFilter() { const {domain, [SpanMetricsField.USER_GEO_SUBREGION]: subregions} = useLocationQuery({ fields: { domain: decodeScalar, diff --git a/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx index c29f15ffb7d423..d489b565c50fe3 100644 --- a/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx @@ -1,13 +1,13 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; -import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; +import {useHttpDomainSummaryChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter'; import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; import {getDurationChartTitle} from 'sentry/views/insights/common/views/spans/types'; import {Referrer} from 'sentry/views/insights/http/referrers'; import {SpanMetricsField} from 'sentry/views/insights/types'; export default function HttpDomainSummaryDurationChartWidget() { - const chartFilters = useHttpDomainSummaryFilter(); + const chartFilters = useHttpDomainSummaryChartFilter(); const { isPending: isDurationDataLoading, data: durationData, diff --git a/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget.tsx index 25161211843076..a6ce3b7953aa3c 100644 --- a/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget.tsx +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget.tsx @@ -1,13 +1,13 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; -import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; +import {useHttpDomainSummaryChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter'; import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; import {DataTitles} from 'sentry/views/insights/common/views/spans/types'; import {Referrer} from 'sentry/views/insights/http/referrers'; import {FIELD_ALIASES} from 'sentry/views/insights/http/settings'; export default function HttpDomainSummaryResponseCodesWidget() { - const chartFilters = useHttpDomainSummaryFilter(); + const chartFilters = useHttpDomainSummaryChartFilter(); const { isPending: isResponseCodeDataLoading, data: responseCodeData, diff --git a/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputChartWidget.tsx index 1e6d17237d7ab0..2039afbeeb976c 100644 --- a/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputChartWidget.tsx +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputChartWidget.tsx @@ -1,12 +1,12 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; -import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; +import {useHttpDomainSummaryChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter'; import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; import {getThroughputChartTitle} from 'sentry/views/insights/common/views/spans/types'; import {Referrer} from 'sentry/views/insights/http/referrers'; export default function HttpDomainSummaryThroughputChartWidget() { - const chartFilters = useHttpDomainSummaryFilter(); + const chartFilters = useHttpDomainSummaryChartFilter(); const { isPending: isThroughputDataLoading, data: throughputData, diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx index 8c968dbc66e2f8..899ded6e394bdc 100644 --- a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx +++ b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx @@ -18,7 +18,7 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper'; import {ReadoutRibbon, ToolRibbon} from 'sentry/views/insights/common/components/ribbon'; import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell'; -import {useHttpDomainSummaryFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryFilter'; +import {useHttpDomainSummaryChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter'; import HttpDomainSummaryDurationChartWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget'; import HttpDomainSummaryResponseCodesChartWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget'; import HttpDomainSummaryThroughputChartWidget from 'sentry/views/insights/common/components/widgets/httpDomainSummaryThroughputChartWidget'; @@ -54,7 +54,7 @@ import {useSamplesDrawer} from '../../common/utils/useSamplesDrawer'; export function HTTPDomainSummaryPage() { const {projects} = useProjects(); const {view} = useDomainViewFilters(); - const filters = useHttpDomainSummaryFilter(); + const filters = useHttpDomainSummaryChartFilter(); const { domain, From fb21801d4d0c4e93a7a6552d9bf45a23e9e42f12 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 11 Apr 2025 12:43:53 -0400 Subject: [PATCH 5/5] fix lint errors --- .../app/views/insights/http/views/httpDomainSummaryPage.tsx | 1 - static/app/views/insights/http/views/httpLandingPage.tsx | 6 ------ 2 files changed, 7 deletions(-) diff --git a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx index d44d5d15136475..6ef800133e5388 100644 --- a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx +++ b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx @@ -11,7 +11,6 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import useProjects from 'sentry/utils/useProjects'; import {HeaderContainer} from 'sentry/views/insights/common/components/headerContainer'; -import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout'; import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout'; import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar'; diff --git a/static/app/views/insights/http/views/httpLandingPage.tsx b/static/app/views/insights/http/views/httpLandingPage.tsx index 5a0f592b015982..77a1a1b48f4612 100644 --- a/static/app/views/insights/http/views/httpLandingPage.tsx +++ b/static/app/views/insights/http/views/httpLandingPage.tsx @@ -10,7 +10,6 @@ import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import {useLocation} from 'sentry/utils/useLocation'; import {useNavigate} from 'sentry/utils/useNavigate'; import useOrganization from 'sentry/utils/useOrganization'; -import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout'; import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar'; import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders'; @@ -24,11 +23,6 @@ import HttpThroughputChartWidget from 'sentry/views/insights/common/components/w import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover'; import {QueryParameterNames} from 'sentry/views/insights/common/views/queryParameters'; import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector'; -import { - DataTitles, - getDurationChartTitle, - getThroughputChartTitle, -} from 'sentry/views/insights/common/views/spans/types'; import { DomainsTable, isAValidSort,