Fix error generating dashboard reports on Firefox (#6902)

* fix(reporting): fix an error generating the dashboard reports on Firefox

- Add dom-to-image-more dependency
- Replace the library to generate de screenshots of the dashboard
  visualizations
- Apply a fix related to cropped screenshots on Firefox

* fix(reporting): remove embedded dom-to-image dependency

* chore(changelog): add entry

* fix(reporting): remove undefined variable

* fix(reporting): remove dom-to-image-more dependency from package and embed on the source code

* fix(reporting): change KPIs label color when generating a report on dark mode

* fix(visualizations): set metric label color to green on some visualziations of HIPAA and NIST 800-53 applications

* remove(tsc): unused visualization definition

* fix(reporting): add license header to dom-to-image-more embedded dependency

CHANGELOG.md

@@ -20,10 +20,11 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added support for agents to Office 365 [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558)
 - Added pinned agent data validation when rendering the Inventory data, Stats and Configuration tabs in Agent preview of Endpoints Summary [#6800](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6800)
 - Added wz-link component to make redirections [#6848](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6848)
+- Add embedded and customized `dom-to-image-more` dependency [#6902](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6902)
 
 ### Changed
 
-- Removed embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6254) [#6285](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6285) [#6288](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6288) [#6290](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6290) [#6289](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6289) [#6286](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6286) [#6275](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6275) [#6287](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6297](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6297) [#6291](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6459](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6459) [#6434](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6434) [#6504](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6504) [#6649](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6649) [#6506](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6506) [#6537](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6537) [#6528](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6528) [#6675](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6675) [#6674](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6674) [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558) [#6685](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6685) [#6691](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6691) [#6712](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6712) [#6734](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6734) [#6746](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6746) [#6752](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6752) [#6753](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6753) [#6756](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6756) [#6771](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6771) [#6792](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6792) [#6845](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6845) [#6857](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6857) [#6847](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6847) [#6865](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6865) [#6848](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6848) [#6843](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6843) [#6878](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6878) [#6883](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6883) [#6889](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6889)
+- Removed embedded discover [#6120](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6254) [#6285](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6285) [#6288](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6288) [#6290](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6290) [#6289](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6289) [#6286](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6286) [#6275](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6275) [#6287](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6297](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6297) [#6291](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6287) [#6459](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6459) [#6434](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6434) [#6504](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6504) [#6649](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6649) [#6506](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6506) [#6537](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6537) [#6528](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6528) [#6675](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6675) [#6674](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6674) [#6558](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6558) [#6685](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6685) [#6691](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6691) [#6712](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6712) [#6734](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6734) [#6746](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6746) [#6752](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6752) [#6753](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6753) [#6756](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6756) [#6771](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6771) [#6792](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6792) [#6845](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6845) [#6857](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6857) [#6847](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6847) [#6865](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6865) [#6848](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6848) [#6843](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6843) [#6878](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6878) [#6883](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6883) [#6889](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6889) [#6902](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6902)
 - Allow editing groups for an agent from Endpoints Summary [#6250](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6250)
 - Change how the configuration is managed in the backend side [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337) [#6519](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6519) [#6573](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6573)
 - Change the view of API is down and check connection to Server APIs application [#6337](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6337)
@@ -81,6 +82,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Removed the `App logs` application [#6161](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6161)
 - Removed API endpoint GET /utils/logs/ui [#6161](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6161)
 - Removed API endpoint GET /utils/logs [#6161](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6161)
+- Removed embedded `dom-to-image` dependency [#6902](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6902)
 
 ## Wazuh v4.8.1 - OpenSearch Dashboards 2.10.0 - Revision 04
 

plugins/main/public/app.js

@@ -15,5 +15,3 @@ import './styles';
 import './utils/fontawesome/scss/font-awesome.scss';
 // Dev tools
 import './utils/codemirror';
-// Require lib to dashboards PDFs
-require('./utils/dom-to-image.js');

plugins/main/public/components/common/modules/buttons/generate_report.tsx

@@ -38,7 +38,9 @@ export const ButtonModuleGenerateReport = connect(mapStateToProps)(
         const defaultTextColor = '#DFE5EF';
 
         //Patch to fix dark backgrounds in visualizations dark-mode pdf reports
-        const $labels = $('.euiButtonEmpty__text, .echLegendItem');
+        const $labels = $(
+          '.euiButtonEmpty__text, .echLegendItem, div.mtrVis__value ~ div',
+        );
         const $vizBackground = $('.echChartBackground');
         const defaultVizBackground = $vizBackground.css('background-color');
 

plugins/main/public/components/overview/hipaa/dashboards/dashboard-panels.ts

@@ -366,10 +366,21 @@ const getVisStateStats = (indexPatternId: string) => {
       metric: {
         percentageMode: false,
         useRanges: false,
-        colorSchema: 'Green to Red',
-        metricColorMode: 'None',
-        colorsRange: [{ type: 'range', from: 0, to: 10000 }],
-        labels: { show: true },
+        colorSchema: 'Greens',
+        metricColorMode: 'Labels',
+        colorsRange: [
+          {
+            from: 0,
+            to: 0,
+          },
+          {
+            from: 0,
+            to: 0,
+          },
+        ],
+        labels: {
+          show: true,
+        },
         invertColors: false,
         style: {
           bgFill: '#000',

plugins/main/public/components/overview/nist/dashboards/dashboard-panels.ts

@@ -554,10 +554,21 @@ const getVisStateMetrics = (indexPatternId: string) => {
       metric: {
         percentageMode: false,
         useRanges: false,
-        colorSchema: 'Green to Red',
-        metricColorMode: 'None',
-        colorsRange: [{ type: 'range', from: 0, to: 10000 }],
-        labels: { show: true },
+        colorSchema: 'Greens',
+        metricColorMode: 'Labels',
+        colorsRange: [
+          {
+            from: 0,
+            to: 0,
+          },
+          {
+            from: 0,
+            to: 0,
+          },
+        ],
+        labels: {
+          show: true,
+        },
         invertColors: false,
         style: {
           bgFill: '#000',
@@ -722,10 +733,21 @@ const getVisStateAgentStats = (indexPatternId: string) => {
       metric: {
         percentageMode: false,
         useRanges: false,
-        colorSchema: 'Green to Red',
-        metricColorMode: 'None',
-        colorsRange: [{ type: 'range', from: 0, to: 10000 }],
-        labels: { show: true },
+        colorSchema: 'Greens',
+        metricColorMode: 'Labels',
+        colorsRange: [
+          {
+            from: 0,
+            to: 0,
+          },
+          {
+            from: 0,
+            to: 0,
+          },
+        ],
+        labels: {
+          show: true,
+        },
         invertColors: false,
         style: {
           bgFill: '#000',

plugins/main/public/components/overview/tsc/dashboards/dashboard-panels.ts

@@ -547,82 +547,6 @@ const getVisStateRequirementsByAgent = (indexPatternId: string) => {
       ],
     },
   };
-  return {
-    title: 'Stats',
-    type: 'metric',
-    params: {
-      metric: {
-        percentageMode: false,
-        useRanges: false,
-        colorSchema: 'Green to Red',
-        metricColorMode: 'None',
-        colorsRange: [{ type: 'range', from: 0, to: 10000 }],
-        labels: { show: true },
-        invertColors: false,
-        style: {
-          bgFill: '#000',
-          bgColor: false,
-          labelColor: false,
-          subText: '',
-          fontSize: 20,
-        },
-      },
-      dimensions: {
-        metrics: [
-          {
-            type: 'vis_dimension',
-            accessor: 0,
-            format: { id: 'number', params: {} },
-          },
-          {
-            type: 'vis_dimension',
-            accessor: 1,
-            format: { id: 'number', params: {} },
-          },
-        ],
-      },
-      addTooltip: true,
-      addLegend: false,
-      type: 'metric',
-    },
-    uiState: {},
-    data: {
-      searchSource: {
-        query: {
-          language: 'kuery',
-          query: '',
-        },
-        filter: [],
-        index: indexPatternId,
-      },
-      references: [
-        {
-          name: 'kibanaSavedObjectMeta.searchSourceJSON.index',
-          type: 'index-pattern',
-          id: indexPatternId,
-        },
-      ],
-      aggs: [
-        {
-          id: '1',
-          enabled: true,
-          type: 'count',
-          schema: 'metric',
-          params: { customLabel: 'Total alerts' },
-        },
-        {
-          id: '2',
-          enabled: true,
-          type: 'max',
-          schema: 'metric',
-          params: {
-            field: 'rule.level',
-            customLabel: 'Max rule level detected',
-          },
-        },
-      ],
-    },
-  };
 };
 
 const getVisStateAgentTopRuleGroups = (indexPatternId: string) => {

plugins/main/public/react-services/reporting.js

@@ -19,7 +19,7 @@ import { UI_LOGGER_LEVELS } from '../../common/constants';
 import { UI_ERROR_SEVERITIES } from './error-orchestrator/types';
 import { getErrorOrchestrator } from './common-services';
 import store from '../redux/store';
-import domtoimage from '../utils/dom-to-image';
+import domtoimage from '../utils/dom-to-image-more';
 import dateMath from '@elastic/datemath';
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiLink } from '@elastic/eui';
@@ -116,7 +116,18 @@ export class ReportingService {
     return await Promise.all(
       Array.from(domVisualizations).map(async node => {
         return {
-          element: await domtoimage.toPng(node),
+          /* WORKAROUND: Defining the width and height resolves a bug
+          related to cropped screenshot on Firefox.
+
+          This solution is based on
+          https://github.com/1904labs/dom-to-image-more/issues/160#issuecomment-1922491067
+
+          See https://github.com/wazuh/wazuh-dashboard-plugins/issues/6900#issuecomment-2275495245
+          */
+          element: await domtoimage.toPng(node, {
+            width: node.clientWidth,
+            height: node.clientHeight,
+          }),
           width: node.clientWidth,
           height: node.clientHeight,
           title: node?.parentNode?.parentNode?.parentNode?.querySelector(
@@ -140,13 +151,13 @@ export class ReportingService {
       const timeFilter =
         dataSourceContext.time && dataSourceContext.indexPattern.timeFieldName
           ? buildRangeFilter(
-            {
-              name: dataSourceContext.indexPattern.timeFieldName,
-              type: 'date',
-            },
-            dataSourceContext.time,
-            dataSourceContext.indexPattern,
-          )
+              {
+                name: dataSourceContext.indexPattern.timeFieldName,
+                type: 'date',
+              },
+              dataSourceContext.time,
+              dataSourceContext.indexPattern,
+            )
           : null;
       // Build the filters to use in the server side
       // Based on https://github.com/opensearch-project/OpenSearch-Dashboards/blob/2.13.0/src/plugins/data/public/query/query_service.ts#L103-L113
@@ -166,12 +177,12 @@ export class ReportingService {
         tab === 'syscollector'
           ? { to: dataSourceContext.time.to, from: dataSourceContext.time.from }
           : {
-            to: dateMath.parse(dataSourceContext.time.to, {
-              roundUp: true,
-              forceNow: getForceNow(),
-            }),
-            from: dateMath.parse(dataSourceContext.time.from),
-          };
+              to: dateMath.parse(dataSourceContext.time.to, {
+                roundUp: true,
+                forceNow: getForceNow(),
+              }),
+              from: dateMath.parse(dataSourceContext.time.from),
+            };
 
       const data = {
         array: visualizations,