From db2770d992c634830fac35bddef6f7dd73f7ce04 Mon Sep 17 00:00:00 2001 From: Virginia Cepeda Date: Tue, 4 Jul 2023 11:17:14 -0300 Subject: [PATCH] Alerting: Improve time range and max data points info in QueryEditor (#70867) * Add component to display QueryOptions in editor * Display QueryOptions in QueryWrapper * Display real data for time range and max data points * Improve QueryOptions styling * Remove Portal from RelativeTimeRangePicker * Prevent RefID from hiding on small screens Fixes https://github.com/grafana/grafana/issues/70900 * Address review comments * Fix lint --- .../RelativeTimeRangePicker.tsx | 5 +- .../components/rule-editor/QueryOptions.tsx | 112 ++++++++++++++++++ .../components/rule-editor/QueryWrapper.tsx | 38 +++--- 3 files changed, 129 insertions(+), 26 deletions(-) create mode 100644 public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx index 93b203eb352..016bba78293 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx @@ -14,7 +14,6 @@ import CustomScrollbar from '../../CustomScrollbar/CustomScrollbar'; import { Field } from '../../Forms/Field'; import { Icon } from '../../Icon/Icon'; import { getInputStyles, Input } from '../../Input/Input'; -import { Portal } from '../../Portal/Portal'; import { Tooltip } from '../../Tooltip/Tooltip'; import { TimePickerTitle } from '../TimeRangePicker/TimePickerTitle'; import { TimeRangeList } from '../TimeRangePicker/TimeRangeList'; @@ -123,7 +122,7 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) { {isOpen && ( - +
@@ -178,7 +177,7 @@ export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
- +
)} ); diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx new file mode 100644 index 00000000000..7f3c8661fb5 --- /dev/null +++ b/public/app/features/alerting/unified/components/rule-editor/QueryOptions.tsx @@ -0,0 +1,112 @@ +import { css } from '@emotion/css'; +import React, { useState } from 'react'; + +import { dateTime, getDefaultRelativeTimeRange, GrafanaTheme2, RelativeTimeRange } from '@grafana/data'; +import { relativeToTimeRange } from '@grafana/data/src/datetime/rangeutil'; +import { clearButtonStyles, Icon, RelativeTimeRangePicker, Toggletip, useStyles2 } from '@grafana/ui'; +import { AlertQuery } from 'app/types/unified-alerting-dto'; + +import { AlertQueryOptions, MaxDataPointsOption } from './QueryWrapper'; + +export interface QueryOptionsProps { + query: AlertQuery; + queryOptions: AlertQueryOptions; + onChangeTimeRange?: (timeRange: RelativeTimeRange, index: number) => void; + onChangeQueryOptions: (options: AlertQueryOptions, index: number) => void; + index: number; +} + +export const QueryOptions = ({ + query, + queryOptions, + onChangeTimeRange, + onChangeQueryOptions, + index, +}: QueryOptionsProps) => { + const styles = useStyles2(getStyles); + + const [showOptions, setShowOptions] = useState(false); + + const timeRange = query.relativeTimeRange ? relativeToTimeRange(query.relativeTimeRange) : undefined; + + return ( + <> + +
+ {onChangeTimeRange && ( +
+ Time Range + onChangeTimeRange(range, index)} + /> +
+ )} +
+
+ onChangeQueryOptions(options, index)} + /> +
+ + } + closeButton={true} + placement="bottom-start" + > + + + +
+ {dateTime(timeRange?.from).locale('en').fromNow(true)} + {queryOptions.maxDataPoints && , MD {queryOptions.maxDataPoints}} +
+ + ); +}; + +const getStyles = (theme: GrafanaTheme2) => { + const clearButton = clearButtonStyles(theme); + + return { + container: css` + display: flex; + flex-direction: column; + gap: 10px; + `, + timeRangeContainer: css` + display: flex; + `, + + timeRangeLabel: css` + width: 20%; + `, + queryOptions: css` + margin-bottom: -${theme.spacing(2)}; + + label { + line-height: 12px; + padding: 0px; + } + `, + + staticValues: css` + color: ${theme.colors.text.secondary}; + margin-right: ${theme.spacing(1)}; + `, + + actionLink: css` + ${clearButton}; + color: ${theme.colors.text.link}; + cursor: pointer; + + &:hover { + text-decoration: underline; + } + `, + }; +}; 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 0adbc846b2f..322a9db02b0 100644 --- a/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/QueryWrapper.tsx @@ -6,7 +6,6 @@ import { CoreApp, DataSourceApi, DataSourceInstanceSettings, - getDefaultRelativeTimeRange, GrafanaTheme2, LoadingState, PanelData, @@ -15,20 +14,13 @@ import { } from '@grafana/data'; import { Stack } from '@grafana/experimental'; import { DataQuery } from '@grafana/schema'; -import { - GraphTresholdsStyleMode, - Icon, - InlineFormLabel, - Input, - RelativeTimeRangePicker, - Tooltip, - useStyles2, -} from '@grafana/ui'; +import { GraphTresholdsStyleMode, Icon, InlineFormLabel, Input, Tooltip, useStyles2 } from '@grafana/ui'; import { QueryEditorRow } from 'app/features/query/components/QueryEditorRow'; import { AlertQuery } from 'app/types/unified-alerting-dto'; import { AlertConditionIndicator } from '../expressions/AlertConditionIndicator'; +import { QueryOptions } from './QueryOptions'; import { VizWrapper } from './VizWrapper'; export const DEFAULT_MAX_DATA_POINTS = 43200; @@ -123,18 +115,14 @@ export const QueryWrapper = ({ return ( - {onChangeTimeRange && ( - onChangeTimeRange(range, index)} - /> - )} -
- onChangeQueryOptions(options, index)} - /> -
+ + onSetCondition(query.refId)} enabled={condition === query.refId} @@ -187,7 +175,7 @@ export const EmptyQueryWrapper = ({ children }: React.PropsWithChildren<{}>) => return
{children}
; }; -function MaxDataPointsOption({ +export function MaxDataPointsOption({ options, onChange, }: { @@ -240,6 +228,10 @@ const getStyles = (theme: GrafanaTheme2) => ({ margin-bottom: ${theme.spacing(1)}; border: 1px solid ${theme.colors.border.weak}; border-radius: ${theme.shape.borderRadius(1)}; + + button { + overflow: visible; + } `, queryOptions: css` margin-bottom: -${theme.spacing(2)};