Created first disk

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -0,0 +1,114 @@
+import {
+  Avatar,
+  Button,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Paper,
+} from "@mui/material";
+import { VMDisk, VMInfo } from "../../api/VMApi";
+import { filesize } from "filesize";
+import Icon from "@mdi/react";
+import { mdiHarddisk } from "@mdi/js";
+import { TextInput } from "./TextInput";
+import { ServerApi } from "../../api/ServerApi";
+import { SelectInput } from "./SelectInput";
+
+export function VMDisksList(p: {
+  vm: VMInfo;
+  onChange?: () => void;
+  editable: boolean;
+}): React.ReactElement {
+  const addNewDisk = () => {
+    p.vm.disks.push({
+      alloc_type: "Sparse",
+      size: 10000,
+      delete: false,
+      name: `disk${p.vm.disks.length}`,
+      new: true,
+    });
+    p.onChange?.();
+  };
+
+  return (
+    <>
+      {/* disks list */}
+      {p.vm.disks.map((d, num) => (
+        <DiskInfo
+          key={num}
+          editable={p.editable}
+          disk={d}
+          onChange={p.onChange}
+        />
+      ))}
+
+      {p.editable && <Button onClick={addNewDisk}>Add new disk</Button>}
+    </>
+  );
+}
+
+function DiskInfo(p: {
+  editable: boolean;
+  disk: VMDisk;
+  onChange?: () => void;
+}): React.ReactElement {
+  if (!p.editable || !p.disk.new)
+    return (
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar>
+            <Icon path={mdiHarddisk} />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText
+          primary={p.disk.name}
+          secondary={`${filesize(p.disk.size * 1000 * 1000)} - ${
+            p.disk.alloc_type
+          }`}
+        />
+        {/* TODO delete disk if editable */}
+      </ListItem>
+    );
+
+  return (
+    <Paper elevation={3} style={{ margin: "10px", padding: "10px" }}>
+      <TextInput
+        editable={true}
+        label="Disk name"
+        size={ServerApi.Config.constraints.disk_name_size}
+        checkValue={(v) => /^[a-zA-Z0-9]+$/.test(v)}
+        value={p.disk.name}
+        onValueChange={(v) => {
+          p.disk.name = v ?? "";
+          p.onChange?.();
+        }}
+      />
+
+      <TextInput
+        editable={true}
+        label="Disk size (MB)"
+        size={ServerApi.Config.constraints.disk_size}
+        value={p.disk.size.toString()}
+        onValueChange={(v) => {
+          p.disk.size = Number(v ?? "0");
+          p.onChange?.();
+        }}
+        type="number"
+      />
+
+      <SelectInput
+        editable={true}
+        label="File allocation type"
+        options={[
+          { label: "Sparse allocation", value: "Sparse" },
+          { label: "Fixed allocation", value: "Fixed" },
+        ]}
+        value={p.disk.alloc_type}
+        onValueChange={(v) => {
+          p.disk.alloc_type = v as any;
+          p.onChange?.();
+        }}
+      />
+    </Paper>
+  );
+}