Can edit more network settings

virtweb_frontend/src/widgets/vms/VMStatusWidget.tsx

@@ -4,18 +4,12 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
 import ReplayIcon from "@mui/icons-material/Replay";
 import StopIcon from "@mui/icons-material/Stop";
-import {
-  CircularProgress,
-  IconButton,
-  Tooltip,
-  Typography,
-} from "@mui/material";
+import { CircularProgress, Typography } from "@mui/material";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { VMApi, VMInfo, VMState } from "../../api/VMApi";
-import { useAlert } from "../../hooks/providers/AlertDialogProvider";
-import { useConfirm } from "../../hooks/providers/ConfirmDialogProvider";
 import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+import { StateActionButton } from "../StateActionButton";
 
 export function VMStatusWidget(p: {
   vm: VMInfo;
@@ -59,7 +53,7 @@ export function VMStatusWidget(p: {
 
       {
         /* VNC console */ p.vm.vnc_access && (
-          <ActionButton
+          <StateActionButton
             currState={state}
             cond={["Running"]}
             icon={<PersonalVideoIcon />}
@@ -71,7 +65,7 @@ export function VMStatusWidget(p: {
       }
 
       {/* Start VM */}
-      <ActionButton
+      <StateActionButton
         currState={state}
         cond={["Shutdown", "Shutoff", "Crashed"]}
         icon={<PlayArrowIcon />}
@@ -81,7 +75,7 @@ export function VMStatusWidget(p: {
       />
 
       {/* Resume VM */}
-      <ActionButton
+      <StateActionButton
         currState={state}
         cond={["Paused", "PowerManagementSuspended"]}
         icon={<PlayArrowIcon />}
@@ -91,7 +85,7 @@ export function VMStatusWidget(p: {
       />
 
       {/* Suspend VM */}
-      <ActionButton
+      <StateActionButton
         currState={state}
         cond={["Running"]}
         icon={<PauseIcon />}
@@ -102,7 +96,7 @@ export function VMStatusWidget(p: {
       />
 
       {/* Shutdown VM */}
-      <ActionButton
+      <StateActionButton
         currState={state}
         cond={["Running"]}
         icon={<PowerSettingsNewIcon />}
@@ -113,7 +107,7 @@ export function VMStatusWidget(p: {
       />
 
       {/* Kill VM */}
-      <ActionButton
+      <StateActionButton
         currState={state}
         cond={["Running", "Paused", "PowerManagementSuspended", "Blocked"]}
         icon={<StopIcon />}
@@ -124,7 +118,7 @@ export function VMStatusWidget(p: {
       />
 
       {/* Reset VM */}
-      <ActionButton
+      <StateActionButton
         currState={state}
         cond={["Running", "Paused", "PowerManagementSuspended", "Blocked"]}
         icon={<ReplayIcon />}
@@ -136,41 +130,3 @@ export function VMStatusWidget(p: {
     </div>
   );
 }
-
-function ActionButton(p: {
-  currState: VMState;
-  cond: VMState[];
-  icon: React.ReactElement;
-  tooltip: string;
-  confirmMessage?: string;
-  performAction: () => Promise<void>;
-  onExecuted: () => void;
-}): React.ReactElement {
-  const confirm = useConfirm();
-  const alert = useAlert();
-
-  if (!p.cond.includes(p.currState)) return <></>;
-
-  const performAction = async () => {
-    try {
-      if (p.confirmMessage && !(await confirm(p.confirmMessage))) return;
-      await p.performAction();
-      p.onExecuted();
-    } catch (e) {
-      console.error(e);
-      alert("Failed to perform action! " + e);
-    }
-  };
-
-  return (
-    <Tooltip title={p.tooltip}>
-      <IconButton
-        size="small"
-        onClick={performAction}
-        style={{ paddingBottom: "0px", paddingTop: "0px" }}
-      >
-        {p.icon}
-      </IconButton>
-    </Tooltip>
-  );
-}