feat(front-end): add a fetcher with timeout and controlls to reconnect to the server

striker-ui/components/Display/FullSize.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, Dispatch, SetStateAction } from 'react';
 import { RFB } from 'novnc-node';
-import { Box, Menu, MenuItem, Typography } from '@material-ui/core';
+import { Box, Menu, MenuItem, Typography, Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
 import KeyboardIcon from '@material-ui/icons/Keyboard';
@@ -9,7 +9,8 @@ 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';
+import putFetch from '../../lib/fetchers/putFetch';
+import putFetchWithTimeout from '../../lib/fetchers/putFetchWithTimeout';
 import { HeaderText } from '../Text';
 import Spinner from '../Spinner';
 
@@ -54,6 +55,9 @@ const useStyles = makeStyles(() => ({
       backgroundColor: TEXT,
     },
   },
+  buttonText: {
+    color: BLACK,
+  },
 }));
 
 interface PreviewProps {
@@ -74,6 +78,7 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
   const [vncConnection, setVncConnection] = useState<
     VncConnectionProps | undefined
   >(undefined);
+  const [isError, setIsError] = useState<boolean>(false);
   const [displaySize] = useState<{
     width: string;
     height: string;
@@ -87,23 +92,28 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
 
     if (!vncConnection)
       (async () => {
-        const res = await putJSON(
+        try {
+          const res = await putFetchWithTimeout(
             `${process.env.NEXT_PUBLIC_API_URL}/manage_vnc_pipes`,
             {
               server_uuid: uuid,
               is_open: true,
             },
+            120000,
           );
           setVncConnection(await res.json());
+        } catch {
+          setIsError(true);
+        }
       })();
-  }, [uuid, vncConnection]);
+  }, [uuid, vncConnection, isError]);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
     setAnchorEl(event.currentTarget);
   };
 
   const handleClickClose = async () => {
-    await putJSON(`${process.env.NEXT_PUBLIC_API_URL}/manage_vnc_pipes`, {
+    await putFetch(`${process.env.NEXT_PUBLIC_API_URL}/manage_vnc_pipes`, {
       server_uuid: uuid,
       is_open: false,
     });
@@ -135,6 +145,7 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
 
       <Box display="flex" className={classes.displayBox}>
         {vncConnection ? (
+          <>
             <Box>
               <VncDisplay
                 rfb={rfb}
@@ -142,12 +153,6 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
                 style={displaySize}
               />
             </Box>
-        ) : (
-          <Box display="flex" className={classes.spinnerBox}>
-            <HeaderText text={`Establishing connection with ${serverName}`} />
-            <Spinner />
-          </Box>
-        )}
             <Box>
               <Box className={classes.closeBox}>
                 <IconButton
@@ -166,7 +171,6 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
                 <IconButton
                   className={classes.keyboardButton}
                   style={{ color: BLACK }}
-              aria-label="upload picture"
                   component="span"
                   onClick={handleClick}
                 >
@@ -192,6 +196,40 @@ const FullSize = ({ setMode, uuid, serverName }: PreviewProps): JSX.Element => {
                 </Menu>
               </Box>
             </Box>
+          </>
+        ) : (
+          <Box display="flex" className={classes.spinnerBox}>
+            {!isError ? (
+              <>
+                <HeaderText
+                  text={`Establishing connection with ${serverName}`}
+                />
+                <HeaderText text="This may take a few minutes" />
+                <Spinner />
+              </>
+            ) : (
+              <>
+                <Box style={{ paddingBottom: '2em' }}>
+                  <HeaderText text="There was a problem connecting to the server, please try again" />
+                </Box>
+                <Button
+                  variant="contained"
+                  onClick={() => {
+                    setIsError(false);
+                  }}
+                  style={{ textTransform: 'none' }}
+                >
+                  <Typography
+                    className={classes.buttonText}
+                    variant="subtitle1"
+                  >
+                    Reconnect
+                  </Typography>
+                </Button>
+              </>
+            )}
+          </Box>
+        )}
       </Box>
     </Panel>
   );

striker-ui/lib/fetchers/putFetchWithTimeout.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const putFetchTimeout = async <T>(
+  uri: string,
+  data: T,
+  timeout: number,
+): Promise<any> => {
+  const controller = new AbortController();
+
+  const id = setTimeout(() => controller.abort(), timeout);
+
+  const res = await fetch(uri, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      'Keep-Alive': 'timeout=120',
+    },
+    signal: controller.signal,
+    body: JSON.stringify(data),
+  });
+  clearTimeout(id);
+
+  return res;
+};
+
+export default putFetchTimeout;