Removed d3.js from the main application.js bundle

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;

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);

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;
   }

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 }

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:

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