Prettify JSON of sample alert payload

app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue

@@ -255,7 +255,7 @@ export default {
       if (this.showMappingBuilder) {
         this.resetPayloadAndMappingConfirmed = false;
         this.parsedPayload = payloadAlertFields;
-        this.samplePayload.json = this.isValidNonEmptyJSON(payloadExample) ? payloadExample : null;
+        this.samplePayload.json = this.getPrettifiedPayload(payloadExample);
         this.updateMapping(this.getCleanMapping(payloadAttributeMappings));
       }
       this.$el.scrollIntoView({ block: 'center' });
@@ -288,6 +288,11 @@ export default {
       }
       return false;
     },
+    getPrettifiedPayload(payload) {
+      return this.isValidNonEmptyJSON(payload)
+        ? JSON.stringify(JSON.parse(payload), null, '\t')
+        : null;
+    },
     triggerValidation() {
       if (this.isHttp) {
         this.validationState.apiUrl = true;

changelogs/unreleased/325824-prettify-sample-json.yml

+---
+title: Prettify JSON of sample alert payload
+merge_request: 58433
+author:
+type: added