GAPI-24540: better retry visual doc

genesys · Oct 22, 2020 · b6de413 · b6de413
1 parent bf4569a
commit b6de413
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 9 deletions.
diff --git a/docs/vue/components/module/RetryModule.vue b/docs/vue/components/module/RetryModule.vue
@@ -1,8 +1,19 @@
 <template>
   <div class="mollitia-module-retry">
-    <div>
+    <div class="mollitia-module-retry-header">
       <div>{{ name }}</div>
-      <div>Attempts: <input v-model="attempts" @input="update" type="number"/></div>
+    </div>
+    <div class="mollitia-module-retry-content">
+      <div class="mollitia-module-retry-config">
+        <div>Attempts: <input v-model="attempts" @input="update" type="number"/></div>
+      </div>
+      <div class="mollitia-module-retry-visual">
+        <div v-for="i in attempts + 1" :key="i" class="mollitia-module-retry-attempt">
+          <div class="mollitia-module-retry-percentage">
+            <div :ref="`progress-${i - 1}`" class="mollitia-module-retry-percentage-progress"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -14,30 +25,105 @@ export default {
     name: {
       type: String,
       default: 'Retry'
+    },
+    time: {
+      type: Number,
+      default: 0
     }
   },
   data () {
     return {
       retry: null,
-      attempts: 2
+      attempts: 2,
+      index: 0,
+      interval: null,
+      requests: []
     };
   },
   methods: {
+    cleanup () {
+      this.requests = new Array(this.attempts + 1).fill(0, 0, this.attempts + 1);
+      for (const ref in this.$refs) {
+        this.$refs[ref][0].style.width = 0;
+      }
+    },
     update () {
       this.retry.attempts = this.attempts;
+    },
+    onExecute () {
+      this.index = 0;
+      this.cleanup();
+      this.interval = setInterval(() => {
+        this.requests[this.index] += (100 * 100 / this.time);
+        this.$refs[`progress-${this.index}`][0].style.width = `${this.requests[this.index]}%`;
+        this.$refs[`progress-${this.index}`][0].style.backgroundColor = 'var(--mollitia-info-color)';
+        if (this.requests[this.index] >= 100) {
+          clearInterval(this.interval);
+        }
+      }, 100);
+    },
+    onRetry () {
+      this.$refs[`progress-${this.index}`][0].style.backgroundColor = 'var(--mollitia-error-color)';
+      this.index++;
+      this.requests[this.index] = 0;
+      this.interval = setInterval(() => {
+        this.requests[this.index] += (100 * 100 / this.time);
+        this.$refs[`progress-${this.index}`][0].style.width = `${this.requests[this.index]}%`;
+        this.$refs[`progress-${this.index}`][0].style.backgroundColor = 'var(--mollitia-info-color)';
+        if (this.requests[this.index] >= 100) {
+          this.$refs[`progress-${this.index}`][0].style.backgroundColor = 'var(--mollitia-error-color)';
+          clearInterval(this.interval);
+        }
+      }, 100);
     }
   },
   created () {
+    this.requests = new Array(this.attempts + 1).fill(0, 0, this.attempts + 1);
     this.retry = new window.Mollitia.Retry({
       attempts: this.attempts
     });
+    this.retry.on('execute', this.onExecute);
+    this.retry.on('retry', this.onRetry);
+  },
+  destroyed () {
+    this.retry.off('execute', this.onExecute);
+    this.retry.off('retry', this.onRetry);
   }
 }
 </script>
 
 <style lang="scss" scoped>
 div.mollitia-module-retry {
-  padding: 10px;
   border: 1px solid var(--madoc-heading-underline-color);
+  > div.mollitia-module-retry-header {
+    padding: 10px;
+    border-bottom: 1px solid var(--madoc-heading-underline-color);
+  }
+  > div.mollitia-module-retry-content {
+    display: flex;
+    > div.mollitia-module-retry-config {
+      padding: 10px;
+      border-right: 1px solid var(--madoc-heading-underline-color);
+    }
+    > div.mollitia-module-retry-visual {
+      flex-grow: 1;
+      display: flex;
+      > div.mollitia-module-retry-attempt {
+        height: 100%;
+        flex-grow: 1;
+        border-right: 1px solid var(--madoc-heading-underline-color);
+        > div.mollitia-module-retry-percentage {
+          height: 100%;
+          > div.mollitia-module-retry-percentage-progress {
+            width: 0;
+            height: 100%;
+            transition:
+              width .25s ease,
+              background-color .25s ease;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/docs/vue/module/Retry.vue b/docs/vue/module/Retry.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mollitia-playground">
-    <Circuit :modules="modules">
-      <RetryModule ref="r1"></RetryModule>
+    <Circuit ref="c1" :modules="modules">
+      <RetryModule ref="r1" :time="time"></RetryModule>
     </Circuit>
   </div>
 </template>
@@ -17,10 +17,12 @@ export default {
   },
   data () {
     return {
+      time: 0,
       modules: []
     };
   },
   mounted () {
+    this.time = this.$refs.c1.time;
     this.modules.push(this.$refs.r1.retry);
   }
 }

diff --git a/docs/vue/module/Timeout.vue b/docs/vue/module/Timeout.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mollitia-playground">
     <Circuit ref="c1" :modules="modules" @end="onCircuitEnd">
-      <TimeoutModule ref="t1" :circuit="circuit"></TimeoutModule>
+      <TimeoutModule ref="t1"></TimeoutModule>
     </Circuit>
   </div>
 </template>
@@ -17,7 +17,6 @@ export default {
   },
   data () {
     return {
-      circuit: null,
       modules: []
     };
   },
@@ -27,7 +26,6 @@ export default {
     }
   },
   mounted () {
-    this.circuit = this.$refs.c1.circuit;
     this.modules.push(this.$refs.t1.timeout);
   }
 }

diff --git a/src/module/retry.ts b/src/module/retry.ts
@@ -25,10 +25,12 @@ export class Retry extends Module {
   // Private Methods
   private async _promiseRetry<T> (circuit: Circuit, attempts: number, promise: any, ...params: any[]): Promise<T> {
     if (attempts - 1 === 0) {
+      this.emit('retry', circuit, this.attempts);
       this.logger?.debug(`Retry: (${this.attempts}/${this.attempts})`);
       return promise(...params);
     }
     if (attempts !== (this.attempts + 1)) {
+      this.emit('retry', circuit, attempts - 1);
       this.logger?.debug(`Retry: (${attempts - 1}/${this.attempts})`);
     }
     return promise(...params).catch(() => {