Discover: sideBar trace done.

src/stores/allMapData.js

@@ -3,19 +3,24 @@ import loadingStore from './loading.js';
 import pinia from '@/stores/main.js'
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
+import moment from "moment";
 
 const loading = loadingStore(pinia);
 const $toast = useToast();
 // Delay loading and toast 待模組化
-let delay = s =>  new Promise((resolve, reject) => setTimeout(resolve, s));
+let delay = (s = 0) =>  new Promise((resolve, reject) => setTimeout(resolve, s));
 
 export default defineStore('allMapDataStore', {
   state: () => ({
     logId: null,
+    traceId: 1,
     allProcessMap: {},
     allBpmn: {},
     allStats: {},
     allInsights: {},
+    allTrace: [],
+    allCase: [],
+    allTraceTaskSeq: [],
     httpStatus: 200,
   }),
   getters: {
@@ -30,6 +35,15 @@ export default defineStore('allMapDataStore', {
     },
     insights: state => {
       return state.allInsights;
+    },
+    traces: state => {
+      return state.allTrace;
+    },
+    cases: state => {
+      return state.allCase;
+    },
+    traceTaskSeq: state => {
+      return state.allTraceTaskSeq;
     }
   },
   actions: {
@@ -37,7 +51,7 @@ export default defineStore('allMapDataStore', {
      * fetch discover api, include '/process-map, /bpmn, /stats, /insights'.
      */
     async getAllMapData() {
-      let logId = this.logId
+      let logId = this.logId;
       const api = `/api/logs/${logId}/discover`;
 
       try {
@@ -57,9 +71,66 @@ export default defineStore('allMapDataStore', {
           loading.isLoading = false;
           return delay(500);
         }).then(() => {
-          $toast.default('Failed to load the discover.');
+          $toast.default('Failed to load the Map.');
         })
       };
     },
-  }
+    /**
+     * fetch trace api.
+     */
+    async getAllTrace() {
+      let logId = this.logId;
+      const api = `/api/filters/params?log_id=${logId}`;
+
+      try {
+        const response = await this.$axios.get(api);
+        this.allTrace = response.data.traces;
+
+        if(this.httpStatus < 300) loading.isLoading = false;
+      } catch(error) {
+        this.httpStatus = error.request.status;
+        delay().then(() =>{
+          loading.isLoading = true;
+          return delay(1000);
+        }).then(()=>{
+          loading.isLoading = false;
+          return delay(500);
+        }).then(() => {
+          $toast.default('Failed to load the Trace.');
+        })
+      }
+    },
+    /**
+     * fetch trace detail api.
+     */
+    async getTraceDetail() {
+      let logId = this.logId;
+      let traceId = this.traceId;
+      const api = `/api/logs/${logId}/traces/${traceId}`;
+
+      try {
+        const response = await this.$axios.get(api);
+        this.allTraceTaskSeq = response.data.task_seq;
+        this.allCase = response.data.cases;
+        this.allCase.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.allCase;
+        });
+
+        if(this.httpStatus < 300) loading.isLoading = false;
+      } catch(error) {
+        this.httpStatus = error.request.status;
+        delay().then(() =>{
+          loading.isLoading = true;
+          return delay(1000);
+        }).then(()=>{
+          loading.isLoading = false;
+          return delay(500);
+        }).then(() => {
+          $toast.default('Failed to load the Trace Detail.');
+        });
+      };
+    },
+  },
 })