Standardizing time display and fixing a header loading issue in the Queue table.

frontend/src/components/dateUtils.js

@@ -0,0 +1,35 @@
+export const calculateAge = (creationTimestamp) => {
+    const now = new Date();
+    const created = new Date(creationTimestamp);
+    const diffMs = now - created;
+
+    const diffMinutes = Math.floor(diffMs / (1000 * 60));
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    const diffWeeks = Math.floor(diffDays / 7);
+    const diffMonths = Math.floor(diffDays / 30);
+
+    if (diffMinutes < 60) {
+        return `${diffMinutes}m`;
+    } else if (diffHours < 24) {
+        return `${diffHours}h`;
+    } else if (diffDays < 7) {
+        return `${diffDays}d`;
+    } else if (diffWeeks < 4) {
+        return `${diffWeeks}w`;
+    } else {
+        return `${diffMonths}mo`;
+    }
+};
+
+export const formatCreationTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleString('en-GB', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
+};

frontend/src/components/jobs/JobTable/JobTable.jsx

@@ -25,6 +25,37 @@ const JobTable = ({
 }) => {
     const theme = useTheme();
 
+    // Filter jobs based on current filters
+    const filteredJobs = React.useMemo(
+        () =>
+            jobs.filter(
+                (job) =>
+                    (filters.status === "All" ||
+                        (job.status && job.status.conditions?.some(
+                            condition => condition.type === filters.status
+                        ))) &&
+                    (filters.namespace === "All" ||
+                        job.metadata.namespace === filters.namespace) &&
+                    (filters.queue === "All" ||
+                        job.spec.queue === filters.queue)
+            ),
+        [jobs, filters],
+    );
+
+    // Sort jobs by creation time
+    const sortedJobs = React.useMemo(
+        () =>
+            [...filteredJobs].sort((a, b) => {
+                const compareResult =
+                    new Date(b.metadata.creationTimestamp) -
+                    new Date(a.metadata.creationTimestamp);
+                return sortDirection === "desc"
+                    ? compareResult
+                    : -compareResult;
+            }),
+        [filteredJobs, sortDirection],
+    );
+
     return (
         <TableContainer
             component={Paper}
@@ -66,7 +97,7 @@ const JobTable = ({
                     toggleSortDirection={toggleSortDirection}
                 />
                 <TableBody>
-                    {jobs.map((job) => (
+                    {sortedJobs.map((job) => (
                         <JobTableRow
                             key={`${job.metadata.namespace}-${job.metadata.name}`}
                             job={job}
@@ -79,4 +110,4 @@ const JobTable = ({
     );
 };
 
-export default JobTable;
+export default JobTable;

frontend/src/components/jobs/JobTable/JobTableHeader.jsx

@@ -150,6 +150,29 @@ const JobTableHeader = ({
                     </Button>
                 </TableCell>
 
+                {/* Age Column */}
+                <TableCell
+                    sx={{
+                        backgroundColor: alpha(
+                            theme.palette.background.paper,
+                            0.8,
+                        ),
+                        backdropFilter: "blur(8px)",
+                        padding: "16px 24px",
+                        minWidth: 80,
+                        borderBottom: `2px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+                    }}
+                >
+                    <Typography
+                        variant="subtitle1"
+                        fontWeight="700"
+                        color="text.primary"
+                        sx={{ letterSpacing: "0.02em" }}
+                    >
+                        Age
+                    </Typography>
+                </TableCell>
+
                 <TableCell
                     sx={{
                         backgroundColor: alpha(
@@ -179,7 +202,7 @@ const JobTableHeader = ({
                     />
                 </TableCell>
 
-                {/* New Actions Column */}
+                {/* Actions Column */}
                 <TableCell
                     sx={{
                         backgroundColor: alpha(
@@ -206,4 +229,4 @@ const JobTableHeader = ({
     );
 };
 
-export default JobTableHeader;
+export default JobTableHeader;

frontend/src/components/jobs/JobTable/JobTableRow.jsx

@@ -9,13 +9,14 @@ import {
 } from "@mui/material";
 import { Edit, Delete } from "@mui/icons-material";
 import JobStatusChip from "../JobStatusChip";
-import JobEditDialog from "./JobEditDialog"; // Create or import this component
+import JobEditDialog from "./JobEditDialog";
+import { calculateAge } from "../../utils";
 
 const JobTableRow = ({
     job,
     handleJobClick,
     handleOpenDeleteDialog,
-    onJobUpdate, // Function to update job after edit
+    onJobUpdate,
 }) => {
     const theme = useTheme();
     const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
@@ -34,6 +35,9 @@ const JobTableRow = ({
         handleCloseEditDialog();
     };
 
+    // Calculate age for the job
+    const age = calculateAge(job.metadata.creationTimestamp);
+
     return (
         <>
             <TableRow
@@ -100,6 +104,18 @@ const JobTableRow = ({
                     {new Date(job.metadata.creationTimestamp).toLocaleString()}
                 </TableCell>
 
+                {/* New Age Column */}
+                <TableCell
+                    sx={{
+                        padding: "16px 24px",
+                        fontSize: "0.9rem",
+                        fontWeight: 500,
+                        color: theme.palette.text.secondary,
+                    }}
+                >
+                    {age}
+                </TableCell>
+
                 <TableCell sx={{ padding: "16px 24px" }}>
                     <Box
                         sx={{
@@ -180,4 +196,4 @@ const JobTableRow = ({
     );
 };
 
-export default JobTableRow;
+export default JobTableRow;

frontend/src/components/pods/PodsTable/PodRow.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { TableRow, TableCell, Chip, useTheme, alpha } from "@mui/material";
-import { calculateAge } from "../../utils";
+import { calculateAge } from "../../dateUtils";
 
 const PodRow = ({ pod, getStatusColor, onPodClick }) => {
     const theme = useTheme();
@@ -60,6 +60,17 @@ const PodRow = ({ pod, getStatusColor, onPodClick }) => {
                 {new Date(pod.metadata.creationTimestamp).toLocaleString()}
             </TableCell>
 
+            <TableCell
+                sx={{
+                    padding: "16px 24px",
+                    fontSize: "0.9rem",
+                    fontWeight: 500,
+                    color: theme.palette.text.secondary,
+                }}
+            >
+                {calculateAge(pod.metadata.creationTimestamp)}
+            </TableCell>
+
             <TableCell sx={{ padding: "16px 24px" }}>
                 <Chip
                     label={pod.status?.phase || "Unknown"}
@@ -82,18 +93,8 @@ const PodRow = ({ pod, getStatusColor, onPodClick }) => {
                     }}
                 />
             </TableCell>
-
-            <TableCell
-                sx={{
-                    padding: "16px 24px",
-                    fontSize: "0.95rem",
-                    fontWeight: 500,
-                }}
-            >
-                {calculateAge(pod.metadata.creationTimestamp)}
-            </TableCell>
         </TableRow>
     );
 };
 
-export default PodRow;
+export default PodRow;