From 87f8095acec2f6500a906fba8e22549b2a79eca4 Mon Sep 17 00:00:00 2001 From: Andrew Azores Date: Wed, 9 Mar 2022 13:47:20 -0500 Subject: [PATCH] display nicer category names --- src/app/Settings/NotificationControl.tsx | 22 ++++++++++------- src/app/Shared/Services/Api.service.tsx | 7 +++--- .../Services/NotificationChannel.service.tsx | 24 +++++++++++++++---- src/app/Shared/Services/Settings.service.tsx | 5 ++++ 4 files changed, 41 insertions(+), 17 deletions(-) diff --git a/src/app/Settings/NotificationControl.tsx b/src/app/Settings/NotificationControl.tsx index 5a2d54ada4..61efddf0d5 100644 --- a/src/app/Settings/NotificationControl.tsx +++ b/src/app/Settings/NotificationControl.tsx @@ -39,16 +39,12 @@ 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); @@ -56,9 +52,17 @@ const Component = () => { setState(new Map(state)); }, [state, setState, context.settings]); + const labels = React.useMemo(() => { + const result = new Map(); + messageKeys.forEach((v, k) => { + result.set(k, v?.title || k); + }); + return result; + }, [messageKeys]); + const boxes = React.useMemo(() => { - return Array.from(state.entries(), ([key, value]) => ); - }, [state]); + return Array.from(state.entries(), ([key, value]) => ); + }, [state, labels]); return (<> @@ -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, } diff --git a/src/app/Shared/Services/Api.service.tsx b/src/app/Shared/Services/Api.service.tsx index 28bbfff095..143e66d0f1 100644 --- a/src/app/Shared/Services/Api.service.tsx +++ b/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); } } }); diff --git a/src/app/Shared/Services/NotificationChannel.service.tsx b/src/app/Shared/Services/NotificationChannel.service.tsx index acb1c2afc5..07192797af 100644 --- a/src/app/Shared/Services/NotificationChannel.service.tsx +++ b/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 }) }); diff --git a/src/app/Shared/Services/Settings.service.tsx b/src/app/Shared/Services/Settings.service.tsx index 24ab1efdca..ebd4937db6 100644 --- a/src/app/Shared/Services/Settings.service.tsx +++ b/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) {