Added hyperlink to jobid, triggers log summary popup when clicked

frontend/src/components/listeners/ExtractionJobs.tsx

@@ -13,9 +13,11 @@ import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import SkipNextIcon from "@mui/icons-material/SkipNext";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Link } from "@mui/material";
 import {theme} from "../../theme";
 import {ExtractionJobsToolbar} from "./ExtractionJobsToolbar";
 import {EnhancedTableHead as ExtractionJobsTableHeader} from "./ExtractionJobsTableHeader";
+import ExtractorStatus from "./ExtractorStatus";
 
 
 export interface Data {
@@ -74,6 +76,8 @@ export const ExtractionJobs = (props) => {
 	const [orderBy, setOrderBy] = React.useState<keyof Data>("created");
 	const [page, setPage] = React.useState(0);
 	const [rowsPerPage, setRowsPerPage] = React.useState(10);
+	const [openExtractorPane, setOpenExtractorPane] = React.useState(false);
+	const [jobId, setJobId] = React.useState("");
 
 	const handleRequestSort = (
 		event: React.MouseEvent<unknown>,
@@ -92,13 +96,31 @@ export const ExtractionJobs = (props) => {
 		setRowsPerPage(parseInt(event.target.value, 10));
 		setPage(0);
 	};
+
+	const handleExtractionSummary = () => {
+		setOpenExtractorPane(true);
+	};
+
+	const handleSubmitExtractionClose = () => {
+		setOpenExtractorPane(false);
+	};
+
 	// Avoid a layout jump when reaching the last page with empty rows.
 	const emptyRows =
 		page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
 
 	return (
 		<Box sx={{width: "100%"}}>
 			<Paper sx={{width: "100%", mb: 2}}>
+				<Dialog open={openExtractorPane} onClose={handleSubmitExtractionClose} fullWidth={true}>
+					<DialogTitle>Extractor Logs</DialogTitle>
+					<DialogContent>
+						<ExtractorStatus job_id={jobId}/>
+					</DialogContent>
+					<DialogActions>
+						<Button onClick={handleSubmitExtractionClose}>Close</Button>
+					</DialogActions>
+				</Dialog>
 				<TableContainer>
 					<ExtractionJobsToolbar numExecution={rows.length} selectedStatus={selectedStatus}
 										   selectedCreatedTime={selectedCreatedTime}
@@ -171,6 +193,20 @@ export const ExtractionJobs = (props) => {
 												</TableCell>
 												{
 													Object.keys(row).map((key) => {
+														if (key == "jobId") {
+															return (
+																<TableCell align="left"><Link
+																	component="button"
+																	variant="body2"
+																	onClick={() => {
+																		setJobId(row[key]);
+																		handleExtractionSummary();
+																	}}
+																>
+																	{row[key]}
+																</Link></TableCell>
+															);
+														}
 														if (key !== "status") return <TableCell align="left">{row[key]}</TableCell>;
 													})
 												}
@@ -202,4 +238,4 @@ export const ExtractionJobs = (props) => {
 			</Paper>
 		</Box>
 	);
-}
+};