Refactor MachineContainer: convert to TypeScript, implement SWR for data fetching, and update action handling

frontend/src/features/machines/components/MachineAccordion.tsx

@@ -66,9 +66,9 @@ const GridCell: React.FC<GridCellProps> = ({ label, value }) => {
 
 type Props = {
   machine: models.Machine;
-  actions: Array<any>; // Replace any with the actual type of the actions
-  logs: Array<any>; // Replace any with the actual type of the logs
-  addLog: () => void; // Replace with the actual function signature
+  actions: Array<any>;
+  logs: Array<any>;
+  addLog: (message: string) => void;
 };
 
 const MachineAccordion: React.FC<Props> = ({ machine, actions, logs, addLog }) => {

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<Props> = ({ machine, viewMode }) => {
+  const [logs, setLogs] = useState<string[]>([]);
   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<MachineShutdown, Error, Key, ShutdownMachine>(
+    endpoints.network.machine.shutdown,
+    mutationFetcher<ShutdownMachine>,
+    {
+      onError: err => blip.error(err.message),
+      onSuccess: manageActionResponse
+    }
+  );
+
+  const { trigger: restartMachineTrigger } = useSWRMutation<MachineRestarted, Error, Key, RestartMachine>(
+    endpoints.network.machine.restart,
+    mutationFetcher<RestartMachine>,
+    {
+      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;

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;
+};

frontend/src/types/events.ts

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

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

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: {