Match colors related to severity levels on the vulnerabilities detect…

…ion dashboard (#6793) * fix(vulnerability): match colors related to severity levels on the dashboard * chore: add pull request entry to the changelog
wazuh · Jun 26, 2024 · 39e534b · 39e534b
1 parent 9c43088
commit 39e534b
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 - Removed the unexpected `delay` parameter on the server API requests [#6778](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6778)
 - Fixed home KPI links with custom or index pattern whose title is different to the id [#6777](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6777)
+- Fixed colors related to vulnerability severity levels on Vulnerability Detection dashboard [#6793](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6793)
 
 ## Wazuh v4.8.0 - OpenSearch Dashboards 2.10.0 - Revision 12
 

diff --git a/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx b/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard.tsx
@@ -114,7 +114,7 @@ const DashboardVulsComponent: React.FC = () => {
             <DiscoverNoResults />
           ) : null}
           {!isLoading && !isSearching && results?.hits?.total > 0 ? (
-            <div className='vulnerability-dashboard-responsive'>
+            <div className='vulnerability-dashboard-responsive vulnerability-dashboard-metrics'>
               <DashboardByRenderer
                 input={{
                   viewMode: ViewMode.VIEW,

diff --git a/...s/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels.ts b/...s/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels.ts
@@ -350,6 +350,19 @@ const getVisStateAccumulationMostDetectedVulnerabilities = (
         color: '#E7664C',
       },
     },
+    uiState: {
+      vis: {
+        /* These colors should match the specified on the metric visualizations
+        public/components/overview/vulnerabilities/dashboards/overview/vulnerability_detector_filters.scss
+        */
+        colors: {
+          Critical: '#CC5642',
+          High: '#F5A700',
+          Medium: '#6092C0',
+          Low: '#209280',
+        },
+      },
+    },
     data: {
       searchSource: {
         query: {

diff --git a/...n/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels_kpis.ts b/...n/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels_kpis.ts
@@ -98,7 +98,7 @@ const getVisStateSeverityHigh = (indexPatternId: string) => {
       metric: {
         percentageMode: false,
         useRanges: false,
-        colorSchema: 'Blues',
+        colorSchema: 'Yellow to Red',
         metricColorMode: 'Labels',
         colorsRange: [
           {
@@ -113,7 +113,7 @@ const getVisStateSeverityHigh = (indexPatternId: string) => {
         labels: {
           show: true,
         },
-        invertColors: false,
+        invertColors: true,
         style: {
           bgFill: '#000',
           bgColor: false,
@@ -123,13 +123,6 @@ const getVisStateSeverityHigh = (indexPatternId: string) => {
         },
       },
     },
-    uiState: {
-      vis: {
-        colors: {
-          'High Severity - Count': '#38D1BA',
-        },
-      },
-    },
     data: {
       searchSource: {
         query: {
@@ -190,7 +183,7 @@ const getVisStateSeverityMedium = (indexPatternId: string) => {
       metric: {
         percentageMode: false,
         useRanges: false,
-        colorSchema: 'Yellow to Red',
+        colorSchema: 'Blues',
         metricColorMode: 'Labels',
         colorsRange: [
           {
@@ -205,7 +198,7 @@ const getVisStateSeverityMedium = (indexPatternId: string) => {
         labels: {
           show: true,
         },
-        invertColors: true,
+        invertColors: false,
         style: {
           bgFill: '#000',
           bgColor: false,

diff --git a/...mponents/overview/vulnerabilities/dashboards/overview/vulnerability_detector_filters.scss b/...mponents/overview/vulnerabilities/dashboards/overview/vulnerability_detector_filters.scss
@@ -18,3 +18,74 @@
     }
   }
 }
+
+/* WORKAROUND: Overwrite the color of the vulnerability severity metric color on
+  Vulnerabilities Detection dashboard.
+
+  The metric visualization do not allow to define the specific color.
+
+  */
+.wz-app div.vulnerability-dashboard-metrics > div:nth-child(1) > div > div {
+  /* Vulnerability severity metric: Critical */
+  &
+    > div:nth-child(1)
+    > div
+    > div
+    > div.embPanel__content
+    > div
+    > div
+    > div
+    > div.mtrVis__value {
+    /* ATTENTION: any change on this color needs to historic visualization related to
+    vulneravility severity should be changed too to match the colors on the dashboard */
+    color: #cc5642 !important;
+  }
+  /* Vulnerability severity metric: High */
+  &
+    > div:nth-child(2)
+    > div
+    > div
+    > div.embPanel__content
+    > div
+    > div
+    > div
+    > div.mtrVis__value {
+    /* ATTENTION: any change on this color needs to historic visualization related to
+    vulneravility severity should be changed too to match the colors on the dashboard
+    public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels.ts
+    */
+    color: #f5a700 !important;
+  }
+  /* Vulnerability severity metric: Medium */
+  &
+    > div:nth-child(3)
+    > div
+    > div
+    > div.embPanel__content
+    > div
+    > div
+    > div
+    > div.mtrVis__value {
+    /* ATTENTION: any change on this color needs to historic visualization related to
+    vulneravility severity should be changed too to match the colors on the dashboard
+    public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels.ts
+    */
+    color: #6092c0 !important;
+  }
+  /* Vulnerability severity metric: Low */
+  &
+    > div:nth-child(4)
+    > div
+    > div
+    > div.embPanel__content
+    > div
+    > div
+    > div
+    > div.mtrVis__value {
+    /* ATTENTION: any change on this color needs to historic visualization related to
+    vulneravility severity should be changed too to match the colors on the dashboard
+    public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels.ts
+    */
+    color: #209280 !important;
+  }
+}