diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx index a04df6f72e31c3..543730313980c2 100644 --- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx +++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx @@ -5,6 +5,7 @@ import {Location} from 'history'; import _EventsRequest from 'app/components/charts/eventsRequest'; import {getInterval} from 'app/components/charts/utils'; +import EmptyStateWarning from 'app/components/emptyStateWarning'; import Link from 'app/components/links/link'; import Tooltip from 'app/components/tooltip'; import Truncate from 'app/components/truncate'; @@ -181,6 +182,9 @@ export function LineChartListWidget(props: Props) { HeaderActions={provided => ( )} + EmptyComponent={() => ( + {t('No results')} + )} Queries={Queries} Visualizations={[ { @@ -319,3 +323,8 @@ const StyledIconClose = styled(IconClose)` color: ${p => p.theme.gray300}; } `; + +const StyledEmptyStateWarning = styled(EmptyStateWarning)` + min-height: 300px; + justify-content: center; +`; 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 3d65d647736a14..6ee0a25436c549 100644 --- a/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx +++ b/tests/js/spec/views/performance/landing/widgets/widgetContainer.spec.jsx @@ -380,6 +380,48 @@ describe('Performance > Widgets > WidgetContainer', function () { ); }); + it('Most slow frames widget', async function () { + const data = initializeData(); + + const wrapper = mountWithTheme( + , + data.routerContext + ); + await tick(); + wrapper.update(); + + expect(wrapper.find('div[data-test-id="performance-widget-title"]').text()).toEqual( + 'Most Slow Frames' + ); + + expect(eventsV2Mock).toHaveBeenCalledTimes(1); + expect(eventsV2Mock).toHaveBeenNthCalledWith( + 1, + expect.anything(), + expect.objectContaining({ + query: expect.objectContaining({ + environment: [], + field: [ + 'transaction', + 'project.id', + 'epm()', + 'p75(measurements.frames_slow_rate)', + ], + per_page: 3, + project: [], + query: 'epm():>0.01 p75(measurements.frames_slow_rate):>0', + sort: '-p75(measurements.frames_slow_rate)', + statsPeriod: '14d', + }), + }) + ); + + expect(wrapper.find('div[data-test-id="empty-message"]').exists()).toBe(true); + }); + it('Able to change widget type from menu', async function () { const data = initializeData();