From 23cf31a567abce6621ed32b70798dc93b63bce88 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Thu, 27 May 2021 10:46:06 +0200 Subject: [PATCH] Alerting: Move Visualization to QueryRow (#34658) * move visualization to queryeditorrow * add prop to hide disable query * move panel plugin state outside the vizwrapper --- .../alerting/components/AlertingQueryRow.tsx | 0 .../components/rule-editor/QueryWrapper.tsx | 16 +++++++++++----- .../components/rule-editor/VizWrapper.tsx | 13 +++++++------ .../query/components/QueryEditorRow.tsx | 19 ++++++++++++------- 4 files changed, 30 insertions(+), 18 deletions(-) create mode 100644 public/app/features/alerting/components/AlertingQueryRow.tsx diff --git a/public/app/features/alerting/components/AlertingQueryRow.tsx b/public/app/features/alerting/components/AlertingQueryRow.tsx new file mode 100644 index 00000000000..e69de29bb2d diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx index f8f4a22048b..8c19c8d6540 100644 --- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx +++ b/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 = ({ data, dsSettings, @@ -44,6 +47,7 @@ export const QueryWrapper: FC = ({ }) => { const styles = useStyles2(getStyles); const isExpression = isExpressionQuery(query.model); + const [pluginId, changePluginId] = useState(isExpression ? TABLE : TIMESERIES); const renderTimePicker = (query: GrafanaQuery, index: number): ReactNode => { if (isExpressionQuery(query.model) || !onChangeTimeRange) { @@ -74,14 +78,16 @@ export const QueryWrapper: FC = ({ onRunQuery={onRunQueries} queries={queries} renderHeaderExtras={() => renderTimePicker(query, index)} + visualization={data ? : null} + hideDisableQuery={true} /> - {data && } ); }; 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)}; 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 43ec95aa89d..a2f39cc37b1 100644 --- a/public/app/features/alerting/unified/components/rule-editor/VizWrapper.tsx +++ b/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 = ({ data, defaultPanel }) => { - const [pluginId, changePluginId] = useState(defaultPanel ?? TIMESERIES); +export const VizWrapper: FC = ({ data, currentPanel, changePanel }) => { const [options, setOptions] = useState({ 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 = ({ data, defaultPanel }) => { return (
- +
@@ -43,7 +44,7 @@ export const VizWrapper: FC = ({ data, defaultPanel }) => { height={height} width={width} data={data} - pluginId={pluginId} + pluginId={currentPanel} title="title" onOptionsChange={setOptions} options={options} diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx index 33c4d328e5d..b573add8488 100644 --- a/public/app/features/query/components/QueryEditorRow.tsx +++ b/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 { } 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 { /> )} - + {!hideDisableQuery ? ( + + ) : null} ); @@ -321,7 +325,7 @@ export class QueryEditorRow extends PureComponent { }; 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 { )} {editor} + {visualization}