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

master^2
Tudor Stanciu 2024-11-11 02:13:03 +02:00
parent 8148da132d
commit 253ee1953c
2 changed files with 28 additions and 21 deletions

View File

@ -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;

View File

@ -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`,