78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import { mdiXml } from "@mdi/js";
|
|
import Icon from "@mdi/react";
|
|
import { Button, IconButton, Tooltip } from "@mui/material";
|
|
import React from "react";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { VMApi, VMInfo, VMState } from "../api/VMApi";
|
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
|
import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
|
|
import { RouterLink } from "../widgets/RouterLink";
|
|
import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
|
|
import { VMDetails } from "../widgets/vms/VMDetails";
|
|
import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
|
|
|
|
export function VMRoute(): React.ReactElement {
|
|
const { uuid } = useParams();
|
|
|
|
const [vm, setVM] = React.useState<VMInfo>();
|
|
|
|
const load = async () => {
|
|
setVM(await VMApi.GetSingle(uuid!));
|
|
};
|
|
|
|
return (
|
|
<AsyncWidget
|
|
loadKey={uuid}
|
|
load={load}
|
|
errMsg="Failed to load VM information!"
|
|
build={() => <VMRouteBody vm={vm!} />}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function VMRouteBody(p: { vm: VMInfo }): React.ReactElement {
|
|
const navigate = useNavigate();
|
|
|
|
const [state, setState] = React.useState<VMState | undefined>();
|
|
|
|
return (
|
|
<VirtWebRouteContainer
|
|
label={`VM ${p.vm.name}`}
|
|
actions={
|
|
<span style={{ display: "inline-flex", alignItems: "center" }}>
|
|
<VMStatusWidget vm={p.vm} onChange={setState} />
|
|
|
|
<RouterLink to={p.vm.XMLURL}>
|
|
<Tooltip title="View domain definition">
|
|
<IconButton size="small">
|
|
<Icon path={mdiXml} style={{ width: "1em" }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</RouterLink>
|
|
|
|
<ConfigImportExportButtons
|
|
filename={`vm-${p.vm.name}.json`}
|
|
currentConf={p.vm}
|
|
/>
|
|
|
|
{(state === "Shutdown" || state === "Shutoff") && (
|
|
<Button
|
|
variant="contained"
|
|
style={{ marginLeft: "15px" }}
|
|
onClick={() => navigate(p.vm.EditURL)}
|
|
>
|
|
Edit
|
|
</Button>
|
|
)}
|
|
</span>
|
|
}
|
|
>
|
|
<VMDetails
|
|
vm={p.vm}
|
|
editable={false}
|
|
screenshot={p.vm.vnc_access && state === "Running"}
|
|
/>
|
|
</VirtWebRouteContainer>
|
|
);
|
|
}
|