[FEATURE] Storage adjustments and minor tweaks (#9)

Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/9

src/components/server-options/BackupHostOption.jsx

@@ -6,7 +6,7 @@ export default function BackupHostOption(props) {
     <TextField
       label="Backup Host"
       onChange={onChange}
-      value={value}
+      value={value ?? ""}
       helperText="Example: s3.mydomain.com"
       FormHelperTextProps={{ sx: { ml: 0 } }}
       required

src/components/server-options/BackupIdOption.jsx

@@ -5,7 +5,7 @@ export default function BackupIdOption(props) {
   return (
     <TextField
       label="S3 Access Key ID"
-      value={value}
+      value={value ?? ""}
       onChange={onChange}
       helperText="Example: s3-access-key-id"
       FormHelperTextProps={{ sx: { ml: 0 } }}

src/components/server-options/BackupKeyOption.jsx

@@ -1,10 +1,11 @@
 import TextField from "@mui/material/TextField";
 export default function BackupKeyOption(props) {
-  const { onChange } = props;
+  const { value, onChange } = props;
 
   return (
     <TextField
       label="S3 Access Key"
+      value={value ?? ""}
       onChange={onChange}
       helperText="Example: s3-access-key"
       FormHelperTextProps={{ sx: { ml: 0 } }}

src/components/server-options/StorageOption.jsx

@@ -0,0 +1,26 @@
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+
+const maxStorageSupported = 80;
+export const storageOptions = new Array(2 * maxStorageSupported)
+  .fill(0)
+  .map((v, i) => (i + 1) * 0.5);
+
+export default function StorageOption(props) {
+  const { value, onChange } = props;
+  return (
+    <TextField
+      label="Storage"
+      onChange={onChange}
+      value={value ?? null}
+      select
+      required
+      SelectProps={{ MenuProps: { sx: { maxHeight: "20rem" } } }}
+    >
+      <MenuItem value={0}>No Storage</MenuItem>
+      {storageOptions.map((o, i) => (
+        <MenuItem value={o} key={i}>{`${o} GB`}</MenuItem>
+      ))}
+    </TextField>
+  );
+}

src/components/servers/RconSocket.js

@@ -22,7 +22,7 @@ export default class RconSocket {
 
   onRconError(v) {
     this.rconLive = false;
-    console.log("Server sent" + v);
+    console.log("Server sent: ", v);
   }
 
   onConnect() {

src/pages/CreateCoreOptions.jsx

@@ -22,6 +22,7 @@ import MemoryOption, {
   memoryOptions,
 } from "@mcl/components/server-options/MemoryOption.jsx";
 import ExtraPortsOption from "@mcl/components/server-options/ExtraPortsOption.jsx";
+import StorageOption from "@mcl/components/server-options/StorageOption.jsx";
 
 import BackupHostOption from "@mcl/components/server-options/BackupHostOption.jsx";
 import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.jsx";
@@ -36,6 +37,7 @@ const defaultServer = {
   serverType: serverTypeOptions[0],
   cpu: cpuOptions[0],
   memory: memoryOptions[2], // 1.5GB
+  storage: 0,
   extraPorts: [],
 };
 
@@ -99,20 +101,23 @@ export default function CreateCoreOptions() {
         />
         <CpuOption value={spec.cpu} onChange={coreUpdate("cpu")} />
         <MemoryOption value={spec.memory} onChange={coreUpdate("memory")} />
+        <StorageOption value={spec.storage} onChange={coreUpdate("storage")} />
         <ExtraPortsOption onChange={updateSpec} />
-        <FormControlLabel
-          control={
-            <Switch
-              checked={backupEnabled}
-              onChange={toggleBackupEnabled}
-              inputProps={{ "aria-label": "controlled" }}
-            />
-          }
-          label="Enable Backups?"
-          labelPlacement="start"
-          sx={{ mr: "auto" }}
-        />
-        {backupEnabled && (
+        {spec.storage !== 0 && (
+          <FormControlLabel
+            control={
+              <Switch
+                checked={backupEnabled}
+                onChange={toggleBackupEnabled}
+                inputProps={{ "aria-label": "controlled" }}
+              />
+            }
+            label="Enable Backups?"
+            labelPlacement="start"
+            sx={{ mr: "auto" }}
+          />
+        )}
+        {backupEnabled && spec.storage !== 0 && (
           <FormControl
             fullWidth
             sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}

src/pages/EditCoreOptions.jsx

@@ -35,6 +35,7 @@ export default function EditCoreOptions(props) {
   const { serverId } = props;
   const [spec, setSpec] = useState();
   const modifyServer = useModifyServer(spec);
+  const nav = useNavigate();
   const { isLoading, data: serverBlueprint } = useGetServer(serverId);
 
   useEffect(() => setSpec(serverBlueprint), [serverBlueprint]);
@@ -47,9 +48,7 @@ export default function EditCoreOptions(props) {
 
   const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
 
-  const upsertSpec = () => {
-    modifyServer(spec);
-  };
+  const upsertSpec = () => modifyServer().then(() => nav("/"));
 
   const toggleBackupEnabled = () =>
     updateSpec("backupEnabled", !spec.backupEnabled);