Change document title format for dashboard view

  - prepend dashboard name to document title
  - set the display_name of the dashboard as the first part of the title
of the HTML page

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

@@ -145,6 +145,7 @@ export default {
     return {
       selectedTimeRange: timeRangeFromUrl() || defaultTimeRange,
       isRearrangingPanels: false,
+      originalDocumentTitle: document.title,
     };
   },
   computed: {
@@ -186,6 +187,9 @@ export default {
       },
       deep: true,
     },
+    selectedDashboard(dashboard) {
+      this.prependToDocumentTitle(dashboard?.display_name);
+    },
   },
   created() {
     window.addEventListener('keyup', this.onKeyup);
@@ -252,6 +256,11 @@ export default {
       // Collapse group if no data is available
       return !this.getMetricStates(groupKey).includes(metricStates.OK);
     },
+    prependToDocumentTitle(text) {
+      if (text) {
+        document.title = `${text} · ${this.originalDocumentTitle}`;
+      }
+    },
     onTimeRangeZoom({ start, end }) {
       updateHistory({
         url: mergeUrlParams({ start, end }, window.location.href),

app/services/metrics/dashboard/self_monitoring_dashboard_service.rb

@@ -6,7 +6,7 @@ module Metrics
   module Dashboard
     class SelfMonitoringDashboardService < ::Metrics::Dashboard::PredefinedDashboardService
       DASHBOARD_PATH = 'config/prometheus/self_monitoring_default.yml'
-      DASHBOARD_NAME = 'Default'
+      DASHBOARD_NAME = N_('Default dashboard')
 
       SEQUENCE = [
         STAGES::CustomMetricsInserter,
@@ -23,7 +23,7 @@ module Metrics
         def all_dashboard_paths(_project)
           [{
             path: DASHBOARD_PATH,
-            display_name: DASHBOARD_NAME,
+            display_name: _(DASHBOARD_NAME),
             default: true,
             system_dashboard: false
           }]

app/services/metrics/dashboard/system_dashboard_service.rb

@@ -6,7 +6,7 @@ module Metrics
   module Dashboard
     class SystemDashboardService < ::Metrics::Dashboard::PredefinedDashboardService
       DASHBOARD_PATH = 'config/prometheus/common_metrics.yml'
-      DASHBOARD_NAME = 'Default'
+      DASHBOARD_NAME = N_('Default dashboard')
 
       SEQUENCE = [
         STAGES::CommonMetricsInserter,
@@ -22,7 +22,7 @@ module Metrics
         def all_dashboard_paths(_project)
           [{
             path: DASHBOARD_PATH,
-            display_name: DASHBOARD_NAME,
+            display_name: _(DASHBOARD_NAME),
             default: true,
             system_dashboard: true
           }]

app/views/projects/environments/metrics.html.haml

-- page_title _("Metrics for environment"), @environment.name
+- page_title _("Metrics Dashboard"), @environment.name
 
 .prometheus-container
   #prometheus-graphs{ data: metrics_data(@project, @environment) }

changelogs/unreleased/214281-modify-dashboard-title.yml

+---
+title: Add metrics dashboard name to document title
+merge_request: 30392
+author:
+type: added

locale/gitlab.pot

@@ -6968,6 +6968,9 @@ msgstr ""
 msgid "Default classification label"
 msgstr ""
 
+msgid "Default dashboard"
+msgstr ""
+
 msgid "Default deletion adjourned period"
 msgstr ""
 
@@ -13700,9 +13703,6 @@ msgstr ""
 msgid "Metrics and profiling"
 msgstr ""
 
-msgid "Metrics for environment"
-msgstr ""
-
 msgid "Metrics::Dashboard::Annotation|Annotation can't belong to both a cluster and an environment at the same time"
 msgstr ""
 

spec/controllers/concerns/metrics_dashboard_spec.rb

@@ -134,7 +134,7 @@ describe MetricsDashboard do
             it 'adds starred dashboard information and sorts the list' do
               all_dashboards = json_response['all_dashboards'].map { |dashboard| dashboard.slice('display_name', 'starred', 'user_starred_path') }
               expected_response = [
-                { "display_name" => "Default", "starred" => false, 'user_starred_path' => api_v4_projects_metrics_user_starred_dashboards_path(id: project.id, params: { dashboard_path: 'config/prometheus/common_metrics.yml' }) },
+                { "display_name" => "Default dashboard", "starred" => false, 'user_starred_path' => api_v4_projects_metrics_user_starred_dashboards_path(id: project.id, params: { dashboard_path: 'config/prometheus/common_metrics.yml' }) },
                 { "display_name" => "anomaly.yml", "starred" => false, 'user_starred_path' => api_v4_projects_metrics_user_starred_dashboards_path(id: project.id, params: { dashboard_path: '.gitlab/dashboards/anomaly.yml' }) },
                 { "display_name" => "errors.yml", "starred" => true, 'user_starred_path' => api_v4_projects_metrics_user_starred_dashboards_path(id: project.id, params: { dashboard_path: '.gitlab/dashboards/errors.yml' }) },
                 { "display_name" => "test.yml", "starred" => true, 'user_starred_path' => api_v4_projects_metrics_user_starred_dashboards_path(id: project.id, params: { dashboard_path: '.gitlab/dashboards/test.yml' }) }

spec/frontend/monitoring/components/dashboard_spec.js

@@ -851,6 +851,62 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('document title', () => {
+    const originalTitle = 'Original Title';
+    const defaultDashboardName = dashboardGitResponse[0].display_name;
+
+    beforeEach(() => {
+      document.title = originalTitle;
+      createShallowWrapper({ hasMetrics: true });
+    });
+
+    afterAll(() => {
+      document.title = '';
+    });
+
+    it('is prepended with default dashboard name by default', () => {
+      setupAllDashboards(store);
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(document.title.startsWith(`${defaultDashboardName} · `)).toBe(true);
+      });
+    });
+
+    it('is prepended with dashboard name if path is known', () => {
+      const dashboard = dashboardGitResponse[1];
+      const currentDashboard = dashboard.path;
+
+      setupAllDashboards(store, currentDashboard);
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(document.title.startsWith(`${dashboard.display_name} · `)).toBe(true);
+      });
+    });
+
+    it('is prepended with default dashboard name is path is not known', () => {
+      setupAllDashboards(store, 'unknown/path');
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(document.title.startsWith(`${defaultDashboardName} · `)).toBe(true);
+      });
+    });
+
+    it('is not modified when dashboard name is not provided', () => {
+      const dashboard = { ...dashboardGitResponse[1], display_name: null };
+      const currentDashboard = dashboard.path;
+
+      store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, [dashboard]);
+
+      store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, {
+        currentDashboard,
+      });
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(document.title).toBe(originalTitle);
+      });
+    });
+  });
+
   describe('Dashboard dropdown', () => {
     beforeEach(() => {
       createMountedWrapper({ hasMetrics: true });

spec/frontend/monitoring/store_utils.js

@@ -16,8 +16,13 @@ const setEnvironmentData = store => {
   store.commit(`monitoringDashboard/${types.RECEIVE_ENVIRONMENTS_DATA_SUCCESS}`, environmentData);
 };
 
-export const setupAllDashboards = store => {
+export const setupAllDashboards = (store, path) => {
   store.commit(`monitoringDashboard/${types.SET_ALL_DASHBOARDS}`, dashboardGitResponse);
+  if (path) {
+    store.commit(`monitoringDashboard/${types.SET_INITIAL_STATE}`, {
+      currentDashboard: path,
+    });
+  }
 };
 
 export const setupStoreWithDashboard = store => {
@@ -25,10 +30,6 @@ export const setupStoreWithDashboard = store => {
     `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
     metricsDashboardPayload,
   );
-  store.commit(
-    `monitoringDashboard/${types.RECEIVE_METRICS_DASHBOARD_SUCCESS}`,
-    metricsDashboardPayload,
-  );
 };
 
 export const setupStoreWithVariable = store => {

spec/lib/gitlab/metrics/dashboard/finder_spec.rb

@@ -142,7 +142,7 @@ describe Gitlab::Metrics::Dashboard::Finder, :use_clean_rails_memory_store_cachi
 
   describe '.find_all_paths' do
     let(:all_dashboard_paths) { described_class.find_all_paths(project) }
-    let(:system_dashboard) { { path: system_dashboard_path, display_name: 'Default', default: true, system_dashboard: true } }
+    let(:system_dashboard) { { path: system_dashboard_path, display_name: 'Default dashboard', default: true, system_dashboard: true } }
 
     it 'includes only the system dashboard by default' do
       expect(all_dashboard_paths).to eq([system_dashboard])
@@ -163,7 +163,7 @@ describe Gitlab::Metrics::Dashboard::Finder, :use_clean_rails_memory_store_cachi
       let(:self_monitoring_dashboard) do
         {
           path: self_monitoring_dashboard_path,
-          display_name: 'Default',
+          display_name: 'Default dashboard',
           default: true,
           system_dashboard: false
         }