diff --git a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx index 7cd3be429c2178..74a5c15ab956bb 100644 --- a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx +++ b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx @@ -40,6 +40,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/useHttpDomainSummaryChartFilter.tsx b/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter.tsx new file mode 100644 index 00000000000000..585e23b4605eb2 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/hooks/useHttpDomainSummaryChartFilter.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 useHttpDomainSummaryChartFilter() { + 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/useHttpLandingChartFilter.tsx b/static/app/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter.tsx new file mode 100644 index 00000000000000..4a75693f2983ae --- /dev/null +++ b/static/app/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter.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 useHttpLandingChartFilter() { + 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/httpDomainSummaryDurationChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx new file mode 100644 index 00000000000000..d489b565c50fe3 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx @@ -0,0 +1,33 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +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 = useHttpDomainSummaryChartFilter(); + 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/httpDomainSummaryResponseCodesChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget.tsx new file mode 100644 index 00000000000000..a6ce3b7953aa3c --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryResponseCodesChartWidget.tsx @@ -0,0 +1,38 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +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 = useHttpDomainSummaryChartFilter(); + 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/httpDomainSummaryThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputChartWidget.tsx new file mode 100644 index 00000000000000..2039afbeeb976c --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryThroughputChartWidget.tsx @@ -0,0 +1,32 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +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 = useHttpDomainSummaryChartFilter(); + 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/httpDurationChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpDurationChartWidget.tsx new file mode 100644 index 00000000000000..6aaf88d4ff484b --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpDurationChartWidget.tsx @@ -0,0 +1,32 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpLandingChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter'; +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 HttpDurationChartWidget() { + const chartFilters = useHttpLandingChartFilter(); + 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/httpResponseCodesChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpResponseCodesChartWidget.tsx new file mode 100644 index 00000000000000..9db626b2c36746 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpResponseCodesChartWidget.tsx @@ -0,0 +1,38 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpLandingChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter'; +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 HttpResponseCodesChartWidget() { + const chartFilters = useHttpLandingChartFilter(); + 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/httpThroughputChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpThroughputChartWidget.tsx new file mode 100644 index 00000000000000..99d264c83f5b91 --- /dev/null +++ b/static/app/views/insights/common/components/widgets/httpThroughputChartWidget.tsx @@ -0,0 +1,32 @@ +import {MutableSearch} from 'sentry/utils/tokenizeSearch'; +import {InsightsLineChartWidget} from 'sentry/views/insights/common/components/insightsLineChartWidget'; +import {useHttpLandingChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter'; +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 HttpThroughputChartWidget() { + const chartFilters = useHttpLandingChartFilter(); + 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 fd7925459dd60a..6ef800133e5388 100644 --- a/static/app/views/insights/http/views/httpDomainSummaryPage.tsx +++ b/static/app/views/insights/http/views/httpDomainSummaryPage.tsx @@ -7,15 +7,10 @@ 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'; -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'; @@ -23,15 +18,16 @@ 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 {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'; import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover'; -import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; import {useSamplesDrawer} from 'sentry/views/insights/common/utils/useSamplesDrawer'; 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'; @@ -42,8 +38,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'; @@ -54,19 +48,18 @@ 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'; export function HTTPDomainSummaryPage() { const {projects} = useProjects(); const {view} = useDomainViewFilters(); + const filters = useHttpDomainSummaryChartFilter(); const { domain, project: projectId, [QueryParameterNames.TRANSACTIONS_CURSOR]: cursor, [QueryParameterNames.TRANSACTIONS_SORT]: sortField, - [SpanMetricsField.USER_GEO_SUBREGION]: subregions, } = useLocationQuery({ fields: { project: decodeScalar, @@ -86,15 +79,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( { @@ -112,45 +96,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, @@ -283,35 +228,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 83264db9fcec0b..77a1a1b48f4612 100644 --- a/static/app/views/insights/http/views/httpLandingPage.tsx +++ b/static/app/views/insights/http/views/httpLandingPage.tsx @@ -4,34 +4,30 @@ 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'; 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'; 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 {useHttpLandingChartFilter} from 'sentry/views/insights/common/components/widgets/hooks/useHttpLandingChartFilter'; +import HttpDurationChartWidget from 'sentry/views/insights/common/components/widgets/httpDurationChartWidget'; +import HttpResponseCodesChartWidget from 'sentry/views/insights/common/components/widgets/httpResponseCodesChartWidget'; +import HttpThroughputChartWidget from 'sentry/views/insights/common/components/widgets/httpThroughputChartWidget'; 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, -} from 'sentry/views/insights/common/views/spans/types'; import { DomainsTable, 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'; @@ -39,7 +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 {ModuleName} from 'sentry/views/insights/types'; export function HTTPLandingPage() { const organization = useOrganization(); @@ -47,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 = useHttpLandingChartFilter(); 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, @@ -95,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), @@ -181,35 +123,15 @@ export function HTTPLandingPage() { - + - + - +