Add documentation for timezone dashboard settings

- Add timezone setting to page
- Change page to have all dashboard settings (instead of just one).
- Update images to current version

app/assets/javascripts/operation_settings/components/form_group/external_dashboard.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { GlFormGroup, GlFormInput } from '@gitlab/ui';
 
 export default {
   components: {
-    GlLink,
     GlFormGroup,
     GlFormInput,
   },
@@ -36,7 +35,6 @@ export default {
           'MetricsSettings|Add a button to the metrics dashboard linking directly to your existing external dashboard.',
         )
       }}
-      <gl-link :href="externalDashboard.helpPage">{{ __('Learn more') }}</gl-link>
     </template>
     <!-- placeholder with a url is a false positive  -->
     <!-- eslint-disable @gitlab/vue-require-i18n-attribute-strings -->

app/assets/javascripts/operation_settings/store/state.js

@@ -3,10 +3,8 @@ export default (initialState = {}) => ({
   helpPage: initialState.helpPage,
   externalDashboard: {
     url: initialState.externalDashboardUrl,
-    helpPage: initialState.externalDashboardHelpPage,
   },
   dashboardTimezone: {
     selected: initialState.dashboardTimezoneSetting,
-    helpPage: initialState.dashboardTimezoneHelpPage,
   },
 });

app/views/projects/settings/operations/_metrics_dashboard.html.haml

 .js-operation-settings{ data: { operations_settings_endpoint: project_settings_operations_path(@project),
-  help_page: help_page_path('user/project/integrations/prometheus'),
+  help_page: help_page_path('user/project/operations/dashboard_settings'),
   external_dashboard: { url: metrics_external_dashboard_url,
     help_page: help_page_path('user/project/operations/linking_to_an_external_dashboard') },
   dashboard_timezone: { setting: metrics_dashboard_timezone.upcase } } }

doc/ci/environments/index.md

@@ -866,10 +866,6 @@ versions of the app, all without leaving GitLab.
 
 ![Monitoring dashboard](../img/environments_monitoring.png)
 
-#### Linking to external dashboard
-
-Add a [button to the Monitoring dashboard](../../user/project/operations/linking_to_an_external_dashboard.md) linking directly to your existing external dashboards.
-
 #### Embedding metrics in GitLab Flavored Markdown
 
 Metric charts can be embedded within GitLab Flavored Markdown. See [Embedding Metrics within GitLab Flavored Markdown](../../user/project/integrations/prometheus.md#embedding-metric-charts-within-gitlab-flavored-markdown) for more details.

doc/user/project/operations/dashboard_settings.md

+---
+stage: Monitor
+group: APM
+info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#designated-technical-writers
+---
+
+# Metrics dashboard settings
+
+You can configure your [Monitoring dashboard](../integrations/prometheus.md) to
+display the time zone of your choice, and the links of your choice.
+
+## Change the dashboard time zone
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/214370) in GitLab 13.1.
+
+By default, your monitoring dashboard displays dates and times in your local
+time zone, but you can display dates and times in UTC format. To change the
+time zone:
+
+1. Navigate to **{settings}** **Settings > Operations**, and scroll to
+   **Metrics Dashboard**.
+1. In the **Dashboard timezone** select box, select *User's local timezone*
+   or *UTC*:
+
+   ![Dashboard timezone setting](img/dashboard_local_timezone_v13_1.png)
+1. Click **Save changes**.
+
+## Link to an external dashboard
+
+> [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/57171) in GitLab 12.0.
+
+You can add a button on your monitoring dashboard that links directly to your
+existing external dashboards:
+
+1. Navigate to **{settings}** **Settings > Operations**, and scroll to
+   **Metrics Dashboard**.
+1. In **External dashboard URL**, provide the URL to your external dashboard:
+
+   ![External Dashboard Setting](img/dashboard_external_link_v13_1.png)
+
+1. Click **Save changes**.
+
+GitLab displays a **View full dashboard** button in the top right corner of your
+[monitoring dashboard](../../../ci/environments/index.md#monitoring-environments)
+which opens the URL you provided:
+
+![External Dashboard Link](img/external_dashboard_link.png)

doc/user/project/operations/index.md

@@ -10,4 +10,4 @@ your applications:
 - Discover and view errors generated by your applications with [Error Tracking](error_tracking.md).
 - Create, toggle, and remove [Feature Flags](feature_flags.md). **(PREMIUM)**
 - [Trace](tracing.md) the performance and health of a deployed application. **(ULTIMATE)**
-- Add a [button to the Monitoring dashboard](linking_to_an_external_dashboard.md) linking directly to your existing external dashboards.
+- Change the [settings of the Monitoring Dashboard](dashboard_settings.md).

doc/user/project/operations/linking_to_an_external_dashboard.md

-# Linking to an external dashboard
+---
+redirect_to: 'dashboard_settings.md'
+---
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/57171) in GitLab 12.0.
-
-You can add a button to the Monitoring dashboard linking directly to your existing external dashboards.
-
-## Enabling the external dashboard link
-
-1. Go to **Settings > Operations** and scroll to the section titled **External dashboard**.
-
-1. Fill in the URL to your external dashboard and click **Save changes**.
-
-   ![External Dashboard Settings](img/external_dashboard_settings.png)
-
-1. There should now be a button on your
-   [Monitoring dashboard](../../../ci/environments/index.md#monitoring-environments) which
-   will open the URL you entered in the above step.
-
-   ![External Dashboard Link](img/external_dashboard_link.png)
+This document was moved to [another location](dashboard_settings.md).

spec/frontend/operation_settings/components/metrics_settings_spec.js

@@ -20,9 +20,7 @@ describe('operation settings external dashboard component', () => {
   const operationsSettingsEndpoint = `${TEST_HOST}/mock/ops/settings/endpoint`;
   const helpPage = `${TEST_HOST}/help/metrics/page/path`;
   const externalDashboardUrl = `http://mock-external-domain.com/external/dashboard/url`;
-  const externalDashboardHelpPage = `${TEST_HOST}/help/external/page/path`;
   const dashboardTimezoneSetting = timezones.LOCAL;
-  const dashboardTimezoneHelpPage = `${TEST_HOST}/help/timezone/page/path`;
 
   const mountComponent = (shallow = true) => {
     const config = [
@@ -32,9 +30,7 @@ describe('operation settings external dashboard component', () => {
           operationsSettingsEndpoint,
           helpPage,
           externalDashboardUrl,
-          externalDashboardHelpPage,
           dashboardTimezoneSetting,
-          dashboardTimezoneHelpPage,
         }),
         stubs: {
           ExternalDashboard,
@@ -140,7 +136,7 @@ describe('operation settings external dashboard component', () => {
 
         it('uses description text', () => {
           const description = formGroup.find('small');
-          expect(description.find('a').attributes('href')).toBe(externalDashboardHelpPage);
+          expect(description.text()).not.toBeFalsy();
         });
       });