Add latest changes from gitlab-org/gitlab@master

6 files changed, 115 insertions, 59 deletions

diff --git a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
index 1f878a113fe..4ff29cd581b 100644
--- a/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel_builder.vue
@@ -11,12 +11,13 @@ import {
 } from '@gitlab/ui';
 import DashboardPanel from './dashboard_panel.vue';
 
-const initialYml = `title:
-y_label:
+const initialYml = `title: Go heap size
 type: area-chart
+y_axis:
+  format: 'bytes'
 metrics:
-- query_range:
-  label:
+  - metric_id: 'go_memstats_alloc_bytes_1'
+    query_range: 'go_memstats_alloc_bytes'
 `;
 
 export default {
diff --git a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
index 040fce1bec2..aed27b5ea51 100644
--- a/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
+++ b/app/assets/javascripts/monitoring/components/dashboards_dropdown.vue
@@ -2,10 +2,10 @@
 import { mapState, mapGetters } from 'vuex';
 import {
   GlIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownDivider,
+  GlNewDropdown,
+  GlNewDropdownItem,
+  GlNewDropdownHeader,
+  GlNewDropdownDivider,
   GlSearchBoxByType,
   GlModalDirective,
 } from '@gitlab/ui';
@@ -17,10 +17,10 @@ const events = {
 export default {
   components: {
     GlIcon,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownDivider,
+    GlNewDropdown,
+    GlNewDropdownItem,
+    GlNewDropdownHeader,
+    GlNewDropdownDivider,
     GlSearchBoxByType,
   },
   directives: {
@@ -73,16 +73,13 @@ export default {
 };
 </script>
 <template>
-  <gl-deprecated-dropdown
+  <gl-new-dropdown
     toggle-class="dropdown-menu-toggle"
     menu-class="monitor-dashboard-dropdown-menu"
     :text="selectedDashboardText"
   >
     <div class="d-flex flex-column overflow-hidden">
-      <gl-deprecated-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{
-        __('Dashboard')
-      }}</gl-deprecated-dropdown-header>
-      <gl-deprecated-dropdown-divider />
+      <gl-new-dropdown-header>{{ __('Dashboard') }}</gl-new-dropdown-header>
       <gl-search-box-by-type
         ref="monitorDashboardsDropdownSearch"
         v-model="searchTerm"
@@ -90,33 +87,36 @@ export default {
       />
 
       <div class="flex-fill overflow-auto">
-        <gl-deprecated-dropdown-item
+        <gl-new-dropdown-item
           v-for="dashboard in starredDashboards"
           :key="dashboard.path"
-          :active="dashboard.path === selectedDashboardPath"
-          active-class="is-active"
+          :is-check-item="true"
+          :is-checked="dashboard.path === selectedDashboardPath"
           @click="selectDashboard(dashboard)"
         >
-          <div class="d-flex">
-            {{ dashboardDisplayName(dashboard) }}
-            <gl-icon class="text-muted ml-auto" name="star" />
+          <div class="gl-display-flex">
+            <div class="gl-flex-grow-1 gl-min-w-0">
+              <div class="gl-word-break-all">
+                {{ dashboardDisplayName(dashboard) }}
+              </div>
+            </div>
+            <gl-icon class="text-muted gl-flex-shrink-0" name="star" />
           </div>
-        </gl-deprecated-dropdown-item>
-
-        <gl-deprecated-dropdown-divider
+        </gl-new-dropdown-item>
+        <gl-new-dropdown-divider
           v-if="starredDashboards.length && nonStarredDashboards.length"
           ref="starredListDivider"
         />
 
-        <gl-deprecated-dropdown-item
+        <gl-new-dropdown-item
           v-for="dashboard in nonStarredDashboards"
           :key="dashboard.path"
-          :active="dashboard.path === selectedDashboardPath"
-          active-class="is-active"
+          :is-check-item="true"
+          :is-checked="dashboard.path === selectedDashboardPath"
           @click="selectDashboard(dashboard)"
         >
           {{ dashboardDisplayName(dashboard) }}
-        </gl-deprecated-dropdown-item>
+        </gl-new-dropdown-item>
       </div>
 
       <div
@@ -127,5 +127,5 @@ export default {
         {{ __('No matching results') }}
       </div>
     </div>
-  </gl-deprecated-dropdown>
+  </gl-new-dropdown>
 </template>
diff --git a/app/assets/javascripts/monitoring/requests/index.js b/app/assets/javascripts/monitoring/requests/index.js
index 962620862e6..2be8048327f 100644
--- a/app/assets/javascripts/monitoring/requests/index.js
+++ b/app/assets/javascripts/monitoring/requests/index.js
@@ -41,12 +41,3 @@ export const getPrometheusQueryData = (prometheusEndpoint, params) =>
       }
       throw error;
     });
-
-// eslint-disable-next-line no-unused-vars
-export function getPanelJson(panelPreviewEndpoint, panelPreviewYml) {
-  // TODO Use a real backend when it's available
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/228758
-
-  // eslint-disable-next-line @gitlab/require-i18n-strings
-  return Promise.reject(new Error('API Not implemented.'));
-}
diff --git a/app/assets/javascripts/monitoring/stores/actions.js b/app/assets/javascripts/monitoring/stores/actions.js
index a569eec6f91..509f8edeb2f 100644
--- a/app/assets/javascripts/monitoring/stores/actions.js
+++ b/app/assets/javascripts/monitoring/stores/actions.js
@@ -15,7 +15,8 @@ import getAnnotations from '../queries/getAnnotations.query.graphql';
 import getDashboardValidationWarnings from '../queries/getDashboardValidationWarnings.query.graphql';
 import { convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
 import { s__, sprintf } from '../../locale';
-import { getDashboard, getPrometheusQueryData, getPanelJson } from '../requests';
+import { getDashboard, getPrometheusQueryData } from '../requests';
+import { defaultTimeRange } from '~/vue_shared/constants';
 
 import { ENVIRONMENT_AVAILABLE_STATE, OVERVIEW_DASHBOARD_PATH, VARIABLE_TYPES } from '../constants';
 
@@ -33,6 +34,20 @@ function prometheusMetricQueryParams(timeRange) {
   };
 }
 
+/**
+ * Extract error messages from API or HTTP request errors.
+ *
+ * - API errors are in `error.response.data.message`
+ * - HTTP (axios) errors are in `error.messsage`
+ *
+ * @param {Object} error
+ * @returns {String} User friendly error message
+ */
+function extractErrorMessage(error) {
+  const message = error?.response?.data?.message;
+  return message ?? error.message;
+}
+
 // Setup
 
 export const setGettingStartedEmptyState = ({ commit }) => {
@@ -482,21 +497,38 @@ export const fetchPanelPreview = ({ state, commit, dispatch }, panelPreviewYml)
   }
 
   commit(types.REQUEST_PANEL_PREVIEW, panelPreviewYml);
-  return getPanelJson(state.panelPreviewEndpoint, panelPreviewYml)
-    .then(data => {
+  return axios
+    .post(state.panelPreviewEndpoint, { panel_yaml: panelPreviewYml })
+    .then(({ data }) => {
       commit(types.RECEIVE_PANEL_PREVIEW_SUCCESS, data);
 
       dispatch('fetchPanelPreviewMetrics');
     })
     .catch(error => {
-      commit(types.RECEIVE_PANEL_PREVIEW_FAILURE, error);
+      commit(types.RECEIVE_PANEL_PREVIEW_FAILURE, extractErrorMessage(error));
     });
 };
 
-export const fetchPanelPreviewMetrics = () => {
-  // TODO Use a axios mock instead of spy when backend is implemented
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/228758
+export const fetchPanelPreviewMetrics = ({ state, commit }) => {
+  const defaultQueryParams = prometheusMetricQueryParams(defaultTimeRange);
+
+  state.panelPreviewGraphData.metrics.forEach((metric, index) => {
+    commit(types.REQUEST_PANEL_PREVIEW_METRIC_RESULT, { index });
 
-  // eslint-disable-next-line @gitlab/require-i18n-strings
-  throw new Error('Not implemented');
+    const params = { ...defaultQueryParams };
+    if (metric.step) {
+      params.step = metric.step;
+    }
+    return getPrometheusQueryData(metric.prometheusEndpointPath, params)
+      .then(data => {
+        commit(types.RECEIVE_PANEL_PREVIEW_METRIC_RESULT_SUCCESS, { index, data });
+      })
+      .catch(error => {
+        Sentry.captureException(error);
+
+        commit(types.RECEIVE_PANEL_PREVIEW_METRIC_RESULT_FAILURE, { index, error });
+        // Continue to throw error so the panel builder can notify using createFlash
+        throw error;
+      });
+  });
 };
diff --git a/app/assets/javascripts/monitoring/stores/mutation_types.js b/app/assets/javascripts/monitoring/stores/mutation_types.js
index 657ceea8644..ccb2b075012 100644
--- a/app/assets/javascripts/monitoring/stores/mutation_types.js
+++ b/app/assets/javascripts/monitoring/stores/mutation_types.js
@@ -51,3 +51,9 @@ export const SET_EXPANDED_PANEL = 'SET_EXPANDED_PANEL';
 export const REQUEST_PANEL_PREVIEW = 'REQUEST_PANEL_PREVIEW';
 export const RECEIVE_PANEL_PREVIEW_SUCCESS = 'RECEIVE_PANEL_PREVIEW_SUCCESS';
 export const RECEIVE_PANEL_PREVIEW_FAILURE = 'RECEIVE_PANEL_PREVIEW_FAILURE';
+
+export const REQUEST_PANEL_PREVIEW_METRIC_RESULT = 'REQUEST_PANEL_PREVIEW_METRIC_RESULT';
+export const RECEIVE_PANEL_PREVIEW_METRIC_RESULT_SUCCESS =
+  'RECEIVE_PANEL_PREVIEW_METRIC_RESULT_SUCCESS';
+export const RECEIVE_PANEL_PREVIEW_METRIC_RESULT_FAILURE =
+  'RECEIVE_PANEL_PREVIEW_METRIC_RESULT_FAILURE';
diff --git a/app/assets/javascripts/monitoring/stores/mutations.js b/app/assets/javascripts/monitoring/stores/mutations.js
index d71b9eaa928..5fe005be40e 100644
--- a/app/assets/javascripts/monitoring/stores/mutations.js
+++ b/app/assets/javascripts/monitoring/stores/mutations.js
@@ -53,6 +53,14 @@ const emptyStateFromError = error => {
   return metricStates.UNKNOWN_ERROR;
 };
 
+export const metricStateFromData = data => {
+  if (data?.result?.length) {
+    const result = normalizeQueryResponseData(data);
+    return { state: metricStates.OK, result: Object.freeze(result) };
+  }
+  return { state: metricStates.NO_DATA, result: null };
+};
+
 export default {
   /**
    * Dashboard panels structure and global state
@@ -154,17 +162,11 @@ export default {
   },
   [types.RECEIVE_METRIC_RESULT_SUCCESS](state, { metricId, data }) {
     const metric = findMetricInDashboard(metricId, state.dashboard);
-    metric.loading = false;
-
-    if (!data.result || data.result.length === 0) {
-      metric.state = metricStates.NO_DATA;
-      metric.result = null;
-    } else {
-      const result = normalizeQueryResponseData(data);
+    const metricState = metricStateFromData(data);
 
-      metric.state = metricStates.OK;
-      metric.result = Object.freeze(result);
-    }
+    metric.loading = false;
+    metric.state = metricState.state;
+    metric.result = metricState.result;
   },
   [types.RECEIVE_METRIC_RESULT_FAILURE](state, { metricId, error }) {
     const metric = findMetricInDashboard(metricId, state.dashboard);
@@ -238,4 +240,28 @@ export default {
     state.panelPreviewGraphData = null;
     state.panelPreviewError = error;
   },
+
+  [types.REQUEST_PANEL_PREVIEW_METRIC_RESULT](state, { index }) {
+    const metric = state.panelPreviewGraphData.metrics[index];
+
+    metric.loading = true;
+    if (!metric.result) {
+      metric.state = metricStates.LOADING;
+    }
+  },
+  [types.RECEIVE_PANEL_PREVIEW_METRIC_RESULT_SUCCESS](state, { index, data }) {
+    const metric = state.panelPreviewGraphData.metrics[index];
+    const metricState = metricStateFromData(data);
+
+    metric.loading = false;
+    metric.state = metricState.state;
+    metric.result = metricState.result;
+  },
+  [types.RECEIVE_PANEL_PREVIEW_METRIC_RESULT_FAILURE](state, { index, error }) {
+    const metric = state.panelPreviewGraphData.metrics[index];
+
+    metric.loading = false;
+    metric.state = emptyStateFromError(error);
+    metric.result = null;
+  },
 };