Refactor self monitoring project UI and documentation

app/assets/javascripts/self_monitor/components/self_monitor_form.vue

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlFormGroup, GlButton, GlModal, GlToast, GlToggle } from '@gitlab/ui';
+import { GlFormGroup, GlButton, GlModal, GlToast, GlToggle, GlLink } from '@gitlab/ui';
 import Vue from 'vue';
 import { mapState, mapActions } from 'vuex';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { visitUrl, getBaseURL } from '~/lib/utils/url_utility';
 import { __, s__, sprintf } from '~/locale';
@@ -15,9 +16,10 @@ export default {
     GlButton,
     GlModal,
     GlToggle,
+    GlLink,
   },
   formLabels: {
-    createProject: __('Create Project'),
+    createProject: __('Self monitoring'),
   },
   data() {
     return {
@@ -48,7 +50,7 @@ export default {
       if (this.projectCreated) {
         return sprintf(
           s__(
-            'SelfMonitoring|Enabling this feature creates a %{projectLinkStart}project%{projectLinkEnd} that can be used to monitor the health of your instance.',
+            'SelfMonitoring|Self monitoring is active. Use the %{projectLinkStart}self monitoring project%{projectLinkEnd} to monitor the health of your instance.',
           ),
           {
             projectLinkStart: `<a href="${this.selfMonitorProjectFullUrl}">`,
@@ -59,9 +61,12 @@ export default {
       }
 
       return s__(
-        'SelfMonitoring|Enabling this feature creates a project that can be used to monitor the health of your instance.',
+        'SelfMonitoring|Activate self monitoring to create a project to use to monitor the health of your instance.',
       );
     },
+    helpDocsPath() {
+      return helpPagePath('administration/monitoring/gitlab_self_monitoring_project/index');
+    },
   },
   watch: {
     selfMonitorEnabled() {
@@ -126,7 +131,8 @@ export default {
       </h4>
       <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
       <p class="js-section-sub-header">
-        {{ s__('SelfMonitoring|Enable or disable instance self monitoring') }}
+        {{ s__('SelfMonitoring|Activate or deactivate instance self monitoring.') }}
+        <gl-link :href="helpDocsPath">{{ __('Learn more.') }}</gl-link>
       </p>
     </div>
     <div class="settings-content">
@@ -142,9 +148,9 @@ export default {
       </form>
     </div>
     <gl-modal
-      :title="s__('SelfMonitoring|Disable self monitoring?')"
+      :title="s__('SelfMonitoring|Deactivate self monitoring?')"
       :modal-id="modalId"
-      :ok-title="__('Delete project')"
+      :ok-title="__('Delete self monitoring project')"
       :cancel-title="__('Cancel')"
       ok-variant="danger"
       category="primary"
@@ -154,7 +160,7 @@ export default {
       <div>
         {{
           s__(
-            'SelfMonitoring|Disabling this feature will delete the self monitoring project. Are you sure you want to delete the project?',
+            'SelfMonitoring|Deactivating self monitoring deletes the self monitoring project. Are you sure you want to deactivate self monitoring and delete the project?',
           )
         }}
       </div>

app/assets/javascripts/self_monitor/store/actions.js

@@ -56,7 +56,7 @@ export const requestCreateProjectSuccess = ({ commit, dispatch }, selfMonitorDat
   commit(types.SET_LOADING, false);
   commit(types.SET_PROJECT_URL, selfMonitorData.project_full_path);
   commit(types.SET_ALERT_CONTENT, {
-    message: s__('SelfMonitoring|Self monitoring project has been successfully created.'),
+    message: s__('SelfMonitoring|Self monitoring project successfully created.'),
     actionText: __('View project'),
     actionName: 'viewSelfMonitorProject',
   });
@@ -108,7 +108,7 @@ export const requestDeleteProjectSuccess = ({ commit }) => {
   commit(types.SET_PROJECT_URL, '');
   commit(types.SET_PROJECT_CREATED, false);
   commit(types.SET_ALERT_CONTENT, {
-    message: s__('SelfMonitoring|Self monitoring project has been successfully deleted.'),
+    message: s__('SelfMonitoring|Self monitoring project successfully deleted.'),
     actionText: __('Undo'),
     actionName: 'createProject',
   });

doc/administration/monitoring/gitlab_self_monitoring_project/index.md

@@ -4,43 +4,44 @@ group: Monitor
 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/#assignments
 ---
 
-# GitLab self monitoring project **(FREE SELF)**
+# Self monitoring project **(FREE SELF)**
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/32351) in GitLab 12.7, behind a disabled feature flag (`self_monitoring_project`).
-> - The feature flag was removed and the Self Monitoring Project was [made generally available](https://gitlab.com/gitlab-org/gitlab/-/issues/198511) in GitLab 12.8.
+> - The feature flag was removed and the self monitoring project was [made generally available](https://gitlab.com/gitlab-org/gitlab/-/issues/198511) in GitLab 12.8.
 
-GitLab has been adding the ability for administrators to see insights into the
-health of their GitLab instance. To surface this experience in a native way
-(similar to how you would interact with an application deployed using GitLab),
-a base project called "GitLab self monitoring" with
-[internal visibility](../../../public_access/public_access.md#internal-projects)
-is added under a group called "GitLab Instance Administrators"
-specifically created for visualizing and configuring the monitoring of your
-GitLab instance.
+GitLab provides administrators insights into the health of their GitLab instance.
 
-All administrators at the time of creation of the project and group are
-added as maintainers of the group and project, and as an administrator, you can
-add new members to the group to give them the [Maintainer role](../../../user/permissions.md) for
-the project.
+To provide a native experience (similar interacting with an application deployed using GitLab), a
+project called **Monitoring** is created:
 
-This project is used to self monitor your GitLab instance. The metrics dashboard
-of the project shows some basic resource usage charts, such as CPU and memory usage
-of each server in [Omnibus GitLab](https://docs.gitlab.com/omnibus/) installations.
+- With [internal visibility](../../../public_access/public_access.md#internal-projects).
+- Under a group called **GitLab Instance**.
 
-You can also use the project to configure your own
-[custom metrics](../../../operations/metrics/index.md#adding-custom-metrics) using
-metrics exposed by the [GitLab exporter](../prometheus/gitlab_metrics.md#metrics-available).
+The project is created specifically for visualizing and configuring the monitoring of your GitLab
+instance.
 
-## Creating the self monitoring project
+When the project and group are created, all administrators are added as maintainers. As an
+administrator, you can add new members to the group to give them the
+[Maintainer role](../../../user/permissions.md) for the project.
+
+This project can be used to:
+
+- Self monitor your GitLab instance. The metrics dashboard of the project shows some basic resource
+  usage charts, such as CPU and memory usage of each server in
+  [Omnibus GitLab](https://docs.gitlab.com/omnibus/) installations.
+- Also configure your own [custom metrics](../../../operations/metrics/index.md#adding-custom-metrics)
+  using metrics exposed by the [GitLab exporter](../prometheus/gitlab_metrics.md#metrics-available).
+
+## Create the self monitoring project
 
 1. On the top bar, select **Menu >** **{admin}** **Admin**.
 1. On the left sidebar, select **Settings > Metrics and profiling** and expand **Self monitoring**.
-1. Toggle the **Create Project** button on.
+1. Toggle **Self monitoring** on.
 1. After your GitLab instance creates the project, GitLab displays a link to the
-   project in the text above the **Create Project** toggle. You can also find it
+   project in the text above the **Self monitoring** toggle. You can also find it
    from the top bar by selecting **Menu > Project**, then selecting **Your projects**.
 
-## Deleting the self monitoring project
+## Delete the self monitoring project
 
 WARNING:
 Deleting the self monitoring project removes any changes made to the project. If
@@ -48,8 +49,8 @@ you create the project again, it's created in its default state.
 
 1. On the top bar, select **Menu >** **{admin}** **Admin**.
 1. On the left sidebar, go to **Settings > Metrics and profiling** and expand **Self monitoring**.
-1. Toggle the **Create Project** button off.
-1. In the confirmation dialog that opens, click **Delete project**.
+1. Toggle **Self monitoring** off.
+1. In the confirmation dialog that opens, click **Delete self monitoring project**.
    It can take a few seconds for it to be deleted.
 1. After the project is deleted, GitLab displays a message confirming your action.
 
@@ -66,27 +67,24 @@ The dashboard uses metrics available in
 You can also
 [create your own dashboards](../../../operations/metrics/dashboards/index.md).
 
-## Connection to Prometheus
+## Connect to Prometheus
 
 The project is automatically configured to connect to the
-[internal Prometheus](../prometheus/index.md) instance if the Prometheus
-instance is present (should be the case if GitLab was installed via Omnibus
-and you haven't disabled it).
+[internal Prometheus](../prometheus/index.md) instance if the Prometheus instance is present.
+This should be the case if GitLab was installed using Omnibus GitLab and you haven't disabled it.
 
-If that's not the case or if you have an external Prometheus instance or a customized setup,
-you should
-[configure it manually](../../../user/project/integrations/prometheus.md#manual-configuration-of-prometheus).
+If that's not the case, or if you have an external Prometheus instance or a customized setup,
+you [configure it manually](../../../user/project/integrations/prometheus.md#manual-configuration-of-prometheus).
 
-## Taking action on Prometheus alerts **(ULTIMATE)**
+## Take action on Prometheus alerts **(ULTIMATE)**
 
 You can [add a webhook](../../../operations/metrics/alerts.md#external-prometheus-instances)
-to the Prometheus configuration for GitLab to receive notifications of any
-alerts.
+to the Prometheus configuration for GitLab to receive notifications of any alerts.
 
 Once the webhook is setup, you can
 [take action on incoming alerts](../../../operations/metrics/alerts.md#trigger-actions-from-alerts).
 
-## Adding custom metrics to the self monitoring project
+## Add custom metrics to the self monitoring project
 
 You can add custom metrics in the self monitoring project by:
 
@@ -95,11 +93,10 @@ You can add custom metrics in the self monitoring project by:
 
 ## Troubleshooting
 
-### Getting error message in logs: `Could not create instance administrators group. Errors: ["You don't have permission to create groups."]`
+### Error message in logs: `Could not create instance administrators group. Errors: ["You don't have permission to create groups."]`
 
-There is [a bug](https://gitlab.com/gitlab-org/gitlab/-/issues/208676) which causes
-project creation to fail with the following error (which appears in the log file)
-when the first administrator user is an
+A [bug](https://gitlab.com/gitlab-org/gitlab/-/issues/208676) causes project creation to fail with
+the following error in the log file when the first administrator user is an
 [external user](../../../user/permissions.md#external-users):
 
 ```plaintext

doc/user/admin_area/settings/index.md

@@ -85,7 +85,7 @@ To access the default page for Admin Area settings:
 | [Metrics - Prometheus](../../../administration/monitoring/prometheus/gitlab_metrics.md) | Enable and configure Prometheus metrics. |
 | [Metrics - Grafana](../../../administration/monitoring/performance/grafana_configuration.md#integration-with-gitlab-ui) | Enable and configure Grafana. |
 | [Profiling - Performance bar](../../../administration/monitoring/performance/performance_bar.md#enable-the-performance-bar-via-the-admin-area) | Enable access to the Performance Bar for a given group. |
-| [Self monitoring](../../../administration/monitoring/gitlab_self_monitoring_project/index.md#creating-the-self-monitoring-project) | Enable or disable instance self monitoring. |
+| [Self monitoring](../../../administration/monitoring/gitlab_self_monitoring_project/index.md#create-the-self-monitoring-project) | Enable or disable instance self monitoring. |
 | [Usage statistics](usage_statistics.md) | Enable or disable version check and Service Ping. |
 | [Pseudonymizer data collection](../../../administration/pseudonymizer.md) **(ULTIMATE)** | Enable or disable the Pseudonymizer data collection. |
 

locale/gitlab.pot

@@ -9201,9 +9201,6 @@ msgstr ""
 msgid "Create New Domain"
 msgstr ""
 
-msgid "Create Project"
-msgstr ""
-
 msgid "Create a GitLab account first, and then connect it to your %{label} account."
 msgstr ""
 
@@ -10554,6 +10551,9 @@ msgstr ""
 msgid "Delete project. Are you ABSOLUTELY SURE?"
 msgstr ""
 
+msgid "Delete self monitoring project"
+msgstr ""
+
 msgid "Delete serverless domain?"
 msgstr ""
 
@@ -29543,6 +29543,9 @@ msgstr ""
 msgid "Selective synchronization"
 msgstr ""
 
+msgid "Self monitoring"
+msgstr ""
+
 msgid "Self monitoring project does not exist"
 msgstr ""
 
@@ -29555,28 +29558,28 @@ msgstr ""
 msgid "Self-monitoring project was not deleted. Please check logs for any error messages"
 msgstr ""
 
-msgid "SelfMonitoring|Disable self monitoring?"
+msgid "SelfMonitoring|Activate or deactivate instance self monitoring."
 msgstr ""
 
-msgid "SelfMonitoring|Disabling this feature will delete the self monitoring project. Are you sure you want to delete the project?"
+msgid "SelfMonitoring|Activate self monitoring to create a project to use to monitor the health of your instance."
 msgstr ""
 
-msgid "SelfMonitoring|Enable or disable instance self monitoring"
+msgid "SelfMonitoring|Deactivate self monitoring?"
 msgstr ""
 
-msgid "SelfMonitoring|Enabling this feature creates a %{projectLinkStart}project%{projectLinkEnd} that can be used to monitor the health of your instance."
+msgid "SelfMonitoring|Deactivating self monitoring deletes the self monitoring project. Are you sure you want to deactivate self monitoring and delete the project?"
 msgstr ""
 
-msgid "SelfMonitoring|Enabling this feature creates a project that can be used to monitor the health of your instance."
+msgid "SelfMonitoring|Self monitoring"
 msgstr ""
 
-msgid "SelfMonitoring|Self monitoring"
+msgid "SelfMonitoring|Self monitoring is active. Use the %{projectLinkStart}self monitoring project%{projectLinkEnd} to monitor the health of your instance."
 msgstr ""
 
-msgid "SelfMonitoring|Self monitoring project has been successfully created."
+msgid "SelfMonitoring|Self monitoring project successfully created."
 msgstr ""
 
-msgid "SelfMonitoring|Self monitoring project has been successfully deleted."
+msgid "SelfMonitoring|Self monitoring project successfully deleted."
 msgstr ""
 
 msgid "Send"

spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap

@@ -30,8 +30,13 @@ exports[`self monitor component When the self monitor project has not been creat
       class="js-section-sub-header"
     >
       
-      Enable or disable instance self monitoring
+      Activate or deactivate instance self monitoring.
       
+      <gl-link-stub
+        href="/help/administration/monitoring/gitlab_self_monitoring_project/index"
+      >
+        Learn more.
+      </gl-link-stub>
     </p>
   </div>
    
@@ -42,14 +47,14 @@ exports[`self monitor component When the self monitor project has not been creat
       name="self-monitoring-form"
     >
       <p>
-        Enabling this feature creates a project that can be used to monitor the health of your instance.
+        Activate self monitoring to create a project to use to monitor the health of your instance.
       </p>
        
       <gl-form-group-stub
         labeldescription=""
       >
         <gl-toggle-stub
-          label="Create Project"
+          label="Self monitoring"
           labelposition="top"
         />
       </gl-form-group-stub>
@@ -62,15 +67,15 @@ exports[`self monitor component When the self monitor project has not been creat
     dismisslabel="Close"
     modalclass=""
     modalid="delete-self-monitor-modal"
-    ok-title="Delete project"
+    ok-title="Delete self monitoring project"
     ok-variant="danger"
     size="md"
-    title="Disable self monitoring?"
+    title="Deactivate self monitoring?"
     titletag="h4"
   >
     <div>
       
-      Disabling this feature will delete the self monitoring project. Are you sure you want to delete the project?
+      Deactivating self monitoring deletes the self monitoring project. Are you sure you want to deactivate self monitoring and delete the project?
     
     </div>
   </gl-modal-stub>

spec/frontend/self_monitor/components/self_monitor_form_spec.js

@@ -53,7 +53,7 @@ describe('self monitor component', () => {
         wrapper = shallowMount(SelfMonitor, { store });
 
         expect(wrapper.find('.js-section-sub-header').text()).toContain(
-          'Enable or disable instance self monitoring',
+          'Activate or deactivate instance self monitoring.',
         );
       });
     });
@@ -63,7 +63,7 @@ describe('self monitor component', () => {
         wrapper = shallowMount(SelfMonitor, { store });
 
         expect(wrapper.vm.selfMonitoringFormText).toContain(
-          'Enabling this feature creates a project that can be used to monitor the health of your instance.',
+          'Activate self monitoring to create a project to use to monitor the health of your instance.',
         );
       });
 

spec/frontend/self_monitor/store/actions_spec.js

@@ -134,7 +134,7 @@ describe('self monitor actions', () => {
               payload: {
                 actionName: 'viewSelfMonitorProject',
                 actionText: 'View project',
-                message: 'Self monitoring project has been successfully created.',
+                message: 'Self monitoring project successfully created.',
               },
             },
             { type: types.SET_SHOW_ALERT, payload: true },
@@ -245,7 +245,7 @@ describe('self monitor actions', () => {
               payload: {
                 actionName: 'createProject',
                 actionText: 'Undo',
-                message: 'Self monitoring project has been successfully deleted.',
+                message: 'Self monitoring project successfully deleted.',
               },
             },
             { type: types.SET_SHOW_ALERT, payload: true },