From 7d1b61e033ed96dd6ca82f5fa7f82f4a0b1357df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 13 Apr 2023 16:00:03 +0200 Subject: [PATCH] AlertRules: Update design to align it with recent changes to lists and tables (#66461) * AlertRules: Update design to be less boxy * tag alignment fix * Minor tweak --- .../src/themes/createComponents.ts | 6 + .../grafana-ui/src/components/Table/styles.ts | 5 +- .../unified/components/DynamicTable.tsx | 5 +- .../components/DynamicTableWithGuidelines.tsx | 4 +- .../unified/components/rules/GrafanaRules.tsx | 1 + .../unified/components/rules/RuleState.tsx | 20 +-- .../unified/components/rules/RulesGroup.tsx | 137 +++++++++--------- .../unified/components/rules/RulesTable.tsx | 6 +- 8 files changed, 98 insertions(+), 86 deletions(-) diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts index 7646160521d..1273431458e 100644 --- a/packages/grafana-data/src/themes/createComponents.ts +++ b/packages/grafana-data/src/themes/createComponents.ts @@ -49,6 +49,9 @@ export interface ThemeComponents { horizontalDrawer: { defaultHeight: number; }; + table: { + rowHoverBackground: string; + }; } export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents { @@ -102,5 +105,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th horizontalDrawer: { defaultHeight: 400, }, + table: { + rowHoverBackground: colors.emphasize(colors.background.primary, 0.03), + }, }; } diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index ee871a2cd22..35b34ea45f1 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -10,7 +10,6 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell const cellHeight = getCellHeight(theme, cellHeightOption, cellPadding); const rowHeight = cellHeight + 2; const headerHeight = 28; - const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03); const buildCellContainerStyle = (color?: string, background?: string, overflowOnHover?: boolean) => { const cellActionsOverflow: CSSObject = { @@ -28,7 +27,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell overflow: 'visible', width: 'auto !important', boxShadow: `0 0 2px ${theme.colors.primary.main}`, - background: background ?? rowHoverBg, + background: background ?? theme.components.table.rowHoverBackground, zIndex: 1, }; @@ -231,7 +230,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell border-bottom: 1px solid ${borderColor}; &:hover { - background-color: ${rowHoverBg}; + background-color: ${theme.components.table.rowHoverBackground}; } &:last-child { diff --git a/public/app/features/alerting/unified/components/DynamicTable.tsx b/public/app/features/alerting/unified/components/DynamicTable.tsx index caf74ef40d2..bf925ffc8ce 100644 --- a/public/app/features/alerting/unified/components/DynamicTable.tsx +++ b/public/app/features/alerting/unified/components/DynamicTable.tsx @@ -122,7 +122,7 @@ export const DynamicTable = ({
( return (theme: GrafanaTheme2) => ({ container: css` - border: 1px solid ${theme.colors.border.strong}; + border: 1px solid ${theme.colors.border.weak}; border-radius: ${theme.shape.borderRadius()}; color: ${theme.colors.text.secondary}; `, @@ -226,6 +226,7 @@ const getStyles = ( padding: ${theme.spacing(1)}; `, cell: css` + display: flex; align-items: center; padding: ${theme.spacing(1)}; diff --git a/public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx b/public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx index ad75ae1a53b..7c2a0b805f4 100644 --- a/public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx +++ b/public/app/features/alerting/unified/components/DynamicTableWithGuidelines.tsx @@ -49,7 +49,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ `, guideline: css` left: -19px; - border-left: 1px solid ${theme.colors.border.medium}; + border-left: 1px solid ${theme.colors.border.weak}; position: absolute; ${theme.breakpoints.down('md')} { @@ -72,7 +72,7 @@ export const getStyles = (theme: GrafanaTheme2) => ({ left: -49px !important; `, headerGuideline: css` - top: -25px; + top: -17px; bottom: 0; `, }); diff --git a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx index 5294d4a5512..29be1f78034 100644 --- a/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx +++ b/public/app/features/alerting/unified/components/rules/GrafanaRules.tsx @@ -81,6 +81,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ sectionHeader: css` display: flex; justify-content: space-between; + margin-bottom: ${theme.spacing(1)}; `, wrapper: css` margin-bottom: ${theme.spacing(4)}; diff --git a/public/app/features/alerting/unified/components/rules/RuleState.tsx b/public/app/features/alerting/unified/components/rules/RuleState.tsx index 922d674a35d..a16c8324ead 100644 --- a/public/app/features/alerting/unified/components/rules/RuleState.tsx +++ b/public/app/features/alerting/unified/components/rules/RuleState.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/css'; import React, { useMemo } from 'react'; import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data'; -import { HorizontalGroup, Spinner, useStyles2 } from '@grafana/ui'; +import { Stack } from '@grafana/experimental'; +import { Spinner, useStyles2 } from '@grafana/ui'; import { CombinedRule } from 'app/types/unified-alerting'; import { PromAlertingRuleState } from 'app/types/unified-alerting-dto'; @@ -53,25 +54,24 @@ export const RuleState = ({ rule, isDeleting, isCreating, isPaused }: Props) => if (isDeleting) { return ( - + - deleting - + Deleting + ); } else if (isCreating) { return ( - - {' '} + - creating - + Creating + ); } else if (promRule && isAlertingRule(promRule)) { return ( - + {forTime} - + ); } else if (promRule && isRecordingRule(promRule)) { return <>Recording rule; diff --git a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx index 007e6032d1b..3e6a5b51493 100644 --- a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx +++ b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx @@ -209,9 +209,12 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }: /> )} -
- {isFederated && } {groupName} -
+ { + // eslint-disable-next-line +
setIsCollapsed(!isCollapsed)}> + {isFederated && } {groupName} +
+ }
@@ -275,68 +278,70 @@ export const RulesGroup = React.memo(({ group, namespace, expandAll, viewMode }: RulesGroup.displayName = 'RulesGroup'; -export const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - & + & { - margin-top: ${theme.spacing(2)}; - } - `, - header: css` - display: flex; - flex-direction: row; - align-items: center; - padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0; - background-color: ${theme.colors.background.secondary}; - flex-wrap: wrap; - `, - headerStats: css` - span { - vertical-align: middle; - } +export const getStyles = (theme: GrafanaTheme2) => { + return { + wrapper: css``, + header: css` + display: flex; + flex-direction: row; + align-items: center; + padding: ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0; + flex-wrap: wrap; + border-bottom: 1px solid ${theme.colors.border.weak}; + &:hover { + background-color: ${theme.components.table.rowHoverBackground}; + } + `, + headerStats: css` + span { + vertical-align: middle; + } - ${theme.breakpoints.down('sm')} { - order: 2; - width: 100%; - padding-left: ${theme.spacing(1)}; - } - `, - heading: css` - margin-left: ${theme.spacing(1)}; - margin-bottom: 0; - `, - spacer: css` - flex: 1; - `, - collapseToggle: css` - background: none; - border: none; - margin-top: -${theme.spacing(1)}; - margin-bottom: -${theme.spacing(1)}; - - svg { + ${theme.breakpoints.down('sm')} { + order: 2; + width: 100%; + padding-left: ${theme.spacing(1)}; + } + `, + groupName: css` + margin-left: ${theme.spacing(1)}; margin-bottom: 0; - } - `, - dataSourceIcon: css` - width: ${theme.spacing(2)}; - height: ${theme.spacing(2)}; - margin-left: ${theme.spacing(2)}; - `, - dataSourceOrigin: css` - margin-right: 1em; - color: ${theme.colors.text.disabled}; - `, - actionsSeparator: css` - margin: 0 ${theme.spacing(2)}; - `, - actionIcons: css` - width: 80px; - align-items: center; - `, - rulesTable: css` - margin-top: ${theme.spacing(3)}; - `, - rotate90: css` - transform: rotate(90deg); - `, -}); + cursor: pointer; + `, + spacer: css` + flex: 1; + `, + collapseToggle: css` + background: none; + border: none; + margin-top: -${theme.spacing(1)}; + margin-bottom: -${theme.spacing(1)}; + + svg { + margin-bottom: 0; + } + `, + dataSourceIcon: css` + width: ${theme.spacing(2)}; + height: ${theme.spacing(2)}; + margin-left: ${theme.spacing(2)}; + `, + dataSourceOrigin: css` + margin-right: 1em; + color: ${theme.colors.text.disabled}; + `, + actionsSeparator: css` + margin: 0 ${theme.spacing(2)}; + `, + actionIcons: css` + width: 80px; + align-items: center; + `, + rulesTable: css` + margin: ${theme.spacing(2, 0)}; + `, + rotate90: css` + transform: rotate(90deg); + `, + }; +}; diff --git a/public/app/features/alerting/unified/components/rules/RulesTable.tsx b/public/app/features/alerting/unified/components/rules/RulesTable.tsx index ac01a21f735..dd372f0ba86 100644 --- a/public/app/features/alerting/unified/components/rules/RulesTable.tsx +++ b/public/app/features/alerting/unified/components/rules/RulesTable.tsx @@ -106,9 +106,9 @@ export const getStyles = (theme: GrafanaTheme2) => ({ padding-top: ${theme.spacing(1)}; padding-bottom: ${theme.spacing(0.25)}; justify-content: center; - border-left: 1px solid ${theme.colors.border.strong}; - border-right: 1px solid ${theme.colors.border.strong}; - border-bottom: 1px solid ${theme.colors.border.strong}; + border-left: 1px solid ${theme.colors.border.medium}; + border-right: 1px solid ${theme.colors.border.medium}; + border-bottom: 1px solid ${theme.colors.border.medium}; `, });