From b6166e0f1de2a171a2381a38902d7770502d85a9 Mon Sep 17 00:00:00 2001
From: Mark Vulfson <markvu@live.com>
Date: Wed, 30 Jan 2019 12:10:18 -0800
Subject: [PATCH] fix(webhooks): Ensure body and status code are shown for
 webhooks with monitoring (#6452)

Webhooks that are monitored persist results under the `webhook.monitor` node in the context
unlike the unmonitored webhook (which stores it under `webhook`).
Make sure to look at both nodes to find the HTTP status code as well as the response body

Additionally:
* Pretty format the JSON for payload and response in the UI
* Add ability to copy payload and response to clipboard
---
 .../webhookExecutionDetails.controller.ts     | 17 +++++++++---
 .../webhook/webhookExecutionDetails.html      | 26 +++++++++++++++----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/app/scripts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.controller.ts b/app/scripts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.controller.ts
index 99e368eae69..086c514863e 100644
--- a/app/scripts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.controller.ts
+++ b/app/scripts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.controller.ts
@@ -16,6 +16,7 @@ export class WebhookExecutionDetailsCtrl implements IController {
   public progressMessage: string;
   public body: string;
   public stage: any;
+  public payload: string;
 
   constructor(
     private $stateParams: StateParams,
@@ -33,6 +34,7 @@ export class WebhookExecutionDetailsCtrl implements IController {
     this.failureMessage = this.getFailureMessage();
     this.progressMessage = this.getProgressMessage();
     this.body = this.getBodyContent();
+    this.payload = JSON.stringify(this.stage.context.payload, null, 2);
   }
 
   private getProgressMessage(): string {
@@ -46,7 +48,7 @@ export class WebhookExecutionDetailsCtrl implements IController {
     const context = this.stage.context || {},
       webhook = context.webhook || {},
       monitor = webhook.monitor || {},
-      error = webhook.error || null;
+      error = monitor.error || webhook.error || null;
 
     if (error) {
       failureMessage = `Webhook failed: ${error}`;
@@ -58,12 +60,21 @@ export class WebhookExecutionDetailsCtrl implements IController {
   }
 
   private getBodyContent(): string {
-    let body = (this.stage.context && this.stage.context.webhook && this.stage.context.webhook.body) || null;
+    // If there was a webhook monitor task get the body from it, otherwise get it from webhook
+    const context = this.stage.context || {},
+      webhook = context.webhook || {},
+      monitor = webhook.monitor || {};
+
+    const body = monitor.body || webhook.body || null;
 
     // Empty body is only allowed when we haven't started or are running the task.
     // Otherwise, assume the request completed and didn't yield a body in the response
     if (!body && this.stage.originalStatus !== 'NOT_STARTED' && this.stage.originalStatus !== 'RUNNING') {
-      body = '<NO BODY RETURNED BY SERVER>';
+      return '<NO BODY RETURNED BY SERVER>';
+    }
+
+    if (typeof body === 'object') {
+      return JSON.stringify(body, null, 2);
     }
 
     return body;
diff --git a/app/scripts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.html b/app/scripts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.html
index 06209ed396c..b011d93d759 100644
--- a/app/scripts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.html
+++ b/app/scripts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.html
@@ -7,8 +7,16 @@ <h5>Webhook Stage Configuration</h5>
         <dl class="dl-narrow dl-horizontal">
           <dt>Url</dt>
           <dd>{{ctrl.stage.context.url}}</dd>
-          <dt>Payload</dt>
-          <dd>{{ctrl.stage.context.payload}}</dd>
+          <dt>
+            <copy-to-clipboard class="copy-to-clipboard copy-to-clipboard-sm"
+              text="ctrl.payload"
+              tool-tip="'Copy response to clipboard'">
+            </copy-to-clipboard>
+            Payload
+          </dt>
+          <dd>
+            <pre class="ng-binding" style="border:unset;background:unset;padding:0">{{ctrl.payload}}</pre>
+          </dd>
         </dl>
         <dl class="dl-narrow dl-horizontal"
             ng-if="ctrl.stage.context.waitForCompletion">
@@ -33,9 +41,17 @@ <h4>Results</h4>
         <dt>Info</dt>
         <dd class="ng-binding"><p ng-bind-html="ctrl.stage.context.progressMessage | linky:'_blank'"></p></dd>
         <dt>Code</dt>
-        <dd class="ng-binding">{{ctrl.stage.context.webhook.statusCodeValue}}</dd>
-        <dt>Response</dt>
-        <dd class="ng-binding" style="max-height:400px;overflow-y:auto;">{{ctrl.body}}</dd>
+        <dd class="ng-binding">{{ctrl.stage.context.webhook.monitor.statusCodeValue || ctrl.stage.context.webhook.statusCodeValue}}</dd>
+        <dt>
+          <copy-to-clipboard class="copy-to-clipboard copy-to-clipboard-sm"
+            text="ctrl.body"
+            tool-tip="'Copy response to clipboard'">
+          </copy-to-clipboard>
+          Response
+        </dt>
+        <dd>
+          <pre class="ng-binding" style="max-height:400px;overflow-y:auto;border:unset;background:unset;padding:0">{{ctrl.body}}</pre>
+        </dd>
       </dl>
     </div>
   </div>