Add vue router to metrics dashboard

This MR adds vue router with base route for
the metrics dashboard page

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

@@ -85,7 +85,8 @@ export default {
     },
     defaultBranch: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     emptyGettingStartedSvgPath: {
       type: String,

app/assets/javascripts/monitoring/monitoring_bundle.js → app/assets/javascripts/monitoring/monitoring_app.js

 import Vue from 'vue';
 import { GlToast } from '@gitlab/ui';
-import Dashboard from '~/monitoring/components/dashboard.vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { getParameterValues } from '~/lib/utils/url_utility';
 import { createStore } from './stores';
+import createRouter from './router';
 
 Vue.use(GlToast);
 
@@ -21,6 +21,7 @@ export default (props = {}) => {
       logsPath,
       currentEnvironmentName,
       dashboardTimezone,
+      metricsDashboardBasePath,
       ...dataProps
     } = el.dataset;
 
@@ -40,18 +41,19 @@ export default (props = {}) => {
     dataProps.customMetricsAvailable = parseBoolean(dataProps.customMetricsAvailable);
     dataProps.prometheusAlertsAvailable = parseBoolean(dataProps.prometheusAlertsAvailable);
 
+    const router = createRouter(metricsDashboardBasePath);
+
     // eslint-disable-next-line no-new
     new Vue({
       el,
       store,
-      render(createElement) {
-        return createElement(Dashboard, {
-          props: {
-            ...dataProps,
-            ...props,
-          },
-        });
+      router,
+      data() {
+        return {
+          dashboardProps: { ...dataProps, ...props },
+        };
       },
+      template: `<router-view :dashboardProps="dashboardProps"/>`,
     });
   }
 };

app/assets/javascripts/monitoring/pages/dashboard_page.vue

+<script>
+import Dashboard from '../components/dashboard.vue';
+
+export default {
+  components: {
+    Dashboard,
+  },
+  props: {
+    dashboardProps: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <dashboard v-bind="{ ...dashboardProps }" />
+</template>

app/assets/javascripts/monitoring/router/constants.js

+export const BASE_DASHBOARD_PAGE = 'dashboard';
+
+export default {};

app/assets/javascripts/monitoring/router/index.js

+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import routes from './routes';
+
+Vue.use(VueRouter);
+
+export default function createRouter(base) {
+  const router = new VueRouter({
+    base,
+    mode: 'history',
+    routes,
+  });
+
+  return router;
+}

app/assets/javascripts/monitoring/router/routes.js

+import DashboardPage from '../pages/dashboard_page.vue';
+
+import { BASE_DASHBOARD_PAGE } from './constants';
+
+/**
+ * Because the cluster health page uses the dashboard
+ * app instead the of the dashboard component, hitting
+ * `/` route is not possible. Hence using `*` until the
+ * health page is refactored.
+ * https://gitlab.com/gitlab-org/gitlab/-/issues/221096
+ */
+export default [
+  {
+    name: BASE_DASHBOARD_PAGE,
+    path: '*',
+    component: DashboardPage,
+  },
+];

app/assets/javascripts/pages/projects/environments/metrics/index.js

-import monitoringBundle from '~/monitoring/monitoring_bundle';
+import monitoringApp from '~/monitoring/monitoring_app';
 
-document.addEventListener('DOMContentLoaded', monitoringBundle);
+document.addEventListener('DOMContentLoaded', monitoringApp);

ee/app/assets/javascripts/pages/projects/clusters/show/cluster_health.js

-import initCeBundle from '~/monitoring/monitoring_bundle';
+import initCeBundle from '~/monitoring/monitoring_app';
 
 export default () => {
   const el = document.getElementById('prometheus-graphs');

spec/frontend/monitoring/pages/dashboard_page_spec.js

+import { shallowMount } from '@vue/test-utils';
+import DashboardPage from '~/monitoring/pages/dashboard_page.vue';
+import Dashboard from '~/monitoring/components/dashboard.vue';
+import { propsData } from '../mock_data';
+
+describe('monitoring/pages/dashboard_page', () => {
+  let wrapper;
+
+  const buildWrapper = (props = {}) => {
+    wrapper = shallowMount(DashboardPage, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  const findDashboardComponent = () => wrapper.find(Dashboard);
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  it('throws errors if dashboard props are not passed', () => {
+    expect(() => buildWrapper()).toThrow('Missing required prop: "dashboardProps"');
+  });
+
+  it('renders the dashboard page with dashboard component', () => {
+    buildWrapper({ dashboardProps: propsData });
+
+    expect(findDashboardComponent().props()).toMatchObject(propsData);
+    expect(findDashboardComponent()).toExist();
+  });
+});