Visualizations with different colors

plugins/main/public/components/visualize/agent-visualizations.js

@@ -17,7 +17,7 @@ export const agentVisualizations = {
         height: 400,
         vis: [
           {
-            title: 'Alert groups evolution',
+            title: 'Top 10 Alert groups evolution',
             id: 'Wazuh-App-Agents-General-Alert-groups-evolution',
             width: 50,
           },

plugins/main/public/components/visualize/visualizations.js

@@ -17,12 +17,12 @@ export const visualizations = {
         height: 360,
         vis: [
           {
-            title: 'Alert level evolution',
+            title: 'Top 10 Alert level evolution',
             id: 'Wazuh-App-Overview-General-Alert-level-evolution',
             width: 60,
           },
           {
-            title: 'Top MITRE ATT&CKS',
+            title: 'Top 10 MITRE ATT&CKS',
             id: 'Wazuh-App-Overview-General-Alerts-Top-Mitre',
             width: 40,
           },
@@ -249,7 +249,7 @@ export const visualizations = {
         height: 400,
         vis: [
           {
-            title: 'PCI DSS requirements',
+            title: 'Top 10 PCI DSS requirements',
             id: 'Wazuh-App-Overview-PCI-DSS-requirements',
             width: 50,
           },
@@ -346,7 +346,7 @@ export const visualizations = {
             width: 20,
           },
           {
-            title: 'Top requirements over time',
+            title: 'Top 10 requirements over time',
             id: 'Wazuh-App-Overview-NIST-Requirements-over-time',
             width: 50,
           },

plugins/main/public/components/visualize/wz-visualize.js

@@ -30,7 +30,7 @@ import { VisHandlers } from '../../factories/vis-handlers';
 import { RawVisualizations } from '../../factories/raw-visualizations';
 import { Metrics } from '../overview/metrics/metrics';
 import { PatternHandler } from '../../react-services/pattern-handler';
-import { getToasts } from '../../kibana-services';
+import { getToasts, getPlugins } from '../../kibana-services';
 import { SampleDataWarning, SecurityAlerts } from './components';
 import { toMountPoint } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { withReduxProvider, withErrorBoundary } from '../common/hocs';
@@ -57,6 +57,12 @@ export const WzVisualize = compose(
         refreshingKnownFields: [],
         refreshingIndex: true,
       };
+      // Reset the visualizations mapped colors when the type of Dashboard is changed.
+      // This is a workaround until the issue reported in Opensearch Dashboards is fixed.
+      // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5422
+      // This should be reomved when the issue is fixed. Probably in OSD 2.12.0
+      getPlugins().charts.colors.mappedColors.purge();
+
       this.hasRefreshedKnownFields = false;
       this.isRefreshing = false;
       this.metricValues = false;

plugins/main/public/plugin.ts

@@ -44,6 +44,7 @@ import {
 } from './services/request-handler';
 import { Applications, Categories } from './utils/applications';
 import { syncHistoryLocations } from './kibana-integrations/discover/kibana_services';
+import { euiPaletteColorBlind } from '@elastic/eui';
 
 const innerAngularName = 'app/wazuh';
 
@@ -64,6 +65,56 @@ export class WazuhPlugin
       console.error('plugin.ts: Error getting logos configuration', error);
     }
 
+    // Redefine the mapKeys method to change the properties sent to euiPaletteColorBlind.
+    // This is a workaround until the issue reported in Opensearch Dashboards is fixed.
+    // https://github.com/opensearch-project/OpenSearch-Dashboards/issues/5422
+    // This should be reomved when the issue is fixed. Probably in OSD 2.12.0
+    plugins.charts.colors.mappedColors.mapKeys = function (
+      keys: Array<string | number>,
+    ) {
+      const configMapping = this.getConfigColorMapping();
+      const configColors = _.values(configMapping);
+      const oldColors = _.values(this._oldMap);
+
+      let alreadyUsedColors: string[] = [];
+      const keysToMap: Array<string | number> = [];
+      _.each(keys, key => {
+        // If this key is mapped in the config, it's unnecessary to have it mapped here
+        if (configMapping[key as any]) {
+          delete this._mapping[key];
+          alreadyUsedColors.push(configMapping[key]);
+        }
+
+        // If this key is mapped to a color used by the config color mapping, we need to remap it
+        if (_.includes(configColors, this._mapping[key])) keysToMap.push(key);
+
+        // if key exist in oldMap, move it to mapping
+        if (this._oldMap[key]) {
+          this._mapping[key] = this._oldMap[key];
+          alreadyUsedColors.push(this._mapping[key]);
+        }
+
+        // If this key isn't mapped, we need to map it
+        if (this.get(key) == null) keysToMap.push(key);
+      });
+
+      alreadyUsedColors.push(...Object.values(this._mapping));
+      alreadyUsedColors = alreadyUsedColors.map(color =>
+        color.toLocaleLowerCase(),
+      );
+      // Choose colors from euiPaletteColorBlind and filter out any already assigned to keys
+      const colorPalette = euiPaletteColorBlind({
+        rotations: Math.ceil(
+          (keysToMap.length + alreadyUsedColors.length) / 10,
+        ),
+        direction: core.uiSettings.get('theme:darkMode') ? 'darker' : 'lighter',
+      })
+        .filter(color => !alreadyUsedColors.includes(color.toLowerCase()))
+        .slice(0, keysToMap.length);
+
+      _.merge(this._mapping, _.zipObject(keysToMap, colorPalette));
+    };
+
     // Register the applications
     Applications.forEach(app => {
       const { category, id, title, redirectTo, order } = app;

plugins/main/server/integration-files/visualizations/agents/agents-docker.ts

@@ -24,10 +24,21 @@ export default [
           addLegend: true,
           legendPosition: 'right',
           isDonut: true,
-          labels: { show: false, values: true, last_level: true, truncate: 100 },
+          labels: {
+            show: false,
+            values: true,
+            last_level: true,
+            truncate: 100,
+          },
         },
         aggs: [
-          { id: '1', enabled: true, type: 'count', schema: 'metric', params: {} },
+          {
+            id: '1',
+            enabled: true,
+            type: 'count',
+            schema: 'metric',
+            params: {},
+          },
           {
             id: '2',
             enabled: true,
@@ -72,10 +83,21 @@ export default [
           addLegend: true,
           legendPosition: 'right',
           isDonut: true,
-          labels: { show: false, values: true, last_level: true, truncate: 100 },
+          labels: {
+            show: false,
+            values: true,
+            last_level: true,
+            truncate: 100,
+          },
         },
         aggs: [
-          { id: '1', enabled: true, type: 'count', schema: 'metric', params: {} },
+          {
+            id: '1',
+            enabled: true,
+            type: 'count',
+            schema: 'metric',
+            params: {},
+          },
           {
             id: '2',
             enabled: true,
@@ -124,7 +146,13 @@ export default [
           totalFunc: 'sum',
         },
         aggs: [
-          { id: '1', enabled: true, type: 'count', schema: 'metric', params: {} },
+          {
+            id: '1',
+            enabled: true,
+            type: 'count',
+            schema: 'metric',
+            params: {},
+          },
           {
             id: '2',
             enabled: true,
@@ -202,7 +230,11 @@ export default [
         type: 'histogram',
         params: {
           type: 'histogram',
-          grid: { categoryLines: true, style: { color: '#eee' }, valueAxis: 'ValueAxis-1' },
+          grid: {
+            categoryLines: true,
+            style: { color: '#eee' },
+            valueAxis: 'ValueAxis-1',
+          },
           categoryAxes: [
             {
               id: 'CategoryAxis-1',
@@ -246,23 +278,12 @@ export default [
           addTimeMarker: false,
         },
         aggs: [
-          { id: '1', enabled: true, type: 'count', schema: 'metric', params: {} },
           {
-            id: '2',
+            id: '1',
             enabled: true,
-            type: 'date_histogram',
-            schema: 'segment',
-            params: {
-              field: 'timestamp',
-              timeRange: { from: 'now-1h', to: 'now', mode: 'quick' },
-              useNormalizedEsInterval: true,
-              interval: 'auto',
-              time_zone: 'Europe/Berlin',
-              drop_partials: false,
-              customInterval: '2h',
-              min_doc_count: 1,
-              extended_bounds: {},
-            },
+            type: 'count',
+            schema: 'metric',
+            params: {},
           },
           {
             id: '3',
@@ -280,6 +301,23 @@ export default [
               missingBucketLabel: 'Missing',
             },
           },
+          {
+            id: '2',
+            enabled: true,
+            type: 'date_histogram',
+            schema: 'segment',
+            params: {
+              field: 'timestamp',
+              timeRange: { from: 'now-1h', to: 'now', mode: 'quick' },
+              useNormalizedEsInterval: true,
+              interval: 'auto',
+              time_zone: 'Europe/Berlin',
+              drop_partials: false,
+              customInterval: '2h',
+              min_doc_count: 1,
+              extended_bounds: {},
+            },
+          },
         ],
       }),
       uiStateJSON: '{}',
@@ -304,7 +342,11 @@ export default [
         type: 'area',
         params: {
           type: 'area',
-          grid: { categoryLines: true, style: { color: '#eee' }, valueAxis: 'ValueAxis-1' },
+          grid: {
+            categoryLines: true,
+            style: { color: '#eee' },
+            valueAxis: 'ValueAxis-1',
+          },
           categoryAxes: [
             {
               id: 'CategoryAxis-1',
@@ -356,6 +398,23 @@ export default [
             schema: 'metric',
             params: { customLabel: 'Events' },
           },
+          {
+            id: '3',
+            enabled: true,
+            type: 'terms',
+            schema: 'group',
+            params: {
+              field: 'data.docker.Action',
+              size: 10,
+              order: 'desc',
+              orderBy: '1',
+              otherBucket: false,
+              otherBucketLabel: 'Other',
+              missingBucket: false,
+              missingBucketLabel: 'Missing',
+              customLabel: 'Action',
+            },
+          },
           {
             id: '2',
             enabled: true,
@@ -374,23 +433,6 @@ export default [
               customLabel: '',
             },
           },
-          {
-            id: '3',
-            enabled: true,
-            type: 'terms',
-            schema: 'group',
-            params: {
-              field: 'data.docker.Action',
-              size: 10,
-              order: 'desc',
-              orderBy: '1',
-              otherBucket: false,
-              otherBucketLabel: 'Other',
-              missingBucket: false,
-              missingBucketLabel: 'Missing',
-              customLabel: 'Action',
-            },
-          },
         ],
       }),
       uiStateJSON: '{}',