Alerting: visualizing data when creating/editing alerting rule. (#34191)

* VizWrapper to handle some state * alertingqueryrunner first edition * added so we always set name and uid when changing datasource. * wip. * wip * added support for canceling requests. * util for getting time ranges for expression queries * remove logs, store data in state * merge from run branch * incremental commit * viz working * added structure for marble testing. * paddings and move viz picker * less height for viz, less width on rows * change so the expression buttons doesnt submit form. * fixed run button. * replaced mocks with implementation that will set default query + expression. * merge with run queries * fixed so we set a datasource name for the default expression rule. * improving expression guard. * lots of styling fixes for viz * adding placeholder for relative time range. * fixed story. * added basic structure to handle open/close of time range picker. * removed section from TimeOptions since it isn't used any where. * adding mapper and tests * move relativetimepicker to its own dir * added some simple tests. * changed test. * use relativetimerangeinput * redo state management * refactored the tests. * replace timerange with relativetimerange * wip * wip * did some refactoring. * refactored time option formatting. * added proper formatting and display of time range. * add relative time description, slight refactor of height * fixed incorrect import. * added validator and changed formatting. * removed unused dep. * reverted back to internal function. * fixed display of relative time range picker. * fixed failing tests. * fixed parsing issue. * fixed position of time range picker. * some more refactorings. * fixed validation of really big values. * added another test. * restored the step2 check. * fixed merge issue. * Update packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com> * reverted change. * fixed merge conflict. * fixed todo. * sort some paddings * replace theme with theme2 Co-authored-by: Peter Holmberg <peter.hlmbrg@gmail.com> Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
2025-02-25 18:55:37 -06:00 · 2021-05-18 16:16:26 +02:00
parent 3db0b4ad93
commit 2aa1a051f0
10 changed files with 305 additions and 54 deletions
--- a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
@@ -0,0 +1,112 @@
+import React, { FC, useState } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { css } from '@emotion/css';
+import { GrafanaTheme2, PanelData, VizOrientation } from '@grafana/data';
+import { config, PanelRenderer } from '@grafana/runtime';
+import {
+  LegendDisplayMode,
+  SingleStatBaseOptions,
+  TooltipDisplayMode,
+  RadioButtonGroup,
+  useStyles2,
+} from '@grafana/ui';
+
+const TIMESERIES = 'timeseries';
+const TABLE = 'table';
+const STAT = 'stat';
+
+interface Props {
+  data: PanelData;
+  defaultPanel?: 'timeseries' | 'table' | 'stat';
+}
+
+export const VizWrapper: FC<Props> = ({ data, defaultPanel }) => {
+  const [pluginId, changePluginId] = useState<string>(defaultPanel ?? TIMESERIES);
+  const options = { ...getOptionsForPanelPlugin(pluginId) };
+  const styles = useStyles2(getStyles);
+  const panels = getSupportedPanels();
+
+  if (!options || !data) {
+    return null;
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.buttonGroup}>
+        <RadioButtonGroup options={panels} value={pluginId} onChange={changePluginId} />
+      </div>
+      <div style={{ height: '200px', width: '100%' }}>
+        <AutoSizer style={{ width: '100%', height: '100%' }}>
+          {({ width, height }) => {
+            if (width === 0 || height === 0) {
+              return null;
+            }
+            return (
+              <PanelRenderer
+                height={height}
+                width={width}
+                data={data}
+                pluginId={pluginId}
+                title="title"
+                onOptionsChange={() => {}}
+                options={options}
+              />
+            );
+          }}
+        </AutoSizer>
+      </div>
+    </div>
+  );
+};
+
+const getSupportedPanels = () => {
+  return Object.values(config.panels)
+    .filter((p) => p.id === TIMESERIES || p.id === TABLE || p.id === STAT)
+    .map((panel) => ({ value: panel.id, label: panel.name, imgUrl: panel.info.logos.small }));
+};
+
+const getOptionsForPanelPlugin = (panelPlugin: string) => {
+  switch (panelPlugin) {
+    case STAT:
+      return singleStatOptions;
+    case TABLE:
+      return tableOptions;
+    case TIMESERIES:
+      return timeSeriesOptions;
+    default:
+      return undefined;
+  }
+};
+
+const timeSeriesOptions = {
+  legend: {
+    displayMode: LegendDisplayMode.List,
+    placement: 'bottom',
+    calcs: [],
+  },
+  tooltipOptions: {
+    mode: TooltipDisplayMode.Single,
+  },
+};
+
+const tableOptions = {
+  frameIndex: 0,
+  showHeader: true,
+};
+const singleStatOptions: SingleStatBaseOptions = {
+  reduceOptions: {
+    calcs: [],
+  },
+  orientation: VizOrientation.Auto,
+  text: undefined,
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    padding: 0 ${theme.spacing(2)};
+  `,
+  buttonGroup: css`
+    display: flex;
+    justify-content: flex-end;
+  `,
+});