refactor: Discover Router done.

src/components/Discover/Conformance/ConformanceResults.vue

@@ -271,7 +271,7 @@ export default {
   watch: {
     conformanceTempReportData: {
       handler: function(newValue) {
-        if(newValue?.rule && newValue.rule.min) {
+        if(newValue?.rule && newValue.rule.min != null) {
           this.selectDurationTime = {
             min: newValue.rule.min,
             max: newValue.rule.max,

src/components/Discover/Conformance/ConformanceSidebar.vue

@@ -611,7 +611,7 @@ export default {
             }
           }
         }, 300);
-      }
+      },
     }
   },
   methods: {

src/components/Discover/StatusBar.vue

@@ -149,23 +149,15 @@ export default {
   },
   async mounted() {
     let params = this.$route.params;
-    let parent = this.$route.meta.parent;
+    let file = this.$route.meta.file;
+    let isCheckPage = this.$route.name.includes('Check');
 
     switch (params.type) {
       case 'log':
-        this.logId = params.fileId;
+        this.logId = isCheckPage ? file.parent.id : params.fileId;
         break;
       case 'filter':
-        this.createFilterId = params.fileId;
+        this.createFilterId = isCheckPage ? file.parent.id : params.fileId;
-        break;
-      case 'rule':
-        switch (parent.type) {
-          case 'log':
-            this.logId = parent.id;
-            break;
-          case 'filter':
-            this.createFilterId = parent.id;
-        }
         break;
     }
     await this.allMapDataStore.getAllMapData();

src/components/Navbar.vue

@@ -80,7 +80,7 @@ export default {
       showNavbarBreadcrumb: false,
       navViewData:
       {
-        // FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
+        // FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN', 'SIMULATION'],
         FILES: ['ALL', 'DISCOVER', 'COMPARE'],
         // DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
         DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE'],
@@ -132,6 +132,7 @@ export default {
     switchNavItem(event) {
       let type;
       let fileId;
+      let isCheckPage;
 
       this.isActive = event.target.innerText;
       switch (this.navViewName) {
@@ -141,22 +142,20 @@ export default {
         case 'DISCOVER':
           type = this.$route.params.type;
           fileId = this.$route.params.fileId;
+          isCheckPage = this.$route.name.includes('Check');
 
           switch (event.target.innerText) {
             case 'MAP':
-              if(type === 'rule') this.$router.push({name: 'CheckMap'});
+              if(isCheckPage) this.$router.push({name: 'CheckMap', params: { type: type, fileId: fileId }});
               else this.$router.push({name: 'Map', params: { type: type, fileId: fileId }});
               break;
             case 'CONFORMANCE':
-              if(type === 'rule') this.$router.push({name: 'CheckConformance'});
+              if(isCheckPage) this.$router.push({name: 'CheckConformance', params: { type: type, fileId: fileId }});
               else this.$router.push({name: 'Conformance', params: { type: type, fileId: fileId }});
               break
             case 'PERFORMANCE':
-              if(type === 'rule') {
+              if(isCheckPage) this.$router.push({name: 'CheckPerformance', params: { type: type, fileId: fileId }});
-                type = this.$route.params.checkType;
+              else this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
-                fileId = this.$route.params.checkFileId;
-              }
-              this.$router.push({name: 'Performance', params: { type: type, fileId: fileId }});
               break;
           }
           break;
@@ -185,6 +184,7 @@ export default {
               this.isActive = 'CONFORMANCE';
               break;
             case 'Performanc':
+            case 'CheckPerformanc':
               this.isActive = 'PERFORMANCE';
               break;
           }
@@ -219,14 +219,15 @@ export default {
           }else if(this.logId){
             await saveFilter(this.allMapDataStore.addFilterId);
             // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
-            await this.$router.push(`/discover/map/filter/${this.createFilterId}`);
+            await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
           };
           break;
         case 'CheckMap':
           // 無論 parentLog, parentFilter，做新 filter 皆另存新檔
           await saveFilter(this.allMapDataStore.addFilterId);
           // 存檔後為 filterID，換網址不跳頁，使用 push 記錄歷史路由
-          await this.$router.push(`/discover/map/filter/${this.createFilterId}`);
+          await this.$router.push(`/discover/filter/${this.createFilterId}/map`);
+          console.log('Check Map save filter need to check_id');
         case 'Conformance':
         case 'CheckConformance':
           // 先判斷有沒有 check Id，有就儲存 return，沒有就往下走
@@ -237,8 +238,8 @@ export default {
           } else {
             await saveConformance(this.conformanceStore.addConformanceCreateCheckId);
             // 存檔後為 checkID，換網址不跳頁，使用 push 記錄歷史路由
-            if(this.conformanceLogId) await this.$router.push(`/rule/log/${this.conformanceLogCreateCheckId}/conformance/${this.conformanceLogId}`);
+            if(this.conformanceLogId) await this.$router.push(`/discover/conformance/log/${this.conformanceLogCreateCheckId}/conformance`);
-            else if(this.conformanceFilterId) await this.$router.push(`/rule/filter/${this.conformanceFilterCreateCheckId}/conformance/${this.conformanceFilterId}`);
+            else if(this.conformanceFilterId) await this.$router.push(`/discover/conformance/filter/${this.conformanceFilterCreateCheckId}/conformance`);
           }
           break;
       }

src/router/index.js

@@ -57,21 +57,76 @@ const routes = [
         name: "Discover",
         children: [
           {
-            // type: log | filter | rule(名稱待討論) | log-check | filter-check
+            // type: log | filter
-            // 如果 type === rule 則轉 log-check | filter-check
+            // fileId: log_id | filter_id
-            path: "/discover/map/:type/:fileId",
+            path: "/discover/:type/:fileId/map",
             name: "Map",
             component: Map,
           },
           {
-            // type: log | filter | rule(名稱待討論)
+            // type: log | filter
-            path: "/discover/conformance/:type/:fileId",
+            // fileId: log_id | filter_id
+            path: "/discover/:type/:fileId/conformance",
             name: "Conformance",
             component: Conformance,
-            mate: {
+          },
-              parent: {}
+          {
+            // type: log | filter
+            // fileId: log_id | filter_id
+            path: "/discover/:type/:fileId/performance",
+            name: "Performance",
+            component: Performance,
+          },
+          {
+            // type: log | filter
+            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            path: "/discover/conformance/:type/:fileId/map",
+            name: "CheckMap",
+            component: Map,
+            meta: {
+              file: {}, // parent log or parent filter
             }
           },
+          {
+            // type: log | filter
+            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            path: "/discover/conformance/:type/:fileId/conformance",
+            name: "CheckConformance",
+            component: Conformance,
+            meta: {
+              file: {}, // parent log or parent filter
+            }
+          },
+          {
+            // type: log | filter
+            // fileId: check_id，透過 `/log-checks/{check_id}` 取得 parent data
+            path: "/discover/conformance/:type/:fileId/performance",
+            name: "CheckPerformance",
+            component: Performance,
+            meta: {
+              file: {}, // parent log or parent filter
+            }
+          },
+          // {
+          //   // type: log | filter | log-check | filter-check
+          //   path: "/discover/map/:type/:fileId",
+          //   name: "Map",
+          //   component: Map,
+          //   mate: {
+          //     parent: {}, // parent log or parent filter
+          //     base: {} // { type: 'rule', fileId: rule id }
+          //   }
+          // },
+          // {
+          //   // type: log | filter | rule(名稱待討論)
+          //   path: "/discover/conformance/:type/:fileId",
+          //   name: "Conformance",
+          //   component: Conformance,
+          //   mate: {
+          //     parent: {}, // parent log or parent filter
+          //     base: {} // { type: 'rule', fileId: rule id }
+          //   }
+          // },
           // {
           //   // type: rule(名稱待討論)
           //   // checkType: log | filter
@@ -86,11 +141,15 @@ const routes = [
           //   component: Conformance,
           //   props: true,
           // },
-          {
+          // {
-            path: "/discover/performance/:type/:fileId",
+          //   path: "/discover/performance/:type/:fileId",
-            name: "Performance",
+          //   name: "Performance",
-            component: Performance,
+          //   component: Performance,
-          }
+          //   mate: {
+          //     parent: {}, // parent log or parent filter
+          //     base: {} // { type: 'rule', fileId: rule id }
+          //   }
+          // }
         ]
       },
       {

src/stores/conformance.js

@@ -12,8 +12,6 @@ export default defineStore('conformanceStore', {
     conformanceFilterTempCheckId: null, // Filter 檔存檔前的 check Id
     conformanceLogCreateCheckId: null, // log 檔存檔後的 check Id(rule)
     conformanceFilterCreateCheckId: null, // Filter 檔存檔後的 check Id(rule)
-    conformanceType: null, // log-check | filter-check 已存檔的 rule
-    conformanceParent: null, // parent log or parent filter
     allConformanceTask: [],
     allCfmSeqStart: [],
     allCfmSeqEnd: [],
@@ -21,6 +19,7 @@ export default defineStore('conformanceStore', {
     allWaitingTime: {},
     allCycleTime: {},
     allConformanceTempReportData: null,
+    allRouteFile: null,
     allIssueTraces: null,
     allTaskSeq: null,
     allCases: null,
@@ -110,6 +109,9 @@ export default defineStore('conformanceStore', {
     conformanceTempReportData: state => {
       return state.allConformanceTempReportData;
     },
+    routeFile: state => {
+      return state.allRouteFile;
+    },
     issueTraces: state => {
       return state.allIssueTraces;
     },
@@ -228,8 +230,9 @@ export default defineStore('conformanceStore', {
     },
     /**
      * Get the Temporary Log Conformance Report
+     * @param {boolean} getRouteFile 是否為了取得 route file 而呼叫？使用在非 Conformance page
      */
-    async getConformanceReport() {
+    async getConformanceReport(getRouteFile = false) {
       let logTempCheckId = this.conformanceLogTempCheckId;
       let filterTempCheckId = this.conformanceFilterTempCheckId;
       let logCreateCheckId = this.conformanceLogCreateCheckId;
@@ -244,7 +247,7 @@ export default defineStore('conformanceStore', {
 
       try {
         const response = await this.$axios.get(api);
-        this.allConformanceTempReportData = response.data;
+        !getRouteFile ? this.allConformanceTempReportData = response.data : this.allRouteFile = response.data.file;
       } catch(error) {
         apiError(error, 'Failed to Get the Temporary Log Conformance Report.');
       }

src/views/Discover/Conformance/index.vue

@@ -9,24 +9,21 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
-import FilesStore from '@/stores/files.js';
+import axios from 'axios';
 import LoadingStore from '@/stores/loading.js';
 import ConformanceStore from '@/stores/conformance.js';
 import StatusBar from '@/components/Discover/StatusBar.vue';
 import ConformanceResults from '@/components/Discover/Conformance/ConformanceResults.vue';
 import ConformanceSidebar from '@/components/Discover/Conformance/ConformanceSidebar.vue';
-import axios from 'axios';
 
 export default {
   setup() {
-    const filesStore = FilesStore();
     const loadingStore = LoadingStore();
     const conformanceStore = ConformanceStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { allFiles } = storeToRefs(filesStore);
+    const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName } = storeToRefs(conformanceStore);
-    const { conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName, conformanceParent } = storeToRefs(conformanceStore);
 
-    return { filesStore, allFiles, isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName, conformanceParent }
+    return { isLoading, conformanceLogId, conformanceFilterId, conformanceLogCreateCheckId, conformanceFilterCreateCheckId, conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceStore, selectedRuleType, selectedActivitySequence, selectedMode, selectedProcessScope, selectedActSeqMore, selectedActSeqFromTo, conformanceRuleData, conformanceTempReportData, conformanceFileName }
   },
   components: {
     StatusBar,
@@ -34,62 +31,33 @@ export default {
     ConformanceSidebar,
   },
   async created() {
-    let params = this.$route.params;
+    this.isLoading = true;
-    let parent = this.$route.meta.parent;
 
-    // type: log | filter | rule(名稱待討論) | log-check(MAP page 來的已存檔 rule) | filter-check(MAP page 來的已存檔 rule)
+    const params = this.$route.params;
-    switch (params.type) {
+    const file = this.$route.meta.file;
-      case 'log': // FILES page 來的 log
+    const isCheckPage = this.$route.name.includes('Check');
-        this.conformanceLogId = params.fileId;
+
-        break;
+    if(!isCheckPage) {
-      case 'filter': // FILES page 來的 filter
+      switch (params.type) {
-        this.conformanceFilterId = params.fileId;
+        case 'log': // FILES page 來的 log
-        break;
+          this.conformanceLogId = params.fileId;
-      // case 'rule':
+          break;
-      //   // path: "/:type/:checkType/:checkId/conformance/:checkFileId"
+        case 'filter': // FILES page 來的 filter
-      //   switch (params.checkType) {
+          this.conformanceFilterId = params.fileId;
-      //     case 'log':
+          break;
-      //       this.conformanceLogId = params.checkFileId;
+      }
-      //       this.conformanceLogCreateCheckId = params.checkId;
+    } else {
-      //       // 為複寫 Modal 取得 fileName
+      switch (params.type) {
-      //       await this.filesStore.fetchAllFiles();
+        case 'log': // FILES page 來的已存檔 rule(log-check)
-      //       await this.allFiles.forEach(file => {
+          this.conformanceLogId = file.parent.id;
-      //         if(file.id == this.conformanceLogCreateCheckId) return this.conformanceFileName = file.name;
+          this.conformanceFileName = file.name;
-      //       });
+          break;
-      //       break;
+        case 'filter': // FILES page 來的已存檔 rule(filter-check)
-      //     case 'filter':
+          this.conformanceFilterId = file.parent.id;
-      //       this.conformanceFilterId = params.checkFileId;
+          this.conformanceFileName = file.name;
-      //       this.conformanceFilterCreateCheckId = params.checkId;
+          break;
-      //       // 為複寫 Modal 取得 fileName
+      }
-      //       await this.filesStore.fetchAllFiles();
+      await this.conformanceStore.getConformanceReport();
-      //       await this.allFiles.forEach(file => {
-      //         if(file.id == this.conformanceFilterCreateCheckId) return this.conformanceFileName = file.name;
-      //       });
-      //   }
-      //   await this.conformanceStore.getConformanceReport();
-      //   break;
-      case 'rule': // FILES page 來的已存檔 rule
-        switch (parent.type) {
-          case 'log':
-            this.conformanceLogId = parent.id;
-            this.conformanceLogCreateCheckId = params.fileId;
-            break;
-          case 'filter':
-            this.conformanceFilterId = parent.id;
-            this.conformanceFilterCreateCheckId = params.fileId;
-        }
-        // 為複寫 Modal 取得 fileName
-        this.conformanceFileName = parent.name;
-        await this.conformanceStore.getConformanceReport();
-        break;
-      case 'log-check': // MAP page 來的已存檔 rule
-        console.log('c p:', params);
-        // 為複寫 Modal 取得 fileName
-        this.conformanceLogCreateCheckId = params.fileId;
-        this.conformanceFileName = parent.name;
-        break;
-      case 'filter-check': // MAP page 來的已存檔 rule
-        break;
     }
     await this.conformanceStore.getConformanceParams();
     // 給 rule 檔取得 ShowBar 一些時間
@@ -113,17 +81,25 @@ export default {
     this.conformanceFileName = null;
   },
   async beforeRouteEnter(to, from, next) {
-    const filesStore = FilesStore();
+    const isCheckPage = to.name.includes('Check');
-    // Save token in Headers.
-    const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
 
-    await filesStore.fetchAllFiles();
+    if (isCheckPage) {
-    await filesStore.allFiles.forEach(file => {
+      const conformanceStore = ConformanceStore();
-      if(file.id == to.params.fileId) {
+      // Save token in Headers.
-        to.meta.parent = file.parent;
+      const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      switch (to.params.type) {
+        case 'log':
+          conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
+          break;
+        case 'filter':
+          conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
+          break;
       }
-    });
+      await conformanceStore.getConformanceReport();
+      to.meta.file = await conformanceStore.conformanceTempReportData.file; // 將 file data 存到 route 給 Navbar, StatusBar 使用
+    }
     next();
   }
 }

src/views/Discover/Map/index.vue

@@ -54,8 +54,10 @@
 
 <script>
 import { storeToRefs } from 'pinia';
+import axios from 'axios';
 import LoadingStore from '@/stores/loading.js';
 import AllMapDataStore from '@/stores/allMapData.js';
+import ConformanceStore from '@/stores/conformance.js';
 import cytoscapeMap from '@/module/cytoscapeMap.js';
 import SidebarView from '@/components/Discover/Map/SidebarView.vue';
 import SidebarState from '@/components/Discover/Map/SidebarState.vue';
@@ -359,37 +361,33 @@ export default {
   },
   async created() {
     const routeParams = this.$route.params;
+    const file = this.$route.meta.file;
+    const isCheckPage = this.$route.name.includes('Check');
 
     // 先 loading 再執行以下程式
     this.isLoading = true;
     // Log 檔前往 Map Log 頁, Filter 檔前往 Map Filter 頁
     switch (routeParams.type) {
       case 'log':
-        this.logId = routeParams.fileId;
+        if(!isCheckPage) {
-        this.baseLogId = routeParams.fileId;
+          this.logId = routeParams.fileId;
+          this.baseLogId = routeParams.fileId;
+        } else {
+          this.logId = file.parent.id;
+          this.baseLogId = file.parent.id;
+        }
         break;
       case 'filter':
-        this.createFilterId = routeParams.fileId;
+        if(!isCheckPage) {
+          this.createFilterId = routeParams.fileId;
+        } else {
+          this.createFilterId = file.parent.id;
+        }
         // 取得 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));
         break;
-      case 'rule':
-        switch (this.checkType) {
-          case 'log':
-            this.logId = this.checkFileId;
-            this.baseLogId = this.checkFileId;
-            break;
-          case 'filter':
-            this.createFilterId = this.checkFileId;
-            // 取得 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));
-            break;
-        }
-        break;
     }
     // 取得 logId 後才 call api
     await this.allMapDataStore.getAllMapData();
@@ -424,6 +422,28 @@ export default {
     this.temporaryData = [];
     this.postRuleData = [];
     this.ruleData = [];
+  },
+  async beforeRouteEnter(to, from, next) {
+    const isCheckPage = to.name.includes('Check');
+
+    if (isCheckPage) {
+      const conformanceStore = ConformanceStore();
+      // Save token in Headers.
+      const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      switch (to.params.type) {
+        case 'log':
+          conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
+          break;
+        case 'filter':
+          conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
+          break;
+      }
+      await conformanceStore.getConformanceReport(true);
+      to.meta.file = conformanceStore.routeFile; // 將 file data 存到 route
+    }
+    next();
   }
 }
 </script>

src/views/Discover/Performance/index.vue

@@ -61,7 +61,12 @@
                   </li>
                   <li class="bg-neutral-10 p-1 border border-neutral-300 rounded">
                     <span class="block font-bold text-sm leading-loose text-center my-2">{{ contentData.avgWaitingTimeByEdge.title }}<span class="material-symbols-outlined align-middle ml-2 cursor-pointer !text-base" v-tooltip.bottom="tooltip.avgWaitingTimeByEdge">info</span></span>
-                    <Chart type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
+                    <div>
+                      <Chart v-if="avgWaitingTimeByEdgeData !== null" type="bar" :data="avgWaitingTimeByEdgeData" :options="avgWaitingTimeByEdgeOptions" :style="{ height: avgWaitingTimeByEdgeHeight }" class="h-[500px]" />
+                      <div v-else class="h-96 bg-neutral-100 m-4 flex">
+                        <p class="h2 text-danger m-auto">No waiting time.</p>
+                      </div>
+                    </div>
                   </li>
                 </ul>
               </li>
@@ -94,8 +99,10 @@
 </template>
 <script>
 import { storeToRefs } from 'pinia';
+import axios from 'axios';
 import LoadingStore from '@/stores/loading.js';
 import PerformanceStore from '@/stores/performance.js';
+import ConformanceStore from '@/stores/conformance.js';
 import StatusBar from '@/components/Discover/StatusBar.vue';
 import { setLineChartData } from '@/module/setChartData.js';
 import { simpleTimeLabel, followTimeLabel, dateLabel } from '@/module/timeLabel.js';
@@ -600,13 +607,23 @@ export default {
   async created() {
     this.isLoading = true; // moubeted 才停止 loading
     const routeParams = this.$route.params;
-    let id = routeParams.fileId;
+    const isCheckPage = this.$route.name.includes('Check');
-    let type = routeParams.type;
+    const type = routeParams.type;
+    const file = this.$route.meta.file;
+    let id;
+
+    if(!isCheckPage) {
+      id = routeParams.fileId;
+    } else {
+      id = file.parent.id;
+    }
 
     // 取得 Performance Data
     await this.performanceStore.getPerformance(type, id);
     this.avgProcessTimeByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_process_time_by_task);
-    this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_waiting_time_by_edge);
+    if(this.performanceData.time.avg_waiting_time_by_edge !== null) {
+      this.avgWaitingTimeByEdgeHeight = await this.getHorizontalBarHeight(this.performanceData.time.avg_waiting_time_by_edge);
+    }
     this.casesByTaskHeight = await this.getHorizontalBarHeight(this.performanceData.freq.cases_by_task);
     // create chart
     [this.avgCycleTimeData, this.avgCycleTimeOptions] = this.getLineChart(this.performanceData.time.avg_cycle_time, this.contentData.avgCycleTime, 'date');
@@ -614,12 +631,39 @@ export default {
     [this.avgProcessTimeData, this.avgProcessTimeOptions] = this.getLineChart(this.performanceData.time.avg_process_time, this.contentData.avgProcessTime, 'date');
     [this.avgProcessTimeByTaskData, this.avgProcessTimeByTaskOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_process_time_by_task, this.contentData.avgProcessTimeByTask, true, 'date');
     [this.avgWaitingTimeData, this.avgWaitingTimeOptions] = this.getLineChart(this.performanceData.time.avg_waiting_time, this.contentData.avgWaitingTime, 'date');
-    [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
+    if(this.performanceData.time.avg_waiting_time_by_edge !== null) {
+      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = this.getHorizontalBarChart(this.performanceData.time.avg_waiting_time_by_edge, this.contentData.avgWaitingTimeByEdge, false, 'date');
+    } else {
+      [this.avgWaitingTimeByEdgeData, this.avgWaitingTimeByEdgeOptions] = [null, null]
+    }
     [this.freqData, this.freqOptions] = this.getLineChart(this.performanceData.freq.cases, this.contentData.freq, 'count');
     [this.casesByTaskData, this.casesByTaskOptions] = this.getHorizontalBarChart(this.performanceData.freq.cases_by_task, this.contentData.casesByTask, true, 'count');
     // 停止 loading
     this.isLoading = false;
   },
+  async beforeRouteEnter(to, from, next) {
+    const isCheckPage = to.name.includes('Check');
+
+    if (isCheckPage) {
+      const conformanceStore = ConformanceStore();
+      // Save token in Headers.
+      const token = document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+      let data;
+
+      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      switch (to.params.type) {
+        case 'log':
+          conformanceStore.conformanceLogCreateCheckId = to.params.fileId;
+          break;
+        case 'filter':
+          conformanceStore.conformanceFilterCreateCheckId = to.params.fileId;
+          break;
+      }
+      await conformanceStore.getConformanceReport(true);
+      to.meta.file = conformanceStore.routeFile; // 將 file data 存到 route
+    }
+    next();
+  }
 }
 </script>
 <style scoped>

src/views/Files/index.vue

@@ -365,7 +365,7 @@
             this.createFilterId = null;
             this.baseLogId = file.id;
             fileId = file.id;
-            type = 'log';
+            type = file.type;
             params = { type: type, fileId: fileId };
             this.$router.push({name: 'Map', params: params});
             break;
@@ -373,34 +373,21 @@
             this.createFilterId = file.id;
             this.baseLogId = file.parent.id;
             fileId = file.id;
-            type = 'filter';
+            type = file.type;
             params = { type: type, fileId: fileId };
             this.$router.push({name: 'Map', params: params});
             break;
-          // case 'log-check':
-          //   // path: "/:type/:checkType/:checkId/conformance/:checkFileId"
-          //   type = 'rule';
-          //   params = { type: type, checkType: 'log', checkId: file.id, checkFileId: file.parent.id };
-          //   this.$router.push({name: 'CheckConformance', params: params});
-          //   break
-          // case 'filter-check':
-          //   type = 'rule';
-          //   params = { type: type, checkType: 'filter', checkId: file.id, checkFileId: file.parent.id };
-          //   this.$router.push({name: 'CheckConformance', params: params});
-          //   break;
-          // conformanceLogId, conformanceFilterId, conformanceType
           case 'log-check':
-            // path: "/discover/conformance/rule/:fileId"
             fileId = file.id;
-            type = 'rule';
+            type = file.parent.type;
             params = { type: type, fileId: fileId };
-            this.$router.push({name: 'Conformance', params: params});
+            this.$router.push({name: 'CheckConformance', params: params});
             break
           case 'filter-check':
             fileId = file.id;
-            type = 'rule';
+            type = file.parent.type;
             params = { type: type, fileId: fileId };
-            this.$router.push({name: 'Conformance', params: params});
+            this.$router.push({name: 'CheckConformance', params: params});
             break;
         }
       },