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/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, ]} />
{}; @@ -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, diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index 1a870e8a900b38..a32a1185889860 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'; @@ -92,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'}, @@ -103,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 ( >(() => { @@ -125,10 +127,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'}, @@ -148,7 +156,7 @@ export function LineChartListWidget(props: Props) { } return ( ; }; -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..0ddadb85dfbf19 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()', @@ -260,7 +254,7 @@ describe('Performance > Widgets > WidgetContainer', function () { field: ['transaction', 'project.id', 'failure_count()'], per_page: 3, project: [], - query: '', + query: 'failure_count():>0', sort: '-failure_count()', statsPeriod: '14d', }), @@ -294,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', }),