VirtWeb/virtweb_frontend/src/routes/VMListRoute.tsx

import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import VisibilityIcon from "@mui/icons-material/Visibility";
import {
  Button,
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableFooter,
  TableHead,
  TableRow,
  Tooltip,
} from "@mui/material";
import { filesize } from "filesize";
import React from "react";
import { useNavigate } from "react-router-dom";
import { GroupApi } from "../api/GroupApi";
import { VMApi, VMInfo, VMState } from "../api/VMApi";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { RouterLink } from "../widgets/RouterLink";
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";

export function VMListRoute(): React.ReactElement {
  const [groups, setGroups] = React.useState<Array<string | undefined>>();
  const [list, setList] = React.useState<VMInfo[] | undefined>();

  const loadKey = React.useRef(1);

  const load = async () => {
    setGroups([undefined, ...(await GroupApi.GetList())]);
    setList(await VMApi.GetList());
  };

  const reload = () => {
    loadKey.current += 1;
    setList(undefined);
  };

  return (
    <AsyncWidget
      loadKey={loadKey.current}
      errMsg="Failed to load Virtual Machines list!"
      load={load}
      ready={list !== undefined}
      build={() => (
        <VirtWebRouteContainer
          label="Virtual Machines"
          actions={
            <>
              <RouterLink to="/vms/new">
                <Button>New</Button>
              </RouterLink>
            </>
          }
        >
          <VMListWidget list={list!} groups={groups!} onReload={reload} />
        </VirtWebRouteContainer>
      )}
    />
  );
}

function VMListWidget(p: {
  groups: Array<string | undefined>;
  list: VMInfo[];
  onReload: () => void;
}): React.ReactElement {
  const navigate = useNavigate();

  const [hiddenGroups, setHiddenGroups] = React.useState<
    Set<string | undefined>
  >(new Set());

  const [runningVMs, setRunningVMs] = React.useState<Set<string>>(new Set());

  const toggleHiddenGroup = (g: string | undefined) => {
    if (hiddenGroups.has(g)) hiddenGroups.delete(g);
    else hiddenGroups.add(g);

    setHiddenGroups(new Set([...hiddenGroups]));
  };

  const updateVMState = (v: VMInfo, s: VMState) => {
    const running = s !== "Shutoff";
    if (runningVMs.has(v.name) === running) {
      return;
    }

    if (running) runningVMs.add(v.name);
    else runningVMs.delete(v.name);

    setRunningVMs(new Set([...runningVMs]));
  };

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Description</TableCell>
            <TableCell>Memory</TableCell>
            <TableCell>vCPU</TableCell>
            <TableCell>Status</TableCell>
            <TableCell>Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {p.groups.map((g, num) => (
            <React.Fragment key={num}>
              <TableRow>
                <TableCell
                  style={{ paddingBottom: 2, paddingTop: 2 }}
                  colSpan={6}
                >
                  <IconButton size="small" onClick={() => toggleHiddenGroup(g)}>
                    {!hiddenGroups?.has(g) ? (
                      <KeyboardArrowUpIcon />
                    ) : (
                      <KeyboardArrowDownIcon />
                    )}
                  </IconButton>
                  {g ?? "default"}
                </TableCell>
              </TableRow>

              {!hiddenGroups.has(g) &&
                p.list
                  .filter((row) => row.group === g)
                  .map((row) => (
                    <TableRow
                      hover
                      key={row.name}
                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                      onDoubleClick={() => navigate(row.ViewURL)}
                    >
                      <TableCell component="th" scope="row">
                        {row.name}
                      </TableCell>
                      <TableCell>{row.description ?? ""}</TableCell>
                      <TableCell>{vmMemoryToHuman(row.memory)}</TableCell>
                      <TableCell>{row.number_vcpu}</TableCell>
                      <TableCell>
                        <VMStatusWidget
                          vm={row}
                          onChange={(s) => updateVMState(row, s)}
                        />
                      </TableCell>
                      <TableCell>
                        <Tooltip title="View this VM">
                          <RouterLink to={row.ViewURL}>
                            <IconButton>
                              <VisibilityIcon />
                            </IconButton>
                          </RouterLink>
                        </Tooltip>
                      </TableCell>
                    </TableRow>
                  ))}
            </React.Fragment>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell></TableCell>
            <TableCell></TableCell>
            <TableCell>
              {vmMemoryToHuman(
                p.list
                  .filter((v) => runningVMs.has(v.name))
                  .reduce((s, v) => s + v.memory, 0)
              )}
              {" / "}
              {vmMemoryToHuman(p.list.reduce((s, v) => s + v.memory, 0))}
            </TableCell>
            <TableCell>
              {p.list
                .filter((v) => runningVMs.has(v.name))
                .reduce((s, v) => s + v.number_vcpu, 0)}
              {" / "}
              {p.list.reduce((s, v) => s + v.number_vcpu, 0)}
            </TableCell>
            <TableCell></TableCell>
            <TableCell></TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </TableContainer>
  );
}

function vmMemoryToHuman(size: number): string {
  return filesize(size * 1000 * 1000);
}