Merge 5ae19dc222 into 32f205fcc1

frontend/src/components/Charts/JobStatusPieChart.jsx

@@ -1,16 +1,20 @@
 import React from "react";
-import { Box, Typography, Grid } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { Doughnut } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, Title } from "chart.js";
+import EmptyStateComponent from "../dashboard/EmptyStateComponent";
+import AssignmentIcon from "@mui/icons-material/Assignment";
 
 ChartJS.register(ArcElement, Tooltip, Legend, Title);
 
 const JobStatusPieChart = ({ data }) => {
     if (!data || !Array.isArray(data)) {
         return (
-            <Box sx={{ height: 300, width: "100%", position: "relative" }}>
+            <EmptyStateComponent 
-                <Typography>No data available</Typography>
+                title="No Job Data Available"
-            </Box>
+                message="Job data could not be loaded. Please try refreshing the dashboard."
+                icon={<AssignmentIcon sx={{ fontSize: 60, color: "text.secondary", mb: 2 }} />}
+            />
         );
     }
 
@@ -73,6 +77,17 @@ const JobStatusPieChart = ({ data }) => {
 
     const hasData = Object.values(statusCounts).some((count) => count > 0);
 
+    // Check if there's no data to display and show a meaningful empty state
+    if (!hasData) {
+        return (
+            <EmptyStateComponent 
+                title="No Jobs Available"
+                message="There are currently no jobs in the system. Jobs will appear here once they are created."
+                icon={<AssignmentIcon sx={{ fontSize: 60, color: "text.secondary", mb: 2 }} />}
+            />
+        );
+    }
+
     return (
         <Box
             sx={{
@@ -178,4 +193,4 @@ const JobStatusPieChart = ({ data }) => {
     );
 };
 
-export default JobStatusPieChart;
+export default JobStatusPieChart;

frontend/src/components/dashboard/ChartsContainer.jsx

@@ -39,7 +39,7 @@ const ChartsContainer = ({ isLoading, jobs, queues }) => {
                     <JobStatusPieChart data={jobs} />
                 </ChartWrapper>
             </Grid>
-
+            
             <Grid item xs={12} md={6}>
                 <ChartWrapper isLoading={isLoading}>
                     <QueueResourcesBarChart data={queues} />
@@ -49,4 +49,4 @@ const ChartsContainer = ({ isLoading, jobs, queues }) => {
     );
 };
 
-export default ChartsContainer;
+export default ChartsContainer;

frontend/src/components/dashboard/EmptyStateComponent.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import AssignmentIcon from "@mui/icons-material/Assignment";
+
+const EmptyStateComponent = ({ 
+  title = "No data available", 
+  message = "There are currently no items to display.", 
+  icon = <AssignmentIcon sx={{ fontSize: 60, color: "text.secondary", mb: 2 }} />
+}) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100%",
+        width: "100%",
+        p: 3
+      }}
+    >
+      {icon}
+      <Typography variant="h6" color="text.secondary" gutterBottom>
+        {title}
+      </Typography>
+      <Typography variant="body2" color="text.secondary" align="center">
+        {message}
+      </Typography>
+    </Box>
+  );
+};
+
+export default EmptyStateComponent;