wake component update

src/features/machines/components/Machine.js

@@ -53,7 +53,6 @@ const Machine = ({ machine, actions, logs, addLog }) => {
                 <IconButton
                   id={`machine-item-${machine.machineId}-${action.code}`}
                   size={"small"}
-                  disabled={false}
                   onClick={action.effect(machine)}
                 >
                   <action.icon />

src/features/machines/components/MachineContainer.js

@@ -11,9 +11,12 @@ const MachineContainer = ({ machine }) => {
   const { success, error } = useToast();
   const { t } = useTranslation();
 
-  const addLog = text => {
-    setLogs(prev => [...prev, text]);
-  };
+  const addLog = useCallback(
+    text => {
+      setLogs(prev => [...prev, text]);
+    },
+    [setLogs]
+  );
 
   const pingMachine = useCallback(
     machine => async () => {
@@ -27,7 +30,7 @@ const MachineContainer = ({ machine }) => {
         error(result.status);
       }
     },
-    [error, success]
+    [error, success, addLog]
   );
 
   const actions = [

src/features/machines/components/WakeComponent.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import { IconButton, Tooltip } from "@material-ui/core";
 import { PowerSettingsNew } from "@material-ui/icons";
@@ -6,23 +6,49 @@ import { useTranslation } from "react-i18next";
 import { useToast } from "../../../hooks";
 import * as api from "../api";
 
+const initialState = { on: false };
+
 const WakeComponent = ({ machine, addLog }) => {
+  const [state, setState] = useState(initialState);
+  const [trigger, setTrigger] = useState(false);
   const { t } = useTranslation();
   const { success, error } = useToast();
 
-  const wakeMachine = machine => async () => {
+  const getCurrentDateTime = useCallback(() => {
+    const currentDateTime = Date.now();
+    const result = t("DATE_FORMAT", {
+      date: { value: currentDateTime, format: "DD-MM-YYYY HH:mm:ss" }
+    });
+    return result;
+  }, [t]);
+
+  const wakeMachine = useCallback(async () => {
     const result = await api.wakeMachine(machine.macAddress);
-    addLog(`Success: ${result.success}. Status: ${result.status}`);
+    addLog(
+      `[${getCurrentDateTime()}] [Wake]: Success: ${result.success}. Status: ${
+        result.status
+      }`
+    );
     if (result.success) {
       success(result.status);
     } else {
       error(result.status);
     }
-  };
+  }, [addLog, getCurrentDateTime, success, error, machine.macAddress]);
 
-  const handleClick = () => {
-    alert("AAA");
-  };
+  useEffect(() => {
+    api.pingMachine(machine.iPv4Address || machine.machineName).then(result => {
+      setState(prev => ({ ...prev, on: result.success }));
+      addLog(
+        `[${getCurrentDateTime()}] [Ping]: Success: ${
+          result.success
+        }. Status: ${result.status}`
+      );
+    });
+    setTimeout(() => {
+      setTrigger(prev => !prev);
+    }, 60000);
+  }, [machine, addLog, getCurrentDateTime, trigger]);
 
   return (
     <Tooltip title={t("Machine.Actions.Wake")}>
@@ -31,7 +57,8 @@ const WakeComponent = ({ machine, addLog }) => {
           id={`machine-${machine.machineId}-wake`}
           size={"small"}
           disabled={false}
-          onClick={handleClick}
+          onClick={wakeMachine}
+          style={state.on ? { color: "#33cc33" } : {}}
         >
           <PowerSettingsNew />
         </IconButton>