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

Discover: Filters Save done.

Browse Source
This commit is contained in:
chiayin
2023-05-02 17:02:05 +08:00
parent 378d6ea550
commit c1df89fefb
7 changed files with 107 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Navbar.vue
View File

@@ -50,7 +50,7 @@ import filesStore from '@/stores/files.js';
import AllMapDataStore from '@/stores/allMapData.js';
import IconSearch from '@/components/icons/IconSearch.vue';
import IconSetting from '@/components/icons/IconSetting.vue';
import { saveFilter } from '@/module/alertModal.js';
import { saveFilter, savedSuccessfully } from '@/module/alertModal.js';
export default {
data() {
@@ -72,22 +72,38 @@ export default {
},
watch: {
'$route':'getNavViewName',
filterName: function(newVal, oldVal) {
this.filterName = newVal;
},
// createfilterId: function(newVal, oldVal) {
// // this.filterName = newVal;
// console.log(newVal);
// console.log(oldVal);
// },
postRuleData: function(newVal, oldVal) {
// this.filterName = newVal;
console.log(newVal);
console.log(oldVal);
},
},
setup() {
const store = filesStore();
const allMapDataStore = AllMapDataStore();
const { tempFilterId } = storeToRefs(allMapDataStore);
const { tempFilterId, createfilterId, filterName, postRuleData, isUpdataFilter } = storeToRefs(allMapDataStore);
return { store, allMapDataStore, tempFilterId}
return { store, allMapDataStore, tempFilterId, createfilterId, filterName, postRuleData, isUpdataFilter}
},
components: {
IconSearch,
IconSetting,
saveFilter
saveFilter,
savedSuccessfully
},
mounted() {
this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
this.getNavViewName();
let filterId = this.$route.params.filterId;
this.createfilterId = filterId;
},
methods: {
switchNavItem(event) {
@@ -98,9 +114,14 @@ export default {
},
showAlert() {
// 先判斷有沒有 filter Id，有就儲存 return，沒有就往下走
// 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
saveFilter(this.allMapDataStore.addFilterId);
// 沒有 filter Id, 有暫存 tempFilterId Id 可以另存新檔
if(this.createfilterId) {
this.allMapDataStore.updataFilter();
console.log(this.isUpdataFilter);
if(this.isUpdataFilter) savedSuccessfully(this.filterName);
}else{
saveFilter(this.allMapDataStore.addFilterId);
}
}
},
}

22
src/module/alertModal.js
View File

@@ -35,20 +35,22 @@ export async function saveFilter(addFilterId) {
// 存檔成功
if(isConfirmed) await addFilterId(filterName);
// 顯示儲存完成
if (value) {
await Swal.fire({
title: 'SAVE COMPLETE',
html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
showConfirmButton: false,
icon: 'success',
iconColor: '#0099FF',
customClass: customClass
})
};
if (value) savedSuccessfully(value);
// 清空欄位
filterName = '';
}
export async function savedSuccessfully(value) {
await Swal.fire({
title: 'SAVE COMPLETE',
html: `<span class="text-primary">${value}</span> has been saved in Lucia.`,
showConfirmButton: false,
icon: 'success',
iconColor: '#0099FF',
customClass: customClass
})
};
export async function leaveFilter(next, addFilterId) {
const result = await Swal.fire({
title: 'ARE YOU SURE TO LEAVE MAP?',

16
src/router/index.js
View File

@@ -40,15 +40,15 @@ const routes = [
component: Files,
},
{
path: "/discover/:logId",
name: "Discover",
path: "/discover/logs/:logId",
name: "DiscoverLog",
component: Discover,
// 先注意，之後思考是否修改，網址打 discover 時，要跳預設的頁面
// path: "discover",
// redirect: 'discover/12345'
}
},
{
path: "/discover/filters/:filterId",
name: "DiscoverFilter",
component: Discover,
},
]
},
{

38
src/stores/allMapData.js
View File

@@ -16,6 +16,7 @@ export default defineStore('allMapDataStore', {
traceId: 1,
tempFilterId: null,
createFilterId: null,
filterName: null,
allProcessMap: {},
allBpmn: {},
allStats: {},
@@ -35,6 +36,7 @@ export default defineStore('allMapDataStore', {
ruleData: [], // Funnle view's data
isRuleData: [], // toggle button data
allFunnelData: [],
isUpdataFilter: false, // 是否成功儲存 Filter 檔
}),
getters: {
processMap: state => {
@@ -190,6 +192,9 @@ export default defineStore('allMapDataStore', {
$toast.default('Failed to load the Filter Parameters.',{position: 'bottom'});
};
},
/**
* Test if the Filter Rules Result in Any Data
*/
async checkHasResult() {
let logId = this.logId;
const api = `/api/filters/has-result?log_id=${logId}`;
@@ -209,6 +214,9 @@ export default defineStore('allMapDataStore', {
$toast.default('Failed to load the Has Result.',{position: 'bottom'});
};
},
/**
* Add a New Temporary Filter
*/
async addTempFilterId() {
let logId = this.logId;
const api = `/api/temp-filters?log_id=${logId}`;
@@ -228,6 +236,9 @@ export default defineStore('allMapDataStore', {
$toast.default('Failed to add the Temporary Filters.',{position: 'bottom'});
};
},
/**
* Add a New Filter
*/
async addFilterId(value) {
let logId = this.logId;
const api = `/api/filters?log_id=${logId}`;
@@ -251,7 +262,7 @@ export default defineStore('allMapDataStore', {
};
},
/**
* Fetch event logs api
* Get Filter Detail
*/
async fetchFunnel(createfilterId) {
const api = `/api/filters/${createfilterId}`;
@@ -260,6 +271,8 @@ export default defineStore('allMapDataStore', {
try {
const response = await this.$axios.get(api);
this.temporaryData = response.data.rules;
this.logId = response.data.log.id;
this.filterName = response.data.name;
}catch(error) {
this.httpStatus = error.request.status;
await delay();
@@ -267,9 +280,30 @@ export default defineStore('allMapDataStore', {
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to load the Filters.',{position: 'bottom'});
$toast.default('Failed to get Filter Detail.',{position: 'bottom'});
}
}
},
/**
* Updata an Existing Filter
*/
async updataFilter() {
let createFilterId = this.createFilterId
const api = `/api/filters/${createFilterId}`;
const data = this.postRuleData;
try {
const response = await this.$axios.put(api, data);
this.isUpdataFilter = response.data.is_modified;
}catch(error) {
this.httpStatus = error.request.status;
await delay();
loading.isLoading = true;
await delay(1000);
loading.isLoading = false;
await delay(500);
$toast.default('Failed to updata an Existing Filter.',{position: 'bottom'});
}
}
},
})

19
src/views/Discover/index.vue
View File

@@ -68,9 +68,9 @@ export default {
const loadingStore = LoadingStore();
const allMapDataStore = AllMapDataStore();
const { isLoading } = storeToRefs(loadingStore);
const { processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, createFilterId } = storeToRefs(allMapDataStore);
const { processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, temporaryData, isRuleData, ruleData, logId, createFilterId } = storeToRefs(allMapDataStore);
return { isLoading, processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
return { isLoading, processMap, bpmn, stats, insights, traces, traceTaskSeq, cases, filterTasks, filterStartToEnd, filterEndToStart, filterTimeframe, filterTrace, logId, createFilterId, temporaryData, isRuleData, ruleData, allMapDataStore}
},
components: {
SidebarView,
@@ -294,15 +294,22 @@ export default {
},
},
async created() {
this.allMapDataStore.logId = this.$route.params.logId;
// Log 檔前往 DiscoverLog 頁, Filter 檔前往 DiscoverFilter 頁
if(this.$route.name === 'DiscoverLog'){
this.logId = this.$route.params.logId;
}else if(this.$route.name === 'DiscoverFilter') {
this.createFilterId = this.$route.params.filterId;
// 取得 logID 和上次儲存的 Funnel
await this.allMapDataStore.fetchFunnel(this.createFilterId);
this.isRuleData = await Array.from(this.temporaryData);
this.ruleData = await this.isRuleData.map(e => this.$refs.sidevarFilterRef.setRule(e));
}
// 取得 logId 後才 call api
await this.allMapDataStore.getAllMapData();
await this.allMapDataStore.getAllTrace();
await this.allMapDataStore.getTraceDetail();
this.createCy(this.mapType);
await this.allMapDataStore.getFilterParams();
await this.allMapDataStore.fetchFunnel(this.createFilterId)
this.isRuleData = await Array.from(this.temporaryData);
this.ruleData = await this.isRuleData.map(e => this.$refs.sidevarFilterRef.setRule(e));
this.isLoading = true;
await new Promise(resolve => setTimeout(resolve, 1000));

11
src/views/Files/index.vue
View File

@@ -133,16 +133,19 @@
*/
enterDiscover(file){
let logId;
let filterId;
if(file.fileType === 'Log'){
logId = file.id;
this.createFilterId = null;
logId = file.id;
this.$router.push({name: 'DiscoverLog', params: { logId: logId }})
}
else if(file.fileType === 'Filter') {
this.createFilterId = file.id;
logId = file.log.id;
filterId = file.id;
this.$router.push({name: 'DiscoverFilter', params: { filterId: filterId }})
}
this.$router.push({ name: 'Discover', params: { logId: logId }});
},
}
},
mounted() {
this.store.fetchEventLog();

5
src/views/MainContainer.vue
View File

@@ -33,7 +33,8 @@ export default {
},
watch: {
$route: function(to, from) {
if(to.name !== 'Discover') {
// 離開 DiscoverLog 頁要將 Funnel 的規則刪除, DiscoverFilter 會帶上次儲存的 Funnel, 所以不用錯做
if(to.name !== 'DiscoverLog') {
this.tempFilterId = null;
this.temporaryData = []
this.postRuleData = []
@@ -60,7 +61,7 @@ export default {
},
beforeRouteUpdate(to, from, next) {
// 離開 Discover 頁時判斷是否有無資料和需要存檔
if (from.name === 'Discover' && this.tempFilterId) {
if ((from.name === 'DiscoverLog' || from.name === 'DiscoverFilter') && this.tempFilterId) {
leaveFilter(next, this.allMapDataStore.addFilterId)
} else {
next();