refactor: modify server page to allow different types of display depending on user input

striker-ui/pages/server/[uuid].tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useRouter } from 'next/router';
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
@@ -6,7 +7,7 @@ import PeriodicFetch from '../../lib/fetchers/periodicFetch';
 import CPU from '../../components/CPU';
 import Memory from '../../components/Memory';
 import Resource from '../../components/Resource';
-import Display from '../../components/Display';
+import { FullSize, Preview } from '../../components/Display';
 import Header from '../../components/Header';
 import Domain from '../../components/Domain';
 
@@ -42,6 +43,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 const Server = (): JSX.Element => {
+  const [previewMode] = useState<boolean>(true);
   const classes = useStyles();
 
   const router = useRouter();
@@ -54,21 +56,27 @@ const Server = (): JSX.Element => {
   return (
     <>
       <Header />
-      {typeof uuid === 'string' && data && (
+      {typeof uuid === 'string' &&
-        <Box className={classes.container}>
+        data &&
-          <Box className={classes.child}>
+        (previewMode ? (
-            <CPU />
+          <Box className={classes.container}>
-            <Memory />
+            <Box className={classes.child}>
+              <Preview />
+              <CPU />
+              <Memory />
+            </Box>
+            <Box flexGrow={1} className={classes.server}>
+              <Domain />
+            </Box>
+            <Box className={classes.child}>
+              <Resource resource={data} />
+            </Box>
           </Box>
-          <Box flexGrow={1} className={classes.server}>
+        ) : (
-            <Display />
+          <Box className={classes.container}>
-            <Domain />
+            <FullSize />
           </Box>
-          <Box className={classes.child}>
+        ))}
-            <Resource resource={data} />
-          </Box>
-        </Box>
-      )}
     </>
   );
 };