272 show prior extractor executions on filedataset pages

frontend/src/components/datasets/Dataset.tsx

@@ -27,7 +27,10 @@ import {DatasetDetails} from "./DatasetDetails";
 import {FormatListBulleted, InsertDriveFile} from "@material-ui/icons";
 import {MainBreadcrumbs} from "../navigation/BreadCrumb";
 import {Listeners} from "../listeners/Listeners";
-import AssessmentIcon from '@mui/icons-material/Assessment';
+import AssessmentIcon from "@mui/icons-material/Assessment";
+import HistoryIcon from "@mui/icons-material/History";
+import BuildIcon from "@mui/icons-material/Build";
+import {ExtractionHistoryTab} from "../listeners/ExtractionHistoryTab";
 
 const tab = {
 	fontStyle: "normal",
@@ -122,7 +125,7 @@ export const Dataset = (): JSX.Element => {
 				// update existing metadata
 				updateDatasetMetadata(datasetId, metadataRequestForms[key]);
 			} else {
-				// post new metadata if metadata id doesn't exist
+				// post new metadata if metadata id doesn"t exist
 				createDatasetMetadata(datasetId, metadataRequestForms[key]);
 			}
 		});
@@ -168,12 +171,12 @@ export const Dataset = (): JSX.Element => {
 						 actionBtnName="Report" handleActionBtnClick={handleErrorReport}
 						 handleActionCancel={handleErrorCancel}/>
 		 	<Grid container>
-				<Grid item xs={10} sx={{display: 'flex', alignItems: 'center'}}>
+				<Grid item xs={10} sx={{display: "flex", alignItems: "center"}}>
 					<MainBreadcrumbs paths={paths}/>
 				</Grid>
 			</Grid>
 			<Grid container>
-				<Grid item xs={8} sx={{display: 'flex', alignItems: 'center'}}>
+				<Grid item xs={8} sx={{display: "flex", alignItems: "center"}}>
 					<Typography variant="h3" paragraph>{about["name"]}</Typography>
 				</Grid>
 				<Grid item xs={4}>
@@ -189,8 +192,10 @@ export const Dataset = (): JSX.Element => {
 							 label="User Metadata" {...a11yProps(1)} disabled={false}/>
 						 <Tab icon={<AssessmentIcon/>} iconPosition="start" sx={tab}
 							 label="Extracted Metadata" {...a11yProps(2)} disabled={false}/>
-						<Tab icon={<AssessmentIcon/>} iconPosition="start" sx={tab}
+						<Tab icon={<BuildIcon/>} iconPosition="start" sx={tab}
 							 label="Extractors" {...a11yProps(3)} disabled={false}/>
+						 <Tab icon={<HistoryIcon/>} iconPosition="start" sx={tab}
+							 label="Extraction History" {...a11yProps(4)} disabled={false}/>
 
 					</Tabs>
 					<TabPanel value={selectedTabIndex} index={0}>
@@ -234,11 +239,11 @@ export const Dataset = (): JSX.Element => {
 													 resourceType="dataset" resourceId={datasetId}/>
 					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={3}>
-						<Listeners
-							datasetId={datasetId}
-						/>
+						<Listeners datasetId={datasetId}/>
+					</TabPanel>
+					<TabPanel value={selectedTabIndex} index={4}>
+						<ExtractionHistoryTab datasetId={datasetId} />
 					</TabPanel>
-					<TabPanel value={selectedTabIndex} index={4}/>
 				</Grid>
 				<Grid item>
 					<DatasetDetails details={about}/>

frontend/src/components/files/File.tsx

@@ -27,6 +27,7 @@ import {Download} from "@mui/icons-material";
 import {FileDetails} from "./FileDetails";
 import {fetchFolderPath} from "../../actions/folder";
 import {Listeners} from "../listeners/Listeners";
+import {ExtractionHistoryTab} from "../listeners/ExtractionHistoryTab";
 
 
 export const File = (): JSX.Element => {
@@ -234,22 +235,8 @@ export const File = (): JSX.Element => {
 						<Tab label="User Metadata" {...a11yProps(1)} disabled={false}/>
 						<Tab label="Extracted Metadata" {...a11yProps(2)} disabled={false}/>
 						<Tab label="Extractors" {...a11yProps(3)} disabled={false}/>
+						<Tab label="Extraction History" {...a11yProps(4)} disabled={false}/>
 					</Tabs>
-					{/*Preview Tab*/}
-					{/*<TabPanel value={selectedTabIndex} index={0}>*/}
-					{/*	{*/}
-					{/*		previews.map((preview) => {*/}
-					{/*			if (preview["previewType"] === "audio") {*/}
-					{/*				return <Audio fileId={preview["fileid"]} audioSrc={preview["resource"]}/>;*/}
-					{/*			} else if (preview["previewType"] === "video") {*/}
-					{/*				return <Video fileId={preview["fileid"]} videoSrc={preview["resource"]}/>;*/}
-					{/*			} else if (preview["previewType"] === "thumbnail") {*/}
-					{/*				return (<Thumbnail fileId={preview["fileid"]} fileType={preview["fileType"]}*/}
-					{/*								   imgSrc={preview["resource"]}/>);*/}
-					{/*			}*/}
-					{/*		})*/}
-					{/*	}*/}
-					{/*</TabPanel>*/}
 					{/*Version History*/}
 					<TabPanel value={selectedTabIndex} index={0}>
 						{fileVersions !== undefined ?
@@ -297,7 +284,7 @@ export const File = (): JSX.Element => {
 						/>
 					</TabPanel>
 					<TabPanel value={selectedTabIndex} index={4}>
-						Comments
+						<ExtractionHistoryTab fileId={fileId}/>
 					</TabPanel>
 				</Grid>
 				<Grid item xs={2}>

frontend/src/components/listeners/ExtractionHistory.tsx

@@ -44,6 +44,10 @@ const headCells = [
 		id: "duration",
 		label: "Duration",
 	},
+	{
+		id: "resourceType",
+		label: "Resource Type",
+	},
 	{
 		id: "resourceId",
 		label: "Resource Id",
@@ -110,7 +114,8 @@ export const ExtractionHistory = (): JSX.Element => {
 		let rows = [];
 		if (jobs.length > 0) {
 			jobs.map((job) => {
-				rows.push(createData(job["status"], job["id"], parseDate(job["created"]), job["creator"]["email"], job["duration"], job["resource_ref"]["collection"], job["resource_ref"]["resource_id"]));
+				rows.push(createData(job["status"], job["id"], parseDate(job["created"]), job["creator"]["email"],
+					`${job["duration"]/1000} sec`, job["resource_ref"]["collection"], job["resource_ref"]["resource_id"]));
 			});
 		}
 		setExecutionJobsTableRow(rows);

frontend/src/components/listeners/ExtractionHistoryTab.tsx

@@ -0,0 +1,95 @@
+import React, {useEffect, useState} from "react";
+
+import {useDispatch, useSelector,} from "react-redux";
+import {RootState} from "../../types/data";
+import {fetchListenerJobs} from "../../actions/listeners";
+import {ExtractionJobs} from "./ExtractionJobs";
+import {format} from "date-fns";
+import {parseDate} from "../../utils/common";
+
+
+const createData = (status: string, jobId: string, listener_id: string, created: string, creator: string,
+					duration: number) => {
+	return {
+		status, listener_id, jobId, created, creator, duration
+	};
+}
+
+const headCells = [
+	{
+		id: "status",
+		label: "",
+	},
+	{
+		id: "listener_id",
+		label: "Extractor Name"
+	},
+	{
+		id: "jobId",
+		label: "Job ID",
+	},
+	{
+		id: "created",
+		label: "Submitted At",
+	},
+	{
+		id: "creator",
+		label: "Submitted By",
+	},
+	{
+		id: "duration",
+		label: "Duration",
+	},
+];
+export const ExtractionHistoryTab = (props): JSX.Element => {
+	const {datasetId, fileId} = props;
+
+	const dispatch = useDispatch();
+	const listListenerJobs = (listenerId: string | null, status: string | null, userId: string | null, fileId: string | null,
+							  datasetId: string | null, created: string | null, skip: number, limit: number) =>
+		dispatch(fetchListenerJobs(listenerId, status, userId, fileId, datasetId, created, skip, limit))
+
+	const jobs = useSelector((state: RootState) => state.listener.jobs);
+
+	const [executionJobsTableRow, setExecutionJobsTableRow] = useState([]);
+	const [selectedStatus, setSelectedStatus] = useState(null);
+	const [selectedCreatedTime, setSelectedCreatedTime] = useState(null);
+
+
+	useEffect(() => {
+		listListenerJobs(null, null, null, fileId ? fileId : null,
+			datasetId ? datasetId : null, null, 0, 100);
+	}, []);
+
+	const handleRefresh = () => {
+		listListenerJobs(null, selectedStatus, null, fileId ? fileId : null,
+			datasetId ? datasetId : null,
+			selectedCreatedTime ? format(selectedCreatedTime, "yyyy-MM-dd") : null, 0, 100);
+	}
+
+	useEffect(() => {
+		// TODO add pagination for jobs
+		handleRefresh();
+	}, [selectedStatus, selectedCreatedTime]);
+
+	useEffect(() => {
+		let rows = [];
+		if (jobs.length > 0) {
+			jobs.map((job) => {
+				rows.push(createData(job["status"], job["id"], job["listener_id"], parseDate(job["created"]),
+					job["creator"]["email"], `${job["duration"]/1000} sec`));
+			});
+		}
+		setExecutionJobsTableRow(rows);
+	}, [jobs]);
+
+	return (
+		<ExtractionJobs rows={executionJobsTableRow} headCells={headCells}
+						selectedStatus={selectedStatus}
+						selectedCreatedTime={selectedCreatedTime}
+						setSelectedStatus={setSelectedStatus}
+						setSelectedCreatedTime={setSelectedCreatedTime}
+						handleRefresh={handleRefresh}
+		/>
+	);
+}

frontend/src/components/listeners/ExtractionJobs.tsx

@@ -155,11 +155,11 @@ export const ExtractionJobs = (props) => {
 															<CancelIcon/> : null
 													}
 												</TableCell>
-												<TableCell align="left">{row.jobId}</TableCell>
-												<TableCell align="left">{row.created}</TableCell>
-												<TableCell align="left">{row.creator}</TableCell>
-												<TableCell align="left">{row.duration/1000} sec </TableCell>
-												<TableCell align="left">{row.resourceId}</TableCell>
+												{
+													Object.keys(row).map((key) => {
+														if (key !== "status") return <TableCell align="left">{row[key]}</TableCell>;
+													})
+												}
 											</TableRow>
 										);
 									})