1 files changed, 52 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js b/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js
new file mode 100644
index 00000000000..67eee2c3209
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/application_settings/payload_downloader.js
@@ -0,0 +1,52 @@
+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);
+  }
+}