Alerting: Optimize how much space a table viz takes (#34396)

* optimize table height

* use gridSize

public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx

@@ -1,19 +1,12 @@
 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 { GrafanaTheme2, PanelData } 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';
+import { RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { PanelOptions } from 'app/plugins/panel/table/models.gen';
+import { useVizHeight } from '../../hooks/useVizHeight';
+import { STAT, TABLE, TIMESERIES } from '../../utils/constants';
 
 interface Props {
   data: PanelData;
@@ -22,9 +15,13 @@ interface Props {
 
 export const VizWrapper: FC<Props> = ({ data, defaultPanel }) => {
   const [pluginId, changePluginId] = useState<string>(defaultPanel ?? TIMESERIES);
-  const options = { ...getOptionsForPanelPlugin(pluginId) };
-  const styles = useStyles2(getStyles);
+  const [options, setOptions] = useState<PanelOptions>({
+    frameIndex: 0,
+    showHeader: true,
+  });
   const panels = getSupportedPanels();
+  const vizHeight = useVizHeight(data, pluginId, options.frameIndex);
+  const styles = useStyles2(getStyles);
 
   if (!options || !data) {
     return null;
@@ -35,7 +32,7 @@ export const VizWrapper: FC<Props> = ({ data, defaultPanel }) => {
       <div className={styles.buttonGroup}>
         <RadioButtonGroup options={panels} value={pluginId} onChange={changePluginId} />
       </div>
-      <div style={{ height: '200px', width: '100%' }}>
+      <div style={{ height: vizHeight, width: '100%' }}>
         <AutoSizer style={{ width: '100%', height: '100%' }}>
           {({ width, height }) => {
             if (width === 0 || height === 0) {
@@ -48,7 +45,7 @@ export const VizWrapper: FC<Props> = ({ data, defaultPanel }) => {
                 data={data}
                 pluginId={pluginId}
                 title="title"
-                onOptionsChange={() => {}}
+                onOptionsChange={setOptions}
                 options={options}
               />
             );
@@ -65,46 +62,14 @@ const getSupportedPanels = () => {
     .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)};
   `,
+  autoSizerWrapper: css`
+    width: 100%;
+    height: 200px;
+  `,
   buttonGroup: css`
     display: flex;
     justify-content: flex-end;

public/app/features/alerting/unified/hooks/useVizHeight.ts

@@ -0,0 +1,26 @@
+import { PanelData } from '@grafana/data';
+import { useTheme2 } from '@grafana/ui';
+import { STAT, TIMESERIES } from '../utils/constants';
+
+export function useVizHeight(data: PanelData, pluginId: string, frameIndex: number) {
+  const theme = useTheme2();
+  if (pluginId === TIMESERIES || pluginId === STAT || dataIsEmpty(data)) {
+    return '200px';
+  }
+
+  const values = data.series[frameIndex].fields[0].values.length;
+  const rowHeight = theme.spacing.gridSize * 5;
+
+  /*
+   Calculate how if we can make  the table smaller than 200px
+   for when we only have 1-2 values
+   The extra rowHeight is to accommodate the header.
+  */
+  const tableHeight = values * rowHeight + rowHeight;
+
+  return `${tableHeight >= 200 ? 200 : tableHeight}px`;
+}
+
+function dataIsEmpty(data: PanelData) {
+  return !data || !data.series[0] || !data.series[0].fields[0] || !data.series[0].fields[0].values;
+}

public/app/features/alerting/unified/utils/constants.ts

@@ -6,6 +6,10 @@ export const ALERTMANAGER_NAME_QUERY_KEY = 'alertmanager';
 export const ALERTMANAGER_NAME_LOCAL_STORAGE_KEY = 'alerting-alertmanager';
 export const SILENCES_POLL_INTERVAL_MS = 20000;
 
+export const TIMESERIES = 'timeseries';
+export const TABLE = 'table';
+export const STAT = 'stat';
+
 export enum Annotation {
   description = 'description',
   summary = 'summary',