Alerting: Colorize labels and matchers (#46678)

* Replace AlertLabel with TagsList

* left align labels

* restart drone

public/app/features/alerting/unified/components/AlertLabels.tsx

@@ -1,30 +1,13 @@
-import { GrafanaTheme } from '@grafana/data';
-import { useStyles } from '@grafana/ui';
-import { css, cx } from '@emotion/css';
 import React from 'react';
-import { AlertLabel } from './AlertLabel';
+import { TagList } from '@grafana/ui';
 
 type Props = { labels: Record<string, string>; className?: string };
 
 export const AlertLabels = ({ labels, className }: Props) => {
-  const styles = useStyles(getStyles);
   const pairs = Object.entries(labels).filter(([key]) => !(key.startsWith('__') && key.endsWith('__')));
-
   return (
-    <div className={cx(styles.wrapper, className)}>
-      {pairs.map(([key, value], index) => (
-        <AlertLabel key={`${key}-${value}-${index}`} labelKey={key} value={value} />
-      ))}
+    <div className={className}>
+      <TagList tags={Object.values(pairs).map(([label, value]) => `${label}=${value}`)} />
     </div>
   );
 };
-
-const getStyles = (theme: GrafanaTheme) => ({
-  wrapper: css`
-    & > * {
-      margin-bottom: ${theme.spacing.xs};
-      margin-right: ${theme.spacing.xs};
-    }
-    padding-bottom: ${theme.spacing.xs};
-  `,
-});

public/app/features/alerting/unified/components/silences/Matchers.tsx

@@ -1,49 +1,25 @@
-import React, { useCallback } from 'react';
-import { GrafanaTheme } from '@grafana/data';
-import { useStyles } from '@grafana/ui';
+import React, { FC } from 'react';
 import { css } from '@emotion/css';
+import { TagList, useStyles2 } from '@grafana/ui';
 import { Matcher } from 'app/plugins/datasource/alertmanager/types';
-import { AlertLabel } from '../AlertLabel';
 import { matcherToOperator } from '../../utils/alertmanager';
 
-type MatchersProps = { matchers: Matcher[]; onRemoveLabel?(index: number): void };
-
-export const Matchers = ({ matchers, onRemoveLabel }: MatchersProps) => {
-  const styles = useStyles(getStyles);
-
-  const removeLabel = useCallback(
-    (index: number) => {
-      if (!!onRemoveLabel) {
-        onRemoveLabel(index);
-      }
-    },
-    [onRemoveLabel]
-  );
+type MatchersProps = { matchers: Matcher[] };
 
+export const Matchers: FC<MatchersProps> = ({ matchers }) => {
+  const styles = useStyles2(getStyles);
   return (
-    <div className={styles.wrapper}>
-      {matchers.map((matcher, index) => {
-        const { name, value } = matcher;
-        return (
-          <AlertLabel
-            key={`${name}-${value}-${index}`}
-            labelKey={name}
-            value={value}
-            operator={matcherToOperator(matcher)}
-            onRemoveLabel={!!onRemoveLabel ? () => removeLabel(index) : undefined}
-          />
-        );
-      })}
+    <div>
+      <TagList
+        className={styles.tags}
+        tags={matchers.map((matcher) => `${matcher.name}${matcherToOperator(matcher)}${matcher.value}`)}
+      />
     </div>
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
-  wrapper: css`
-    & > * {
-      margin-top: ${theme.spacing.xs};
-      margin-right: ${theme.spacing.xs};
-    }
-    padding-bottom: ${theme.spacing.xs};
+const getStyles = () => ({
+  tags: css`
+    justify-content: flex-start;
   `,
 });