SCB-1696 Added forward and reverse configuration parameters in the transaction details page
diff --git a/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/controller/TransactionController.java b/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/controller/TransactionController.java
index 32e2d1b..a8491ce 100644
--- a/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/controller/TransactionController.java
+++ b/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/controller/TransactionController.java
@@ -162,16 +162,28 @@
         if (event.containsKey("compensationMethod")) {
           eventDTO.setCompensationMethod(event.get("compensationMethod").toString());
         }
-        if (event.containsKey("retries")) {
-          eventDTO.setRetries(Long.valueOf(event.get("retries").toString()));
+        if (event.containsKey("reverseRetries")) {
+          eventDTO.setReverseRetries(Long.valueOf(event.get("reverseRetries").toString()));
+        }
+        if (event.containsKey("forwardRetries")) {
+          eventDTO.setForwardRetries(Long.valueOf(event.get("forwardRetries").toString()));
+        }
+        if (event.containsKey("reverseTimeout")) {
+          eventDTO.setReverseTimeout(Long.valueOf(event.get("reverseTimeout").toString()));
+        }
+        if (event.containsKey("forwardTimeout")) {
+          eventDTO.setForwardTimeout(Long.valueOf(event.get("forwardTimeout").toString()));
         }
         if (event.containsKey("timeout")) {
           eventDTO.setTimeout(Long.valueOf(event.get("timeout").toString()));
         }
+        if (event.containsKey("retryDelayInMilliseconds")) {
+          eventDTO.setRetryDelayInMilliseconds(Long.valueOf(event.get("retryDelayInMilliseconds").toString()));
+        }
       }
       if (eventDTO.getType().equals("TxAbortedEvent") || eventDTO.getType()
-          .equals("SagaAbortedEvent")) {
-        // TxAbortedEvent properties
+          .equals("SagaAbortedEvent") || eventDTO.getType()
+          .equals("TxCompensateAckFailedEvent")) {
         if (event.containsKey("payloads")) {
           Decoder decoder = Base64.getDecoder();
           String exception;
diff --git a/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/vo/EventDTO.java b/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/vo/EventDTO.java
index e3bfd65..a77957c 100644
--- a/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/vo/EventDTO.java
+++ b/alpha/alpha-ui/src/main/java/org/apache/servicecomb/pack/alpha/ui/vo/EventDTO.java
@@ -28,7 +28,11 @@
   private String localTxId;
   private Date createTime;
   private long timeout;
-  private long retries;
+  private long reverseRetries;
+  private long forwardRetries;
+  private long reverseTimeout;
+  private long forwardTimeout;
+  private long retryDelayInMilliseconds;
   private String compensationMethod;
   private String exception;
 
@@ -64,8 +68,8 @@
     return timeout;
   }
 
-  public long getRetries() {
-    return retries;
+  public long getReverseRetries() {
+    return reverseRetries;
   }
 
   public String getCompensationMethod() {
@@ -80,8 +84,40 @@
     this.timeout = timeout;
   }
 
-  public void setRetries(long retries) {
-    this.retries = retries;
+  public void setReverseRetries(long reverseRetries) {
+    this.reverseRetries = reverseRetries;
+  }
+
+  public long getForwardRetries() {
+    return forwardRetries;
+  }
+
+  public void setForwardRetries(long forwardRetries) {
+    this.forwardRetries = forwardRetries;
+  }
+
+  public long getReverseTimeout() {
+    return reverseTimeout;
+  }
+
+  public void setReverseTimeout(long reverseTimeout) {
+    this.reverseTimeout = reverseTimeout;
+  }
+
+  public long getForwardTimeout() {
+    return forwardTimeout;
+  }
+
+  public void setForwardTimeout(long forwardTimeout) {
+    this.forwardTimeout = forwardTimeout;
+  }
+
+  public long getRetryDelayInMilliseconds() {
+    return retryDelayInMilliseconds;
+  }
+
+  public void setRetryDelayInMilliseconds(long retryDelayInMilliseconds) {
+    this.retryDelayInMilliseconds = retryDelayInMilliseconds;
   }
 
   public void setCompensationMethod(String compensationMethod) {
@@ -107,7 +143,11 @@
     private String localTxId;
     private Date createTime;
     private long timeout;
-    private long retries;
+    private long reverseRetries;
+    private long forwardRetries;
+    private long reverseTimeout;
+    private long forwardTimeout;
+    private long retryDelayInMilliseconds;
     private String compensationMethod;
     private String exception;
 
@@ -154,8 +194,28 @@
       return this;
     }
 
-    public Builder retries(long retries) {
-      this.retries = retries;
+    public Builder reverseRetries(long reverseRetries) {
+      this.reverseRetries = reverseRetries;
+      return this;
+    }
+
+    public Builder forwardRetries(long forwardRetries) {
+      this.forwardRetries = forwardRetries;
+      return this;
+    }
+
+    public Builder reverseTimeout(long reverseTimeout) {
+      this.reverseTimeout = reverseTimeout;
+      return this;
+    }
+
+    public Builder forwardTimeout(long forwardTimeout) {
+      this.forwardTimeout = forwardTimeout;
+      return this;
+    }
+
+    public Builder retryDelayInMilliseconds(long retryDelayInMilliseconds) {
+      this.retryDelayInMilliseconds = retryDelayInMilliseconds;
       return this;
     }
 
@@ -179,7 +239,7 @@
       eventDTO.instanceId = this.instanceId;
       eventDTO.globalTxId = this.globalTxId;
       eventDTO.timeout = this.timeout;
-      eventDTO.retries = this.retries;
+      eventDTO.reverseRetries = this.reverseRetries;
       eventDTO.compensationMethod = this.compensationMethod;
       eventDTO.exception = this.exception;
       return eventDTO;
diff --git a/alpha/alpha-ui/src/main/resources/templates/transaction_details.html b/alpha/alpha-ui/src/main/resources/templates/transaction_details.html
index e279fc2..8df399f 100644
--- a/alpha/alpha-ui/src/main/resources/templates/transaction_details.html
+++ b/alpha/alpha-ui/src/main/resources/templates/transaction_details.html
@@ -32,18 +32,19 @@
         </div>
         <div class="card-body">
           <div class="events" th:each="event,stat : ${events}">
-            <div th:class="${event.type}=='TxAbortedEvent' or ${event.type}=='SagaAbortedEvent' ? 'row text-danger' : 'row'">
+            <div th:class="${event.type}=='TxAbortedEvent' or ${event.type}=='TxCompensateAckFailedEvent' or ${event.type}=='SagaAbortedEvent' ? 'row text-danger' : 'row'">
               <div class="col-xl-6 col-lg-6">
-                <div><i class="fas fa-envelope"></i> <span th:class="${event.type}=='TxAbortedEvent' or ${event.type}=='SagaAbortedEvent' ? 'small text-danger' : 'small text-success'" th:text="${event.type}"></span></div>
+                <div><i class="fas fa-envelope"></i> <span th:class="${event.type}=='TxAbortedEvent' or ${event.type}=='TxCompensateAckFailedEvent' or ${event.type}=='SagaAbortedEvent' ? 'small text-danger' : 'small text-success'" th:text="${event.type}"></span></div>
                 <div><i class="fas fa-bell"></i> <span class="small" th:text="${event.serviceName} + '(' + ${event.instanceId} + ')'"></span></div>
                 <div><i class="fas fa-mars-stroke"></i> <span class="small" th:text="${event.parentTxId}"></span></div>
                 <div><i class="fas fa-transgender"></i> <span class="small" th:text="${event.localTxId}"></span></div>
               </div>
               <div class="col-xl-6 col-lg-6">
                 <div><i class="fas fa-calendar"></i> <span class="small" th:text="${event.createTime}"></span></div>
-                <div th:if="${event.type}==SagaStartedEvent"><i class="fas fa-clock"></i> <span class="small" th:text="${event.timeout}+' ms'"></span></div>
-                <div th:if="${event.type}==TxStartedEvent"><i class="fas fa-undo"></i> <span class="small" th:text="${event.retries}"></span></div>
-                <div th:if="${event.type}==TxStartedEvent  or ${event.type}==TxAbortedEvent or ${event.type}=='SagaAbortedEvent'" class="position-absolute" style="bottom: 0px; right: 15px;">
+                <div th:if="${event.type}==SagaStartedEvent"><i class="fas fa-clock"></i> <span class="small" th:text="${event.timeout}+'ms'"></span></div>
+                <div th:if="${event.type}==TxStartedEvent"><i class="fas fa-undo"></i> <span class="small" th:text="${event.reverseRetries} + '(delay ' + ${event.retryDelayInMilliseconds} + 'ms, timeout ' + ${event.reverseTimeout} + 's)'"></span></div>
+                <div th:if="${event.type}==TxStartedEvent"><i class="fas fa-redo"></i> <span class="small" th:text="${event.forwardRetries} + '(delay ' + ${event.retryDelayInMilliseconds} + 'ms, timeout ' + ${event.forwardTimeout} + 's)'"></span></div>
+                <div th:if="${event.type}==TxStartedEvent or ${event.type}==TxAbortedEvent or ${event.type}==TxCompensateAckFailedEvent or ${event.type}=='SagaAbortedEvent'" class="position-absolute" style="bottom: 0px; right: 15px;">
                   <i name="event_more" class="fas fa-caret-square-down" style="cursor:pointer" th:target="'div-more-'+${stat.index}"></i>
                 </div>
               </div>
@@ -60,7 +61,7 @@
             </div>
 
             <!-- TxAbortedEvent more -->
-            <div th:id="'div-more-'+${stat.index}" th:if="${event.type}==TxAbortedEvent or ${event.type}==SagaAbortedEvent" class="d-none" style="padding-top: 10px">
+            <div th:id="'div-more-'+${stat.index}" th:if="${event.type}==TxAbortedEvent or ${event.type}==TxCompensateAckFailedEvent or ${event.type}==SagaAbortedEvent" class="d-none" style="padding-top: 10px">
               <div class="card border-danger">
                 <div class="card-header small border-danger bg-danger text-white">Exception Stack</div>
                 <div class="card-body">