Merge pull request #1987 from akto-api-security/feature/critical_styling

Changed severity badge colors

Author: Ark2307

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/dashboard.css

@@ -196,4 +196,24 @@
     background: white;
     margin-top: -20px;
     padding-block: 10px;
+}
+
+.badge-wrapper-CRITICAL .Polaris-Badge {
+    background-color: #E45357 !important;
+    color: white !important;
+}
+
+.badge-wrapper-HIGH .Polaris-Badge {
+    background-color: #EF864C !important;
+    color: white !important;
+}
+
+.badge-wrapper-MEDIUM .Polaris-Badge {
+    background-color: #F6C564 !important;
+    color: white !important;
+}
+
+.badge-wrapper-LOW .Polaris-Badge {
+    background-color: #6FD1A6;
+    color: white !important;
 }

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/issues/IssuesPage/style.css

@@ -14,24 +14,4 @@
 
 .custom-tag-false p {
     color: #008060;
-}
-
-.badge-wrapper-CRITICAL .Polaris-Badge {
-    background-color: #E45357 !important;
-    color: white !important;
-}
-
-.badge-wrapper-HIGH .Polaris-Badge {
-    background-color: #EF864C !important;
-    color: white !important;
-}
-
-.badge-wrapper-MEDIUM .Polaris-Badge {
-    background-color: #F6C564 !important;
-    color: white !important;
-}
-
-.badge-wrapper-LOW .Polaris-Badge {
-    background-color: #6FD1A6;
-    color: white !important;
 }

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/SingleTestRunPage/SingleTestRunPage.js

@@ -200,6 +200,7 @@ function SingleTestRunPage() {
       let tmp = {...summary};
       if(tmp === null || tmp?.countIssues === null || tmp?.countIssues === undefined){
         tmp.countIssues = {
+          "CRITICAL": 0,
           "HIGH": 0,
           "MEDIUM": 0,
           "LOW": 0
@@ -695,12 +696,20 @@ const editableConfigsComp = (
           {
             selectedTestRun?.severity && 
             selectedTestRun.severity
-            .map((item) =>
-            <Badge key={item} status={func.getTestResultStatus(item)}>
-              <Text fontWeight="regular">
-                {item}
-              </Text>
-            </Badge>
+            .map((item) =>{
+              const sev = item.split(' ')
+              const tempSev = sev.length > 1 ? sev[1].toUpperCase() : ''
+              return(
+                <div className={`badge-wrapper-${tempSev}`}>
+                    <Badge key={item}>
+                      <Text fontWeight="regular">
+                        {item}
+                      </Text>
+                    </Badge>
+                </div>
+              )
+            }
+            
             )}
             <Button plain monochrome onClick={() => setUpdateTable(Date.now().toString())}><Tooltip content="Refresh page" dismissOnMouseOut> <Icon source={RefreshMajor} /></Tooltip></Button>
         </HorizontalStack>

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/testing/transform.js

@@ -216,6 +216,7 @@ const transform = {
     },
     prepareCountIssues : (data) => {
       let obj={
+        'Critical': (data && data['CRITICAL']) ? data['CRITICAL'] : 0,
         'High': (data && data['HIGH']) ? data['HIGH'] : 0,
         'Medium':(data && data['MEDIUM']) ? data['MEDIUM'] : 0,
         'Low': (data && data['LOW']) ? data['LOW'] : 0
@@ -299,7 +300,7 @@ const transform = {
         const prettifiedTest={
           ...obj,
           testName: transform.prettifyTestName(data.name || "Test", iconObj.icon,iconObj.color, iconObj.tooltipContent),
-          severity: observeFunc.getIssuesList(transform.filterObjectByValueGreaterThanZero(testingRunResultSummary.countIssues || {"HIGH" : 0, "MEDIUM": 0, "LOW": 0}))
+          severity: observeFunc.getIssuesList(transform.filterObjectByValueGreaterThanZero(testingRunResultSummary.countIssues || {"CRITICAL": 0, "HIGH" : 0, "MEDIUM": 0, "LOW": 0}))
         }
         return prettifiedTest
       }else{
@@ -868,7 +869,9 @@ getPrettifiedTestRunResults(testRunResults){
     let prettifiedObj = {
       ...obj,
       nameComp: <div data-testid={obj.name}><Box maxWidth="250px"><TooltipText tooltip={obj.name} text={obj.name} textProps={{fontWeight: 'medium'}}/></Box></div>,
-      severityComp: obj?.vulnerable === true ? <Badge size="small" status={func.getTestResultStatus(obj?.severity[0])}>{obj?.severity[0]}</Badge> : <Text>-</Text>,
+      severityComp: obj?.vulnerable === true ? <div className={`badge-wrapper-${obj?.severity[0].toUpperCase()}`}>
+      <Badge size="small" status={func.getTestResultStatus(obj?.severity[0])}>{obj?.severity[0]}</Badge>
+  </div>: <Text>-</Text>,
       cweDisplayComp: obj?.cweDisplay?.length > 0 ? <HorizontalStack gap={1} wrap={false}>
         {obj.cweDisplay.map((ele,index)=>{
           return(

apps/dashboard/web/polaris_web/web/src/apps/dashboard/pages/transform.js

@@ -218,7 +218,7 @@ const dashboardFunc = {
         }
     },
     sortAndFilterAlerts(alerts) {
-        const severityOrder = { 'HIGH': 3, 'MEDIUM': 2, 'LOW': 1 };
+        const severityOrder = { 'CRITICAL': 4, 'HIGH': 3, 'MEDIUM': 2, 'LOW': 1 };
         const dismissLimit =  60 * 60;
         const currentTime = func.timeNow()