Discover: add Filter Funnel.

src/components/Discover/Filter/Funnel.vue

@@ -40,6 +40,7 @@ import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 
 export default {
+  props:['setRule'],
   setup() {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();

src/components/Discover/SidebarFilter.vue

@@ -86,7 +86,7 @@
       </div>
     </div>
     <!-- header: funnel -->
-    <Funnel v-if="tab === 'funnel'" @submit-all="sumbitAll"></Funnel>
+    <Funnel v-if="tab === 'funnel'" @submit-all="sumbitAll" :setRule="setRule"></Funnel>
   </Sidebar>
 </template>
 

src/stores/allMapData.js

@@ -30,10 +30,11 @@ export default defineStore('allMapDataStore', {
     allFilterTrace: [],
     httpStatus: 200,
     hasResultRule: null, // click Apply 後檢查是否有 Data
-    temporaryData: [], // 沒被 apply 的 Data
+    temporaryData: [], // 沒被 apply all 的 Data
     postRuleData: [], // has-result API & temp-filters API 的 Data
     ruleData: [], // Funnle view's data
     isRuleData: [], // toggle button data
+    allFunnelData: [],
   }),
   getters: {
     processMap: state => {
@@ -75,6 +76,9 @@ export default defineStore('allMapDataStore', {
     filterTrace: state => {
       return state.allFilterTrace;
     },
+    allFunnels: state => {
+      return state.allFunnelData;
+    },
   },
   actions: {
     /**
@@ -83,12 +87,12 @@ export default defineStore('allMapDataStore', {
     async getAllMapData() {
       let logId = this.logId;
       let tempFilterId = this.tempFilterId;
-      let filterId = this.createFilterId
+      let createfilterId = this.createFilterId
       let api = '';
 
       // 先判斷暫存 再判斷 filter 最後 log
       if(tempFilterId != null) api = `/api/temp-filters/${tempFilterId}/discover`;
-      else if(filterId!= null) api = `/api/filters/${filterId}/discover`;
+      else if(createfilterId!= null) api = `/api/filters/${createfilterId}/discover`;
       else api = `/api/logs/${logId}/discover`;
 
       try {
@@ -233,10 +237,9 @@ export default defineStore('allMapDataStore', {
       };
 
       try {
-        const response = await this.$axios.post(api, createFilterObj)
+        const response = await this.$axios.post(api, createFilterObj);
         this.createFilterId = response.data.id;
         this.tempFilterId = null;
-        console.log('this.createFilterId', this.createFilterId);
       }catch(error) {
         this.httpStatus = error.request.status;
         await delay();
@@ -246,6 +249,27 @@ export default defineStore('allMapDataStore', {
         await delay(500);
         $toast.default('Failed to load the Filters.',{position: 'bottom'});
       };
-    }
+    },
+    /**
+     * Fetch event logs api
+     */
+    async fetchFunnel(createfilterId) {
+      const api = `/api/filters/${createfilterId}`;
+
+      if(createfilterId){
+        try {
+          const response = await this.$axios.get(api);
+          this.temporaryData = response.data.rules;
+        }catch(error) {
+          this.httpStatus = error.request.status;
+          await delay();
+          loading.isLoading = true;
+          await delay(1000);
+          loading.isLoading = false;
+          await delay(500);
+          $toast.default('Failed to load the Filters.',{position: 'bottom'});
+        }
+      }
+    },
   },
 })

src/views/Discover/index.vue

@@ -49,7 +49,7 @@
   <SidebarState v-model:visible="sidebarState" :insights="insights" :stats="stats"></SidebarState>
   <SidebarTraces v-model:visible="sidebarTraces" :traces="traces" :cases="cases" :traceTaskSeq="traceTaskSeq" @switch-Trace-Id="switchTraceId" ref="tracesView"></SidebarTraces>
   <SidebarFilter v-model:visible="sidebarFilter" :filterTasks="filterTasks" :filterStartToEnd="filterStartToEnd" :filterEndToStart="filterEndToStart" :filterTimeframe="filterTimeframe" :filterTrace="filterTrace"
-  @submit-all="createCy(mapType)"></SidebarFilter>
+  @submit-all="createCy(mapType)" ref="sidevarFilterRef"></SidebarFilter>
 
 </template>
 
@@ -68,9 +68,9 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, } = storeToRefs(allMapDataStore);
+    const { processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, createFilterId } = storeToRefs(allMapDataStore);
 
-    return { isLoading, processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, allMapDataStore}
+    return { isLoading, processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
   },
   components: {
     SidebarView,
@@ -300,6 +300,10 @@ export default {
     await this.allMapDataStore.getTraceDetail();
     this.createCy(this.mapType);
     await this.allMapDataStore.getFilterParams();
+    await this.allMapDataStore.fetchFunnel(this.createFilterId)
+    this.isRuleData = await Array.from(this.temporaryData);
+    this.ruleData = await this.isRuleData.map(e => this.$refs.sidevarFilterRef.setRule(e));
+
     this.isLoading = true;
     await new Promise(resolve => setTimeout(resolve, 1000));
     this.isLoading = false;

src/views/Files/index.vue

@@ -133,7 +133,10 @@
        */
       enterDiscover(file){
         let logId;
-        if(file.fileType === 'Log') logId = file.id;
+        if(file.fileType === 'Log'){
+          logId = file.id;
+          this.createFilterId = null;
+        }
         else if(file.fileType === 'Filter') {
           this.createFilterId = file.id;
           logId = file.log.id;

src/views/MainContainer.vue

@@ -27,7 +27,7 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { checkLogin } = loginStore;
-    const { tempFilterId, createFilterId, temporaryData, postRuleData } = storeToRefs(allMapDataStore);
+    const { tempFilterId, createFilterId,  temporaryData, postRuleData } = storeToRefs(allMapDataStore);
 
     return { checkLogin, loadingStore, temporaryData, tempFilterId, createFilterId, postRuleData, allMapDataStore };
   },