Create a new page Admin - Settings - Service Usage Data

New page for managing UsagePing report. At this stage only the new page
and payload view implemented

app/assets/javascripts/admin/application_settings/setup_service_usage_data.js

+import PayloadPreviewer from '~/pages/admin/application_settings/payload_previewer';
+
+export default () => {
+  const payloadPreviewTrigger = document.querySelector('.js-payload-preview-trigger');
+
+  if (payloadPreviewTrigger) {
+    new PayloadPreviewer(payloadPreviewTrigger).init();
+  }
+};

app/assets/javascripts/pages/admin/application_settings/service_usage_data/index.js

+import initServiceUsageData from '~/admin/application_settings/setup_service_usage_data';
+
+initServiceUsageData();

app/controllers/admin/application_settings_controller.rb

@@ -27,7 +27,7 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
 
   feature_category :source_code_management, [:repository, :clear_repository_check_states]
   feature_category :continuous_integration, [:ci_cd, :reset_registration_token]
-  feature_category :service_ping, [:usage_data]
+  feature_category :service_ping, [:usage_data, :service_usage_data]
   feature_category :integrations, [:integrations]
   feature_category :pages, [:lets_encrypt_terms_of_service]
 
@@ -52,6 +52,9 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
     @integrations = Integration.find_or_initialize_all_non_project_specific(Integration.for_instance).sort_by(&:title)
   end
 
+  def service_usage_data
+  end
+
   def update
     perform_update
   end

app/views/admin/application_settings/service_usage_data.html.haml

+- name = _("Service usage data")
+
+- breadcrumb_title name
+- page_title name
+- @content_class = "limit-container-width" unless fluid_layout
+- payload_class = 'js-service-ping-payload'
+
+%h3= name
+
+%button.gl-button.btn.btn-default.js-payload-preview-trigger{ type: 'button', data: { payload_selector: ".#{payload_class}" } }
+  .gl-spinner.js-spinner.gl-display-none.gl-mr-2
+  .js-text.gl-display-inline= _('Preview payload')
+%pre.js-syntax-highlight.code.highlight.gl-mt-2.gl-display-none{ class: payload_class, data: { endpoint: usage_data_admin_application_settings_path(format: :html) } }

app/views/layouts/nav/sidebar/_admin.html.haml

@@ -265,6 +265,11 @@
               = link_to metrics_and_profiling_admin_application_settings_path, title: _('Metrics and profiling'), class: 'qa-admin-settings-metrics-and-profiling-item' do
                 %span
                   = _('Metrics and profiling')
+            - if Feature.enabled?(:admin_application_settings_service_usage_data_center, default_enabled: :yaml)
+              = nav_link(path: ['application_settings#service_usage_data']) do
+                = link_to service_usage_data_admin_application_settings_path, title: _('Service Usage Data') do
+                  %span
+                    = _('Service usage data')
             = nav_link(path: 'application_settings#network') do
               = link_to network_admin_application_settings_path, title: _('Network'), data: { qa_selector: 'admin_settings_network_item' } do
                 %span

config/feature_flags/development/admin_application_settings_service_usage_data_center.yml

+---
+name: admin_application_settings_service_usage_data_center
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78747
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/351268
+milestone: '14.8'
+type: development
+group: group::product intelligence
+default_enabled: false

config/routes/admin.rb

@@ -144,6 +144,8 @@ namespace :admin do
     delete :delete_self_monitoring_project
     get :status_delete_self_monitoring_project
 
+    get :service_usage_data
+
     resource :appearances, only: [:show, :create, :update], path: 'appearance', module: 'application_settings' do
       member do
         get :preview_sign_in

locale/gitlab.pot

@@ -32638,12 +32638,18 @@ msgstr ""
 msgid "Service Desk allows people to create issues in your GitLab instance without their own user account. It provides a unique email address for end users to create issues in a project. Replies can be sent either through the GitLab interface or by email. End users only see threads through email."
 msgstr ""
 
+msgid "Service Usage Data"
+msgstr ""
+
 msgid "Service account generated successfully"
 msgstr ""
 
 msgid "Service ping is disabled in your configuration file, and cannot be enabled through this form."
 msgstr ""
 
+msgid "Service usage data"
+msgstr ""
+
 msgid "ServiceDesk|Enable Service Desk"
 msgstr ""
 

spec/features/admin/admin_settings_spec.rb

@@ -775,6 +775,28 @@ RSpec.describe 'Admin updates settings' do
         end
       end
     end
+
+    context 'Service Usage Data page' do
+      before do
+        stub_usage_data_connections
+        stub_database_flavor_check
+
+        visit service_usage_data_admin_application_settings_path
+      end
+
+      it 'loads usage ping payload on click', :js do
+        expected_payload_content = /(?=.*"uuid")(?=.*"hostname")/m
+
+        expect(page).not_to have_content expected_payload_content
+
+        click_button('Preview payload')
+
+        wait_for_requests
+
+        expect(page).to have_button 'Hide payload'
+        expect(page).to have_content expected_payload_content
+      end
+    end
   end
 
   context 'application setting :admin_mode is disabled' do