Merge pull request #184 from vzhou-p/feature/pod-group

add PodGroup dashboard support

Author: volcano-sh-bot

backend/src/server.js

@@ -137,6 +137,116 @@ app.get("/api/job/:namespace/:name/yaml", async (req, res) => {
     }
 });
 
+// Get all PodGroups
+app.get("/api/podgroups", async (req, res) => {
+    try {
+        const namespace = req.query.namespace || "";
+        const searchTerm = req.query.search || "";
+        const statusFilter = req.query.status || "";
+
+        console.log("Fetching podgroups with params:", {
+            namespace,
+            searchTerm,
+            statusFilter,
+        });
+
+        let response;
+        if (namespace === "" || namespace === "All") {
+            response = await k8sApi.listClusterCustomObject({
+                group: "scheduling.volcano.sh",
+                version: "v1beta1",
+                plural: "podgroups",
+            });
+        } else {
+            response = await k8sApi.listNamespacedCustomObject({
+                group: "scheduling.volcano.sh",
+                version: "v1beta1",
+                namespace,
+                plural: "podgroups",
+            });
+        }
+
+        // k8sApi (CustomObjectsApi) v1.2.0 ObjectParamAPI returns the body directly
+        let filteredPodGroups = response.items || [];
+
+        if (searchTerm) {
+            filteredPodGroups = filteredPodGroups.filter((pg) =>
+                pg.metadata.name
+                    .toLowerCase()
+                    .includes(searchTerm.toLowerCase()),
+            );
+        }
+
+        if (statusFilter && statusFilter !== "All") {
+            filteredPodGroups = filteredPodGroups.filter(
+                (pg) => pg.status?.phase === statusFilter,
+            );
+        }
+
+        res.json({
+            items: filteredPodGroups,
+            totalCount: filteredPodGroups.length,
+        });
+    } catch (err) {
+        console.error("Error fetching podgroups:", err);
+        res.status(500).json({
+            error: "Failed to fetch podgroups",
+            details: err.message,
+        });
+    }
+});
+
+// Get details of a specific PodGroup
+app.get("/api/podgroups/:namespace/:name", async (req, res) => {
+    try {
+        const { namespace, name } = req.params;
+        const response = await k8sApi.getNamespacedCustomObject({
+            group: "scheduling.volcano.sh",
+            version: "v1beta1",
+            namespace,
+            plural: "podgroups",
+            name,
+        });
+        res.json(response);
+    } catch (err) {
+        console.error("Error fetching podgroup:", err);
+        res.status(500).json({
+            error: "Failed to fetch podgroup",
+            details: err.message,
+        });
+    }
+});
+
+// Get YAML of a specific PodGroup
+app.get("/api/podgroups/:namespace/:name/yaml", async (req, res) => {
+    try {
+        const { namespace, name } = req.params;
+        const response = await k8sApi.getNamespacedCustomObject({
+            group: "scheduling.volcano.sh",
+            version: "v1beta1",
+            namespace,
+            plural: "podgroups",
+            name,
+        });
+
+        const formattedYaml = yaml.dump(response, {
+            indent: 2,
+            lineWidth: -1,
+            noRefs: true,
+            sortKeys: false,
+        });
+
+        res.setHeader("Content-Type", "text/yaml");
+        res.send(formattedYaml);
+    } catch (error) {
+        console.error("Error fetching podgroup YAML:", error);
+        res.status(500).json({
+            error: "Failed to fetch podgroup YAML",
+            details: error.message,
+        });
+    }
+});
+
 // Get details of a specific Queue
 app.get("/api/queues/:name", async (req, res) => {
     const name = req.params.name;
@@ -516,18 +626,15 @@ app.patch("/api/jobs/:namespace/:name", async (req, res) => {
             headers: { "Content-Type": "application/merge-patch+json" },
         };
 
-        const response = await k8sApi.patchNamespacedCustomObject(
-            "batch.volcano.sh",
-            "v1alpha1",
+        const response = await k8sApi.patchNamespacedCustomObject({
+            group: "batch.volcano.sh",
+            version: "v1alpha1",
             namespace,
-            "jobs",
+            plural: "jobs",
             name,
-            patchData,
-            undefined,
-            undefined,
-            undefined,
+            body: patchData,
             options,
-        );
+        });
 
         res.json({ message: "Job updated successfully", data: response.body });
     } catch (error) {
@@ -544,18 +651,15 @@ app.patch("/api/queues/:namespace/:name", async (req, res) => {
             headers: { "Content-Type": "application/merge-patch+json" },
         };
 
-        const response = await k8sApi.patchNamespacedCustomObject(
-            "scheduling.volcano.sh",
-            "v1alpha1",
+        const response = await k8sApi.patchNamespacedCustomObject({
+            group: "scheduling.volcano.sh",
+            version: "v1alpha1",
             namespace,
-            "queues",
+            plural: "queues",
             name,
-            patchData,
-            undefined,
-            undefined,
-            undefined,
+            body: patchData,
             options,
-        );
+        });
 
         res.json({
             message: "Queue updated successfully",

backend/tests/server.test.js

@@ -40,4 +40,42 @@ describe("backend", () => {
         expect(res.body.items).toHaveLength(2);
         expect(res.body.items[0].metadata.name).toBe("job1");
     });
+
+    it("should fetch podgroups", async () => {
+        const mockResponse = {
+            items: [
+                {
+                    metadata: { name: "pg1", namespace: "default" },
+                    status: { phase: "Running" },
+                },
+                {
+                    metadata: { name: "pg2", namespace: "default" },
+                    status: { phase: "Pending" },
+                },
+            ],
+        };
+
+        const stub = sandbox.stub(
+            CustomObjectsApi.prototype,
+            "listClusterCustomObject",
+        );
+
+        // Updated for OBJECT arguments using sinon matchers
+        stub.withArgs(
+            sinon.match({
+                group: "scheduling.volcano.sh",
+                version: "v1beta1",
+                plural: "podgroups",
+            }),
+        ).resolves(mockResponse);
+
+        // Fallback for others
+        stub.resolves({ items: [] });
+
+        const res = await request(app).get("/api/podgroups");
+
+        expect(res.status).toBe(200);
+        expect(res.body.items).toHaveLength(2);
+        expect(res.body.items[0].metadata.name).toBe("pg1");
+    });
 });

frontend/src/App.jsx

@@ -10,6 +10,7 @@ import Dashboard from "./components/dashboard/Dashboard";
 import Jobs from "./components/jobs/Jobs";
 import Queues from "./components/queues/Queues";
 import Pods from "./components/pods/Pods";
+import PodGroups from "./components/podgroups/PodGroups";
 import { ThemeProvider } from "@mui/material/styles";
 import { theme } from "./theme";
 import "bootstrap/dist/css/bootstrap.min.css";
@@ -28,6 +29,7 @@ function App() {
                         <Route path="jobs" element={<Jobs />} />
                         <Route path="queues" element={<Queues />} />
                         <Route path="pods" element={<Pods />} />
+                        <Route path="podgroups" element={<PodGroups />} />
                     </Route>
                 </Routes>
             </Router>

frontend/src/components/Layout.jsx

@@ -18,6 +18,7 @@ import CloudIcon from "@mui/icons-material/Cloud";
 import HomeIcon from "@mui/icons-material/Home";
 import AssignmentIcon from "@mui/icons-material/Assignment";
 import WorkspacesIcon from "@mui/icons-material/Workspaces";
+import CategoryIcon from "@mui/icons-material/Category";
 
 // use relative path to load Logo
 import volcanoLogo from "../assets/volcano-icon-color.svg";
@@ -41,6 +42,7 @@ const Layout = () => {
         { text: "Jobs", icon: <AssignmentIcon />, path: "/jobs" },
         { text: "Queues", icon: <CloudIcon />, path: "/queues" },
         { text: "Pods", icon: <WorkspacesIcon />, path: "/pods" },
+        { text: "PodGroups", icon: <CategoryIcon />, path: "/podgroups" },
     ];
 
     return (

frontend/src/components/podgroups/PodGroupDialog.jsx

@@ -0,0 +1,85 @@
+import React from "react";
+import {
+    Box,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+} from "@mui/material";
+
+const PodGroupDialog = ({ open, handleClose, selectedName, selectedYaml }) => {
+    return (
+        <Dialog
+            open={open}
+            onClose={handleClose}
+            maxWidth={false}
+            fullWidth
+            PaperProps={{
+                sx: {
+                    width: "80%",
+                    maxWidth: "800px",
+                    maxHeight: "90vh",
+                    m: 2,
+                    bgcolor: "background.paper",
+                },
+            }}
+        >
+            <DialogTitle>PodGroup YAML - {selectedName}</DialogTitle>
+            <DialogContent>
+                <Box
+                    sx={{
+                        mt: 2,
+                        mb: 2,
+                        fontFamily: "monospace",
+                        fontSize: "1.2rem",
+                        whiteSpace: "pre-wrap",
+                        overflow: "auto",
+                        maxHeight: "calc(90vh - 150px)",
+                        bgcolor: "grey.50",
+                        p: 2,
+                        borderRadius: 1,
+                        "& .yaml-key": {
+                            fontWeight: 700,
+                            color: "#000",
+                        },
+                    }}
+                >
+                    <pre
+                        dangerouslySetInnerHTML={{
+                            __html: selectedYaml,
+                        }}
+                    />
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Box
+                    sx={{
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        mt: 2,
+                        width: "100%",
+                        px: 2,
+                        pb: 2,
+                    }}
+                >
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={handleClose}
+                        sx={{
+                            minWidth: "100px",
+                            "&:hover": {
+                                bgcolor: "primary.dark",
+                            },
+                        }}
+                    >
+                        Close
+                    </Button>
+                </Box>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default PodGroupDialog;