diff --git a/src/assets/theme/components/container.tsx b/src/assets/theme/components/container.tsx index b8018542..b800bdee 100644 --- a/src/assets/theme/components/container.tsx +++ b/src/assets/theme/components/container.tsx @@ -1,7 +1,5 @@ import breakpoints from "../base/breakpoints"; -import pxToRem from "../functions/pxToRem"; - const { values: { sm, md, lg, xl, xxl }, } = breakpoints; @@ -13,8 +11,8 @@ const XL = `@media (min-width: ${xl}px)`; const XXL = `@media (min-width: ${xxl}px)`; const sharedClasses = { - paddingRight: `${pxToRem(24)} !important`, - paddingLeft: `${pxToRem(24)} !important`, + paddingRight: 0, + paddingLeft: 0, marginRight: "auto !important", marginLeft: "auto !important", width: "100% !important", diff --git a/src/assets/theme/components/table/tableCell.tsx b/src/assets/theme/components/table/tableCell.tsx index 75c32624..f54f745e 100644 --- a/src/assets/theme/components/table/tableCell.tsx +++ b/src/assets/theme/components/table/tableCell.tsx @@ -9,8 +9,8 @@ const { light } = colors; export default { styleOverrides: { root: { - padding: `${pxToRem(12)} ${pxToRem(16)}`, - borderBottom: `${borderWidth[1]} solid ${light.main}`, + padding: `${pxToRem(4)} ${pxToRem(10)}`, + borderBottom: `${borderWidth[1]} solid ${light.main}` }, }, }; diff --git a/src/dataStore.ts b/src/dataStore.ts index 32abc3b0..891f30fe 100644 --- a/src/dataStore.ts +++ b/src/dataStore.ts @@ -1,12 +1,12 @@ export const osspoiMaster = - "https://raw.githubusercontent.com/Be-Secure/besecure-osspoi-datastore/main/OSSP-Master.json"; + "https://raw.githubusercontent.com/Be-Secure/besecure-assets-store/main/projects/project-metadata.json"; export const version_details = - "https://raw.githubusercontent.com/Be-Secure/besecure-osspoi-datastore/main/version_details/"; + "https://raw.githubusercontent.com/Be-Secure/besecure-assets-store/main/projects/project-version/"; export const assessment_datastore = "https://raw.githubusercontent.com/Be-Secure/besecure-assessment-datastore/main"; export const vulnerabilityOffInterest = - "https://raw.githubusercontent.com/Be-Secure/besecure-ossvoi-datastore/main/vulnerability-of-interest.json"; + "https://raw.githubusercontent.com/Be-Secure/besecure-assets-store/main/vulnerabilities/vulnerability-metadata.json"; export const modelOfInterestData = - "https://raw.githubusercontent.com/Be-Secure/besecure-osmoi-datastore/main/model_of_interest.json"; + "https://raw.githubusercontent.com/Be-Secure/besecure-assets-store/main/models/model-metadata.json"; export const besecureMlAssessmentDataStore = "https://raw.githubusercontent.com/Be-Secure/besecure-ml-assessment-datastore/main/models"; export const vulnerabilities = "https://raw.githubusercontent.com/Be-Secure/besecure-ml-assessment-datastore/main/models/timeseries-anomaly-detection/vulnerabilities/timeseries-anomaly-detection-vulnerabilities-detailed-report.json"; diff --git a/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx b/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx index a18930b2..81b2c61d 100644 --- a/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx +++ b/src/examples/Navbars/DefaultNavbar/DefaultNavbarDropdown.tsx @@ -61,6 +61,7 @@ function DefaultNavbarDropdown({ textTransform="capitalize" color={light ? "white" : "dark"} sx={{ fontWeight: "100%", ml: 1, mr: 0.25 }} + style={{ fontSize: "0.975rem" }} > {name} diff --git a/src/examples/Navbars/DefaultNavbar/index.tsx b/src/examples/Navbars/DefaultNavbar/index.tsx index e9540f76..756cbb75 100644 --- a/src/examples/Navbars/DefaultNavbar/index.tsx +++ b/src/examples/Navbars/DefaultNavbar/index.tsx @@ -32,7 +32,7 @@ function DefaultNavbar({ light, sticky, relative, - center, + center }: any) { const [dropdown, setDropdown]: any = useState(""); const [dropdownEl, setDropdownEl]: any = useState(""); @@ -89,6 +89,7 @@ function DefaultNavbar({ }} onMouseLeave={() => collapse && setDropdown(null)} light={light} + /> ) ); @@ -163,7 +164,7 @@ function DefaultNavbar({ px={2} sx={({ palette: { grey, dark }, - borders: { borderRadius }, + borders: { borderRadius } }: any) => ({ borderRadius: borderRadius.md, cursor: "pointer", @@ -171,8 +172,8 @@ function DefaultNavbar({ "&:hover": { backgroundColor: grey[200], - color: dark.main, - }, + color: dark.main + } })} > {item.name} @@ -189,7 +190,7 @@ function DefaultNavbar({ top: "50%", left: "-4px", transform: "translateY(-45%)", - height: "90%", + height: "90%" }} /> )} @@ -206,12 +207,12 @@ function DefaultNavbar({ component: MuiLink, href: item.href, target: "_blank", - rel: "noreferrer", + rel: "noreferrer" }; const routeComponent = { component: Link, - to: item.route, + to: item.route }; return ( @@ -230,7 +231,7 @@ function DefaultNavbar({ px={2} sx={({ palette: { grey, dark }, - borders: { borderRadius }, + borders: { borderRadius } }: any) => ({ borderRadius: borderRadius.md, cursor: "pointer", @@ -241,9 +242,9 @@ function DefaultNavbar({ color: dark.main, "& *": { - color: dark.main, - }, - }, + color: dark.main + } + } })} onMouseEnter={({ currentTarget }: any) => { if (item.dropdown) { @@ -280,7 +281,7 @@ function DefaultNavbar({ sx={{ fontWeight: "normal", verticalAlign: "middle", - mr: -0.5, + mr: -0.5 }} > keyboard_arrow_right @@ -309,9 +310,9 @@ function DefaultNavbar({ name: "arrow", enabled: true, options: { - element: arrowRef, - }, - }, + element: arrowRef + } + } ]} onMouseEnter={() => setDropdown(dropdownEl)} onMouseLeave={() => { @@ -322,13 +323,7 @@ function DefaultNavbar({ }} > {({ TransitionProps }) => ( - white.main, - // }} - > + @@ -358,12 +353,12 @@ function DefaultNavbar({ component: MuiLink, href: item.href, target: "_blank", - rel: "noreferrer", + rel: "noreferrer" }; const routeComponent = { component: Link, - to: item.route, + to: item.route }; return ( @@ -382,7 +377,7 @@ function DefaultNavbar({ px={2} sx={({ palette: { grey, dark }, - borders: { borderRadius }, + borders: { borderRadius } }: any) => ({ borderRadius: borderRadius.md, cursor: "pointer", @@ -393,9 +388,9 @@ function DefaultNavbar({ color: dark.main, "& *": { - color: dark.main, - }, - }, + color: dark.main + } + } })} > {item.description ? ( @@ -420,7 +415,7 @@ function DefaultNavbar({ sx={{ fontWeight: "normal", verticalAlign: "middle", - mr: -0.5, + mr: -0.5 }} > keyboard_arrow_right @@ -455,9 +450,7 @@ function DefaultNavbar({ }} > {({ TransitionProps }) => ( - + {renderNestedRoutes} @@ -469,27 +462,29 @@ function DefaultNavbar({ ); return ( - + ({ + margin: 0, backgroundColor: transparent ? transparentColor.main : rgba(white.main, 0.8), - backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`, + backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)` })} > @@ -508,6 +503,7 @@ function DefaultNavbar({ variant="button" fontWeight="bold" color={light ? "white" : "dark"} + style={{ fontSize: "0.975rem" }} > {brand} @@ -520,7 +516,7 @@ function DefaultNavbar({ > {renderNavbarItems} - {mobileNavbar ? "close" : "menu"} - + */} - )} - + */} {dropdownMenu} {nestedDropdownMenu} @@ -557,7 +553,7 @@ DefaultNavbar.defaultProps = { action: false, sticky: false, relative: false, - center: false, + center: false }; export default DefaultNavbar; diff --git a/src/layouts/pages/projectOfInterest/PoiTable/PoiListHead.tsx b/src/layouts/pages/projectOfInterest/PoiTable/PoiListHead.tsx index aa62439c..09f1f253 100644 --- a/src/layouts/pages/projectOfInterest/PoiTable/PoiListHead.tsx +++ b/src/layouts/pages/projectOfInterest/PoiTable/PoiListHead.tsx @@ -31,6 +31,7 @@ UserListHead.propTypes = { numSelected: PropTypes.number, onRequestSort: PropTypes.func, onSelectAllClick: PropTypes.func, + requestFromOtherComponent: PropTypes.bool }; export default function UserListHead({ @@ -38,6 +39,7 @@ export default function UserListHead({ orderBy, headLabel, onRequestSort, + requestFromOtherComponent, }: any) { const createSortHandler = (property: any) => (event: any) => { onRequestSort(event, property); @@ -58,6 +60,7 @@ export default function UserListHead({ active={orderBy === headCell.id} direction={orderBy === headCell.id ? order : "asc"} onClick={createSortHandler(headCell.id)} + style={{position: "relative", minWidth: (requestFromOtherComponent) ? '' : "134px"}} > {headCell.label} {orderBy === headCell.id ? ( diff --git a/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx b/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx index 0c1dfa3f..d9dda6e3 100644 --- a/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx +++ b/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx @@ -60,7 +60,7 @@ export default function ProjectDisplay() { const [filterName, setFilterName] = useState(""); const [order, setOrder] = useState("asc"); const [orderBy, setOrderBy] = useState("id"); - const [rowsPerPage, setRowsPerPage] = useState(5); + const [rowsPerPage, setRowsPerPage] = useState(15); let getUSERLIST = []; if (projectOfInterestData.getPoiData("Project_of_interest")) { getUSERLIST = projectOfInterestData.getPoiData("Project_of_interest"); @@ -218,7 +218,7 @@ export default function ProjectDisplay() { margin: "auto", }, }} - rowsPerPageOptions={[5, 10, 25]} + rowsPerPageOptions={[15, 30, 45]} component="div" count={getUSERLIST.length} rowsPerPage={rowsPerPage} diff --git a/src/pages/BesAssessmentReport/CodeQL/index.tsx b/src/pages/BesAssessmentReport/CodeQL/index.tsx index 62e44608..b95a95e2 100644 --- a/src/pages/BesAssessmentReport/CodeQL/index.tsx +++ b/src/pages/BesAssessmentReport/CodeQL/index.tsx @@ -8,24 +8,28 @@ import { TableHead, TablePagination, TableRow, + TableSortLabel } from "@mui/material"; -import { applySortFilter, getComparator } from "../../../layouts/pages/projectOfInterest/ProjectDisplay"; +import { + applySortFilter, + getComparator +} from "../../../layouts/pages/projectOfInterest/ProjectDisplay"; const TABLE_HEAD = [ { id: "descriiption", label: "Description", alignRight: false }, - { id: "ssl", label: "Security Severity Level", alignRight: false }, + { id: "ssl", label: "Severity", alignRight: false }, { id: "environment", label: "Environment", alignRight: false }, { id: "Message", label: "Message", alignRight: false }, { id: "Path", label: "Path", alignRight: false }, - { id: "Start Line", label: "Start Line", alignRight: false }, - { id: "End Line", label: "End Line", alignRight: false }, + { id: "Start-Line", label: "Start Line", alignRight: false }, + { id: "End-Line", label: "End Line", alignRight: false } ]; // Fixme: Code refactor export default function CodeQL({ data }: any) { const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(5); + const [rowsPerPage, setRowsPerPage] = useState(15); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [filterName, setFilterName] = useState(""); @@ -61,7 +65,12 @@ export default function CodeQL({ data }: any) { key={headCell.id} align={headCell.alignRight ? "right" : "left"} > - {headCell.label} + + {headCell.label} + ))} @@ -105,13 +114,13 @@ export default function CodeQL({ data }: any) { Date:   - + {date} @@ -32,13 +32,13 @@ export default function Scorecard({ Scorecard Version:   - + {version} @@ -46,13 +46,13 @@ export default function Scorecard({ OSSP:   - + {`https://${github}`} @@ -60,13 +60,13 @@ export default function Scorecard({ Commit:   - + {commit} @@ -74,13 +74,13 @@ export default function Scorecard({ Score:   - + {score} diff --git a/src/pages/BesAssessmentReport/Scorecard/scorecardTable/index.tsx b/src/pages/BesAssessmentReport/Scorecard/scorecardTable/index.tsx index 99589866..9b45edec 100644 --- a/src/pages/BesAssessmentReport/Scorecard/scorecardTable/index.tsx +++ b/src/pages/BesAssessmentReport/Scorecard/scorecardTable/index.tsx @@ -22,7 +22,7 @@ const TABLE_HEAD = [ export default function ScorecardTable({ data }: any) { const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(5); + const [rowsPerPage, setRowsPerPage] = useState(15); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [filterName, setFilterName] = useState(""); let scorecardData: any = data?.checks ?? []; @@ -101,7 +101,7 @@ export default function ScorecardTable({ data }: any) { margin: "auto", }, }} - rowsPerPageOptions={[5, 10, 25]} + rowsPerPageOptions={[15, 30, 45]} component="div" count={scorecardData.length} rowsPerPage={rowsPerPage} diff --git a/src/pages/BesAssessmentReport/Sonarqube/index.tsx b/src/pages/BesAssessmentReport/Sonarqube/index.tsx index 63a7de2e..dab5bd2f 100644 --- a/src/pages/BesAssessmentReport/Sonarqube/index.tsx +++ b/src/pages/BesAssessmentReport/Sonarqube/index.tsx @@ -22,7 +22,7 @@ const TABLE_HEAD = [ export default function Sonarqube({ data }: any) { const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(5); + const [rowsPerPage, setRowsPerPage] = useState(15); // eslint-disable-next-line @typescript-eslint/no-unused-vars const [filterName, setFilterName] = useState(""); @@ -104,7 +104,7 @@ export default function Sonarqube({ data }: any) { margin: "auto", }, }} - rowsPerPageOptions={[5, 10, 25]} + rowsPerPageOptions={[15, 30, 45]} component="div" count={sonarqubeData.length} rowsPerPage={rowsPerPage} diff --git a/src/pages/BesVersionHistory/index.tsx b/src/pages/BesVersionHistory/index.tsx index d2d7bf40..43c5c373 100644 --- a/src/pages/BesVersionHistory/index.tsx +++ b/src/pages/BesVersionHistory/index.tsx @@ -94,14 +94,14 @@ function BesVersionHistory() { BeS Tracking ID:   @@ -112,14 +112,14 @@ function BesVersionHistory() { BeS Tech Stack:   @@ -135,14 +135,14 @@ function BesVersionHistory() { Release Date:   @@ -153,14 +153,14 @@ function BesVersionHistory() { Known Vulnerability Count:   @@ -183,14 +183,14 @@ function BesVersionHistory() { pr={2} > Release Date:   @@ -206,14 +206,14 @@ function BesVersionHistory() { pr={2} > Known Vulnerability Count:   @@ -248,7 +248,7 @@ function BesVersionHistory() { @@ -272,14 +272,14 @@ function BesVersionHistory() { Description:   diff --git a/src/pages/ModelOfInterest/ModelDisplay/ModelTable.tsx b/src/pages/ModelOfInterest/ModelDisplay/ModelTable.tsx index fd676805..9950617e 100644 --- a/src/pages/ModelOfInterest/ModelDisplay/ModelTable.tsx +++ b/src/pages/ModelOfInterest/ModelDisplay/ModelTable.tsx @@ -1,13 +1,16 @@ import React, { useState } from "react"; import { + Stack, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, - TableRow + TableRow, + TableSortLabel, + Typography } from "@mui/material"; import { NavLink } from "react-router-dom"; @@ -24,7 +27,7 @@ const TABLE_HEAD = [ export default function ModelTable({ data }: any) { const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(5); + const [rowsPerPage, setRowsPerPage] = useState(15); const filteredModel = data; @@ -54,7 +57,15 @@ export default function ModelTable({ data }: any) { key={headCell.id} align={headCell.alignRight ? "right" : "left"} > - {headCell.label} + + {headCell.label} + ))} @@ -70,7 +81,18 @@ export default function ModelTable({ data }: any) { sx={{ paddingLeft: "2px" }} padding="none" > - {row.type} + + + {row.type} + + {row.name} - {/* */} {row.organization} {row.created_date.value} @@ -107,7 +128,7 @@ export default function ModelTable({ data }: any) { margin: "auto" } }} - rowsPerPageOptions={[5, 10, 25]} + rowsPerPageOptions={[15, 30, 45]} component="div" count={data.length} rowsPerPage={rowsPerPage} diff --git a/src/pages/ModelVulnerabilitiesDetailed/ModelVulnerabilitiesDetailedTable.tsx b/src/pages/ModelVulnerabilitiesDetailed/ModelVulnerabilitiesDetailedTable.tsx index 448cf655..13752dc2 100644 --- a/src/pages/ModelVulnerabilitiesDetailed/ModelVulnerabilitiesDetailedTable.tsx +++ b/src/pages/ModelVulnerabilitiesDetailed/ModelVulnerabilitiesDetailedTable.tsx @@ -1,8 +1,7 @@ import { filter } from "lodash"; import React, { useState } from "react"; import { verifyLink } from "../BesVersionHistory/AssessmentReport"; -import { besecureMlAssessmentDataStore, vulnerabilities } from "../../dataStore"; -import { getComparator } from "../../layouts/pages/projectOfInterest/ProjectDisplay"; +import { besecureMlAssessmentDataStore } from "../../dataStore"; import TableContainer from "@mui/material/TableContainer"; import Table from "@mui/material/Table"; import { @@ -14,47 +13,35 @@ import { } from "@mui/material"; import { useParams } from "react-router-dom"; -function applySortFilter(array: any, comparator: any, query: any) { - const stabilizedThis = array.map((el: any, index: any) => [el, index]); - stabilizedThis.sort((a: any, b: any) => { - const order = comparator(a[0], b[0]); - if (order !== 0) return order; - return a[1] - b[1]; - }); - if (query) { - let search = query.trim(); - return filter(array, (_user: any) => { - if (_user.name.toLowerCase().indexOf(search.toLowerCase()) !== -1) - return true; - }); - } - return stabilizedThis.map((el: any) => el[0]); -} - const TABLE_HEAD = [ - { id: "filename", label: "Filename", alignRight: false }, { id: "tool", label: "Tool", alignRight: false }, { id: "severity", label: "Severity", alignRight: false }, + { id: "vulnerabilities", label: "Vulnerabilities", alignRight: false }, { id: "description", label: "Description", alignRight: false }, - { id: "vulnerabilities", label: "Vulnerabilities", alignRight: false } + { id: "filename", label: "Filename", alignRight: false } ]; const regex = /^(.*?)(?=#).*Severity:(.*?)- (.*)/; -function createRow(row: any) { - const combinedMatch = row["scanning_reports"]["output_log"][0].match(regex); +function createRow(row: any, combinedMatch: any) { return ( <> - {combinedMatch[2]} - {combinedMatch[3]} - {combinedMatch[1]} + + {combinedMatch[2]} + + + {combinedMatch[3]} + + + {row.file_name} + ); } export default function ModelVulnerabilitiesDetailedTable() { const [report, setreport]: any = useState([]); - + let { modelName }: any = useParams(); modelName = modelName.slice(1); React.useEffect(() => { @@ -65,7 +52,7 @@ export default function ModelVulnerabilitiesDetailedTable() { const modelDetails = Object.values(report); const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(5); + const [rowsPerPage, setRowsPerPage] = useState(15); const handleChangePage = ( event: any, @@ -90,7 +77,11 @@ export default function ModelVulnerabilitiesDetailedTable() { {TABLE_HEAD.map((headCell: any) => ( @@ -103,19 +94,21 @@ export default function ModelVulnerabilitiesDetailedTable() { {modelDetails .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map((row: any, index: number) => { + const combinedMatch = + row["scanning_reports"]["output_log"][0].match(regex); return ( - {row.file_name} + {combinedMatch[1]} - + {row["scanning_reports"]["tool"]} - {createRow(row)} + {createRow(row, combinedMatch)} ); })} @@ -130,7 +123,7 @@ export default function ModelVulnerabilitiesDetailedTable() { margin: "auto" } }} - rowsPerPageOptions={[5, 10, 25]} + rowsPerPageOptions={[15, 30, 45]} component="div" count={Object.keys(report).length} rowsPerPage={rowsPerPage} diff --git a/src/pages/ShowModelDetails/AssessmentSummary.tsx b/src/pages/ShowModelDetails/AssessmentSummary.tsx index ca55932d..72dc03d8 100644 --- a/src/pages/ShowModelDetails/AssessmentSummary.tsx +++ b/src/pages/ShowModelDetails/AssessmentSummary.tsx @@ -7,7 +7,6 @@ import { fetchJsonReport } from "../../utils/fatch_json_report"; import { besecureMlAssessmentDataStore } from "../../dataStore"; import DisplayRepository from "./DisplayRepository"; import DisplayModelReport from "./DisplayModelReport"; -import DisplayFileReport from "./DisplayFileReport"; import { useLocation } from "react-router-dom"; export const verifyLink = async (link: any, setLinkStatus: any) => { @@ -32,10 +31,6 @@ function displaymodel(linkStatus: any) { return ; } -function displayFiles(linkStatus: any) { - return ; -} - function displayModelReport(linkStatus: any) { const sizeOfSummary = Object.values(linkStatus).length; if (sizeOfSummary !== 0) { @@ -43,7 +38,6 @@ function displayModelReport(linkStatus: any) { <> {displayRepository(linkStatus)} {displaymodel(linkStatus)} - {displayFiles(linkStatus)} ); } @@ -56,16 +50,14 @@ function AssessmentSummary() { React.useEffect(() => { const link = `${besecureMlAssessmentDataStore}/${selectedMenu.name}/vulnerabilities/${selectedMenu.name}-vulnerabilities-summary-report.json`; verifyLink(link, setLinkStatus); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( - - + + Assessment Summary - diff --git a/src/pages/ShowModelDetails/DisplayModelReport.tsx b/src/pages/ShowModelDetails/DisplayModelReport.tsx index 8f333e95..a6c088c0 100644 --- a/src/pages/ShowModelDetails/DisplayModelReport.tsx +++ b/src/pages/ShowModelDetails/DisplayModelReport.tsx @@ -40,13 +40,13 @@ export default function DisplayModelReport({ data }: any): any { - Models: + Models & Vulnerabilities: - + diff --git a/src/pages/ShowModelDetails/DisplayRepository.tsx b/src/pages/ShowModelDetails/DisplayRepository.tsx index 4540d404..6e892279 100644 --- a/src/pages/ShowModelDetails/DisplayRepository.tsx +++ b/src/pages/ShowModelDetails/DisplayRepository.tsx @@ -13,37 +13,29 @@ export default function DisplayRepository({ data }: any): any { return ( <> {dividerDiv(index)} - + + + + {value} + + - {value} + {value === "Repository URL" ? ( + + Link + + ) : ( + data[value] + )} - - - - - {value === "Repository URL" ? ( - - Link - - ) : ( - data[value] - )} - - - - diff --git a/src/pages/ShowModelDetails/ShowModelContent.tsx b/src/pages/ShowModelDetails/ShowModelContent.tsx index 52a50635..7d195ac9 100644 --- a/src/pages/ShowModelDetails/ShowModelContent.tsx +++ b/src/pages/ShowModelDetails/ShowModelContent.tsx @@ -2,105 +2,120 @@ import Card from "@mui/material/Card"; import * as React from "react"; import { useLocation } from "react-router-dom"; import MKTypography from "../../components/MKTypography"; +import MKBox from "../../components/MKBox"; +import Typography from "@mui/material/Typography"; +import Divider from "@mui/material/Divider"; + +const SkipContent: any = { + analysis: true, + training_emissions: true, + training_time: true, + training_hardware: true, + quality_control: true, + intended_uses: true, + prohibited_uses: true, + monitoring: true, + feedback: true, + type: true +}; + +export const dividerDiv = (index: number) => { + if (index !== 0) + return ( + + ); +}; + +function tableRowForModel(keyName: any, value: any, index: number) { + return ( + <> + {dividerDiv(index)} + + + + + + ); +} function ShowModelContent() { const location = useLocation(); const selectedMenu = location.state.selectedMenu; const key = Object.keys(selectedMenu); + let count = 0; return ( -
-
- - {selectedMenu.name} - -
-
- Upstream: - {selectedMenu.dependencies.join(" | ")} -
-
- Downstream: - -
-
+ + {keyName} + + + + {value} + +
- - {key.map((keyValue) => { - if (keyValue === "type") return <>; - if (keyValue === "created_date" || keyValue === "license") { - return ( - - - - - ); - } - if (keyValue === "dependencies") { - return ( - - - - - ); - } - if (keyValue === "url") { - return ( - - - - - ); - } - return ( + + + {selectedMenu.name} + + + +
-
{keyValue}
- 		-
-

{selectedMenu[keyValue].value}

-
-
-
{keyValue}
- 		-
-

{selectedMenu[keyValue].join(" | ")}

-
-
-
{keyValue}
- 		- -
+ + {key.map((keyValue, index) => { + if (SkipContent[keyValue]) return <>; + if (keyValue === "created_date" || keyValue === "license") { + tableRowForModel( + keyValue, + selectedMenu[keyValue].value, + count++ + ); + } + if (keyValue === "dependencies") { + tableRowForModel( + keyValue, + selectedMenu[keyValue].join(" | "), + count++ + ); + } + if (keyValue === "url") { + return ( + <> + {dividerDiv(index)} - - - ); - })} - -
-
{keyValue}
+ 		+ + {keyValue}{" "} + -
-

{selectedMenu[keyValue]}

-
+ 		+ + + {selectedMenu[keyValue]} + +
- - - + + ); + } + return tableRowForModel( + keyValue, + selectedMenu[keyValue], + count++ + ); + })} + + + ); } diff --git a/src/pages/ShowModelDetails/index.tsx b/src/pages/ShowModelDetails/index.tsx index b492b594..42a9c60d 100644 --- a/src/pages/ShowModelDetails/index.tsx +++ b/src/pages/ShowModelDetails/index.tsx @@ -11,8 +11,7 @@ function ShowModelDetails() { return ( <> - - + @@ -21,7 +20,6 @@ function ShowModelDetails() { - ); diff --git a/src/pages/VulnerabilityOfInterest/VoiTable/VulnerabilityTable.tsx b/src/pages/VulnerabilityOfInterest/VoiTable/VulnerabilityTable.tsx index b701da8c..d73731e9 100644 --- a/src/pages/VulnerabilityOfInterest/VoiTable/VulnerabilityTable.tsx +++ b/src/pages/VulnerabilityOfInterest/VoiTable/VulnerabilityTable.tsx @@ -1,13 +1,16 @@ import React, { useState } from "react"; import { + Stack, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, - TableRow + TableRow, + TableSortLabel, + Typography } from "@mui/material"; const TABLE_HEAD = [ @@ -33,7 +36,7 @@ function packageData(affected: any) { export default function VulnerabilityTable({ data }: any) { const [page, setPage] = useState(0); - const [rowsPerPage, setRowsPerPage] = useState(5); + const [rowsPerPage, setRowsPerPage] = useState(15); const filteredCve = data; @@ -53,7 +56,7 @@ export default function VulnerabilityTable({ data }: any) { return ( <> - + @@ -63,7 +66,12 @@ export default function VulnerabilityTable({ data }: any) { key={headCell.id} align={headCell.alignRight ? "right" : "left"} > - {headCell.label} + + {headCell.label} + ))} @@ -74,16 +82,23 @@ export default function VulnerabilityTable({ data }: any) { .map((row: any, index: number) => { return ( - - + + + {row.cve_id} + + {packageData(row.affected)} @@ -107,7 +122,7 @@ export default function VulnerabilityTable({ data }: any) { margin: "auto" } }} - rowsPerPageOptions={[5, 10, 25]} + rowsPerPageOptions={[15, 30, 45]} component="div" count={data.length} rowsPerPage={rowsPerPage}