Refactor WakeComponent: convert to TypeScript, update API routes, and enhance logging functionality
parent
8148da132d
commit
253ee1953c
|
@ -1,17 +1,23 @@
|
||||||
import React, { useState, useEffect, useCallback } from "react";
|
import React, { useState, useEffect, useCallback } from "react";
|
||||||
import PropTypes from "prop-types";
|
|
||||||
import { IconButton, Tooltip } from "@mui/material";
|
import { IconButton, Tooltip } from "@mui/material";
|
||||||
import { PowerSettingsNew } from "@mui/icons-material";
|
import { PowerSettingsNew } from "@mui/icons-material";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { blip } from "../../../../utils";
|
import { blip } from "../../../../utils";
|
||||||
import { msToMinAndSec } from "../../../../utils/time";
|
import { msToMinAndSec } from "../../../../utils/time";
|
||||||
import { routes, post } from "../../../../utils/api";
|
import { routes, post } from "../../../../utils/api";
|
||||||
|
import { Machine } from "types";
|
||||||
|
|
||||||
const initialState = { on: false };
|
const initialState = { on: false };
|
||||||
const defaultPingInterval = 1200000; //20 minutes
|
const defaultPingInterval = 1200000; //20 minutes
|
||||||
const defaultStartingTime = 300000; //5 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 [state, setState] = useState(initialState);
|
||||||
const [trigger, setTrigger] = useState(false);
|
const [trigger, setTrigger] = useState(false);
|
||||||
|
|
||||||
|
@ -28,14 +34,17 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
|
||||||
return result;
|
return result;
|
||||||
}, [t]);
|
}, [t]);
|
||||||
|
|
||||||
const log = useCallback(message => addLog(`[${getCurrentDateTime()}] ${message}`), [addLog, getCurrentDateTime]);
|
const log = useCallback(
|
||||||
|
(message: string) => addLog(`[${getCurrentDateTime()}] ${message}`),
|
||||||
|
[addLog, getCurrentDateTime]
|
||||||
|
);
|
||||||
|
|
||||||
const wakeMachine = useCallback(async () => {
|
const wakeMachine = useCallback(async () => {
|
||||||
await post(
|
await post(
|
||||||
routes.wakeMachine,
|
routes.wakeMachine,
|
||||||
{ machineId: machine.machineId },
|
{ machineId: machine.machineId },
|
||||||
{
|
{
|
||||||
onCompleted: result => {
|
onCompleted: (result: any) => {
|
||||||
setState(prev => ({ ...prev, on: result.success }));
|
setState(prev => ({ ...prev, on: result.success }));
|
||||||
log(`[Wake]: Success: ${result.success}. Status: ${result.status}`);
|
log(`[Wake]: Success: ${result.success}. Status: ${result.status}`);
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
|
@ -43,9 +52,9 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
|
||||||
|
|
||||||
//retrigger
|
//retrigger
|
||||||
log(`Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(startingTime)}]`);
|
log(`Periodic ping will be re-triggered in ${startingTime} ms [${msToMinAndSec(startingTime)}]`);
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
setTrigger(prev => !prev);
|
// setTrigger(prev => !prev);
|
||||||
}, startingTime);
|
// }, startingTime);
|
||||||
} else {
|
} else {
|
||||||
blip.error(result.status);
|
blip.error(result.status);
|
||||||
}
|
}
|
||||||
|
@ -60,15 +69,15 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
|
||||||
routes.pingMachine,
|
routes.pingMachine,
|
||||||
{ machineId: machine.machineId },
|
{ machineId: machine.machineId },
|
||||||
{
|
{
|
||||||
onCompleted: result => {
|
onCompleted: (result: any) => {
|
||||||
setState(prev => ({ ...prev, on: result.success }));
|
setState(prev => ({ ...prev, on: result.success }));
|
||||||
log(`[Ping]: Success: ${result.success}. Status: ${result.status}`);
|
log(`[Ping]: Success: ${result.success}. Status: ${result.status}`);
|
||||||
|
|
||||||
if (result.success) {
|
// if (result.success) {
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
setTrigger(prev => !prev);
|
// setTrigger(prev => !prev);
|
||||||
}, pingInterval);
|
// }, pingInterval);
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
onError: () => {
|
onError: () => {
|
||||||
// to do: handle error
|
// to do: handle error
|
||||||
|
@ -81,7 +90,7 @@ const WakeComponent = ({ machine, addLog, disabled }) => {
|
||||||
pingInLoop();
|
pingInLoop();
|
||||||
}, [trigger, pingInLoop]);
|
}, [trigger, pingInLoop]);
|
||||||
|
|
||||||
const handleWakeClick = event => {
|
const handleWakeClick = (event: any) => {
|
||||||
wakeMachine();
|
wakeMachine();
|
||||||
event.stopPropagation();
|
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;
|
export default WakeComponent;
|
|
@ -15,7 +15,11 @@ const routes = {
|
||||||
shutdownMachine: `${powerActionsRoute}/shutdown`,
|
shutdownMachine: `${powerActionsRoute}/shutdown`,
|
||||||
restartMachine: `${powerActionsRoute}/restart`,
|
restartMachine: `${powerActionsRoute}/restart`,
|
||||||
network: {
|
network: {
|
||||||
machines: `${networkRoute}/machines`
|
machines: `${networkRoute}/machines`,
|
||||||
|
machine: {
|
||||||
|
wake: `${powerActionsRoute}/wake`,
|
||||||
|
ping: `${powerActionsRoute}/ping`
|
||||||
|
}
|
||||||
},
|
},
|
||||||
system: {
|
system: {
|
||||||
version: `${systemRoute}/version`,
|
version: `${systemRoute}/version`,
|
||||||
|
|
Loading…
Reference in New Issue