From 7bcc151ae66dbd2ceac50d3aad595ee1f4b341c9 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 24 May 2022 01:57:26 -0700 Subject: [PATCH] Alerting: Add notification policy flow chart (#49405) * setup component add images * add name to theme * add root route info box * remove unsused * styling --- .../grafana-data/src/themes/createTheme.ts | 3 +- .../components/rule-editor/AlertRuleForm.tsx | 2 + .../rule-editor/NotificationsStep.tsx | 59 +++++++++++ .../rule-editor/RuleEditorSection.tsx | 1 + .../img/alerting/notification_policy_dark.svg | 99 +++++++++++++++++++ .../alerting/notification_policy_light.svg | 97 ++++++++++++++++++ public/sass/theme.light.generated.json | 4 +- 7 files changed, 261 insertions(+), 4 deletions(-) create mode 100644 public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx create mode 100644 public/img/alerting/notification_policy_dark.svg create mode 100644 public/img/alerting/notification_policy_light.svg diff --git a/packages/grafana-data/src/themes/createTheme.ts b/packages/grafana-data/src/themes/createTheme.ts index b445c170bb5..13b28e4ba9c 100644 --- a/packages/grafana-data/src/themes/createTheme.ts +++ b/packages/grafana-data/src/themes/createTheme.ts @@ -23,7 +23,6 @@ export interface NewThemeOptions { /** @internal */ export function createTheme(options: NewThemeOptions = {}): GrafanaTheme2 { const { - name = 'Dark', colors: colorsInput = {}, spacing: spacingInput = {}, shape: shapeInput = {}, @@ -41,7 +40,7 @@ export function createTheme(options: NewThemeOptions = {}): GrafanaTheme2 { const visualization = createVisualizationColors(colors); const theme = { - name, + name: colors.mode === 'dark' ? 'Dark' : 'Light', isDark: colors.mode === 'dark', isLight: colors.mode === 'light', colors, diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx index da479ea0ef8..fceb38638a7 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx @@ -21,6 +21,7 @@ import * as ruleId from '../../utils/rule-id'; import { CloudEvaluationBehavior } from './CloudEvaluationBehavior'; import { DetailsStep } from './DetailsStep'; import { GrafanaEvaluationBehavior } from './GrafanaEvaluationBehavior'; +import { NotificationsStep } from './NotificationsStep'; import { RuleInspector } from './RuleInspector'; import { QueryAndAlertConditionStep } from './query-and-alert-condition/QueryAndAlertConditionStep'; @@ -155,6 +156,7 @@ export const AlertRuleForm: FC = ({ existing }) => { <> {type === RuleFormType.grafana ? : } + )} diff --git a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx new file mode 100644 index 00000000000..d1464ac928c --- /dev/null +++ b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx @@ -0,0 +1,59 @@ +import { css } from '@emotion/css'; +import React, { FC, useState } from 'react'; + +import { GrafanaTheme2 } from '@grafana/data'; +import { Card, Link, useStyles2, useTheme2 } from '@grafana/ui'; + +import { RuleEditorSection } from './RuleEditorSection'; + +export const NotificationsStep: FC = () => { + const [hideFlowChart, setHideFlowChart] = useState(false); + const styles = useStyles2(getStyles); + const theme = useTheme2(); + + return ( + +
+
setHideFlowChart(!hideFlowChart)}> + {`${!hideFlowChart ? 'Hide' : 'Show'} flow chart`} +
+
+
+ {!hideFlowChart && ( + notification policy flow chart + )} + + Root route – default for all alerts + + Without custom labels, your alert will be routed through the root route. To view and edit the root route, go + to notification policies or contact your admin in case you are using + non-Grafana alert management. + + +
+ + ); +}; + +const getStyles = (theme: GrafanaTheme2) => ({ + contentWrapper: css` + display: flex; + align-items: center; + `, + hideButton: css` + color: ${theme.colors.text.secondary}; + cursor: pointer; + margin-bottom: ${theme.spacing(1)}; + `, + card: css` + max-width: 500px; + margin-left: ${theme.spacing(3)}; + `, +}); diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx index 23943eb4034..5ff3ffcc562 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx @@ -45,6 +45,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ `, description: css` margin-top: -${theme.spacing(2)}; + color: ${theme.colors.text.secondary}; `, stepNo: css` display: inline-block; diff --git a/public/img/alerting/notification_policy_dark.svg b/public/img/alerting/notification_policy_dark.svg new file mode 100644 index 00000000000..25d743758dc --- /dev/null +++ b/public/img/alerting/notification_policy_dark.svg @@ -0,0 +1,99 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/img/alerting/notification_policy_light.svg b/public/img/alerting/notification_policy_light.svg new file mode 100644 index 00000000000..c48fbe93b00 --- /dev/null +++ b/public/img/alerting/notification_policy_light.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/sass/theme.light.generated.json b/public/sass/theme.light.generated.json index 44ae359afc8..9e1b08ec313 100644 --- a/public/sass/theme.light.generated.json +++ b/public/sass/theme.light.generated.json @@ -1,5 +1,5 @@ { - "name": "Dark", + "name": "Light", "isDark": false, "isLight": true, "colors": { @@ -505,7 +505,7 @@ "portal": 1061 }, "v1": { - "name": "Dark", + "name": "Light", "typography": { "fontFamily": { "sansSerif": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",