imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Issue #140:

Browse Source
This commit is contained in:
chiayin
2023-10-16 18:38:20 +08:00
parent e751aed3eb
commit 946fabfa93
6 changed files with 68 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/module/apiError.js Normal file
View File

@@ -0,0 +1,31 @@
import router from "@/router/index.js";
import loadingStore from '@/stores/loading.js';
import pinia from '@/stores/main.js'
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
import axios from "axios";
const loading = loadingStore(pinia);
const $toast = useToast();
// Delay loading and toast
const delay = (s = 0) => new Promise((resolve, reject) => setTimeout(resolve, s));
/**
* API catch error function
* @param {object} Error
* @param {string} toastMessage
* @returns {string} Error HTTP Status
*/
export default async function apiError(error, toastMessage) {
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');
}
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default(toastMessage, {position: 'bottom'});
}

4
src/router/index.js
View File

@@ -82,10 +82,6 @@ router.beforeEach((to, from) => {
// from: Route: 當前導航正要離開的路由 // from: Route: 當前導航正要離開的路由
let isCookie = document.cookie.split(';').some(c => c.trim().startsWith('luciaToken=')); // 是否登入 let isCookie = document.cookie.split(';').some(c => c.trim().startsWith('luciaToken=')); // 是否登入
// 需要驗證登入的頁面，判斷有無登入，無登入要轉址 login
if(to.meta.requiresAuth) {
if (!isCookie) router.push({ name: 'Login' });
}
// 當路由到 login 時，有登入要跳轉至home // 當路由到 login 時，有登入要跳轉至home
if (to.name === 'Login') { if (to.name === 'Login') {
if (isCookie) router.push({ name: 'Files' }); if (isCookie) router.push({ name: 'Files' });

96
src/stores/allMapData.js
View File

@@ -1,14 +1,6 @@
import { defineStore } from "pinia"; 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"; import moment from "moment";
import apiError from '@/module/apiError.js';
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', { export default defineStore('allMapDataStore', {
state: () => ({ state: () => ({
@@ -29,7 +21,6 @@ export default defineStore('allMapDataStore', {
allFilterEndToStart: [], allFilterEndToStart: [],
allFilterTimeframe: {}, allFilterTimeframe: {},
allFilterTrace: [], allFilterTrace: [],
httpStatus: 200,
hasResultRule: null, // click Apply 後檢查是否有 Data hasResultRule: null, // click Apply 後檢查是否有 Data
temporaryData: [], // 沒被 apply all 的 Data temporaryData: [], // 沒被 apply all 的 Data
postRuleData: [], // has-result API & temp-filters API 的 Data postRuleData: [], // has-result API & temp-filters API 的 Data
@@ -109,16 +100,8 @@ export default defineStore('allMapDataStore', {
this.allBpmn = response.data.bpmn; this.allBpmn = response.data.bpmn;
this.allStats = response.data.stats; this.allStats = response.data.stats;
this.allInsights = response.data.insights; this.allInsights = response.data.insights;
// if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; apiError(error, 'Failed to load the Map.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to load the Map.',{position: 'bottom'});
}; };
}, },
/** /**
@@ -139,15 +122,8 @@ export default defineStore('allMapDataStore', {
const response = await this.$axios.get(api); const response = await this.$axios.get(api);
this.allTrace = response.data; this.allTrace = response.data;
// if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; apiError(error, 'Failed to load the Trace.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to load the Trace.',{position: 'bottom'});
} }
}, },
/** /**
@@ -177,19 +153,9 @@ export default defineStore('allMapDataStore', {
return this.allCase; return this.allCase;
}); });
return this.allCase; return this.allCase;
// if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
if(error.response.status === 404) this.infinite404 = 404; if(error.response.status === 404) this.infinite404 = 404;
else { apiError(error, 'Failed to load the Trace Detail.');
this.httpStatus = error.request.status;
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to load the Trace Detail.',{position: 'bottom'});
}
}; };
}, },
/** /**
@@ -206,16 +172,8 @@ export default defineStore('allMapDataStore', {
this.allFilterEndToStart = response.data.sinks; this.allFilterEndToStart = response.data.sinks;
this.allFilterTimeframe = response.data.timeframe; this.allFilterTimeframe = response.data.timeframe;
this.allFilterTrace = response.data.trace; this.allFilterTrace = response.data.trace;
// if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; apiError(error, 'Failed to load the Filter Parameters.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to load the Filter Parameters.',{position: 'bottom'});
}; };
}, },
/** /**
@@ -228,16 +186,8 @@ export default defineStore('allMapDataStore', {
try { try {
const response = await this.$axios.post(api, this.postRuleData) const response = await this.$axios.post(api, this.postRuleData)
this.hasResultRule = response.data.result; this.hasResultRule = response.data.result;
// if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; apiError(error, 'Failed to load the Has Result.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to load the Has Result.',{position: 'bottom'});
}; };
}, },
/** /**
@@ -250,16 +200,8 @@ export default defineStore('allMapDataStore', {
try { try {
const response = await this.$axios.post(api, this.postRuleData) const response = await this.$axios.post(api, this.postRuleData)
this.tempFilterId = response.data.id; this.tempFilterId = response.data.id;
// if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; apiError(error, 'Failed to add the Temporary Filters.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to add the Temporary Filters.',{position: 'bottom'});
}; };
}, },
/** /**
@@ -278,13 +220,7 @@ export default defineStore('allMapDataStore', {
this.createFilterId = response.data.id; this.createFilterId = response.data.id;
this.tempFilterId = null; this.tempFilterId = null;
}catch(error) { }catch(error) {
this.httpStatus = error.request.status; apiError(error, 'Failed to load the Filters.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to load the Filters.',{position: 'bottom'});
}; };
}, },
/** /**
@@ -300,13 +236,7 @@ export default defineStore('allMapDataStore', {
this.logId = response.data.log.id; this.logId = response.data.log.id;
this.filterName = response.data.name; this.filterName = response.data.name;
}catch(error) { }catch(error) {
this.httpStatus = error.request.status; apiError(error, 'Failed to get Filter Detail.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to get Filter Detail.',{position: 'bottom'});
} }
} }
}, },
@@ -322,13 +252,7 @@ export default defineStore('allMapDataStore', {
const response = await this.$axios.put(api, data); const response = await this.$axios.put(api, data);
this.isUpdataFilter = response.status === 200; this.isUpdataFilter = response.status === 200;
}catch(error) { }catch(error) {
this.httpStatus = error.request.status; apiError(error, 'Failed to updata an Existing Filter.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to updata an Existing Filter.',{position: 'bottom'});
} }
}, },
}, },

65
src/stores/conformance.js
View File

@@ -1,17 +1,8 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import loadingStore from "./loading";
import pinia from '@/stores/main.js';
import {useToast} from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
import moment from "moment"; import moment from "moment";
import { Decimal } from 'decimal.js'; import { Decimal } from 'decimal.js';
import abbreviateNumber from '@/module/abbreviateNumber.js'; import abbreviateNumber from '@/module/abbreviateNumber.js';
import apiError from '@/module/apiError.js';
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('conformanceStore', { export default defineStore('conformanceStore', {
state: () => ({ state: () => ({
@@ -199,12 +190,7 @@ export default defineStore('conformanceStore', {
this.allWaitingTime = response.data.waiting_time; this.allWaitingTime = response.data.waiting_time;
this.allCycleTime = response.data.cycle_time; this.allCycleTime = response.data.cycle_time;
} catch(error) { } catch(error) {
await delay(); apiError(error, 'Failed to load the Conformance Parameters.');
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to load the Conformance Parameters.',{position: 'bottom'});
} }
}, },
/** /**
@@ -218,12 +204,7 @@ export default defineStore('conformanceStore', {
const response = await this.$axios.post(api, data); const response = await this.$axios.post(api, data);
this.conformanceTempCheckId = response.data.id; this.conformanceTempCheckId = response.data.id;
} catch(error) { } catch(error) {
await delay(); apiError(error, 'Failed to add the Temporary Check for a log.');
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to add the Temporary Check for a log.',{position: 'bottom'});
} }
}, },
/** /**
@@ -237,13 +218,7 @@ export default defineStore('conformanceStore', {
const response = await this.$axios.get(api); const response = await this.$axios.get(api);
this.allConformanceTempReportData = response.data; this.allConformanceTempReportData = response.data;
} catch(error) { } catch(error) {
await delay(); apiError(error, 'Failed to Get the Temporary Log Conformance Report.');
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to Get the Temporary Log Conformance Report.',{position: 'bottom'});
} }
}, },
/** /**
@@ -257,12 +232,7 @@ export default defineStore('conformanceStore', {
const response = await this.$axios.get(api); const response = await this.$axios.get(api);
this.allIssueTraces = response.data.traces; this.allIssueTraces = response.data.traces;
} catch(error) { } catch(error) {
await delay(); apiError(error, 'Failed to Get the detail of a temporary log conformance issue.');
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to Get the detail of a temporary log conformance issue.',{position: 'bottom'});
}; };
}, },
/** /**
@@ -279,14 +249,7 @@ export default defineStore('conformanceStore', {
return response.data.cases; return response.data.cases;
} catch(error) { } catch(error) {
if(error.response.status === 404) this.infinite404 = 404; if(error.response.status === 404) this.infinite404 = 404;
else { apiError(error, 'Failed to Get the detail of a temporary log conformance issue.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to Get the detail of a temporary log conformance issue.',{position: 'bottom'});
};
}; };
}, },
/** /**
@@ -300,12 +263,7 @@ export default defineStore('conformanceStore', {
const response = await this.$axios.get(api); const response = await this.$axios.get(api);
this.allLoopTraces = response.data.traces; this.allLoopTraces = response.data.traces;
} catch(error) { } catch(error) {
await delay(); apiError(error, 'Failed to Get the detail of a temporary log conformance loop.');
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to Get the detail of a temporary log conformance loop.',{position: 'bottom'});
}; };
}, },
/** /**
@@ -322,14 +280,7 @@ export default defineStore('conformanceStore', {
return response.data.cases; return response.data.cases;
} catch(error) { } catch(error) {
if(error.response.status === 404) this.infinite404 = 404; if(error.response.status === 404) this.infinite404 = 404;
else { apiError(error, 'Failed to Get the detail of a temporary log conformance loop.');
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to Get the detail of a temporary log conformance loop.',{position: 'bottom'});
};
}; };
}, },
}, },

30
src/stores/files.js
View File

@@ -3,13 +3,9 @@ import loadingStore from './loading.js';
import pinia from '@/stores/main.js' import pinia from '@/stores/main.js'
import axios from "axios"; import axios from "axios";
import moment from 'moment'; import moment from 'moment';
import {useToast} from 'vue-toast-notification'; import apiError from '@/module/apiError.js';
import 'vue-toast-notification/dist/theme-sugar.css';
const loading = loadingStore(pinia); const loading = loadingStore(pinia);
const $toast = useToast();
// Delay loading and toast 待模組化
let delay = s => new Promise((resolve, reject) => setTimeout(resolve, s));
export default defineStore('filesStore', { export default defineStore('filesStore', {
state: () => ({ state: () => ({
@@ -75,17 +71,7 @@ export default defineStore('filesStore', {
}) })
if(this.httpStatus < 300) loading.isLoading = false; if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
console.dir(error); // safari 測試 apiError(error, 'Failed to load the logs.');
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 logs.',{position: 'bottom'});
})
}; };
}, },
/** /**
@@ -108,17 +94,7 @@ export default defineStore('filesStore', {
}); });
if(this.httpStatus < 300) loading.isLoading = false; if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
console.dir(error); // safari 測試 apiError(error, 'Failed to load the filters.');
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 filters.',{position: 'bottom'});
})
}; };
}, },
// fetchRule(){o.icon = local_police} // fetchRule(){o.icon = local_police}

46
src/stores/login.js
View File

@@ -1,5 +1,6 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import axios from 'axios'; import axios from 'axios';
import apiError from '@/module/apiError.js';
export default defineStore('loginStore', { export default defineStore('loginStore', {
// data, methods, computed // data, methods, computed
@@ -12,11 +13,6 @@ export default defineStore('loginStore', {
isInvalid: false, isInvalid: false,
userData: {}, userData: {},
}), }),
// 讓元件取用相關的資料狀態
getters: {
},
actions: { actions: {
/** /**
* fetch Login For Access Token api * fetch Login For Access Token api
@@ -32,23 +28,18 @@ export default defineStore('loginStore', {
try { try {
const response = await axios.post(api, this.auth, config); const response = await axios.post(api, this.auth, config);
const token = response.data.access_token;
if(response.status === 200){ // 將 token 儲存在 cookie
// 將 token 儲存在 cookie document.cookie = `luciaToken=${token};`;
const token = response.data.access_token; // // 取得當前日期
// 取得當前日期 // const currentDate = new Date();
const currentDate = new Date(); // // 設定 cookie 的過期日期為一天後
// 設定 cookie 的過期日期為一天後 // const expirationDate = new Date();
const expirationDate = new Date(); // expirationDate.setDate(currentDate.getDate() + 1);
expirationDate.setDate(currentDate.getDate() + 1); // // 格式化過期日期為 Cookie 格式
// 格式化過期日期為 Cookie 格式 // const expires = expirationDate.toUTCString();
const expires = expirationDate.toUTCString(); this.$router.push('/files');
document.cookie = `luciaToken=${token}; expires=${expires};`;
this.$router.push('/files');
}
} catch(error) { } catch(error) {
console.dir(error); // safari 測試
this.isInvalid = true; this.isInvalid = true;
}; };
}, },
@@ -56,11 +47,8 @@ export default defineStore('loginStore', {
* Logout, tooken expired * Logout, tooken expired
*/ */
logOut() { logOut() {
let isCookie = document.cookie.split(';').some(c => c.trim().startsWith('luciaToken=')); delete axios.defaults.headers.common["Authorization"];
let expires = new Date(); document.cookie = 'luciaToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
expires.setTime(expires.getTime() - 60000);
if(isCookie) document.cookie = `luciaToken=; expires=${expires.toGMTString()}`;
this.$router.push('/login'); this.$router.push('/login');
}, },
/** /**
@@ -74,7 +62,7 @@ export default defineStore('loginStore', {
this.userData = response.data; this.userData = response.data;
} catch(error) { } catch(error) {
console.dir(error); // safari 測試 apiError(error, 'Failed to load the Map.');
}; };
}, },
/** /**
@@ -85,11 +73,9 @@ export default defineStore('loginStore', {
try { try {
const response = await axios.get(api); const response = await axios.get(api);
if(response.status !== 200) this.$router.push('/login');
} catch(error) { } catch(error) {
console.dir(error); // safari 測試
this.$router.push('/login'); this.$router.push('/login');
}; };
}, },
} }
}) });