Refactor code (#617)

* Code refactoring

* moving example -> component

* Fix import for component

* Remove layout folder

* refactoring code

* Fix eslint warning

* Fix eslint warning

* Fix build

* Fix build for assessmentReport

.eslintrc.js

@@ -25,7 +25,7 @@ module.exports = {
     // These are the rules that I use
     'react-native/no-unused-styles': 'warn',
     'react-native/no-inline-styles': 'off',
-    'react-native/no-raw-text': ['warn', {
+    'react-native/no-raw-text': ['off', {
       skip: ['CustomText']
     }],
     "react-native/no-single-element-style-arrays": "warn",

src/App.tsx

@@ -8,14 +8,14 @@ import { ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 
 import theme from "./assets/theme";
-import Presentation from "./layouts/pages/presentation";
 import routes from "./routes";
-import BesVersionHistory from "./layouts/pages/besVersionHistory";
-import BesAssessmentReport from "./layouts/pages/besAssessmentReport";
-import ShowVulnerabilityDetailsPage from "./layouts/pages/vulnerabilityDetails";
-import ShowModelDetailsPage from "./layouts/pages/modelDetails";
-import ModelVulnerabilitiesDetailedPage from "./layouts/pages/modelVulnerabilitiesDetailed";
-import FuzzingModelPage from "./pages/FuzzingModel";
+import FuzzingModel from "./pages/FuzzingModel";
+import BesAssessmentReport from "./pages/BesAssessmentReport";
+import BesVersionHistory from "./pages/BesVersionHistory";
+import ShowModelDetails from "./pages/ShowModelDetails";
+import ModelVulnerabilitiesDetailed from "./pages/ModelVulnerabilitiesDetailed";
+import LandingPages from "./pages/LandingPages";
+import ShowVulnerabilityDetails from "./pages/ShowVulnerabilityDetails";
 
 function App() {
   const { pathname } = useLocation();
@@ -47,7 +47,7 @@ function App() {
       <Routes>
         { getRoutes(routes) }
         <Route path="*" element={ <Navigate to="/BeSLighthouse" /> } />
-        <Route path="/BeSLighthouse" element={ <Presentation /> } />
+        <Route path="/BeSLighthouse" element={ <LandingPages /> } />
         <Route
           path="/BeSLighthouse/Project-Of-Interest/bes_version_history/:besId/:besName"
           element={ <BesVersionHistory /> }
@@ -58,19 +58,19 @@ function App() {
         />
         <Route
           path="/BeSLighthouse/vulnerability_report/:cveId"
-          element={ <ShowVulnerabilityDetailsPage /> }
+          element={ <ShowVulnerabilityDetails /> }
         />
         <Route
           path="/BeSLighthouse/model_report/:modelName"
-          element={ <ShowModelDetailsPage /> }
+          element={ <ShowModelDetails /> }
         />
         <Route
           path="/BeSLighthouse/model_vulnerabilities_detailed/:modelName"
-          element={ <ModelVulnerabilitiesDetailedPage /> }
+          element={ <ModelVulnerabilitiesDetailed /> }
         />
         <Route
           path="/BeSLighthouse/model_fuzzing/:modelName"
-          element={ <FuzzingModelPage /> }
+          element={ <FuzzingModel /> }
         />
       </Routes>
     </ThemeProvider>

src/examples/Button/ThreeWayToggle/index.tsx → src/components/Button/ThreeWayToggle/index.tsx

@@ -1,4 +1,3 @@
-
 import * as React from 'react';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
@@ -10,7 +9,7 @@ import tableIcon from "../../../assets/images/cells.png";
 import arcIcon from "../../../assets/images/arc.png";
 import ArcDiagram from '../../../pages/ModelOfInterest/ArcDiagram';
 
-function switchView(viewValue:any, filteredCveReport: any, filterName: any, handleFilterByName: any) {
+function switchView(viewValue: any, filteredCveReport: any, filterName: any, handleFilterByName: any) {
   switch (viewValue) {
   case "table":
     return (
@@ -37,6 +36,7 @@ function switchView(viewValue:any, filteredCveReport: any, filterName: any, hand
     return null;
   }
 }
+
 export default function ThreeWayToggleButton({ filteredCveReport, filterName, handleFilterByName }: any) {
   const [view, setView] = React.useState('table');
 
@@ -46,7 +46,7 @@ export default function ThreeWayToggleButton({ filteredCveReport, filterName, ha
   ) => {
     setView(newView);
   };
-  
+
   return (
     <>
       <ToggleButtonGroup
@@ -56,9 +56,9 @@ export default function ThreeWayToggleButton({ filteredCveReport, filterName, ha
         aria-label="Platform"
         style={ { float: 'right', paddingTop: "2%", paddingRight: "1%" } }
       >
-        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="table" title='Table view of models'><img style={ { display: "block", width: "17px" } } src={ tableIcon } /></ToggleButton>
-        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="graph" title='Force directed graph that show the models and its dependencies'><img style={ { display: "block", width: "17px" } } src={ graphIcon } /></ToggleButton>
-        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="arc" title='Arc graph that shows the dependencies between models, vulnerabilities and projects'><img style={ { display: "block", width: "17px" } } src={ arcIcon } /></ToggleButton>
+        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="table" title='Table view of models'><img alt='' style={ { display: "block", width: "17px" } } src={ tableIcon } /></ToggleButton>
+        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="graph" title='Force directed graph that show the models and its dependencies'><img alt='' style={ { display: "block", width: "17px" } } src={ graphIcon } /></ToggleButton>
+        <ToggleButton style={ { color: "black", fontWeight: "bold" } } value="arc" title='Arc graph that shows the dependencies between models, vulnerabilities and projects'><img alt='' style={ { display: "block", width: "17px" } } src={ arcIcon } /></ToggleButton>
       </ToggleButtonGroup>
       { switchView(view, filteredCveReport, filterName, handleFilterByName) }
     </>

src/index.tsx

@@ -6,7 +6,7 @@ import App from "./App";
 const container: any = document.getElementById("root");
 
 // Create a root.
- 
+
 const root = ReactDOMClient.createRoot(container);
 
 root.render(

src/pages/BesAssessmentReport/CodeQL/index.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from "react";
 
 import {
@@ -14,7 +13,7 @@ import {
 import {
   applySortFilter,
   getComparator
-} from "../../../layouts/pages/projectOfInterest/ProjectDisplay";
+} from "../../ProjectOfInterest/ProjectDisplay";
 
 const TABLE_HEAD = [
   { id: "descriiption", label: "Description", alignRight: false },
@@ -31,7 +30,7 @@ const TABLE_HEAD = [
 export default function CodeQL({ data }: any) {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(15);
-   
+
   // eslint-disable-next-line no-unused-vars
   const [filterName, setFilterName] = useState("");
 

src/pages/BesAssessmentReport/Fossology/index.tsx

@@ -12,7 +12,7 @@ import {
 import {
   applySortFilter,
   getComparator
-} from "../../../layouts/pages/projectOfInterest/ProjectDisplay";
+} from "../../ProjectOfInterest/ProjectDisplay";
 
 const TABLE_HEAD = [
   { id: "FileName", label: "FileName", alignRight: false },
@@ -29,7 +29,7 @@ const TABLE_HEAD = [
 export default function Fossology({ data }: any) {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(15);
-   
+
   // eslint-disable-next-line no-unused-vars
   const [filterName, setFilterName] = useState("");
 

src/pages/BesAssessmentReport/SBOM/index.tsx → src/pages/BesAssessmentReport/Sbom/index.tsx

@@ -12,7 +12,7 @@ import {
 import {
   applySortFilter,
   getComparator
-} from "../../../layouts/pages/projectOfInterest/ProjectDisplay";
+} from "../../ProjectOfInterest/ProjectDisplay";
 
 const TABLE_HEAD = [
   { id: "Package Name", label: "Package Name", alignRight: false },
@@ -27,13 +27,13 @@ const TABLE_HEAD = [
 export default function Sbom({ data }: any) {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(15);
-   
+
   // eslint-disable-next-line no-unused-vars
   const [filterName, setFilterName] = useState("");
   let sonarqubeData: any;
   if (data?.packages) sonarqubeData = data?.packages;
   else sonarqubeData = [];
-  
+
   const filteredUsers = applySortFilter(
     sonarqubeData,
     getComparator("desc", "name"),

src/pages/BesAssessmentReport/Scorecard/scorecardTable/index.tsx → src/pages/BesAssessmentReport/Scorecard/ScorecardTable/index.tsx

@@ -12,7 +12,7 @@ import {
 import {
   applySortFilter,
   getComparator
-} from "../../../../layouts/pages/projectOfInterest/ProjectDisplay";
+} from "../../../ProjectOfInterest/ProjectDisplay";
 
 const TABLE_HEAD = [
   { id: "name", label: "Name", alignRight: false },
@@ -26,7 +26,7 @@ const TABLE_HEAD = [
 export default function ScorecardTable({ data }: any) {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(15);
-   
+
   // eslint-disable-next-line no-unused-vars
   const [filterName, setFilterName] = useState("");
   const scorecardData: any = data?.checks ?? [];

src/pages/BesAssessmentReport/Sonarqube/index.tsx → src/pages/BesAssessmentReport/SonarQube/index.tsx

@@ -9,7 +9,7 @@ import {
   TablePagination,
   TableRow,
 } from "@mui/material";
-import { applySortFilter, getComparator } from "../../../layouts/pages/projectOfInterest/ProjectDisplay";
+import { applySortFilter, getComparator } from "../../ProjectOfInterest/ProjectDisplay";
 
 const TABLE_HEAD = [
   { id: "Component", label: "Component", alignRight: false },
@@ -20,10 +20,10 @@ const TABLE_HEAD = [
 
 // Fixme: Code refactor
 
-export default function Sonarqube({ data }: any) {
+export default function SonarQube({ data }: any) {
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(15);
-   
+
   // eslint-disable-next-line no-unused-vars
   const [filterName, setFilterName] = useState("");
 

src/pages/BesAssessmentReport/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
- 
+
 import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { assessmentDatastoreURL } from "../../dataStore";
@@ -9,16 +9,16 @@ import {
 } from "../../utils/assessmentReport";
 import { fetchJsonData } from "../BesVersionHistory/AssessmentReport";
 import MKBox from "../../components/MKBox";
-import DefaultNavbar from "../../examples/Navbars/DefaultNavbar";
 import routes from "../../routes";
-import ScorecardTable from "./Scorecard/scorecardTable";
 import CodeQL from "./CodeQL";
-import Sonarqube from "./Sonarqube";
 import Fossology from "./Fossology";
-import Sbom from "./SBOM";
+import Sbom from "./Sbom";
 import Scorecard from "./Scorecard";
 import Grid from "@mui/material/Grid";
 import Card from "@mui/material/Card";
+import DefaultNavbar from "../../components/Navbars/DefaultNavbar";
+import ScorecardTable from "./Scorecard/ScorecardTable";
+import SonarQube from "./SonarQube";
 
 export const spanStyle: any = {
   fontSize: "1rem",
@@ -34,13 +34,13 @@ function displayReport(BeSName: string, besReport: any, report: any): any {
     return <CodeQL data={ report } />;
   }
   if (besReport === "Sonarqube") {
-    return <Sonarqube data={ report } />;
+    return <SonarQube data={ report } />;
   }
   if (besReport === "Fossology") {
     return <Fossology data={ report } />;
   }
   if (besReport === "SBOM") {
-    return <Sbom data={ report }/>;
+    return <Sbom data={ report } />;
   }
 }
 

src/pages/BesVersionHistory/AssessmentAnalytics/index.tsx

@@ -1,26 +1,26 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 /* eslint-disable react-hooks/exhaustive-deps */
- 
+
 import * as React from "react";
 import { useTheme } from "@mui/material/styles";
 import Card from "@mui/material/Card";
 import Grid from "@mui/material/Grid";
-import VulHistory from "../../../examples/Charts/BarChart/VulHistory";
-import { fetchJsonReport } from "../../../utils/fatch_json_report";
+import { fetchJsonReport } from "../../../utils/fatchJsonReport";
 import { assessmentDatastoreURL } from "../../../dataStore";
 import {
   assessmentPath,
   assessmentReport
 } from "../../../utils/assessmentReport";
 import MKTypography from "../../../components/MKTypography";
-import Language from "../../../examples/Charts/PieChart/Languages";
+import VulHistory from "../../../components/Charts/BarChart/VulHistory";
+import Language from "../../../components/Charts/PieChart/Languages";
 
 export const getLinkData = async (link: any, setRiskData: any) => {
   try {
-     
+
     const response = await fetchJsonReport(link);
     try {
-       
+
       const data = JSON.parse(response);
       setRiskData(data);
     } catch (err) {
@@ -35,7 +35,7 @@ export const countSeverity = async (
   vulnerabilityData: any,
   setSeverity: any
 ) => {
-   
+
   if (Object.keys(vulnerabilityData).length !== 0) {
     const supportedSeverityLevels: string[] = [
       "low",
@@ -60,7 +60,7 @@ export const countSeverity = async (
           severityCounts[supportedSeverityLevels[j]]++;
       }
     }
-     
+
     for (const sevStack of Object.keys(severityCounts)) {
       severityForChart.push({
         label: sevStack,
@@ -229,4 +229,5 @@ function AssessmentAnalytics({
 
   );
 }
+
 export default AssessmentAnalytics;