This is an automated email from the ASF dual-hosted git repository. michaelsmith pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/impala.git
commit 73a33d93d9027db2d34c0b36264f9eebbe0e49ce Author: Michael Smith <[email protected]> AuthorDate: Mon Apr 3 10:49:21 2023 -0700 IMPALA-12037: Update Chart.js to 2.9.4 Updates Chart.js to 2.9.4 for bug fixes and to avoid prototype pollution. Added Chart.min.js from https://github.com/chartjs/Chart.js/releases/tag/v2.9.4. Moment.js from bundle does not seem to be needed. Chart.js 2.8 introduced https://github.com/chartjs/Chart.js/issues/6154, which causes the last X-axis label with "and above" to always be omitted. Add a custom autofit function to calculate our own spacing. Testing: - Examined /admission page with multiple queries admitted. Graph appears to render correctly. Change-Id: Ia4e0da58755b9561ddc75c217ef227a81c80a2a6 Reviewed-on: http://gerrit.cloudera.org:8080/19683 Reviewed-by: Impala Public Jenkins <[email protected]> Tested-by: Impala Public Jenkins <[email protected]> --- www/Chart-2.7.3.min.js | 10 ---------- www/Chart-2.9.4.min.js | 7 +++++++ www/admission_controller.tmpl | 42 +++++++++++++++++++++++++++++++++++++++++- 3 files changed, 48 insertions(+), 11 deletions(-) diff --git a/www/Chart-2.7.3.min.js b/www/Chart-2.7.3.min.js deleted file mode 100644 index 653e7cfa9..000000000 --- a/www/Chart-2.7.3.min.js +++ /dev/null @@ -1,10 +0,0 @@ -/*! - * Chart.js - * http://chartjs.org/ - * Version: 2.7.3 - * - * Copyright 2018 Chart.js Contributors - * Released under the MIT license - * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md - */ -!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).Chart=t()}}(function(){return function o(r,s,l){function u(e,t){if(!s[e]){if(!r[e]){var i="function"==typeof require&&require;if(!t&&i)return i(e,!0);if(d)return d(e,!0);var n=new Error("Cannot find module '"+e+"'");throw n.code="MODUL [...] \ No newline at end of file diff --git a/www/Chart-2.9.4.min.js b/www/Chart-2.9.4.min.js new file mode 100755 index 000000000..a87f61443 --- /dev/null +++ b/www/Chart-2.9.4.min.js @@ -0,0 +1,7 @@ +/*! + * Chart.js v2.9.4 + * https://www.chartjs.org + * (c) 2020 Chart.js Contributors + * Released under the MIT License + */ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(function(){try{return require("moment")}catch(t){}}()):"function"==typeof define&&define.amd?define(["require"],(function(t){return e(function(){try{return t("moment")}catch(t){}}())})):(t=t||self).Chart=e(t.moment)}(this,(function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255 [...] diff --git a/www/admission_controller.tmpl b/www/admission_controller.tmpl index a78f77279..f4bd6db96 100644 --- a/www/admission_controller.tmpl +++ b/www/admission_controller.tmpl @@ -99,13 +99,45 @@ Example of json received from the impala server <strong>{{statestore_update_staleness_detail}}</strong> </div> {{/statestore_update_staleness_detail}} -<script src='{{ __common__.host-url }}/www/Chart-2.7.3.min.js'></script> +<script src='{{ __common__.host-url }}/www/Chart-2.9.4.min.js'></script> <script type="text/javascript"> window.onload = function() { renderGraph(); formatMemoryColumns(); }; +// Workaround for https://github.com/chartjs/Chart.js/issues/6154, where the last X-axis +// label is always omitted. This function bakes in a lot of assumptions for our chart. +function afterFit(axis) { + const ticks = axis.getTicks(); + const widest = axis._labelSizes.widest.width; + const chartWidth = axis.width; + + // Apply a rough heuristic for rotation. + const maxFit = Math.trunc(3 * chartWidth / (2 * widest)); + // Limit to 20 labels. + const willFit = Math.min(maxFit, 20); + + // Ensure first and last are always shown. + const validLabelIndices = new Set(); + validLabelIndices.add(0); + validLabelIndices.add(ticks.length - 1); + + const numLabels = ticks.length % 2 === 0 ? willFit : willFit - 1; + + const interval = ticks.length / (numLabels - 1); + for (let i = 1; i < willFit - 1; i += 1) { + validLabelIndices.add(Math.floor(interval * i)); + } + + ticks.forEach((tick, index) => { + Object.assign( + tick, + { label: validLabelIndices.has(index) ? tick.label : null }, + ); + }); +} + // Picks up all the canvas elements associated with each resource pool and renders its // peak memory usage histogram. function renderGraph() { @@ -147,6 +179,14 @@ function renderGraph() { title: { display: true, text: 'Peak Memory per Host' + }, + scales: { + xAxes: [{ + afterFit: afterFit, + ticks: { + autoSkip: false + } + }] } } });
