refactor(front-end): modify fetch and add fetching data for vnc connection

striker-ui/components/Anvils/SelectedAnvil.tsx

@@ -67,7 +67,7 @@ const SelectedAnvil = ({ list }: { list: AnvilListItem[] }): JSX.Element => {
             <Switch
               checked={isAnvilOn(list[index])}
               onChange={() =>
-                putJSON('/set_power', {
+                putJSON(`${process.env.NEXT_PUBLIC_API_URL}/set_power`, {
                   anvil_uuid: list[index].anvil_uuid,
                   is_on: !isAnvilOn(list[index]),
                 })

striker-ui/components/Display/FullSize.tsx

@@ -9,6 +9,7 @@ import VncDisplay from './VncDisplay';
 import { Panel } from '../Panels';
 import { BLACK, RED, TEXT } from '../../lib/consts/DEFAULT_THEME';
 import keyCombinations from './keyCombinations';
+import putJSON from '../../lib/fetchers/putJSON';
 
 const useStyles = makeStyles(() => ({
   displayBox: {
@@ -48,11 +49,21 @@ const useStyles = makeStyles(() => ({
 
 interface PreviewProps {
   setMode: Dispatch<SetStateAction<boolean>>;
+  uuid: string;
 }
 
-const FullSize = ({ setMode }: PreviewProps): JSX.Element => {
+interface VncConnectionProps {
+  protocol: string;
+  forward_port: number;
+}
+
+const FullSize = ({ setMode, uuid }: PreviewProps): JSX.Element => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const rfb = useRef<typeof RFB>(undefined);
+  const vncConnection = useRef<VncConnectionProps>({
+    protocol: '',
+    forward_port: 0,
+  });
   const [displaySize, setDisplaySize] = useState<
     | {
         width: string | number;
@@ -67,7 +78,19 @@ const FullSize = ({ setMode }: PreviewProps): JSX.Element => {
       width: '75vw',
       height: '80vh',
     });
-  }, []);
+
+    (async () => {
+      const res = await putJSON(
+        'http://108.168.17.168/cgi-bin/manage_vnc_pipes',
+        {
+          server_uuid: uuid,
+          is_open: true,
+        },
+      );
+      // console.log(res);
+      vncConnection.current = res.json();
+    })();
+  }, [uuid]);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
     setAnchorEl(event.currentTarget);
@@ -97,7 +120,7 @@ const FullSize = ({ setMode }: PreviewProps): JSX.Element => {
         <Box>
           <VncDisplay
             rfb={rfb}
-            url="wss://spain.cdot.systems:5000/"
+            url={`ws://108.168.17.168:${vncConnection.current.forward_port}`}
             style={displaySize}
           />
         </Box>

striker-ui/components/Hosts/AnvilHost.tsx

@@ -104,10 +104,13 @@ const AnvilHost = ({
                     <Switch
                       checked={host.state === 'online'}
                       onChange={() =>
-                        putJSON('/set_power', {
+                        putJSON(
+                          `${process.env.NEXT_PUBLIC_API_URL}/set_power`,
+                          {
                             host_uuid: host.host_uuid,
                             is_on: !(host.state === 'online'),
-                        })
+                          },
+                        )
                       }
                     />
                   </Box>
@@ -119,10 +122,13 @@ const AnvilHost = ({
                       checked={host.state === 'online'}
                       disabled={!(host.state === 'online')}
                       onChange={() =>
-                        putJSON('/set_membership', {
+                        putJSON(
+                          `${process.env.NEXT_PUBLIC_API_URL}/set_membership`,
+                          {
                             host_uuid: host.host_uuid,
                             is_member: !(host.state === 'online'),
-                        })
+                          },
+                        )
                       }
                     />
                   </Box>

striker-ui/components/Servers.tsx

@@ -145,7 +145,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => {
   const handlePower = (label: ButtonLabels) => {
     setAnchorEl(null);
     if (selected.length) {
-      putJSON('/set_power', {
+      putJSON(`${process.env.NEXT_PUBLIC_API_URL}/set_power`, {
         server_uuid_list: selected,
         is_on: label === 'on',
       });

striker-ui/lib/fetchers/putJSON.ts

@@ -1,5 +1,6 @@
-const putJSON = <T>(uri: string, data: T): void => {
+/* eslint-disable @typescript-eslint/no-explicit-any */
-  fetch(`${process.env.NEXT_PUBLIC_API_URL}${uri}`, {
+const putJSON = <T>(uri: string, data: T): Promise<any> => {
+  return fetch(uri, {
     method: 'PUT',
     headers: {
       'Content-Type': 'application/json',

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

@@ -74,7 +74,7 @@ const Server = (): JSX.Element => {
           </Box>
         ) : (
           <Box className={classes.container}>
-            <FullSize setMode={setPreviewMode} />
+            <FullSize setMode={setPreviewMode} uuid={uuid} />
           </Box>
         ))}
     </>