style: add server label and name to the preview and full size components

striker-ui/components/Display/FullSize.tsx

@@ -10,6 +10,7 @@ import { Panel } from '../Panels';
 import { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 import keyCombinations from './keyCombinations';
 import putJSON from '../../lib/fetchers/putJSON';
+import { HeaderText } from '../Text';
 
 const useStyles = makeStyles(() => ({
   displayBox: {
@@ -50,6 +51,7 @@ const useStyles = makeStyles(() => ({
 interface PreviewProps {
   setMode: Dispatch<SetStateAction<boolean>>;
   uuid: string;
+  serverName: string | string[] | undefined;
 }
 
 interface VncConnectionProps {
@@ -69,7 +71,7 @@ const extractDomain = (url: string | undefined): string | undefined => {
   return domain;
 };
 
-const FullSize = ({ setMode, uuid }: PreviewProps): JSX.Element => {
+const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const rfb = useRef<typeof RFB>(undefined);
   const [vncConnection, setVncConnection] = useState<
@@ -128,6 +130,10 @@ const FullSize = ({ setMode, uuid }: PreviewProps): JSX.Element => {
 
   return (
     <Panel>
+      <Box flexGrow={1}>
+        <HeaderText text={`Server: ${serverName}`} />
+      </Box>
+
       <Box display="flex" className={classes.displayBox}>
         {vncConnection && extractedDomain && (
           <Box>

striker-ui/components/Display/Preview.tsx

@@ -6,14 +6,17 @@ import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows';
 import CropOriginal from '@material-ui/icons/Image';
 import { Panel } from '../Panels';
 import { BLACK, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
+import { HeaderText } from '../Text';
 
 interface PreviewProps {
   setMode: Dispatch<SetStateAction<boolean>>;
+  serverName: string | string[] | undefined;
 }
 
 const useStyles = makeStyles(() => ({
   displayBox: {
     padding: 0,
+    paddingTop: '.7em',
     width: '100%',
   },
   fullScreenButton: {
@@ -39,11 +42,14 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const Preview = ({ setMode }: PreviewProps): JSX.Element => {
+const Preview = ({ setMode, serverName }: PreviewProps): JSX.Element => {
   const classes = useStyles();
 
   return (
     <Panel>
+      <Box flexGrow={1}>
+        <HeaderText text={`Server: ${serverName}`} />
+      </Box>
       <Box display="flex" className={classes.displayBox}>
         <Box>
           <IconButton

striker-ui/components/Servers.tsx

@@ -257,7 +257,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                       className={classes.button}
                       key={server.server_uuid}
                       component="a"
-                      href={`/server?uuid=${server.server_uuid}`}
+                      href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`}
                     >
                       <Box display="flex" flexDirection="row" width="100%">
                         {showCheckbox && (

striker-ui/pages/server/index.tsx

@@ -7,8 +7,8 @@ import { FullSize, Preview } from '../../components/Display';
 import Header from '../../components/Header';
 
 const useStyles = makeStyles((theme) => ({
-  child: {
+  preview: {
-    width: '18%',
+    width: '20%',
     height: '100%',
     [theme.breakpoints.down('lg')]: {
       width: '25%',
@@ -17,15 +17,6 @@ const useStyles = makeStyles((theme) => ({
       width: '100%',
     },
   },
-  server: {
-    width: '35%',
-    [theme.breakpoints.down('lg')]: {
-      width: '25%',
-    },
-    [theme.breakpoints.down('md')]: {
-      width: '100%',
-    },
-  },
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -42,7 +33,7 @@ const Server = (): JSX.Element => {
   const classes = useStyles();
 
   const router = useRouter();
-  const { uuid } = router.query;
+  const { uuid, server_name } = router.query;
 
   return (
     <>
@@ -50,13 +41,17 @@ const Server = (): JSX.Element => {
       {typeof uuid === 'string' &&
         (previewMode ? (
           <Box className={classes.container}>
-            <Box className={classes.child}>
+            <Box className={classes.preview}>
-              <Preview setMode={setPreviewMode} />
+              <Preview setMode={setPreviewMode} serverName={server_name} />
             </Box>
           </Box>
         ) : (
           <Box className={classes.container}>
-            <FullSize setMode={setPreviewMode} uuid={uuid} />
+            <FullSize
+              setMode={setPreviewMode}
+              uuid={uuid}
+              serverName={server_name}
+            />
           </Box>
         ))}
     </>