fix(front-end): change server page name, adjust paths, and add fetching vnc connection info

striker-ui/components/Display/FullSize.tsx

@@ -60,10 +60,9 @@ interface VncConnectionProps {
 const FullSize = ({ setMode, uuid }: PreviewProps): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const rfb = useRef<typeof RFB>(undefined);
-  const vncConnection = useRef<VncConnectionProps>({
+  const [vncConnection, setVncConnection] = useState<
-    protocol: '',
+    VncConnectionProps | undefined
-    forward_port: 0,
+  >(undefined);
-  });
   const [displaySize, setDisplaySize] = useState<
     | {
         width: string | number;
@@ -79,18 +78,18 @@ const FullSize = ({ setMode, uuid }: PreviewProps): JSX.Element => {
       height: '80vh',
     });
 
-    (async () => {
+    if (!vncConnection)
-      const res = await putJSON(
+      (async () => {
-        'http://108.168.17.168/cgi-bin/manage_vnc_pipes',
+        const res = await putJSON(
-        {
+          `${process.env.NEXT_PUBLIC_API_URL}/manage_vnc_pipes`,
-          server_uuid: uuid,
+          {
-          is_open: true,
+            server_uuid: uuid,
-        },
+            is_open: true,
-      );
+          },
-      // console.log(res);
+        );
-      vncConnection.current = res.json();
+        setVncConnection(await res.json());
-    })();
+      })();
-  }, [uuid]);
+  }, [uuid, vncConnection]);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
     setAnchorEl(event.currentTarget);
@@ -117,13 +116,15 @@ const FullSize = ({ setMode, uuid }: PreviewProps): JSX.Element => {
   return (
     <Panel>
       <Box display="flex" className={classes.displayBox}>
-        <Box>
+        {vncConnection && (
-          <VncDisplay
+          <Box>
-            rfb={rfb}
+            <VncDisplay
-            url={`ws://108.168.17.168:${vncConnection.current.forward_port}`}
+              rfb={rfb}
-            style={displaySize}
+              url={`wss://spain.cdot.systems:${vncConnection.forward_port}`}
-          />
+              style={displaySize}
-        </Box>
+            />
+          </Box>
+        )}
         <Box>
           <Box className={classes.closeBox}>
             <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/${server.server_uuid}`}
+                      href={`/server?uuid=${server.server_uuid}`}
                     >
                       <Box display="flex" flexDirection="row" width="100%">
                         {showCheckbox && (