fix(striker-ui): move old dashboard to /anvil and add server list as dashboard

3 years ago · e5b3243f04
parent b2e4747058
commit e5b3243f04
3 changed files with 231 additions and 93 deletions
--- a/striker-ui/pages/anvil/index.tsx
+++ b/striker-ui/pages/anvil/index.tsx
@ -0,0 +1,111 @@
 import Head from 'next/head';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Anvils from '../../components/Anvils';
 import Hosts from '../../components/Hosts';
 import CPU from '../../components/CPU';
 import SharedStorage from '../../components/SharedStorage';
 import Memory from '../../components/Memory';
 import Network from '../../components/Network';
 import periodicFetch from '../../lib/fetchers/periodicFetch';
 import Servers from '../../components/Servers';
 import Header from '../../components/Header';
 import AnvilProvider from '../../components/AnvilContext';
 import { LARGE_MOBILE_BREAKPOINT } from '../../lib/consts/DEFAULT_THEME';
 import useWindowDimensions from '../../hooks/useWindowDimenions';
 const PREFIX = 'Anvil';
 const classes = {
  child: `${PREFIX}-child`,
  server: `${PREFIX}-server`,
  container: `${PREFIX}-container`,
 };
 const StyledDiv = styled('div')(({ theme }) => ({
  [`& .${classes.child}`]: {
    width: '22%',
    height: '100%',
    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
      width: '50%',
    },
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
  [`& .${classes.server}`]: {
    width: '35%',
    height: '100%',
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
  [`& .${classes.container}`]: {
    display: 'flex',
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    [theme.breakpoints.down('md')]: {
      display: 'block',
    },
  },
 }));
 const Anvil = (): JSX.Element => {
  const width = useWindowDimensions();
  const { data } = periodicFetch<AnvilList>(
    `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`,
  );
  return (
    <StyledDiv>
      <Head>
        <title>Anvil</title>
      </Head>
      <AnvilProvider>
        <Header />
        {data?.anvils &&
          width &&
          (width > LARGE_MOBILE_BREAKPOINT ? (
            <Box className={classes.container}>
              <Box className={classes.child}>
                <Anvils list={data} />
                <Hosts anvil={data.anvils} />
              </Box>
              <Box className={classes.server}>
                <Servers anvil={data.anvils} />
              </Box>
              <Box className={classes.child}>
                <SharedStorage />
              </Box>
              <Box className={classes.child}>
                <Network />
                <CPU />
                <Memory />
              </Box>
            </Box>
          ) : (
            <Box className={classes.container}>
              <Box className={classes.child}>
                <Servers anvil={data.anvils} />
                <Anvils list={data} />
                <Hosts anvil={data.anvils} />
              </Box>
              <Box className={classes.child}>
                <Network />
                <SharedStorage />
                <CPU />
                <Memory />
              </Box>
            </Box>
          ))}
      </AnvilProvider>
    </StyledDiv>
  );
 };
 export default Anvil;
--- a/striker-ui/pages/index.tsx
+++ b/striker-ui/pages/index.tsx
@ -1,110 +1,131 @@
 import Head from 'next/head';
-import { Box } from '@mui/material';
+import { FC, useState } from 'react';
-import { styled } from '@mui/material/styles';
+import { Box, Divider } from '@mui/material';
 import Anvils from '../components/Anvils';
 import Hosts from '../components/Hosts';
 import CPU from '../components/CPU';
 import SharedStorage from '../components/SharedStorage';
 import Memory from '../components/Memory';
 import Network from '../components/Network';
 import periodicFetch from '../lib/fetchers/periodicFetch';
 import Servers from '../components/Servers';
 import Header from '../components/Header';
 import AnvilProvider from '../components/AnvilContext';
 import { LARGE_MOBILE_BREAKPOINT } from '../lib/consts/DEFAULT_THEME';
 import useWindowDimensions from '../hooks/useWindowDimenions';
-const PREFIX = 'Dashboard';
+import API_BASE_URL from '../lib/consts/API_BASE_URL';
 import { DIVIDER } from '../lib/consts/DEFAULT_THEME';
-const classes = {
+import { Preview } from '../components/Display';
-  child: `${PREFIX}-child`,
+import Header from '../components/Header';
-  server: `${PREFIX}-server`,
+import OutlinedInput from '../components/OutlinedInput';
-  container: `${PREFIX}-container`,
+import { Panel, PanelHeader } from '../components/Panels';
-};
+import periodicFetch from '../lib/fetchers/periodicFetch';
-
+import Spinner from '../components/Spinner';
 const StyledDiv = styled('div')(({ theme }) => ({
  [`& .${classes.child}`]: {
    width: '22%',
    height: '100%',
    [theme.breakpoints.down(LARGE_MOBILE_BREAKPOINT)]: {
      width: '50%',
    },
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
  [`& .${classes.server}`]: {
    width: '35%',
    height: '100%',
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
-  [`& .${classes.container}`]: {
+const createServerPreviewContainer = (servers: ServerOverviewMetadata[]) => (
  <Box
    sx={{
      display: 'flex',
      flexDirection: 'row',
-    width: '100%',
+      flexWrap: 'wrap',
-    justifyContent: 'space-between',
+
-    [theme.breakpoints.down('md')]: {
+      '& > *': {
-      display: 'block',
+        width: { xs: '20em', md: '30em' },
      },
    }}
  >
    {servers.map(({ serverName, serverUUID }) => (
      <Preview
        key={`server-preview-${serverUUID}`}
        isShowControls={false}
        isUseInnerPanel
        serverName={serverName}
        uuid={serverUUID}
      />
    ))}
  </Box>
 );
 const filterServers = (
  allServers: ServerOverviewMetadata[],
  searchTerm: string,
 ) =>
  searchTerm === ''
    ? {
        exclude: allServers,
        include: [],
      }
    : allServers.reduce<{
        exclude: ServerOverviewMetadata[];
        include: ServerOverviewMetadata[];
      }>(
        (reduceContainer, server) => {
          const { serverName } = server;
          if (serverName.includes(searchTerm)) {
            reduceContainer.include.push(server);
          } else {
            reduceContainer.exclude.push(server);
          }
          return reduceContainer;
        },
-}));
+        { exclude: [], include: [] },
      );
 const Dashboard: FC = () => {
  const [allServers, setAllServers] = useState<ServerOverviewMetadata[]>([]);
  const [excludeServers, setExcludeServers] = useState<
    ServerOverviewMetadata[]
  >([]);
  const [includeServers, setIncludeServers] = useState<
    ServerOverviewMetadata[]
  >([]);
-const Dashboard = (): JSX.Element => {
+  const [inputSearchTerm, setInputSearchTerm] = useState<string>('');
  const width = useWindowDimensions();
-  const { data } = periodicFetch<AnvilList>(
+  const updateServerList = (
-    `${process.env.NEXT_PUBLIC_API_URL}/get_anvils`,
+    ...filterArgs: Parameters<typeof filterServers>
  ) => {
    const { exclude, include } = filterServers(...filterArgs);
    setExcludeServers(exclude);
    setIncludeServers(include);
  };
  const { isLoading } = periodicFetch<ServerOverviewMetadata[]>(
    `${API_BASE_URL}/server`,
    {
      onSuccess: (data = []) => {
        setAllServers(data);
        updateServerList(data, inputSearchTerm);
      },
      refreshInterval: 60000,
    },
  );
  return (
-    <StyledDiv>
+    <Box>
      <Head>
        <title>Dashboard</title>
      </Head>
      <AnvilProvider>
      <Header />
-        {data?.anvils &&
+      <Panel>
-          width &&
+        {isLoading ? (
-          (width > LARGE_MOBILE_BREAKPOINT ? (
+          <Spinner />
            <Box className={classes.container}>
              <Box className={classes.child}>
                <Anvils list={data} />
                <Hosts anvil={data.anvils} />
              </Box>
              <Box className={classes.server}>
                <Servers anvil={data.anvils} />
              </Box>
              <Box className={classes.child}>
                <SharedStorage />
              </Box>
              <Box className={classes.child}>
                <Network />
                <CPU />
                <Memory />
              </Box>
            </Box>
        ) : (
-            <Box className={classes.container}>
+          <>
-              <Box className={classes.child}>
+            <PanelHeader>
-                <Servers anvil={data.anvils} />
+              <OutlinedInput
-                <Anvils list={data} />
+                placeholder="Search by server name"
-                <Hosts anvil={data.anvils} />
+                onChange={({ target: { value } }) => {
-              </Box>
+                  setInputSearchTerm(value);
-              <Box className={classes.child}>
+
-                <Network />
+                  updateServerList(allServers, value);
-                <SharedStorage />
+                }}
-                <CPU />
+                value={inputSearchTerm}
-                <Memory />
+              />
-              </Box>
+            </PanelHeader>
            {createServerPreviewContainer(includeServers)}
            {includeServers.length > 0 && (
              <Divider sx={{ backgroundColor: DIVIDER }} />
            )}
            {createServerPreviewContainer(excludeServers)}
          </>
        )}
      </Panel>
    </Box>
          ))}
      </AnvilProvider>
    </StyledDiv>
  );
 };
--- a/striker-ui/types/APIServer.d.ts
+++ b/striker-ui/types/APIServer.d.ts
@ -0,0 +1,6 @@
 type ServerOverviewMetadata = {
  serverHostUUID: string;
  serverName: string;
  serverState: string;
  serverUUID: string;
 };