Display VMs in group
This commit is contained in:
parent
d243022810
commit
59ad5fd722
@ -1,5 +1,65 @@
|
|||||||
import { Rights } from "../api/ServerApi";
|
import {
|
||||||
|
Card,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableCellLayout,
|
||||||
|
TableHeader,
|
||||||
|
TableHeaderCell,
|
||||||
|
TableRow,
|
||||||
|
Title3,
|
||||||
|
} from "@fluentui/react-components";
|
||||||
|
import { Desktop24Regular } from "@fluentui/react-icons";
|
||||||
|
import { filesize } from "filesize";
|
||||||
|
import { Rights, VMGroup } from "../api/ServerApi";
|
||||||
|
|
||||||
export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
|
export function GroupsWidget(p: { rights: Rights }): React.ReactElement {
|
||||||
return <p>TODO</p>;
|
return (
|
||||||
|
<>
|
||||||
|
{p.rights.groups.map((g) => (
|
||||||
|
<GroupInfo group={g} />
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function GroupInfo(p: { group: VMGroup }): React.ReactElement {
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
style={{
|
||||||
|
margin: "50px 10px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Title3 style={{ marginLeft: "10px" }}>{p.group.id}</Title3>
|
||||||
|
<Table arial-label="Default table" style={{ minWidth: "510px" }}>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHeaderCell>Name</TableHeaderCell>
|
||||||
|
<TableHeaderCell>Description</TableHeaderCell>
|
||||||
|
<TableHeaderCell>Resources</TableHeaderCell>
|
||||||
|
<TableHeaderCell>Actions</TableHeaderCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{p.group.vms.map((item) => (
|
||||||
|
<TableRow key={item.uuid}>
|
||||||
|
<TableCell>
|
||||||
|
<TableCellLayout media={<Desktop24Regular />}>
|
||||||
|
{item.name}
|
||||||
|
</TableCellLayout>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{item.description}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{item.architecture} • RAM :{" "}
|
||||||
|
{filesize(item.memory * 1000 * 1000)} • {item.number_vcpu}{" "}
|
||||||
|
vCPU
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user