Visualizations with different colors (#6099)

* Create the security event dashboard (#5892) * Create the security event dashboard * update changelog * Create the malware detection dashboard (#5899) * Create the security event dashboard * Changelog * Create log data analysis dashboard (#5910) * create log data analysis * Update changelog * Update changelog * Update integrity monitoring dashboard (#5929) * update integrity monitoring dashboard * update changelog * Create incident response dashboard (#5934) * create incident response dashboard * Update changelog * Update changelog * Update changelog * Update cloud security dashboard (#5943) * Update cloud security dashboard * Update cloud security dashboard * Update regulatory compliance dashboard (#5942) * update regulatory-compliance * Update changelog * Update containers security dashboard (#5944) * Update containers security dashboard * Update containers security dashboard * Update dashboard security events * Implement the security event dashboard * Implement the fim, pci dashboards * Implement the aws dashboards * Implement the docker dashboard * policy monitoring update * Update security configuration assessment dashboard (#5999) * add a new tab called dashboard in the sca module * New tab called dashboard, logic and error message when you have not selected an agent and when an agent was never logged in. * New inventory view in sca * Case of redirection to sca from agents welcome page * new sca tab with all the casuisticas, mobile styles, redirection from agents, adaptation in wz-visualize for section of sca * delete comment * clean code * fix error this.state.lookingPolicy.name * fix bug in sca dashboard * fix unpinned agent * fix sca dashboard * fix sca dashboard * update changelog and code clean * Refactoring of the security configuration assessment (#6061) * add a new tab called dashboard in the sca module * New tab called dashboard, logic and error message when you have not selected an agent and when an agent was never logged in. * New inventory view in sca * Case of redirection to sca from agents welcome page * new sca tab with all the casuisticas, mobile styles, redirection from agents, adaptation in wz-visualize for section of sca * delete comment * clean code * fix error this.state.lookingPolicy.name * fix bug in sca dashboard * fix unpinned agent * fix sca dashboard * fix sca dashboard * refactor sca section * changelog * clean code * update href * update changelog * Change the display order of tabs in all modules (#6067) * Change the display order of tabs in all modules * Change the display order of tabs in all modules * update changelog * change security events * Remove new dashboards of integrity monitoring security events and amazon aws (#6073) * Remove new dashboards of integrity monitoring, security events and Amazon AWS * clean code * Add graph to docker dashboard (#6075) * Add graph to docker dashboard * clean code * Update top 5 policy monitoring * Update top 5 pci dss * Remove new dashboard of PCI DSS (#6080) * fix colors in pci dashboard * fix colors in security events dashboards * update * Fix colors in docker fim github hipaa nist aws gdpr mitre pm tsc virus total * change in fix colors security events * add change pci dashboard * add changes in mitre dashboard * Redefine mappedColors.mapKeys method * Fix comment --------- Co-authored-by: Federico Rodriguez <[email protected]>
wazuh · Nov 22, 2023 · ff18890 · ff18890
1 parent 2d4f2a0
commit ff18890
Show file tree

Hide file tree

Showing 23 changed files with 2,178 additions and 1,116 deletions.
diff --git a/plugins/main/public/components/visualize/agent-visualizations.js b/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,
           },

diff --git a/plugins/main/public/components/visualize/visualizations.js b/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,
           },

diff --git a/plugins/main/public/components/visualize/wz-visualize.js b/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;

diff --git a/plugins/main/public/plugin.ts b/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;

diff --git a/plugins/main/server/integration-files/visualizations/agents/agents-docker.ts b/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: '{}',