Merge pull request #188 from Tsu-ba-me/minor-fixes-20210827

Web UI: add minor fixes

striker-ui/.eslintrc.json

@@ -36,7 +36,7 @@
     "sourceType": "module"
   },
   "rules": {
-    "complexity": ["error", 5],
+    "complexity": ["error", 6],
     "import/extensions": [
       "error",
       "ignorePackages",

striker-ui/components/Display/FullSize.tsx

@@ -66,7 +66,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-interface PreviewProps {
+interface FullSizeProps {
   setMode: Dispatch<SetStateAction<boolean>>;
   uuid: string;
   serverName: string | string[] | undefined;
@@ -77,7 +77,11 @@ interface VncConnectionProps {
   forward_port: number;
 }
 
-const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
+const FullSize = ({
+  setMode,
+  uuid,
+  serverName,
+}: FullSizeProps): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const rfb = useRef<typeof RFB>();
   const hostname = useRef<string | undefined>(undefined);

striker-ui/components/Display/Preview.tsx

@@ -1,15 +1,16 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { Box } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import IconButton from '@material-ui/core/IconButton';
 import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows';
-import CropOriginal from '@material-ui/icons/Image';
+import PowerOffOutlinedIcon from '@material-ui/icons/PowerOffOutlined';
 import { Panel } from '../Panels';
 import { BLACK, GREY, TEXT } from '../../lib/consts/DEFAULT_THEME';
 import { HeaderText } from '../Text';
 
 interface PreviewProps {
   setMode: Dispatch<SetStateAction<boolean>>;
+  uuid: string;
   serverName: string | string[] | undefined;
 }
 
@@ -34,16 +35,42 @@ const useStyles = makeStyles(() => ({
     padding: 0,
     color: TEXT,
   },
-  imageIcon: {
+  powerOffIcon: {
     borderRadius: 8,
     padding: 0,
-    backgroundColor: GREY,
-    fontSize: '8em',
+    color: GREY,
+    width: '100%',
+    height: '100%',
+  },
+  previewImage: {
+    width: '100%',
+    height: '100%',
   },
 }));
 
-const Preview = ({ setMode, serverName }: PreviewProps): JSX.Element => {
+const Preview = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
   const classes = useStyles();
+  const [preview, setPreview] = useState<string>();
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(
+          `${process.env.NEXT_PUBLIC_API_URL}/get_server_screenshot?server_uuid=${uuid}`,
+          {
+            method: 'GET',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          },
+        );
+        const { screenshot } = await res.json();
+        setPreview(screenshot);
+      } catch {
+        setPreview('');
+      }
+    })();
+  }, [uuid]);
 
   return (
     <Panel>
@@ -58,7 +85,16 @@ const Preview = ({ setMode, serverName }: PreviewProps): JSX.Element => {
             component="span"
             onClick={() => setMode(false)}
           >
-            <CropOriginal className={classes.imageIcon} />
+            {!preview ? (
+              <PowerOffOutlinedIcon className={classes.powerOffIcon} />
+            ) : (
+              <img
+                alt=""
+                key="preview"
+                src={`data:image/png;base64,${preview}`}
+                className={classes.previewImage}
+              />
+            )}
           </IconButton>
         </Box>
         <Box className={classes.fullScreenBox}>

striker-ui/components/Servers.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext } from 'react';
+import { useState, useContext, useRef } from 'react';
 import {
   List,
   ListItem,
@@ -74,17 +74,17 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: '.8em',
   },
   menuItem: {
-    backgroundColor: TEXT,
+    backgroundColor: GREY,
     paddingRight: '3em',
     '&:hover': {
-      backgroundColor: TEXT,
+      backgroundColor: GREY,
     },
   },
   editButton: {
     borderRadius: 8,
     backgroundColor: GREY,
     '&:hover': {
-      backgroundColor: TEXT,
+      backgroundColor: GREY,
     },
   },
   editButtonBox: {
@@ -124,13 +124,12 @@ const selectDecorator = (state: string): Colours => {
 
 type ButtonLabels = 'on' | 'off';
 
-const buttonLabels: ButtonLabels[] = ['on', 'off'];
-
 const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [showCheckbox, setShowCheckbox] = useState<boolean>(false);
   const [allSelected, setAllSelected] = useState<boolean>(false);
   const [selected, setSelected] = useState<string[]>([]);
+  const buttonLabels = useRef<ButtonLabels[]>([]);
   const { uuid } = useContext(AnvilContext);
   const classes = useStyles();
 
@@ -138,6 +137,23 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
     `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`,
   );
 
+  const setButtons = (filtered: AnvilServer[]) => {
+    buttonLabels.current = [];
+    if (
+      filtered.filter((item: AnvilServer) => item.server_state === 'running')
+        .length
+    ) {
+      buttonLabels.current.push('off');
+    }
+
+    if (
+      filtered.filter((item: AnvilServer) => item.server_state === 'shut off')
+        .length
+    ) {
+      buttonLabels.current.push('on');
+    }
+  };
+
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
     setAnchorEl(event.currentTarget);
   };
@@ -158,6 +174,10 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
     if (index === -1) selected.push(server_uuid);
     else selected.splice(index, 1);
 
+    const filtered = data.servers.filter(
+      (server: AnvilServer) => selected.indexOf(server.server_uuid) !== -1,
+    );
+    setButtons(filtered);
     setSelected([...selected]);
   };
 
@@ -201,7 +221,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                 open={Boolean(anchorEl)}
                 onClose={() => setAnchorEl(null)}
               >
-                {buttonLabels.map((label: ButtonLabels) => {
+                {buttonLabels.current.map((label: ButtonLabels) => {
                   return (
                     <MenuItem
                       onClick={() => handlePower(label)}
@@ -227,13 +247,17 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                 color="secondary"
                 checked={allSelected}
                 onChange={() => {
-                  if (!allSelected)
+                  if (!allSelected) {
+                    setButtons(data.servers);
                     setSelected(
                       data.servers.map(
                         (server: AnvilServer) => server.server_uuid,
                       ),
                     );
-                  else setSelected([]);
+                  } else {
+                    setButtons([]);
+                    setSelected([]);
+                  }
 
                   setAllSelected(!allSelected);
                 }}
@@ -248,16 +272,16 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
       {!isLoading ? (
         <Box className={classes.root}>
           <List component="nav">
-            {data &&
-              data.servers.map((server: AnvilServer) => {
+            {data?.servers.map((server: AnvilServer) => {
               return (
                 <>
                   <ListItem
                     button
                     className={classes.button}
                     key={server.server_uuid}
-                      component="a"
+                    component={showCheckbox ? 'div' : 'a'}
                     href={`/server?uuid=${server.server_uuid}&server_name=${server.server_name}`}
+                    onClick={() => handleChange(server.server_uuid)}
                   >
                     <Box display="flex" flexDirection="row" width="100%">
                       {showCheckbox && (
@@ -266,11 +290,9 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                             style={{ color: TEXT }}
                             color="secondary"
                             checked={
-                                selected.find(
-                                  (s) => s === server.server_uuid,
-                                ) !== undefined
+                              selected.find((s) => s === server.server_uuid) !==
+                              undefined
                             }
-                              onChange={() => handleChange(server.server_uuid)}
                           />
                         </Box>
                       )}
@@ -305,8 +327,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
                                   <BodyText
                                     text={host.host_name}
                                     selected={
-                                        server.server_host_uuid ===
-                                        host.host_uuid
+                                      server.server_host_uuid === host.host_uuid
                                     }
                                   />
                                 </Box>

striker-ui/out/_next/static/Eh-RgpskHOnoW5C2jVLyg/_buildManifest.js

@@ -0,0 +1 @@
+self.__BUILD_MANIFEST=function(e){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[e,"static/chunks/346-7248b9c59d3df20dd85d.js","static/chunks/pages/index-bb493c5b52078039ce80.js"],"/_error":["static/chunks/pages/_error-737a04e9a0da63c9d162.js"],"/server":[e,"static/chunks/pages/server-e1f1621204ec662e510c.js"],sortedPages:["/","/_app","/_error","/server"]}}("static/chunks/322-e03452a20da601e702f9.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

striker-ui/out/_next/static/chunks/97.4025a661f871d4b5b823.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[97],{7097:function(e,r,n){n.r(r);var t=n(5893),c=n(7294),u=n(8753),o=function(e){var r=(0,c.useRef)(null),n=e.rfb,o=e.url,i=e.viewOnly,s=e.focusOnClick,l=e.clipViewport,f=e.dragViewport,v=e.scaleViewport,a=e.resizeSession,d=e.showDotCursor,w=e.background,p=e.qualityLevel,m=e.compressionLevel;(0,c.useEffect)((function(){return r.current?(n.current||(r.current.innerHTML="",n.current=new u.Z(r.current,o),n.current.viewOnly=i,n.current.focusOnClick=s,n.current.clipViewport=l,n.current.dragViewport=f,n.current.resizeSession=a,n.current.scaleViewport=v,n.current.showDotCursor=d,n.current.background=w,n.current.qualityLevel=p,n.current.compressionLevel=m),n.current?function(){n.current&&(n.current.disconnect(),n.current=void 0)}:void 0):function(){n.current&&(null===n||void 0===n||n.current.disconnect(),n.current=void 0)}}),[n]);return(0,t.jsx)("div",{style:{width:"100%",height:"75vh"},ref:r,onMouseEnter:function(){document.activeElement&&document.activeElement instanceof HTMLElement&&document.activeElement.blur(),null!==n&&void 0!==n&&n.current&&n.current.focus()}})};r.default=(0,c.memo)(o)}}]);
+"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[97],{7097:function(e,r,n){n.r(r);var t=n(7294),c=n(8753),u=n(5893),o=function(e){var r=(0,t.useRef)(null),n=e.rfb,o=e.url,i=e.viewOnly,s=e.focusOnClick,l=e.clipViewport,f=e.dragViewport,v=e.scaleViewport,a=e.resizeSession,d=e.showDotCursor,w=e.background,p=e.qualityLevel,m=e.compressionLevel;(0,t.useEffect)((function(){return r.current?(n.current||(r.current.innerHTML="",n.current=new c.Z(r.current,o),n.current.viewOnly=i,n.current.focusOnClick=s,n.current.clipViewport=l,n.current.dragViewport=f,n.current.resizeSession=a,n.current.scaleViewport=v,n.current.showDotCursor=d,n.current.background=w,n.current.qualityLevel=p,n.current.compressionLevel=m),n.current?function(){n.current&&(n.current.disconnect(),n.current=void 0)}:void 0):function(){n.current&&(null===n||void 0===n||n.current.disconnect(),n.current=void 0)}}),[n]);return(0,u.jsx)("div",{style:{width:"100%",height:"75vh"},ref:r,onMouseEnter:function(){document.activeElement&&document.activeElement instanceof HTMLElement&&document.activeElement.blur(),null!==n&&void 0!==n&&n.current&&n.current.focus()}})};r.default=(0,t.memo)(o)}}]);

striker-ui/out/_next/static/chunks/webpack-0ccec27098eac6b2cd28.js

@@ -0,0 +1 @@
+!function(){"use strict";var e={},n={};function t(r){var o=n[r];if(void 0!==o)return o.exports;var i=n[r]={exports:{}},u=!0;try{e[r](i,i.exports,t),u=!1}finally{u&&delete n[r]}return i.exports}t.m=e,function(){var e=[];t.O=function(n,r,o,i){if(!r){var u=1/0;for(l=0;l<e.length;l++){r=e[l][0],o=e[l][1],i=e[l][2];for(var a=!0,c=0;c<r.length;c++)(!1&i||u>=i)&&Object.keys(t.O).every((function(e){return t.O[e](r[c])}))?r.splice(c--,1):(a=!1,i<u&&(u=i));if(a){e.splice(l--,1);var f=o();void 0!==f&&(n=f)}}return n}i=i||0;for(var l=e.length;l>0&&e[l-1][2]>i;l--)e[l]=e[l-1];e[l]=[r,o,i]}}(),t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,{a:n}),n},t.d=function(e,n){for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},t.f={},t.e=function(e){return Promise.all(Object.keys(t.f).reduce((function(n,r){return t.f[r](e,n),n}),[]))},t.u=function(e){return"static/chunks/"+e+"."+{97:"4025a661f871d4b5b823",204:"04ef0f70c11fb4c25e5c"}[e]+".js"},t.miniCssF=function(e){return"static/css/9031dcffbc38ebde92c3.css"},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},function(){var e={},n="_N_E:";t.l=function(r,o,i,u){if(e[r])e[r].push(o);else{var a,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),l=0;l<f.length;l++){var s=f[l];if(s.getAttribute("src")==r||s.getAttribute("data-webpack")==n+i){a=s;break}}a||(c=!0,(a=document.createElement("script")).charset="utf-8",a.timeout=120,t.nc&&a.setAttribute("nonce",t.nc),a.setAttribute("data-webpack",n+i),a.src=r),e[r]=[o];var d=function(n,t){a.onerror=a.onload=null,clearTimeout(p);var o=e[r];if(delete e[r],a.parentNode&&a.parentNode.removeChild(a),o&&o.forEach((function(e){return e(t)})),n)return n(t)},p=setTimeout(d.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=d.bind(null,a.onerror),a.onload=d.bind(null,a.onload),c&&document.head.appendChild(a)}}}(),t.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.p="/_next/",function(){var e={272:0};t.f.j=function(n,r){var o=t.o(e,n)?e[n]:void 0;if(0!==o)if(o)r.push(o[2]);else if(272!=n){var i=new Promise((function(t,r){o=e[n]=[t,r]}));r.push(o[2]=i);var u=t.p+t.u(n),a=new Error;t.l(u,(function(r){if(t.o(e,n)&&(0!==(o=e[n])&&(e[n]=void 0),o)){var i=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;a.message="Loading chunk "+n+" failed.\n("+i+": "+u+")",a.name="ChunkLoadError",a.type=i,a.request=u,o[1](a)}}),"chunk-"+n,n)}else e[n]=0},t.O.j=function(n){return 0===e[n]};var n=function(n,r){var o,i,u=r[0],a=r[1],c=r[2],f=0;if(u.some((function(n){return 0!==e[n]}))){for(o in a)t.o(a,o)&&(t.m[o]=a[o]);if(c)var l=c(t)}for(n&&n(r);f<u.length;f++)i=u[f],t.o(e,i)&&e[i]&&e[i][0](),e[u[f]]=0;return t.O(l)},r=self.webpackChunk_N_E=self.webpackChunk_N_E||[];r.forEach(n.bind(null,0)),r.push=n.bind(null,r.push.bind(r))}()}();

striker-ui/out/_next/static/chunks/webpack-51aba57c575530657c21.js

@@ -1 +0,0 @@
-!function(){"use strict";var e={},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}},u=!0;try{e[r](i,i.exports,n),u=!1}finally{u&&delete t[r]}return i.exports}n.m=e,function(){var e=[];n.O=function(t,r,o,i){if(!r){var u=1/0;for(l=0;l<e.length;l++){r=e[l][0],o=e[l][1],i=e[l][2];for(var a=!0,c=0;c<r.length;c++)(!1&i||u>=i)&&Object.keys(n.O).every((function(e){return n.O[e](r[c])}))?r.splice(c--,1):(a=!1,i<u&&(u=i));if(a){e.splice(l--,1);var f=o();void 0!==f&&(t=f)}}return t}i=i||0;for(var l=e.length;l>0&&e[l-1][2]>i;l--)e[l]=e[l-1];e[l]=[r,o,i]}}(),n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=function(e){return Promise.all(Object.keys(n.f).reduce((function(t,r){return n.f[r](e,t),t}),[]))},n.u=function(e){return"static/chunks/"+e+"."+{97:"460c758160110aabc924",204:"04ef0f70c11fb4c25e5c"}[e]+".js"},n.miniCssF=function(e){return"static/css/9031dcffbc38ebde92c3.css"},n.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"===typeof window)return window}}(),n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},function(){var e={},t="_N_E:";n.l=function(r,o,i,u){if(e[r])e[r].push(o);else{var a,c;if(void 0!==i)for(var f=document.getElementsByTagName("script"),l=0;l<f.length;l++){var s=f[l];if(s.getAttribute("src")==r||s.getAttribute("data-webpack")==t+i){a=s;break}}a||(c=!0,(a=document.createElement("script")).charset="utf-8",a.timeout=120,n.nc&&a.setAttribute("nonce",n.nc),a.setAttribute("data-webpack",t+i),a.src=r),e[r]=[o];var d=function(t,n){a.onerror=a.onload=null,clearTimeout(p);var o=e[r];if(delete e[r],a.parentNode&&a.parentNode.removeChild(a),o&&o.forEach((function(e){return e(n)})),t)return t(n)},p=setTimeout(d.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=d.bind(null,a.onerror),a.onload=d.bind(null,a.onload),c&&document.head.appendChild(a)}}}(),n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.p="/_next/",function(){var e={272:0};n.f.j=function(t,r){var o=n.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else if(272!=t){var i=new Promise((function(n,r){o=e[t]=[n,r]}));r.push(o[2]=i);var u=n.p+n.u(t),a=new Error;n.l(u,(function(r){if(n.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var i=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;a.message="Loading chunk "+t+" failed.\n("+i+": "+u+")",a.name="ChunkLoadError",a.type=i,a.request=u,o[1](a)}}),"chunk-"+t,t)}else e[t]=0},n.O.j=function(t){return 0===e[t]};var t=function(t,r){var o,i,u=r[0],a=r[1],c=r[2],f=0;for(o in a)n.o(a,o)&&(n.m[o]=a[o]);if(c)var l=c(n);for(t&&t(r);f<u.length;f++)i=u[f],n.o(e,i)&&e[i]&&e[i][0](),e[u[f]]=0;return n.O(l)},r=self.webpackChunk_N_E=self.webpackChunk_N_E||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))}()}();

striker-ui/out/_next/static/d6_dFUX65bR_cDhE06njm/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(e){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[e,"static/chunks/370-c90860a88f08a3eff194.js","static/chunks/pages/index-a28b18d8b6126f2f25a7.js"],"/_error":["static/chunks/pages/_error-737a04e9a0da63c9d162.js"],"/server":[e,"static/chunks/pages/server-a136ee5fbd72e53ed05c.js"],sortedPages:["/","/_app","/_error","/server"]}}("static/chunks/322-62b7580738bef4310e6b.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

striker-ui/out/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Dashboard</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/9031dcffbc38ebde92c3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/9031dcffbc38ebde92c3.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-a54b4f32bdc1ef890ddd.js"></script><script src="/_next/static/chunks/webpack-51aba57c575530657c21.js" defer=""></script><script src="/_next/static/chunks/framework-c93ed74a065331c4bd75.js" defer=""></script><script src="/_next/static/chunks/main-7965b115b2b3050da998.js" defer=""></script><script src="/_next/static/chunks/pages/_app-0d133e803ff3dba56ca1.js" defer=""></script><script src="/_next/static/chunks/322-62b7580738bef4310e6b.js" defer=""></script><script src="/_next/static/chunks/370-c90860a88f08a3eff194.js" defer=""></script><script src="/_next/static/chunks/pages/index-a28b18d8b6126f2f25a7.js" defer=""></script><script src="/_next/static/d6_dFUX65bR_cDhE06njm/_buildManifest.js" defer=""></script><script src="/_next/static/d6_dFUX65bR_cDhE06njm/_ssgManifest.js" defer=""></script><style id="jss-server-side">.MuiButtonBase-root {
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Dashboard</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/9031dcffbc38ebde92c3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/9031dcffbc38ebde92c3.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script><script src="/_next/static/chunks/webpack-0ccec27098eac6b2cd28.js" defer=""></script><script src="/_next/static/chunks/framework-c93ed74a065331c4bd75.js" defer=""></script><script src="/_next/static/chunks/main-62b8caa3ccc47893b147.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b3ca00281e90c029c955.js" defer=""></script><script src="/_next/static/chunks/322-e03452a20da601e702f9.js" defer=""></script><script src="/_next/static/chunks/346-7248b9c59d3df20dd85d.js" defer=""></script><script src="/_next/static/chunks/pages/index-bb493c5b52078039ce80.js" defer=""></script><script src="/_next/static/Eh-RgpskHOnoW5C2jVLyg/_buildManifest.js" defer=""></script><script src="/_next/static/Eh-RgpskHOnoW5C2jVLyg/_ssgManifest.js" defer=""></script><style id="jss-server-side">.MuiButtonBase-root {
   color: inherit;
   border: 0;
   cursor: pointer;
@@ -532,4 +532,4 @@
   .jss3 {
     display: block;
   }
-}</style></head><body><div id="__next"><header class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary jss4 MuiPaper-elevation4"><div class="MuiBox-root jss10"><div class="MuiBox-root jss11 jss6"><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><img alt="" src="/pngs/logo.png" width="160" height="40"/></span></button></div><div class="MuiBox-root jss12 jss6 jss7"><a href="/cgi-bin/striker?files=true"><img alt="" src="/pngs/files_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?jobs=true"><img alt="" src="/pngs/tasks_no-jobs_icon.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?configure=true"><img alt="" src="/pngs/configure_icon_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?striker=true"><img alt="" src="/pngs/striker_icon_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?anvil=true"><img alt="" src="/pngs/anvil_icon_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?email=true"><img alt="" src="/pngs/email_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?logout=true"><img alt="" src="/pngs/users_icon_on.png" width="40em" height="40em" class="jss9"/></a><a href="https://alteeve.com/w/Support"><img alt="" src="/pngs/help_icon_on.png" width="40em" height="40em" class="jss9"/></a></div></div></header></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"d6_dFUX65bR_cDhE06njm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
+}</style></head><body><div id="__next"><header class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary jss4 MuiPaper-elevation4"><div class="MuiBox-root jss10"><div class="MuiBox-root jss11 jss6"><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><img alt="" src="/pngs/logo.png" width="160" height="40"/></span></button></div><div class="MuiBox-root jss12 jss6 jss7"><a href="/cgi-bin/striker?files=true"><img alt="" src="/pngs/files_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?jobs=true"><img alt="" src="/pngs/tasks_no-jobs_icon.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?configure=true"><img alt="" src="/pngs/configure_icon_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?striker=true"><img alt="" src="/pngs/striker_icon_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?anvil=true"><img alt="" src="/pngs/anvil_icon_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?email=true"><img alt="" src="/pngs/email_on.png" width="40em" height="40em" class="jss9"/></a><a href="/cgi-bin/striker?logout=true"><img alt="" src="/pngs/users_icon_on.png" width="40em" height="40em" class="jss9"/></a><a href="https://alteeve.com/w/Support"><img alt="" src="/pngs/help_icon_on.png" width="40em" height="40em" class="jss9"/></a></div></div></header></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"Eh-RgpskHOnoW5C2jVLyg","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

striker-ui/out/server.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title></title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/9031dcffbc38ebde92c3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/9031dcffbc38ebde92c3.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-a54b4f32bdc1ef890ddd.js"></script><script src="/_next/static/chunks/webpack-51aba57c575530657c21.js" defer=""></script><script src="/_next/static/chunks/framework-c93ed74a065331c4bd75.js" defer=""></script><script src="/_next/static/chunks/main-7965b115b2b3050da998.js" defer=""></script><script src="/_next/static/chunks/pages/_app-0d133e803ff3dba56ca1.js" defer=""></script><script src="/_next/static/chunks/322-62b7580738bef4310e6b.js" defer=""></script><script src="/_next/static/chunks/pages/server-a136ee5fbd72e53ed05c.js" defer=""></script><script src="/_next/static/d6_dFUX65bR_cDhE06njm/_buildManifest.js" defer=""></script><script src="/_next/static/d6_dFUX65bR_cDhE06njm/_ssgManifest.js" defer=""></script><style id="jss-server-side">.MuiButtonBase-root {
+<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title></title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/9031dcffbc38ebde92c3.css" as="style"/><link rel="stylesheet" href="/_next/static/css/9031dcffbc38ebde92c3.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-a40ef1678bae11e696dba45124eadd70.js"></script><script src="/_next/static/chunks/webpack-0ccec27098eac6b2cd28.js" defer=""></script><script src="/_next/static/chunks/framework-c93ed74a065331c4bd75.js" defer=""></script><script src="/_next/static/chunks/main-62b8caa3ccc47893b147.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b3ca00281e90c029c955.js" defer=""></script><script src="/_next/static/chunks/322-e03452a20da601e702f9.js" defer=""></script><script src="/_next/static/chunks/pages/server-e1f1621204ec662e510c.js" defer=""></script><script src="/_next/static/Eh-RgpskHOnoW5C2jVLyg/_buildManifest.js" defer=""></script><script src="/_next/static/Eh-RgpskHOnoW5C2jVLyg/_ssgManifest.js" defer=""></script><style id="jss-server-side">.MuiButtonBase-root {
   color: inherit;
   border: 0;
   cursor: pointer;
@@ -513,4 +513,4 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-  }</style></head><body><div id="__next"><header class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary jss3 MuiPaper-elevation4"><div class="MuiBox-root jss9"><div class="MuiBox-root jss10 jss5"><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><img alt="" src="/pngs/logo.png" width="160" height="40"/></span></button></div><div class="MuiBox-root jss11 jss5 jss6"><a href="/cgi-bin/striker?files=true"><img alt="" src="/pngs/files_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?jobs=true"><img alt="" src="/pngs/tasks_no-jobs_icon.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?configure=true"><img alt="" src="/pngs/configure_icon_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?striker=true"><img alt="" src="/pngs/striker_icon_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?anvil=true"><img alt="" src="/pngs/anvil_icon_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?email=true"><img alt="" src="/pngs/email_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?logout=true"><img alt="" src="/pngs/users_icon_on.png" width="40em" height="40em" class="jss8"/></a><a href="https://alteeve.com/w/Support"><img alt="" src="/pngs/help_icon_on.png" width="40em" height="40em" class="jss8"/></a></div></div></header></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/server","query":{},"buildId":"d6_dFUX65bR_cDhE06njm","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
+  }</style></head><body><div id="__next"><header class="MuiPaper-root MuiAppBar-root MuiAppBar-positionStatic MuiAppBar-colorPrimary jss3 MuiPaper-elevation4"><div class="MuiBox-root jss9"><div class="MuiBox-root jss10 jss5"><button class="MuiButtonBase-root MuiButton-root MuiButton-text" tabindex="0" type="button"><span class="MuiButton-label"><img alt="" src="/pngs/logo.png" width="160" height="40"/></span></button></div><div class="MuiBox-root jss11 jss5 jss6"><a href="/cgi-bin/striker?files=true"><img alt="" src="/pngs/files_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?jobs=true"><img alt="" src="/pngs/tasks_no-jobs_icon.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?configure=true"><img alt="" src="/pngs/configure_icon_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?striker=true"><img alt="" src="/pngs/striker_icon_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?anvil=true"><img alt="" src="/pngs/anvil_icon_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?email=true"><img alt="" src="/pngs/email_on.png" width="40em" height="40em" class="jss8"/></a><a href="/cgi-bin/striker?logout=true"><img alt="" src="/pngs/users_icon_on.png" width="40em" height="40em" class="jss8"/></a><a href="https://alteeve.com/w/Support"><img alt="" src="/pngs/help_icon_on.png" width="40em" height="40em" class="jss8"/></a></div></div></header></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/server","query":{},"buildId":"Eh-RgpskHOnoW5C2jVLyg","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>

striker-ui/pages/_document.tsx

@@ -11,6 +11,7 @@ class MyDocument extends Document {
 
     ctx.renderPage = () =>
       originalRenderPage({
+        /* eslint-disable react/display-name */
         enhanceApp: (App) => (props) =>
           materialUiSheets.collect(
             <App

striker-ui/pages/server/index.tsx

@@ -39,7 +39,11 @@ const Server = (): JSX.Element => {
       {typeof uuid === 'string' &&
         (previewMode ? (
           <Box className={classes.preview}>
-            <Preview setMode={setPreviewMode} serverName={server_name} />
+            <Preview
+              setMode={setPreviewMode}
+              uuid={uuid}
+              serverName={server_name}
+            />
           </Box>
         ) : (
           <Box className={classes.fullView}>