Merge pull request #146 from fossology/feat/license-browser

feat(license-browser): added the license browser page

src/Routes.jsx

@@ -125,7 +125,7 @@ const Routes = () => {
           />
           <PrivateLayout
             exact
-            path={routes.browseUploads.licenseBrowser}
+            path={`${routes.browseUploads.licenseBrowser}/uploadID=:uploadID`}
             component={LicenseBrowse}
           />
           <PrivateLayout

src/api/upload.js

@@ -95,6 +95,33 @@ export const getUploadByIdApi = (uploadId, retries) => {
   });
 };
 
+// Getting a Upload Summary
+export const getUploadSummaryApi = (uploadId) => {
+  const url = endpoints.upload.getSummary(uploadId);
+  return sendRequest({
+    url,
+    method: "GET",
+    headers: {
+      Authorization: getToken(),
+    },
+  });
+};
+
+// Getting a Upload License
+export const getUploadLicenseApi = (uploadId, agent) => {
+  const url = endpoints.upload.getLicense(uploadId);
+  return sendRequest({
+    url,
+    method: "GET",
+    headers: {
+      Authorization: getToken(),
+    },
+    queryParams: {
+      agent,
+    },
+  });
+};
+
 createUploadApi.propTypes = {
   folderId: PropTypes.number,
   uploadDescription: PropTypes.string,

src/components/BrowseUploadsHeader/index.jsx

@@ -51,9 +51,11 @@ const Header = () => {
                   Software Heritage
                 </Link>
                 <Link
-                  to={routes.browseUploads.licenseBrowser}
+                  to={`${routes.browseUploads.licenseBrowser}/uploadID=:uploadID`}
                   className={
-                    location.pathname === routes.browseUploads.licenseBrowser
+                    location.pathname.includes(
+                      routes.browseUploads.licenseBrowser
+                    )
                       ? "active-browse-nav-item browse-uploads-nav-item"
                       : "browse-uploads-nav-item"
                   }

src/constants/endpoints.js

@@ -53,6 +53,8 @@ const endpoints = {
   upload: {
     uploadCreate: () => `${apiUrl}/uploads`,
     getId: (uploadId) => `${apiUrl}/uploads/${uploadId}`,
+    getSummary: (uploadId) => `${apiUrl}/uploads/${uploadId}/summary`,
+    getLicense: (uploadId) => `${apiUrl}/uploads/${uploadId}/licenses`,
   },
   browse: {
     get: () => `${apiUrl}/uploads`,

src/pages/Browse/index.jsx

@@ -18,6 +18,8 @@
 */
 
 import React, { useState, useEffect } from "react";
+import routes from "constants/routes";
+import { Link } from "react-router-dom";
 import arrayToTree from "array-to-tree";
 import messages from "constants/messages";
 
@@ -297,10 +299,16 @@ const Browse = () => {
                   ?.map((data) => (
                     <tr key={data?.id} className="text-center">
                       <td>
-                        <div className="font-demi">{data?.uploadname}</div>
-                        <div className="font-size-small">
-                          {data?.description}
-                        </div>
+                        <Link
+                          to={`${routes.browseUploads.licenseBrowser}/uploadID=${data.id}`}
+                        >
+                          <div className="text-primary-color">
+                            <div className="font-demi">{data?.uploadname}</div>
+                            <div className="font-size-small">
+                              {data?.description}
+                            </div>
+                          </div>
+                        </Link>
                         <InputContainer
                           name="action"
                           type="select"
@@ -334,7 +342,7 @@ const Browse = () => {
                       <td>{data?.uploaddate.split(".")[0]}</td>
                     </tr>
                   ))}
-                <tr className="text-left">
+                <tr>
                   <td colSpan="6">
                     <div className="right-pagination">
                       Page:

src/pages/BrowseUploads/LicenseBrowser/index.jsx

@@ -16,22 +16,165 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
 
 // Title
 import Title from "components/Title";
 
+// Widgets
+import { Alert } from "components/Widgets";
+
 // Header
 import BrowseUploadsHeader from "components/BrowseUploadsHeader";
 
+// Required functions for calling APIs
+import { getUploadSummary, getUploadLicense } from "services/upload";
+
+// Helper function for error handling
+import { handleError } from "shared/helper";
+
 const LicenseBrowser = () => {
+  // Setting the upload Id
+  const [uploadId, setuploadId] = useState();
+
+  // Setting the browse data to the table
+  const [summaryData, setSummaryData] = useState();
+
+  // Setting the browse data to the table
+  const [filesData, setFilesData] = useState();
+
+  // State Variables for handling Error Boundaries
+  const [showMessage, setShowMessage] = useState(false);
+  const [message, setMessage] = useState();
+
+  // Getting a upload Id
+  const { uploadID } = useParams();
+  useEffect(() => {
+    setMessage({
+      type: "success",
+      text: "Loading...",
+    });
+    setShowMessage(true);
+    if (uploadID) {
+      setuploadId(uploadID);
+    }
+    if (uploadId) {
+      getUploadSummary(uploadId)
+        .then((res) => {
+          setSummaryData(res);
+          setShowMessage(false);
+        })
+        .catch((error) => {
+          handleError(error, setMessage);
+          setShowMessage(true);
+        });
+      getUploadLicense(uploadId, ["ojo", "nomos", "monk"])
+        .then((res) => {
+          setFilesData(res);
+          setShowMessage(false);
+        })
+        .catch((error) => {
+          handleError(error, setMessage);
+          setShowMessage(true);
+        });
+    } else {
+      setMessage({
+        type: "danger",
+        text: "UploadId should be an integer",
+      });
+    }
+  }, [uploadId]);
+
   return (
     <>
       <Title title="License Browser" />
       <div className="main-container my-3">
+        {showMessage && (
+          <Alert
+            type={message.type}
+            setShow={setShowMessage}
+            message={message.text}
+          />
+        )}
         <h1 className="font-size-main-heading">License Browser</h1>
       </div>
       <BrowseUploadsHeader />
+      <div className="main-container my-4">
+        <div className="row">
+          <div className="col-12 col-lg-12 col-xl-9">
+            <table className="table table-striped text-primary-color font-size-medium table-responsive table-bordered">
+              <thead>
+                <tr className="font-bold font-size-sub-heading">
+                  <th>Files</th>
+                  <th>Scanner Results</th>
+                  <th>Edited Results</th>
+                  <th>Clearing Status</th>
+                  <th>Cleared/ Open/ Total</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filesData &&
+                  filesData.length > 0 &&
+                  filesData.map((data, index) => (
+                    <>
+                      {index < 10 ? (
+                        <tr key={data.id}>
+                          <td>{data.filePath}</td>
+                          <td>{data.findings.scanner}</td>
+                          <td>-</td>
+                          <td>-</td>
+                          <td>-</td>
+                          <td>-</td>
+                        </tr>
+                      ) : (
+                        ""
+                      )}
+                    </>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+          <div className="col-12 col-lg-12 col-xl-3">
+            {summaryData && (
+              <>
+                <h4 className="font-bold font-size-sub-heading text-primary-color">
+                  Summary
+                </h4>
+                <table className="table table-bordered text-primary-color mt-3">
+                  <tbody>
+                    <tr>
+                      <td>Main License</td>
+                      <td>{summaryData.mainLicense}</td>
+                    </tr>
+                    <tr>
+                      <td>Unique Licenses</td>
+                      <td>{summaryData.uniqueLicenses}</td>
+                    </tr>
+                    <tr>
+                      <td>Unique Concluded Licenses</td>
+                      <td>{summaryData.uniqueConcludedLicenses}</td>
+                    </tr>
+                    <tr>
+                      <td>Total Concluded Licenses</td>
+                      <td>{summaryData.totalConcludedLicenses}</td>
+                    </tr>
+                    <tr>
+                      <td>Files Cleared</td>
+                      <td>{summaryData.filesCleared}</td>
+                    </tr>
+                    <tr>
+                      <td>Copyright Count</td>
+                      <td>{summaryData.copyrightCount}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
     </>
   );
 };

src/services/upload.js

@@ -1,16 +1,13 @@
 /*
  Copyright (C) 2021 Shruti Agarwal ([email protected]), Aman Dwivedi ([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.
@@ -21,6 +18,8 @@ import {
   getUploadByIdApi,
   createUploadVcsApi,
   createUploadUrlApi,
+  getUploadSummaryApi,
+  getUploadLicenseApi,
 } from "api/upload";
 
 // Create Uploads from File
@@ -62,3 +61,17 @@ export const getUploadById = (uploadId, retries) => {
     return res;
   });
 };
+
+// Getting a Upload Summary
+export const getUploadSummary = (uploadId) => {
+  return getUploadSummaryApi(uploadId).then((res) => {
+    return res;
+  });
+};
+
+// Getting a Upload License
+export const getUploadLicense = (uploadId, agent) => {
+  return getUploadLicenseApi(uploadId, agent).then((res) => {
+    return res;
+  });
+};