fix(webhooks): Ensure body and status code are shown for webhooks wit…

…h monitoring (spinnaker#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
christopherthielen · Jan 30, 2019 · b6166e0 · b6166e0
1 parent dba26d8
commit b6166e0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 8 deletions.
diff --git a/...pts/modules/core/src/pipeline/config/stages/webhook/webhookExecutionDetails.controller.ts b/...pts/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
@@ -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>