Refactor WakeComponent: convert to TypeScript, update API routes, and enhance logging functionality

frontend/src/features/machines/components/common/WakeComponent.tsx

@@ -1,17 +1,23 @@
 import React, { useState, useEffect, useCallback } from "react";
-import PropTypes from "prop-types";
 import { IconButton, Tooltip } from "@mui/material";
 import { PowerSettingsNew } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { blip } from "../../../../utils";
 import { msToMinAndSec } from "../../../../utils/time";
 import { routes, post } from "../../../../utils/api";
+import { Machine } from "types";
 
 const initialState = { on: false };
 const defaultPingInterval = 1200000; //20 minutes
 const defaultStartingTime = 300000; //5 minutes
 
-const WakeComponent = ({ machine, addLog, disabled }) => {
+type Props = {
+  machine: Machine;
+  addLog: (message: string) => void;
+  disabled: boolean;
+};
+
+const WakeComponent: React.FC<Props> = ({ machine, addLog, disabled }) => {
   const [state, setState] = useState(initialState);
   const [trigger, setTrigger] = useState(false);
 
@@ -28,14 +34,17 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
     return result;
   }, [t]);
 
-  const log = useCallback(message => addLog(`[${getCurrentDateTime()}] ${message}`), [addLog, getCurrentDateTime]);
+  const log = useCallback(
+    (message: string) => addLog(`[${getCurrentDateTime()}] ${message}`),
+    [addLog, getCurrentDateTime]
+  );
 
   const wakeMachine = useCallback(async () => {
     await post(
       routes.wakeMachine,
       { machineId: machine.machineId },
       {
-        onCompleted: result => {
+        onCompleted: (result: any) => {
           setState(prev => ({ ...prev, on: result.success }));
           log(`[Wake]: Success: ${result.success}. Status: ${result.status}`);
           if (result.success) {
@@ -43,9 +52,9 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
 
             //retrigger
             log(`Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(startingTime)}]`);
-            setTimeout(() => {
-              setTrigger(prev => !prev);
-            }, startingTime);
+            // setTimeout(() => {
+            //   setTrigger(prev => !prev);
+            // }, startingTime);
           } else {
             blip.error(result.status);
           }
@@ -60,15 +69,15 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
       routes.pingMachine,
       { machineId: machine.machineId },
       {
-        onCompleted: result => {
+        onCompleted: (result: any) => {
           setState(prev => ({ ...prev, on: result.success }));
           log(`[Ping]: Success: ${result.success}. Status: ${result.status}`);
 
-          if (result.success) {
-            setTimeout(() => {
-              setTrigger(prev => !prev);
-            }, pingInterval);
-          }
+          // if (result.success) {
+          //   setTimeout(() => {
+          //     setTrigger(prev => !prev);
+          //   }, pingInterval);
+          // }
         },
         onError: () => {
           // to do: handle error
@@ -81,7 +90,7 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
     pingInLoop();
   }, [trigger, pingInLoop]);
 
-  const handleWakeClick = event => {
+  const handleWakeClick = (event: any) => {
     wakeMachine();
     event.stopPropagation();
   };
@@ -105,10 +114,4 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
   );
 };
 
-WakeComponent.propTypes = {
-  machine: PropTypes.object.isRequired,
-  addLog: PropTypes.func.isRequired,
-  disabled: PropTypes.bool
-};
-
 export default WakeComponent;

frontend/src/utils/api.js

@@ -15,7 +15,11 @@ const routes = {
   shutdownMachine: `${powerActionsRoute}/shutdown`,
   restartMachine: `${powerActionsRoute}/restart`,
   network: {
-    machines: `${networkRoute}/machines`
+    machines: `${networkRoute}/machines`,
+    machine: {
+      wake: `${powerActionsRoute}/wake`,
+      ping: `${powerActionsRoute}/ping`
+    }
   },
   system: {
     version: `${systemRoute}/version`,