hasura · shahidhk · Sep 25, 2018 · Sep 21, 2018 · Sep 24, 2018 · Sep 24, 2018
@@ -349,6 +349,12 @@ class AddTrigger extends Component {
               <div className={styles.add_mar_bottom}>
                 <h4 className={styles.subheading_text}>
                   Webhook URL &nbsp; &nbsp;
+                  <OverlayTrigger
+                    placement="right"
+                    overlay={tooltip.webhookUrlDescription}
+                  >
+                    <i className="fa fa-question-circle" aria-hidden="true" />
+                  </OverlayTrigger>{' '}
                 </h4>
                 <input
                   type="url"
@@ -389,6 +395,15 @@ class AddTrigger extends Component {
                     <div>
                       <h4 className={styles.subheading_text}>
                         Advanced - Operation/Columns &nbsp; &nbsp;
+                        <OverlayTrigger
+                          placement="right"
+                          overlay={tooltip.advancedOperationDescription}
+                        >
+                          <i
+                            className="fa fa-question-circle"
+                            aria-hidden="true"
+                          />
+                        </OverlayTrigger>{' '}
                       </h4>
                       <div>
                         <div>

@@ -13,6 +13,18 @@ export const operationsDescription = (
   </Tooltip>
 );
 
+export const webhookUrlDescription = (
+  <Tooltip id="tooltip-webhook-description">
+    POST endpoint which will be triggered with payload on configured events
+  </Tooltip>
+);
+
+export const advancedOperationDescription = (
+  <Tooltip id="tooltip-advanced-operation-description">
+    Columns to be sent in the payload of webhook
+  </Tooltip>
+);
+
 export const postgresDescription = (
   <Tooltip id="tooltip-postgres-description">
     Select the postgres schema and table

@@ -276,10 +276,14 @@ const redeliverEvent = eventId => (dispatch, getState) => {
 const setTrigger = triggerName => ({ type: SET_TRIGGER, triggerName });
 
 const setRedeliverEvent = eventId => dispatch => {
-  return dispatch(loadEventInvocations(eventId)).then(() => {
-    dispatch(redeliverEvent(eventId)).then(() => {
-      dispatch({ type: SET_REDELIVER_EVENT, eventId });
-    });
+  /*
+    Redeliver event and mark the redeliverEventId to the redelivered event so that it can be tracked.
+  */
+  return dispatch(redeliverEvent(eventId)).then(() => {
+    return Promise.all([
+      dispatch({ type: SET_REDELIVER_EVENT, eventId }),
+      dispatch(loadEventInvocations(eventId)),
+    ]);
   });
 };
 

@@ -95,8 +95,9 @@ class StreamingLogs extends Component {
   }
   toggleModal(currentEvent) {
     // set current event to redeliver
-    this.props.dispatch(setRedeliverEvent(currentEvent));
-    this.props.dispatch({ type: MODAL_OPEN, data: true });
+    this.props.dispatch(setRedeliverEvent(currentEvent)).then(() => {
+      this.props.dispatch({ type: MODAL_OPEN, data: true });
+    });
   }
 
   render() {

@@ -19,10 +19,45 @@ class RedeliverEvent extends Component {
     this.state = { isWatching: true, intervalId: null };
     this.refreshData = this.refreshData.bind(this);
   }
+  componentDidMount() {
+    if (this.props.log.isModalOpen) {
+      this.attachFetching(this.props.log.redeliverEventId);
+    }
+  }
+  componentWillReceiveProps(nextProps) {
+    if (this.props.log.isModalOpen !== nextProps.log.isModalOpen) {
+      if (nextProps.log.isModalOpen === true) {
+        this.attachFetching(nextProps.log.redeliverEventId);
+      } else {
+        this.removeFetching(this.state.intervalId);
+      }
+    } else if (
+      this.state.intervalId !== null &&
+      this.props.log.eventInvocations.length ===
+        nextProps.log.eventInvocations.length
+    ) {
+      this.removeFetching(this.state.intervalId);
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.log.isModalOpen) {
+      this.removeFetching(this.state.intervalId);
+    }
+  }
   onModalClose = () => {
     this.props.dispatch({ type: MODAL_OPEN, data: false });
   };
-
+  attachFetching(eventId) {
+    const intervalId = setInterval(
+      () => this.props.dispatch(loadEventInvocations(eventId)),
+      5000
+    );
+    this.setState({ ...this.state, intervalId: intervalId });
+  }
+  removeFetching(intervalId) {
+    clearInterval(intervalId);
+    this.setState({ ...this.state, intervalId: null });
+  }
   refreshData() {
     this.props.dispatch(loadEventInvocations(this.props.log.event_id));
   }
@@ -34,6 +69,10 @@ class RedeliverEvent extends Component {
     const styles = require('./Table.scss');
     const { log } = this.props;
 
+    const isLoading = this.state.intervalId ? (
+      <i className="fa fa-spinner fa-spin" />
+    ) : null;
+
     const renderTableBody = () => {
       if (log.eventInvocations.length === 0) {
         return <div> No rows found. </div>;
@@ -182,10 +221,10 @@ class RedeliverEvent extends Component {
                       value={
                         log.eventInvocations[0]
                           ? JSON.stringify(
-                              log.eventInvocations[0].request,
-                              null,
-                              4
-                            )
+                            log.eventInvocations[0].request,
+                            null,
+                            4
+                          )
                           : ''
                       }
                       minLines={8}
@@ -197,7 +236,7 @@ class RedeliverEvent extends Component {
                     />
                   </div>
                   <div className={styles.padd_left_remove + ' col-md-5'}>
-                    <div> Latest Invocation Response </div>
+                    <div> Latest Invocation Response {isLoading}</div>
                     {log.redeliverEventFailure === null ? (
                       <AceEditor
                         mode="json"