IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Updates the new alerting rule table to use new theme (#33684)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-05-04 13:38:01 +02:00 committed by GitHub
parent b62e87f753
commit a62bfba63b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 94 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/grafana-data/src/themes/createV1Theme.ts
View File

@ -194,16 +194,16 @@ export function createV1Theme(theme: Omit<GrafanaTheme2, 'v1'>): 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,

14
public/app/features/alerting/unified/components/StateColoredText.tsx
View File

@ -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<Props> = ({ children, status }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return <span className={styles[status]}>{children || status}</span>;
};
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};
`,
});

47
public/app/features/alerting/unified/components/StateTag.tsx
View File

@ -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<Props> = ({ children, status }) => {
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
return <span className={cx(styles.common, styles[status])}>{children || status}</span>;
};
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};
`,
});

4
public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
View File

@ -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<Props> = ({ config, alertManagerName }) => {
const tableStyles = useStyles(getAlertTableStyles);
const tableStyles = useStyles2(getAlertTableStyles);
const grafanaNotifiers = useUnifiedAlertingSelector((state) => state.grafanaNotifiers);

4
public/app/features/alerting/unified/components/receivers/TemplatesTable.tsx
View File

@ -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<Props> = ({ config, alertManagerName }) => {
const [expandedTemplates, setExpandedTemplates] = useState<Record<string, boolean>>({});
const tableStyles = useStyles(getAlertTableStyles);
const tableStyles = useStyles2(getAlertTableStyles);
const templateRows = useMemo(() => Object.entries(config.template_files), [config]);

18
public/app/features/alerting/unified/components/rules/AlertInstancesTable.tsx
View File

@ -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<Props> = ({ instances }) => {
const styles = useStyles(getStyles);
const tableStyles = useStyles(getAlertTableStyles);
const styles = useStyles2(getStyles);
const tableStyles = useStyles2(getAlertTableStyles);
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
@ -79,7 +79,7 @@ export const AlertInstancesTable: FC<Props> = ({ 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)};
}
`,
});

34
public/app/features/alerting/unified/components/rules/RulesTable.tsx
View File

@ -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<Props> = ({
const hasRuler = useHasRuler();
const styles = useStyles(getStyles);
const tableStyles = useStyles(getAlertTableStyles);
const styles = useStyles2(getStyles);
const tableStyles = useStyles2(getAlertTableStyles);
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
@ -190,28 +190,28 @@ export const RulesTable: FC<Props> = ({
);
};
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%;
`,

12
public/app/features/alerting/unified/components/silences/SilencedAlertsTable.tsx
View File

@ -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<Props> = ({ 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<Props> = ({ 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;

4
public/app/features/alerting/unified/components/silences/SilencedAlertsTableRow.tsx
View File

@ -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<Props> = ({ 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__') {

10
public/app/features/alerting/unified/components/silences/SilencesTable.tsx
View File

@ -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<Props> = ({ 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<Props> = ({ silences, alertManagerAlerts, alertManagerSo
}
};
const getStyles = (theme: GrafanaTheme) => ({
const getStyles = (theme: GrafanaTheme2) => ({
colState: css`
width: 110px;
`,

18
public/app/features/alerting/unified/styles/table.ts
View File

@ -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)};
}
`,
});