Convert all store files from JavaScript to TypeScript
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
374
src/stores/allMapData.ts
Normal file
374
src/stores/allMapData.ts
Normal file
@@ -0,0 +1,374 @@
|
||||
import { defineStore } from "pinia";
|
||||
import moment from "moment";
|
||||
import apiClient from "@/api/client.js";
|
||||
import apiError from '@/module/apiError.js';
|
||||
import { Decimal } from 'decimal.js';
|
||||
|
||||
export const useAllMapDataStore = defineStore('allMapDataStore', {
|
||||
state: () => ({
|
||||
baseLogId: null,
|
||||
logId: null,
|
||||
traceId: null,
|
||||
baseTraceId: 1,
|
||||
tempFilterId: null,
|
||||
createFilterId: null,
|
||||
filterName: null,
|
||||
allProcessMap: {},
|
||||
allBpmn: {},
|
||||
allStats: {},
|
||||
allInsights: {},
|
||||
allTrace: [],
|
||||
allBaseTrace: [],
|
||||
allCase: [],
|
||||
allBaseCase: [],
|
||||
allTraceTaskSeq: [],
|
||||
allBaseTraceTaskSeq: [],
|
||||
allFilterTask: [],
|
||||
allFilterStartToEnd: [],
|
||||
allFilterEndToStart: [],
|
||||
allFilterTimeframe: {},
|
||||
allFilterTrace: [],
|
||||
allFilterAttrs: [],
|
||||
hasResultRule: null, // click Apply 後檢查是否有 Data
|
||||
temporaryData: [], // 沒被 apply all 的 Data
|
||||
postRuleData: [], // has-result API & temp-filters API 的 Data
|
||||
ruleData: [], // Funnle view's data
|
||||
isRuleData: [], // toggle button data
|
||||
allFunnelData: [],
|
||||
isUpdateFilter: false, // 是否成功儲存 Filter 檔
|
||||
selectTimeFrame: [], // user select time start and end
|
||||
infinite404: null, // 無限滾動式是否到底要換頁
|
||||
infiniteStart: 0, // 無限滾動 case 開始的數字
|
||||
baseInfiniteStart: 0, // 無限滾動 case 開始的數字
|
||||
}),
|
||||
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.sort((x, y) => x.id - y.id);
|
||||
},
|
||||
baseTraces: state => {
|
||||
return state.allBaseTrace.sort((x, y) => x.id - y.id);
|
||||
},
|
||||
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;
|
||||
},
|
||||
// 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;
|
||||
},
|
||||
filterAttrs: state => {
|
||||
if(state.allFilterAttrs !== null){
|
||||
state.allFilterAttrs.forEach(att => {
|
||||
switch (att.type) {
|
||||
case 'date':
|
||||
att.min = att.min !== null ? moment(att.min).format('YYYY/MM/DD HH:mm') : null;
|
||||
att.max = att.max !== null ? moment(att.max).format('YYYY/MM/DD HH:mm') : null;
|
||||
break;
|
||||
case 'float':
|
||||
// Decimal.ROUND_UP|0: 無條件進位； Decimal.ROUND_DOWN|1: 無條件捨去。
|
||||
att.min = att.min !== null ? Number(new Decimal(att.min).toFixed(2, 1)) : null;
|
||||
att.max = att.max !== null ? Number(new Decimal(att.max).toFixed(2, 0)) : null;
|
||||
break
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return att;
|
||||
});
|
||||
return state.allFilterAttrs;
|
||||
}
|
||||
},
|
||||
allFunnels: state => {
|
||||
return state.allFunnelData;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* fetch discover api, include '/process-map, /bpmn, /stats, /insights'.
|
||||
*/
|
||||
async getAllMapData() {
|
||||
const logId = this.logId;
|
||||
const tempFilterId = this.tempFilterId;
|
||||
const createFilterId = this.createFilterId
|
||||
let api = '';
|
||||
|
||||
// 先判斷暫存 再判斷 filter 最後 log
|
||||
if(tempFilterId !== null) api = `/api/temp-filters/${tempFilterId}/discover`;
|
||||
else if(createFilterId!== null) api = `/api/filters/${createFilterId}/discover`;
|
||||
else api = `/api/logs/${logId}/discover`;
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(api);
|
||||
this.allProcessMap = response.data.process_map;
|
||||
this.allBpmn = response.data.bpmn;
|
||||
this.allStats = response.data.stats;
|
||||
this.allInsights = response.data.insights;
|
||||
} catch(error) {
|
||||
apiError(error, 'Failed to load the Map.');
|
||||
};
|
||||
},
|
||||
/**
|
||||
* fetch trace api.
|
||||
*/
|
||||
async getAllTrace() {
|
||||
const logId = this.logId;
|
||||
const tempFilterId = this.tempFilterId;
|
||||
const createFilterId = this.createFilterId;
|
||||
const baseLogId = this.baseLogId;
|
||||
const baseApi = `/api/logs/${baseLogId}/traces`;
|
||||
let api = '';
|
||||
|
||||
// 先判斷暫存 再判斷 filter 最後 log
|
||||
if(tempFilterId !== null) api = `/api/temp-filters/${tempFilterId}/traces`;
|
||||
else if(createFilterId!== null) api = `/api/filters/${createFilterId}/traces`;
|
||||
else api = `/api/logs/${logId}/traces`;
|
||||
|
||||
try {
|
||||
let baseResponse;
|
||||
const response = await apiClient.get(api);
|
||||
this.allTrace = response.data;
|
||||
if(baseLogId) {
|
||||
baseResponse = await apiClient.get(baseApi);
|
||||
this.allBaseTrace = baseResponse.data;
|
||||
}
|
||||
} catch(error) {
|
||||
apiError(error, 'Failed to load the Trace.');
|
||||
}
|
||||
},
|
||||
/**
|
||||
* fetch trace detail api.
|
||||
*/
|
||||
async getTraceDetail() {
|
||||
const logId = this.logId;
|
||||
const traceId = this.traceId;
|
||||
const tempFilterId = this.tempFilterId;
|
||||
const createFilterId = this.createFilterId;
|
||||
const 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`;
|
||||
else api = `/api/logs/${logId}/traces/${traceId}?start=${start}&page_size=20`;
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(api);
|
||||
this.allTraceTaskSeq = response.data.task_seq;
|
||||
this.allCase = response.data.cases;
|
||||
this.allCase.forEach(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');
|
||||
c.attributes.forEach(att => {
|
||||
switch (att.type) {
|
||||
case 'date':
|
||||
att.value = att.value !== null ? moment(att.value).format('YYYY/MM/DD HH:mm') : null;
|
||||
break;
|
||||
case 'float':
|
||||
att.value = att.value !== null ? Number(new Decimal(att.value).toFixed(2)) : null;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
})
|
||||
return this.allCase;
|
||||
});
|
||||
return this.allCase;
|
||||
} catch(error) {
|
||||
if(error.response.status === 404) {
|
||||
this.infinite404 = 404;
|
||||
return;
|
||||
}
|
||||
apiError(error, 'Failed to load the Trace Detail.');
|
||||
};
|
||||
},
|
||||
/**
|
||||
* fetch base log trace detail api.
|
||||
*/
|
||||
async getBaseTraceDetail() {
|
||||
const logId = this.baseLogId;
|
||||
const traceId = this.baseTraceId;
|
||||
const start = this.baseInfiniteStart;
|
||||
const api = `/api/logs/${logId}/traces/${traceId}?start=${start}&page_size=20`;
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(api);
|
||||
this.allBaseTraceTaskSeq = response.data.task_seq;
|
||||
this.allBaseCase = response.data.cases;
|
||||
this.allBaseCase.forEach(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');
|
||||
c.attributes.forEach(att => {
|
||||
switch (att.type) {
|
||||
case 'date':
|
||||
att.value = att.value !== null ? moment(att.value).format('YYYY/MM/DD HH:mm') : null;
|
||||
break;
|
||||
case 'float':
|
||||
att.value = att.value !== null ? Number(new Decimal(att.value).toFixed(2)) : null;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
})
|
||||
return this.allBaseCase;
|
||||
});
|
||||
return this.allBaseCase;
|
||||
} catch(error) {
|
||||
if(error.response.status === 404) {
|
||||
this.infinite404 = 404;
|
||||
return;
|
||||
}
|
||||
apiError(error, 'Failed to load the Base Trace Detail.');
|
||||
};
|
||||
},
|
||||
/**
|
||||
* fetch Filter Parameters api.
|
||||
*/
|
||||
async getFilterParams() {
|
||||
const logId = this.logId;
|
||||
const api = `/api/filters/params?log_id=${logId}`;
|
||||
|
||||
try {
|
||||
const response = await apiClient.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;
|
||||
this.allFilterAttrs = response.data.attrs;
|
||||
|
||||
const min = this.allFilterTimeframe.x_axis.min;
|
||||
const max = this.allFilterTimeframe.x_axis.max;
|
||||
// 給 Chart.js 原始資料，格式不同的畫會錯誤輸出
|
||||
this.allFilterTimeframe.x_axis.min_base = min;
|
||||
this.allFilterTimeframe.x_axis.max_base = max;
|
||||
// 轉成無秒的時間格式
|
||||
this.allFilterTimeframe.x_axis.min = min !== null ? moment(min).format('YYYY/MM/DD HH:mm') : null;
|
||||
this.allFilterTimeframe.x_axis.max = max !== null ? moment(max).format('YYYY/MM/DD HH:mm') : null;
|
||||
} catch(error) {
|
||||
apiError(error, 'Failed to load the Filter Parameters.');
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Test if the Filter Rules Result in Any Data
|
||||
*/
|
||||
async checkHasResult() {
|
||||
const logId = this.logId;
|
||||
const api = `/api/filters/has-result?log_id=${logId}`;
|
||||
|
||||
try {
|
||||
const response = await apiClient.post(api, this.postRuleData)
|
||||
this.hasResultRule = response.data.result;
|
||||
} catch(error) {
|
||||
apiError(error, 'Failed to load the Has Result.');
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Add a New Temporary Filter
|
||||
*/
|
||||
async addTempFilterId() {
|
||||
const logId = this.logId;
|
||||
const api = `/api/temp-filters?log_id=${logId}`;
|
||||
|
||||
try {
|
||||
const response = await apiClient.post(api, this.postRuleData)
|
||||
this.tempFilterId = response.data.id;
|
||||
} catch(error) {
|
||||
apiError(error, 'Failed to add the Temporary Filters.');
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Add a New Filter
|
||||
* @param {string} value file's name
|
||||
*/
|
||||
async addFilterId(value) {
|
||||
const logId = this.logId;
|
||||
const api = `/api/filters?log_id=${logId}`;
|
||||
const createFilterObj = {
|
||||
name: value,
|
||||
rules: this.postRuleData
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await apiClient.post(api, createFilterObj);
|
||||
this.createFilterId = response.data.id;
|
||||
this.tempFilterId = null;
|
||||
}catch(error) {
|
||||
apiError(error, 'Failed to load the Filters.');
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Get Filter Detail
|
||||
* @param {number} createFilterId filter type ID
|
||||
*/
|
||||
async fetchFunnel(createFilterId) {
|
||||
const api = `/api/filters/${createFilterId}`;
|
||||
|
||||
if(createFilterId){
|
||||
try {
|
||||
const response = await apiClient.get(api);
|
||||
this.temporaryData = response.data.rules;
|
||||
this.logId = response.data.log.id;
|
||||
this.filterName = response.data.name;
|
||||
this.baseLogId = response.data.log.id;
|
||||
}catch(error) {
|
||||
apiError(error, 'Failed to get Filter Detail.');
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Update an Existing Filter
|
||||
*/
|
||||
async updateFilter() {
|
||||
const createFilterId = this.createFilterId
|
||||
const api = `/api/filters/${createFilterId}`;
|
||||
const data = this.postRuleData;
|
||||
|
||||
try {
|
||||
const response = await apiClient.put(api, data);
|
||||
this.isUpdateFilter = response.status === 200;
|
||||
this.tempFilterId = null;
|
||||
}catch(error) {
|
||||
apiError(error, 'Failed to update an Existing Filter.');
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user