ref(insights): Combine data loading + widget rendering for Insights -> Http pages

static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx

@@ -40,6 +40,7 @@ export interface InsightsTimeSeriesWidgetProps extends WidgetTitleProps {
   aliases?: Record<string, string>;
   description?: React.ReactNode;
   height?: string | number;
+  id?: string;
   interactiveTitle?: () => React.ReactNode;
   legendSelection?: LegendSelection | undefined;
   onLegendSelectionChange?: ((selection: LegendSelection) => void) | undefined;

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(',')}]`,
+        }
+      : {}),
+  };
+}

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(',')}]`,
+        }
+      : {}),
+  };
+}

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 (
+    <InsightsLineChartWidget
+      id="httpDomainSummaryDurationChartWidget"
+      title={getDurationChartTitle('http')}
+      series={[durationData[`avg(${SpanMetricsField.SPAN_SELF_TIME})`]]}
+      isLoading={isDurationDataLoading}
+      error={durationError}
+    />
+  );
+}

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 (
+    <InsightsLineChartWidget
+      id="httpDomainSummaryResponseCodesWidget"
+      title={DataTitles.unsuccessfulHTTPCodes}
+      series={[
+        responseCodeData[`http_response_rate(3)`],
+        responseCodeData[`http_response_rate(4)`],
+        responseCodeData[`http_response_rate(5)`],
+      ]}
+      aliases={FIELD_ALIASES}
+      isLoading={isResponseCodeDataLoading}
+      error={responseCodeError}
+    />
+  );
+}

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 (
+    <InsightsLineChartWidget
+      id="httpDomainSummaryThroughputChartWidget"
+      title={getThroughputChartTitle('http')}
+      series={[throughputData['epm()']]}
+      isLoading={isThroughputDataLoading}
+      error={throughputError}
+    />
+  );
+}

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 (
+    <InsightsLineChartWidget
+      id="httpDurationChartWidget"
+      title={getDurationChartTitle('http')}
+      series={[durationData['avg(span.self_time)']]}
+      isLoading={isDurationDataLoading}
+      error={durationError}
+    />
+  );
+}

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 (
+    <InsightsLineChartWidget
+      id="httpResponseCodesChartWidget"
+      title={DataTitles.unsuccessfulHTTPCodes}
+      series={[
+        responseCodeData[`http_response_rate(3)`],
+        responseCodeData[`http_response_rate(4)`],
+        responseCodeData[`http_response_rate(5)`],
+      ]}
+      aliases={FIELD_ALIASES}
+      isLoading={isResponseCodeDataLoading}
+      error={responseCodeError}
+    />
+  );
+}

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 (
+    <InsightsLineChartWidget
+      id="httpThroughputChartWidget"
+      title={getThroughputChartTitle('http')}
+      series={[throughputData['epm()']]}
+      isLoading={isThroughputDataLoading}
+      error={throughputError}
+    />
+  );
+}

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;