diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index b1b6b0ff7b0566..a04df6f72e31c3 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -48,6 +48,15 @@ type DataType = { list: WidgetDataResult & ReturnType; }; +const slowList = [ + PerformanceWidgetSetting.SLOW_HTTP_OPS, + PerformanceWidgetSetting.SLOW_DB_OPS, + PerformanceWidgetSetting.SLOW_BROWSER_OPS, + PerformanceWidgetSetting.SLOW_RESOURCE_OPS, + PerformanceWidgetSetting.MOST_SLOW_FRAMES, + PerformanceWidgetSetting.MOST_FROZEN_FRAMES, +]; + export function LineChartListWidget(props: Props) { const [selectedListIndex, setSelectListIndex] = useState(0); const {ContainerActions} = props; @@ -57,31 +66,24 @@ export function LineChartListWidget(props: Props) { `Line chart list widget can only accept a single field (${props.fields})` ); } + const field = props.fields[0]; - const slowList = [ - PerformanceWidgetSetting.SLOW_HTTP_OPS, - PerformanceWidgetSetting.SLOW_DB_OPS, - PerformanceWidgetSetting.SLOW_BROWSER_OPS, - PerformanceWidgetSetting.SLOW_RESOURCE_OPS, - PerformanceWidgetSetting.MOST_SLOW_FRAMES, - PerformanceWidgetSetting.MOST_FROZEN_FRAMES, - ]; const isSlowestType = slowList.includes(props.chartSetting); const eventView = props.eventView.clone(); const listQuery = useMemo>( () => ({ - fields: props.fields[0], + fields: field, component: provided => { - eventView.sorts = [{kind: 'desc', field: props.fields[0]}]; + eventView.sorts = [{kind: 'desc', field}]; if (props.chartSetting === PerformanceWidgetSetting.MOST_RELATED_ISSUES) { eventView.fields = [ {field: 'issue'}, {field: 'transaction'}, {field: 'title'}, {field: 'project.id'}, - {field: props.fields[0]}, + {field}, ]; eventView.additionalConditions.setFilterValues('event.type', ['error']); eventView.additionalConditions.setFilterValues('!tags[transaction]', ['']); @@ -90,19 +92,16 @@ export function LineChartListWidget(props: Props) { eventView.query = mutableSearch.formatString(); } else if (isSlowestType) { eventView.additionalConditions.setFilterValues('epm()', ['>0.01']); + eventView.additionalConditions.setFilterValues(field, ['>0']); eventView.fields = [ {field: 'transaction'}, {field: 'project.id'}, {field: 'epm()'}, - {field: props.fields[0]}, + {field}, ]; } else { // Most related errors - eventView.fields = [ - {field: 'transaction'}, - {field: 'project.id'}, - {field: props.fields[0]}, - ]; + eventView.fields = [{field: 'transaction'}, {field: 'project.id'}, {field}]; } return ( >(() => { @@ -123,7 +122,7 @@ export function LineChartListWidget(props: Props) { enabled: widgetData => { return !!widgetData?.list?.data?.length; }, - fields: props.fields[0], + fields: field, component: provided => { eventView.additionalConditions.setFilterValues('transaction', [ provided.widgetData.list.data[selectedListIndex].transaction as string, @@ -133,7 +132,7 @@ export function LineChartListWidget(props: Props) { {field: 'issue'}, {field: 'issue.id'}, {field: 'transaction'}, - {field: props.fields[0]}, + {field}, ]; eventView.additionalConditions.setFilterValues('issue', [ provided.widgetData.list.data[selectedListIndex].issue as string, @@ -144,7 +143,7 @@ export function LineChartListWidget(props: Props) { mutableSearch.removeFilter('transaction.duration'); eventView.query = mutableSearch.formatString(); } else { - eventView.fields = [{field: 'transaction'}, {field: props.fields[0]}]; + eventView.fields = [{field: 'transaction'}, {field}]; } return (