Merge pull request PelicanPlatform#1493 from CannonLock/director-maps

Director maps

web_ui/frontend/app/cache/layout.tsx

@@ -18,13 +18,15 @@
 
 import { Box, Tooltip } from '@mui/material';
 
-import { Sidebar } from '@/components/layout/Sidebar';
+import { ButtonLink, Sidebar } from '@/components/layout/Sidebar';
 import Link from 'next/link';
 import Image from 'next/image';
 import PelicanLogo from '@/public/static/images/PelicanPlatformLogo_Icon.png';
 import IconButton from '@mui/material/IconButton';
 import BuildIcon from '@mui/icons-material/Build';
 import Main from '@/components/layout/Main';
+import { PaddedContent } from '@/components/layout';
+import { Dashboard, MapOutlined } from '@mui/icons-material';
 
 export const metadata = {
   title: 'Pelican Cache',
@@ -39,17 +41,16 @@ export default function RootLayout({
   return (
     <Box display={'flex'} flexDirection={'row'}>
       <Sidebar>
-        <Box pt={1}>
-          <Tooltip title={'Config'} placement={'right'}>
-            <Link href={'/config/'}>
-              <IconButton>
-                <BuildIcon />
-              </IconButton>
-            </Link>
-          </Tooltip>
-        </Box>
+        <ButtonLink title={'Cache'} href={'/cache/'}>
+          <Dashboard />
+        </ButtonLink>
+        <ButtonLink title={'Config'} href={'/config/'}>
+          <BuildIcon />
+        </ButtonLink>
       </Sidebar>
-      <Main>{children}</Main>
+      <Main>
+        <PaddedContent>{children}</PaddedContent>
+      </Main>
     </Box>
   );
 }

web_ui/frontend/app/config/components/ConfigDisplay.tsx

@@ -0,0 +1,110 @@
+import { Config, ParameterInputProps } from '@/components/Config/index';
+import { Box, Button, Typography } from '@mui/material';
+import { Field } from '@/components/Config';
+import { QuestionMark } from '@mui/icons-material';
+import { OverridableStringUnion } from '@mui/types';
+import { Variant } from '@mui/material/styles/createTypography';
+import { TypographyPropsVariantOverrides } from '@mui/material/Typography';
+import React from 'react';
+import { isConfig, sortConfig } from '@/app/config/util';
+
+export interface ConfigDisplayProps {
+  id: string[];
+  name: string;
+  value: Config | ParameterInputProps;
+  level: number;
+  onChange: (patch: any) => void;
+}
+
+export function ConfigDisplay({
+  id,
+  name,
+  value,
+  level = 1,
+  onChange,
+}: ConfigDisplayProps) {
+  if (name != '') {
+    id = [...id, name];
+  }
+
+  // If this is a ConfigValue then display it
+  if (!isConfig(value)) {
+    return (
+      <Box pt={2} display={'flex'} id={id.join('-')}>
+        <Box flexGrow={1} minWidth={0}>
+          <Field {...(value as ParameterInputProps)} onChange={onChange} />
+        </Box>
+
+        <Button
+          size={'small'}
+          href={`https://docs.pelicanplatform.org/parameters#${id.join('-')}`}
+          target={'_blank'}
+        >
+          <QuestionMark />
+        </Button>
+      </Box>
+    );
+  }
+
+  // If this is a Config then display all of its values
+  let subValues = Object.entries(value);
+  subValues.sort(sortConfig);
+
+  let configDisplays = subValues.map(([k, v]) => {
+    return (
+      <ConfigDisplay
+        id={id}
+        key={k}
+        name={k}
+        value={v}
+        level={level + 1}
+        onChange={onChange}
+      />
+    );
+  });
+
+  let variant: OverridableStringUnion<
+    'inherit' | Variant,
+    TypographyPropsVariantOverrides
+  >;
+  switch (level) {
+    case 1:
+      variant = 'h1';
+      break;
+    case 2:
+      variant = 'h2';
+      break;
+    case 3:
+      variant = 'h3';
+      break;
+    case 4:
+      variant = 'h4';
+      break;
+    case 5:
+      variant = 'h5';
+      break;
+    case 6:
+      variant = 'h6';
+      break;
+    default:
+      variant = 'h6';
+  }
+
+  return (
+    <>
+      {name ? (
+        <Typography
+          id={id.join('-')}
+          variant={variant}
+          component={variant}
+          mt={2}
+        >
+          {name}
+        </Typography>
+      ) : undefined}
+      {configDisplays}
+    </>
+  );
+}
+
+export default ConfigDisplay;

web_ui/frontend/app/config/components/TableOfContents.tsx

@@ -0,0 +1,100 @@
+import { Config, ParameterInputProps } from '@/components/Config/index';
+import React, { useState } from 'react';
+import { Box, Link, Typography } from '@mui/material';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import { isConfig, sortConfig } from '@/app/config/util';
+
+interface TableOfContentsProps {
+  id: string[];
+  name: string;
+  value: Config | ParameterInputProps;
+  level: number;
+}
+
+export function TableOfContents({
+  id,
+  name,
+  value,
+  level = 1,
+}: TableOfContentsProps) {
+  const [open, setOpen] = useState(false);
+
+  if (name != '') {
+    id = [...id, name];
+  }
+
+  let subContents = undefined;
+  if (isConfig(value)) {
+    let subValues = Object.entries(value);
+    subValues.sort(sortConfig);
+    subContents = subValues.map(([key, value]) => {
+      return (
+        <TableOfContents
+          id={id}
+          key={key}
+          name={key}
+          value={value}
+          level={level + 1}
+        />
+      );
+    });
+  }
+
+  let headerPointer = (
+    <Box
+      sx={{
+        '&:hover': {
+          backgroundColor: 'primary.light',
+        },
+        borderRadius: 1,
+        paddingX: '5px',
+        paddingLeft: 0 + 5 * level + 'px',
+      }}
+    >
+      <Link
+        href={subContents ? undefined : `#${id.join('-')}`}
+        sx={{
+          cursor: 'pointer',
+          textDecoration: 'none',
+          color: 'black',
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+        }}
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        <Typography
+          style={{
+            fontSize: 20 - 2 * level + 'px',
+            fontWeight: subContents ? '600' : 'normal',
+          }}
+        >
+          {name}
+        </Typography>
+        {subContents ? open ? <ArrowDropUp /> : <ArrowDropDown /> : undefined}
+      </Link>
+    </Box>
+  );
+
+  return (
+    <>
+      {name ? headerPointer : undefined}
+      {subContents && level != 1 ? (
+        <Box
+          sx={{
+            display: open ? 'block' : 'none',
+            cursor: 'pointer',
+          }}
+        >
+          {subContents}
+        </Box>
+      ) : (
+        subContents
+      )}
+    </>
+  );
+}
+
+export default TableOfContents;

web_ui/frontend/app/config/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ConfigDisplay';
+export * from './TableOfContents';