diff --git a/src/features/machines/components/Machine.js b/src/features/machines/components/Machine.js index 282db39..6e163e7 100644 --- a/src/features/machines/components/Machine.js +++ b/src/features/machines/components/Machine.js @@ -53,7 +53,6 @@ const Machine = ({ machine, actions, logs, addLog }) => { diff --git a/src/features/machines/components/MachineContainer.js b/src/features/machines/components/MachineContainer.js index b1a4dd7..4a71984 100644 --- a/src/features/machines/components/MachineContainer.js +++ b/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 = [ diff --git a/src/features/machines/components/WakeComponent.js b/src/features/machines/components/WakeComponent.js index 36726fe..4336f04 100644 --- a/src/features/machines/components/WakeComponent.js +++ b/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 ( @@ -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" } : {}} >