From e085b2316c75434ba49f8340f37927c79ef4dc81 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Thu, 27 May 2021 16:15:43 +0200
Subject: [PATCH] Alerting: Set max width on alerting query rows (#34749)

---
 .../components/rule-editor/QueryEditor.tsx    |  1 +
 .../components/rule-editor/VizWrapper.tsx     | 29 ++++++++++---------
 .../alerting/unified/hooks/useVizHeight.ts    |  4 +--
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
index 14df01f64c9..5e1e7c46e80 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx
@@ -215,6 +215,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
     container: css`
       background-color: ${theme.colors.background.primary};
       height: 100%;
+      max-width: ${theme.breakpoints.values.xxl}px;
     `,
     runWrapper: css`
       margin-top: ${theme.spacing(1)};
diff --git a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
index a2f39cc37b1..a50122ce8f8 100644
--- a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx
@@ -22,7 +22,7 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
   });
   const panels = getSupportedPanels();
   const vizHeight = useVizHeight(data, currentPanel, options.frameIndex);
-  const styles = useStyles2(getStyles);
+  const styles = useStyles2(getStyles(vizHeight));
 
   if (!options || !data) {
     return null;
@@ -33,15 +33,15 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
       <div className={styles.buttonGroup}>
         <RadioButtonGroup options={panels} value={currentPanel} onChange={changePanel} />
       </div>
-      <div style={{ height: vizHeight, width: '100%' }}>
-        <AutoSizer style={{ width: '100%', height: '100%' }}>
-          {({ width, height }) => {
-            if (width === 0 || height === 0) {
-              return null;
-            }
-            return (
+      <AutoSizer>
+        {({ width }) => {
+          if (width === 0) {
+            return null;
+          }
+          return (
+            <div style={{ height: `${vizHeight}px`, width: `${width}px` }}>
               <PanelRenderer
-                height={height}
+                height={vizHeight}
                 width={width}
                 data={data}
                 pluginId={currentPanel}
@@ -49,10 +49,10 @@ export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
                 onOptionsChange={setOptions}
                 options={options}
               />
-            );
-          }}
-        </AutoSizer>
-      </div>
+            </div>
+          );
+        }}
+      </AutoSizer>
     </div>
   );
 };
@@ -63,9 +63,10 @@ const getSupportedPanels = () => {
     .map((panel) => ({ value: panel.id, label: panel.name, imgUrl: panel.info.logos.small }));
 };
 
-const getStyles = (theme: GrafanaTheme2) => ({
+const getStyles = (visHeight: number) => (theme: GrafanaTheme2) => ({
   wrapper: css`
     padding: 0 ${theme.spacing(2)};
+    height: ${visHeight + theme.spacing.gridSize * 4}px;
   `,
   autoSizerWrapper: css`
     width: 100%;
diff --git a/public/app/features/alerting/unified/hooks/useVizHeight.ts b/public/app/features/alerting/unified/hooks/useVizHeight.ts
index 1f34d4b7c3a..bd3b525e735 100644
--- a/public/app/features/alerting/unified/hooks/useVizHeight.ts
+++ b/public/app/features/alerting/unified/hooks/useVizHeight.ts
@@ -5,7 +5,7 @@ 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';
+    return 200;
   }
 
   const values = data.series[frameIndex].fields[0].values.length;
@@ -18,7 +18,7 @@ export function useVizHeight(data: PanelData, pluginId: string, frameIndex: numb
   */
   const tableHeight = values * rowHeight + rowHeight;
 
-  return `${tableHeight >= 200 ? 200 : tableHeight}px`;
+  return tableHeight >= 200 ? 200 : tableHeight;
 }
 
 function dataIsEmpty(data: PanelData) {