Fix error generating dashboard reports on Firefox

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:/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:/wazuh/wazuh-dashboard-plugins/pull/6800)
 - Added wz-link component to make redirections [#6848](https:/wazuh/wazuh-dashboard-plugins/pull/6848)
+- Add embedded and customized `dom-to-image-more` dependency [#6902](https:/wazuh/wazuh-dashboard-plugins/pull/6902)
 
 ### Changed
 
-- Removed embedded discover [#6120](https:/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https:/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https:/wazuh/wazuh-dashboard-plugins/pull/6254) [#6285](https:/wazuh/wazuh-dashboard-plugins/pull/6285) [#6288](https:/wazuh/wazuh-dashboard-plugins/pull/6288) [#6290](https:/wazuh/wazuh-dashboard-plugins/pull/6290) [#6289](https:/wazuh/wazuh-dashboard-plugins/pull/6289) [#6286](https:/wazuh/wazuh-dashboard-plugins/pull/6286) [#6275](https:/wazuh/wazuh-dashboard-plugins/pull/6275) [#6287](https:/wazuh/wazuh-dashboard-plugins/pull/6287) [#6297](https:/wazuh/wazuh-dashboard-plugins/pull/6297) [#6291](https:/wazuh/wazuh-dashboard-plugins/pull/6287) [#6459](https:/wazuh/wazuh-dashboard-plugins/pull/6459) [#6434](https:/wazuh/wazuh-dashboard-plugins/pull/6434) [#6504](https:/wazuh/wazuh-dashboard-plugins/pull/6504) [#6649](https:/wazuh/wazuh-dashboard-plugins/pull/6649) [#6506](https:/wazuh/wazuh-dashboard-plugins/pull/6506) [#6537](https:/wazuh/wazuh-dashboard-plugins/pull/6537) [#6528](https:/wazuh/wazuh-dashboard-plugins/pull/6528) [#6675](https:/wazuh/wazuh-dashboard-plugins/pull/6675) [#6674](https:/wazuh/wazuh-dashboard-plugins/pull/6674) [#6558](https:/wazuh/wazuh-dashboard-plugins/pull/6558) [#6685](https:/wazuh/wazuh-dashboard-plugins/pull/6685) [#6691](https:/wazuh/wazuh-dashboard-plugins/pull/6691) [#6712](https:/wazuh/wazuh-dashboard-plugins/pull/6712) [#6734](https:/wazuh/wazuh-dashboard-plugins/pull/6734) [#6746](https:/wazuh/wazuh-dashboard-plugins/pull/6746) [#6752](https:/wazuh/wazuh-dashboard-plugins/pull/6752) [#6753](https:/wazuh/wazuh-dashboard-plugins/pull/6753) [#6756](https:/wazuh/wazuh-dashboard-plugins/pull/6756) [#6771](https:/wazuh/wazuh-dashboard-plugins/pull/6771) [#6792](https:/wazuh/wazuh-dashboard-plugins/pull/6792) [#6845](https:/wazuh/wazuh-dashboard-plugins/pull/6845) [#6857](https:/wazuh/wazuh-dashboard-plugins/pull/6857) [#6847](https:/wazuh/wazuh-dashboard-plugins/pull/6847) [#6865](https:/wazuh/wazuh-dashboard-plugins/pull/6865) [#6848](https:/wazuh/wazuh-dashboard-plugins/pull/6848) [#6843](https:/wazuh/wazuh-dashboard-plugins/pull/6843) [#6878](https:/wazuh/wazuh-dashboard-plugins/pull/6878) [#6883](https:/wazuh/wazuh-dashboard-plugins/pull/6883) [#6889](https:/wazuh/wazuh-dashboard-plugins/pull/6889)
+- Removed embedded discover [#6120](https:/wazuh/wazuh-dashboard-plugins/pull/6120) [#6235](https:/wazuh/wazuh-dashboard-plugins/pull/6235) [#6254](https:/wazuh/wazuh-dashboard-plugins/pull/6254) [#6285](https:/wazuh/wazuh-dashboard-plugins/pull/6285) [#6288](https:/wazuh/wazuh-dashboard-plugins/pull/6288) [#6290](https:/wazuh/wazuh-dashboard-plugins/pull/6290) [#6289](https:/wazuh/wazuh-dashboard-plugins/pull/6289) [#6286](https:/wazuh/wazuh-dashboard-plugins/pull/6286) [#6275](https:/wazuh/wazuh-dashboard-plugins/pull/6275) [#6287](https:/wazuh/wazuh-dashboard-plugins/pull/6287) [#6297](https:/wazuh/wazuh-dashboard-plugins/pull/6297) [#6291](https:/wazuh/wazuh-dashboard-plugins/pull/6287) [#6459](https:/wazuh/wazuh-dashboard-plugins/pull/6459) [#6434](https:/wazuh/wazuh-dashboard-plugins/pull/6434) [#6504](https:/wazuh/wazuh-dashboard-plugins/pull/6504) [#6649](https:/wazuh/wazuh-dashboard-plugins/pull/6649) [#6506](https:/wazuh/wazuh-dashboard-plugins/pull/6506) [#6537](https:/wazuh/wazuh-dashboard-plugins/pull/6537) [#6528](https:/wazuh/wazuh-dashboard-plugins/pull/6528) [#6675](https:/wazuh/wazuh-dashboard-plugins/pull/6675) [#6674](https:/wazuh/wazuh-dashboard-plugins/pull/6674) [#6558](https:/wazuh/wazuh-dashboard-plugins/pull/6558) [#6685](https:/wazuh/wazuh-dashboard-plugins/pull/6685) [#6691](https:/wazuh/wazuh-dashboard-plugins/pull/6691) [#6712](https:/wazuh/wazuh-dashboard-plugins/pull/6712) [#6734](https:/wazuh/wazuh-dashboard-plugins/pull/6734) [#6746](https:/wazuh/wazuh-dashboard-plugins/pull/6746) [#6752](https:/wazuh/wazuh-dashboard-plugins/pull/6752) [#6753](https:/wazuh/wazuh-dashboard-plugins/pull/6753) [#6756](https:/wazuh/wazuh-dashboard-plugins/pull/6756) [#6771](https:/wazuh/wazuh-dashboard-plugins/pull/6771) [#6792](https:/wazuh/wazuh-dashboard-plugins/pull/6792) [#6845](https:/wazuh/wazuh-dashboard-plugins/pull/6845) [#6857](https:/wazuh/wazuh-dashboard-plugins/pull/6857) [#6847](https:/wazuh/wazuh-dashboard-plugins/pull/6847) [#6865](https:/wazuh/wazuh-dashboard-plugins/pull/6865) [#6848](https:/wazuh/wazuh-dashboard-plugins/pull/6848) [#6843](https:/wazuh/wazuh-dashboard-plugins/pull/6843) [#6878](https:/wazuh/wazuh-dashboard-plugins/pull/6878) [#6883](https:/wazuh/wazuh-dashboard-plugins/pull/6883) [#6889](https:/wazuh/wazuh-dashboard-plugins/pull/6889) [#6902](https:/wazuh/wazuh-dashboard-plugins/pull/6902)
 - Allow editing groups for an agent from Endpoints Summary [#6250](https:/wazuh/wazuh-dashboard-plugins/pull/6250)
 - Change how the configuration is managed in the backend side [#6337](https:/wazuh/wazuh-dashboard-plugins/pull/6337) [#6519](https:/wazuh/wazuh-dashboard-plugins/pull/6519) [#6573](https:/wazuh/wazuh-dashboard-plugins/pull/6573)
 - Change the view of API is down and check connection to Server APIs application [#6337](https:/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:/wazuh/wazuh-dashboard-plugins/pull/6161)
 - Removed API endpoint GET /utils/logs/ui [#6161](https:/wazuh/wazuh-dashboard-plugins/pull/6161)
 - Removed API endpoint GET /utils/logs [#6161](https:/wazuh/wazuh-dashboard-plugins/pull/6161)
+- Removed embedded `dom-to-image` dependency [#6902](https:/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:/1904labs/dom-to-image-more/issues/160#issuecomment-1922491067
+
+ See https:/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:/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,