From 09e447f4b373a672fa4f1fc23dd14548adb97ab0 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sat, 16 Nov 2024 01:52:47 +0200 Subject: [PATCH] Refactor MachineContainer and WakeComponent: implement usePingTrigger for pinging machines, update action result types, and clean up API calls --- .../machines/components/MachineContainer.tsx | 30 ++++++++------- .../components/common/WakeComponent.tsx | 37 +++++++++---------- frontend/src/features/machines/hooks/index.ts | 3 ++ .../features/machines/hooks/usePingTrigger.ts | 25 +++++++++++++ frontend/src/types/commands.ts | 4 ++ frontend/src/types/events.ts | 11 +++--- frontend/src/utils/api.js | 2 - 7 files changed, 73 insertions(+), 39 deletions(-) create mode 100644 frontend/src/features/machines/hooks/index.ts create mode 100644 frontend/src/features/machines/hooks/usePingTrigger.ts diff --git a/frontend/src/features/machines/components/MachineContainer.tsx b/frontend/src/features/machines/components/MachineContainer.tsx index 51f9641..3328a46 100644 --- a/frontend/src/features/machines/components/MachineContainer.tsx +++ b/frontend/src/features/machines/components/MachineContainer.tsx @@ -5,9 +5,17 @@ import { ViewModes } from "./ViewModeSelection"; import { blip } from "../../../utils"; import { LastPage, RotateLeft, Launch, Stop } from "@mui/icons-material"; import { useTranslation } from "react-i18next"; -import { routes, post, endpoints } from "../../../utils/api"; -import { Machine, MachineRestarted, MachineShutdown, RestartMachine, ShutdownMachine } from "types"; +import { endpoints } from "../../../utils/api"; +import { + Machine, + MachineActionResult, + MachineRestarted, + MachineShutdown, + RestartMachine, + ShutdownMachine +} from "types"; import { Key, mutationFetcher, useSWRMutation } from "units/swr"; +import { usePingTrigger } from "../hooks"; type Props = { machine: Machine; @@ -25,7 +33,7 @@ const MachineContainer: React.FC = ({ machine, viewMode }) => { ); const manageActionResponse = useCallback( - (response: any) => { + (response: MachineActionResult) => { addLog(`Success: ${response.success}. Status: ${response.status}`); if (response.success) { blip.success(response.status); @@ -36,6 +44,10 @@ const MachineContainer: React.FC = ({ machine, viewMode }) => { [addLog] ); + const { pingMachineTrigger } = usePingTrigger({ + onSuccess: manageActionResponse + }); + const { trigger: shutdownMachineTrigger } = useSWRMutation( endpoints.network.machine.shutdown, mutationFetcher, @@ -55,16 +67,8 @@ const MachineContainer: React.FC = ({ machine, viewMode }) => { ); const pingMachine = useCallback( - async (machine: Machine) => { - await post( - routes.pingMachine, - { machineId: machine.machineId }, - { - onCompleted: manageActionResponse - } - ); - }, - [manageActionResponse] + async (machine: Machine) => pingMachineTrigger({ machineId: machine.machineId }), + [pingMachineTrigger] ); const shutdownMachine = useCallback( diff --git a/frontend/src/features/machines/components/common/WakeComponent.tsx b/frontend/src/features/machines/components/common/WakeComponent.tsx index 40d3ee3..c24fdfc 100644 --- a/frontend/src/features/machines/components/common/WakeComponent.tsx +++ b/frontend/src/features/machines/components/common/WakeComponent.tsx @@ -6,6 +6,7 @@ import { blip } from "../../../../utils"; import { msToMinAndSec } from "../../../../utils/time"; import { routes, post } from "../../../../utils/api"; import { Machine } from "types"; +import { usePingTrigger } from "../../hooks"; const initialState = { on: false }; const defaultPingInterval = 1200000; //20 minutes @@ -39,6 +40,22 @@ const WakeComponent: React.FC = ({ machine, addLog, disabled }) => { [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 () => { await post( routes.wakeMachine, @@ -65,25 +82,7 @@ const WakeComponent: React.FC = ({ machine, addLog, disabled }) => { const pingInLoop = useCallback(async () => { if (disabled) return; - await post( - 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 - } - } - ); + pingMachineTrigger({ machineId: machine.machineId }); }, [machine, log, pingInterval, disabled]); useEffect(() => { diff --git a/frontend/src/features/machines/hooks/index.ts b/frontend/src/features/machines/hooks/index.ts new file mode 100644 index 0000000..90fd598 --- /dev/null +++ b/frontend/src/features/machines/hooks/index.ts @@ -0,0 +1,3 @@ +import usePingTrigger from "./usePingTrigger"; + +export { usePingTrigger }; diff --git a/frontend/src/features/machines/hooks/usePingTrigger.ts b/frontend/src/features/machines/hooks/usePingTrigger.ts new file mode 100644 index 0000000..110c787 --- /dev/null +++ b/frontend/src/features/machines/hooks/usePingTrigger.ts @@ -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( + endpoints.network.machine.ping, + mutationFetcher, + { + onError, + onSuccess + } + ); + return { pingMachineTrigger }; +}; +export default usePingTrigger; diff --git a/frontend/src/types/commands.ts b/frontend/src/types/commands.ts index 9f664b4..13945c5 100644 --- a/frontend/src/types/commands.ts +++ b/frontend/src/types/commands.ts @@ -1,3 +1,7 @@ +export type PingMachine = { + machineId: number; +}; + export type ShutdownMachine = { machineId: number; delay?: number; diff --git a/frontend/src/types/events.ts b/frontend/src/types/events.ts index 3996d20..eda3b92 100644 --- a/frontend/src/types/events.ts +++ b/frontend/src/types/events.ts @@ -1,9 +1,10 @@ -export type MachineShutdown = { +export type MachineActionResult = { success: boolean; status: string; }; -export type MachineRestarted = { - success: boolean; - status: string; -}; +export type MachinePinged = MachineActionResult; + +export type MachineShutdown = MachineActionResult; + +export type MachineRestarted = MachineActionResult; diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js index e71d320..7973e05 100644 --- a/frontend/src/utils/api.js +++ b/frontend/src/utils/api.js @@ -11,8 +11,6 @@ const securityRoute = `${apiHost}/security`; const routes = { wakeMachine: `${powerActionsRoute}/wake`, - pingMachine: `${powerActionsRoute}/ping`, - network: { machines: `${networkRoute}/machines`, machine: {