From cf0657124c42d70f69eea45568170d4d1d863af2 Mon Sep 17 00:00:00 2001 From: k-fish Date: Fri, 5 Nov 2021 10:01:49 -0400 Subject: [PATCH 1/6] fix(perf): Disable zoom in histogram widget This disables the zoom in the histogram widget for now until we introduce a reset or some way to zoom out. --- static/app/views/performance/landing/chart/histogramChart.tsx | 4 +++- .../performance/landing/widgets/widgets/histogramWidget.tsx | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/static/app/views/performance/landing/chart/histogramChart.tsx b/static/app/views/performance/landing/chart/histogramChart.tsx index cc399cd4b6ab1e..b04d9a0ff4f2df 100644 --- a/static/app/views/performance/landing/chart/histogramChart.tsx +++ b/static/app/views/performance/landing/chart/histogramChart.tsx @@ -118,6 +118,7 @@ type ChartProps = { height?: number; grid?: BarChart['props']['grid']; disableXAxis?: boolean; + disableZoom?: boolean; colors?: string[]; }; @@ -132,6 +133,7 @@ export function Chart(props: ChartProps) { height, grid, disableXAxis, + disableZoom, colors, } = props; if (!chartData) { @@ -199,7 +201,7 @@ export function Chart(props: ChartProps) { } } stacked - {...zoomRenderProps} + {...(disableZoom ? {} : zoomRenderProps)} /> ), fixed: , diff --git a/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx b/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx index a06a124d7d03ca..8b08641f70e4ad 100644 --- a/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx @@ -80,6 +80,7 @@ export function HistogramWidget(props: Props) { field={props.fields[0]} chartData={provided.widgetData.chart?.data?.[props.fields[0]]} disableXAxis + disableZoom /> ), height: 160, From f9081cb9915c32e0a21d61b3dbf99338e71a79e9 Mon Sep 17 00:00:00 2001 From: k-fish Date: Fri, 5 Nov 2021 10:08:18 -0400 Subject: [PATCH 2/6] Add additional widget types to pageload and frontend other views Frontend other can have both http requests for retrieving data as well as resource ops due to chunk loading techniques (webpack) --- .../app/views/performance/landing/views/frontendOtherView.tsx | 2 ++ .../views/performance/landing/views/frontendPageloadView.tsx | 3 +++ 2 files changed, 5 insertions(+) diff --git a/static/app/views/performance/landing/views/frontendOtherView.tsx b/static/app/views/performance/landing/views/frontendOtherView.tsx index 1bf2f94192dc6c..ba445f364c948f 100644 --- a/static/app/views/performance/landing/views/frontendOtherView.tsx +++ b/static/app/views/performance/landing/views/frontendOtherView.tsx @@ -30,6 +30,8 @@ export function FrontendOtherView(props: BasePerformanceViewProps) { allowedCharts={[ PerformanceWidgetSetting.MOST_RELATED_ERRORS, PerformanceWidgetSetting.MOST_RELATED_ISSUES, + PerformanceWidgetSetting.SLOW_HTTP_OPS, + PerformanceWidgetSetting.SLOW_RESOURCE_OPS, ]} />
Date: Fri, 5 Nov 2021 10:28:12 -0400 Subject: [PATCH 3/6] Fix reloading when switching periods for singleFieldAreaWidget --- .../widgets/widgets/histogramWidget.tsx | 2 +- .../widgets/widgets/lineChartListWidget.tsx | 4 +- .../widgets/widgets/singleFieldAreaWidget.tsx | 66 ++++++++++--------- .../landing/widgets/widgets/trendsWidget.tsx | 2 +- .../landing/widgets/widgetContainer.spec.jsx | 6 -- 5 files changed, 39 insertions(+), 41 deletions(-) diff --git a/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx b/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx index 8b08641f70e4ad..15aebe6eb50994 100644 --- a/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/histogramWidget.tsx @@ -50,7 +50,7 @@ export function HistogramWidget(props: Props) { transform: transformHistogramQuery, }, }; - }, [props.eventView.query, props.fields[0], props.organization.slug]); + }, [props.eventView, props.fields[0], props.organization.slug]); const onFilterChange = () => {}; diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index 1a870e8a900b38..c046a85e7924f4 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -114,7 +114,7 @@ export function LineChartListWidget(props: Props) { }, transform: transformDiscoverToList, }), - [props.eventView.query, field, props.organization.slug] + [props.eventView, field, props.organization.slug] ); const chartQuery = useMemo>(() => { @@ -168,7 +168,7 @@ export function LineChartListWidget(props: Props) { }, transform: transformEventsRequestToArea, }; - }, [props.eventView.query, field, props.organization.slug, selectedListIndex]); + }, [props.eventView, field, props.organization.slug, selectedListIndex]); const Queries = { list: listQuery, diff --git a/static/app/views/performance/landing/widgets/widgets/singleFieldAreaWidget.tsx b/static/app/views/performance/landing/widgets/widgets/singleFieldAreaWidget.tsx index 4b56d10331ae5a..6b5e028ab27861 100644 --- a/static/app/views/performance/landing/widgets/widgets/singleFieldAreaWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/singleFieldAreaWidget.tsx @@ -2,6 +2,7 @@ import {Fragment, FunctionComponent, useMemo} from 'react'; import {withRouter} from 'react-router'; import styled from '@emotion/styled'; import {Location} from 'history'; +import pick from 'lodash/pick'; import _EventsRequest from 'app/components/charts/eventsRequest'; import {getInterval} from 'app/components/charts/utils'; @@ -13,7 +14,7 @@ import _DurationChart from 'app/views/performance/charts/chart'; import {GenericPerformanceWidget} from '../components/performanceWidget'; import {transformEventsRequestToArea} from '../transforms/transformEventsToArea'; -import {WidgetDataResult} from '../types'; +import {QueryDefinition, WidgetDataResult} from '../types'; type Props = { title: string; @@ -28,7 +29,7 @@ type Props = { ContainerActions: FunctionComponent<{isLoading: boolean}>; }; -type AreaDataType = { +type DataType = { chart: WidgetDataResult & ReturnType; }; @@ -39,38 +40,41 @@ export function SingleFieldAreaWidget(props: Props) { if (props.fields.length !== 1) { throw new Error(`Single field area can only accept a single field (${props.fields})`); } + const field = props.fields[0]; - const Queries = useMemo(() => { - return { - chart: { - fields: props.fields[0], - component: provided => ( - - ), - transform: transformEventsRequestToArea, - }, - }; - }, [props.eventView.query, props.fields[0], props.organization.slug]); + const chart = useMemo>( + () => ({ + fields: props.fields[0], + component: provided => ( + + ), + transform: transformEventsRequestToArea, + }), + [props.eventView, field, props.organization.slug] + ); + + const Queries = { + chart, + }; return ( - + {...props} Subtitle={() => ( {t('Compared to last %s ', globalSelection.datetime.period)} diff --git a/static/app/views/performance/landing/widgets/widgets/trendsWidget.tsx b/static/app/views/performance/landing/widgets/widgets/trendsWidget.tsx index e69faa7b92d3c7..ac31c4694222c7 100644 --- a/static/app/views/performance/landing/widgets/widgets/trendsWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/trendsWidget.tsx @@ -84,7 +84,7 @@ export function TrendsWidget(props: Props) { ), transform: transformTrendsDiscover, }), - [eventView.query, eventView.fields, trendChangeType] + [eventView, trendChangeType] ); const Queries = { diff --git a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx index 6ee0a25436c549..1fc6a8d1b8eeeb 100644 --- a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx +++ b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx @@ -70,10 +70,8 @@ describe('Performance > Widgets > WidgetContainer', function () { expect.anything(), expect.objectContaining({ query: expect.objectContaining({ - environment: [], interval: '1h', partial: '1', - project: [], query: '', statsPeriod: '28d', yAxis: 'tpm()', @@ -104,10 +102,8 @@ describe('Performance > Widgets > WidgetContainer', function () { expect.anything(), expect.objectContaining({ query: expect.objectContaining({ - environment: [], interval: '1h', partial: '1', - project: [], query: '', statsPeriod: '28d', yAxis: 'failure_rate()', @@ -138,10 +134,8 @@ describe('Performance > Widgets > WidgetContainer', function () { expect.anything(), expect.objectContaining({ query: expect.objectContaining({ - environment: [], interval: '1h', partial: '1', - project: [], query: '', statsPeriod: '28d', yAxis: 'user_misery()', From 58dd9c3409905493c065beb92749d89939c5aa8e Mon Sep 17 00:00:00 2001 From: k-fish Date: Fri, 5 Nov 2021 10:31:13 -0400 Subject: [PATCH 4/6] Stop issues breaking when temporarily switching to it by catching if the data is null for the selectedListIndex picking out of the array. --- .../landing/widgets/widgets/lineChartListWidget.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index c046a85e7924f4..be780e1aeb99df 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -125,10 +125,16 @@ export function LineChartListWidget(props: Props) { fields: field, component: provided => { const eventView = props.eventView.clone(); + if (!provided.widgetData.list.data[selectedListIndex]?.transaction) { + return null; + } eventView.additionalConditions.setFilterValues('transaction', [ provided.widgetData.list.data[selectedListIndex].transaction as string, ]); if (props.chartSetting === PerformanceWidgetSetting.MOST_RELATED_ISSUES) { + if (!provided.widgetData.list.data[selectedListIndex]?.issue) { + return null; + } eventView.fields = [ {field: 'issue'}, {field: 'issue.id'}, From f5e5dcf3e0c837cc27b9de9276ec7ad23301d347 Mon Sep 17 00:00:00 2001 From: k-fish Date: Fri, 5 Nov 2021 10:33:04 -0400 Subject: [PATCH 5/6] Only pick required props for EventsRequest --- .../landing/widgets/widgets/lineChartListWidget.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index be780e1aeb99df..04cca405facf79 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -2,6 +2,7 @@ import {Fragment, FunctionComponent, useMemo, useState} from 'react'; import {withRouter} from 'react-router'; import styled from '@emotion/styled'; import {Location} from 'history'; +import pick from 'lodash/pick'; import _EventsRequest from 'app/components/charts/eventsRequest'; import {getInterval} from 'app/components/charts/utils'; @@ -154,7 +155,7 @@ export function LineChartListWidget(props: Props) { } return ( Date: Fri, 5 Nov 2021 10:37:54 -0400 Subject: [PATCH 6/6] Have condition to remove 0 value items from the list widgets also apply to related errors and related issues. --- .../landing/widgets/widgets/lineChartListWidget.tsx | 3 ++- .../performance/landing/widgets/widgetContainer.spec.jsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index 04cca405facf79..a32a1185889860 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -93,7 +93,6 @@ 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'}, @@ -104,6 +103,8 @@ export function LineChartListWidget(props: Props) { // Most related errors eventView.fields = [{field: 'transaction'}, {field: 'project.id'}, {field}]; } + // Don't retrieve list items with 0 in the field. + eventView.additionalConditions.setFilterValues(field, ['>0']); return ( Widgets > WidgetContainer', function () { field: ['transaction', 'project.id', 'failure_count()'], per_page: 3, project: [], - query: '', + query: 'failure_count():>0', sort: '-failure_count()', statsPeriod: '14d', }), @@ -288,7 +288,7 @@ describe('Performance > Widgets > WidgetContainer', function () { field: ['issue', 'transaction', 'title', 'project.id', 'count()'], per_page: 3, project: [], - query: 'event.type:error !tags[transaction]:""', + query: 'event.type:error !tags[transaction]:"" count():>0', sort: '-count()', statsPeriod: '14d', }),