Support prescribed labels (#3848)

# What this PR does

**Cleanup label typing:**
1. LabelParam -> two separate types LabekKey and LabelValue 
2. LabelData -> renamed to LabelPair. 
3. LabelKeyData -> renamed to LabelOption
Data is not giving any info about what this type represents. 
4. Remove LabelsData and LabelsKeysData types. They are just list of
types listed above and with new naming it feels obsolete.
5. ValueData removed. LabelPair is used instead.
6. Rework AlertGroupCustomLabel to use LabelKey type for key to make
type system more consistent. Name model type AlertGroupCustomLabel**DB**
and api type AlertGroupCustomLabel**API** to clearly distinguish them.

**Split update_labels_cache into two tasks** update_label_option_cache
and update_label_pairs_cache.
Original task was expecting array of LabelsData (now it's LabelPair) OR
one LabelKeyData ( now it's LabelOption). I believe having one function
with two sp different argument types makes it more complicated for
understanding.


**Make OnCall backend support prescribed labels**. OnCall will sync and
store "prescribed" field for key and values, so Label dropdown able to
disable editing for certain labels.

## Which issue(s) this PR fixes

## Checklist

- [x] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [x] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

---------

Co-authored-by: Maxim Mordasov <[email protected]>
Co-authored-by: Yulya Artyukhina <[email protected]>

Author: 3 people

package.json

@@ -124,7 +124,7 @@
     "@grafana/data": "^10.2.3",
     "@grafana/faro-web-sdk": "^1.0.0-beta4",
     "@grafana/faro-web-tracing": "^1.0.0-beta4",
-    "@grafana/labels": "~1.4.4",
+    "@grafana/labels": "1.5.0",
     "@grafana/runtime": "^10.2.2",
     "@grafana/scenes": "^1.28.0",
     "@grafana/schema": "^10.2.2",

src/components/LabelTag/LabelTag.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { HorizontalGroup, getTagColorsFromName, useStyles2 } from '@grafana/ui';
+import tinycolor2 from 'tinycolor2';
+
+export interface LabelTagProps {
+  label: string;
+  value: string;
+  size?: LabelTagSize;
+}
+
+export type LabelTagSize = 'md' | 'sm';
+
+export const LabelTag: React.FC<LabelTagProps> = (props: LabelTagProps) => {
+  const { label, value, size = 'sm' } = props;
+
+  const color = getLabelColor(label);
+
+  const styles = useStyles2((theme) => getStyles(theme, color, size));
+
+  return (
+    <div className={styles.wrapper} role="listitem">
+      <HorizontalGroup spacing="none">
+        <div className={styles.label}>{label ?? ''}</div>
+        <div className={styles.value}>{value}</div>
+      </HorizontalGroup>
+    </div>
+  );
+};
+
+function getLabelColor(input: string): string {
+  return getTagColorsFromName(input).color;
+}
+
+const getStyles = (theme: GrafanaTheme2, color?: string, size?: string) => {
+  const backgroundColor = color ?? theme.colors.secondary.main;
+
+  const borderColor = theme.isDark
+    ? tinycolor2(backgroundColor).lighten(5).toString()
+    : tinycolor2(backgroundColor).darken(5).toString();
+
+  const valueBackgroundColor = theme.isDark
+    ? tinycolor2(backgroundColor).darken(5).toString()
+    : tinycolor2(backgroundColor).lighten(5).toString();
+
+  const fontColor = color
+    ? tinycolor2.mostReadable(backgroundColor, ['#000', '#fff']).toString()
+    : theme.colors.text.primary;
+
+  const padding =
+    size === 'md' ? `${theme.spacing(0.33)} ${theme.spacing(1)}` : `${theme.spacing(0.2)} ${theme.spacing(0.6)}`;
+
+  return {
+    wrapper: css`
+      color: ${fontColor};
+      font-size: ${theme.typography.bodySmall.fontSize};
+
+      border-radius: ${theme.shape.borderRadius(2)};
+    `,
+    label: css`
+      display: flex;
+      align-items: center;
+      color: inherit;
+
+      padding: ${padding};
+      background: ${backgroundColor};
+
+      border: solid 1px ${borderColor};
+      border-top-left-radius: ${theme.shape.borderRadius(2)};
+      border-bottom-left-radius: ${theme.shape.borderRadius(2)};
+    `,
+    value: css`
+      color: inherit;
+      padding: ${padding};
+      background: ${valueBackgroundColor};
+
+      border: solid 1px ${borderColor};
+      border-left: none;
+      border-top-right-radius: ${theme.shape.borderRadius(2)};
+      border-bottom-right-radius: ${theme.shape.borderRadius(2)};
+    `,
+  };
+};

src/containers/IntegrationLabelsForm/IntegrationLabelsForm.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useCallback, useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 
 import { ServiceLabels } from '@grafana/labels';
 import {
@@ -22,6 +22,7 @@ import { RenderConditionally } from 'components/RenderConditionally/RenderCondit
 import { Text } from 'components/Text/Text';
 import { IntegrationTemplate } from 'containers/IntegrationTemplate/IntegrationTemplate';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
+import { splitToGroups } from 'models/label/label.helpers';
 import { LabelsErrors } from 'models/label/label.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { LabelTemplateOptions } from 'pages/integration/IntegrationCommon.config';
@@ -281,36 +282,34 @@ const CustomLabels = (props: CustomLabelsProps) => {
     });
   };
 
-  const cachedOnLoadKeys = useCallback(() => {
+  const onLoadKeys = async (search?: string) => {
     let result = undefined;
-    return async (search?: string) => {
-      if (!result) {
-        try {
-          result = await labelsStore.loadKeys();
-        } catch (error) {
-          openErrorNotification('There was an error processing your request. Please try again');
-        }
-      }
 
-      return result.filter((k) => k.name.toLowerCase().includes(search.toLowerCase()));
-    };
-  }, []);
+    try {
+      result = await labelsStore.loadKeys(search);
+    } catch (error) {
+      openErrorNotification('There was an error processing your request. Please try again');
+    }
+
+    const groups = splitToGroups(result);
+
+    return groups;
+  };
 
-  const cachedOnLoadValuesForKey = useCallback(() => {
+  const onLoadValuesForKey = async (key: string, search?: string) => {
     let result = undefined;
-    return async (key: string, search?: string) => {
-      if (!result) {
-        try {
-          const { values } = await labelsStore.loadValuesForKey(key, search);
-          result = values;
-        } catch (error) {
-          openErrorNotification('There was an error processing your request. Please try again');
-        }
-      }
 
-      return result.filter((k) => k.name.toLowerCase().includes(search.toLowerCase()));
-    };
-  }, []);
+    try {
+      const { values } = await labelsStore.loadValuesForKey(key, search);
+      result = values;
+    } catch (error) {
+      openErrorNotification('There was an error processing your request. Please try again');
+    }
+
+    const groups = splitToGroups(result);
+
+    return groups;
+  };
 
   return (
     <VerticalGroup>
@@ -328,8 +327,8 @@ const CustomLabels = (props: CustomLabelsProps) => {
         inputWidth={INPUT_WIDTH}
         errors={customLabelsErrors}
         value={alertGroupLabels.custom}
-        onLoadKeys={cachedOnLoadKeys()}
-        onLoadValuesForKey={cachedOnLoadValuesForKey()}
+        onLoadKeys={onLoadKeys}
+        onLoadValuesForKey={onLoadValuesForKey}
         onCreateKey={labelsStore.createKey}
         onUpdateKey={labelsStore.updateKey}
         onCreateValue={labelsStore.createValue}
@@ -377,6 +376,8 @@ const CustomLabels = (props: CustomLabelsProps) => {
             custom: value,
           });
         }}
+        getIsKeyEditable={(option) => !option.prescribed}
+        getIsValueEditable={(option) => !option.prescribed}
       />
       <Dropdown
         overlay={

src/containers/Labels/Labels.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
 
-import { ServiceLabels, ServiceLabelsProps } from '@grafana/labels';
+import { ServiceLabelsProps, ServiceLabels } from '@grafana/labels';
 import { Field, Label } from '@grafana/ui';
 import { isEmpty } from 'lodash-es';
 import { observer } from 'mobx-react';
 
+import { splitToGroups } from 'models/label/label.helpers';
 import { LabelKeyValue } from 'models/label/label.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification } from 'utils/utils';
@@ -46,20 +47,32 @@ const _Labels = observer(
       [value]
     );
 
-    const cachedOnLoadKeys = useCallback(() => {
+    const onLoadKeys = async (search?: string) => {
       let result = undefined;
-      return async (search?: string) => {
-        if (!result) {
-          try {
-            result = await labelsStore.loadKeys();
-          } catch (error) {
-            openErrorNotification('There was an error processing your request. Please try again');
-          }
-        }
-
-        return result.filter((k) => k.name.toLowerCase().includes(search.toLowerCase()));
-      };
-    }, []);
+      try {
+        result = await labelsStore.loadKeys(search);
+      } catch (error) {
+        openErrorNotification('There was an error processing your request. Please try again');
+      }
+
+      const groups = splitToGroups(result);
+
+      return groups;
+    };
+
+    const onLoadValuesForKey = async (key: string, search?: string) => {
+      let result = undefined;
+      try {
+        const { values } = await labelsStore.loadValuesForKey(key, search);
+        result = values;
+      } catch (error) {
+        openErrorNotification('There was an error processing your request. Please try again');
+      }
+
+      const groups = splitToGroups(result);
+
+      return groups;
+    };
 
     const isValid = () => {
       return (
@@ -86,30 +99,14 @@ const _Labels = observer(
       );
     };
 
-    const cachedOnLoadValuesForKey = useCallback(() => {
-      let result = undefined;
-      return async (key: string, search?: string) => {
-        if (!result) {
-          try {
-            const { values } = await labelsStore.loadValuesForKey(key, search);
-            result = values;
-          } catch (error) {
-            openErrorNotification('There was an error processing your request. Please try again');
-          }
-        }
-
-        return result.filter((k) => k.name.toLowerCase().includes(search.toLowerCase()));
-      };
-    }, []);
-
     return (
       <div>
         <Field label={<Label description={<div className="u-padding-vertical-xs">{description}</div>}>Labels</Label>}>
           <ServiceLabels
             loadById
             value={value}
-            onLoadKeys={cachedOnLoadKeys()}
-            onLoadValuesForKey={cachedOnLoadValuesForKey()}
+            onLoadKeys={onLoadKeys}
+            onLoadValuesForKey={onLoadValuesForKey}
             onCreateKey={labelsStore.createKey}
             onUpdateKey={labelsStore.updateKey}
             onCreateValue={labelsStore.createValue}
@@ -118,6 +115,8 @@ const _Labels = observer(
             onUpdateError={onUpdateError}
             errors={isValid() ? {} : { ...propsErrors }}
             onDataUpdate={onChange}
+            getIsKeyEditable={(option) => !option.prescribed}
+            getIsValueEditable={(option) => !option.prescribed}
           />
         </Field>
       </div>

src/models/label/label.helpers.ts

@@ -0,0 +1,15 @@
+import { ApiSchemas } from 'network/oncall-api/api.types';
+
+export const splitToGroups = (labels: Array<ApiSchemas['LabelKey']> | Array<ApiSchemas['LabelValue']>) => {
+  return labels.reduce(
+    (memo, option) => {
+      memo.find(({ name }) => name === (option.prescribed ? 'System' : 'User added')).options.push(option);
+
+      return memo;
+    },
+    [
+      { name: 'System', id: 'system', expanded: true, options: [] },
+      { name: 'User added', id: 'user_added', expanded: true, options: [] },
+    ]
+  );
+};

src/models/label/label.ts

@@ -1,4 +1,4 @@
-import { action, observable, makeObservable, runInAction } from 'mobx';
+import { action, makeObservable } from 'mobx';
 
 import { BaseStore } from 'models/base_store';
 import { makeRequest } from 'network/network';
@@ -8,12 +8,6 @@ import { RootStore } from 'state/rootStore';
 import { WithGlobalNotification } from 'utils/decorators';
 
 export class LabelStore extends BaseStore {
-  @observable.shallow
-  public keys: Array<ApiSchemas['LabelKey']> = [];
-
-  @observable.shallow
-  public values: { [key: string]: Array<ApiSchemas['LabelValue']> } = {};
-
   constructor(rootStore: RootStore) {
     super(rootStore);
 
@@ -23,14 +17,12 @@ export class LabelStore extends BaseStore {
   }
 
   @action.bound
-  public async loadKeys() {
+  public async loadKeys(search = '') {
     const { data } = await onCallApi.GET('/labels/keys/', undefined);
 
-    runInAction(() => {
-      this.keys = data;
-    });
+    const filtered = data.filter((k) => k.name.toLowerCase().includes(search.toLowerCase()));
 
-    return data;
+    return filtered;
   }
 
   @action.bound
@@ -43,14 +35,7 @@ export class LabelStore extends BaseStore {
       params: { search },
     });
 
-    const filteredValues = result.values.filter((v) => v.name.toLowerCase().includes(search.toLowerCase())); // TODO remove after backend search implementation
-
-    runInAction(() => {
-      this.values = {
-        ...this.values,
-        [key]: filteredValues,
-      };
-    });
+    const filteredValues = result.values.filter((v) => v.name.toLowerCase().includes(search.toLowerCase()));
 
     return { ...result, values: filteredValues };
   }

src/network/oncall-api/autogenerated-api.types.d.ts

@@ -571,6 +571,7 @@ export interface components {
     LabelKey: {
       id: string;
       name: string;
+      prescribed?: boolean;
     };
     LabelKeyValues: {
       key: components['schemas']['LabelKey'];
@@ -582,6 +583,7 @@ export interface components {
     LabelValue: {
       id: string;
       name: string;
+      prescribed?: boolean;
     };
     PaginatedAlertGroupListList: {
       next?: string | null;