Skip to content

Commit

Permalink
feat(UI): added show jobs page to view the history of all the jobs fo…
Browse files Browse the repository at this point in the history
…r a given upload

refactor(ui): added main license and status stats on the browse table for each upload

Signed-off-by: Krishna Mahato <[email protected]>
  • Loading branch information
krishna9304 committed Sep 1, 2022
1 parent 615a373 commit 366c33e
Show file tree
Hide file tree
Showing 8 changed files with 204 additions and 28 deletions.
7 changes: 7 additions & 0 deletions src/Routes.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const OneShotMonk = React.lazy(() => import("pages/Upload/OneShotMonk"));
const AllJobs = React.lazy(() => import("pages/Jobs/AllJobs"));
const MyRecentJobs = React.lazy(() => import("pages/Jobs/MyRecentJobs"));
const ScheduleAgents = React.lazy(() => import("pages/Jobs/ScheduleAgents"));
const ShowJobs = React.lazy(() => import("pages/Jobs/ShowJobs"));

// Organize Pages
const DeleteFolder = React.lazy(() => import("pages/Organize/Folder/Delete"));
Expand Down Expand Up @@ -119,6 +120,12 @@ const Routes = () => {

{/* Browse Page */}
<PrivateLayout exact path={routes.browse} component={Browse} />
{/* Upload job history page */}
<PrivateLayout
exact
path={routes.jobs.showJobs}
component={ShowJobs}
/>

{/* Browse Uploads Pages */}
<PrivateLayout
Expand Down
11 changes: 11 additions & 0 deletions src/api/jobs.js
Original file line number Diff line number Diff line change
Expand Up @@ -137,4 +137,15 @@ export const downloadReportApi = (reportId) => {
});
};

export const getUploadHistoryApi = (uploadId) => {
const url = endpoints.jobs.uploadHistory(uploadId);
return sendRequest({
url,
method: "GET",
headers: {
Authorization: getToken(),
},
});
};

export default getJobApi;
13 changes: 9 additions & 4 deletions src/constants/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@ import { defaultAgentsList, getLocalStorage } from "shared/storageHelper";
export const statusOptions = [
{
id: 0,
name: "open",
name: "Open",
},
{
id: 1,
name: "in progress",
name: "InProgress",
},
{
id: 2,
name: "closed",
name: "Closed",
},
{
id: 3,
name: "rejected",
name: "Rejected",
},
];

Expand Down Expand Up @@ -80,6 +80,11 @@ export const actionsOptions = [
name: "Export Unified Report",
reportFormat: "unifiedreport",
},
{
id: 6,
name: "History",
reportFormat: "uploadHistory",
},
];
export const initialMessage = {
type: "success",
Expand Down
3 changes: 2 additions & 1 deletion src/constants/endpoints.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@
*/

// Api Url set in the env file
const apiUrl = `${
export const apiUrl = `${
process.env.REACT_APP_HTTPS === "true" ? "https" : "http"
}://${process.env.REACT_APP_SERVER_URL}`;

// Endpoints for all the REST APIs
const endpoints = {
jobs: {
details: (jobId) => `${apiUrl}/jobs/${jobId}`,
uploadHistory: (uploadId) => `${apiUrl}/jobs/${uploadId}/history`,
scheduleAnalysis: () => `${apiUrl}/jobs`,
allJobs: () => `${apiUrl}/jobs/all`,
scheduleReport: () => `${apiUrl}/report`,
Expand Down
1 change: 1 addition & 0 deletions src/constants/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const routes = {
myRecentJobs: "/jobs/myRecentJobs",
allRecentJobs: "/jobs/allRecentJobs",
scheduleAgents: "/jobs/scheduleAgents",
showJobs: "/showJobs/:uploadId",
},
organize: {
folders: {
Expand Down
69 changes: 46 additions & 23 deletions src/pages/Browse/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

import React, { useState, useEffect } from "react";
import routes from "constants/routes";
import { Link } from "react-router-dom";
import { Link, useHistory } from "react-router-dom";
import arrayToTree from "array-to-tree";
import messages from "constants/messages";

Expand All @@ -41,7 +41,7 @@ import {
handleError,
} from "shared/helper";
import Pagination from "@material-ui/lab/Pagination";

import { getUploadSummary } from "services/upload";
import {
statusOptions,
entriesOptions,
Expand Down Expand Up @@ -79,30 +79,46 @@ const Browse = () => {
const [query, setQuery] = useState("");
const [pages, setPages] = useState();

useEffect(() => {
const history = useHistory();

useEffect(async () => {
setMessage({
type: "success",
text: messages.loading,
});
setShowMessage(true);
getBrowseData(browseData)
.then((res) => {
setBrowseDataList(res.res);
const arr = [];
setPages(res.pages);
for (let i = 0; i < res.pages; i++) {
arr.push({
id: i + 1,
value: i + 1,
});
}
setPagesOptions(arr);
setShowMessage(false);
})
.catch((error) => {
handleError(error, setMessage);
setShowMessage(true);
try {
const res = await getBrowseData(browseData);
const allUploads = res.res;

// getting the upload summary for each upload
const promises = allUploads.map((upload) => getUploadSummary(upload.id));
const allUploadSummary = await Promise.all(promises);
const allUploadsWithSummary = allUploads.map((upload) => {
const tempSumm = allUploadSummary.filter(
(val) => val?.id === upload?.id
);
return {
...upload,
uploadSummary: tempSumm.length ? tempSumm[0] : null,
};
});
setBrowseDataList(allUploadsWithSummary);

const arr = [];
setPages(res.pages);
for (let i = 0; i < res.pages; i++) {
arr.push({
id: i + 1,
value: i + 1,
});
}
setPagesOptions(arr);
setShowMessage(false);
} catch (error) {
handleError(error, setMessage);
setShowMessage(true);
}
}, [browseData]);

useEffect(() => {
Expand Down Expand Up @@ -146,6 +162,10 @@ const Browse = () => {
};

const handleActionChange = (e, uploadId) => {
if (e.target.value === "uploadHistory") {
history.push(`/showJobs/${uploadId}`);
return;
}
scheduleReport(uploadId, e.target.value)
.then((res) => {
return res?.message;
Expand Down Expand Up @@ -296,7 +316,8 @@ const Browse = () => {
return post;
return null;
})
?.map((data) => (
?.reverse()
.map((data) => (
<tr key={data?.id} className="text-center">
<td>
<Link
Expand Down Expand Up @@ -326,10 +347,12 @@ const Browse = () => {
onChange={(e) => handleChange(e)}
options={statusOptions}
property="name"
value={data?.uploadSummary?.clearingStatus}
valueProperty="name"
/>
</td>
<td>-</td>
<td>-</td>
<td>{data?.uploadSummary?.mainLicense}</td>
<td>
<InputContainer
name="status"
Expand All @@ -352,7 +375,7 @@ const Browse = () => {
name="page"
className="col-md-6 pagination-div "
property="value"
count={pages}
count={parseInt(pages, 10)}
page={browseData.page}
onChange={handlePageChange}
/>
Expand Down
120 changes: 120 additions & 0 deletions src/pages/Jobs/ShowJobs/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
/*
Copyright (C) 2022 Krishna Mahato ([email protected])
SPDX-License-Identifier: GPL-2.0
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
version 2 as published by the Free Software Foundation.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/

import React, { useEffect, useState } from "react";

// Title
import Title from "components/Title";

// Required functions for API and Error handling
import { initialMessage } from "constants/constants";
import { Alert } from "components/Widgets";
import { useParams } from "react-router-dom";
import { getUploadHistory } from "services/jobs";
import { apiUrl } from "constants/endpoints";

const ShowJobs = () => {
const [message, setMessage] = useState(initialMessage);
const [showMessage, setShowMessage] = useState(false);
const [allJobsHistoryList, setAllJobsHistoryList] = useState([]);
const params = useParams();

useEffect(async () => {
if (params.uploadId) {
try {
const allJobsHistory = await getUploadHistory(params.uploadId);
setAllJobsHistoryList(allJobsHistory);
} catch (error) {
setMessage(error.message);
setShowMessage(true);
}
}
}, [params]);

return (
<>
<Title title="Show Jobs" />
<div className="main-container my-3 text-center">
{showMessage && (
<Alert
type={message.type}
setShow={setShowMessage}
message={message.text}
/>
)}
<div>
<div>
{allJobsHistoryList?.map((job) => {
return (
<table
key={job.jobId}
className="table table-striped text-primary-color font-size-medium table-responsive-sm table-bordered"
>
<thead>
<tr className="font-bold">
<th>Job/Dependency</th>
<th>Status</th>
<th colSpan={3}>{job.jobName}</th>
<th>Average items/sec</th>
<th>ETA</th>
<th>Download</th>
</tr>
</thead>
<tbody>
{job?.jobQueue?.map((jobQues) => {
return (
<tr key={jobQues.jq_pk}>
<td>
{jobQues?.jq_pk}
{jobQues?.depends[0] && ` / ${jobQues?.depends[0]}`}
</td>
<td>{jobQues?.jq_endtext}</td>
<td>{jobQues?.jq_type}</td>
<td>
{jobQues?.jq_starttime} - {jobQues?.jq_endtime}
</td>
<td>{jobQues?.jq_itemsprocessed} items</td>
<td>{jobQues?.itemsPerSec} items/sec</td>
<td>Scanned</td>
<td>
<a
target="_blank"
rel="noreferrer"
href={`${apiUrl.slice(
0,
-7
)}/?mod=download&report=${job.jobId}`}
>
{jobQues?.download}
</a>
</td>
</tr>
);
})}
</tbody>
</table>
);
})}
</div>
</div>
</div>
</>
);
};

export default ShowJobs;
8 changes: 8 additions & 0 deletions src/services/jobs.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
downloadReportApi,
getAllJobApi,
getAllAdminJobApi,
getUploadHistoryApi,
} from "api/jobs";
import { getReportIdFromUrl } from "shared/helper";
import { getLocalStorage } from "shared/storageHelper";
Expand Down Expand Up @@ -81,4 +82,11 @@ export const downloadReport = (url) => {
});
};

// Fetching the jobs history based on upload id
export const getUploadHistory = (uploadId) => {
return getUploadHistoryApi(uploadId).then((res) => {
return res;
});
};

export default getJob;

0 comments on commit 366c33e

Please sign in to comment.