GAPI-24749: documentation changes and fixes, fix unit test paths

README.md

@@ -58,7 +58,7 @@ It is very similar at what does [Resilience4j](https://github.com/resilience4j/r
 
 <!-- TODO change links -->
 
-- Works on Node and on browser (even **IE11**, wow).
+- Works on Node and on browser (even **Internet Explorer 11**, wow).
 - Implements a wide variety of Resilience patterns, [more on that here.](http://135.39.45.156:8080)
 - Has **Method Agnostic** circuits, meaning you don't have to create one circuit per function.
 - Supports plugins, [more on that here.](http://135.39.45.156:8080)

docs/components/Circuit.vue

@@ -10,8 +10,8 @@
       <div>Simulate Request</div>
       <div>Time: <input v-model.number="time" type="number"/></div>
       <div>
-        <button @click="triggerSuccess" :disabled="disabled">Success</button>
-        <button v-if="canFail" @click="triggerFailure" :disabled="disabled">Failure</button>
+        <button @click="triggerRequest" :disabled="disabled">Send Request</button>
+        <Toggle v-if="canFail" pre-label="Failure" post-label="Success" v-model="shouldSucceed"/>
       </div>
     </div>
     <div ref="logs" class="mollitia-circuit-logs">
@@ -21,22 +21,12 @@
 </template>
 
 <script>
-const successAsync = (res, delay = 1) => {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(res);
-    }, delay);
-  });
-};
-const failureAsync = (res, delay = 1) => {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      reject(new Error(res));
-    }, delay);
-  });
-};
+import Toggle from './Toggle';
 export default {
   name: 'Circuit',
+  components: {
+    Toggle
+  },
   props: {
     name: {
       type: String,
@@ -74,47 +64,47 @@ export default {
   },
   data () {
     return {
+      shouldSucceed: true,
       active: false,
       circuit: null,
       time: this.initTime,
       logs: ''
     };
   },
   methods: {
+    async request (delay) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          if (this.shouldSucceed) {
+            resolve('Normal Success');
+          } else {
+            reject(new Error('Normal Failure'));
+          }
+        }, delay);
+      });
+    },
     log (msg) {
       this.logs += `<span>${msg}</span><br/>`;
       this.triggerUpdate();
     },
-    triggerSuccess () {
+    triggerRequest () {
       this.$emit('start');
       this.active = true;
-      this.circuit.fn(successAsync).execute('Normal Success', this.time, this.successParams)
+      this.circuit.fn(this.request).execute(this.time, this.successParams)
         .then((res) => {
           this.logs += `<span>${res}</span><br/>`;
-          this.triggerUpdate();
-        })
-        .catch((err) => {
-          this.logs += `<span>${err.message}</span><br/>`;
-          this.triggerUpdate();
+          this.triggerUpdate(true);
         })
-        .finally(() => {
-          this.active = false;
-        });
-    },
-    triggerFailure () {
-      this.$emit('start');
-      this.active = true;
-      this.circuit.fn(failureAsync).execute('Normal Failure', this.time, this.failureParams)
         .catch((err) => {
           this.logs += `<span>${err.message}</span><br/>`;
-          this.triggerUpdate();
+          this.triggerUpdate(false);
         })
         .finally(() => {
           this.active = false;
         });
     },
-    triggerUpdate () {
-      this.$emit('end');
+    triggerUpdate (success) {
+      this.$emit('end', success);
       setTimeout(() => {
         if (this.$refs.logs) {
           this.$refs.logs.scrollTop = this.$refs.logs.scrollHeight;

docs/components/Toggle.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="toggle">
+    <label class="toggle-label" v-if="preLabel">{{ preLabel }}</label>
+    <label class="toggle-container">
+      <input v-model="value" type="checkbox" @input="onInput">
+      <span class="slider"></span>
+    </label>
+    <label class="toggle-label" v-if="postLabel">{{ postLabel }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Toggle',
+  props: {
+    value: {
+      type: Boolean,
+      default: true
+    },
+    preLabel: {
+      type: String,
+      default: ''
+    },
+    postLabel: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      // value: false
+    };
+  },
+  methods: {
+    onInput () {
+      this.$emit('input', !this.value);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+div.toggle {
+  display: inline-block;
+  > label.toggle-label {
+    font-size: small;
+  }
+  > label.toggle-container {
+    position: relative;
+    display: inline-block;
+    width: 38px;
+    height: 21px;
+    > input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      &:checked + span.slider {
+        background-color: #2196F3;
+        &:before {
+          transform: translateX(15px);
+        }
+      }
+      &:focus + span.slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+    }
+    > span.slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      transition: .4s;
+      border-radius: 19px;
+      &:before {
+        position: absolute;
+        content: "";
+        height: 15px;
+        width: 15px;
+        left: 3px;
+        bottom: 3px;
+        background-color: white;
+        transition: .4s;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>

docs/components/global/playground/pg-bulkhead.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mollitia-playground">
-    <Circuit ref="c1" @start="randomizeColor" :modules="modules" :concurrent="true" :success-params="successParams" :failure-params="failureParams" :init-time="4000">
+    <Circuit ref="c1" @start="randomizeColor" :modules="modules" :concurrent="true" :success-params="successParams" :failure-params="failureParams" :init-time="4000" :can-fail="false">
       <Bulkhead ref="b1"></Bulkhead>
     </Circuit>
   </div>

docs/components/global/playground/pg-cache.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mollitia-playground">
-    <Circuit ref="c1" :modules="modules" @end="onCircuitEnd" :can-fail="false">
+    <Circuit ref="c1" :modules="modules" @end="onCircuitEnd">
       <Cache ref="ca1"></Cache>
     </Circuit>
   </div>

docs/components/global/playground/pg-retry.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mollitia-playground">
-    <Circuit ref="c1" :modules="modules">
+    <Circuit ref="c1" :modules="modules" @end="onCircuitEnd">
       <Retry ref="r1" :time="time"></Retry>
     </Circuit>
   </div>
@@ -21,6 +21,11 @@ export default {
       modules: []
     };
   },
+  methods: {
+    onCircuitEnd (success) {
+      this.$refs.r1.onEnd(success);
+    }
+  },
   mounted () {
     this.time = this.$refs.c1.time;
     this.modules.push(this.$refs.r1.retry);

docs/components/module/Bulkhead.vue

@@ -62,7 +62,7 @@ export default {
       for (const promise of this.bulkhead.concurrentBuffer) {
         arr.push({
           size: '25px',
-          color: promise.params[2].color
+          color: promise.params[1].color
         });
       }
       return arr;
@@ -72,7 +72,7 @@ export default {
       for (const promise of this.bulkhead.queueBuffer) {
         arr.push({
           size: '25px',
-          color: promise.params[2].color
+          color: promise.params[1].color
         });
       }
       return arr;

docs/components/module/Cache.vue

@@ -64,6 +64,9 @@ export default {
       this.cache.ttl = this.ttl;
     },
     onExecute () {
+      if (this.percent === 100) {
+        this.percent = 0;
+      }
       // Time
       this.timePercent = 0;
       this.timeInterval = setInterval(() => {

docs/components/module/Retry.vue

@@ -76,10 +76,14 @@ export default {
         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);
+    },
+    onEnd (success) {
+      if (!success) {
+        this.$refs[`progress-${this.index}`][0].style.backgroundColor = 'var(--mollitia-error-color)';
+      }
     }
   },
   created () {

docs/content/api/module/bulkhead.md

@@ -17,7 +17,7 @@ const circuit = new Circuit({
   options: {
     modules: [
       // Creates a bulkhead module
-      new Mollitia.Bulkhead({
+      new Bulkhead({
         concurrentSize: 2, // Allows 2 concurrent requests, if oversizing, goes in a queue.
         queueSize: 2, // Allows 2 requests to be in queue, if oversizing, it will be rejected with a BulkheadOverloadError.
         maxQueueWait: 30000 // After 30 seconds waiting, a queued request will be rejected with a BulkheadQueueWaitError.

docs/content/api/module/fallback.md

@@ -18,7 +18,7 @@ const circuit = new Circuit({
   options: {
     modules: [
       // Creates a fallback module
-      new Mollitia.Fallback({
+      new Fallback({
         cb (err) {
           // Every time the method rejects, You can filter here
           if (err instanceof MyError) {

docs/content/index.md

@@ -63,7 +63,7 @@ It is very similar at what does [Resilience4j](https://github.com/resilience4j/r
 
 <!-- TODO change links -->
 
-- Works on Node and on browser (even **IE11**, wow).
+- Works on Node and on browser (even **Internet Explorer 11**, wow).
 - Implements a wide variety of Resilience patterns, [more on that here.](http://135.39.45.156:8080)
 - Has **Method Agnostic** circuits, meaning you don't have to create one circuit per function.
 - Supports plugins, [more on that here.](http://135.39.45.156:8080)

docs/layouts/default.vue

@@ -10,6 +10,7 @@ html {
   background-color: var(--madoc-github-grey-6);
   color: var(--madoc-white);
   height: 100%;
+  overflow-x: hidden;
 }
 body {
   height: 100%;