Moved Inline JS for Pipelines Charts + new Pipeline to dispatcher

5 files changed, 39 insertions, 5 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 6aa0d10ea5d..4c84a88274d 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -8,6 +8,7 @@
 /* global LabelsSelect */
 /* global MilestoneSelect */
 /* global Commit */
+/* global NewBranchForm */
 /* global NotificationsForm */
 /* global NotificationsDropdown */
 /* global GroupAvatar */
@@ -316,6 +317,9 @@ import PerformanceBar from './performance_bar';
         case 'projects:edit':
           setupProjectEdit();
           break;
+        case 'projects:pipelines:new':
+          new NewBranchForm($('.js-new-pipeline-form'), JSON.parse(document.getElementById('availableRefs').innerHTML));
+          break;
         case 'projects:pipelines:builds':
         case 'projects:pipelines:failures':
         case 'projects:pipelines:show':
diff --git a/app/assets/javascripts/pipelines/pipelines_times.js b/app/assets/javascripts/pipelines/pipelines_times.js
new file mode 100644
index 00000000000..b5e7a0e53d9
--- /dev/null
+++ b/app/assets/javascripts/pipelines/pipelines_times.js
@@ -0,0 +1,27 @@
+import Chart from 'vendor/Chart';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
+  const data = {
+    labels: chartData.labels,
+    datasets: [{
+      fillColor: 'rgba(220,220,220,0.5)',
+      strokeColor: 'rgba(220,220,220,1)',
+      barStrokeWidth: 1,
+      barValueSpacing: 1,
+      barDatasetSpacing: 1,
+      data: chartData.values,
+    }],
+  };
+  const ctx = $('#build_timesChart').get(0).getContext('2d');
+  const options = {
+    scaleOverlay: true,
+    responsive: true,
+    maintainAspectRatio: false,
+  };
+  if (window.innerWidth < 768) {
+    // Scale fonts if window width lower than 768px (iPad portrait)
+    options.scaleFontSize = 8;
+  }
+  new Chart(ctx).Bar(data, options);
+});
diff --git a/app/views/projects/pipelines/charts/_pipeline_times.haml b/app/views/projects/pipelines/charts/_pipeline_times.haml
index 1292f580a81..55477a922e7 100644
--- a/app/views/projects/pipelines/charts/_pipeline_times.haml
+++ b/app/views/projects/pipelines/charts/_pipeline_times.haml
@@ -1,9 +1,14 @@
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag('pipelines_times')
+
 %div
   %p.light
     = _("Commit duration in minutes for last 30 commits")
 
   %canvas#build_timesChart{ height: 200 }
 
+%script#pipelinesTimesChartsData{ type: "application/json" }= { :labels => @charts[:pipeline_times].labels, :values => @charts[:pipeline_times].pipeline_times }.to_json.html_safe
+
 :javascript
   var data = {
     labels : #{@charts[:pipeline_times].labels.to_json},
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index c966df62856..4ad37d0e882 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -20,7 +20,4 @@
     = f.submit 'Create pipeline', class: 'btn btn-create', tabindex: 3
     = link_to 'Cancel', project_pipelines_path(@project), class: 'btn btn-cancel'
 
-:javascript
-  var availableRefs = #{@project.repository.ref_names.to_json};
-
-  new NewBranchForm($('.js-new-pipeline-form'), availableRefs)
+%script#availableRefs{ type: "application/json" }= @project.repository.ref_names.to_json.html_safe
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 902c60b84cb..9a9399cbf02 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -54,7 +54,8 @@ var config = {
     notebook_viewer:      './blob/notebook_viewer.js',
     pdf_viewer:           './blob/pdf_viewer.js',
     pipelines:            './pipelines/pipelines_bundle.js',
-    pipelines_details:     './pipelines/pipeline_details_bundle.js',
+    pipelines_details:    './pipelines/pipeline_details_bundle.js',
+    pipelines_times:      './pipelines/pipelines_times.js',
     profile:              './profile/profile_bundle.js',
     project_new:          './projects/project_new.js',
     prometheus_metrics:   './prometheus_metrics',