Merge pull request #1989 from akto-api-security/hotfix/critical_issue…

…s_badge Add CRITICAL severity handling and update badge styles
akto-api-security · Jan 16, 2025 · fd6a0b3 · fd6a0b3
2 parents 97a68a8 + 0083268
commit fd6a0b3
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 23 deletions.
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css
@@ -201,19 +201,23 @@
 .badge-wrapper-CRITICAL .Polaris-Badge {
     background-color: #E45357 !important;
     color: white !important;
+    font-weight: 500 !important;
 }
 
 .badge-wrapper-HIGH .Polaris-Badge {
     background-color: #EF864C !important;
     color: white !important;
+    font-weight: 500 !important;
 }
 
 .badge-wrapper-MEDIUM .Polaris-Badge {
     background-color: #F6C564 !important;
     color: white !important;
+    font-weight: 500 !important;
 }
 
 .badge-wrapper-LOW .Polaris-Badge {
     background-color: #6FD1A6;
     color: white !important;
+    font-weight: 500 !important;
 }
diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard/HomeDashboard.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard/HomeDashboard.jsx
@@ -114,6 +114,7 @@ function HomeDashboard() {
                 finalResult.push({
                     "testName": x["name"],
                     "time": func.prettifyEpoch(x["run_time_epoch"]),
+                    "criticalCount": severityMap["critical"] ? severityMap["critical"] : "0",
                     "highCount": severityMap["high"] ? severityMap["high"] : "0",
                     "mediumCount": severityMap["medium"] ? severityMap["medium"] : "0",
                     "lowCount": severityMap["low"] ? severityMap["low"] : "0",
@@ -450,7 +451,7 @@ function HomeDashboard() {
     ) : null
 
     function buildSeverityMap(severityInfo) {
-        const countMap = { HIGH: 0, MEDIUM: 0, LOW: 0 }
+        const countMap = { CRITICAL: 0, HIGH: 0, MEDIUM: 0, LOW: 0 }
 
         if (severityInfo && severityInfo != undefined && severityInfo != null && severityInfo instanceof Object) {
             for (const apiCollectionId in severityInfo) {
@@ -462,6 +463,11 @@ function HomeDashboard() {
         }
 
         const result = {
+            "Critical": {
+                "text": countMap.CRITICAL || 0,
+                "color": "#E45357",
+                "filterKey": "Critical"
+            },
             "High": {
                 "text": countMap.HIGH || 0,
                 "color": "#EF864C",

diff --git a/...web/polaris_web/web/src/apps/dashboard/pages/dashboard/new_components/TestSummaryCard.jsx b/...web/polaris_web/web/src/apps/dashboard/pages/dashboard/new_components/TestSummaryCard.jsx
@@ -3,6 +3,13 @@ import React from 'react'
 import TooltipText from '../../../components/shared/TooltipText'
 
 function TestSummaryCard({ summaryItem }) {
+    const severityLevels = [
+        { level: 'CRITICAL', count: summaryItem.criticalCount },
+        { level: 'HIGH', count: summaryItem.highCount },
+        { level: 'MEDIUM', count: summaryItem.mediumCount },
+        { level: 'LOW', count: summaryItem.lowCount },
+    ]
+
     return (
         <LegacyCard>
             <div style={{cursor: 'pointer'}} onClick={() => window.open(summaryItem.link, "_blank")}>
@@ -18,9 +25,11 @@ function TestSummaryCard({ summaryItem }) {
                             <VerticalStack gap={2}>
                                 <Text color='subdued' variant='headingXs' fontWeight='semibold'>Issues Found</Text>
                                 <HorizontalStack gap={2}>
-                                    <Badge size="small" status="critical">{summaryItem.highCount}</Badge>
-                                    <Badge size="small" status="warning">{summaryItem.mediumCount}</Badge>
-                                    <Badge size="small" status="info">{summaryItem.lowCount}</Badge>
+                                    {severityLevels.map(({ level, count }) => (
+                                        <div key={level} className={`badge-wrapper-${level}`}>
+                                            <Badge size="small">{count}</Badge>
+                                        </div>
+                                    ))}
                                 </HorizontalStack>
                             </VerticalStack>
                             <VerticalStack gap={2}>

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/issues/IssuesPage/IssuesPage.jsx b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/issues/IssuesPage/IssuesPage.jsx
@@ -52,6 +52,7 @@ let filtersOptions = [
         label: 'Severity',
         title: 'Severity',
         choices: [
+            {label: 'Critical', value: 'CRITICAL'},
             { label: "High", value: "HIGH" }, 
             { label: "Medium", value: "MEDIUM" },
             { label: "Low", value: "LOW" }

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/transform.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/observe/transform.js
@@ -398,12 +398,15 @@ const transform = {
     },
 
     getIssuesList(severityInfo){
+        const sortedSeverityInfo = func.sortObjectBySeverity(severityInfo)
         return (
             <HorizontalStack gap="1" wrap={false}>
                 {
-                    Object.keys(severityInfo).length > 0 ? Object.keys(severityInfo).map((key,index)=>{
+                    Object.keys(sortedSeverityInfo).length > 0 ? Object.keys(sortedSeverityInfo).map((key,index)=>{
                         return(
-                            <Badge size="small" status={this.getColor(key)} key={index}>{severityInfo[key].toString()}</Badge>
+                            <div className={`badge-wrapper-${key}`}>
+                                <Badge size="small" key={index}>{sortedSeverityInfo[key].toString()}</Badge>
+                            </div>
                         )
                     }):
                     <Text fontWeight="regular" variant="bodyMd" color="subdued">-</Text>
@@ -413,11 +416,12 @@ const transform = {
     },
 
     getIssuesListText(severityInfo){
+        const sortedSeverityInfo = func.sortObjectBySeverity(severityInfo)
         let val = "-"
-        if(Object.keys(severityInfo).length > 0){
+        if(Object.keys(sortedSeverityInfo).length > 0){
             val = ""
-            Object.keys(severityInfo).map((key) => {
-                val += (key + ": " + severityInfo[key] + " ")
+            Object.keys(sortedSeverityInfo).map((key) => {
+                val += (key + ": " + sortedSeverityInfo[key] + " ")
             })
         } 
         return val

diff --git a/...b/polaris_web/web/src/apps/dashboard/pages/testing/SingleTestRunPage/SingleTestRunPage.js b/...b/polaris_web/web/src/apps/dashboard/pages/testing/SingleTestRunPage/SingleTestRunPage.js
@@ -67,6 +67,7 @@ let filters = [
     label: 'Severity',
     title: 'Severity',
     choices: [
+      {label: 'Critical', value: 'CRITICAL'},
       {label: 'High', value: 'HIGH'},
       {label: 'Medium', value: 'MEDIUM'},
       {label: 'Low', value: 'LOW'}
@@ -701,11 +702,7 @@ const editableConfigsComp = (
               const tempSev = sev.length > 1 ? sev[1].toUpperCase() : ''
               return(
                 <div className={`badge-wrapper-${tempSev}`}>
-                    <Badge key={item}>
-                      <Text fontWeight="regular">
-                        {item}
-                      </Text>
-                    </Badge>
+                    <Badge key={item}>{item}</Badge>
                 </div>
               )
             }

diff --git a/...shboard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/TestRunsPage.js b/...shboard/web/polaris_web/web/src/apps/dashboard/pages/testing/TestRunsPage/TestRunsPage.js
@@ -149,9 +149,10 @@ const tableCountObj = func.getTabsCount(definedTableTabs, {}, initialCount)
 const tableTabs = func.getTableTabsContent(definedTableTabs, tableCountObj, setCurrentTab, currentTab, tabsInfo)
 
 const [severityCountMap, setSeverityCountMap] = useState({
-  HIGH: {text : 0, color: func.getColorForCharts("HIGH")},
-  MEDIUM: {text : 0, color: func.getColorForCharts("MEDIUM")},
-  LOW: {text : 0, color: func.getColorForCharts("LOW")},
+  CRITICAL: {text : 0, color: func.getHexColorForSeverity("CRITICAL")},
+  HIGH: {text : 0, color: func.getHexColorForSeverity("HIGH")},
+  MEDIUM: {text : 0, color: func.getHexColorForSeverity("MEDIUM")},
+  LOW: {text : 0, color: func.getHexColorForSeverity("LOW")},
 })
 const [subCategoryInfo, setSubCategoryInfo] = useState({})
 const [collapsible, setCollapsible] = useState(true)
@@ -295,7 +296,12 @@ const SummaryCardComponent = () =>{
             <Box paddingBlockStart={3}><Divider/></Box>
             <HorizontalGrid columns={2} gap={6}>
               <ChartypeComponent navUrl={"/dashboard/issues/"} data={subCategoryInfo} title={"Categories"} isNormal={true} boxHeight={'250px'}/>
-              <ChartypeComponent data={severityCountMap} reverse={true} title={"Severity"} charTitle={totalVulnerabilities} chartSubtitle={"Total Vulnerabilities"}/>
+              {/* <ChartypeComponent data={severityCountMap} reverse={true} title={"Severity"} charTitle={totalVulnerabilities} chartSubtitle={"Total Vulnerabilities"}/> */}
+              <ChartypeComponent
+                  data={severityCountMap}
+                  navUrl={"/dashboard/issues/"} title={"Severity"} isNormal={true} boxHeight={'250px'} dataTableWidth="250px" boxPadding={8}
+                  pieInnerSize="50%"
+              />
             </HorizontalGrid>
 
           </LegacyCard.Subsection>

diff --git a/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/transform.js b/apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/transform.js
@@ -710,6 +710,7 @@ getInfoSectionsHeaders(){
 convertSubIntoSubcategory(resp){
   let obj = {}
   let countObj = {
+    CRITICAL: 0,
     HIGH: 0,
     MEDIUM: 0,
     LOW: 0,

diff --git a/apps/dashboard/web/polaris_web/web/src/util/func.js b/apps/dashboard/web/polaris_web/web/src/util/func.js
@@ -236,12 +236,24 @@ prettifyEpoch(epoch) {
     }
     return result;
   },
+  sortObjectBySeverity(obj) {
+    const severityOrder = this.getAktoSeverities()
+
+    const sortedEntries = Object.entries(obj).sort(
+        ([keyA], [keyB]) => severityOrder.indexOf(keyA) - severityOrder.indexOf(keyB)
+    )
+
+    return Object.fromEntries(sortedEntries)
+  },
   getSeverityStatus(countIssues) {
     if(countIssues==null || countIssues==undefined){
       return [];
     }
-    return Object.keys(countIssues).filter((key) => {
-      return (countIssues[key] > 0)
+
+    const sortedCountIssues = this.sortObjectBySeverity(countIssues)
+
+    return Object.keys(sortedCountIssues).filter((key) => {
+      return (sortedCountIssues[key] > 0)
     })
   },
   getTestingRunIconObj(state) {
@@ -1320,12 +1332,14 @@ mapCollectionIdToHostName(apiCollections){
   },
   getHexColorForSeverity(key){
     switch(key){
+      case "CRITICAL":
+        return "#E45357"
       case "HIGH":
-        return "#D72C0D"
+        return "#EF864C"
       case "MEDIUM":
-        return "#FFD79D"
+        return "#F6C564"
       case "LOW":
-        return "#2C6ECB"
+        return "#6FD1A6"
       default:
         return "#2C6ECB"
     }