Refactor MachineContainer and WakeComponent: implement usePingTrigger for pinging machines, update action result types, and clean up API calls

master^2
Tudor Stanciu 2024-11-16 01:52:47 +02:00
parent 7234b857a6
commit 09e447f4b3
7 changed files with 73 additions and 39 deletions

View File

@ -5,9 +5,17 @@ import { ViewModes } from "./ViewModeSelection";
import { blip } from "../../../utils"; import { blip } from "../../../utils";
import { LastPage, RotateLeft, Launch, Stop } from "@mui/icons-material"; import { LastPage, RotateLeft, Launch, Stop } from "@mui/icons-material";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { routes, post, endpoints } from "../../../utils/api"; import { endpoints } from "../../../utils/api";
import { Machine, MachineRestarted, MachineShutdown, RestartMachine, ShutdownMachine } from "types"; import {
Machine,
MachineActionResult,
MachineRestarted,
MachineShutdown,
RestartMachine,
ShutdownMachine
} from "types";
import { Key, mutationFetcher, useSWRMutation } from "units/swr"; import { Key, mutationFetcher, useSWRMutation } from "units/swr";
import { usePingTrigger } from "../hooks";
type Props = { type Props = {
machine: Machine; machine: Machine;
@ -25,7 +33,7 @@ const MachineContainer: React.FC<Props> = ({ machine, viewMode }) => {
); );
const manageActionResponse = useCallback( const manageActionResponse = useCallback(
(response: any) => { (response: MachineActionResult) => {
addLog(`Success: ${response.success}. Status: ${response.status}`); addLog(`Success: ${response.success}. Status: ${response.status}`);
if (response.success) { if (response.success) {
blip.success(response.status); blip.success(response.status);
@ -36,6 +44,10 @@ const MachineContainer: React.FC<Props> = ({ machine, viewMode }) => {
[addLog] [addLog]
); );
const { pingMachineTrigger } = usePingTrigger({
onSuccess: manageActionResponse
});
const { trigger: shutdownMachineTrigger } = useSWRMutation<MachineShutdown, Error, Key, ShutdownMachine>( const { trigger: shutdownMachineTrigger } = useSWRMutation<MachineShutdown, Error, Key, ShutdownMachine>(
endpoints.network.machine.shutdown, endpoints.network.machine.shutdown,
mutationFetcher<ShutdownMachine>, mutationFetcher<ShutdownMachine>,
@ -55,16 +67,8 @@ const MachineContainer: React.FC<Props> = ({ machine, viewMode }) => {
); );
const pingMachine = useCallback( const pingMachine = useCallback(
async (machine: Machine) => { async (machine: Machine) => pingMachineTrigger({ machineId: machine.machineId }),
await post( [pingMachineTrigger]
routes.pingMachine,
{ machineId: machine.machineId },
{
onCompleted: manageActionResponse
}
);
},
[manageActionResponse]
); );
const shutdownMachine = useCallback( const shutdownMachine = useCallback(

View File

@ -6,6 +6,7 @@ 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"; import { Machine } from "types";
import { usePingTrigger } from "../../hooks";
const initialState = { on: false }; const initialState = { on: false };
const defaultPingInterval = 1200000; //20 minutes const defaultPingInterval = 1200000; //20 minutes
@ -39,6 +40,22 @@ const WakeComponent: React.FC<Props> = ({ machine, addLog, disabled }) => {
[addLog, getCurrentDateTime] [addLog, getCurrentDateTime]
); );
const { pingMachineTrigger } = usePingTrigger({
onSuccess: result => {
setState(prev => ({ ...prev, on: result.success }));
log(`[Ping]: Success: ${result.success}. Status: ${result.status}`);
// if (result.success) {
// setTimeout(() => {
// setTrigger(prev => !prev);
// }, pingInterval);
// }
},
onError: () => {
// to do: handle error
}
});
const wakeMachine = useCallback(async () => { const wakeMachine = useCallback(async () => {
await post( await post(
routes.wakeMachine, routes.wakeMachine,
@ -65,25 +82,7 @@ const WakeComponent: React.FC<Props> = ({ machine, addLog, disabled }) => {
const pingInLoop = useCallback(async () => { const pingInLoop = useCallback(async () => {
if (disabled) return; if (disabled) return;
await post( pingMachineTrigger({ machineId: machine.machineId });
routes.pingMachine,
{ machineId: machine.machineId },
{
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);
// }
},
onError: () => {
// to do: handle error
}
}
);
}, [machine, log, pingInterval, disabled]); }, [machine, log, pingInterval, disabled]);
useEffect(() => { useEffect(() => {

View File

@ -0,0 +1,3 @@
import usePingTrigger from "./usePingTrigger";
export { usePingTrigger };

View File

@ -0,0 +1,25 @@
import { useMemo } from "react";
import { MachinePinged, PingMachine } from "types";
import { Key, mutationFetcher, useSWRMutation } from "units/swr";
import { blip } from "utils";
import { endpoints } from "utils/api";
type PingTriggerOptions = {
onSuccess: (response: MachinePinged) => void;
onError?: (error: Error) => void;
};
const usePingTrigger = (options: PingTriggerOptions) => {
const { onSuccess } = options;
const onError = useMemo(() => options.onError || ((error: Error) => blip.error(error.message)), [options.onError]);
const { trigger: pingMachineTrigger } = useSWRMutation<MachinePinged, Error, Key, PingMachine>(
endpoints.network.machine.ping,
mutationFetcher<PingMachine>,
{
onError,
onSuccess
}
);
return { pingMachineTrigger };
};
export default usePingTrigger;

View File

@ -1,3 +1,7 @@
export type PingMachine = {
machineId: number;
};
export type ShutdownMachine = { export type ShutdownMachine = {
machineId: number; machineId: number;
delay?: number; delay?: number;

View File

@ -1,9 +1,10 @@
export type MachineShutdown = { export type MachineActionResult = {
success: boolean; success: boolean;
status: string; status: string;
}; };
export type MachineRestarted = { export type MachinePinged = MachineActionResult;
success: boolean;
status: string; export type MachineShutdown = MachineActionResult;
};
export type MachineRestarted = MachineActionResult;

View File

@ -11,8 +11,6 @@ const securityRoute = `${apiHost}/security`;
const routes = { const routes = {
wakeMachine: `${powerActionsRoute}/wake`, wakeMachine: `${powerActionsRoute}/wake`,
pingMachine: `${powerActionsRoute}/ping`,
network: { network: {
machines: `${networkRoute}/machines`, machines: `${networkRoute}/machines`,
machine: { machine: {