GAPI-24518: add cache playground

docs/components/Circuit.vue

@@ -11,7 +11,7 @@
       <div>Time: <input v-model.number="time" type="number"/></div>
       <div>
         <button @click="triggerSuccess" :disabled="disabled">Success</button>
-        <button @click="triggerFailure" :disabled="disabled">Failure</button>
+        <button v-if="canFail" @click="triggerFailure" :disabled="disabled">Failure</button>
       </div>
     </div>
     <div ref="logs" class="mollitia-circuit-logs">
@@ -54,6 +54,10 @@ export default {
       type: Boolean,
       default: false
     },
+    canFail: {
+      type: Boolean,
+      default: true
+    },
     successParams: {
       type: Object,
       default: () => { return {}; }
@@ -77,6 +81,10 @@ export default {
     };
   },
   methods: {
+    log (msg) {
+      this.logs += `<span>${msg}</span><br/>`;
+      this.triggerUpdate();
+    },
     triggerSuccess () {
       this.$emit('start');
       this.active = true;

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

@@ -0,0 +1,38 @@
+<template>
+  <div class="mollitia-playground">
+    <Circuit ref="c1" :modules="modules" @end="onCircuitEnd" :can-fail="false">
+      <Cache ref="ca1"></Cache>
+    </Circuit>
+  </div>
+</template>
+
+<script>
+import Circuit from '../../Circuit';
+import Cache from '../../module/Cache';
+export default {
+  name: 'pg-cache',
+  components: {
+    Circuit,
+    Cache
+  },
+  data () {
+    return {
+      modules: []
+    };
+  },
+  methods: {
+    onCircuitEnd () {
+      this.$refs.ca1.onEnd();
+    }
+  },
+  mounted () {
+    this.modules.push(this.$refs.ca1.cache);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+div.mollitia-playground {
+  height: 100%;
+}
+</style>

docs/components/module/Cache.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="mollitia-module-cache">
+    <div class="mollitia-module-cache-header">
+      <div>{{ name }}</div>
+    </div>
+    <div class="mollitia-module-cache-content">
+      <div class="mollitia-module-cache-config">
+        <div>TTL: <input v-model.number="ttl" @input="update" type="number"/></div>
+      </div>
+      <div class="mollitia-module-cache-visual">
+        <div class="mollitia-module-cache-time">
+          <div class="mollitia-module-cache-time-progress" :style="timeStyle"></div>
+        </div>
+        <div class="mollitia-module-cache-percentage">
+          <div class="mollitia-module-cache-title">Cache Duration</div>
+          <div class="mollitia-module-cache-percentage-progress" :style="style"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Cache',
+  props: {
+    name: {
+      type: String,
+      default: 'Cache'
+    }
+  },
+  data () {
+    return {
+      cache: null,
+      ttl: 10000,
+      timePercent: 0,
+      percent: 0,
+      timeInterval: null,
+      interval: null,
+      cached: false
+    };
+  },
+  computed: {
+    time () {
+      return this.$parent.time;
+    },
+    width () {
+      return;
+    },
+    timeStyle () {
+      return {
+        'width': `${this.timePercent}%`
+      }
+    },
+    style () {
+      return {
+        'width': `${this.percent}%`,
+        'background-color': this.cached ? 'var(--mollitia-success-color)' : 'var(--mollitia-error-color)'
+      }
+    }
+  },
+  methods: {
+    update () {
+      this.cache.ttl = this.ttl;
+    },
+    onExecute () {
+      // Time
+      this.timePercent = 0;
+      this.timeInterval = setInterval(() => {
+        this.timePercent += (100 * 100 / this.time);
+        if (this.timePercent >= 100) {
+          clearInterval(this.timeInterval);
+        }
+      }, 100);
+    },
+    onEnd () {
+      this.failed = false;
+      this.timePercent = 100;
+      clearInterval(this.timeInterval);
+      // Cache
+      if (!this.interval) {
+        this.cached = true;
+        this.percent = 0;
+        this.interval = setInterval(() => {
+          this.percent += (100 * 100 / this.ttl);
+          if (this.percent >= 100) {
+            this.cached = false;
+            clearInterval(this.interval);
+            this.interval = null;
+          }
+        }, 100);
+      }
+    }
+  },
+  created () {
+    this.cache = new this.$mollitia.Cache({
+      ttl: this.ttl,
+      logger: {
+        debug: this.$parent.log
+      }
+    });
+    this.cache.on('execute', this.onExecute);
+  },
+  destroyed () {
+    clearInterval(this.timeInterval);
+    clearInterval(this.interval);
+    this.cache.off('execute', this.onExecute);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+div.mollitia-module-cache {
+  border: 1px solid var(--madoc-grey-5);
+  > div.mollitia-module-cache-header {
+    padding: 10px;
+    border-bottom: 1px solid var(--madoc-grey-5);
+  }
+  > div.mollitia-module-cache-content {
+    display: flex;
+    > div.mollitia-module-cache-config {
+      padding: 10px;
+      border-right: 1px solid var(--madoc-grey-5);
+    }
+    > div.mollitia-module-cache-visual {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      min-height: 50px;
+      > div.mollitia-module-cache-time {
+        height: 50%;
+        > div.mollitia-module-cache-time-progress {
+          background-color: var(--mollitia-info-color);
+          height: 100%;
+          transition:
+            width .25s ease,
+            background-color .25s ease;
+        }
+      }
+      > div.mollitia-module-cache-percentage {
+        position: relative;
+        height: 50%;
+        > div.mollitia-module-cache-title {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        > div.mollitia-module-cache-percentage-progress {
+          height: 100%;
+          transition:
+            width .25s ease,
+            background-color .25s ease;
+        }
+      }
+    }
+  }
+}
+</style>

docs/content/_sidebar.md

@@ -10,6 +10,8 @@ links:
     path: /api/circuit
   - group: Core Modules
     links:
+      - title: Cache
+        path: /api/module/cache
       - title: Retry
         path: /api/module/retry
       - title: Timeout

docs/content/api/module/cache.md

@@ -0,0 +1,10 @@
+---
+title: Mollitia - API - Module - Cache
+---
+# Cache
+
+<pg-cache></pg-cache>
+
+## Usage
+
+TODO

src/helpers/map-cache.ts

@@ -55,7 +55,11 @@ export class MapCache {
         return map.get(params[0]) && map.get(params[0]).cache;
       } else {
         const param = params.splice(0, 1)[0];
-        return this._getLoopMap(map.get(param).map, ...params);
+        if (map.get(param)) {
+          return this._getLoopMap(map.get(param).map, ...params);
+        } else {
+          return null;
+        }
       }
     }
   }