display nicer category names

src/app/Settings/NotificationControl.tsx

@@ -39,26 +39,30 @@
 import * as React from 'react';
 import { Switch, Stack, StackItem } from '@patternfly/react-core';
 import { ServiceContext } from '@app/Shared/Services/Services';
-import { NotificationCategory } from '@app/Shared/Services/NotificationChannel.service';
+import { NotificationCategory, messageKeys } from '@app/Shared/Services/NotificationChannel.service';
 import { UserSetting } from './Settings';
 
 const Component = () => {
   const context = React.useContext(ServiceContext);
-  const [state, setState] = React.useState(new Map());
-
-  React.useLayoutEffect(() => {
-    setState(context.settings.notificationsEnabled());
-  }, [setState, context.settings]);
+  const [state, setState] = React.useState(context.settings.notificationsEnabled());
 
   const handleCheckboxChange = React.useCallback((checked, element) => {
     state.set(NotificationCategory[element.target.id], checked);
     context.settings.setNotificationsEnabled(state);
     setState(new Map(state));
   }, [state, setState, context.settings]);
 
+  const labels = React.useMemo(() => {
+    const result = new Map<NotificationCategory, string>();
+    messageKeys.forEach((v, k) => {
+      result.set(k, v?.title || k);
+    });
+    return result;
+  }, [messageKeys]);
+
   const boxes = React.useMemo(() => {
-    return Array.from(state.entries(), ([key, value]) => <StackItem><Switch id={key} label={key} isChecked={value} onChange={handleCheckboxChange} /></StackItem>);
-  }, [state]);
+    return Array.from(state.entries(), ([key, value]) => <StackItem><Switch id={key} label={labels.get(key)} isChecked={value} onChange={handleCheckboxChange} /></StackItem>);
+  }, [state, labels]);
 
   return (<>
     <Stack hasGutter>
@@ -69,6 +73,6 @@ const Component = () => {
 
 export const NotificationControl: UserSetting = {
   title: 'Notifications',
-  description: 'Enable or disable categories of notification pop-up.',
+  description: 'Enable or disable notifications by category.',
   content: Component,
 }

src/app/Shared/Services/Api.service.tsx

@@ -41,7 +41,8 @@ import { catchError, concatMap, first, map, mergeMap, tap } from 'rxjs/operators
 import { Target, TargetService } from './Target.service';
 import { Notifications } from '@app/Notifications/Notifications';
 import { AuthMethod, LoginService, SessionState } from './Login.service';
-import {Rule} from '@app/Rules/Rules';
+import { Rule } from '@app/Rules/Rules';
+import { NotificationCategory } from './NotificationChannel.service';
 
 type ApiVersion = 'v1' | 'v2' | 'v2.1' | 'beta';
 
@@ -154,9 +155,9 @@ export class ApiService {
         error: err => {
           window.console.error(err);
           if (err.state === 'unavailable') {
-            this.notifications.danger(`Grafana ${err.state}`, err.message);
+            this.notifications.danger(`Grafana ${err.state}`, err.message, NotificationCategory.GrafanaConfiguration);
           } else {
-            this.notifications.warning(`Grafana ${err.state}`, err.message);
+            this.notifications.warning(`Grafana ${err.state}`, err.message, NotificationCategory.GrafanaConfiguration);
           }
         }
       });

src/app/Shared/Services/NotificationChannel.service.tsx

@@ -57,6 +57,7 @@ export enum NotificationCategory {
   TemplateDeleted = 'TemplateDeleted',
   RuleCreated = 'RuleCreated',
   RuleDeleted = 'RuleDeleted',
+  GrafanaConfiguration = 'GrafanaConfiguration', // generated client-side
 }
 
 export enum CloseStatus {
@@ -71,12 +72,22 @@ interface ReadyState {
   code?: CloseStatus;
 }
 
-const messageKeys = new Map([
+export const messageKeys = new Map([
   [
     // explicitly configure this category with a null mapper.
     // This is a special case because we do not want to display an alert,
     // the Targets.service already handles this
-    NotificationCategory.TargetJvmDiscovery, null
+    NotificationCategory.TargetJvmDiscovery, {
+      title: 'Target JVM Discovery',
+    },
+  ],
+  [
+    // explicitly configure this category with a null mapper.
+    // This is a special case because this is generated client-side,
+    // not sent by the backend
+    NotificationCategory.GrafanaConfiguration, {
+      title: 'Grafana Configuration',
+    },
   ],
   [
     NotificationCategory.WsClientActivity, {
@@ -163,8 +174,8 @@ const messageKeys = new Map([
 
 interface NotificationMessageMapper {
   title: string;
-  body: (evt: NotificationMessage) => string;
-  variant: AlertVariant;
+  body?: (evt: NotificationMessage) => string;
+  variant?: AlertVariant;
 }
 
 export class NotificationChannel {
@@ -178,10 +189,13 @@ export class NotificationChannel {
     private readonly login: LoginService
   ) {
     messageKeys.forEach((value, key) => {
-      if (!value) {
+      if (!value || !value.body || !value.variant) {
         return;
       }
       this.messages(key).subscribe((msg: NotificationMessage) => {
+        if (!value || !value.body || !value.variant) {
+          return;
+        }
         const message = value.body(msg);
         notifications.notify({ title: value.title, message, category: key, variant: value.variant })
       });

src/app/Shared/Services/Settings.service.tsx

@@ -97,6 +97,11 @@ export class SettingsService {
           obj.forEach((v: any) => {
             res.set(v[0] as NotificationCategory, v[1] as boolean);
           });
+          for (const c in NotificationCategory) {
+            if (!res.has(NotificationCategory[c])) {
+              res.set(NotificationCategory[c], true);
+            }
+          }
           return res;
         }
       } catch (e) {