diff --git a/frontend/src/components/datasets/Dataset.tsx b/frontend/src/components/datasets/Dataset.tsx index 59b08e677..c51ea1e67 100644 --- a/frontend/src/components/datasets/Dataset.tsx +++ b/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}/> - + - + {about["name"]} @@ -189,8 +192,10 @@ export const Dataset = (): JSX.Element => { label="User Metadata" {...a11yProps(1)} disabled={false}/> } iconPosition="start" sx={tab} label="Extracted Metadata" {...a11yProps(2)} disabled={false}/> - } iconPosition="start" sx={tab} + } iconPosition="start" sx={tab} label="Extractors" {...a11yProps(3)} disabled={false}/> + } iconPosition="start" sx={tab} + label="Extraction History" {...a11yProps(4)} disabled={false}/> @@ -234,11 +239,11 @@ export const Dataset = (): JSX.Element => { resourceType="dataset" resourceId={datasetId}/> - + + + + - diff --git a/frontend/src/components/files/File.tsx b/frontend/src/components/files/File.tsx index fae29a2bb..513e1c46e 100644 --- a/frontend/src/components/files/File.tsx +++ b/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 => { + - {/*Preview Tab*/} - {/**/} - {/* {*/} - {/* previews.map((preview) => {*/} - {/* if (preview["previewType"] === "audio") {*/} - {/* return */} {/*Version History*/} {fileVersions !== undefined ? @@ -297,7 +284,7 @@ export const File = (): JSX.Element => { /> - Comments + diff --git a/frontend/src/components/listeners/ExtractionHistory.tsx b/frontend/src/components/listeners/ExtractionHistory.tsx index d14ea9640..0e867e324 100644 --- a/frontend/src/components/listeners/ExtractionHistory.tsx +++ b/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); diff --git a/frontend/src/components/listeners/ExtractionHistoryTab.tsx b/frontend/src/components/listeners/ExtractionHistoryTab.tsx new file mode 100644 index 000000000..b6c5399e2 --- /dev/null +++ b/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 ( + + ); +} diff --git a/frontend/src/components/listeners/ExtractionJobs.tsx b/frontend/src/components/listeners/ExtractionJobs.tsx index 364f38fd4..b800f79fe 100644 --- a/frontend/src/components/listeners/ExtractionJobs.tsx +++ b/frontend/src/components/listeners/ExtractionJobs.tsx @@ -155,11 +155,11 @@ export const ExtractionJobs = (props) => { : null } - {row.jobId} - {row.created} - {row.creator} - {row.duration/1000} sec - {row.resourceId} + { + Object.keys(row).map((key) => { + if (key !== "status") return {row[key]}; + }) + } ); })