Issue #169: Done.

src/components/Discover/Map/Filter/Trace.vue

@@ -72,10 +72,10 @@ export default {
   setup() {
     const allMapDataStore = AllMapDataStore();
     const loadingStore = LoadingStore();
-    const { infinit404, infiniteStart, traces, traceTaskSeq, cases } = storeToRefs(allMapDataStore);
+    const { infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases } = storeToRefs(allMapDataStore);
     const { isLoading } = storeToRefs(loadingStore);
 
-    return {allMapDataStore, infinit404, infiniteStart, traces, traceTaskSeq, cases, isLoading}
+    return {allMapDataStore, infinit404, baseInfiniteStart, baseTraces, baseTraceTaskSeq, baseCases, isLoading}
   },
   data() {
     return {
@@ -92,13 +92,13 @@ export default {
   },
   computed: {
     traceTotal: function() {
-      return this.traces.length;
+      return this.baseTraces.length;
     },
     traceCountTotal: function() {
-      return this.traces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
+      return this.baseTraces.map(trace => trace.count).reduce((acc, cur) => acc + cur, 0);
     },
     traceList: function() {
-      return this.traces.map(trace => {
+      return this.baseTraces.map(trace => {
         return {
           id: trace.id,
           value: this.progressWidth(Number(((trace.count / this.traceCountTotal) * 100).toFixed(1))),
@@ -116,9 +116,9 @@ export default {
     chartData: function() {
       const start = this.selectArea[0];
       const end = this.selectArea[1] - 1;
-      const labels = this.traces.map(trace => `#${trace.id}`);
+      const labels = this.baseTraces.map(trace => `#${trace.id}`);
-      const data = this.traces.map(trace => this.getPercentLabel(trace.count / this.traceCountTotal));
+      const data = this.baseTraces.map(trace => this.getPercentLabel(trace.count / this.traceCountTotal));
-      const selectAreaData = this.traces.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
+      const selectAreaData = this.baseTraces.map((trace, index) => index >= start && index <= end ? 'rgba(0,153,255)' : 'rgba(203, 213, 225)');
 
       return { // 要呈現的資料
         labels,
@@ -223,9 +223,9 @@ export default {
       this.infinit404 = null;
       this.infinitMaxItems = false;
       this.showTraceId = id;
-      this.infiniteStart = 0;
+      this.baseInfiniteStart = 0;
-      this.allMapDataStore.traceId = id;
+      this.allMapDataStore.baseTraceId = id;
-      this.infiniteData = await this.allMapDataStore.getTraceDetail();
+      this.infiniteData = await this.allMapDataStore.getBaseTraceDetail();
       this.createCy();
       this.isLoading = false;
     },
@@ -236,7 +236,7 @@ export default {
       // 避免每次渲染都重複累加
       this.processMap.nodes = [];
       // 將 api call 回來的資料帶進 node
-      this.traceTaskSeq.forEach((node, index) => {
+      this.baseTraceTaskSeq.forEach((node, index) => {
         this.processMap.nodes.push({
           data: {
             id: index,
@@ -255,7 +255,7 @@ export default {
      */
     setEdgesData(){
       this.processMap.edges = [];
-      this.traceTaskSeq.forEach((edge, index) => {
+      this.baseTraceTaskSeq.forEach((edge, index) => {
         this.processMap.edges.push({
           data: {
             source: `${index}`,
@@ -283,7 +283,7 @@ export default {
      * @param {element} event
      */
      handleScroll(event) {
-      if(this.infinitMaxItems || this.cases.length < 20) return;
+      if(this.infinitMaxItems || this.baseCases.length < 20) return;
 
       const container = event.target;
       const overScrollHeight = container.scrollTop + container.clientHeight >= container.scrollHeight;
@@ -295,9 +295,9 @@ export default {
      */
     async fetchData() {
       try {
-        this.infiniteStart += 20;
+        this.baseInfiniteStart += 20;
-        await this.allMapDataStore.getTraceDetail();
+        await this.allMapDataStore.getBaseTraceDetail();
-        this.infiniteData = [...this.infiniteData, ...this.cases];
+        this.infiniteData = [...this.infiniteData, ...this.baseCases];
       } catch(error) {
         console.error('Failed to load data:', error);
       }

src/module/apiError.js

@@ -17,7 +17,7 @@ const delay = (s = 0) =>  new Promise((resolve, reject) => setTimeout(resolve, s
  * @returns {string}        Error HTTP Status
  */
 export default async function apiError(error, toastMessage) {
-  if(error?.request.status === 401) {
+  if(error.request?.status === 401) {
     delete axios.defaults.headers.common["Authorization"];
     document.cookie = 'luciaToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
     return router.push('/login');

src/stores/allMapData.js

@@ -4,8 +4,10 @@ import apiError from '@/module/apiError.js';
 
 export default defineStore('allMapDataStore', {
   state: () => ({
+    baseLogId: null,
     logId: null,
     traceId: 1,
+    baseTraceId: 1,
     tempFilterId: null,
     createFilterId: null,
     filterName: null,
@@ -14,8 +16,11 @@ export default defineStore('allMapDataStore', {
     allStats: {},
     allInsights: {},
     allTrace: [],
+    allBaseTrace: [],
     allCase: [],
+    allBaseCase: [],
     allTraceTaskSeq: [],
+    allBaseTraceTaskSeq: [],
     allFilterTask: [],
     allFilterStartToEnd: [],
     allFilterEndToStart: [],
@@ -31,6 +36,7 @@ export default defineStore('allMapDataStore', {
     selectTimeFrame: [], // user select time start and end
     infinite404: null, // 無限滾動式是否到底要換頁
     infiniteStart: 0, // 無限滾動 case 開始的數字
+    baseInfiniteStart: 0, // 無限滾動 case 開始的數字
   }),
   getters: {
     processMap: state => {
@@ -48,15 +54,27 @@ export default defineStore('allMapDataStore', {
     traces: state => {
       return state.allTrace;
     },
+    baseTraces: state => {
+      return state.allBaseTrace;
+    },
     cases: state => {
       return state.allCase;
     },
+    baseCases: state => {
+      return state.allBaseCase;
+    },
     infiniteFirstCases: state => {
       if(state.infiniteStart === 0) return state.allCase;
     },
+    BaseInfiniteFirstCases: state => {
+      if(state.BaseInfiniteStart === 0) return state.allBaseCase;
+    },
     traceTaskSeq: state => {
       return state.allTraceTaskSeq;
     },
+    baseTraceTaskSeq: state => {
+      return state.allBaseTraceTaskSeq;
+    },
     // All tasks
     filterTasks: state => {
       return state.allFilterTask;
@@ -111,6 +129,8 @@ export default defineStore('allMapDataStore', {
       let logId = this.logId;
       let tempFilterId = this.tempFilterId;
       let createfilterId = this.createFilterId;
+      let baseLogId = this.baseLogId;
+      let baseApi = `/api/logs/${baseLogId}/traces`;
       let api = '';
 
       // 先判斷暫存 再判斷 filter 最後 log
@@ -119,9 +139,11 @@ export default defineStore('allMapDataStore', {
       else api = `/api/logs/${logId}/traces`;
 
       try {
+        let baseResponse;
         const response = await this.$axios.get(api);
         this.allTrace = response.data;
-
+        if(baseLogId) baseResponse = await this.$axios.get(baseApi);
+        this.allBaseTrace = baseResponse.data;
       } catch(error) {
         apiError(error, 'Failed to load the Trace.');
       }
@@ -137,7 +159,6 @@ export default defineStore('allMapDataStore', {
       let start = this.infiniteStart;
       let api = '';
 
-
       // 先判斷暫存 再判斷 filter 最後 log
       if(tempFilterId != null) api = `/api/temp-filters/${tempFilterId}/traces/${traceId}?start=${start}&page_size=20`;
       else if(createfilterId!= null) api = `/api/filters/${createfilterId}/traces/${traceId}?start=${start}&page_size=20`;
@@ -158,6 +179,30 @@ export default defineStore('allMapDataStore', {
         apiError(error, 'Failed to load the Trace Detail.');
       };
     },
+    /**
+     * fetch base log trace detail api.
+     */
+    async getBaseTraceDetail() {
+      let logId = this.baseLogId;
+      let traceId = this.baseTraceId;
+      let start = this.baseInfiniteStart;
+      let api = `/api/logs/${logId}/traces/${traceId}?start=${start}&page_size=20`;
+
+      try {
+        const response = await this.$axios.get(api);
+        this.allBaseTraceTaskSeq = response.data.task_seq;
+        this.allBaseCase = response.data.cases;
+        this.allBaseCase.map(c => {
+          c.started_at = moment(c.started_at).format('YYYY-MM-DD HH:MM');
+          c.completed_at = moment(c.completed_at).format('YYYY-MM-DD HH:MM');
+          return this.allBaseCase;
+        });
+        return this.allBaseCase;
+      } catch(error) {
+        if(error.response.status === 404) return this.infinite404 = 404;
+        apiError(error, 'Failed to load the Trace Detail.');
+      };
+    },
     /**
      * fetch Filter Parameters api.
      */

src/views/Discover/Map/index.vue

@@ -68,9 +68,9 @@ export default {
     const loadingStore = LoadingStore();
     const allMapDataStore = AllMapDataStore();
     const { isLoading } = storeToRefs(loadingStore);
-    const { processMap, bpmn, stats, insights, traceId, traces, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, createFilterId } = storeToRefs(allMapDataStore);
+    const { processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, createFilterId } = storeToRefs(allMapDataStore);
 
-    return { isLoading, processMap, bpmn, stats, insights, traceId, traces, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
+    return { isLoading, processMap, bpmn, stats, insights, traceId, traces, baseTraces, baseTraceId, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
   },
   components: {
     SidebarView,
@@ -311,7 +311,9 @@ export default {
     // 取得 logId 後才 call api
     await this.allMapDataStore.getAllMapData();
     await this.allMapDataStore.getAllTrace();
-    this.traceId = await this.traces[0]?.id; // log、filter 檔切換過程中， trace id 不同，將初始 trace id 設定為該檔案的 trace 幣一筆資料的 id。
+    // log、filter 檔切換過程中， trace id 不同，將初始 trace id 設定為該檔案的 trace 幣一筆資料的 id。
+    this.traceId = await this.traces[0]?.id;
+    this.baseTraceId = await this.baseTraces[0]?.id;
     this.createCy(this.mapType);
     await this.allMapDataStore.getFilterParams();
 

src/views/Files/index.vue

@@ -92,9 +92,9 @@
     setup() {
       const store = filesStore();
       const allMapDataStore = AllMapDataStore();
-      const { createFilterId } = storeToRefs(allMapDataStore);
+      const { createFilterId, baseLogId } = storeToRefs(allMapDataStore);
 
-      return { store, allMapDataStore, createFilterId }
+      return { store, allMapDataStore, createFilterId, baseLogId }
     },
     components: {
       IconDataFormat,
@@ -139,6 +139,7 @@
         switch (file.fileType) {
           case 'Log':
             this.createFilterId = null;
+            this.baseLogId = file.id;
             fileId = file.id;
             type = 'log';
             params = { type: type, fileId: fileId };
@@ -146,6 +147,7 @@
             break;
           case 'Filter':
             this.createFilterId = file.id;
+            this.baseLogId = file.log.id;
             fileId = file.id;
             type = 'filter';
             params = { type: type, fileId: fileId };