Add AdHocFilters and GroupBy vars in scenes-react

packages/scenes-app/src/react-demo/DynamicVariablesPage.tsx

@@ -1,10 +1,20 @@
-import { CustomVariable, DataSourceVariable, QueryVariable, VariableControl } from '@grafana/scenes-react';
+import {
+  AdHocFiltersVariable,
+  CustomVariable,
+  DataSourceVariable,
+  GroupByVariable,
+  QueryVariable,
+  VariableControl,
+  VizPanel,
+  useQueryRunner,
+} from '@grafana/scenes-react';
 import { Button, Stack } from '@grafana/ui';
 import React from 'react';
 import { PageWrapper } from './PageWrapper';
 import { PlainGraphWithRandomWalk } from './PlainGraphWithRandomWalk';
 import { DemoVizLayout } from './utils';
 import { VariableHide, VariableRefresh, VariableSort } from '@grafana/schema';
+import { VizConfigBuilders } from '@grafana/scenes';
 
 export function DynamicVariablesPage() {
   const [regexDsVar, setRegexDsVar] = React.useState<string | undefined>(undefined);
@@ -41,12 +51,12 @@ export function DynamicVariablesPage() {
           </DemoVizLayout>
         </Stack>
       </DataSourceVariable>
-      <QueryVariable 
-        name="job2" 
+      <QueryVariable
+        name="job2"
         initialValue="A"
-        query={{ query: '*', refId: 'A' }} 
-        datasource={{ uid: 'gdev-testdata' }} 
-        regex={regexQueryVar} 
+        query={{ query: '*', refId: 'A' }}
+        datasource={{ uid: 'gdev-testdata' }}
+        regex={regexQueryVar}
         hide={hide}
         refresh={VariableRefresh.onTimeRangeChanged}
         includeAll={includeAll}
@@ -74,7 +84,7 @@ export function DynamicVariablesPage() {
               Remove include all
             </Button>
             <Button variant="secondary" onClick={() => setSort(VariableSort.alphabeticalAsc)}>
-              Sort asc
+              Sort asc{' '}
             </Button>
             <Button variant="secondary" onClick={() => setSort(VariableSort.alphabeticalDesc)}>
               Sort desc
@@ -85,6 +95,85 @@ export function DynamicVariablesPage() {
           </DemoVizLayout>
         </Stack>
       </QueryVariable>
+      <GroupByVariable
+        name="groupBy"
+        initialValue="instance"
+        datasource={{ uid: 'gdev-prometheus' }}
+        label="Group by"
+        defaultOptions={[
+          { text: 'Instance', value: 'instance' },
+          { text: 'Job', value: 'job' },
+          { text: 'Cluster', value: 'cluster' },
+        ]}
+      >
+        <Stack direction="column">
+          <Stack>
+            <VariableControl name="groupBy" />
+          </Stack>
+          <DemoVizLayout>
+            <TableWithAggregatedPrometheusData />
+          </DemoVizLayout>
+        </Stack>
+      </GroupByVariable>
+      <AdHocFiltersVariable
+        name="test_var"
+        datasource={{ uid: 'gdev-prometheus' }}
+        label="AdHocFilers var"
+        baseFilters={[{ key: '__name__', operator: '=', value: 'ALERTS', condition: '' }]}
+        supportsMultiValueOperators={true}
+      >
+        <Stack direction="column">
+          <Stack>
+            <VariableControl name="test_var" />
+          </Stack>
+          <DemoVizLayout>
+            <TableWithPrometheusData />
+          </DemoVizLayout>
+        </Stack>
+      </AdHocFiltersVariable>
     </PageWrapper>
   );
+  //These demos should be moved to individual tabs in the future. this is getting cumbersome
+}
+
+export function TableWithAggregatedPrometheusData() {
+  const queries = [
+    {
+      datasource: { uid: 'gdev-prometheus' },
+      refId: 'A',
+      expr: 'count(ALERTS)',
+      format: 'table',
+      instant: true,
+    },
+  ];
+
+  const tableGraph = VizConfigBuilders.table().build();
+  const dataProvider = useQueryRunner({
+    queries,
+    maxDataPoints: 20,
+    cacheKey: [queries],
+  });
+
+  return <VizPanel title={'Table panel'} viz={tableGraph} dataProvider={dataProvider} />;
+}
+
+export function TableWithPrometheusData() {
+  const queries = [
+    {
+      datasource: { uid: 'gdev-prometheus' },
+      refId: 'A',
+      expr: 'ALERTS',
+      format: 'table',
+      instant: true,
+    },
+  ];
+
+  const tableGraph = VizConfigBuilders.table().build();
+  const dataProvider = useQueryRunner({
+    queries,
+    maxDataPoints: 20,
+    cacheKey: [queries],
+  });
+
+  return <VizPanel title={'Table panel'} viz={tableGraph} dataProvider={dataProvider} />;
 }

packages/scenes-react/src/index.ts

@@ -7,6 +7,8 @@ export { VizPanel } from './components/VizPanel';
 export { RefreshPicker } from './components/RefreshPicker';
 export { DataLayerControl } from './components/DataLayerControl';
 export { CustomVariable } from './variables/CustomVariable';
+export { GroupByVariable } from './variables/GroupByVariable';
+export { AdHocFiltersVariable } from './variables/AdHocFiltersVariable';
 export { DataSourceVariable } from './variables/DataSourceVariable';
 export { QueryVariable } from './variables/QueryVariable';
 export { Breadcrumb, BreadcrumbContext, BreadcrumbProvider } from './contexts/BreadcrumbContext';

packages/scenes-react/src/variables/AdHocFiltersVariable.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import { ControlsLayout, AdHocFiltersVariable as AdHocFiltersVariableObject } from '@grafana/scenes';
+import { useSceneContext } from '../hooks/hooks';
+import { VariableProps } from './types';
+import { AdHocVariableFilter, MetricFindValue } from '@grafana/data';
+import { DataSourceRef } from '@grafana/schema';
+import {
+  AdHocVariableExpressionBuilderFn,
+  getTagKeysProvider,
+  getTagValuesProvider,
+} from '@grafana/scenes/src/variables/adhoc/AdHocFiltersVariable';
+
+export interface AdHocFiltersVariableProps extends VariableProps {
+  datasource: DataSourceRef | null;
+  children: React.ReactNode;
+  addFilterButtonText?: string;
+  baseFilters?: AdHocVariableFilter[];
+  readOnly?: boolean;
+  layout?: ControlsLayout;
+  applyMode?: 'auto' | 'manual';
+  tagKeyRegexFilter?: RegExp;
+  getTagKeysProvider?: getTagKeysProvider;
+  getTagValuesProvider?: getTagValuesProvider;
+  defaultKeys?: MetricFindValue[];
+  filterExpression?: string;
+  expressionBuilder?: AdHocVariableExpressionBuilderFn;
+  supportsMultiValueOperators?: boolean;
+  useQueriesAsFilterForOptions?: boolean;
+  allowCustomValue?: boolean;
+  //initialValue??
+}
+
+export function AdHocFiltersVariable({
+  name,
+  label,
+  hide,
+  //initialValue???
+  datasource,
+  baseFilters,
+  readOnly,
+  layout,
+  applyMode = 'auto',
+  tagKeyRegexFilter,
+  getTagKeysProvider,
+  getTagValuesProvider,
+  defaultKeys,
+  filterExpression,
+  expressionBuilder,
+  supportsMultiValueOperators,
+  useQueriesAsFilterForOptions,
+  allowCustomValue,
+  children,
+}: AdHocFiltersVariableProps): React.ReactNode {
+  const scene = useSceneContext();
+  const [variableAdded, setVariableAdded] = useState<boolean>();
+
+  let variable: AdHocFiltersVariableObject | undefined = scene.findVariable(name);
+
+  if (!variable) {
+    variable = new AdHocFiltersVariableObject({
+      name,
+      label,
+      hide,
+      datasource,
+      baseFilters,
+      readOnly,
+      layout,
+      applyMode,
+      tagKeyRegexFilter,
+      getTagKeysProvider,
+      getTagValuesProvider,
+      defaultKeys,
+      filterExpression,
+      expressionBuilder,
+      supportsMultiValueOperators,
+      useQueriesAsFilterForOptions,
+      allowCustomValue,
+    });
+  }
+
+  useEffect(() => {
+    const removeFn = scene.addVariable(variable);
+    setVariableAdded(true);
+    return removeFn;
+  }, [variable, scene, name]);
+
+  useEffect(() => {
+    variable?.setState({
+      label,
+      hide,
+      datasource,
+      baseFilters,
+      readOnly,
+      layout,
+      applyMode,
+      tagKeyRegexFilter,
+      getTagKeysProvider,
+      getTagValuesProvider,
+      defaultKeys,
+      filterExpression,
+      expressionBuilder,
+      supportsMultiValueOperators,
+      useQueriesAsFilterForOptions,
+      allowCustomValue,
+    });
+  }, [
+    allowCustomValue,
+    applyMode,
+    baseFilters,
+    datasource,
+    defaultKeys,
+    expressionBuilder,
+    filterExpression,
+    getTagKeysProvider,
+    getTagValuesProvider,
+    hide,
+    label,
+    layout,
+    readOnly,
+    scene,
+    supportsMultiValueOperators,
+    tagKeyRegexFilter,
+    useQueriesAsFilterForOptions,
+    variable,
+  ]);
+
+  // Need to block child rendering until the variable is added so that child components like RVariableSelect find the variable
+  if (!variableAdded) {
+    return null;
+  }
+
+  return children;
+}

packages/scenes-react/src/variables/GroupByVariable.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { ControlsLayout, GroupByVariable as GroupByVariableObject } from '@grafana/scenes';
+import { useSceneContext } from '../hooks/hooks';
+import { VariableProps } from './types';
+import { AdHocVariableFilter, MetricFindValue } from '@grafana/data';
+import { getTagKeysProvider } from '@grafana/scenes/src/variables/groupby/GroupByVariable';
+import { DataSourceRef } from '@grafana/schema';
+
+export interface GroupByVariableProps extends VariableProps {
+  datasource: DataSourceRef | null;
+  children: React.ReactNode;
+  defaultOptions?: MetricFindValue[];
+  baseFilters?: AdHocVariableFilter[];
+  readOnly?: boolean;
+  layout?: ControlsLayout;
+  applyMode?: 'auto' | 'manual';
+  tagKeyRegexFilter?: RegExp;
+  getTagKeysProvider?: getTagKeysProvider;
+  allowCustomValue?: boolean;
+}
+
+export function GroupByVariable({
+  name,
+  label,
+  hide,
+  initialValue,
+  datasource,
+  defaultOptions,
+  baseFilters,
+  readOnly,
+  layout,
+  applyMode = 'auto',
+  tagKeyRegexFilter,
+  getTagKeysProvider,
+  allowCustomValue,
+  children,
+}: GroupByVariableProps): React.ReactNode {
+  const scene = useSceneContext();
+  const [variableAdded, setVariableAdded] = useState<boolean>();
+
+  let variable: GroupByVariableObject | undefined = scene.findVariable(name);
+
+  if (initialValue && !Array.isArray(initialValue)) {
+    initialValue = [initialValue];
+  }
+
+  if (!variable) {
+    variable = new GroupByVariableObject({
+      name,
+      label,
+      datasource,
+      value: initialValue,
+      hide,
+      defaultOptions,
+      baseFilters,
+      readOnly,
+      layout,
+      applyMode,
+      tagKeyRegexFilter,
+      getTagKeysProvider,
+      allowCustomValue,
+    });
+  }
+
+  useEffect(() => {
+    const removeFn = scene.addVariable(variable);
+    setVariableAdded(true);
+    return removeFn;
+  }, [variable, scene, name]);
+
+  useEffect(() => {
+    variable?.setState({
+      label,
+      datasource,
+      hide,
+      defaultOptions,
+      baseFilters,
+      readOnly,
+      layout,
+      applyMode,
+      tagKeyRegexFilter,
+      getTagKeysProvider,
+      allowCustomValue,
+    });
+  }, [
+    allowCustomValue,
+    applyMode,
+    baseFilters,
+    datasource,
+    defaultOptions,
+    getTagKeysProvider,
+    hide,
+    initialValue,
+    label,
+    layout,
+    readOnly,
+    tagKeyRegexFilter,
+    variable,
+  ]);
+
+  // Need to block child rendering until the variable is added so that child components like RVariableSelect find the variable
+  if (!variableAdded) {
+    return null;
+  }
+
+  return children;
+}