Discover: Filters Save done.

src/components/Navbar.vue

@@ -50,7 +50,7 @@ import filesStore from '@/stores/files.js';
 import AllMapDataStore from '@/stores/allMapData.js';
 import IconSearch from '@/components/icons/IconSearch.vue';
 import IconSetting from '@/components/icons/IconSetting.vue';
-import { saveFilter } from '@/module/alertModal.js';
+import { saveFilter, savedSuccessfully } from '@/module/alertModal.js';
 
 export default {
   data() {
@@ -72,22 +72,38 @@ export default {
   },
   watch: {
     '$route':'getNavViewName',
+    filterName: function(newVal, oldVal) {
+      this.filterName = newVal;
+    },
+    // createfilterId: function(newVal, oldVal) {
+    //   // this.filterName = newVal;
+    //   console.log(newVal);
+    //   console.log(oldVal);
+    // },
+    postRuleData: function(newVal, oldVal) {
+      // this.filterName = newVal;
+      console.log(newVal);
+      console.log(oldVal);
+    },
   },
   setup() {
     const store = filesStore();
     const allMapDataStore = AllMapDataStore();
-    const { tempFilterId } = storeToRefs(allMapDataStore);
+    const { tempFilterId, createfilterId, filterName, postRuleData, isUpdataFilter } = storeToRefs(allMapDataStore);
 
-    return { store, allMapDataStore, tempFilterId}
+    return { store, allMapDataStore, tempFilterId, createfilterId, filterName, postRuleData, isUpdataFilter}
   },
   components: {
     IconSearch,
     IconSetting,
-    saveFilter
+    saveFilter,
+    savedSuccessfully
   },
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
     this.getNavViewName();
+    let filterId = this.$route.params.filterId;
+    this.createfilterId = filterId;
   },
   methods: {
     switchNavItem(event) {
@@ -98,9 +114,14 @@ export default {
     },
     showAlert() {
       // 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
-
+      // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
-     // 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
+      if(this.createfilterId) {
-      saveFilter(this.allMapDataStore.addFilterId);
+        this.allMapDataStore.updataFilter();
+        console.log(this.isUpdataFilter);
+        if(this.isUpdataFilter) savedSuccessfully(this.filterName);
+      }else{
+        saveFilter(this.allMapDataStore.addFilterId);
+      }
     }
   },
 }

src/module/alertModal.js

@@ -35,20 +35,22 @@ export async function saveFilter(addFilterId) {
   // 存檔成功
   if(isConfirmed) await addFilterId(filterName);
   // 顯示儲存完成
-  if (value) {
+  if (value) savedSuccessfully(value);
-    await Swal.fire({
-      title: 'SAVE COMPLETE',
-      html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
-      showConfirmButton: false,
-      icon: 'success',
-      iconColor: '#0099FF',
-      customClass: customClass
-    })
-  };
   // 清空欄位
   filterName = '';
 }
 
+export async function savedSuccessfully(value) {
+  await Swal.fire({
+    title: 'SAVE COMPLETE',
+    html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
+    showConfirmButton: false,
+    icon: 'success',
+    iconColor: '#0099FF',
+    customClass: customClass
+  })
+};
+
 export async function leaveFilter(next, addFilterId) {
   const result = await Swal.fire({
     title: 'ARE YOU SURE TO LEAVE MAP?',

src/router/index.js

@@ -40,15 +40,15 @@ const routes = [
         component: Files,
       },
       {
-        path: "/discover/:logId",
+        path: "/discover/logs/:logId",
-        name: "Discover",
+        name: "DiscoverLog",
         component: Discover,
-
+      },
-        // 先注意，之後思考是否修改，網址打 discover 時，要跳預設的頁面
+      {
-        // path: "discover",
+        path: "/discover/filters/:filterId",
-        // redirect: 'discover/12345'
+        name: "DiscoverFilter",
-
+        component: Discover,
-      }
+      },
     ]
   },
   {

src/stores/allMapData.js

@@ -16,6 +16,7 @@ export default defineStore('allMapDataStore', {
     traceId: 1,
     tempFilterId: null,
     createFilterId: null,
+    filterName: null,
     allProcessMap: {},
     allBpmn: {},
     allStats: {},
@@ -35,6 +36,7 @@ export default defineStore('allMapDataStore', {
     ruleData: [], // Funnle view's data
     isRuleData: [], // toggle button data
     allFunnelData: [],
+    isUpdataFilter: false, // 是否成功儲存 Filter 檔
   }),
   getters: {
     processMap: state => {
@@ -190,6 +192,9 @@ export default defineStore('allMapDataStore', {
         $toast.default('Failed to load the Filter Parameters.',{position: 'bottom'});
       };
     },
+    /**
+     * Test if the Filter Rules Result in Any Data
+     */
     async checkHasResult() {
       let logId = this.logId;
       const api = `/api/filters/has-result?log_id=${logId}`;
@@ -209,6 +214,9 @@ export default defineStore('allMapDataStore', {
         $toast.default('Failed to load the Has Result.',{position: 'bottom'});
       };
     },
+    /**
+     * Add a New Temporary Filter
+     */
     async addTempFilterId() {
       let logId = this.logId;
       const api = `/api/temp-filters?log_id=${logId}`;
@@ -228,6 +236,9 @@ export default defineStore('allMapDataStore', {
         $toast.default('Failed to add the Temporary Filters.',{position: 'bottom'});
       };
     },
+    /**
+     * Add a New Filter
+     */
     async addFilterId(value) {
       let logId = this.logId;
       const api = `/api/filters?log_id=${logId}`;
@@ -251,7 +262,7 @@ export default defineStore('allMapDataStore', {
       };
     },
     /**
-     * Fetch event logs api
+     * Get Filter Detail
      */
     async fetchFunnel(createfilterId) {
       const api = `/api/filters/${createfilterId}`;
@@ -260,6 +271,8 @@ export default defineStore('allMapDataStore', {
         try {
           const response = await this.$axios.get(api);
           this.temporaryData = response.data.rules;
+          this.logId = response.data.log.id;
+          this.filterName = response.data.name;
         }catch(error) {
           this.httpStatus = error.request.status;
           await delay();
@@ -267,9 +280,30 @@ export default defineStore('allMapDataStore', {
           await delay(1000);
           loading.isLoading = false;
           await delay(500);
-          $toast.default('Failed to load the Filters.',{position: 'bottom'});
+          $toast.default('Failed to get Filter Detail.',{position: 'bottom'});
         }
       }
     },
+    /**
+     * Updata an Existing Filter
+     */
+    async updataFilter() {
+      let createFilterId = this.createFilterId
+      const api = `/api/filters/${createFilterId}`;
+      const data = this.postRuleData;
+
+      try {
+        const response = await this.$axios.put(api, data);
+        this.isUpdataFilter = response.data.is_modified;
+      }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 updata an Existing Filter.',{position: 'bottom'});
+      }
+    }
   },
 })

src/views/Discover/index.vue

@@ -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, temporaryData, isRuleData, ruleData, createFilterId } = storeToRefs(allMapDataStore);
+    const { processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, createFilterId } = storeToRefs(allMapDataStore);
 
-    return { isLoading, processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
+    return { isLoading, processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
   },
   components: {
     SidebarView,
@@ -294,15 +294,22 @@ export default {
     },
   },
   async created() {
-    this.allMapDataStore.logId = this.$route.params.logId;
+    // Log 檔前往 DiscoverLog 頁, Filter 檔前往 DiscoverFilter 頁
+    if(this.$route.name === 'DiscoverLog'){
+      this.logId = this.$route.params.logId;
+    }else if(this.$route.name === 'DiscoverFilter') {
+      this.createFilterId = this.$route.params.filterId;
+      // 取得 logID 和上次儲存的 Funnel
+      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));
+    }
+    // 取得 logId 後才 call api
     await this.allMapDataStore.getAllMapData();
     await this.allMapDataStore.getAllTrace();
     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));

src/views/Files/index.vue

@@ -133,16 +133,19 @@
        */
       enterDiscover(file){
         let logId;
+        let filterId;
+
         if(file.fileType === 'Log'){
-          logId = file.id;
           this.createFilterId = null;
+          logId = file.id;
+          this.$router.push({name: 'DiscoverLog', params: { logId: logId }})
         }
         else if(file.fileType === 'Filter') {
           this.createFilterId = file.id;
-          logId = file.log.id;
+          filterId = file.id;
+          this.$router.push({name: 'DiscoverFilter', params: { filterId: filterId }})
         }
-        this.$router.push({ name: 'Discover', params: { logId: logId }});
+      }
-      },
     },
     mounted() {
       this.store.fetchEventLog();

src/views/MainContainer.vue

@@ -33,7 +33,8 @@ export default {
   },
   watch: {
     $route: function(to, from) {
-      if(to.name !== 'Discover') {
+      // 離開 DiscoverLog 頁要將 Funnel 的規則刪除, DiscoverFilter 會帶上次儲存的 Funnel, 所以不用錯做
+      if(to.name !== 'DiscoverLog') {
         this.tempFilterId = null;
         this.temporaryData = []
         this.postRuleData = []
@@ -60,7 +61,7 @@ export default {
   },
   beforeRouteUpdate(to, from, next) {
     // 離開 Discover 頁時判斷是否有無資料和需要存檔
-    if (from.name === 'Discover' && this.tempFilterId) {
+    if ((from.name === 'DiscoverLog' || from.name === 'DiscoverFilter') && this.tempFilterId) {
       leaveFilter(next, this.allMapDataStore.addFilterId)
     } else {
       next();