diff --git a/public/app/features/alerting/unified/components/expressions/AlertConditionIndicator.tsx b/public/app/features/alerting/unified/components/expressions/AlertConditionIndicator.tsx index 11d4d98e516..4bc22b49905 100644 --- a/public/app/features/alerting/unified/components/expressions/AlertConditionIndicator.tsx +++ b/public/app/features/alerting/unified/components/expressions/AlertConditionIndicator.tsx @@ -29,7 +29,7 @@ export const AlertConditionIndicator = ({ enabled = false, error, warning, onSet if (!enabled) { return ( ); } diff --git a/public/app/features/alerting/unified/components/expressions/Expression.tsx b/public/app/features/alerting/unified/components/expressions/Expression.tsx index 4f49c30cee8..e082d1e8e52 100644 --- a/public/app/features/alerting/unified/components/expressions/Expression.tsx +++ b/public/app/features/alerting/unified/components/expressions/Expression.tsx @@ -1,16 +1,21 @@ import { css, cx } from '@emotion/css'; -import { capitalize, uniqueId } from 'lodash'; +import { uniqueId } from 'lodash'; import React, { FC, useCallback, useState } from 'react'; import { DataFrame, dateTimeFormat, GrafanaTheme2, isTimeSeriesFrames, LoadingState, PanelData } from '@grafana/data'; import { Stack } from '@grafana/experimental'; -import { AutoSizeInput, Button, clearButtonStyles, Icon, IconButton, Select, useStyles2 } from '@grafana/ui'; +import { AutoSizeInput, Button, clearButtonStyles, IconButton, useStyles2 } from '@grafana/ui'; import { ClassicConditions } from 'app/features/expressions/components/ClassicConditions'; import { Math } from 'app/features/expressions/components/Math'; import { Reduce } from 'app/features/expressions/components/Reduce'; import { Resample } from 'app/features/expressions/components/Resample'; import { Threshold } from 'app/features/expressions/components/Threshold'; -import { ExpressionQuery, ExpressionQueryType, gelTypes } from 'app/features/expressions/types'; +import { + ExpressionQuery, + ExpressionQueryType, + expressionTypes, + getExpressionLabel, +} from 'app/features/expressions/types'; import { AlertQuery, PromAlertingRuleState } from 'app/types/unified-alerting-dto'; import { usePagination } from '../../hooks/usePagination'; @@ -55,9 +60,10 @@ export const Expression: FC = ({ const isLoading = data && Object.values(data).some((d) => Boolean(d) && d.state === LoadingState.Loading); const hasResults = Array.isArray(data?.series) && !isLoading; const series = data?.series ?? []; + const seriesCount = series.length; const alertCondition = isAlertCondition ?? false; - const showSummary = isAlertCondition && hasResults; + //const showSummary = isAlertCondition && hasResults; const groupedByState = { [PromAlertingRuleState.Firing]: series.filter((serie) => getSeriesValue(serie) >= 1), @@ -93,9 +99,18 @@ export const Expression: FC = ({ }, [onChangeQuery, queries] ); + const selectedExpressionType = expressionTypes.find((o) => o.value === queryType); + const selectedExpressionDescription = selectedExpressionType?.description ?? ''; return ( -
+
= ({ onRemoveExpression={() => onRemoveExpression(query.refId)} onUpdateRefId={(newRefId) => onUpdateRefId(query.refId, newRefId)} onUpdateExpressionType={(type) => onUpdateExpressionType(query.refId, type)} + onSetCondition={onSetCondition} + warning={warning} + error={error} + query={query} + alertCondition={alertCondition} /> -
{renderExpressionType(query)}
- {hasResults && } - -
- - onSetCondition(query.refId)} - enabled={alertCondition} - error={error} - warning={warning} - /> - - {showSummary && ( - - )} - +
+
{selectedExpressionDescription}
+ {renderExpressionType(query)}
+ {hasResults && ( + <> + + +
+ + + + + +
+ + )}
); @@ -196,9 +218,17 @@ export const ExpressionResult: FC = ({ series, isAlertCon ); }; -export const PreviewSummary: FC<{ firing: number; normal: number }> = ({ firing, normal }) => { +export const PreviewSummary: FC<{ firing: number; normal: number; isCondition: boolean; seriesCount: number }> = ({ + firing, + normal, + isCondition, + seriesCount, +}) => { const { mutedText } = useStyles2(getStyles); - return {`${firing} firing, ${normal} normal`}; + if (isCondition) { + return {`${seriesCount} series: ${firing} firing, ${normal} normal`}; + } + return {`${seriesCount} series`}; }; interface HeaderProps { @@ -207,9 +237,24 @@ interface HeaderProps { onUpdateRefId: (refId: string) => void; onRemoveExpression: () => void; onUpdateExpressionType: (type: ExpressionQueryType) => void; + warning?: Error; + error?: Error; + onSetCondition: (refId: string) => void; + query: ExpressionQuery; + alertCondition: boolean; } -const Header: FC = ({ refId, queryType, onUpdateRefId, onUpdateExpressionType, onRemoveExpression }) => { +const Header: FC = ({ + refId, + queryType, + onUpdateRefId, + onRemoveExpression, + warning, + onSetCondition, + alertCondition, + query, + error, +}) => { const styles = useStyles2(getStyles); const clearButton = useStyles2(clearButtonStyles); /** @@ -223,9 +268,6 @@ const Header: FC = ({ refId, queryType, onUpdateRefId, onUpdateExpr const editing = editMode !== false; const editingRefId = editing && editMode === 'refId'; - const editingType = editing && editMode === 'expressionType'; - - const selectedExpressionType = gelTypes.find((o) => o.value === queryType); return (
@@ -252,34 +294,15 @@ const Header: FC = ({ refId, queryType, onUpdateRefId, onUpdateExpr }} /> )} - {!editingType && ( - - )} - {editingType && ( - + - + - - - {isRange ? ( - <> + <> + + + onEvaluateValueChange(event, 0)} + defaultValue={condition.evaluator.params[0]} + /> +
TO
+ onEvaluateValueChange(event, 1)} + defaultValue={condition.evaluator.params[1]} + /> + + ) : ( onEvaluateValueChange(event, 0)} - defaultValue={condition.evaluator.params[0]} + defaultValue={conditions[0].evaluator.params[0] || 0} /> -
TO
- onEvaluateValueChange(event, 1)} - defaultValue={condition.evaluator.params[1]} - /> - - ) : ( - onEvaluateValueChange(event, 0)} - defaultValue={conditions[0].evaluator.params[0] || 0} - /> - )} - + )} + + ); }; diff --git a/public/app/features/expressions/types.ts b/public/app/features/expressions/types.ts index c3b1ea2c091..e9336353c18 100644 --- a/public/app/features/expressions/types.ts +++ b/public/app/features/expressions/types.ts @@ -15,7 +15,22 @@ export enum ExpressionQueryType { threshold = 'threshold', } -export const gelTypes: Array> = [ +export const getExpressionLabel = (type: ExpressionQueryType) => { + switch (type) { + case ExpressionQueryType.math: + return 'Math'; + case ExpressionQueryType.reduce: + return 'Reduce'; + case ExpressionQueryType.resample: + return 'Resample'; + case ExpressionQueryType.classic: + return 'Classic condition'; + case ExpressionQueryType.threshold: + return 'Threshold'; + } +}; + +export const expressionTypes: Array> = [ { value: ExpressionQueryType.math, label: 'Math',