Add ability to download Service Ping payload

Administrators are able to download payload in json format from
Service usage data page

Changelog: added

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

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

app/assets/javascripts/pages/admin/application_settings/payload_downloader.js

+import createFlash from '~/flash';
+import axios from '../../../lib/utils/axios_utils';
+import { __ } from '../../../locale';
+
+export default class PayloadDownloader {
+  constructor(trigger) {
+    this.trigger = trigger;
+  }
+
+  init() {
+    this.spinner = this.trigger.querySelector('.js-spinner');
+    this.text = this.trigger.querySelector('.js-text');
+
+    this.trigger.addEventListener('click', (event) => {
+      event.preventDefault();
+
+      return this.requestPayload();
+    });
+  }
+
+  requestPayload() {
+    this.spinner.classList.add('d-inline-flex');
+
+    return axios
+      .get(this.trigger.dataset.endpoint, {
+        responseType: 'json',
+      })
+      .then(({ data }) => {
+        PayloadDownloader.downloadFile(data);
+      })
+      .catch(() => {
+        createFlash({
+          message: __('Error fetching payload data.'),
+        });
+      })
+      .finally(() => {
+        this.spinner.classList.remove('d-inline-flex');
+      });
+  }
+
+  static downloadFile(data) {
+    const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
+
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = `${data.recorded_at.slice(0, 10)} payload.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(link.href);
+  }
+}

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

@@ -10,4 +10,7 @@
 %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')
+%button.gl-button.btn.btn-default.js-payload-download-trigger{ type: 'button', data: { endpoint: usage_data_admin_application_settings_path(format: :json) } }
+  .gl-spinner.js-spinner.gl-display-none.gl-mr-2
+  .js-text.d-inline= _('Download 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) } }

locale/gitlab.pot

@@ -12935,6 +12935,9 @@ msgstr ""
 msgid "Download image"
 msgstr ""
 
+msgid "Download payload"
+msgstr ""
+
 msgid "Download raw data (.csv)"
 msgstr ""
 

spec/features/admin/admin_settings_spec.rb

@@ -814,6 +814,16 @@ RSpec.describe 'Admin updates settings' do
         expect(page).to have_button 'Hide payload'
         expect(page).to have_content expected_payload_content
       end
+
+      it 'generates usage ping payload on button click', :js do
+        expect_next_instance_of(Admin::ApplicationSettingsController) do |instance|
+          expect(instance).to receive(:usage_data).and_call_original
+        end
+
+        click_button('Download payload')
+
+        wait_for_requests
+      end
     end
   end