From 8c338dc284168a5132b617f5ca2e216df7d58fc3 Mon Sep 17 00:00:00 2001
From: Aravind Shankar <aravind@hasura.io>
Date: Thu, 13 Dec 2018 15:15:58 +0530
Subject: [PATCH 1/4] show response status code in console, fix #1022

---
 .../Services/EventTrigger/Common/Tooltips.js  |  8 ++++
 .../EventTrigger/ProcessedEvents/ViewRows.js  | 47 ++++++++++++++++++-
 .../EventTrigger/StreamingLogs/Logs.js        | 41 +++++++++++++++-
 .../EventTrigger/StreamingLogs/util.js        |  9 +++-
 .../EventTrigger/TableCommon/Table.scss       |  4 ++
 5 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 console/src/components/Services/EventTrigger/Common/Tooltips.js

diff --git a/console/src/components/Services/EventTrigger/Common/Tooltips.js b/console/src/components/Services/EventTrigger/Common/Tooltips.js
new file mode 100644
index 0000000000000..696caf13dcaf1
--- /dev/null
+++ b/console/src/components/Services/EventTrigger/Common/Tooltips.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import Tooltip from 'react-bootstrap/lib/Tooltip';
+
+export const statusCodeDescription = (
+  <Tooltip id="tooltip-trigger-status-code-description">
+    This is the status code of the event trigger response
+  </Tooltip>
+);
diff --git a/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js b/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
index c2d389fbaa786..caaddee2cd4fc 100644
--- a/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
+++ b/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
@@ -19,6 +19,8 @@ import {
 } from './FilterActions';
 import { ordinalColSort } from '../utils';
 import '../TableCommon/ReactTableFix.css';
+import * as tooltip from '../Common/Tooltips';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 
 const ViewRows = ({
   curTriggerName,
@@ -404,9 +406,52 @@ const ViewRows = ({
                                 </div>
                               ) : null}
                               <div className={styles.add_mar_top}>
-                                <div className={styles.subheading_text}>
+                                <div
+                                  className={
+                                    styles.subheading_text + ' col-md-6'
+                                  }
+                                >
                                   Payload
                                 </div>
+                                <div
+                                  className={
+                                    styles.status_code_right + ' col-md-6'
+                                  }
+                                >
+                                  {finalResponse.status_code
+                                    ? [
+                                      'Status Code: ',
+                                      finalResponse.status_code === 200 ? (
+                                        <i
+                                          className={
+                                            styles.invocationSuccess +
+                                              ' fa fa-check'
+                                          }
+                                        />
+                                      ) : (
+                                        <i
+                                          className={
+                                            styles.invocationFailure +
+                                              ' fa fa-times'
+                                          }
+                                        />
+                                      ),
+                                      finalResponse.status_code,
+                                      ' ',
+                                      <OverlayTrigger
+                                        placement="right"
+                                        overlay={
+                                          tooltip.statusCodeDescription
+                                        }
+                                      >
+                                        <i
+                                          className="fa fa-question-circle"
+                                          aria-hidden="true"
+                                        />
+                                      </OverlayTrigger>,
+                                    ]
+                                    : null}
+                                </div>
                                 <AceEditor
                                   mode="json"
                                   theme="github"
diff --git a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
index f19697f16bdea..1e52da7a6a857 100644
--- a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
+++ b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
@@ -25,6 +25,8 @@ import {
   toggleOldAvailable,
   toggleNewAvailable,
 } from './LogActions';
+import * as tooltip from '../Common/Tooltips';
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 
 class StreamingLogs extends Component {
   constructor(props) {
@@ -409,7 +411,44 @@ class StreamingLogs extends Component {
                           </div>
                         ) : null}
                         <div className={styles.add_mar_top}>
-                          <div className={styles.subheading_text}>Response</div>
+                          <div className={styles.subheading_text + ' col-md-6'}>
+                            Payload
+                          </div>
+                          <div
+                            className={styles.status_code_right + ' col-md-6'}
+                          >
+                            {finalResponse.status_code
+                              ? [
+                                'Status Code: ',
+                                finalResponse.status_code === 200 ? (
+                                  <i
+                                    className={
+                                      styles.invocationSuccess +
+                                        ' fa fa-check'
+                                    }
+                                  />
+                                ) : (
+                                  <i
+                                    className={
+                                      styles.invocationFailure +
+                                        ' fa fa-times'
+                                    }
+                                  />
+                                ),
+                                finalResponse.status_code,
+                                ' ',
+                                <OverlayTrigger
+                                  placement="right"
+                                  overlay={tooltip.statusCodeDescription}
+                                >
+                                  <i
+                                    className="fa fa-question-circle"
+                                    aria-hidden="true"
+                                  />
+                                </OverlayTrigger>,
+                              ]
+                              : null}
+                          </div>
                           <AceEditor
                             mode="json"
                             theme="github"
diff --git a/console/src/components/Services/EventTrigger/StreamingLogs/util.js b/console/src/components/Services/EventTrigger/StreamingLogs/util.js
index 64df846302a65..50c475b98fa61 100644
--- a/console/src/components/Services/EventTrigger/StreamingLogs/util.js
+++ b/console/src/components/Services/EventTrigger/StreamingLogs/util.js
@@ -18,7 +18,12 @@ const parseRowData = (row, dataType) => {
       switch (row.response.version) {
         case '2':
           try {
-            data = JSON.parse(row.response.data.body);
+            // Handle graphql-engine server error message
+            if (row.response.data.message) {
+              data = row.response.data;
+            } else {
+              data = JSON.parse(row.response.data.body);
+            }
           } catch (e) {
             console.log(e);
             data = row.response.data.body;
@@ -26,6 +31,7 @@ const parseRowData = (row, dataType) => {
           return {
             data: data,
             headers: row.response.data.headers,
+            status_code: row.response.data.status,
           };
         default:
           try {
@@ -36,6 +42,7 @@ const parseRowData = (row, dataType) => {
           }
           return {
             data: data,
+            status_code: row.status,
           };
       }
     default:
diff --git a/console/src/components/Services/EventTrigger/TableCommon/Table.scss b/console/src/components/Services/EventTrigger/TableCommon/Table.scss
index 17751c7336a9f..0a86d31c08832 100644
--- a/console/src/components/Services/EventTrigger/TableCommon/Table.scss
+++ b/console/src/components/Services/EventTrigger/TableCommon/Table.scss
@@ -309,3 +309,7 @@ a.expanded {
   clear: both;
   margin: 0;
 }
+.status_code_right {
+  text-align: right;
+  font-weight: bold;
+}

From 40bfaef936f726097beb04979114a0bbb7d91bdb Mon Sep 17 00:00:00 2001
From: Aravind Shankar <aravind@hasura.io>
Date: Thu, 13 Dec 2018 15:38:56 +0530
Subject: [PATCH 2/4] change heading from payload to error if server returns
 error message

---
 .../Services/EventTrigger/ProcessedEvents/ViewRows.js         | 4 +++-
 .../components/Services/EventTrigger/StreamingLogs/Logs.js    | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js b/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
index caaddee2cd4fc..b80764d9ddb1c 100644
--- a/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
+++ b/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
@@ -411,7 +411,9 @@ const ViewRows = ({
                                     styles.subheading_text + ' col-md-6'
                                   }
                                 >
-                                  Payload
+                                  {finalResponse.status_code
+                                    ? 'Payload'
+                                    : 'Error'}
                                 </div>
                                 <div
                                   className={
diff --git a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
index 1e52da7a6a857..d1bf3591f2279 100644
--- a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
+++ b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
@@ -412,7 +412,7 @@ class StreamingLogs extends Component {
                         ) : null}
                         <div className={styles.add_mar_top}>
                           <div className={styles.subheading_text + ' col-md-6'}>
-                            Payload
+                            {finalResponse.status_code ? 'Payload' : 'Error'}
                           </div>
                           <div
                             className={styles.status_code_right + ' col-md-6'}

From 644bd1377d2944c532f591a77948da3961e8cd1a Mon Sep 17 00:00:00 2001
From: Aravind Shankar <aravind@hasura.io>
Date: Fri, 14 Dec 2018 14:37:24 +0530
Subject: [PATCH 3/4] change tooltip text

---
 console/src/components/Services/EventTrigger/Common/Tooltips.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/console/src/components/Services/EventTrigger/Common/Tooltips.js b/console/src/components/Services/EventTrigger/Common/Tooltips.js
index 696caf13dcaf1..dde4330c226a0 100644
--- a/console/src/components/Services/EventTrigger/Common/Tooltips.js
+++ b/console/src/components/Services/EventTrigger/Common/Tooltips.js
@@ -3,6 +3,6 @@ import Tooltip from 'react-bootstrap/lib/Tooltip';
 
 export const statusCodeDescription = (
   <Tooltip id="tooltip-trigger-status-code-description">
-    This is the status code of the event trigger response
+    Status code of the webhook response
   </Tooltip>
 );

From 8881c21290332e4b3c8fa9f3679f2b6bf964eee6 Mon Sep 17 00:00:00 2001
From: Aravind Shankar <aravind@hasura.io>
Date: Fri, 14 Dec 2018 14:50:53 +0530
Subject: [PATCH 4/4] fix css

---
 .../EventTrigger/ProcessedEvents/ViewRows.js  | 10 ++-
 .../EventTrigger/StreamingLogs/Logs.js        | 66 +++++++++++--------
 .../EventTrigger/TableCommon/Table.scss       |  8 +++
 3 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js b/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
index b80764d9ddb1c..cd8db6850bde5 100644
--- a/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
+++ b/console/src/components/Services/EventTrigger/ProcessedEvents/ViewRows.js
@@ -408,7 +408,9 @@ const ViewRows = ({
                               <div className={styles.add_mar_top}>
                                 <div
                                   className={
-                                    styles.subheading_text + ' col-md-6'
+                                    styles.subheading_text +
+                                    ' col-md-6 ' +
+                                    styles.padd_remove
                                   }
                                 >
                                   {finalResponse.status_code
@@ -417,7 +419,9 @@ const ViewRows = ({
                                 </div>
                                 <div
                                   className={
-                                    styles.status_code_right + ' col-md-6'
+                                    styles.status_code_right +
+                                    ' col-md-6 ' +
+                                    styles.padd_remove
                                   }
                                 >
                                   {finalResponse.status_code
@@ -441,7 +445,7 @@ const ViewRows = ({
                                       finalResponse.status_code,
                                       ' ',
                                       <OverlayTrigger
-                                        placement="right"
+                                        placement="top"
                                         overlay={
                                           tooltip.statusCodeDescription
                                         }
diff --git a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
index d1bf3591f2279..d8cf0922039a3 100644
--- a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
+++ b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
@@ -411,42 +411,52 @@ class StreamingLogs extends Component {
                           </div>
                         ) : null}
                         <div className={styles.add_mar_top}>
-                          <div className={styles.subheading_text + ' col-md-6'}>
+                          <div
+                            className={
+                              styles.subheading_text +
+                              ' col-md-6 ' +
+                              styles.padd_remove
+                            }
+                          >
                             {finalResponse.status_code ? 'Payload' : 'Error'}
                           </div>
                           <div
-                            className={styles.status_code_right + ' col-md-6'}
+                            className={
+                              styles.status_code_right +
+                              ' col-md-6 ' +
+                              styles.padd_remove
+                            }
                           >
                             {finalResponse.status_code
                               ? [
-                                'Status Code: ',
-                                finalResponse.status_code === 200 ? (
-                                  <i
-                                    className={
-                                      styles.invocationSuccess +
+                                  'Status Code: ',
+                                  finalResponse.status_code === 200 ? (
+                                    <i
+                                      className={
+                                        styles.invocationSuccess +
                                         ' fa fa-check'
-                                    }
-                                  />
-                                ) : (
-                                  <i
-                                    className={
-                                      styles.invocationFailure +
+                                      }
+                                    />
+                                  ) : (
+                                    <i
+                                      className={
+                                        styles.invocationFailure +
                                         ' fa fa-times'
-                                    }
-                                  />
-                                ),
-                                finalResponse.status_code,
-                                ' ',
-                                <OverlayTrigger
-                                  placement="right"
-                                  overlay={tooltip.statusCodeDescription}
-                                >
-                                  <i
-                                    className="fa fa-question-circle"
-                                    aria-hidden="true"
-                                  />
-                                </OverlayTrigger>,
-                              ]
+                                      }
+                                    />
+                                  ),
+                                  finalResponse.status_code,
+                                  ' ',
+                                  <OverlayTrigger
+                                    placement="top"
+                                    overlay={tooltip.statusCodeDescription}
+                                  >
+                                    <i
+                                      className="fa fa-question-circle"
+                                      aria-hidden="true"
+                                    />
+                                  </OverlayTrigger>,
+                                ]
                               : null}
                           </div>
                           <AceEditor
diff --git a/console/src/components/Services/EventTrigger/TableCommon/Table.scss b/console/src/components/Services/EventTrigger/TableCommon/Table.scss
index 0a86d31c08832..e7c933ef7e44f 100644
--- a/console/src/components/Services/EventTrigger/TableCommon/Table.scss
+++ b/console/src/components/Services/EventTrigger/TableCommon/Table.scss
@@ -312,4 +312,12 @@ a.expanded {
 .status_code_right {
   text-align: right;
   font-weight: bold;
+  font-size: 15px;
+  padding-bottom: 20px;
+  margin-top: 0;
+  margin-bottom: 0;
+  i
+  {
+    margin-left: 5px;
+  }
 }