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',
}),