Created dependency dashboard & updated existing charts as specified in #578, #579, #580

Signed-off-by: Omkar Phansopkar <[email protected]>

Author: OmkarPh

src/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { HashRouter, Route,Routes } from "react-router-dom";
+import { HashRouter, Route, Routes } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 
 import DropZone from "./components/DropZone/DropZone";
@@ -13,7 +13,9 @@ import FileInfoDash from "./pages/FileInfoDash/FileInfoDash";
 import Home from "./pages/Home/Home";
 import Licenses from "./pages/Licenses/Licenses";
 import LicenseInfoDash from "./pages/LicenseInfoDash/LicenseInfoDash";
+import CopyrightInfoDash from "./pages/CopyrightInfoDash/CopyrightInfoDash";
 import PackageInfoDash from "./pages/PackageInfoDash/PackageInfoDash";
+import DependencyInfoDash from "./pages/DependencyInfoDash/DependencyInfoDash";
 import Packages from "./pages/Packages/Packages";
 import PageNotFound from "./pages/PageNotFound";
 import ScanInfo from "./pages/ScanInfo/ScanInfo";
@@ -50,14 +52,19 @@ const App = () => {
                     path={ROUTES.LICENSE_DASHBOARD}
                     element={<LicenseInfoDash />}
                   />
+                  <Route
+                    path={ROUTES.COPYRIGHT_DASHBOARD}
+                    element={<CopyrightInfoDash />}
+                  />
                   <Route
                     path={ROUTES.PACKAGE_DASHBOARD}
                     element={<PackageInfoDash />}
                   />
                   <Route
-                    path={ROUTES.LICENSES}
-                    element={<Licenses />}
+                    path={ROUTES.DEPENDENCY_DASHBOARD}
+                    element={<DependencyInfoDash />}
                   />
+                  <Route path={ROUTES.LICENSES} element={<Licenses />} />
                   <Route path={ROUTES.PACKAGES} element={<Packages />} />
                   <Route path={ROUTES.CHART_SUMMARY} element={<ChartView />} />
                   <Route path={ROUTES.SCAN_INFO} element={<ScanInfo />} />
@@ -82,4 +89,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

src/components/Navbar/Navbar.tsx

@@ -1,4 +1,4 @@
-import { faArchive, faBars, faChartColumn, faFileCode, faFileLines, faGavel, faHome, faInfoCircle, faList,faTable } from '@fortawesome/free-solid-svg-icons';
+import { faArchive, faBars, faChartColumn, faCopyright, faFileCode, faFileLines, faGavel, faHome, faInfoCircle, faList,faListCheck,faTable } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useState } from 'react'
 import { Menu, MenuItem, ProSidebar, SidebarContent,SidebarFooter } from 'react-pro-sidebar';
@@ -30,11 +30,21 @@ const MENU_ITEMS = [
         route: "/" + ROUTES.LICENSE_DASHBOARD,
         icon: faGavel,
     },
+    {
+        title: "Copyright Info Dashboard",
+        route: "/" + ROUTES.COPYRIGHT_DASHBOARD,
+        icon: faCopyright,
+    },
     {
         title: "Package Info Dashboard",
         route: "/" + ROUTES.PACKAGE_DASHBOARD,
         icon: faArchive,
     },
+    {
+        title: "Dependency Info Dashboard",
+        route: "/" + ROUTES.DEPENDENCY_DASHBOARD,
+        icon: faListCheck,
+    },
     {
         title: "Licenses Explorer",
         route: "/" + ROUTES.LICENSES,

src/components/PackagesEntityDetails/DependencyEntity.tsx

@@ -1,99 +1,99 @@
-import React, { useEffect } from 'react'
-import { Badge } from 'react-bootstrap';
-import ReactJson from '@microlink/react-json-view';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCheck, faCogs } from '@fortawesome/free-solid-svg-icons';
+import React, { useEffect } from "react";
+import { Badge } from "react-bootstrap";
+import ReactJson from "@microlink/react-json-view";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faCogs } from "@fortawesome/free-solid-svg-icons";
 
-import { DependencyDetails } from '../../pages/Packages/packageDefinitions'
-import { DependencyScopeMapping } from './dependencyScopeMapper';
+import { DependencyDetails } from "../../pages/Packages/packageDefinitions";
+import { DependencyScopeMapping } from "./dependencyScopeMapper";
 
-import '../../styles/entityCommonStyles.css';
-import './dependencyEntity.css'
+import "../../styles/entityCommonStyles.css";
+import "./dependencyEntity.css";
 
 interface DependencyEntityProps {
-  dependency: DependencyDetails,
-  goToPackageByUID: (package_uid: string) => void,
+  dependency: DependencyDetails;
+  goToPackageByUID: (package_uid: string) => void;
+  goToFileInTableView: (file_path: string) => void;
 }
 const DependencyEntity = (props: DependencyEntityProps) => {
-  const { goToPackageByUID, dependency: dependency} = props;
+  const { goToPackageByUID, goToFileInTableView, dependency } = props;
 
   useEffect(() => {
     console.log("Active dep", dependency);
-  }, [dependency])
+  }, [dependency]);
 
-  if(!dependency){
+  if (!dependency) {
     return (
       <div>
-        <h5>
-          No dependency data found !!
-        </h5>
+        <h5>No dependency data found !!</h5>
       </div>
-    )
+    );
   }
   return (
-    <div className='dependency-entity'>
-      <h5>
-        { dependency.purl }
-      </h5>
-      {
-        dependency.is_runtime ?
-          <Badge pill bg="primary">
-            <FontAwesomeIcon icon={faCogs} />
-            { ' ' } Runtime
-          </Badge>
-        : dependency.is_optional ?
-          <Badge pill bg="dark">
-            {
-              DependencyScopeMapping[dependency.scope] ?
-              <>
-                <FontAwesomeIcon icon={DependencyScopeMapping[dependency.scope].icon} />
-                { " " } { DependencyScopeMapping[dependency.scope].text}
-              </>
-              : dependency.scope || "Optional"
-            }
-          </Badge>
-        : ""
-      }
-      {
-        dependency.is_resolved && 
+    <div className="dependency-entity">
+      <h5>{dependency.purl}</h5>
+      {dependency.is_runtime ? (
+        <Badge pill bg="primary">
+          <FontAwesomeIcon icon={faCogs} /> Runtime
+        </Badge>
+      ) : dependency.is_optional ? (
+        <Badge pill bg="dark">
+          {DependencyScopeMapping[dependency.scope] ? (
+            <>
+              <FontAwesomeIcon
+                icon={DependencyScopeMapping[dependency.scope].icon}
+              />{" "}
+              {DependencyScopeMapping[dependency.scope].text}
+            </>
+          ) : (
+            dependency.scope || "Optional"
+          )}
+        </Badge>
+      ) : (
+        ""
+      )}
+      {dependency.is_resolved && (
         <Badge pill bg="success">
-          <FontAwesomeIcon icon={faCheck} />
-          { ' ' } Resolved
+          <FontAwesomeIcon icon={faCheck} /> Resolved
         </Badge>
-      }
-      <br/>
-      <br/>
-      <div className='entity-properties'>
-        {
+      )}
+      <br />
+      <br />
+      <div className="entity-properties">
+        {[
           [
-            [
-              "For:", 
-              dependency.for_package_uid ?
+            "For:",
+            dependency.for_package_uid ? (
               <a onClick={() => goToPackageByUID(dependency.for_package_uid)}>
-                { dependency.for_package_uid || "NA" }
+                {dependency.for_package_uid}
               </a>
-              : <>NA</>
-            ],
-            [ "Scope:", dependency.scope || "NA" ],
-            [ "Extracted requirement:", dependency.extracted_requirement || "NA" ],
-            [ "Data file:", dependency.datafile_path || "NA" ],
-            [ "Data source ID", dependency.datasource_id || "NA" ],
-          ].map(entry => (
-            <React.Fragment key={entry[0].toString()}>
-              <span className='property'>
-                { entry[0] || "" }
-              </span>
-              <span className='value'>
-                { entry[1] || "" }
-              </span>
-              <br/>
-            </React.Fragment>
-          ))
-        }
+            ) : (
+              <>NA</>
+            ),
+          ],
+          ["Scope:", dependency.scope || "NA"],
+          ["Extracted requirement:", dependency.extracted_requirement || "NA"],
+          [
+            "Data file:",
+            dependency.datafile_path ? (
+              <a onClick={() => goToFileInTableView(dependency.datafile_path)}>
+                {dependency.datafile_path}
+              </a>
+            ) : (
+              <>NA</>
+            ),
+          ],
+          ["Data source ID", dependency.datasource_id || "NA"],
+        ].map((entry) => (
+          <React.Fragment key={entry[0].toString()}>
+            <span className="property">{entry[0] || ""}</span>
+            <span className="value">{entry[1] || ""}</span>
+            <br />
+          </React.Fragment>
+        ))}
       </div>
-      <br/>
-      {
-        dependency.is_resolved && dependency.resolved_package &&
+      <br />
+      {dependency.is_resolved && dependency.resolved_package && (
         <div>
           Resolved package:
           <ReactJson
@@ -103,8 +103,8 @@ const DependencyEntity = (props: DependencyEntityProps) => {
             collapsed={0}
           />
         </div>
-      }
-      <br/>
+      )}
+      <br />
       Raw package:
       <ReactJson
         src={dependency || {}}
@@ -113,7 +113,7 @@ const DependencyEntity = (props: DependencyEntityProps) => {
         collapsed={0}
       />
     </div>
-  )
-}
+  );
+};
 
-export default DependencyEntity
+export default DependencyEntity;

src/components/PieChart/PieChart.tsx

@@ -10,10 +10,11 @@ import "./piechart.css";
 
 interface PieChartProps extends PieChartFallbackProps {
   chartData: FormattedEntry[] | null;
+  hideLegend?: boolean;
 }
 
 const PieChart = (props: PieChartProps) => {
-  const { chartData } = props;
+  const { chartData, hideLegend } = props;
   const chartRef = useRef<HTMLDivElement | null>(null);
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const [c3Chart, setC3Chart] = useState<ChartAPI | null>(null);
@@ -37,6 +38,9 @@ const PieChart = (props: PieChartProps) => {
             `${String(value)} \n${(ratio * 100).toFixed(1)}%`,
         },
       },
+      legend: {
+        hide: hideLegend,
+      }
     });
     setC3Chart(newChart);
   }, [chartData]);

src/components/PieChart/PieChartFallback.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import { TailSpin } from 'react-loader-spinner';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
+import React from "react";
+import { TailSpin } from "react-loader-spinner";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 
 export interface PieChartFallbackProps {
-  noDataText: string,
-  noDataLink: string,
-  loading?: boolean,
+  noDataText: string;
+  noDataLink: string;
+  loading?: boolean;
 }
 
 export const PieChartFallback = (props: PieChartFallbackProps) => {
   return (
-    <div className='fallback-container'>
-      {
-        props.loading ?
+    <div className="fallback-container">
+      {props.loading ? (
         <TailSpin
           radius={5}
           height={100}
           width={100}
-          color="#3898fc" 
+          color="#3898fc"
           ariaLabel="loading-chart"
         />
-        :
+      ) : (
         <div>
-          No Data <br/><br/>
+          No Data <br />
+          <br />
           <a href={props.noDataLink}>
-            { props.noDataText }
+            {props.noDataText}
             &nbsp;
             <FontAwesomeIcon icon={faUpRightFromSquare} />
           </a>
         </div>
-      }
+      )}
     </div>
-  )
-}
+  );
+};

src/constants/routes.ts

@@ -5,7 +5,9 @@ export const ROUTES = {
   TABLE_VIEW: "table-view",
   FILE_DASHBOARD: "file-dashboard",
   LICENSE_DASHBOARD: "license-dashboard",
+  COPYRIGHT_DASHBOARD: "copyright-dashboard",
   PACKAGE_DASHBOARD: "package-dashboard",
+  DEPENDENCY_DASHBOARD: "dependency-dashboard",
   LICENSES: "licenses",
   PACKAGES: "packages",
   CHART_SUMMARY: "chart-summary",
@@ -16,19 +18,23 @@ export const FILE_TREE_ROUTES = [
   ROUTES.TABLE_VIEW,
   ROUTES.FILE_DASHBOARD,
   ROUTES.LICENSE_DASHBOARD,
+  ROUTES.COPYRIGHT_DASHBOARD,
   ROUTES.PACKAGE_DASHBOARD,
+  ROUTES.DEPENDENCY_DASHBOARD,
   ROUTES.CHART_SUMMARY,
 ];
 
 export const IMPORT_FALLBACK_ROUTES = [
   ROUTES.TABLE_VIEW,
   ROUTES.FILE_DASHBOARD,
   ROUTES.LICENSE_DASHBOARD,
+  ROUTES.COPYRIGHT_DASHBOARD,
   ROUTES.PACKAGES,
   ROUTES.PACKAGE_DASHBOARD,
+  ROUTES.DEPENDENCY_DASHBOARD,
   ROUTES.LICENSES,
   ROUTES.CHART_SUMMARY,
   ROUTES.SCAN_INFO,
 ];
 
-export const DEFAULT_ROUTE_ON_IMPORT = ROUTES.TABLE_VIEW;
+export const DEFAULT_ROUTE_ON_IMPORT = ROUTES.TABLE_VIEW;