changed fields in create functionality

Signed-off-by: Shrutim1505 <[email protected]>

Author: Shrutim1505

frontend/src/components/CreateQueueDialog.jsx

@@ -1,4 +1,3 @@
-// CreateQueueDialog.js
 import React, { useState } from "react";
 import {
     Dialog,
@@ -7,15 +6,20 @@ import {
     DialogActions,
     TextField,
     Box,
-    MenuItem,
+    FormControlLabel,
+    Checkbox,
 } from "@mui/material";
 import { Button } from "react-bootstrap";
 
 const CreateQueueDialog = ({ open, onClose, onCreate }) => {
     const [queueData, setQueueData] = useState({
         name: "",
+        namespace: "",
         weight: 1,
-        state: "Open",
+        reclaimable: true,
+        guaranteed: { cpu: "", memory: "" },
+        capability: { cpu: "", memory: "" },
+        deserved: { cpu: "", memory: "" },
     });
 
     const primaryColor = "#E34C26";
@@ -30,26 +34,73 @@ const CreateQueueDialog = ({ open, onClose, onCreate }) => {
         }));
     };
 
+    const handleResourceChange = (section, key) => (event) => {
+        setQueueData((prev) => ({
+            ...prev,
+            [section]: {
+                ...prev[section],
+                [key]: event.target.value,
+            },
+        }));
+    };
+
+    const handleCheckboxChange = (event) => {
+        setQueueData((prev) => ({
+            ...prev,
+            reclaimable: event.target.checked,
+        }));
+    };
+
     const handleSubmit = () => {
         if (!queueData.name.trim()) {
             alert("Queue name is required.");
             return;
         }
 
+        const specSection = {
+            weight: queueData.weight,
+            reclaimable: queueData.reclaimable,
+            guaranteed: {},
+            capability: {},
+            deserved: {},
+        };
+
+        // Add non-empty fields only
+        ["guaranteed", "capability", "deserved"].forEach((section) => {
+            const cpu = queueData[section].cpu.trim();
+            const memory = queueData[section].memory.trim();
+            if (cpu || memory) {
+                specSection[section] = {};
+                if (cpu) specSection[section].cpu = cpu;
+                if (memory) specSection[section].memory = memory;
+            } else {
+                delete specSection[section]; // omit empty section
+            }
+        });
+
         const newQueue = {
             apiVersion: "scheduling.volcano.sh/v1beta1",
             kind: "Queue",
             metadata: {
                 name: queueData.name.trim(),
             },
-            spec: {
-                weight: queueData.weight,
-                state: queueData.state,
-            },
+            spec: specSection,
         };
 
+        if (queueData.namespace.trim()) {
+            newQueue.metadata.namespace = queueData.namespace.trim();
+        }
+
         onCreate(newQueue);
-        setQueueData({ name: "", weight: 1, state: "Open" });
+        setQueueData({
+            name: "",
+            namespace: "",
+            weight: 1,
+            reclaimable: true,
+            guaranteed: { cpu: "", memory: "" },
+            capability: { cpu: "", memory: "" },
+            deserved: { cpu: "", memory: "" },
+        });
         onClose();
     };
 
@@ -97,10 +148,9 @@ const CreateQueueDialog = ({ open, onClose, onCreate }) => {
                         }}
                     />
                     <TextField
-                        label="Weight"
-                        type="number"
-                        value={queueData.weight}
-                        onChange={handleChange("weight")}
+                        label="Namespace (optional)"
+                        value={queueData.namespace}
+                        onChange={handleChange("namespace")}
                         fullWidth
                         sx={{
                             "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
@@ -113,10 +163,10 @@ const CreateQueueDialog = ({ open, onClose, onCreate }) => {
                         }}
                     />
                     <TextField
-                        select
-                        label="State"
-                        value={queueData.state}
-                        onChange={handleChange("state")}
+                        label="Weight"
+                        type="number"
+                        value={queueData.weight}
+                        onChange={handleChange("weight")}
                         fullWidth
                         sx={{
                             "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
@@ -127,10 +177,73 @@ const CreateQueueDialog = ({ open, onClose, onCreate }) => {
                                 color: primaryColor,
                             },
                         }}
-                    >
-                        <MenuItem value="Open">Open</MenuItem>
-                        <MenuItem value="Closed">Closed</MenuItem>
-                    </TextField>
+                    />
+                    <FormControlLabel
+                        control={
+                            <Checkbox
+                                checked={queueData.reclaimable}
+                                onChange={handleCheckboxChange}
+                                sx={{
+                                    color: primaryColor,
+                                    "&.Mui-checked": {
+                                        color: primaryColor,
+                                    },
+                                }}
+                            />
+                        }
+                        label="Reclaimable"
+                    />
+
+                    {/* Sections for guaranteed, capability, deserved */}
+                    {["guaranteed", "capability", "deserved"].map((section) => (
+                        <Box key={section}>
+                            <Box sx={{ fontWeight: 500, mb: 1, color: "#555" }}>
+                                {section.charAt(0).toUpperCase() +
+                                    section.slice(1)}{" "}
+                                Resources
+                            </Box>
+                            <Box sx={{ display: "flex", gap: 2 }}>
+                                <TextField
+                                    label="CPU"
+                                    value={queueData[section].cpu}
+                                    onChange={handleResourceChange(
+                                        section,
+                                        "cpu",
+                                    )}
+                                    fullWidth
+                                    placeholder="e.g. 1000m"
+                                    sx={{
+                                        "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+                                            {
+                                                borderColor: primaryColor,
+                                            },
+                                        "& .MuiInputLabel-root.Mui-focused": {
+                                            color: primaryColor,
+                                        },
+                                    }}
+                                />
+                                <TextField
+                                    label="Memory"
+                                    value={queueData[section].memory}
+                                    onChange={handleResourceChange(
+                                        section,
+                                        "memory",
+                                    )}
+                                    fullWidth
+                                    placeholder="e.g. 1Gi"
+                                    sx={{
+                                        "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+                                            {
+                                                borderColor: primaryColor,
+                                            },
+                                        "& .MuiInputLabel-root.Mui-focused": {
+                                            color: primaryColor,
+                                        },
+                                    }}
+                                />
+                            </Box>
+                        </Box>
+                    ))}
                 </Box>
             </DialogContent>
             <DialogActions>

frontend/src/components/Searchbar.jsx

@@ -16,7 +16,7 @@ import {
     faRedo,
     faPlus,
 } from "@fortawesome/free-solid-svg-icons";
-import CreateQueueDialog from "./CreateQueueDialog"; // ✅ Import the dialog
+import CreateQueueDialog from "./CreateQueueDialog";
 
 const SearchBar = ({
     searchText,