From 80bcb0e29b50d35a2edc8ef73ce57f4dec3a1c21 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Fri, 11 Apr 2025 20:17:42 -0400 Subject: [PATCH 1/5] feat(insights): Refactor chart widgets to pass down prop overrides Inside of the Releases Drawers, we are only viewing a smaller slice of time than the main PageFilters. The chart widgets and their hooks need to support a pageFilters override. I think env/projects should be the same, but I think it will be more consistent to pass around the full pageFilters object. `showReleaseAs` is also needed since we currently show lines inside of the drawer, and bubbles outside of it. --- .../timeSeriesWidgetVisualization.tsx | 10 +++----- .../components/insightsTimeSeriesWidget.tsx | 14 ++++++++--- .../httpDomainSummaryDurationChartWidget.tsx | 9 +++++-- ...pDomainSummaryResponseCodesChartWidget.tsx | 11 +++++--- ...httpDomainSummaryThroughputChartWidget.tsx | 9 +++++-- .../widgets/httpDurationChartWidget.tsx | 7 ++++-- .../widgets/httpResponseCodesChartWidget.tsx | 7 ++++-- .../widgets/httpThroughputChartWidget.tsx | 7 ++++-- .../common/components/widgets/types.tsx | 25 +++++++++++++++++++ .../common/queries/useDiscoverSeries.ts | 12 ++++++--- 10 files changed, 84 insertions(+), 27 deletions(-) create mode 100644 static/app/views/insights/common/components/widgets/types.tsx diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx index 28b72f29d01bee..3bb20f5946747e 100644 --- a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx +++ b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx @@ -42,6 +42,7 @@ import type { LegendSelection, Release, } from 'sentry/views/dashboards/widgets/common/types'; +import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; import {useReleaseBubbles} from 'sentry/views/releases/releaseBubbles/useReleaseBubbles'; import {makeReleasesPathname} from 'sentry/views/releases/utils/pathnames'; @@ -55,7 +56,7 @@ import {TimeSeriesWidgetYAxis} from './timeSeriesWidgetYAxis'; const {error, warn, info} = Sentry.logger; -export interface TimeSeriesWidgetVisualizationProps { +export interface TimeSeriesWidgetVisualizationProps extends LoadableChartWidgetProps { /** * An array of `Plottable` objects. This can be any object that implements the `Plottable` interface. */ @@ -95,10 +96,6 @@ export interface TimeSeriesWidgetVisualizationProps { * Default: `auto` */ showLegend?: 'auto' | 'never'; - /** - * Show releases as either lines per release or a bubble for a group of releases. - */ - showReleaseAs?: 'bubble' | 'line'; } export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizationProps) { @@ -114,7 +111,8 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati const {register: registerWithWidgetSyncContext} = useWidgetSyncContext(); const pageFilters = usePageFilters(); - const {start, end, period, utc} = pageFilters.selection.datetime; + const {start, end, period, utc} = + props.subPageFilters?.datetime || pageFilters.selection.datetime; const theme = useTheme(); const organization = useOrganization(); diff --git a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx index 74a5c15ab956bb..5c34e52fb6ffc1 100644 --- a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx +++ b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx @@ -28,11 +28,14 @@ import { HTTP_RESPONSE_5XX_COLOR, THROUGHPUT_COLOR, } from 'sentry/views/insights/colors'; +import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; import type {DiscoverSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries'; import {convertSeriesToTimeseries} from 'sentry/views/insights/common/utils/convertSeriesToTimeseries'; import {INGESTION_DELAY} from 'sentry/views/insights/settings'; -export interface InsightsTimeSeriesWidgetProps extends WidgetTitleProps { +export interface InsightsTimeSeriesWidgetProps + extends WidgetTitleProps, + LoadableChartWidgetProps { error: Error | null; isLoading: boolean; series: DiscoverSeries[]; @@ -40,7 +43,6 @@ 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; @@ -51,7 +53,8 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) { const theme = useTheme(); const organization = useOrganization(); const pageFilters = usePageFilters(); - const {releases: releasesWithDate} = useReleaseStats(pageFilters.selection); + const pageFiltersSelection = props.subPageFilters || pageFilters.selection; + const {releases: releasesWithDate} = useReleaseStats(pageFiltersSelection); const releases = releasesWithDate?.map(({date, version}) => ({ timestamp: date, @@ -118,7 +121,7 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) { } const enableReleaseBubblesProps = organization.features.includes('release-bubbles-ui') - ? ({releases, showReleaseAs: 'bubble'} as const) + ? ({releases, showReleaseAs: props.showReleaseAs || 'bubble'} as const) : {}; return ( @@ -127,6 +130,8 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) { Title={Title} Visualization={ {}} diff --git a/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx index d489b565c50fe3..0ad04082bdfbe4 100644 --- a/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx +++ b/static/app/views/insights/common/components/widgets/httpDomainSummaryDurationChartWidget.tsx @@ -1,12 +1,15 @@ 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 type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types'; 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() { +export default function HttpDomainSummaryDurationChartWidget( + props: LoadableChartWidgetProps +) { const chartFilters = useHttpDomainSummaryChartFilter(); const { isPending: isDurationDataLoading, @@ -18,11 +21,13 @@ export default function HttpDomainSummaryDurationChartWidget() { yAxis: [`avg(${SpanMetricsField.SPAN_SELF_TIME})`], transformAliasToInputFormat: true, }, - Referrer.DOMAIN_SUMMARY_DURATION_CHART + Referrer.DOMAIN_SUMMARY_DURATION_CHART, + props.subPageFilters ); return ( { export const useSpanMetricsSeries = ( options: UseMetricsSeriesOptions = {}, - referrer: string + referrer: string, + subPageFilters?: PageFilters ) => { const useEap = useInsightsEap(); return useDiscoverSeries( options, useEap ? DiscoverDatasets.SPANS_EAP_RPC : DiscoverDatasets.SPANS_METRICS, - referrer + referrer, + subPageFilters ); }; @@ -108,7 +111,8 @@ export const useSpanIndexedSeries = < const useDiscoverSeries = ( options: UseMetricsSeriesOptions = {}, dataset: DiscoverDatasets, - referrer: string + referrer: string, + subPageFilters?: PageFilters ) => { const { search = undefined, @@ -127,7 +131,7 @@ const useDiscoverSeries = ( const eventView = getSeriesEventView( search, undefined, - pageFilters.selection, + subPageFilters || pageFilters.selection, yAxis, undefined, dataset From 9c5ad9457ef7e12588001fc9c854f832f374c6d1 Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Mon, 14 Apr 2025 13:21:43 -0500 Subject: [PATCH 2/5] partial --- .../widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx index 3bb20f5946747e..c8ff276f5dd554 100644 --- a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx +++ b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx @@ -56,7 +56,7 @@ import {TimeSeriesWidgetYAxis} from './timeSeriesWidgetYAxis'; const {error, warn, info} = Sentry.logger; -export interface TimeSeriesWidgetVisualizationProps extends LoadableChartWidgetProps { +export interface TimeSeriesWidgetVisualizationProps extends Partial { /** * An array of `Plottable` objects. This can be any object that implements the `Plottable` interface. */ From 770da7b0063b88afac8b6fa8d08de7d51f4fde0a Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Mon, 14 Apr 2025 13:22:04 -0500 Subject: [PATCH 3/5] subPageFilters -> pageFilters --- .../timeSeriesWidgetVisualization.tsx | 5 +++-- .../common/components/insightsTimeSeriesWidget.tsx | 4 ++-- .../widgets/httpDomainSummaryDurationChartWidget.tsx | 2 +- .../httpDomainSummaryResponseCodesChartWidget.tsx | 2 +- .../httpDomainSummaryThroughputChartWidget.tsx | 2 +- .../components/widgets/httpDurationChartWidget.tsx | 2 +- .../widgets/httpResponseCodesChartWidget.tsx | 2 +- .../components/widgets/httpThroughputChartWidget.tsx | 2 +- .../insights/common/components/widgets/types.tsx | 12 ++++++------ 9 files changed, 17 insertions(+), 16 deletions(-) diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx index c8ff276f5dd554..0604459118130d 100644 --- a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx +++ b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx @@ -56,7 +56,8 @@ import {TimeSeriesWidgetYAxis} from './timeSeriesWidgetYAxis'; const {error, warn, info} = Sentry.logger; -export interface TimeSeriesWidgetVisualizationProps extends Partial { +export interface TimeSeriesWidgetVisualizationProps + extends Partial { /** * An array of `Plottable` objects. This can be any object that implements the `Plottable` interface. */ @@ -112,7 +113,7 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati const pageFilters = usePageFilters(); const {start, end, period, utc} = - props.subPageFilters?.datetime || pageFilters.selection.datetime; + props.pageFilters?.datetime || pageFilters.selection.datetime; const theme = useTheme(); const organization = useOrganization(); diff --git a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx index 5c34e52fb6ffc1..a94352c66e9443 100644 --- a/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx +++ b/static/app/views/insights/common/components/insightsTimeSeriesWidget.tsx @@ -53,7 +53,7 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) { const theme = useTheme(); const organization = useOrganization(); const pageFilters = usePageFilters(); - const pageFiltersSelection = props.subPageFilters || pageFilters.selection; + const pageFiltersSelection = props.pageFilters || pageFilters.selection; const {releases: releasesWithDate} = useReleaseStats(pageFiltersSelection); const releases = releasesWithDate?.map(({date, version}) => ({ @@ -131,7 +131,7 @@ export function InsightsTimeSeriesWidget(props: InsightsTimeSeriesWidgetProps) { Visualization={ Date: Mon, 14 Apr 2025 13:57:32 -0500 Subject: [PATCH 4/5] subPageFilters -> pageFilters --- .../views/insights/common/queries/useDiscoverSeries.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/static/app/views/insights/common/queries/useDiscoverSeries.ts b/static/app/views/insights/common/queries/useDiscoverSeries.ts index d2b164220217cd..0d652ad2ae28d5 100644 --- a/static/app/views/insights/common/queries/useDiscoverSeries.ts +++ b/static/app/views/insights/common/queries/useDiscoverSeries.ts @@ -53,14 +53,14 @@ interface UseMetricsSeriesOptions { export const useSpanMetricsSeries = ( options: UseMetricsSeriesOptions = {}, referrer: string, - subPageFilters?: PageFilters + pageFilters?: PageFilters ) => { const useEap = useInsightsEap(); return useDiscoverSeries( options, useEap ? DiscoverDatasets.SPANS_EAP_RPC : DiscoverDatasets.SPANS_METRICS, referrer, - subPageFilters + pageFilters ); }; @@ -112,7 +112,7 @@ const useDiscoverSeries = ( options: UseMetricsSeriesOptions = {}, dataset: DiscoverDatasets, referrer: string, - subPageFilters?: PageFilters + pageFilters?: PageFilters ) => { const { search = undefined, @@ -121,7 +121,7 @@ const useDiscoverSeries = ( samplingMode = DEFAULT_SAMPLING_MODE, } = options; - const pageFilters = usePageFilters(); + const defaultPageFilters = usePageFilters(); const location = useLocation(); const organization = useOrganization(); @@ -131,7 +131,7 @@ const useDiscoverSeries = ( const eventView = getSeriesEventView( search, undefined, - subPageFilters || pageFilters.selection, + pageFilters || defaultPageFilters.selection, yAxis, undefined, dataset From 6cd3028cbe188d2cf1f3a3c1789bfdda6bf4d0ff Mon Sep 17 00:00:00 2001 From: Billy Vong Date: Mon, 14 Apr 2025 14:05:19 -0500 Subject: [PATCH 5/5] defaultPageFilters.isReady --- static/app/views/insights/common/queries/useDiscoverSeries.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/views/insights/common/queries/useDiscoverSeries.ts b/static/app/views/insights/common/queries/useDiscoverSeries.ts index 0d652ad2ae28d5..0a1613e12efb6f 100644 --- a/static/app/views/insights/common/queries/useDiscoverSeries.ts +++ b/static/app/views/insights/common/queries/useDiscoverSeries.ts @@ -165,7 +165,7 @@ const useDiscoverSeries = ( samplingMode === 'NONE' || !shouldSetSamplingMode ? undefined : samplingMode, }), options: { - enabled: options.enabled && pageFilters.isReady, + enabled: options.enabled && defaultPageFilters.isReady, refetchOnWindowFocus: false, retry: shouldRetryHandler, retryDelay: getRetryDelay,