[FEATURE] Frontend & Config for backup

lib/k8s/configs/backup-secret.yml

@@ -0,0 +1,11 @@
+apiVersion: v1
+kind: Secret
+metadata:
+  annotations:
+    minecluster.dunemask.net/id: changeme-server-id
+  labels:
+    app: changeme-app-label
+  name: changeme-backup-secret
+type: Opaque
+data:
+  rclone.conf: ""

src/components/server-options/BackupBucketOption.jsx

@@ -0,0 +1,14 @@
+import TextField from "@mui/material/TextField";
+export default function BackupBucketOption(props) {
+  const { onChange } = props;
+
+  return (
+    <TextField
+      label="Bucket Path"
+      onChange={onChange}
+      helperText="Example: /minecraft-backups/example-backups"
+      FormHelperTextProps={{ sx: { ml: 0 } }}
+      required
+    />
+  );
+}

src/components/server-options/BackupHostOption.jsx

@@ -0,0 +1,14 @@
+import TextField from "@mui/material/TextField";
+export default function BackupHostOption(props) {
+  const { onChange } = props;
+
+  return (
+    <TextField
+      label="Backup Host"
+      onChange={onChange}
+      helperText="Example: s3.mydomain.com"
+      FormHelperTextProps={{ sx: { ml: 0 } }}
+      required
+    />
+  );
+}

src/components/server-options/BackupIdOption.jsx

@@ -0,0 +1,14 @@
+import TextField from "@mui/material/TextField";
+export default function BackupIdOption(props) {
+  const { onChange } = props;
+
+  return (
+    <TextField
+      label="S3 Access Key ID"
+      onChange={onChange}
+      helperText="Example: s3-access-key-id"
+      FormHelperTextProps={{ sx: { ml: 0 } }}
+      required
+    />
+  );
+}

src/components/server-options/BackupKeyOption.jsx

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

src/pages/CreateCoreOptions.jsx

@@ -3,6 +3,9 @@ import { useNavigate } from "react-router-dom";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import Typography from "@mui/material/Typography";
 import { useCreateServer } from "@mcl/queries";
 
 // Core Options
@@ -19,6 +22,11 @@ import MemoryOption, {
   memoryOptions,
 } from "@mcl/components/server-options/MemoryOption.jsx";
 
+import BackupHostOption from "@mcl/components/server-options/BackupHostOption.jsx";
+import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.jsx";
+import BackupIdOption from "@mcl/components/server-options/BackupIdOption.jsx";
+import BackupKeyOption from "@mcl/components/server-options/BackupKeyOption.jsx";
+
 const defaultServer = {
   version: "latest",
   serverType: serverTypeOptions[0],
@@ -27,6 +35,7 @@ const defaultServer = {
 };
 
 export default function CreateCoreOptions() {
+  const [backupEnabled, setBackupEnabled] = useState(false);
   const [spec, setSpec] = useState(defaultServer);
   const nav = useNavigate();
   const createServer = useCreateServer(spec);
@@ -58,6 +67,8 @@ export default function CreateCoreOptions() {
     alert(`Could not validate spec because: ${reason}`);
   }
 
+  const toggleBackupEnabled = () => setBackupEnabled(!backupEnabled);
+
   return (
     <Box
       className="create-options"
@@ -73,6 +84,43 @@ export default function CreateCoreOptions() {
         />
         <CpuOption value={spec.cpu} onChange={coreUpdate("cpu")} />
         <MemoryOption value={spec.memory} onChange={coreUpdate("memory")} />
+        <FormControlLabel
+          control={
+            <Switch
+              checked={backupEnabled}
+              onChange={toggleBackupEnabled}
+              inputProps={{ "aria-label": "controlled" }}
+            />
+          }
+          label="Enable Backups?"
+          labelPlacement="start"
+          sx={{ mr: "auto" }}
+        />
+        {backupEnabled && (
+          <FormControl
+            fullWidth
+            sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}
+          >
+            <Typography variant="h6">Backups</Typography>
+            <BackupHostOption
+              value={spec.backupHost}
+              onChange={coreUpdate("backupHost")}
+            />
+            <BackupBucketOption
+              value={spec.backupBucket}
+              onChange={coreUpdate("backupBucket")}
+            />
+            <BackupIdOption
+              value={spec.backupId}
+              onChange={coreUpdate("backupId")}
+            />
+            <BackupKeyOption
+              value={spec.backupKey}
+              onChange={coreUpdate("backupKey")}
+            />
+          </FormControl>
+        )}
+
         <Button onClick={upsertSpec} variant="contained">
           Create
         </Button>