111 lines
2.9 KiB
TypeScript
111 lines
2.9 KiB
TypeScript
import VisibilityIcon from "@mui/icons-material/Visibility";
|
|
import {
|
|
Button,
|
|
IconButton,
|
|
Paper,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Tooltip,
|
|
} from "@mui/material";
|
|
import { filesize } from "filesize";
|
|
import React from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { VMApi, VMInfo } 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 [list, setList] = React.useState<VMInfo[] | undefined>();
|
|
|
|
const loadKey = React.useRef(1);
|
|
|
|
const load = async () => {
|
|
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!} onReload={reload} />
|
|
</VirtWebRouteContainer>
|
|
)}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function VMListWidget(p: {
|
|
list: VMInfo[];
|
|
onReload: () => void;
|
|
}): React.ReactElement {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>Name</TableCell>
|
|
<TableCell>Description</TableCell>
|
|
<TableCell>Memory</TableCell>
|
|
<TableCell>Status</TableCell>
|
|
<TableCell>Actions</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{p.list.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>{filesize(row.memory * 1000 * 1000)}</TableCell>
|
|
<TableCell>
|
|
<VMStatusWidget vm={row} />
|
|
</TableCell>
|
|
<TableCell>
|
|
<Tooltip title="View this VM">
|
|
<RouterLink to={row.ViewURL}>
|
|
<IconButton>
|
|
<VisibilityIcon />
|
|
</IconButton>
|
|
</RouterLink>
|
|
</Tooltip>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
}
|