fix(Job): add id in JobHistoryDialog and more fields in JobDataTable

packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx

@@ -33,6 +33,7 @@ import {
   RowSelectionState,
   useReactTable,
   getCoreRowModel,
+  VisibilityState,
 } from "@tanstack/react-table";
 import { useOIDCContext } from "../../hooks/oidcConfiguration";
 import { DataTable, MenuItem } from "../shared/DataTable";
@@ -67,7 +68,17 @@ export function JobDataTable() {
   });
 
   // States for table settings
-  const [columnVisibility, setColumnVisibility] = React.useState({});
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({
+      JobGroup: false,
+      JobType: false,
+      Owner: false,
+      OwnerGroup: false,
+      VO: false,
+      StartExecTime: false,
+      EndExecTime: false,
+      UserPriority: false,
+    });
   const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({
     left: ["JobID"], // Pin JobID column by default
   });
@@ -81,6 +92,10 @@ export function JobDataTable() {
   const [searchBody, setSearchBody] = React.useState<SearchBody>({
     sort: [{ parameter: "JobID", direction: "asc" }],
   });
+
+  // State for selected job
+  const [selectedJobId, setSelectedJobId] = React.useState<number | null>(null);
+
   // State for job history
   const [isHistoryDialogOpen, setIsHistoryDialogOpen] = React.useState(false);
   const [jobHistoryData, setJobHistoryData] = React.useState<JobHistory[]>([]);
@@ -144,12 +159,6 @@ export function JobDataTable() {
         header: "ID",
         meta: { type: "number" },
       }),
-      columnHelper.accessor("JobName", {
-        header: "Name",
-      }),
-      columnHelper.accessor("Site", {
-        header: "Site",
-      }),
       columnHelper.accessor("Status", {
         header: "Status",
         cell: (info) => renderStatusCell(info.getValue()),
@@ -158,10 +167,54 @@ export function JobDataTable() {
       columnHelper.accessor("MinorStatus", {
         header: "Minor Status",
       }),
+      columnHelper.accessor("ApplicationStatus", {
+        header: "Application Status",
+      }),
+      columnHelper.accessor("Site", {
+        header: "Site",
+      }),
+      columnHelper.accessor("JobName", {
+        header: "Name",
+      }),
+      columnHelper.accessor("JobGroup", {
+        header: "Job Group",
+      }),
+      columnHelper.accessor("JobType", {
+        header: "Type",
+      }),
+      columnHelper.accessor("LastUpdateTime", {
+        header: "Last Update Time",
+        meta: { type: "date" },
+      }),
+      columnHelper.accessor("HeartBeatTime", {
+        header: "Last Sign of Life",
+        meta: { type: "date" },
+      }),
       columnHelper.accessor("SubmissionTime", {
         header: "Submission Time",
         meta: { type: "date" },
       }),
+      columnHelper.accessor("Owner", {
+        header: "Owner",
+      }),
+      columnHelper.accessor("OwnerGroup", {
+        header: "Owner Group",
+      }),
+      columnHelper.accessor("VO", {
+        header: "VO",
+      }),
+      columnHelper.accessor("StartExecTime", {
+        header: "Start Execution Time",
+        meta: { type: "date" },
+      }),
+      columnHelper.accessor("EndExecTime", {
+        header: "End Execution Time",
+        meta: { type: "date" },
+      }),
+      columnHelper.accessor("UserPriority", {
+        header: "User Priority",
+        meta: { type: "number" },
+      }),
     ],
     [columnHelper, renderStatusCell, statusColors],
   );
@@ -330,6 +383,7 @@ export function JobDataTable() {
     async (selectedId: number | null) => {
       if (!selectedId) return;
       setBackdropOpen(true);
+      setSelectedJobId(selectedId);
       try {
         const { data } = await getJobHistory(selectedId, accessToken);
         setBackdropOpen(false);
@@ -468,6 +522,7 @@ export function JobDataTable() {
         open={isHistoryDialogOpen}
         onClose={handleHistoryClose}
         historyData={jobHistoryData}
+        jobId={selectedJobId ?? 0}
       />
     </Box>
   );

packages/diracx-web-components/components/JobMonitor/JobHistoryDialog.tsx

@@ -21,6 +21,8 @@ interface JobHistoryDialogProps {
    * The data for the job history dialog
    */
   historyData: JobHistory[];
+  /** The job ID */
+  jobId: number;
 }
 
 /**
@@ -29,10 +31,10 @@ interface JobHistoryDialogProps {
  * @returns The rendered JobHistoryDialog component.
  */
 export function JobHistoryDialog(props: JobHistoryDialogProps) {
-  const { open, onClose, historyData } = props;
+  const { open, onClose, historyData, jobId } = props;
   return (
     <Dialog open={open} onClose={onClose} aria-labelledby="job-history-title">
-      <DialogTitle id="job-history-title">Job History</DialogTitle>
+      <DialogTitle id="job-history-title">Job History: {jobId}</DialogTitle>
 
       <IconButton
         aria-label="close"

packages/diracx-web-components/contexts/ThemeProvider.tsx

@@ -8,6 +8,7 @@ import {
   darken,
   alpha,
   PaletteMode,
+  useMediaQuery,
 } from "@mui/material";
 import { cyan, grey, lightGreen } from "@mui/material/colors";
 import { createContext, useEffect, useMemo, useState } from "react";
@@ -41,15 +42,13 @@ export const ThemeContext = createContext<ThemeContextType | undefined>(
  */
 export const ThemeProvider = ({ children }: ThemeProviderProps) => {
   const [theme, setTheme] = useState<string>("light");
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
 
   useEffect(() => {
-    const prefersDarkMode = window.matchMedia(
-      "(prefers-color-scheme: dark)",
-    ).matches;
     const storedTheme = localStorage.getItem("theme");
     const defaultTheme = storedTheme || (prefersDarkMode ? "dark" : "light");
     setTheme(defaultTheme);
-  }, []);
+  }, [prefersDarkMode]);
 
   // Update localStorage when the theme changes
   useEffect(() => {

packages/diracx-web-components/types/Job.ts

@@ -1,16 +1,21 @@
 export interface Job {
   JobID: number;
   JobName: string;
+  JobGroup: string;
+  JobType: string;
+  Owner: string;
+  OwnerGroup: string;
+  VO: string;
   Site: string;
   Status: string;
   MinorStatus: string;
+  ApplicationStatus: string;
   SubmissionTime: Date;
   RescheduleTime: Date | null;
   LastUpdateTime: Date;
   StartExecTime: Date | null;
   HeartBeatTime: Date | null;
   EndExecTime: Date | null;
-  ApplicationStatus: string;
   UserPriority: number;
   RescheduleCounter: number;
   VerifiedFlag: boolean;