Add latest changes from gitlab-org/gitlab@master

8 files changed, 50 insertions, 33 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index 531d23bb6e5..0ceea21fda3 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -250,7 +250,7 @@ export default {
     },
   },
   created() {
-    this.setEndpoints({
+    this.setInitialState({
       metricsEndpoint: this.metricsEndpoint,
       deploymentsEndpoint: this.deploymentsEndpoint,
       dashboardEndpoint: this.dashboardEndpoint,
@@ -258,6 +258,7 @@ export default {
       currentDashboard: this.currentDashboard,
       projectPath: this.projectPath,
       logsPath: this.logsPath,
+      currentEnvironmentName: this.currentEnvironmentName,
     });
   },
   mounted() {
@@ -273,7 +274,7 @@ export default {
       'setTimeRange',
       'fetchData',
       'setGettingStartedEmptyState',
-      'setEndpoints',
+      'setInitialState',
       'setPanelGroupMetrics',
       'filterEnvironments',
     ]),
diff --git a/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue b/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue
index 8a44e6bd737..3f8b0f76997 100644
--- a/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue
+++ b/app/assets/javascripts/monitoring/components/embeds/metric_embed.vue
@@ -64,7 +64,10 @@ export default {
     },
   },
   mounted() {
-    this.setInitialState();
+    this.setInitialState({
+      dashboardEndpoint: removeTimeRangeParams(this.dashboardUrl),
+    });
+    this.setShowErrorBanner(false);
     this.setTimeRange(this.timeRange);
     this.fetchDashboard();
 
@@ -90,11 +93,8 @@ export default {
       fetchDashboard(dispatch, payload) {
         return dispatch(`${this.namespace}/fetchDashboard`, payload);
       },
-      setEndpoints(dispatch, payload) {
-        return dispatch(`${this.namespace}/setEndpoints`, payload);
-      },
-      setFeatureFlags(dispatch, payload) {
-        return dispatch(`${this.namespace}/setFeatureFlags`, payload);
+      setInitialState(dispatch, payload) {
+        return dispatch(`${this.namespace}/setInitialState`, payload);
       },
       setShowErrorBanner(dispatch, payload) {
         return dispatch(`${this.namespace}/setShowErrorBanner`, payload);
@@ -108,12 +108,6 @@ export default {
         this.elWidth = this.$el.clientWidth;
       }, sidebarAnimationDuration);
     },
-    setInitialState() {
-      this.setEndpoints({
-        dashboardEndpoint: removeTimeRangeParams(this.dashboardUrl),
-      });
-      this.setShowErrorBanner(false);
-    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/monitoring/constants.js b/app/assets/javascripts/monitoring/constants.js
index f9a911ddf03..3990a8d1f61 100644
--- a/app/assets/javascripts/monitoring/constants.js
+++ b/app/assets/javascripts/monitoring/constants.js
@@ -79,3 +79,28 @@ export const dateFormats = {
   timeOfDay: 'h:MM TT',
   default: 'dd mmm yyyy, h:MMTT',
 };
+
+/**
+ * These Vuex store properties are allowed to be
+ * replaced dynamically after component has been created
+ * and initial state has been set.
+ *
+ * Currently used in `receiveMetricsDashboardSuccess` action.
+ */
+export const endpointKeys = [
+  'metricsEndpoint',
+  'deploymentsEndpoint',
+  'dashboardEndpoint',
+  'dashboardsEndpoint',
+  'currentDashboard',
+  'projectPath',
+  'logsPath',
+];
+
+/**
+ * These Vuex store properties are set as soon as the
+ * dashboard component has been created. The values are
+ * passed as data-* attributes and received by dashboard
+ * as Vue props.
+ */
+export const initialStateKeys = [...endpointKeys, 'currentEnvironmentName'];
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index 7ea43d57039..86f416240c8 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -30,8 +30,8 @@ export const setGettingStartedEmptyState = ({ commit }) => {
   commit(types.SET_GETTING_STARTED_EMPTY_STATE);
 };
 
-export const setEndpoints = ({ commit }, endpoints) => {
-  commit(types.SET_ENDPOINTS, endpoints);
+export const setInitialState = ({ commit }, initialState) => {
+  commit(types.SET_INITIAL_STATE, initialState);
 };
 
 export const setTimeRange = ({ commit }, timeRange) => {
diff --git a/app/assets/javascripts/monitoring/stores/mutation_types.js b/app/assets/javascripts/monitoring/stores/mutation_types.js
index 8873142accc..09eb7dc1673 100644
--- a/app/assets/javascripts/monitoring/stores/mutation_types.js
+++ b/app/assets/javascripts/monitoring/stores/mutation_types.js
@@ -17,6 +17,7 @@ export const RECEIVE_METRIC_RESULT_FAILURE = 'RECEIVE_METRIC_RESULT_FAILURE';
 export const SET_TIME_RANGE = 'SET_TIME_RANGE';
 export const SET_ALL_DASHBOARDS = 'SET_ALL_DASHBOARDS';
 export const SET_ENDPOINTS = 'SET_ENDPOINTS';
+export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
 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';
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index 7aac98821c9..2e10d189087 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -3,7 +3,7 @@ import pick from 'lodash/pick';
 import * as types from './mutation_types';
 import { mapToDashboardViewModel, normalizeQueryResult } from './utils';
 import { BACKOFF_TIMEOUT } from '../../lib/utils/common_utils';
-import { metricStates } from '../constants';
+import { endpointKeys, initialStateKeys, metricStates } from '../constants';
 import httpStatusCodes from '~/lib/utils/http_status';
 
 /**
@@ -150,19 +150,11 @@ export default {
       state: emptyStateFromError(error),
     });
   },
+  [types.SET_INITIAL_STATE](state, initialState = {}) {
+    Object.assign(state, pick(initialState, initialStateKeys));
+  },
   [types.SET_ENDPOINTS](state, endpoints = {}) {
-    const endpointKeys = [
-      'metricsEndpoint',
-      'deploymentsEndpoint',
-      'dashboardEndpoint',
-      'dashboardsEndpoint',
-      'currentDashboard',
-      'projectPath',
-      'logsPath',
-    ];
-    Object.entries(pick(endpoints, endpointKeys)).forEach(([key, value]) => {
-      state[key] = value;
-    });
+    Object.assign(state, pick(endpoints, endpointKeys));
   },
   [types.SET_TIME_RANGE](state, timeRange) {
     state.timeRange = timeRange;
diff --git a/app/assets/javascripts/releases/components/app_index.vue b/app/assets/javascripts/releases/components/app_index.vue
index 511b3cda9c8..215a376fc76 100644
--- a/app/assets/javascripts/releases/components/app_index.vue
+++ b/app/assets/javascripts/releases/components/app_index.vue
@@ -103,7 +103,7 @@ export default {
     <div v-else-if="shouldRenderSuccessState" class="js-success-state">
       <release-block
         v-for="(release, index) in releases"
-        :key="release.tagName"
+        :key="index"
         :release="release"
         :class="{ 'linked-card': releases.length > 1 && index !== releases.length - 1 }"
       />
diff --git a/app/assets/javascripts/releases/components/release_block.vue b/app/assets/javascripts/releases/components/release_block.vue
index 515aa629476..58045b57d80 100644
--- a/app/assets/javascripts/releases/components/release_block.vue
+++ b/app/assets/javascripts/releases/components/release_block.vue
@@ -37,7 +37,11 @@ export default {
     };
   },
   computed: {
-    id() {
+    htmlId() {
+      if (!this.release.tagName) {
+        return null;
+      }
+
       return slugify(this.release.tagName);
     },
     assets() {
@@ -72,7 +76,7 @@ export default {
     this.renderGFM();
 
     const hash = getLocationHash();
-    if (hash && slugify(hash) === this.id) {
+    if (hash && slugify(hash) === this.htmlId) {
       this.isHighlighted = true;
       setTimeout(() => {
         this.isHighlighted = false;
@@ -89,7 +93,7 @@ export default {
 };
 </script>
 <template>
-  <div :id="id" :class="{ 'bg-line-target-blue': isHighlighted }" class="card release-block">
+  <div :id="htmlId" :class="{ 'bg-line-target-blue': isHighlighted }" class="card release-block">
     <release-block-header :release="release" />
     <div class="card-body">
       <div v-if="shouldRenderMilestoneInfo">