Files
grafana/public/app/features/alerting/unified/components/AlertLabel.tsx
Nathan Rodman 1913d304a3 Alerting: Add silences table (#33138)
* Create table for silences

* Style table to figma designs

* Add rules table to silences

* Rebase with new rules table

* Remove redundant reducer

* fetch alertmanager alerts (#33142)

* fetch alertmanager alerts

* show the alerts json

* Use matching alerts from alertmanager api

* Add handle to expire silence

* Get silenced alerts closer to figma designs

* fix expire silence endpoint typo

* Style affected alerts table

* Add default empty string for alertmanager source

Co-authored-by: Domas <domasx2@gmail.com>
2021-04-27 13:46:34 -07:00

30 lines
828 B
TypeScript

import React, { FC } from 'react';
import { useStyles } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { css } from '@emotion/css';
interface Props {
labelKey: string;
value: string;
isRegex?: boolean;
}
export const AlertLabel: FC<Props> = ({ labelKey, value, isRegex = false }) => (
<div className={useStyles(getStyles)}>
{labelKey}={isRegex && '~'}
{value}
</div>
);
export const getStyles = (theme: GrafanaTheme) => css`
padding: ${theme.spacing.xs} ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
border: solid 1px ${theme.colors.border2};
font-size: ${theme.typography.size.sm};
background-color: ${theme.colors.bg2};
font-weight: ${theme.typography.weight.bold};
color: ${theme.colors.formLabel};
display: inline-block;
line-height: 1.2;
`;