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 = () => {
) : null}
{!isLoading && !isSearching && results?.hits?.total > 0 ? (
-
+
{
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;
+ }
+}