Add Namespaces to the director UI

- Add iconography to the server list to indicate type
PelicanPlatform · Nov 18, 2024 · 0ac23a2 · 0ac23a2
1 parent 78ae774
commit 0ac23a2
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 24 deletions.
diff --git a/web_ui/frontend/app/director/components/NamespaceDropdown.tsx b/web_ui/frontend/app/director/components/NamespaceDropdown.tsx
@@ -22,7 +22,7 @@ export const NamespaceDropdown = ({
           <Grid item xs={12} md={12}>
             <InformationSpan name={'Path'} value={namespace.path} />
             <InformationSpanHeader title={'Token Generation'} />
-            {namespace.tokenGeneration.map((tg) =>
+            {namespace.tokenGeneration?.map((tg) =>
               <Fragment key={tg.issuer}>
                 <InformationSpan indent={1} name={'Issuer'} value={tg.issuer} />
                 <InformationSpan indent={2} name={'Strategy'} value={tg.strategy} />
@@ -31,7 +31,7 @@ export const NamespaceDropdown = ({
               </Fragment>
             )}
             <InformationSpanHeader title={'Token Issuer'} />
-            {namespace.tokenIssuer.map((ti) =>
+            {namespace.tokenIssuer?.map((ti) =>
               <Fragment key={ti.issuer}>
                 <InformationSpan indent={1} name={'Issuer'} value={ti.issuer} />
                 <InformationSpanHeader indent={2} title={"Base Paths"} />

diff --git a/web_ui/frontend/components/Namespace/NamespaceIcon.tsx b/web_ui/frontend/components/Namespace/NamespaceIcon.tsx
@@ -1,66 +1,102 @@
 import { Avatar, Box, Tooltip } from '@mui/material';
 import { FolderOpen, Storage, TripOrigin } from '@mui/icons-material';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 const NamespaceIcon = ({
-  serverType: prefixType,
+  serverType,
+  size,
+  color = 'white',
+  bgcolor = 'primary.main',
 }: {
   serverType: 'origin' | 'cache' | 'namespace';
+  size?: 'large' | 'medium' | 'small';
+  color?: string;
+  bgcolor?: string;
 }) => {
-  if (prefixType == 'namespace') {
+
+  const avatarPixelSize = useMemo(() => {
+    switch (size) {
+      case 'large':
+        return 50;
+      case 'medium':
+        return 30;
+      case 'small':
+        return 20;
+      default:
+        return 30;
+    }
+  }, [size])
+
+  const iconPixelSize = useMemo(() => {
+    switch (size) {
+      case 'large':
+        return 30;
+      case 'medium':
+        return 24;
+      case 'small':
+        return 15;
+      default:
+        return 24;
+    }
+  }, [])
+
+  if (serverType == 'namespace') {
     return (
       <Box>
         <Tooltip title={'Namespace'} placement={'left'}>
           <Avatar
+            sizes={'small'}
             sx={{
-              height: '30px',
-              width: '30px',
+              height: avatarPixelSize,
+              width: avatarPixelSize,
               my: 'auto',
               mr: 1,
-              bgcolor: 'primary.main',
+              bgcolor
             }}
           >
-            <FolderOpen />
+            <FolderOpen sx={{fontSize: iconPixelSize}} htmlColor={color} />
           </Avatar>
         </Tooltip>
       </Box>
     );
   }
 
-  if (prefixType == 'origin') {
+  if (serverType == 'origin') {
     return (
       <Box>
         <Tooltip title={'Origin'} placement={'left'}>
           <Avatar
+            sizes={'small'}
             sx={{
-              height: '30px',
-              width: '30px',
+              height: avatarPixelSize,
+              width: avatarPixelSize,
               my: 'auto',
               mr: 1,
-              bgcolor: 'primary.main',
+              bgcolor
             }}
           >
-            <TripOrigin />
+            <TripOrigin sx={{fontSize: iconPixelSize}} htmlColor={color} />
           </Avatar>
         </Tooltip>
       </Box>
     );
   }
 
-  if (prefixType == 'cache') {
+  if (serverType == 'cache') {
     return (
       <Box>
         <Tooltip title={'Cache'} placement={'left'}>
           <Avatar
+            sizes={'small'}
             sx={{
-              height: '30px',
-              width: '30px',
+              height: avatarPixelSize,
+              width: avatarPixelSize,
               my: 'auto',
               mr: 1,
-              bgcolor: 'primary.main',
+              bgcolor
             }}
           >
-            <Storage />
+            <Storage sx={{fontSize: iconPixelSize}} htmlColor={color} />
           </Avatar>
         </Tooltip>
       </Box>

diff --git a/web_ui/frontend/components/NamespaceCapabilitiesTable.tsx b/web_ui/frontend/components/NamespaceCapabilitiesTable.tsx
@@ -7,9 +7,10 @@
  */
 
 import { Namespace, ServerDetailed, ServerGeneral } from '@/types';
-import { Box, Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography, useTheme } from '@mui/material';
 import { CapabilitiesRow } from '@/app/director/components/DirectorDropdown';
 import { grey } from '@mui/material/colors';
+import { NamespaceIcon } from '@/components/Namespace';
 
 interface NamespaceCapabilitiesTableProps {
   namespace: Namespace
@@ -27,6 +28,9 @@ export const NamespaceCapabilitiesTable = ({
   namespace,
   servers
 }: NamespaceCapabilitiesTableProps) => {
+
+  const theme = useTheme();
+
   return (
     <Grid container spacing={1}>
       <Grid item xs={12}>
@@ -41,7 +45,7 @@ export const NamespaceCapabilitiesTable = ({
             <Grid item xs={3}>
               <Box display={'flex'} height={'100%'}>
                 <Typography variant={'body2'} my={'auto'}>
-                  {namespace.path} Capabilities
+                  Namespace Capabilities
                 </Typography>
               </Box>
             </Grid>
@@ -60,7 +64,8 @@ export const NamespaceCapabilitiesTable = ({
                 <Grid container spacing={1}>
                   <Grid item xs={3}>
                     <Box display={'flex'} height={'100%'}>
-                      <Typography variant={'body2'} my={'auto'}>
+                      <Typography variant={'body2'} my={'auto'} display={"flex"}>
+                        <NamespaceIcon serverType={server.type.toLowerCase() as 'origin' | 'cache'} size={"small"} bgcolor={"white"} color={theme.palette.primary.main} />
                         {server.name}
                       </Typography>
                     </Box>

diff --git a/web_ui/frontend/types.ts b/web_ui/frontend/types.ts
@@ -22,8 +22,8 @@ export interface TokenIssuer {
 export interface Namespace {
   path: string;
   capabilities: Capabilities;
-  tokenGeneration: TokenGeneration[];
-  tokenIssuer: TokenIssuer[];
+  tokenGeneration: TokenGeneration[] | null;
+  tokenIssuer: TokenIssuer[] | null;
   fromTopology: boolean;
   caches: string[];
   origins: string[];