Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix error generating dashboard reports on Firefox #6902

Merged
merged 10 commits into from
Aug 13, 2024
Merged
4 changes: 3 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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

Expand Down
2 changes: 0 additions & 2 deletions plugins/main/public/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
41 changes: 26 additions & 15 deletions plugins/main/public/react-services/reporting.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(
Expand All @@ -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
Expand All @@ -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,
Expand Down
Loading
Loading