Merge branch 'master' of https://gitlab.com/gitlab-org/gitlab-ce into boards-bundle-refactor

31 files changed, 300 insertions, 197 deletions

diff --git a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
index 76f93e5c6bd..b33adff609f 100644
--- a/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ajax_variable_list.js
@@ -75,6 +75,7 @@ export default class AjaxVariableList {
 
         if (res.status === statusCodes.OK && res.data) {
           this.updateRowsWithPersistedVariables(res.data.variables);
+          this.variableList.hideValues();
         } else if (res.status === statusCodes.BAD_REQUEST) {
           // Validation failed
           this.errorBox.innerHTML = generateErrorBoxContent(res.data);
diff --git a/app/assets/javascripts/ci_variable_list/ci_variable_list.js b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
index 3467e88119b..745f3404295 100644
--- a/app/assets/javascripts/ci_variable_list/ci_variable_list.js
+++ b/app/assets/javascripts/ci_variable_list/ci_variable_list.js
@@ -178,6 +178,10 @@ export default class VariableList {
     this.$container.find('.js-row-remove-button').attr('disabled', !isEnabled);
   }
 
+  hideValues() {
+    this.secretValues.updateDom(false);
+  }
+
   getAllData() {
     // Ignore the last empty row because we don't want to try persist
     // a blank variable and run into validation problems.
diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index 4b2f75fffde..2be63bd8c76 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -1,52 +1,36 @@
-/* eslint-disable func-names, wrap-iife, consistent-return,
-  no-return-assign, no-param-reassign, one-var-declaration-per-line, no-unused-vars,
-  prefer-template, object-shorthand, prefer-arrow-callback */
-
 import { pluralize } from './lib/utils/text_utility';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import Pager from './pager';
 import axios from './lib/utils/axios_utils';
 
-export default (function () {
-  const CommitsList = {};
-
-  CommitsList.timer = null;
+export default class CommitsList {
+  constructor(limit = 0) {
+    this.timer = null;
 
-  CommitsList.init = function (limit) {
     this.$contentList = $('.content_list');
 
-    $('body').on('click', '.day-commits-table li.commit', function (e) {
-      if (e.target.nodeName !== 'A') {
-        location.href = $(this).attr('url');
-        e.stopPropagation();
-        return false;
-      }
-    });
-
-    Pager.init(parseInt(limit, 10), false, false, this.processCommits);
+    Pager.init(parseInt(limit, 10), false, false, this.processCommits.bind(this));
 
     this.content = $('#commits-list');
     this.searchField = $('#commits-search');
     this.lastSearch = this.searchField.val();
-    return this.initSearch();
-  };
+    this.initSearch();
+  }
 
-  CommitsList.initSearch = function () {
+  initSearch() {
     this.timer = null;
-    return this.searchField.keyup((function (_this) {
-      return function () {
-        clearTimeout(_this.timer);
-        return _this.timer = setTimeout(_this.filterResults, 500);
-      };
-    })(this));
-  };
+    this.searchField.on('keyup', () => {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(this.filterResults.bind(this), 500);
+    });
+  }
 
-  CommitsList.filterResults = function () {
+  filterResults() {
     const form = $('.commits-search-form');
-    const search = CommitsList.searchField.val();
-    if (search === CommitsList.lastSearch) return Promise.resolve();
-    const commitsUrl = form.attr('action') + '?' + form.serialize();
-    CommitsList.content.fadeTo('fast', 0.5);
+    const search = this.searchField.val();
+    if (search === this.lastSearch) return Promise.resolve();
+    const commitsUrl = `${form.attr('action')}?${form.serialize()}`;
+    this.content.fadeTo('fast', 0.5);
     const params = form.serializeArray().reduce((acc, obj) => Object.assign(acc, {
       [obj.name]: obj.value,
     }), {});
@@ -55,9 +39,9 @@ export default (function () {
       params,
     })
       .then(({ data }) => {
-        CommitsList.lastSearch = search;
-        CommitsList.content.html(data.html);
-        CommitsList.content.fadeTo('fast', 1.0);
+        this.lastSearch = search;
+        this.content.html(data.html);
+        this.content.fadeTo('fast', 1.0);
 
         // Change url so if user reload a page - search results are saved
         history.replaceState({
@@ -65,16 +49,16 @@ export default (function () {
         }, document.title, commitsUrl);
       })
       .catch(() => {
-        CommitsList.content.fadeTo('fast', 1.0);
-        CommitsList.lastSearch = null;
+        this.content.fadeTo('fast', 1.0);
+        this.lastSearch = null;
       });
-  };
+  }
 
   // Prepare loaded data.
-  CommitsList.processCommits = (data) => {
+  processCommits(data) {
     let processedData = data;
     const $processedData = $(processedData);
-    const $commitsHeadersLast = CommitsList.$contentList.find('li.js-commit-header').last();
+    const $commitsHeadersLast = this.$contentList.find('li.js-commit-header').last();
     const lastShownDay = $commitsHeadersLast.data('day');
     const $loadedCommitsHeadersFirst = $processedData.filter('li.js-commit-header').first();
     const loadedShownDayFirst = $loadedCommitsHeadersFirst.data('day');
@@ -97,7 +81,5 @@ export default (function () {
     localTimeAgo($processedData.find('.js-timeago'));
 
     return processedData;
-  };
-
-  return CommitsList;
-})();
+  }
+}
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 99ac424c433..932e6c77f52 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -230,6 +230,11 @@ var Dispatcher;
             .then(callDefault)
             .catch(fail);
           break;
+        case 'projects:services:edit':
+          import('./pages/projects/services/edit')
+            .then(callDefault)
+            .catch(fail);
+          break;
         case 'projects:snippets:edit':
         case 'projects:snippets:update':
           import('./pages/projects/snippets/edit')
@@ -468,11 +473,6 @@ var Dispatcher;
             .then(callDefault)
             .catch(fail);
           break;
-        case 'users:show':
-          import('./pages/users/show')
-            .then(callDefault)
-            .catch(fail);
-          break;
         case 'admin:conversational_development_index:show':
           import('./pages/admin/conversational_development_index/show')
             .then(callDefault)
diff --git a/app/assets/javascripts/importer_status.js b/app/assets/javascripts/importer_status.js
index 134a503864e..35094f8e73b 100644
--- a/app/assets/javascripts/importer_status.js
+++ b/app/assets/javascripts/importer_status.js
@@ -59,29 +59,36 @@ class ImporterStatus {
     .catch(() => flash(__('An error occurred while importing project')));
   }
 
-  setAutoUpdate() {
-    return setInterval(() => $.get(this.jobsUrl, data => $.each(data, (i, job) => {
-      const jobItem = $(`#project_${job.id}`);
-      const statusField = jobItem.find('.job-status');
+  autoUpdate() {
+    return axios.get(this.jobsUrl)
+      .then(({ data = [] }) => {
+        data.forEach((job) => {
+          const jobItem = $(`#project_${job.id}`);
+          const statusField = jobItem.find('.job-status');
+
+          const spinner = '<i class="fa fa-spinner fa-spin"></i>';
 
-      const spinner = '<i class="fa fa-spinner fa-spin"></i>';
+          switch (job.import_status) {
+            case 'finished':
+              jobItem.removeClass('active').addClass('success');
+              statusField.html('<span><i class="fa fa-check"></i> done</span>');
+              break;
+            case 'scheduled':
+              statusField.html(`${spinner} scheduled`);
+              break;
+            case 'started':
+              statusField.html(`${spinner} started`);
+              break;
+            default:
+              statusField.html(job.import_status);
+              break;
+          }
+        });
+      });
+  }
 
-      switch (job.import_status) {
-        case 'finished':
-          jobItem.removeClass('active').addClass('success');
-          statusField.html('<span><i class="fa fa-check"></i> done</span>');
-          break;
-        case 'scheduled':
-          statusField.html(`${spinner} scheduled`);
-          break;
-        case 'started':
-          statusField.html(`${spinner} started`);
-          break;
-        default:
-          statusField.html(job.import_status);
-          break;
-      }
-    })), 4000);
+  setAutoUpdate() {
+    setInterval(this.autoUpdate.bind(this), 4000);
   }
 }
 
diff --git a/app/assets/javascripts/integrations/index.js b/app/assets/javascripts/integrations/index.js
deleted file mode 100644
index 10fe6bac0e8..00000000000
--- a/app/assets/javascripts/integrations/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable no-new */
-import IntegrationSettingsForm from './integration_settings_form';
-
-$(() => {
-  const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
-  integrationSettingsForm.init();
-});
diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
index 555725cbe12..ba1d8e4d8db 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
@@ -1,13 +1,13 @@
 <script>
   import axios from '~/lib/utils/axios_utils';
-  import Flash from '~/flash';
-  import modal from '~/vue_shared/components/modal.vue';
-  import { s__ } from '~/locale';
+  import createFlash from '~/flash';
+  import GlModal from '~/vue_shared/components/gl_modal.vue';
   import { redirectTo } from '~/lib/utils/url_utility';
+  import { s__ } from '~/locale';
 
   export default {
     components: {
-      modal,
+      GlModal,
     },
     props: {
       url: {
@@ -17,7 +17,7 @@
     },
     computed: {
       text() {
-        return s__('AdminArea|You’re about to stop all jobs. This will halt all current jobs that are running.');
+        return s__('AdminArea|You’re about to stop all jobs.This will halt all current jobs that are running.');
       },
     },
     methods: {
@@ -28,7 +28,7 @@
             redirectTo(response.request.responseURL);
           })
           .catch((error) => {
-            Flash(s__('AdminArea|Stopping jobs failed'));
+            createFlash(s__('AdminArea|Stopping jobs failed'));
             throw error;
           });
       },
@@ -37,11 +37,13 @@
 </script>
 
 <template>
-  <modal
+  <gl-modal
     id="stop-jobs-modal"
-    :title="s__('AdminArea|Stop all jobs?')"
-    :text="text"
-    kind="danger"
-    :primary-button-label="s__('AdminArea|Stop jobs')"
-    @submit="onSubmit" />
+    :header-title-text="s__('AdminArea|Stop all jobs?')"
+    footer-primary-button-variant="danger"
+    :footer-primary-button-text="s__('AdminArea|Stop jobs')"
+    @submit="onSubmit"
+  >
+    {{ text }}
+  </gl-modal>
 </template>
diff --git a/app/assets/javascripts/pages/admin/jobs/index/index.js b/app/assets/javascripts/pages/admin/jobs/index/index.js
index 0e004bd9174..31d58eabaaf 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/index.js
+++ b/app/assets/javascripts/pages/admin/jobs/index/index.js
@@ -8,22 +8,23 @@ Vue.use(Translate);
 
 export default () => {
   const stopJobsButton = document.getElementById('stop-jobs-button');
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: '#stop-jobs-modal',
-    components: {
-      stopJobsModal,
-    },
-    mounted() {
-      stopJobsButton.classList.remove('disabled');
-    },
-    render(createElement) {
-      return createElement('stop-jobs-modal', {
-        props: {
-          url: stopJobsButton.dataset.url,
-        },
-      });
-    },
-  });
+  if (stopJobsButton) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: '#stop-jobs-modal',
+      components: {
+        stopJobsModal,
+      },
+      mounted() {
+        stopJobsButton.classList.remove('disabled');
+      },
+      render(createElement) {
+        return createElement('stop-jobs-modal', {
+          props: {
+            url: stopJobsButton.dataset.url,
+          },
+        });
+      },
+    });
+  }
 };
diff --git a/app/assets/javascripts/pages/projects/commits/show/index.js b/app/assets/javascripts/pages/projects/commits/show/index.js
index 90b5882a24f..6110fda17de 100644
--- a/app/assets/javascripts/pages/projects/commits/show/index.js
+++ b/app/assets/javascripts/pages/projects/commits/show/index.js
@@ -3,7 +3,7 @@ import GpgBadges from '~/gpg_badges';
 import ShortcutsNavigation from '~/shortcuts_navigation';
 
 export default () => {
-  CommitsList.init(document.querySelector('.js-project-commits-show').dataset.commitsLimit);
+  new CommitsList(document.querySelector('.js-project-commits-show').dataset.commitsLimit); // eslint-disable-line no-new
   new ShortcutsNavigation(); // eslint-disable-line no-new
   GpgBadges.fetch();
 };
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js
new file mode 100644
index 00000000000..d65be6bc69e
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/create/index.js
@@ -0,0 +1,3 @@
+import initForm from '../shared/init_form';
+
+document.addEventListener('DOMContentLoaded', initForm);
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js
new file mode 100644
index 00000000000..d65be6bc69e
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/edit/index.js
@@ -0,0 +1,3 @@
+import initForm from '../shared/init_form';
+
+document.addEventListener('DOMContentLoaded', initForm);
diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
index a6c945e22b0..544360dcd51 100644
--- a/app/assets/javascripts/pipeline_schedules/pipeline_schedules_index_bundle.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import PipelineSchedulesCallout from './components/pipeline_schedules_callout.vue';
+import PipelineSchedulesCallout from '../shared/components/pipeline_schedules_callout.vue';
 
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#pipeline-schedules-callout',
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js
new file mode 100644
index 00000000000..d65be6bc69e
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/new/index.js
@@ -0,0 +1,3 @@
+import initForm from '../shared/init_form';
+
+document.addEventListener('DOMContentLoaded', initForm);
diff --git a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
index 2d18fa2044b..2d18fa2044b 100644
--- a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue
diff --git a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
index aa04a0ac47a..77508e62cef 100644
--- a/app/assets/javascripts/pipeline_schedules/components/pipeline_schedules_callout.vue
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue
@@ -1,7 +1,7 @@
 <script>
   import Vue from 'vue';
   import Cookies from 'js-cookie';
-  import Translate from '../../vue_shared/translate';
+  import Translate from '../../../../../vue_shared/translate';
   import illustrationSvg from '../icons/intro_illustration.svg';
 
   Vue.use(Translate);
diff --git a/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js
index 0c3926d76b5..0c3926d76b5 100644
--- a/app/assets/javascripts/pipeline_schedules/components/target_branch_dropdown.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/target_branch_dropdown.js
diff --git a/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
index 95ed9c7dc21..95ed9c7dc21 100644
--- a/app/assets/javascripts/pipeline_schedules/components/timezone_dropdown.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js
diff --git a/app/assets/javascripts/pipeline_schedules/icons/intro_illustration.svg b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg
index 26d1ff97b3e..26d1ff97b3e 100644
--- a/app/assets/javascripts/pipeline_schedules/icons/intro_illustration.svg
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg
diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
index 0b1a81bae13..cfd30d6053f 100644
--- a/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/init_form.js
@@ -1,10 +1,10 @@
 import Vue from 'vue';
-import Translate from '../vue_shared/translate';
-import GlFieldErrors from '../gl_field_errors';
+import Translate from '../../../../vue_shared/translate';
+import GlFieldErrors from '../../../../gl_field_errors';
 import intervalPatternInput from './components/interval_pattern_input.vue';
 import TimezoneDropdown from './components/timezone_dropdown';
 import TargetBranchDropdown from './components/target_branch_dropdown';
-import setupNativeFormVariableList from '../ci_variable_list/native_form_variable_list';
+import setupNativeFormVariableList from '../../../../ci_variable_list/native_form_variable_list';
 
 Vue.use(Translate);
 
@@ -27,7 +27,7 @@ function initIntervalPatternInput() {
   });
 }
 
-document.addEventListener('DOMContentLoaded', () => {
+export default () => {
   /* Most of the form is written in haml, but for fields with more complex behaviors,
    * you should mount individual Vue components here. If at some point components need
    * to share state, it may make sense to refactor the whole form to Vue */
@@ -46,4 +46,4 @@ document.addEventListener('DOMContentLoaded', () => {
     container: $('.js-ci-variable-list-section'),
     formField: 'schedule',
   });
-});
+};
diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js b/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js
new file mode 100644
index 00000000000..d65be6bc69e
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/pipeline_schedules/update/index.js
@@ -0,0 +1,3 @@
+import initForm from '../shared/init_form';
+
+document.addEventListener('DOMContentLoaded', initForm);
diff --git a/app/assets/javascripts/pages/projects/pipelines/charts/index.js b/app/assets/javascripts/pages/projects/pipelines/charts/index.js
new file mode 100644
index 00000000000..c1dafda0e24
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/pipelines/charts/index.js
@@ -0,0 +1,56 @@
+import Chart from 'vendor/Chart';
+
+const options = {
+  scaleOverlay: true,
+  responsive: true,
+  maintainAspectRatio: false,
+};
+
+const buildChart = (chartScope) => {
+  const data = {
+    labels: chartScope.labels,
+    datasets: [{
+      fillColor: '#707070',
+      strokeColor: '#707070',
+      pointColor: '#707070',
+      pointStrokeColor: '#EEE',
+      data: chartScope.totalValues,
+    },
+    {
+      fillColor: '#1aaa55',
+      strokeColor: '#1aaa55',
+      pointColor: '#1aaa55',
+      pointStrokeColor: '#fff',
+      data: chartScope.successValues,
+    },
+    ],
+  };
+  const ctx = $(`#${chartScope.scope}Chart`).get(0).getContext('2d');
+
+  new Chart(ctx).Line(data, options);
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  const chartTimesData = JSON.parse(document.getElementById('pipelinesTimesChartsData').innerHTML);
+  const chartsData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
+  const data = {
+    labels: chartTimesData.labels,
+    datasets: [{
+      fillColor: 'rgba(220,220,220,0.5)',
+      strokeColor: 'rgba(220,220,220,1)',
+      barStrokeWidth: 1,
+      barValueSpacing: 1,
+      barDatasetSpacing: 1,
+      data: chartTimesData.values,
+    }],
+  };
+
+  if (window.innerWidth < 768) {
+    // Scale fonts if window width lower than 768px (iPad portrait)
+    options.scaleFontSize = 8;
+  }
+
+  new Chart($('#build_timesChart').get(0).getContext('2d')).Bar(data, options);
+
+  chartsData.forEach(scope => buildChart(scope));
+});
diff --git a/app/assets/javascripts/pages/projects/services/edit/index.js b/app/assets/javascripts/pages/projects/services/edit/index.js
new file mode 100644
index 00000000000..5c73171e62e
--- /dev/null
+++ b/app/assets/javascripts/pages/projects/services/edit/index.js
@@ -0,0 +1,13 @@
+import IntegrationSettingsForm from '~/integrations/integration_settings_form';
+import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
+
+export default () => {
+  const prometheusSettingsWrapper = document.querySelector('.js-prometheus-metrics-monitoring');
+  const integrationSettingsForm = new IntegrationSettingsForm('.js-integration-settings-form');
+  integrationSettingsForm.init();
+
+  if (prometheusSettingsWrapper) {
+    const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
+    prometheusMetrics.loadActiveMetrics();
+  }
+};
diff --git a/app/assets/javascripts/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 57306322aa4..57306322aa4 100644
--- a/app/assets/javascripts/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
diff --git a/app/assets/javascripts/users/index.js b/app/assets/javascripts/pages/users/index.js
index 9fd8452a2b6..899dcd42e37 100644
--- a/app/assets/javascripts/users/index.js
+++ b/app/assets/javascripts/pages/users/index.js
@@ -1,3 +1,4 @@
+import UserCallout from '~/user_callout';
 import Cookies from 'js-cookie';
 import UserTabs from './user_tabs';
 
@@ -22,4 +23,5 @@ document.addEventListener('DOMContentLoaded', () => {
   const page = $('body').attr('data-page');
   const action = page.split(':')[1];
   initUserProfile(action);
+  new UserCallout(); // eslint-disable-line no-new
 });
diff --git a/app/assets/javascripts/pages/users/show/index.js b/app/assets/javascripts/pages/users/show/index.js
deleted file mode 100644
index f18f98b4e9a..00000000000
--- a/app/assets/javascripts/pages/users/show/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import UserCallout from '~/user_callout';
-
-export default () => new UserCallout();
diff --git a/app/assets/javascripts/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index e13b9839a20..c1217623467 100644
--- a/app/assets/javascripts/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -1,9 +1,9 @@
-import axios from '../lib/utils/axios_utils';
-import Activities from '../activities';
+import axios from '~/lib/utils/axios_utils';
+import Activities from '~/activities';
+import { localTimeAgo } from '~/lib/utils/datetime_utility';
+import { __ } from '~/locale';
+import flash from '~/flash';
 import ActivityCalendar from './activity_calendar';
-import { localTimeAgo } from '../lib/utils/datetime_utility';
-import { __ } from '../locale';
-import flash from '../flash';
 
 /**
  * UserTabs
diff --git a/app/assets/javascripts/pipelines/pipelines_charts.js b/app/assets/javascripts/pipelines/pipelines_charts.js
deleted file mode 100644
index 821aa7e229f..00000000000
--- a/app/assets/javascripts/pipelines/pipelines_charts.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import Chart from 'vendor/Chart';
-
-document.addEventListener('DOMContentLoaded', () => {
-  const chartData = JSON.parse(document.getElementById('pipelinesChartsData').innerHTML);
-  const buildChart = (chartScope) => {
-    const data = {
-      labels: chartScope.labels,
-      datasets: [{
-        fillColor: '#707070',
-        strokeColor: '#707070',
-        pointColor: '#707070',
-        pointStrokeColor: '#EEE',
-        data: chartScope.totalValues,
-      },
-      {
-        fillColor: '#1aaa55',
-        strokeColor: '#1aaa55',
-        pointColor: '#1aaa55',
-        pointStrokeColor: '#fff',
-        data: chartScope.successValues,
-      },
-      ],
-    };
-    const ctx = $(`#${chartScope.scope}Chart`).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).Line(data, options);
-  };
-
-  chartData.forEach(scope => buildChart(scope));
-});
diff --git a/app/assets/javascripts/pipelines/pipelines_times.js b/app/assets/javascripts/pipelines/pipelines_times.js
deleted file mode 100644
index b5e7a0e53d9..00000000000
--- a/app/assets/javascripts/pipelines/pipelines_times.js
+++ /dev/null
@@ -1,27 +0,0 @@
-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/assets/javascripts/prometheus_metrics/index.js b/app/assets/javascripts/prometheus_metrics/index.js
deleted file mode 100644
index a0c43c5abe1..00000000000
--- a/app/assets/javascripts/prometheus_metrics/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import PrometheusMetrics from './prometheus_metrics';
-
-$(() => {
-  const prometheusMetrics = new PrometheusMetrics('.js-prometheus-metrics-monitoring');
-  prometheusMetrics.loadActiveMetrics();
-});
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
new file mode 100644
index 00000000000..67c9181c7b1
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -0,0 +1,106 @@
+<script>
+  const buttonVariants = [
+    'danger',
+    'primary',
+    'success',
+    'warning',
+  ];
+
+  export default {
+    name: 'GlModal',
+
+    props: {
+      id: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      headerTitleText: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      footerPrimaryButtonVariant: {
+        type: String,
+        required: false,
+        default: 'primary',
+        validator: value => buttonVariants.indexOf(value) !== -1,
+      },
+      footerPrimaryButtonText: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+
+    methods: {
+      emitCancel(event) {
+        this.$emit('cancel', event);
+      },
+      emitSubmit(event) {
+        this.$emit('submit', event);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div
+    :id="id"
+    class="modal fade"
+    tabindex="-1"
+    role="dialog"
+  >
+    <div
+      class="modal-dialog"
+      role="document"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="header">
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              :aria-label="s__('Modal|Close')"
+              @click="emitCancel($event)"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <h4 class="modal-title">
+              <slot name="title">
+                {{ headerTitleText }}
+              </slot>
+            </h4>
+          </slot>
+        </div>
+
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+
+        <div class="modal-footer">
+          <slot name="footer">
+            <button
+              type="button"
+              class="btn"
+              data-dismiss="modal"
+              @click="emitCancel($event)"
+            >
+              {{ s__('Modal|Cancel') }}
+            </button>
+            <button
+              type="button"
+              class="btn"
+              :class="`btn-${footerPrimaryButtonVariant}`"
+              data-dismiss="modal"
+              @click="emitSubmit($event)"
+            >
+              {{ footerPrimaryButtonText }}
+            </button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index dcd98cb522f..7e829826eba 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -255,8 +255,6 @@ ul.controls {
     }
 
     .author_link {
-      display: inline-block;
-
       .avatar-inline {
         margin-left: 0;
         margin-right: 0;