From 1090979cb893277c3ff231240f17fe9ac550b4d8 Mon Sep 17 00:00:00 2001
From: Matt Quinn <matt.quinn@sentry.io>
Date: Thu, 29 Aug 2024 16:07:20 -0400
Subject: [PATCH] feat(queries): filter charts with command/table dropdowns
 (#76637)

Currently, the Command and Table dropdowns only filter the query table.
It would be more useful if they filtered the throughput and duration
charts too.

Move the filter dropdowns up above the charts and then filter the charts
by their selected values.
---
 .../views/databaseLandingPage.spec.tsx        | 101 ++++++++++++++++++
 .../database/views/databaseLandingPage.tsx    |  31 +++---
 2 files changed, 120 insertions(+), 12 deletions(-)

diff --git a/static/app/views/insights/database/views/databaseLandingPage.spec.tsx b/static/app/views/insights/database/views/databaseLandingPage.spec.tsx
index 31595a29e08fff..a35871ed650db1 100644
--- a/static/app/views/insights/database/views/databaseLandingPage.spec.tsx
+++ b/static/app/views/insights/database/views/databaseLandingPage.spec.tsx
@@ -225,4 +225,105 @@ describe('DatabaseLandingPage', function () {
       screen.getByRole('cell', {name: 'SELECT * FROM organizations'})
     ).toBeInTheDocument();
   });
+
+  it('filters by category and action', async function () {
+    jest.mocked(useLocation).mockReturnValue({
+      pathname: '',
+      search: '',
+      query: {
+        statsPeriod: '10d',
+        'span.action': 'SELECT',
+        'span.domain': 'organizations',
+      },
+      hash: '',
+      state: undefined,
+      action: 'PUSH',
+      key: '',
+    });
+
+    jest.spyOn(console, 'error').mockImplementation(jest.fn()); // This silences pointless unique key errors that React throws because of the tokenized query descriptions
+
+    render(<DatabaseLandingPage />, {organization});
+
+    await waitForElementToBeRemoved(() => screen.queryAllByTestId('loading-indicator'));
+
+    expect(spanChartsRequestMock).toHaveBeenNthCalledWith(
+      1,
+      `/organizations/${organization.slug}/events-stats/`,
+      expect.objectContaining({
+        method: 'GET',
+        query: {
+          cursor: undefined,
+          dataset: 'spansMetrics',
+          environment: [],
+          excludeOther: 0,
+          field: [],
+          interval: '30m',
+          orderby: undefined,
+          partial: 1,
+          per_page: 50,
+          project: [],
+          query:
+            'span.module:db has:span.description span.action:SELECT span.domain:organizations',
+          referrer: 'api.starfish.span-landing-page-metrics-chart',
+          statsPeriod: '10d',
+          topEvents: undefined,
+          yAxis: 'spm()',
+        },
+      })
+    );
+
+    expect(spanChartsRequestMock).toHaveBeenNthCalledWith(
+      2,
+      `/organizations/${organization.slug}/events-stats/`,
+      expect.objectContaining({
+        method: 'GET',
+        query: {
+          cursor: undefined,
+          dataset: 'spansMetrics',
+          environment: [],
+          excludeOther: 0,
+          field: [],
+          interval: '30m',
+          orderby: undefined,
+          partial: 1,
+          per_page: 50,
+          project: [],
+          query:
+            'span.module:db has:span.description span.action:SELECT span.domain:organizations',
+          referrer: 'api.starfish.span-landing-page-metrics-chart',
+          statsPeriod: '10d',
+          topEvents: undefined,
+          yAxis: 'avg(span.self_time)',
+        },
+      })
+    );
+
+    expect(spanListRequestMock).toHaveBeenCalledWith(
+      `/organizations/${organization.slug}/events/`,
+      expect.objectContaining({
+        method: 'GET',
+        query: {
+          dataset: 'spansMetrics',
+          environment: [],
+          field: [
+            'project.id',
+            'span.group',
+            'span.description',
+            'spm()',
+            'avg(span.self_time)',
+            'sum(span.self_time)',
+            'time_spent_percentage()',
+          ],
+          per_page: 25,
+          project: [],
+          query:
+            'span.module:db has:span.description span.action:SELECT span.domain:organizations',
+          referrer: 'api.starfish.use-span-list',
+          sort: '-time_spent_percentage()',
+          statsPeriod: '10d',
+        },
+      })
+    );
+  });
 });
diff --git a/static/app/views/insights/database/views/databaseLandingPage.tsx b/static/app/views/insights/database/views/databaseLandingPage.tsx
index d972da2ffb401b..4ae40ccb532e91 100644
--- a/static/app/views/insights/database/views/databaseLandingPage.tsx
+++ b/static/app/views/insights/database/views/databaseLandingPage.tsx
@@ -21,7 +21,6 @@ import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLay
 import {ModulePageFilterBar} from 'sentry/views/insights/common/components/modulePageFilterBar';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModulesOnboarding} from 'sentry/views/insights/common/components/modulesOnboarding';
-import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
 import {useSpanMetrics} from 'sentry/views/insights/common/queries/useDiscover';
 import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
 import {useHasFirstSpan} from 'sentry/views/insights/common/queries/useHasFirstSpan';
@@ -82,7 +81,11 @@ export function DatabaseLandingPage() {
     });
   };
 
-  const chartFilters = BASE_FILTERS;
+  const chartFilters = {
+    ...BASE_FILTERS,
+    'span.action': spanAction,
+    'span.domain': spanDomain,
+  };
 
   const tableFilters = {
     ...BASE_FILTERS,
@@ -184,9 +187,13 @@ export function DatabaseLandingPage() {
             <ModuleLayout.Full>
               <PageFilterWrapper>
                 <ModulePageFilterBar moduleName={ModuleName.DB} />
-                {organization.features.includes(
-                  'performance-queries-mongodb-extraction'
-                ) && <DatabaseSystemSelector />}
+                <DbFilterWrapper>
+                  {organization.features.includes(
+                    'performance-queries-mongodb-extraction'
+                  ) && <DatabaseSystemSelector />}
+                  <ActionSelector moduleName={moduleName} value={spanAction ?? ''} />
+                  <DomainSelector moduleName={moduleName} value={spanDomain ?? ''} />
+                </DbFilterWrapper>
               </PageFilterWrapper>
             </ModuleLayout.Full>
             <ModulesOnboarding moduleName={ModuleName.DB}>
@@ -206,13 +213,6 @@ export function DatabaseLandingPage() {
                 />
               </ModuleLayout.Half>
 
-              <ModuleLayout.Full>
-                <ToolRibbon>
-                  <ActionSelector moduleName={moduleName} value={spanAction ?? ''} />
-                  <DomainSelector moduleName={moduleName} value={spanDomain ?? ''} />
-                </ToolRibbon>
-              </ModuleLayout.Full>
-
               <ModuleLayout.Full>
                 <SearchBar
                   query={spanDescription}
@@ -262,6 +262,13 @@ function PageWithProviders() {
 const PageFilterWrapper = styled('div')`
   display: flex;
   gap: ${space(3)};
+  flex-wrap: wrap;
+`;
+
+const DbFilterWrapper = styled('div')`
+  display: flex;
+  gap: ${space(3)};
+  flex-wrap: wrap;
 `;
 
 export default PageWithProviders;