Alerting: Move Visualization to QueryRow (#34658)

* move visualization to queryeditorrow

* add prop to hide disable query

* move panel plugin state outside the vizwrapper

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

@@ -1,5 +1,6 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode, useState } from 'react';
 import { css } from '@emotion/css';
+import { cloneDeep } from 'lodash';
 import {
   DataQuery,
   DataSourceInstanceSettings,
@@ -9,11 +10,11 @@ import {
   getDefaultRelativeTimeRange,
 } from '@grafana/data';
 import { useStyles2, RelativeTimeRangePicker } from '@grafana/ui';
-import { QueryEditorRow } from '../../../../query/components/QueryEditorRow';
+import { QueryEditorRow } from 'app/features/query/components/QueryEditorRow';
 import { VizWrapper } from './VizWrapper';
-import { isExpressionQuery } from '../../../../expressions/guards';
+import { isExpressionQuery } from 'app/features/expressions/guards';
+import { TABLE, TIMESERIES } from '../../utils/constants';
 import { GrafanaQuery } from 'app/types/unified-alerting-dto';
-import { cloneDeep } from 'lodash';
 
 interface Props {
   data: PanelData;
@@ -29,6 +30,8 @@ interface Props {
   index: number;
 }
 
+export type SupportedPanelPlugins = 'timeseries' | 'table' | 'stat';
+
 export const QueryWrapper: FC<Props> = ({
   data,
   dsSettings,
@@ -44,6 +47,7 @@ export const QueryWrapper: FC<Props> = ({
 }) => {
   const styles = useStyles2(getStyles);
   const isExpression = isExpressionQuery(query.model);
+  const [pluginId, changePluginId] = useState<SupportedPanelPlugins>(isExpression ? TABLE : TIMESERIES);
 
   const renderTimePicker = (query: GrafanaQuery, index: number): ReactNode => {
     if (isExpressionQuery(query.model) || !onChangeTimeRange) {
@@ -74,14 +78,16 @@ export const QueryWrapper: FC<Props> = ({
         onRunQuery={onRunQueries}
         queries={queries}
         renderHeaderExtras={() => renderTimePicker(query, index)}
+        visualization={data ? <VizWrapper data={data} changePanel={changePluginId} currentPanel={pluginId} /> : null}
+        hideDisableQuery={true}
       />
-      {data && <VizWrapper data={data} defaultPanel={isExpression ? 'table' : 'timeseries'} />}
     </div>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
+    label: AlertingQueryWrapper;
     margin-bottom: ${theme.spacing(1)};
     border: 1px solid ${theme.colors.border.medium};
     border-radius: ${theme.shape.borderRadius(1)};

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

@@ -5,22 +5,23 @@ import { GrafanaTheme2, PanelData } from '@grafana/data';
 import { config, PanelRenderer } from '@grafana/runtime';
 import { RadioButtonGroup, useStyles2 } from '@grafana/ui';
 import { PanelOptions } from 'app/plugins/panel/table/models.gen';
+import { SupportedPanelPlugins } from './QueryWrapper';
 import { useVizHeight } from '../../hooks/useVizHeight';
 import { STAT, TABLE, TIMESERIES } from '../../utils/constants';
 
 interface Props {
   data: PanelData;
-  defaultPanel?: 'timeseries' | 'table' | 'stat';
+  currentPanel: SupportedPanelPlugins;
+  changePanel: (panel: SupportedPanelPlugins) => void;
 }
 
-export const VizWrapper: FC<Props> = ({ data, defaultPanel }) => {
+export const VizWrapper: FC<Props> = ({ data, currentPanel, changePanel }) => {
-  const [pluginId, changePluginId] = useState<string>(defaultPanel ?? TIMESERIES);
   const [options, setOptions] = useState<PanelOptions>({
     frameIndex: 0,
     showHeader: true,
   });
   const panels = getSupportedPanels();
-  const vizHeight = useVizHeight(data, pluginId, options.frameIndex);
+  const vizHeight = useVizHeight(data, currentPanel, options.frameIndex);
   const styles = useStyles2(getStyles);
 
   if (!options || !data) {
@@ -30,7 +31,7 @@ export const VizWrapper: FC<Props> = ({ data, defaultPanel }) => {
   return (
     <div className={styles.wrapper}>
       <div className={styles.buttonGroup}>
-        <RadioButtonGroup options={panels} value={pluginId} onChange={changePluginId} />
+        <RadioButtonGroup options={panels} value={currentPanel} onChange={changePanel} />
       </div>
       <div style={{ height: vizHeight, width: '100%' }}>
         <AutoSizer style={{ width: '100%', height: '100%' }}>
@@ -43,7 +44,7 @@ export const VizWrapper: FC<Props> = ({ data, defaultPanel }) => {
                 height={height}
                 width={width}
                 data={data}
-                pluginId={pluginId}
+                pluginId={currentPanel}
                 title="title"
                 onOptionsChange={setOptions}
                 options={options}

public/app/features/query/components/QueryEditorRow.tsx

@@ -42,6 +42,8 @@ interface Props {
   onRemoveQuery: (query: DataQuery) => void;
   onChange: (query: DataQuery) => void;
   onRunQuery: () => void;
+  visualization?: ReactNode;
+  hideDisableQuery?: boolean;
 }
 
 interface State {
@@ -271,7 +273,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   }
 
   renderActions = (props: QueryOperationRowRenderProps) => {
-    const { query } = this.props;
+    const { query, hideDisableQuery = false } = this.props;
     const { hasTextEditMode, datasource } = this.state;
     const isDisabled = query.hide;
 
@@ -292,11 +294,13 @@ export class QueryEditorRow extends PureComponent<Props, State> {
           />
         )}
         <QueryOperationAction title="Duplicate query" icon="copy" onClick={this.onCopyQuery} />
-        <QueryOperationAction
+        {!hideDisableQuery ? (
-          title="Disable/enable query"
+          <QueryOperationAction
-          icon={isDisabled ? 'eye-slash' : 'eye'}
+            title="Disable/enable query"
-          onClick={this.onDisableQuery}
+            icon={isDisabled ? 'eye-slash' : 'eye'}
-        />
+            onClick={this.onDisableQuery}
+          />
+        ) : null}
         <QueryOperationAction title="Remove query" icon="trash-alt" onClick={this.onRemoveQuery} />
       </HorizontalGroup>
     );
@@ -321,7 +325,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
   };
 
   render() {
-    const { query, id, index } = this.props;
+    const { query, id, index, visualization } = this.props;
     const { datasource, showingHelp } = this.state;
     const isDisabled = query.hide;
 
@@ -359,6 +363,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
               )}
               {editor}
             </ErrorBoundaryAlert>
+            {visualization}
           </div>
         </QueryOperationRow>
       </div>