From a62bfba63b75542bbb349e1802a61110848d6608 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 4 May 2021 13:38:01 +0200 Subject: [PATCH] Alerting: Updates the new alerting rule table to use new theme (#33684) --- .../grafana-data/src/themes/createV1Theme.ts | 16 +++---- .../unified/components/StateColoredText.tsx | 14 +++--- .../alerting/unified/components/StateTag.tsx | 47 +++++++++++-------- .../components/receivers/ReceiversTable.tsx | 4 +- .../components/receivers/TemplatesTable.tsx | 4 +- .../components/rules/AlertInstancesTable.tsx | 18 +++---- .../unified/components/rules/RulesTable.tsx | 34 +++++++------- .../silences/SilencedAlertsTable.tsx | 12 ++--- .../silences/SilencedAlertsTableRow.tsx | 4 +- .../components/silences/SilencesTable.tsx | 10 ++-- .../features/alerting/unified/styles/table.ts | 18 +++---- 11 files changed, 94 insertions(+), 87 deletions(-) diff --git a/packages/grafana-data/src/themes/createV1Theme.ts b/packages/grafana-data/src/themes/createV1Theme.ts index b24a3c2dfea..a1e46029c62 100644 --- a/packages/grafana-data/src/themes/createV1Theme.ts +++ b/packages/grafana-data/src/themes/createV1Theme.ts @@ -194,16 +194,16 @@ export function createV1Theme(theme: Omit): GrafanaTheme { palette: { ...basicColors, brandPrimary: basicColors.orange, - brandSuccess: basicColors.greenBase, - brandWarning: basicColors.orange, - brandDanger: basicColors.redBase, - queryRed: basicColors.redBase, - queryGreen: '#74e680', + brandSuccess: theme.colors.success.main, + brandWarning: theme.colors.warning.main, + brandDanger: theme.colors.error.main, + queryRed: theme.colors.error.text, + queryGreen: theme.colors.success.text, queryPurple: '#fe85fc', queryOrange: basicColors.orange, - online: basicColors.greenBase, - warn: '#f79520', - critical: basicColors.redBase, + online: theme.colors.success.main, + warn: theme.colors.success.main, + critical: theme.colors.success.main, }, colors: { ...backgrounds, diff --git a/public/app/features/alerting/unified/components/StateColoredText.tsx b/public/app/features/alerting/unified/components/StateColoredText.tsx index 248babae281..451cdcbacce 100644 --- a/public/app/features/alerting/unified/components/StateColoredText.tsx +++ b/public/app/features/alerting/unified/components/StateColoredText.tsx @@ -1,5 +1,5 @@ -import { GrafanaTheme } from '@grafana/data'; -import { useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; import { PromAlertingRuleState } from 'app/types/unified-alerting-dto'; import { css } from '@emotion/css'; import React, { FC } from 'react'; @@ -9,19 +9,19 @@ type Props = { }; export const StateColoredText: FC = ({ children, status }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return {children || status}; }; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ [PromAlertingRuleState.Inactive]: css` - color: ${theme.palette.brandSuccess}; + color: ${theme.colors.success.text}; `, [PromAlertingRuleState.Pending]: css` - color: ${theme.palette.brandWarning}; + color: ${theme.colors.warning.text}; `, [PromAlertingRuleState.Firing]: css` - color: ${theme.palette.brandDanger}; + color: ${theme.colors.error.text}; `, }); diff --git a/public/app/features/alerting/unified/components/StateTag.tsx b/public/app/features/alerting/unified/components/StateTag.tsx index a36e84f7a15..7f86b9f6bd2 100644 --- a/public/app/features/alerting/unified/components/StateTag.tsx +++ b/public/app/features/alerting/unified/components/StateTag.tsx @@ -1,5 +1,5 @@ -import { GrafanaTheme } from '@grafana/data'; -import { useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; import { PromAlertingRuleState } from 'app/types/unified-alerting-dto'; import { SilenceState, AlertState } from 'app/plugins/datasource/alertmanager/types'; import { css, cx } from '@emotion/css'; @@ -10,47 +10,54 @@ type Props = { }; export const StateTag: FC = ({ children, status }) => { - const styles = useStyles(getStyles); + const styles = useStyles2(getStyles); return {children || status}; }; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ common: css` display: inline-block; color: white; - border-radius: ${theme.border.radius.sm}; + border-radius: ${theme.shape.borderRadius()}; font-size: ${theme.typography.size.sm}; - padding: ${theme.spacing.xs} ${theme.spacing.sm}; + padding: ${theme.spacing(0.5, 1)}; text-transform: capitalize; line-height: 1.2; `, [PromAlertingRuleState.Inactive]: css` - background-color: ${theme.palette.brandSuccess}; - border: solid 1px ${theme.palette.brandSuccess}; + background-color: ${theme.colors.success.main}; + border: solid 1px ${theme.colors.success.main}; + color: ${theme.colors.success.contrastText}; `, [PromAlertingRuleState.Pending]: css` - background-color: ${theme.palette.brandWarning}; - border: solid 1px ${theme.palette.brandWarning}; + background-color: ${theme.colors.warning.main}; + border: solid 1px ${theme.colors.warning.main}; + color: ${theme.colors.warning.contrastText}; `, [PromAlertingRuleState.Firing]: css` - background-color: ${theme.palette.brandDanger}; - border: solid 1px ${theme.palette.brandDanger}; + background-color: ${theme.colors.error.main}; + border: solid 1px ${theme.colors.error.main}; + color: ${theme.colors.error.contrastText}; `, [SilenceState.Expired]: css` - background-color: ${theme.palette.gray33}; - border: solid 1px ${theme.palette.gray33}; + background-color: ${theme.colors.secondary.main}; + border: solid 1px ${theme.colors.secondary.main}; + color: ${theme.colors.secondary.contrastText}; `, [SilenceState.Active]: css` - background-color: ${theme.palette.brandSuccess}; - border: solid 1px ${theme.palette.brandSuccess}; + background-color: ${theme.colors.success.main}; + border: solid 1px ${theme.colors.success.main}; + color: ${theme.colors.success.contrastText}; `, [AlertState.Unprocessed]: css` - background-color: ${theme.palette.gray33}; - border: solid 1px ${theme.palette.gray33}; + background-color: ${theme.colors.secondary.main}; + border: solid 1px ${theme.colors.secondary.main}; + color: ${theme.colors.secondary.contrastText}; `, [AlertState.Suppressed]: css` - background-color: ${theme.palette.brandPrimary}; - border: solid 1px ${theme.palette.brandPrimary}; + background-color: ${theme.colors.primary.main}; + border: solid 1px ${theme.colors.primary.main}; + color: ${theme.colors.primary.contrastText}; `, }); diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx index 92ca052e24e..de6f49db336 100644 --- a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx +++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx @@ -1,4 +1,4 @@ -import { useStyles } from '@grafana/ui'; +import { useStyles2 } from '@grafana/ui'; import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types'; import React, { FC, useMemo } from 'react'; import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector'; @@ -14,7 +14,7 @@ interface Props { } export const ReceiversTable: FC = ({ config, alertManagerName }) => { - const tableStyles = useStyles(getAlertTableStyles); + const tableStyles = useStyles2(getAlertTableStyles); const grafanaNotifiers = useUnifiedAlertingSelector((state) => state.grafanaNotifiers); diff --git a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx index 773dadb2f8f..4a589de6936 100644 --- a/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx +++ b/public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx @@ -1,4 +1,4 @@ -import { useStyles } from '@grafana/ui'; +import { useStyles2 } from '@grafana/ui'; import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types'; import React, { FC, Fragment, useMemo, useState } from 'react'; import { getAlertTableStyles } from '../../styles/table'; @@ -15,7 +15,7 @@ interface Props { export const TemplatesTable: FC = ({ config, alertManagerName }) => { const [expandedTemplates, setExpandedTemplates] = useState>({}); - const tableStyles = useStyles(getAlertTableStyles); + const tableStyles = useStyles2(getAlertTableStyles); const templateRows = useMemo(() => Object.entries(config.template_files), [config]); diff --git a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx index 755ad10309d..6e4bc770a50 100644 --- a/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx +++ b/public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx @@ -1,5 +1,5 @@ -import { GrafanaTheme } from '@grafana/data'; -import { useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; import { AlertingRule } from 'app/types/unified-alerting'; import { css, cx } from '@emotion/css'; import React, { FC, Fragment, useState } from 'react'; @@ -15,8 +15,8 @@ interface Props { } export const AlertInstancesTable: FC = ({ instances }) => { - const styles = useStyles(getStyles); - const tableStyles = useStyles(getAlertTableStyles); + const styles = useStyles2(getStyles); + const tableStyles = useStyles2(getAlertTableStyles); const [expandedKeys, setExpandedKeys] = useState([]); @@ -79,7 +79,7 @@ export const AlertInstancesTable: FC = ({ instances }) => { ); }; -export const getStyles = (theme: GrafanaTheme) => ({ +export const getStyles = (theme: GrafanaTheme2) => ({ colExpand: css` width: 36px; `, @@ -87,8 +87,8 @@ export const getStyles = (theme: GrafanaTheme) => ({ width: 110px; `, labelsCell: css` - padding-top: ${theme.spacing.xs} !important; - padding-bottom: ${theme.spacing.xs} !important; + padding-top: ${theme.spacing(0.5)} !important; + padding-bottom: ${theme.spacing(0.5)} !important; `, createdCell: css` white-space: nowrap; @@ -96,8 +96,8 @@ export const getStyles = (theme: GrafanaTheme) => ({ table: css` td { vertical-align: top; - padding-top: ${theme.spacing.sm}; - padding-bottom: ${theme.spacing.sm}; + padding-top: ${theme.spacing(1)}; + padding-bottom: ${theme.spacing(1)}; } `, }); diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx index 2ff5a95eaf2..c400157d819 100644 --- a/public/app/features/alerting/unified/components/rules/RulesTable.tsx +++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx @@ -1,5 +1,5 @@ -import { GrafanaTheme } from '@grafana/data'; -import { ConfirmModal, useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { ConfirmModal, useStyles2 } from '@grafana/ui'; import React, { FC, Fragment, useState } from 'react'; import { getRuleIdentifier, isAlertingRule, stringifyRuleIdentifier } from '../../utils/rules'; import { CollapseToggle } from '../CollapseToggle'; @@ -32,8 +32,8 @@ export const RulesTable: FC = ({ const hasRuler = useHasRuler(); - const styles = useStyles(getStyles); - const tableStyles = useStyles(getAlertTableStyles); + const styles = useStyles2(getStyles); + const tableStyles = useStyles2(getAlertTableStyles); const [expandedKeys, setExpandedKeys] = useState([]); @@ -190,28 +190,28 @@ export const RulesTable: FC = ({ ); }; -export const getStyles = (theme: GrafanaTheme) => ({ +export const getStyles = (theme: GrafanaTheme2) => ({ wrapperMargin: css` margin-left: 36px; `, wrapper: css` - margin-top: ${theme.spacing.md}; + margin-top: ${theme.spacing(3)}; width: auto; - padding: ${theme.spacing.sm}; - background-color: ${theme.colors.bg2}; - border-radius: 3px; + background-color: ${theme.colors.background.secondary}; + border-radius: ${theme.shape.borderRadius()}; `, table: css` width: 100%; - border-radius: 3px; - border: solid 1px ${theme.colors.border3}; + border-radius: ${theme.shape.borderRadius()}; + border: solid 1px ${theme.colors.border.weak}; + background-color: ${theme.colors.background.secondary}; th { - padding: ${theme.spacing.sm}; + padding: ${theme.spacing(1)}; } td + td { - padding: 0 ${theme.spacing.sm}; + padding: ${theme.spacing(0, 1)}; } tr { @@ -219,7 +219,7 @@ export const getStyles = (theme: GrafanaTheme) => ({ } `, evenRow: css` - background-color: ${theme.colors.bodyBg}; + background-color: ${theme.colors.background.primary}; `, colState: css` width: 110px; @@ -228,13 +228,13 @@ export const getStyles = (theme: GrafanaTheme) => ({ position: relative; `, guideline: css` - left: -27px; - border-left: 1px solid ${theme.colors.border3}; + left: -19px; + border-left: 1px solid ${theme.colors.border.medium}; position: absolute; `, ruleTopGuideline: css` width: 18px; - border-bottom: 1px solid ${theme.colors.border3}; + border-bottom: 1px solid ${theme.colors.border.medium}; top: 0; bottom: 50%; `, diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx index 9527752c638..0fc2376367a 100644 --- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx @@ -1,9 +1,9 @@ import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types'; import React, { FC } from 'react'; import { getAlertTableStyles } from '../../styles/table'; -import { useStyles } from '@grafana/ui'; +import { useStyles2 } from '@grafana/ui'; import { SilencedAlertsTableRow } from './SilencedAlertsTableRow'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { css, cx } from '@emotion/css'; interface Props { @@ -11,8 +11,8 @@ interface Props { } const SilencedAlertsTable: FC = ({ silencedAlerts }) => { - const tableStyles = useStyles(getAlertTableStyles); - const styles = useStyles(getStyles); + const tableStyles = useStyles2(getAlertTableStyles); + const styles = useStyles2(getStyles); if (!!silencedAlerts.length) { return ( @@ -51,9 +51,9 @@ const SilencedAlertsTable: FC = ({ silencedAlerts }) => { } }; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ tableMargin: css` - margin-bottom: ${theme.spacing.sm}; + margin-bottom: ${theme.spacing(1)}; `, colState: css` width: 110px; diff --git a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx index be982a641ea..104ca01d224 100644 --- a/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx @@ -4,7 +4,7 @@ import { CollapseToggle } from '../CollapseToggle'; import { StateTag } from '../StateTag'; import { ActionIcon } from '../rules/ActionIcon'; import { getAlertTableStyles } from '../../styles/table'; -import { useStyles } from '@grafana/ui'; +import { useStyles2 } from '@grafana/ui'; import { dateTimeAsMoment, toDuration } from '@grafana/data'; import { AlertLabels } from '../AlertLabels'; @@ -15,7 +15,7 @@ interface Props { export const SilencedAlertsTableRow: FC = ({ alert, className }) => { const [isCollapsed, setIsCollapsed] = useState(true); - const tableStyles = useStyles(getAlertTableStyles); + const tableStyles = useStyles2(getAlertTableStyles); const alertDuration = toDuration(dateTimeAsMoment(alert.endsAt).diff(alert.startsAt)).asSeconds(); const alertName = Object.entries(alert.labels).reduce((name, [labelKey, labelValue]) => { if (labelKey === 'alertname' || labelKey === '__alert_rule_title__') { diff --git a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx index 72a12b4d9a6..020a7f0039c 100644 --- a/public/app/features/alerting/unified/components/silences/SilencesTable.tsx +++ b/public/app/features/alerting/unified/components/silences/SilencesTable.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -import { GrafanaTheme } from '@grafana/data'; -import { useStyles } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { useStyles2 } from '@grafana/ui'; import { css } from '@emotion/css'; import { AlertmanagerAlert, Silence } from 'app/plugins/datasource/alertmanager/types'; import SilenceTableRow from './SilenceTableRow'; @@ -14,8 +14,8 @@ interface Props { } const SilencesTable: FC = ({ silences, alertManagerAlerts, alertManagerSourceName }) => { - const styles = useStyles(getStyles); - const tableStyles = useStyles(getAlertTableStyles); + const styles = useStyles2(getStyles); + const tableStyles = useStyles2(getAlertTableStyles); const findSilencedAlerts = (id: string) => { return alertManagerAlerts.filter((alert) => alert.status.silencedBy.includes(id)); @@ -62,7 +62,7 @@ const SilencesTable: FC = ({ silences, alertManagerAlerts, alertManagerSo } }; -const getStyles = (theme: GrafanaTheme) => ({ +const getStyles = (theme: GrafanaTheme2) => ({ colState: css` width: 110px; `, diff --git a/public/app/features/alerting/unified/styles/table.ts b/public/app/features/alerting/unified/styles/table.ts index 26cb8898e22..707bdb0cd47 100644 --- a/public/app/features/alerting/unified/styles/table.ts +++ b/public/app/features/alerting/unified/styles/table.ts @@ -1,19 +1,19 @@ -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaTheme2 } from '@grafana/data'; import { css } from '@emotion/css'; -export const getAlertTableStyles = (theme: GrafanaTheme) => ({ +export const getAlertTableStyles = (theme: GrafanaTheme2) => ({ table: css` width: 100%; - border-radius: ${theme.border.radius.sm}; - border: solid 1px ${theme.colors.border3}; - background-color: ${theme.colors.bg2}; + border-radius: ${theme.shape.borderRadius()}; + border: solid 1px ${theme.colors.border.weak}; + background-color: ${theme.colors.background.secondary}; th { - padding: ${theme.spacing.sm}; + padding: ${theme.spacing(1)}; } td { - padding: 0 ${theme.spacing.sm}; + padding: 0 ${theme.spacing(1)}; } tr { @@ -21,7 +21,7 @@ export const getAlertTableStyles = (theme: GrafanaTheme) => ({ } `, evenRow: css` - background-color: ${theme.colors.bodyBg}; + background-color: ${theme.colors.background.primary}; `, colExpand: css` width: 36px; @@ -32,7 +32,7 @@ export const getAlertTableStyles = (theme: GrafanaTheme) => ({ white-space: nowrap; & > * + * { - margin-left: ${theme.spacing.sm}; + margin-left: ${theme.spacing(1)}; } `, });