lucia-frontend/src/stores/allMapData.js

import { defineStore } from "pinia";
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 = 0) =>  new Promise((resolve, reject) => setTimeout(resolve, s));

export default defineStore('allMapDataStore', {
  state: () => ({
    logId: null,
    traceId: 1,
    allProcessMap: {},
    allBpmn: {},
    allStats: {},
    allInsights: {},
    allTrace: [],
    allCase: [],
    allTraceTaskSeq: [],
    allFilterTask: [],
    allFilterStartToEnd: [],
    allFilterEndToStart: [],
    allFilterTimeframe: {},
    allFilterTrace: [],
    httpStatus: 200,
  }),
  getters: {
    processMap: state => {
      return state.allProcessMap;
    },
    bpmn: state => {
      return state.allBpmn;
    },
    stats: state => {
      return state.allStats;
    },
    insights: state => {
      return state.allInsights;
    },
    traces: state => {
      return state.allTrace;
    },
    cases: state => {
      return state.allCase;
    },
    traceTaskSeq: state => {
      return state.allTraceTaskSeq;
    },
    // All tasks
    filterTasks: state => {
      return state.allFilterTask;
    },
    // form start to end tasks
    filterStartToEnd: state => {
      return state.allFilterStartToEnd;
    },
    // form end to start tasks
    filterEndToStart: state => {
      return state.allFilterEndToStart;
    },
    filterTimeframe: state => {
      return state.allFilterTimeframe;
    },
    filterTrace: state => {
      return state.allFilterTrace;
    },
  },
  actions: {
    /**
     * fetch discover api, include '/process-map, /bpmn, /stats, /insights'.
     */
    async getAllMapData() {
      let logId = this.logId;
      const api = `/api/logs/${logId}/discover`;

      try {
        const response = await this.$axios.get(api);
        this.allProcessMap = response.data.process_map;
        this.allBpmn = response.data.bpmn;
        this.allStats = response.data.stats;
        this.allInsights = response.data.insights;

        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 Map.');
        })
      };
    },
    /**
     * fetch trace api.
     */
    async getAllTrace() {
      let logId = this.logId;
      const api = `/api/logs/${logId}/traces`;

      try {
        const response = await this.$axios.get(api);
        this.allTrace = response.data;

        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.');
        });
      };
    },
    /**
     * fetch Filter Parameters api.
     */
    async getFilterParams() {
      let logId = this.logId;
      const api = `/api/filters/params?log_id=${logId}`;

      try {
        const response = await this.$axios.get(api);
        this.allFilterTask = response.data.tasks;
        this.allFilterStartToEnd = response.data.sources;
        this.allFilterEndToStart = response.data.sinks;
        this.allFilterTimeframe = response.data.timeframe;
        this.allFilterTrace = response.data.trace;

        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 Filter Parameters.');
        });
      };
    },
  },
})