From 7234b857a67dde0c6d49bfb72b905729402e7e63 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sat, 16 Nov 2024 01:29:18 +0200 Subject: [PATCH] Refactor MachineContainer: convert to TypeScript, implement SWR for data fetching, and update action handling --- .../machines/components/MachineAccordion.tsx | 6 +- ...chineContainer.js => MachineContainer.tsx} | 66 ++++++++++--------- frontend/src/types/commands.ts | 11 ++++ frontend/src/types/events.ts | 9 +++ frontend/src/types/index.ts | 6 +- frontend/src/utils/api.js | 7 +- 6 files changed, 66 insertions(+), 39 deletions(-) rename frontend/src/features/machines/components/{MachineContainer.js => MachineContainer.tsx} (60%) create mode 100644 frontend/src/types/commands.ts create mode 100644 frontend/src/types/events.ts diff --git a/frontend/src/features/machines/components/MachineAccordion.tsx b/frontend/src/features/machines/components/MachineAccordion.tsx index e78598b..dc45a6e 100644 --- a/frontend/src/features/machines/components/MachineAccordion.tsx +++ b/frontend/src/features/machines/components/MachineAccordion.tsx @@ -66,9 +66,9 @@ const GridCell: React.FC = ({ label, value }) => { type Props = { machine: models.Machine; - actions: Array; // Replace any with the actual type of the actions - logs: Array; // Replace any with the actual type of the logs - addLog: () => void; // Replace with the actual function signature + actions: Array; + logs: Array; + addLog: (message: string) => void; }; const MachineAccordion: React.FC = ({ machine, actions, logs, addLog }) => { diff --git a/frontend/src/features/machines/components/MachineContainer.js b/frontend/src/features/machines/components/MachineContainer.tsx similarity index 60% rename from frontend/src/features/machines/components/MachineContainer.js rename to frontend/src/features/machines/components/MachineContainer.tsx index 54fcf4e..51f9641 100644 --- a/frontend/src/features/machines/components/MachineContainer.js +++ b/frontend/src/features/machines/components/MachineContainer.tsx @@ -1,26 +1,31 @@ import React, { useState, useCallback } from "react"; -import PropTypes from "prop-types"; import MachineTableRow from "./MachineTableRow"; import MachineAccordion from "./MachineAccordion"; 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 } from "../../../utils/api"; +import { routes, post, endpoints } from "../../../utils/api"; +import { Machine, MachineRestarted, MachineShutdown, RestartMachine, ShutdownMachine } from "types"; +import { Key, mutationFetcher, useSWRMutation } from "units/swr"; -const MachineContainer = ({ machine, viewMode }) => { - const [logs, setLogs] = useState([]); +type Props = { + machine: Machine; + viewMode: string; +}; +const MachineContainer: React.FC = ({ machine, viewMode }) => { + const [logs, setLogs] = useState([]); const { t } = useTranslation(); const addLog = useCallback( - text => { + (text: string) => { setLogs(prev => [...prev, text]); }, [setLogs] ); const manageActionResponse = useCallback( - response => { + (response: any) => { addLog(`Success: ${response.success}. Status: ${response.status}`); if (response.success) { blip.success(response.status); @@ -31,8 +36,26 @@ const MachineContainer = ({ machine, viewMode }) => { [addLog] ); + const { trigger: shutdownMachineTrigger } = useSWRMutation( + endpoints.network.machine.shutdown, + mutationFetcher, + { + onError: err => blip.error(err.message), + onSuccess: manageActionResponse + } + ); + + const { trigger: restartMachineTrigger } = useSWRMutation( + endpoints.network.machine.restart, + mutationFetcher, + { + onError: err => blip.error(err.message), + onSuccess: manageActionResponse + } + ); + const pingMachine = useCallback( - async machine => { + async (machine: Machine) => { await post( routes.pingMachine, { machineId: machine.machineId }, @@ -45,29 +68,13 @@ const MachineContainer = ({ machine, viewMode }) => { ); const shutdownMachine = useCallback( - async machine => { - await post( - routes.shutdownMachine, - { machineId: machine.machineId, delay: 0, force: false }, - { - onCompleted: manageActionResponse - } - ); - }, - [manageActionResponse] + async (machine: Machine) => shutdownMachineTrigger({ machineId: machine.machineId, delay: 0, force: false }), + [shutdownMachineTrigger] ); const restartMachine = useCallback( - async machine => { - await post( - routes.restartMachine, - { machineId: machine.machineId, delay: 0, force: false }, - { - onCompleted: manageActionResponse - } - ); - }, - [manageActionResponse] + async (machine: Machine) => restartMachineTrigger({ machineId: machine.machineId, delay: 0, force: false }), + [restartMachineTrigger] ); const actions = [ @@ -115,9 +122,4 @@ const MachineContainer = ({ machine, viewMode }) => { ); }; -MachineContainer.propTypes = { - machine: PropTypes.object.isRequired, - viewMode: PropTypes.string.isRequired -}; - export default MachineContainer; diff --git a/frontend/src/types/commands.ts b/frontend/src/types/commands.ts new file mode 100644 index 0000000..9f664b4 --- /dev/null +++ b/frontend/src/types/commands.ts @@ -0,0 +1,11 @@ +export type ShutdownMachine = { + machineId: number; + delay?: number; + force?: boolean; +}; + +export type RestartMachine = { + machineId: number; + delay?: number; + force?: boolean; +}; diff --git a/frontend/src/types/events.ts b/frontend/src/types/events.ts new file mode 100644 index 0000000..3996d20 --- /dev/null +++ b/frontend/src/types/events.ts @@ -0,0 +1,9 @@ +export type MachineShutdown = { + success: boolean; + status: string; +}; + +export type MachineRestarted = { + success: boolean; + status: string; +}; diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index 05ad3f9..fef5878 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -1,6 +1,10 @@ import * as models from "./models"; import * as dtos from "./dtos"; +import * as commands from "./commands"; +import * as events from "./events"; export * from "./models"; +export * from "./commands"; +export * from "./events"; -export { models, dtos }; +export { models, dtos, commands, events }; diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js index 3b0847b..e71d320 100644 --- a/frontend/src/utils/api.js +++ b/frontend/src/utils/api.js @@ -12,13 +12,14 @@ const securityRoute = `${apiHost}/security`; const routes = { wakeMachine: `${powerActionsRoute}/wake`, pingMachine: `${powerActionsRoute}/ping`, - shutdownMachine: `${powerActionsRoute}/shutdown`, - restartMachine: `${powerActionsRoute}/restart`, + network: { machines: `${networkRoute}/machines`, machine: { wake: `${powerActionsRoute}/wake`, - ping: `${powerActionsRoute}/ping` + ping: `${powerActionsRoute}/ping`, + shutdown: `${powerActionsRoute}/shutdown`, + restart: `${powerActionsRoute}/restart` } }, system: {