Add latest changes from gitlab-org/gitlab@master

10 files changed, 84 insertions, 25 deletions

diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 908dc730aa4..735cbb8e356 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -2,6 +2,8 @@ import $ from 'jquery';
 import _ from 'underscore';
 import axios from './lib/utils/axios_utils';
 import { joinPaths } from './lib/utils/url_utility';
+import flash from '~/flash';
+import { __ } from '~/locale';
 
 const Api = {
   groupsPath: '/api/:version/groups.json',
@@ -29,6 +31,7 @@ const Api = {
   usersPath: '/api/:version/users.json',
   userPath: '/api/:version/users/:id',
   userStatusPath: '/api/:version/users/:id/status',
+  userProjectsPath: '/api/:version/users/:id/projects',
   userPostStatusPath: '/api/:version/user/status',
   commitPath: '/api/:version/projects/:id/repository/commits',
   applySuggestionPath: '/api/:version/suggestions/:id/apply',
@@ -239,7 +242,8 @@ const Api = {
       .get(url, {
         params: Object.assign({}, defaults, options),
       })
-      .then(({ data }) => callback(data));
+      .then(({ data }) => callback(data))
+      .catch(() => flash(__('Something went wrong while fetching projects')));
   },
 
   commitMultiple(id, data) {
@@ -348,6 +352,20 @@ const Api = {
     });
   },
 
+  userProjects(userId, query, options, callback) {
+    const url = Api.buildUrl(Api.userProjectsPath).replace(':id', userId);
+    const defaults = {
+      search: query,
+      per_page: 20,
+    };
+    return axios
+      .get(url, {
+        params: Object.assign({}, defaults, options),
+      })
+      .then(({ data }) => callback(data))
+      .catch(() => flash(__('Something went wrong while fetching projects')));
+  },
+
   branches(id, query = '', options = {}) {
     const url = Api.buildUrl(this.createBranchPath).replace(':id', encodeURIComponent(id));
 
diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 17251ccdffb..d471dcb1b06 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -13,6 +13,7 @@ import ClustersService from './services/clusters_service';
 import ClustersStore from './stores/clusters_store';
 import Applications from './components/applications.vue';
 import setupToggleButtons from '../toggle_buttons';
+import initProjectSelectDropdown from '~/project_select';
 
 const Environments = () => import('ee_component/clusters/components/environments.vue');
 
@@ -110,8 +111,10 @@ export default class Clusters {
       this.ingressDomainHelpText &&
       this.ingressDomainHelpText.querySelector('.js-ingress-domain-snippet');
 
+    initProjectSelectDropdown();
     Clusters.initDismissableCallout();
     initSettingsPanels();
+
     const toggleButtonsContainer = document.querySelector('.js-cluster-enable-toggle-area');
     if (toggleButtonsContainer) {
       setupToggleButtons(toggleButtonsContainer);
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 725af920691..94c7bf1cee4 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -174,7 +174,7 @@ export default {
       return this.customMetricsAvailable && this.customMetricsPath.length;
     },
     ...mapState('monitoringDashboard', [
-      'groups',
+      'dashboard',
       'emptyState',
       'showEmptyState',
       'environments',
@@ -238,6 +238,7 @@ export default {
       'setGettingStartedEmptyState',
       'setEndpoints',
       'setDashboardEnabled',
+      'setPanelGroupMetrics',
     ]),
     chartsWithData(charts) {
       if (!this.useDashboardEndpoint) {
@@ -274,10 +275,17 @@ export default {
       this.$toast.show(__('Link copied'));
     },
     // TODO: END
-    removeGraph(metrics, graphIndex) {
-      // At present graphs will not be removed, they should removed using the vuex store
-      // See https://gitlab.com/gitlab-org/gitlab/issues/27835
-      metrics.splice(graphIndex, 1);
+    updateMetrics(key, metrics) {
+      this.setPanelGroupMetrics({
+        metrics,
+        key,
+      });
+    },
+    removeMetric(key, metrics, graphIndex) {
+      this.setPanelGroupMetrics({
+        metrics: metrics.filter((v, i) => i !== graphIndex),
+        key,
+      });
     },
     showInvalidDateError() {
       createFlash(s__('Metrics|Link contains an invalid time window.'));
@@ -447,7 +455,7 @@ export default {
 
     <div v-if="!showEmptyState">
       <graph-group
-        v-for="(groupData, index) in groups"
+        v-for="(groupData, index) in dashboard.panel_groups"
         :key="`${groupData.group}.${groupData.priority}`"
         :name="groupData.group"
         :show-panels="showPanels"
@@ -455,10 +463,11 @@ export default {
       >
         <template v-if="additionalPanelTypesEnabled">
           <vue-draggable
-            :list="groupData.metrics"
+            :value="groupData.metrics"
             group="metrics-dashboard"
             :component-data="{ attrs: { class: 'row mx-0 w-100' } }"
             :disabled="!isRearrangingPanels"
+            @input="updateMetrics(groupData.key, $event)"
           >
             <div
               v-for="(graphData, graphIndex) in groupData.metrics"
@@ -470,7 +479,7 @@ export default {
                 <div
                   v-if="isRearrangingPanels"
                   class="draggable-remove js-draggable-remove p-2 w-100 position-absolute d-flex justify-content-end"
-                  @click="removeGraph(groupData.metrics, graphIndex)"
+                  @click="removeMetric(groupData.key, groupData.metrics, graphIndex)"
                 >
                   <a class="mx-2 p-2 draggable-remove-link" :aria-label="__('Remove')"
                     ><icon name="close"
diff --git a/app/assets/javascripts/monitoring/components/embed.vue b/app/assets/javascripts/monitoring/components/embed.vue
index 7857aaa6ecc..80e9b7a9c57 100644
--- a/app/assets/javascripts/monitoring/components/embed.vue
+++ b/app/assets/javascripts/monitoring/components/embed.vue
@@ -35,9 +35,9 @@ export default {
     };
   },
   computed: {
-    ...mapState('monitoringDashboard', ['groups', 'metricsWithData']),
+    ...mapState('monitoringDashboard', ['dashboard', 'metricsWithData']),
     charts() {
-      const groupWithMetrics = this.groups.find(group =>
+      const groupWithMetrics = this.dashboard.panel_groups.find(group =>
         group.metrics.find(chart => this.chartHasData(chart)),
       ) || { metrics: [] };
 
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 2cf34ddb45b..2f793a9e162 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -166,7 +166,7 @@ export const fetchPrometheusMetrics = ({ state, commit, dispatch }, params) => {
   commit(types.REQUEST_METRICS_DATA);
 
   const promises = [];
-  state.groups.forEach(group => {
+  state.dashboard.panel_groups.forEach(group => {
     group.panels.forEach(panel => {
       panel.metrics.forEach(metric => {
         promises.push(dispatch('fetchPrometheusMetric', { metric, params }));
@@ -221,5 +221,15 @@ export const fetchEnvironmentsData = ({ state, dispatch }) => {
     });
 };
 
+/**
+ * Set a new array of metrics to a panel group
+ * @param {*} data An object containing
+ *   - `key` with a unique panel key
+ *   - `metrics` with the metrics array
+ */
+export const setPanelGroupMetrics = ({ commit }, data) => {
+  commit(types.SET_PANEL_GROUP_METRICS, data);
+};
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/javascripts/monitoring/stores/mutation_types.js b/app/assets/javascripts/monitoring/stores/mutation_types.js
index 9c546427c6e..4d05fa7beb9 100644
--- a/app/assets/javascripts/monitoring/stores/mutation_types.js
+++ b/app/assets/javascripts/monitoring/stores/mutation_types.js
@@ -16,3 +16,4 @@ export const SET_ENDPOINTS = 'SET_ENDPOINTS';
 export const SET_GETTING_STARTED_EMPTY_STATE = 'SET_GETTING_STARTED_EMPTY_STATE';
 export const SET_NO_DATA_EMPTY_STATE = 'SET_NO_DATA_EMPTY_STATE';
 export const SET_SHOW_ERROR_BANNER = 'SET_SHOW_ERROR_BANNER';
+export const SET_PANEL_GROUP_METRICS = 'SET_PANEL_GROUP_METRICS';
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index 320b33d3d69..9e38314f8af 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
+import { slugify } from '~/lib/utils/text_utility';
 import * as types from './mutation_types';
-import { normalizeMetrics, sortMetrics, normalizeMetric, normalizeQueryResult } from './utils';
+import { normalizeMetrics, normalizeMetric, normalizeQueryResult } from './utils';
 
 const normalizePanel = panel => panel.metrics.map(normalizeMetric);
 
@@ -10,10 +11,12 @@ export default {
     state.showEmptyState = true;
   },
   [types.RECEIVE_METRICS_DATA_SUCCESS](state, groupData) {
-    state.groups = groupData.map(group => {
+    state.dashboard.panel_groups = groupData.map((group, i) => {
+      const key = `${slugify(group.group || 'default')}-${i}`;
       let { metrics = [], panels = [] } = group;
 
       // each panel has metric information that needs to be normalized
+
       panels = panels.map(panel => ({
         ...panel,
         metrics: normalizePanel(panel),
@@ -32,11 +35,12 @@ export default {
       return {
         ...group,
         panels,
-        metrics: normalizeMetrics(sortMetrics(metrics)),
+        key,
+        metrics: normalizeMetrics(metrics),
       };
     });
 
-    if (!state.groups.length) {
+    if (!state.dashboard.panel_groups.length) {
       state.emptyState = 'noData';
     } else {
       state.showEmptyState = false;
@@ -65,7 +69,7 @@ export default {
 
     state.showEmptyState = false;
 
-    state.groups.forEach(group => {
+    state.dashboard.panel_groups.forEach(group => {
       group.metrics.forEach(metric => {
         metric.queries.forEach(query => {
           if (query.metric_id === metricId) {
@@ -105,4 +109,8 @@ export default {
   [types.SET_SHOW_ERROR_BANNER](state, enabled) {
     state.showErrorBanner = enabled;
   },
+  [types.SET_PANEL_GROUP_METRICS](state, payload) {
+    const panelGroup = state.dashboard.panel_groups.find(pg => payload.key === pg.key);
+    panelGroup.metrics = payload.metrics;
+  },
 };
diff --git a/app/assets/javascripts/monitoring/stores/state.js b/app/assets/javascripts/monitoring/stores/state.js
index e894e988f6a..5d7c46ca0c5 100644
--- a/app/assets/javascripts/monitoring/stores/state.js
+++ b/app/assets/javascripts/monitoring/stores/state.js
@@ -12,7 +12,9 @@ export default () => ({
   emptyState: 'gettingStarted',
   showEmptyState: true,
   showErrorBanner: true,
-  groups: [],
+  dashboard: {
+    panel_groups: [],
+  },
   deploymentData: [],
   environments: [],
   metricsWithData: [],
diff --git a/app/assets/javascripts/monitoring/stores/utils.js b/app/assets/javascripts/monitoring/stores/utils.js
index a19829f0c65..8a396b15a31 100644
--- a/app/assets/javascripts/monitoring/stores/utils.js
+++ b/app/assets/javascripts/monitoring/stores/utils.js
@@ -82,12 +82,6 @@ export const normalizeMetric = (metric = {}) =>
     'id',
   );
 
-export const sortMetrics = metrics =>
-  _.chain(metrics)
-    .sortBy('title')
-    .sortBy('weight')
-    .value();
-
 export const normalizeQueryResult = timeSeries => {
   let normalizedResult = {};
 
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index 0fbb7e5ca42..81f2fc2e686 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -9,7 +9,9 @@ const projectSelect = () => {
   $('.ajax-project-select').each(function(i, select) {
     var placeholder;
     const simpleFilter = $(select).data('simpleFilter') || false;
+    const isInstantiated = $(select).data('select2');
     this.groupId = $(select).data('groupId');
+    this.userId = $(select).data('userId');
     this.includeGroups = $(select).data('includeGroups');
     this.allProjects = $(select).data('allProjects') || false;
     this.orderBy = $(select).data('orderBy') || 'id';
@@ -63,6 +65,18 @@ const projectSelect = () => {
               },
               projectsCallback,
             );
+          } else if (_this.userId) {
+            return Api.userProjects(
+              _this.userId,
+              query.term,
+              {
+                with_issues_enabled: _this.withIssuesEnabled,
+                with_merge_requests_enabled: _this.withMergeRequestsEnabled,
+                with_shared: _this.withShared,
+                include_subgroups: _this.includeProjectsInSubgroups,
+              },
+              projectsCallback,
+            );
           } else {
             return Api.projects(
               query.term,
@@ -96,7 +110,7 @@ const projectSelect = () => {
 
       dropdownCssClass: 'ajax-project-dropdown',
     });
-    if (simpleFilter) return select;
+    if (isInstantiated || simpleFilter) return select;
     return new ProjectSelectComboButton(select);
   });
 };