Support user-defined links in metrics dashboard

This MR parses user-defined links in metrics dashboards
and saves to Vuex store. This MR creates a links section
Vue component but does not use it yet. Also, backend
support for links validation is added

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

@@ -15,6 +15,7 @@ import GraphGroup from './graph_group.vue';
 import EmptyState from './empty_state.vue';
 import GroupEmptyState from './group_empty_state.vue';
 import VariablesSection from './variables_section.vue';
+import LinksSection from './links_section.vue';
 
 import TrackEventDirective from '~/vue_shared/directives/track_event';
 import {
@@ -38,6 +39,7 @@ export default {
     EmptyState,
     GroupEmptyState,
     VariablesSection,
+    LinksSection,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -154,12 +156,16 @@ export default {
       'showEmptyState',
       'expandedPanel',
       'variables',
+      'links',
       'currentDashboard',
     ]),
     ...mapGetters('monitoringDashboard', ['selectedDashboard', 'getMetricStates']),
     shouldShowVariablesSection() {
       return Object.keys(this.variables).length > 0;
     },
+    shouldShowLinksSection() {
+      return Object.keys(this.links).length > 0;
+    },
   },
   watch: {
     dashboard(newDashboard) {
@@ -309,6 +315,7 @@ export default {
       @setRearrangingPanels="onSetRearrangingPanels"
     />
     <variables-section v-if="shouldShowVariablesSection && !showEmptyState" />
+    <links-section v-if="shouldShowLinksSection && !showEmptyState" />
     <div v-if="!showEmptyState">
       <dashboard-panel
         v-show="expandedPanel.panel"

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';
+
+export default {
+  components: {
+    GlIcon,
+    GlLink,
+  },
+  computed: {
+    ...mapState('monitoringDashboard', ['links']),
+  },
+};
+</script>
+<template>
+  <div
+    ref="linksSection"
+    class="d-sm-flex flex-sm-wrap gl-mt-3 gl-p-2 bg-gray-light border border-radius-default"
+  >
+    <div
+      v-for="(link, key) in links"
+      :key="key"
+      class="gl-mb-1 gl-pr-3 d-flex d-sm-block text-break-word"
+    >
+      <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>
+    </div>
+  </div>
+</template>

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

@@ -36,10 +36,14 @@ export default () => ({
   allDashboards: [],
   /**
    * User-defined custom variables are passed
-   * via the dashboard.yml file.
+   * via the dashboard yml file.
    */
   variables: {},
-
+  /**
+   * User-defined custom links are passed
+   * via the dashboard yml file.
+   */
+  links: {},
   // Other project data
   annotations: [],
   deploymentData: [],

app/models/performance_monitoring/prometheus_dashboard.rb

@@ -4,7 +4,7 @@ module PerformanceMonitoring
   class PrometheusDashboard
     include ActiveModel::Model
 
-    attr_accessor :dashboard, :panel_groups, :path, :environment, :priority, :templating
+    attr_accessor :dashboard, :panel_groups, :path, :environment, :priority, :templating, :links
 
     validates :dashboard, presence: true
     validates :panel_groups, presence: true

spec/frontend/monitoring/components/__snapshots__/dashboard_template_spec.js.snap

@@ -132,6 +132,8 @@ exports[`Dashboard template matches the default snapshot 1`] = `
    
   <!---->
    
+  <!---->
+   
   <empty-state-stub
     clusterspath="/path/to/clusters"
     documentationpath="/path/to/docs"

spec/frontend/monitoring/components/links_section_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+import { createStore } from '~/monitoring/stores';
+import LinksSection from '~/monitoring/components/links_section.vue';
+
+describe('Links Section component', () => {
+  let store;
+  let wrapper;
+
+  const createShallowWrapper = () => {
+    wrapper = shallowMount(LinksSection, {
+      store,
+    });
+  };
+  const setState = links => {
+    store.state.monitoringDashboard = {
+      ...store.state.monitoringDashboard,
+      showEmptyState: false,
+      links,
+    };
+  };
+  const findLinks = () => wrapper.findAll(GlLink);
+
+  beforeEach(() => {
+    store = createStore();
+    createShallowWrapper();
+  });
+
+  it('does not render a section if no links are present', () => {
+    setState();
+
+    return wrapper.vm.$nextTick(() => {
+      expect(findLinks()).not.toExist();
+    });
+  });
+
+  it('renders a link inside a section', () => {
+    setState([
+      {
+        title: 'GitLab Website',
+        url: 'https://gitlab.com',
+      },
+    ]);
+
+    return wrapper.vm.$nextTick(() => {
+      expect(findLinks()).toHaveLength(1);
+      const firstLink = findLinks().at(0);
+
+      expect(firstLink.attributes('href')).toBe('https://gitlab.com');
+      expect(firstLink.text()).toBe('GitLab Website');
+    });
+  });
+
+  it('renders multiple links inside a section', () => {
+    const links = new Array(10)
+      .fill(null)
+      .map((_, i) => ({ title: `Title ${i}`, url: `https://gitlab.com/projects/${i}` }));
+    setState(links);
+
+    return wrapper.vm.$nextTick(() => {
+      expect(findLinks()).toHaveLength(10);
+    });
+  });
+});