From 39e534bf7d753b914e40c2a0c30bc4702cdc8351 Mon Sep 17 00:00:00 2001
From: Antonio <34042064+Desvelao@users.noreply.github.com>
Date: Wed, 26 Jun 2024 09:28:15 +0200
Subject: [PATCH] Match colors related to severity levels on the
 vulnerabilities detection dashboard (#6793)

* fix(vulnerability): match colors related to severity levels on the dashboard

* chore: add pull request entry to the changelog
---
 CHANGELOG.md                                  |  1 +
 .../dashboards/overview/dashboard.tsx         |  2 +-
 .../dashboards/overview/dashboard_panels.ts   | 13 ++++
 .../overview/dashboard_panels_kpis.ts         | 15 ++--
 .../vulnerability_detector_filters.scss       | 71 +++++++++++++++++++
 5 files changed, 90 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58cc6b3739..8da4b6e289 100644
--- 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
index c5862324b2..bd821fb414 100644
--- 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/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels.ts b/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels.ts
index 252d60d65a..e38847b33a 100644
--- a/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels.ts
+++ b/plugins/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/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels_kpis.ts b/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels_kpis.ts
index 45e31b0ffc..c2d213b401 100644
--- a/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/dashboard_panels_kpis.ts
+++ b/plugins/main/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/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/vulnerability_detector_filters.scss b/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/vulnerability_detector_filters.scss
index c953f43a4f..996f0272b2 100644
--- a/plugins/main/public/components/overview/vulnerabilities/dashboards/overview/vulnerability_detector_filters.scss
+++ b/plugins/main/public/components/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;
+  }
+}