From 672852ea205bbc77ea13d2656fc28fea097895f3 Mon Sep 17 00:00:00 2001 From: Nouha-ElAbrouki <97687698+Noha-ElAbrouki@users.noreply.github.com> Date: Fri, 5 Aug 2022 11:37:02 +0200 Subject: [PATCH] fix(Resources/Graph): export graph image after selecting png (#11491) * [SNYK] Sanitize and bind ACL host dependency queries (#11389) (#11394) * Sanitize and bind ACL host dependency queries * fix issues * removed old variable userCrypted and the use of it (#11334) (#11352) Co-authored-by: jeremyjaouen <61694165+jeremyjaouen@users.noreply.github.com> * enh(Header/userMenu):reduce spacing user menu (#11393) * update user menu * fix(hostgroup): fix display of hostgroups in select2 (#11431) (#11443) * fix(ci): fix debian packaging with freshly instanciated jenkins slave (#11398) (#11399) Refs: MON-14377 * Sanitized and bound queries (#11413) (#11445) lines : 130 -142 * Snyk: Sanitize and bind media sync queries 22.04.x (#11418) * sanitizing and binding sync dir file queries * Applying some fixes * Snyk: Sanitize and bind ACL service dependency queries dev-22.04.x (#11395) * Snyk: Sanitize and bind Auth class queries 22.04.x (#11448) * [Backport/need review] fix(UI): Fix layout for Safari and form validation (#11440) * fix(UI): Fix layout for Safari and form validation (#11373) * Fix form validation * Fix padlock layout for safari * Update centreon-frontend * Remove debug variable * Fix test * Fix page respsoniveness * Rename variable * update deps * Fix package-lock * Fix package-lock * Add debug statement for debian * Install nodejs rather npm * Attempt fix * Attempt to fix nodejs installation * add sudo * Fix redoc-cli usage * Try to fix permission on npm * Fix * Fix permission * Fix permission (please work) * Fix source * Stop using npx because..... * Allow legacy-peer-deps * Remove nodejs installation * Fix image to pull for debian 11 * [SNYK] Sanitize and bind centreonGraph class queries (#11409) (#11421) 1122 1153 1134 * [Snyk] Sanitize and bind ACL action access queries (#11385) (#11402) * Sanitize and bind ACL action access queries _ sanitize if possible each variables inserted in a query _ use PDO prepared statement and bind() method _ Do not use $pearDB->escape on which is for examples useless on integers and on non closed HTML tags (svg, img, etc) * fix line length * fix failed checks * feat(api): implement endpoint to update centreon web (#11391) (#11401) Refs: MON-12296 * Clean(platform): Clean appKey method and usage 22.04.x (#11452) * Clean(platform): Clean appKey method and usage (#11336) * removing appKey from information table in baseConf and 22.10 update script * removing appKey from NotifyMasterService.php * removing appKey from CentreonRemoteServer.php * applying suggested changes * Applying suggested changes Co-authored-by: Kevin Duret * adding 22.04.2 update script file with changes * revert 22.04 beta 1 script to its original Co-authored-by: Kevin Duret * enh(platform): Use API to select metrics in virtual metrics configuration form 22.04.x (#11461) * changing select with select2 of metrics * fix alignement * remove unecessary files and replace selec by select2 in formComponentTemplate * fix select id name for acceptance tests * update composer for acceptance tests * fix acceptance test 2 * add allow clear to metrics select2 * applying suggested changes * final changes for merging * remove unecessary select tag * [SNYK] Sanitize and bind ACL class queries (#11392) (#11472) * Sanitize and bind ACL class queries Queries sanitized and bound using PDO statement * fix spaces spaces between (int) cast and variables * update file delete spaces after comma * change variables names due to a review * Line exceeds 120 characters; contains 123 characters * fix(conf) fix broker conf name display in listing (#11372) (#11376) * fix export graph image after selecting png Co-authored-by: Elmahdi ABBASSI <108519266+emabassi-ext@users.noreply.github.com> Co-authored-by: jeremyjaouen <61694165+jeremyjaouen@users.noreply.github.com> Co-authored-by: Kevin Duret Co-authored-by: hyahiaoui-ext <97593234+hyahiaoui-ext@users.noreply.github.com> Co-authored-by: Tom Darneix Co-authored-by: alaunois --- .../ExportableGraphWithTimeline/exportToPng.ts | 10 ++++++++-- .../src/Resources/Graph/Performance/GraphActions.tsx | 4 ++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/www/front_src/src/Resources/Graph/Performance/ExportableGraphWithTimeline/exportToPng.ts b/www/front_src/src/Resources/Graph/Performance/ExportableGraphWithTimeline/exportToPng.ts index 35f49e5507e..0f308c7c332 100644 --- a/www/front_src/src/Resources/Graph/Performance/ExportableGraphWithTimeline/exportToPng.ts +++ b/www/front_src/src/Resources/Graph/Performance/ExportableGraphWithTimeline/exportToPng.ts @@ -2,12 +2,18 @@ import { saveAs } from 'file-saver'; import dom2image from 'dom-to-image'; interface Props { + backgroundColor: string; element: HTMLElement; ratio: number; title: string; } -const exportToPng = async ({ element, title, ratio }: Props): Promise => { +const exportToPng = async ({ + element, + title, + ratio, + backgroundColor, +}: Props): Promise => { const dateTime = new Date().toISOString().substring(0, 19); const getTranslation = (size: number): number => { @@ -19,7 +25,7 @@ const exportToPng = async ({ element, title, ratio }: Props): Promise => { return dom2image .toBlob(element, { - bgcolor: '#FFFFFF', + bgcolor: backgroundColor, height: element.offsetHeight * ratio, style: { transform: `translate(-${translateX}px, -${translateY}px) scale(${ratio})`, diff --git a/www/front_src/src/Resources/Graph/Performance/GraphActions.tsx b/www/front_src/src/Resources/Graph/Performance/GraphActions.tsx index b731ff5bb11..c19c93ed464 100644 --- a/www/front_src/src/Resources/Graph/Performance/GraphActions.tsx +++ b/www/front_src/src/Resources/Graph/Performance/GraphActions.tsx @@ -8,6 +8,7 @@ import { Menu, MenuItem } from '@mui/material'; import makeStyles from '@mui/styles/makeStyles'; import SaveAsImageIcon from '@mui/icons-material/SaveAlt'; import LaunchIcon from '@mui/icons-material/Launch'; +import { useTheme } from '@mui/material/styles'; import { ContentWithCircularLoading, @@ -56,6 +57,8 @@ const GraphActions = ({ performanceGraphRef, }: Props): JSX.Element => { const classes = useStyles(); + const theme = useTheme(); + const { t } = useTranslation(); const [menuAnchor, setMenuAnchor] = useState(null); const [exporting, setExporting] = useState(false); @@ -96,6 +99,7 @@ const GraphActions = ({ setMenuAnchor(null); setExporting(true); exportToPng({ + backgroundColor: theme.palette.background.default, element: performanceGraphRef.current as HTMLElement, ratio, title: `${resourceName}-performance`,