Add links section in metrics dashboard

User-defined links can be specific in dashboard
yml file. This MR renders links in the metrics
dashboard

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

 <script>
-/**
- * This component generates user-defined links in the
- * dashboard yml file. However, this component will be
- * used in the metrics dashboard after
- * https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32895
- */
 import { mapState } from 'vuex';
 import { GlIcon, GlLink } from '@gitlab/ui';
 
@@ -21,15 +15,17 @@ export default {
 <template>
   <div
     ref="linksSection"
-    class="d-sm-flex flex-sm-wrap gl-mt-3 gl-p-2 bg-gray-light border border-radius-default"
+    class="gl-display-sm-flex gl-flex-sm-wrap gl-mt-5 gl-p-3 gl-bg-gray-10 border gl-rounded-base links-section"
   >
     <div
       v-for="(link, key) in links"
       :key="key"
-      class="gl-mb-1 gl-pr-3 d-flex d-sm-block text-break-word"
+      class="gl-mb-1 gl-mr-5 gl-display-flex gl-display-sm-block gl-hover-text-blue-600-children gl-word-break-all"
     >
-      <gl-link :href="link.url" class="text-plain text-decoration-none"
-        ><gl-icon name="link" class="align-text-bottom mr-1" />{{ link.title }}
+      <gl-link :href="link.url" class="gl-text-gray-900 gl-text-decoration-none!"
+        ><gl-icon name="link" class="gl-text-gray-700 gl-vertical-align-text-bottom gl-mr-2" />{{
+          link.title
+        }}
       </gl-link>
     </div>
   </div>

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

@@ -3,8 +3,6 @@ import * as types from './mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
-import { parseTemplatingVariables } from './variable_mapping';
-import { mergeURLVariables } from '../utils';
 import {
   gqClient,
   parseEnvironmentsResponse,
@@ -161,7 +159,6 @@ export const receiveMetricsDashboardSuccess = ({ commit, dispatch }, { response
 
   commit(types.SET_ALL_DASHBOARDS, all_dashboards);
   commit(types.RECEIVE_METRICS_DASHBOARD_SUCCESS, dashboard);
-  commit(types.SET_VARIABLES, mergeURLVariables(parseTemplatingVariables(dashboard.templating)));
   commit(types.SET_ENDPOINTS, convertObjectPropsToCamelCase(metrics_data));
 
   return dispatch('fetchDashboardData');

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

@@ -61,8 +61,14 @@ export default {
     state.emptyState = 'loading';
     state.showEmptyState = true;
   },
-  [types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, dashboard) {
-    state.dashboard = mapToDashboardViewModel(dashboard);
+  [types.RECEIVE_METRICS_DASHBOARD_SUCCESS](state, dashboardYML) {
+    const { dashboard, panelGroups, variables, links } = mapToDashboardViewModel(dashboardYML);
+    state.dashboard = {
+      dashboard,
+      panelGroups,
+    };
+    state.variables = variables;
+    state.links = links;
 
     if (!state.dashboard.panelGroups.length) {
       state.emptyState = 'noData';

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

@@ -2,6 +2,7 @@ import { slugify } from '~/lib/utils/text_utility';
 import createGqClient, { fetchPolicies } from '~/lib/graphql';
 import { SUPPORTED_FORMATS } from '~/lib/utils/unit_format';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { parseTemplatingVariables } from './variable_mapping';
 import { NOT_IN_DB_PREFIX } from '../constants';
 import { isSafeURL } from '~/lib/utils/url_utility';
 
@@ -217,9 +218,16 @@ const mapToPanelGroupViewModel = ({ group = '', panels = [] }, i) => {
  * @param {Array} dashboard.panel_groups - Panel groups array
  * @returns {Object}
  */
-export const mapToDashboardViewModel = ({ dashboard = '', panel_groups = [] }) => {
+export const mapToDashboardViewModel = ({
+  dashboard = '',
+  templating = {},
+  links = [],
+  panel_groups = [],
+}) => {
   return {
     dashboard,
+    variables: parseTemplatingVariables(templating),
+    links: links.map(mapLinksToViewModel),
     panelGroups: panel_groups.map(mapToPanelGroupViewModel),
   };
 };

app/assets/stylesheets/pages/prometheus.scss

@@ -21,6 +21,14 @@
       }
     }
   }
+
+  .links-section {
+    .gl-hover-text-blue-600-children:hover {
+      * {
+        @include gl-text-blue-600;
+      }
+    }
+  }
 }
 
 .draggable {

changelogs/unreleased/216385-add-related-dashboard-links-in-metrics-dashboard-mvc1.yml

+---
+title: Render user-defined links in dashboard yml file on metrics dashboard
+merge_request: 32895
+author:
+type: added

spec/frontend/monitoring/components/dashboard_spec.js

@@ -16,6 +16,7 @@ import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue'
 import EmptyState from '~/monitoring/components/empty_state.vue';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
 import DashboardPanel from '~/monitoring/components/dashboard_panel.vue';
+import LinksSection from '~/monitoring/components/links_section.vue';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import {
@@ -24,6 +25,7 @@ import {
   setMetricResult,
   setupStoreWithData,
   setupStoreWithVariable,
+  setupStoreWithLinks,
 } from '../store_utils';
 import { environmentData, dashboardGitResponse, propsData } from '../mock_data';
 import { metricsDashboardViewModel, metricsDashboardPanelCount } from '../fixture_data';
@@ -483,6 +485,21 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('links section', () => {
+    beforeEach(() => {
+      createShallowWrapper({ hasMetrics: true });
+      setupStoreWithData(store);
+      setupStoreWithLinks(store);
+
+      return wrapper.vm.$nextTick();
+    });
+
+    it('shows the links section', () => {
+      expect(wrapper.vm.shouldShowLinksSection).toBe(true);
+      expect(wrapper.find(LinksSection)).toExist();
+    });
+  });
+
   describe('single panel expands to "full screen" mode', () => {
     const findExpandedPanel = () => wrapper.find({ ref: 'expandedPanel' });
 

spec/frontend/monitoring/store/utils_spec.js

@@ -16,6 +16,8 @@ describe('mapToDashboardViewModel', () => {
     expect(mapToDashboardViewModel({})).toEqual({
       dashboard: '',
       panelGroups: [],
+      links: [],
+      variables: {},
     });
   });
 
@@ -44,6 +46,8 @@ describe('mapToDashboardViewModel', () => {
 
     expect(mapToDashboardViewModel(response)).toEqual({
       dashboard: 'Dashboard Name',
+      links: [],
+      variables: {},
       panelGroups: [
         {
           group: 'Group 1',
@@ -76,6 +80,8 @@ describe('mapToDashboardViewModel', () => {
     it('key', () => {
       const response = {
         dashboard: 'Dashboard Name',
+        links: [],
+        variables: {},
         panel_groups: [
           {
             group: 'Group A',

spec/frontend/monitoring/store_utils.js

@@ -38,6 +38,18 @@ export const setupStoreWithVariable = store => {
   });
 };
 
+export const setupStoreWithLinks = store => {
+  store.commit(`monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`, {
+    ...metricsDashboardPayload,
+    links: [
+      {
+        title: 'GitLab Website',
+        url: `https://gitlab.com/website`,
+      },
+    ],
+  });
+};
+
 export const setupStoreWithData = store => {
   setupAllDashboards(store);
   setupStoreWithDashboard(store);