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.

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

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;