Add cluster notification (#1291)

* add aml link and notification for cluster * just enable cluster notification * specify notification element * indent error and change notification's component name Co-authored-by: qizhang4 <qizhang4@microsoft.com>
microsoft · Aug 17, 2020 · 0faa3e5 · 0faa3e5
1 parent 14d7f30
commit 0faa3e5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 32 deletions.
diff --git a/src/dashboard/server/api/validator/config.schema.json b/src/dashboard/server/api/validator/config.schema.json
@@ -66,6 +66,13 @@
               "title": "Whether it supports allowed IP",
               "description": "Set to true if it could be listed in allowed ip page",
               "type": "boolean"
+            },
+            "notifications": {
+              "title": "Notifications for the cluster",
+              "type": "array",
+              "items": {
+                "type": "string"
+              }
             }
           }
         }

diff --git a/src/dashboard/src/Layout/NotificationBox.tsx b/src/dashboard/src/Layout/NotificationBox.tsx
@@ -1,26 +1,22 @@
 import * as React from 'react';
 import {
+  Fragment,
   FunctionComponent,
   useContext,
-  useMemo,
-} from 'react';
-
-import { get } from 'lodash';
-
+  useMemo
+} from 'react'
+import useFetch from 'use-http-1'
 import {
   Box,
   BoxProps,
   Divider,
   Paper,
   Typography,
   createStyles,
-  makeStyles,
-} from '@material-ui/core';
-
-import { Info } from '@material-ui/icons';
-
-import ConfigContext from '../contexts/Config';
-import TeamContext from '../contexts/Team';
+  makeStyles
+} from '@material-ui/core'
+import { Info } from '@material-ui/icons'
+import ClustersContext from '../contexts/Clusters'
 
 const usePaperStyle = makeStyles(theme => createStyles({
   root: {
@@ -30,29 +26,44 @@ const usePaperStyle = makeStyles(theme => createStyles({
   },
 }));
 
-const NotificationBox: FunctionComponent<BoxProps> = (props) => {
-  const { notifications } = useContext(ConfigContext);
-  const { currentTeamId } = useContext(TeamContext);
-
-  const notification = useMemo(() => {
-    const notification = get(notifications, [currentTeamId]);
-    if (notification === undefined) {
-      return get(notifications, ['.default']);
-    }
-    return notification
-  }, [notifications, currentTeamId]);
-
-  const paperStyle = usePaperStyle();
-
-  if (Boolean(notification) === false) return null;
+const ClusterNotifications: FunctionComponent<{ cluster: any }> = ({ cluster }) => {
+  const { data } = useFetch(`/api/clusters/${cluster.id}`, [cluster.id])
+  const notifications = useMemo(() => {
+    if (data === undefined) return []
+    if (!Array.isArray(data.notifications)) return []
+    return data.notifications as string[]
+  }, [data])
+  const paperStyle = usePaperStyle()
+  return (
+    <>
+      {
+        notifications.map((notification, index) => (
+          <Fragment key={index}>
+            <Paper elevation={0} classes={paperStyle}>
+              <Info fontSize="small" color="primary"/>
+              <Typography
+                variant="body2"
+                component={Box}
+                flex={1}
+                paddingLeft={1}
+                dangerouslySetInnerHTML={{ __html: notification }}
+              />
+            </Paper>
+            <Divider/>
+          </Fragment>
+        ))
+      }
+    </>
+  )
+}
 
+const NotificationBox: FunctionComponent<BoxProps> = (props) => {
+  const { clusters } = useContext(ClustersContext)
   return (
     <Box {...props}>
-      <Paper elevation={0} classes={paperStyle}>
-        <Info fontSize="small" color="primary"/>
-        <Typography variant="body2" component={Box} flex={1} paddingLeft={1}>{notification}</Typography>
-      </Paper>
-      <Divider/>
+      {clusters.map(cluster => (
+        <ClusterNotifications key={cluster.id} cluster={cluster}/>
+      ))}
     </Box>
   );
 };