From d903d16fdfb8c9234fff6c7e253bcd5ca7175c01 Mon Sep 17 00:00:00 2001 From: Sudhir Verma Date: Fri, 9 Feb 2024 16:44:50 +0530 Subject: [PATCH] Added filter for MOI (#583) --- src/assets/theme/components/tabs/index.tsx | 2 +- src/examples/Navbars/DefaultNavbar/index.tsx | 2 +- .../ProjectDisplay/index.tsx | 1 + .../AssessmentReport/FetchSastReport.tsx | 1 - src/pages/ModelOfInterest/FilterMoi.tsx | 41 ++++++++++ .../ModelOfInterest/ModelDisplay/index.tsx | 57 +++++++++++-- src/pages/ModelOfInterest/TabForMoi.tsx | 33 ++++++++ .../ModelOfInterest/filter/ModelType.tsx | 71 ++++++++++++++++ .../ModelOfInterest/filter/references.ts | 15 ++++ .../ModelOfInterest/filter/riskAnalysis.tsx | 81 +++++++++++++++++++ src/pages/ModelOfInterest/index.tsx | 13 ++- src/pages/ProjectOfInterest/FilterPoi.tsx | 2 - .../filter/BeS-TechnologyStack.tsx | 2 +- .../ProjectOfInterest/filter/references.ts | 2 +- 14 files changed, 308 insertions(+), 15 deletions(-) create mode 100644 src/pages/ModelOfInterest/FilterMoi.tsx create mode 100644 src/pages/ModelOfInterest/TabForMoi.tsx create mode 100644 src/pages/ModelOfInterest/filter/ModelType.tsx create mode 100644 src/pages/ModelOfInterest/filter/references.ts create mode 100644 src/pages/ModelOfInterest/filter/riskAnalysis.tsx diff --git a/src/assets/theme/components/tabs/index.tsx b/src/assets/theme/components/tabs/index.tsx index c90a8f97..21943932 100644 --- a/src/assets/theme/components/tabs/index.tsx +++ b/src/assets/theme/components/tabs/index.tsx @@ -21,7 +21,7 @@ export default { flexContainer: { height: "100%", position: "relative", - zIndex: 10, + zIndex: 1, }, fixed: { diff --git a/src/examples/Navbars/DefaultNavbar/index.tsx b/src/examples/Navbars/DefaultNavbar/index.tsx index 1159fc75..98e592be 100644 --- a/src/examples/Navbars/DefaultNavbar/index.tsx +++ b/src/examples/Navbars/DefaultNavbar/index.tsx @@ -552,7 +552,7 @@ function DefaultNavbar({ display={{ xs: "inline-block", lg: "none" }} lineHeight={0} py={1.5} - pl={1.5} + pl={0} color={transparent ? "white" : "inherit"} sx={{ cursor: "pointer", position: "absolute" }} onClick={openMobileNavbar} diff --git a/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx b/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx index f10b147b..c7216208 100644 --- a/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx +++ b/src/layouts/pages/projectOfInterest/ProjectDisplay/index.tsx @@ -148,6 +148,7 @@ export default function ProjectDisplay({ selectedFilter }: any) { if (Object.values(filterData).length !== 0) { getUSERLIST = filterDataBasedOnUserSelecrtionOnTag(filterData, getUSERLIST); } + const handleFilterByName: any = (event: any) => { setPage(0); setFilterName(event.target.value); diff --git a/src/pages/BesVersionHistory/AssessmentReport/FetchSastReport.tsx b/src/pages/BesVersionHistory/AssessmentReport/FetchSastReport.tsx index 6a7a82c6..fe577bc1 100644 --- a/src/pages/BesVersionHistory/AssessmentReport/FetchSastReport.tsx +++ b/src/pages/BesVersionHistory/AssessmentReport/FetchSastReport.tsx @@ -8,7 +8,6 @@ const FetchSAST = ({ cqData, sqData }: any): any => { let medium: number = 0; let low: number = 0; let sqissueslen: number = 0; - // debugger if (sqData && Object.values(sqData).length !== 0) { sqissueslen = sqData.length; } diff --git a/src/pages/ModelOfInterest/FilterMoi.tsx b/src/pages/ModelOfInterest/FilterMoi.tsx new file mode 100644 index 00000000..75d788a7 --- /dev/null +++ b/src/pages/ModelOfInterest/FilterMoi.tsx @@ -0,0 +1,41 @@ +import * as React from "react"; +import Box from "@mui/material/Box"; +import Tabs, { tabsClasses } from "@mui/material/Tabs"; +import { TabForMoi } from "./TabForMoi"; + +export default function ScrollableTabsButtonVisibleML({ + filter, + setFilter +}: any) { + const [value, setValue] = React.useState(0); + const handleChange = (event: React.SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + return ( + + + + + + ); +} diff --git a/src/pages/ModelOfInterest/ModelDisplay/index.tsx b/src/pages/ModelOfInterest/ModelDisplay/index.tsx index 9895139d..0c349ff5 100644 --- a/src/pages/ModelOfInterest/ModelDisplay/index.tsx +++ b/src/pages/ModelOfInterest/ModelDisplay/index.tsx @@ -4,6 +4,7 @@ import { modelOfInterestData } from "../../../dataStore"; import { getComparator } from "../../../layouts/pages/projectOfInterest/ProjectDisplay"; import { fetchJsonData } from "../../BesVersionHistory/AssessmentReport"; import ThreeWayToggleButton from "../../../examples/Button/ThreeWayToggle"; +import { modelType, filterCheck, riskAnalysis } from "../filter/references"; function applySortFilter(array: any, comparator: any, query: any) { const stabilizedThis = array.map((el: any, index: any) => [el, index]); @@ -22,18 +23,62 @@ function applySortFilter(array: any, comparator: any, query: any) { return stabilizedThis.map((el: any) => el[0]); } -export default function ModelDisplay() { - const [filterName, setFilterName] = useState(""); - const handleFilterByName = (event: any) => { - setFilterName(event.target.value); - }; +function filterDataBasedOnUserSelecrtionOnModelType( + modelType: string, + getModelLIST: any[] +): any { + const filteredArray = getModelLIST.filter((item) => + item.type.includes(modelType) + ); + return filteredArray; +} + +function filterDataBasedOnUserSelecrtionOnRiskriskAnalysis( + riskriskAnalysis: string, + getModelLIST: any[] +): any { + if (riskriskAnalysis === "Unanalyzed") { + const filteredArray = getModelLIST.filter((item) => + item.quality_control.length === 0 + ); + return filteredArray; + } + const filteredArray = getModelLIST.filter((item) => + item.quality_control.includes(riskriskAnalysis) + ); + return filteredArray; +} +export default function ModelDisplay({ selectedFilter }: any) { + const [filterName, setFilterName] = useState(""); const [report, setreport]: any = useState([]); React.useEffect(() => { fetchJsonData(modelOfInterestData, setreport); }, []); + + let getModelLIST: any = report; + if (selectedFilter?.ModelType && !filterCheck[selectedFilter?.ModelType]) { + getModelLIST = filterDataBasedOnUserSelecrtionOnModelType( + modelType[selectedFilter?.ModelType], + getModelLIST + ); + } + if ( + selectedFilter?.RiskAnalysis && + !filterCheck[selectedFilter?.RiskAnalysis] + ) { + getModelLIST = filterDataBasedOnUserSelecrtionOnRiskriskAnalysis( + riskAnalysis[selectedFilter?.RiskAnalysis], + getModelLIST + ); + } + + const handleFilterByName = (event: any) => { + setFilterName(event.target.value); + }; + const filteredCveReport = applySortFilter( - report, + getModelLIST, getComparator("asc", "id"), filterName ); diff --git a/src/pages/ModelOfInterest/TabForMoi.tsx b/src/pages/ModelOfInterest/TabForMoi.tsx new file mode 100644 index 00000000..e2deb23a --- /dev/null +++ b/src/pages/ModelOfInterest/TabForMoi.tsx @@ -0,0 +1,33 @@ +import * as React from "react"; +import Tab from "@mui/material/Tab"; +import { SecurityDomain } from "./filter/riskAnalysis"; +import { ModelType } from "./filter/ModelType"; + +export function TabForMoi({ filter, setFilter }: any) { + return ( + <> + } + /> + } + /> + + ); +} diff --git a/src/pages/ModelOfInterest/filter/ModelType.tsx b/src/pages/ModelOfInterest/filter/ModelType.tsx new file mode 100644 index 00000000..d88bcbf8 --- /dev/null +++ b/src/pages/ModelOfInterest/filter/ModelType.tsx @@ -0,0 +1,71 @@ +import * as React from "react"; +import FormControl from "@mui/material/FormControl"; +import MenuItem from "@mui/material/MenuItem"; +import OutlinedInput from "@mui/material/OutlinedInput"; +import Select, { SelectChangeEvent } from "@mui/material/Select"; +import { Theme, useTheme } from "@mui/material/styles"; + +const names = [ + "Classic", + "LLM" +]; + +function getStyles(name: string, personName: readonly string[], theme: Theme) { + return { + fontWeight: + personName.indexOf(name) === -1 + ? theme.typography.fontWeightRegular + : theme.typography.fontWeightMedium + }; +} + +export function ModelType({ filter, setFilter }: any) { + const theme = useTheme(); + const [personName, setPersonName] = React.useState([]); + const handleChange1 = (event: SelectChangeEvent) => { + const { + target: { value } + } = event; + setPersonName( + // On autofill we get a stringified value. + typeof value === "string" ? value.split(",") : value + ); + }; + if (personName?.[0] !== filter.ModelType) { + filter.ModelType = personName?.[0]; + setFilter({ ...filter }); + } + return ( +
+ + + +
+ ); +} diff --git a/src/pages/ModelOfInterest/filter/references.ts b/src/pages/ModelOfInterest/filter/references.ts new file mode 100644 index 00000000..8ebe8f54 --- /dev/null +++ b/src/pages/ModelOfInterest/filter/references.ts @@ -0,0 +1,15 @@ +export const filterCheck = { + "Model Type": true, + "Risk Analysis": true +}; + +export const riskAnalysis = { + "SAST": "SAST", + "Fuzz Test": "Fuzz Test", + "Unanalyzed": "Unanalyzed" +}; + +export const modelType = { + "Classic": "Classic", + "LLM": "LLM" +}; diff --git a/src/pages/ModelOfInterest/filter/riskAnalysis.tsx b/src/pages/ModelOfInterest/filter/riskAnalysis.tsx new file mode 100644 index 00000000..c1cff812 --- /dev/null +++ b/src/pages/ModelOfInterest/filter/riskAnalysis.tsx @@ -0,0 +1,81 @@ +import * as React from "react"; +import FormControl from "@mui/material/FormControl"; +import MenuItem from "@mui/material/MenuItem"; +import OutlinedInput from "@mui/material/OutlinedInput"; +import Select, { SelectChangeEvent } from "@mui/material/Select"; +import { Theme, useTheme } from "@mui/material/styles"; +// import { selectedFilterData } from "./mapFilterData"; + +const names = [ + "SAST", + "Fuzz Test", + "Unanalyzed" +]; + +function getStyles(name: string, personName: readonly string[], theme: Theme) { + return { + fontWeight: + personName.indexOf(name) === -1 + ? theme.typography.fontWeightRegular + : theme.typography.fontWeightMedium + }; +} + +export function SecurityDomain({ filter, setFilter }: any) { + const theme = useTheme(); + const [personName, setPersonName] = React.useState([]); + const handleChange1 = (event: SelectChangeEvent) => { + const { + target: { value } + } = event; + setPersonName( + // On autofill we get a stringified value. + typeof value === "string" ? value.split(",") : value + ); + }; + if (personName?.[0] !== filter.RiskAnalysis) { + filter.RiskAnalysis = personName?.[0]; + setFilter({ ...filter }); + } + return ( +
+ + + +
+ ); +} diff --git a/src/pages/ModelOfInterest/index.tsx b/src/pages/ModelOfInterest/index.tsx index 2f003513..88d845de 100644 --- a/src/pages/ModelOfInterest/index.tsx +++ b/src/pages/ModelOfInterest/index.tsx @@ -14,6 +14,7 @@ import ProjectCount from "../ProjectOfInterest/ProjectCount"; import Language from "../../examples/Charts/PieChart/Languages"; import theme from "../../assets/theme"; import { fetchJsonReport } from "../../utils/fatch_json_report"; +import ScrollableTabsButtonVisibleML from "./FilterMoi"; const fetchModelData = async () => { const moidata: any = JSON.parse(await fetchJsonReport(modelOfInterestData)); @@ -74,10 +75,14 @@ function ModelOfInterest() { const [modelType, setModelType]: any = useState([]); const [riskAnalysis, setRiskAnalysis]: any = useState([]); + const [filterData, setFilterData]: any = React.useState({ + ModelType: "", + RiskAnalysis: "" + }); + React.useEffect(() => { prepPieChartData(setModelType, setRiskAnalysis, setReport); }, []); - return ( <> @@ -151,12 +156,16 @@ function ModelOfInterest() { + - + diff --git a/src/pages/ProjectOfInterest/FilterPoi.tsx b/src/pages/ProjectOfInterest/FilterPoi.tsx index 1db8658a..3ba9ded8 100644 --- a/src/pages/ProjectOfInterest/FilterPoi.tsx +++ b/src/pages/ProjectOfInterest/FilterPoi.tsx @@ -1,8 +1,6 @@ import * as React from "react"; import Box from "@mui/material/Box"; import Tabs, { tabsClasses } from "@mui/material/Tabs"; -import Tab from "@mui/material/Tab"; -import { filterCheck } from "./filter/references"; import { TabForPoi } from "./TabForPoi"; export default function ScrollableTabsButtonVisible({ diff --git a/src/pages/ProjectOfInterest/filter/BeS-TechnologyStack.tsx b/src/pages/ProjectOfInterest/filter/BeS-TechnologyStack.tsx index 49fc7bdc..d045e2fe 100644 --- a/src/pages/ProjectOfInterest/filter/BeS-TechnologyStack.tsx +++ b/src/pages/ProjectOfInterest/filter/BeS-TechnologyStack.tsx @@ -9,7 +9,7 @@ const names = [ "DevOPS and Infrastructure Tool (DO)", "Language & Framework (L&F)", "Application (A)", - "Distributed Application (DA)", + "Distributed & Decentralized Application (DA)", "Open Source Security Tool (S)" ]; diff --git a/src/pages/ProjectOfInterest/filter/references.ts b/src/pages/ProjectOfInterest/filter/references.ts index f4690117..13d73a4c 100644 --- a/src/pages/ProjectOfInterest/filter/references.ts +++ b/src/pages/ProjectOfInterest/filter/references.ts @@ -12,7 +12,7 @@ export const tecStack = { "DevOPS and Infrastructure Tool (DO)": "DO", "Language & Framework (L&F)": "L&F", "Application (A)": "A", - "Distributed Application (DA)": "DA", + "Distributed & Decentralized Application (DA)": "DA", "Open Source Security Tool (S)": "S" };