Fetch annotations for monitoring charts

Monitoring dashboard fetches all annotations
associated to it. This change is behind
metrics_dashboard_annotations feature flag until
the backend is implemented

app/assets/javascripts/lib/utils/common_utils.js

@@ -910,3 +910,18 @@ export const setCookie = (name, value) => Cookies.set(name, value, { expires: 36
 export const getCookie = name => Cookies.get(name);
 
 export const removeCookie = name => Cookies.remove(name);
+
+/**
+ * Returns the status of a feature flag.
+ * Currently, there is no way to access feature
+ * flags in Vuex other than directly tapping into
+ * window.gon.
+ *
+ * This should only be used on Vuex. If feature flags
+ * need to be accessed in Vue components consider
+ * using the Vue feature flag mixin.
+ *
+ * @param {String} flag Feature flag
+ * @returns {Boolean} on/off
+ */
+export const isFeatureFlagEnabled = flag => window.gon.features?.[flag];

app/assets/javascripts/monitoring/components/charts/time_series.vue

@@ -55,6 +55,11 @@ export default {
       required: false,
       default: () => [],
     },
+    annotations: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     projectPath: {
       type: String,
       required: false,
@@ -143,6 +148,7 @@ export default {
       return (this.option.series || []).concat(
         generateAnnotationsSeries({
           deployments: this.recentDeployments,
+          annotations: this.annotations,
         }),
       );
     },

app/assets/javascripts/monitoring/components/dashboard.vue

@@ -213,7 +213,6 @@ export default {
       'dashboard',
       'emptyState',
       'showEmptyState',
-      'deploymentData',
       'useDashboardEndpoint',
       'allDashboards',
       'additionalPanelTypesEnabled',

app/assets/javascripts/monitoring/components/panel_type.vue

@@ -89,6 +89,9 @@ export default {
       deploymentData(state) {
         return state[this.namespace].deploymentData;
       },
+      annotations(state) {
+        return state[this.namespace].annotations;
+      },
       projectPath(state) {
         return state[this.namespace].projectPath;
       },
@@ -310,6 +313,7 @@ export default {
       ref="timeChart"
       :graph-data="graphData"
       :deployment-data="deploymentData"
+      :annotations="annotations"
       :project-path="projectPath"
       :thresholds="getGraphAlertValues(graphData.metrics)"
       :group-id="groupId"

app/assets/javascripts/monitoring/queries/getAnnotations.query.graphql

+query getAnnotations($projectPath: ID!) {
+  environment(name: $environmentName) {
+    metricDashboard(id: $dashboardId) {
+      annotations: nodes {
+        id
+        description
+        from
+        to
+        panelId
+      }
+    }
+  }
+}

app/assets/javascripts/monitoring/stores/actions.js

@@ -6,8 +6,13 @@ import { convertToFixedRange } from '~/lib/utils/datetime_range';
 import { gqClient, parseEnvironmentsResponse, removeLeadingSlash } from './utils';
 import trackDashboardLoad from '../monitoring_tracking_helper';
 import getEnvironments from '../queries/getEnvironments.query.graphql';
+import getAnnotations from '../queries/getAnnotations.query.graphql';
 import statusCodes from '../../lib/utils/http_status';
-import { backOff, convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
+import {
+  backOff,
+  convertObjectPropsToCamelCase,
+  isFeatureFlagEnabled,
+} from '../../lib/utils/common_utils';
 import { s__, sprintf } from '../../locale';
 
 import { PROMETHEUS_TIMEOUT, ENVIRONMENT_AVAILABLE_STATE } from '../constants';
@@ -80,6 +85,14 @@ export const setShowErrorBanner = ({ commit }, enabled) => {
 export const fetchData = ({ dispatch }) => {
   dispatch('fetchEnvironmentsData');
   dispatch('fetchDashboard');
+  /**
+   * Annotations data is not yet fetched. This will be
+   * ready after the BE piece is implemented.
+   * https://gitlab.com/gitlab-org/gitlab/-/issues/211330
+   */
+  if (isFeatureFlagEnabled('metrics_dashboard_annotations')) {
+    dispatch('fetchAnnotations');
+  }
 };
 
 // Metrics dashboard
@@ -269,6 +282,40 @@ export const receiveEnvironmentsDataFailure = ({ commit }) => {
   commit(types.RECEIVE_ENVIRONMENTS_DATA_FAILURE);
 };
 
+export const fetchAnnotations = ({ state, dispatch }) => {
+  dispatch('requestAnnotations');
+
+  return gqClient
+    .mutate({
+      mutation: getAnnotations,
+      variables: {
+        projectPath: removeLeadingSlash(state.projectPath),
+        dashboardId: state.currentDashboard,
+        environmentName: state.currentEnvironmentName,
+      },
+    })
+    .then(resp => resp.data?.project?.environment?.metricDashboard?.annotations)
+    .then(annotations => {
+      if (!annotations) {
+        createFlash(s__('Metrics|There was an error fetching annotations. Please try again.'));
+      }
+
+      dispatch('receiveAnnotationsSuccess', annotations);
+    })
+    .catch(err => {
+      Sentry.captureException(err);
+      dispatch('receiveAnnotationsFailure');
+      createFlash(s__('Metrics|There was an error getting annotations information.'));
+    });
+};
+
+// While this commit does not update the state it will
+// eventually be useful to show a loading state
+export const requestAnnotations = ({ commit }) => commit(types.REQUEST_ANNOTATIONS);
+export const receiveAnnotationsSuccess = ({ commit }, data) =>
+  commit(types.RECEIVE_ANNOTATIONS_SUCCESS, data);
+export const receiveAnnotationsFailure = ({ commit }) => commit(types.RECEIVE_ANNOTATIONS_FAILURE);
+
 // Dashboard manipulation
 
 /**

app/assets/javascripts/monitoring/stores/mutation_types.js

@@ -3,6 +3,11 @@ export const REQUEST_METRICS_DASHBOARD = 'REQUEST_METRICS_DASHBOARD';
 export const RECEIVE_METRICS_DASHBOARD_SUCCESS = 'RECEIVE_METRICS_DASHBOARD_SUCCESS';
 export const RECEIVE_METRICS_DASHBOARD_FAILURE = 'RECEIVE_METRICS_DASHBOARD_FAILURE';
 
+// Annotations
+export const REQUEST_ANNOTATIONS = 'REQUEST_ANNOTATIONS';
+export const RECEIVE_ANNOTATIONS_SUCCESS = 'RECEIVE_ANNOTATIONS_SUCCESS';
+export const RECEIVE_ANNOTATIONS_FAILURE = 'RECEIVE_ANNOTATIONS_FAILURE';
+
 // Git project deployments
 export const REQUEST_DEPLOYMENTS_DATA = 'REQUEST_DEPLOYMENTS_DATA';
 export const RECEIVE_DEPLOYMENTS_DATA_SUCCESS = 'RECEIVE_DEPLOYMENTS_DATA_SUCCESS';

app/assets/javascripts/monitoring/stores/mutations.js

@@ -92,6 +92,16 @@ export default {
     state.environments = [];
   },
 
+  /**
+   * Annotations
+   */
+  [types.RECEIVE_ANNOTATIONS_SUCCESS](state, annotations) {
+    state.annotations = annotations;
+  },
+  [types.RECEIVE_ANNOTATIONS_FAILURE](state) {
+    state.annotations = [];
+  },
+
   /**
    * Individual panel/metric results
    */

app/assets/javascripts/monitoring/stores/state.js

@@ -20,6 +20,7 @@ export default () => ({
   allDashboards: [],
 
   // Other project data
+  annotations: [],
   deploymentData: [],
   environments: [],
   environmentsSearchTerm: '',

app/controllers/projects/environments_controller.rb

@@ -14,6 +14,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   before_action :expire_etag_cache, only: [:index], unless: -> { request.format.json? }
   before_action only: [:metrics, :additional_metrics, :metrics_dashboard] do
     push_frontend_feature_flag(:prometheus_computed_alerts)
+    push_frontend_feature_flag(:metrics_dashboard_annotations)
   end
   after_action :expire_etag_cache, only: [:cancel_auto_stop]
 

locale/gitlab.pot

@@ -12941,9 +12941,15 @@ msgstr ""
 msgid "Metrics|There was an error creating the dashboard. %{error}"
 msgstr ""
 
+msgid "Metrics|There was an error fetching annotations. Please try again."
+msgstr ""
+
 msgid "Metrics|There was an error fetching the environments data, please try again"
 msgstr ""
 
+msgid "Metrics|There was an error getting annotations information."
+msgstr ""
+
 msgid "Metrics|There was an error getting deployment information."
 msgstr ""
 

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -50,6 +50,7 @@ describe('Time series component', () => {
       propsData: {
         graphData: { ...graphData, type },
         deploymentData: store.state.monitoringDashboard.deploymentData,
+        annotations: store.state.monitoringDashboard.annotations,
         projectPath: `${mockHost}${mockProjectDir}`,
       },
       store,

spec/frontend/monitoring/store/actions_spec.js

@@ -16,6 +16,7 @@ import {
   fetchDeploymentsData,
   fetchEnvironmentsData,
   fetchDashboardData,
+  fetchAnnotations,
   fetchPrometheusMetric,
   setInitialState,
   filterEnvironments,
@@ -24,10 +25,12 @@ import {
 } from '~/monitoring/stores/actions';
 import { gqClient, parseEnvironmentsResponse } from '~/monitoring/stores/utils';
 import getEnvironments from '~/monitoring/queries/getEnvironments.query.graphql';
+import getAnnotations from '~/monitoring/queries/getAnnotations.query.graphql';
 import storeState from '~/monitoring/stores/state';
 import {
   deploymentData,
   environmentData,
+  annotationsData,
   metricsDashboardResponse,
   metricsDashboardViewModel,
   dashboardGitResponse,
@@ -120,17 +123,15 @@ describe('Monitoring store actions', () => {
     });
 
     it('setting SET_ENVIRONMENTS_FILTER should dispatch fetchEnvironmentsData', () => {
-      jest.spyOn(gqClient, 'mutate').mockReturnValue(
-        Promise.resolve({
-          data: {
-            project: {
-              data: {
-                environments: [],
-              },
+      jest.spyOn(gqClient, 'mutate').mockReturnValue({
+        data: {
+          project: {
+            data: {
+              environments: [],
             },
           },
-        }),
-      );
+        },
+      });
 
       return testAction(
         filterEnvironments,
@@ -180,17 +181,15 @@ describe('Monitoring store actions', () => {
     });
 
     it('dispatches receiveEnvironmentsDataSuccess on success', () => {
-      jest.spyOn(gqClient, 'mutate').mockReturnValue(
-        Promise.resolve({
-          data: {
-            project: {
-              data: {
-                environments: environmentData,
-              },
+      jest.spyOn(gqClient, 'mutate').mockResolvedValue({
+        data: {
+          project: {
+            data: {
+              environments: environmentData,
             },
           },
-        }),
-      );
+        },
+      });
 
       return testAction(
         fetchEnvironmentsData,
@@ -208,7 +207,7 @@ describe('Monitoring store actions', () => {
     });
 
     it('dispatches receiveEnvironmentsDataFailure on error', () => {
-      jest.spyOn(gqClient, 'mutate').mockReturnValue(Promise.reject());
+      jest.spyOn(gqClient, 'mutate').mockRejectedValue({});
 
       return testAction(
         fetchEnvironmentsData,
@@ -220,6 +219,80 @@ describe('Monitoring store actions', () => {
     });
   });
 
+  describe('fetchAnnotations', () => {
+    const { state } = store;
+    state.projectPath = 'gitlab-org/gitlab-test';
+    state.currentEnvironmentName = 'production';
+    state.currentDashboard = '.gitlab/dashboards/custom_dashboard.yml';
+
+    afterEach(() => {
+      resetStore(store);
+    });
+
+    it('fetches annotations data and dispatches receiveAnnotationsSuccess', () => {
+      const mockMutate = jest.spyOn(gqClient, 'mutate');
+      const mutationVariables = {
+        mutation: getAnnotations,
+        variables: {
+          projectPath: state.projectPath,
+          environmentName: state.currentEnvironmentName,
+          dashboardId: state.currentDashboard,
+        },
+      };
+
+      mockMutate.mockResolvedValue({
+        data: {
+          project: {
+            environment: {
+              metricDashboard: {
+                annotations: annotationsData,
+              },
+            },
+          },
+        },
+      });
+
+      return testAction(
+        fetchAnnotations,
+        null,
+        state,
+        [],
+        [
+          { type: 'requestAnnotations' },
+          { type: 'receiveAnnotationsSuccess', payload: annotationsData },
+        ],
+        () => {
+          expect(mockMutate).toHaveBeenCalledWith(mutationVariables);
+        },
+      );
+    });
+
+    it('dispatches receiveAnnotationsFailure if the annotations API call fails', () => {
+      const mockMutate = jest.spyOn(gqClient, 'mutate');
+      const mutationVariables = {
+        mutation: getAnnotations,
+        variables: {
+          projectPath: state.projectPath,
+          environmentName: state.currentEnvironmentName,
+          dashboardId: state.currentDashboard,
+        },
+      };
+
+      mockMutate.mockRejectedValue({});
+
+      return testAction(
+        fetchAnnotations,
+        null,
+        state,
+        [],
+        [{ type: 'requestAnnotations' }, { type: 'receiveAnnotationsFailure' }],
+        () => {
+          expect(mockMutate).toHaveBeenCalledWith(mutationVariables);
+        },
+      );
+    });
+  });
+
   describe('Set initial state', () => {
     let mockedState;
     beforeEach(() => {