From b9120c77e934daa73855763a6ce0e9e734f6d228 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Lopez Date: Mon, 20 Mar 2017 19:54:03 +0000 Subject: [PATCH] Removed d3.js from the main application.js bundle --- app/assets/javascripts/dispatcher.js | 3 -- .../monitoring/monitoring_bundle.js | 6 ++++ .../monitoring/prometheus_graph.js | 34 +++++++++---------- .../projects/environments/metrics.html.haml | 3 ++ ...ix-prometheus-including-d3-main-bundle.yml | 4 +++ config/webpack.config.js | 3 +- 6 files changed, 32 insertions(+), 21 deletions(-) create mode 100644 app/assets/javascripts/monitoring/monitoring_bundle.js create mode 100644 changelogs/unreleased/fix-prometheus-including-d3-main-bundle.yml diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index db1a2848d8d..3557f6f617e 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -1,4 +1,3 @@ -import PrometheusGraph from './monitoring/prometheus_graph'; // TODO: Maybe Make this a bundle /* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */ /* global UsernameValidator */ /* global ActiveTabMemoizer */ @@ -329,8 +328,6 @@ const UserCallout = require('./user_callout'); case 'ci:lints:show': new gl.CILintEditor(); break; - case 'projects:environments:metrics': - new PrometheusGraph(); case 'users:show': new UserCallout(); break; diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js new file mode 100644 index 00000000000..b3ce9310417 --- /dev/null +++ b/app/assets/javascripts/monitoring/monitoring_bundle.js @@ -0,0 +1,6 @@ +import PrometheusGraph from './prometheus_graph'; + +document.addEventListener('DOMContentLoaded', function onLoad() { + document.removeEventListener('DOMContentLoaded', onLoad, false); + return new PrometheusGraph(); +}, false); diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js index 71eb746edac..fcffc11a2df 100644 --- a/app/assets/javascripts/monitoring/prometheus_graph.js +++ b/app/assets/javascripts/monitoring/prometheus_graph.js @@ -2,10 +2,9 @@ /* global Flash */ import d3 from 'd3'; -import _ from 'underscore'; import statusCodes from '~/lib/utils/http_status'; -import '~/lib/utils/common_utils'; -import '~/flash'; +import '../lib/utils/common_utils'; +import '../flash'; const prometheusGraphsContainer = '.prometheus-graph'; const metricsEndpoint = 'metrics.json'; @@ -31,22 +30,21 @@ class PrometheusGraph { } createGraph() { - const self = this; - _.each(this.data, (value, key) => { - if (value.length > 0 && (key === 'cpu_values' || key === 'memory_values')) { - self.plotValues(value, key); + Object.keys(this.data).forEach((key) => { + const value = this.data[key]; + if (value.length > 0) { + this.plotValues(value, key); } }); } init() { - const self = this; this.getData().then((metricsResponse) => { - if (metricsResponse === {}) { + if (Object.keys(metricsResponse).length === 0) { new Flash('Empty metrics', 'alert'); } else { - self.transformData(metricsResponse); - self.createGraph(); + this.transformData(metricsResponse); + this.createGraph(); } }); } @@ -321,12 +319,14 @@ class PrometheusGraph { transformData(metricsResponse) { const metricTypes = {}; - _.each(metricsResponse.metrics, (value, key) => { - const metricValues = value[0].values; - metricTypes[key] = _.map(metricValues, metric => ({ - time: new Date(metric[0] * 1000), - value: metric[1], - })); + Object.keys(metricsResponse.metrics).forEach((key) => { + if (key === 'cpu_values' || key === 'memory_values') { + const metricValues = (metricsResponse.metrics[key])[0]; + metricTypes[key] = metricValues.values.map(metric => ({ + time: new Date(metric[0] * 1000), + value: metric[1], + })); + } }); this.data = metricTypes; } diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml index f8e94ca98ae..b8c1782f050 100644 --- a/app/views/projects/environments/metrics.html.haml +++ b/app/views/projects/environments/metrics.html.haml @@ -1,5 +1,8 @@ - @no_container = true - page_title "Metrics for environment", @environment.name +- content_for :page_specific_javascripts do + = page_specific_javascript_bundle_tag('common_d3') + = page_specific_javascript_bundle_tag('monitoring') = render "projects/pipelines/head" %div{ class: container_class } diff --git a/changelogs/unreleased/fix-prometheus-including-d3-main-bundle.yml b/changelogs/unreleased/fix-prometheus-including-d3-main-bundle.yml new file mode 100644 index 00000000000..a42b0db3cfc --- /dev/null +++ b/changelogs/unreleased/fix-prometheus-including-d3-main-bundle.yml @@ -0,0 +1,4 @@ +--- +title: Removed d3 from the main application.js bundle +merge_request: 10062 +author: diff --git a/config/webpack.config.js b/config/webpack.config.js index cbcc9ac5aea..92746211cad 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -35,6 +35,7 @@ var config = { issuable: './issuable/issuable_bundle.js', merge_conflicts: './merge_conflicts/merge_conflicts_bundle.js', merge_request_widget: './merge_request_widget/ci_bundle.js', + monitoring: './monitoring/monitoring_bundle.js', network: './network/network_bundle.js', profile: './profile/profile_bundle.js', protected_branches: './protected_branches/protected_branches_bundle.js', @@ -120,7 +121,7 @@ var config = { // create cacheable common library bundle for all d3 chunks new webpack.optimize.CommonsChunkPlugin({ name: 'common_d3', - chunks: ['graphs', 'users'], + chunks: ['graphs', 'users', 'monitoring'], }), // create cacheable common library bundles