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

Discover: sidebarFilter Funnel button ApplyAll done.

Browse Source
This commit is contained in:
chiayin
2023-04-19 16:18:20 +08:00
parent 8f68e47c25
commit 3d5dba4c42
6 changed files with 119 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "frontend", "name": "frontend",
"version": "0.2.0", "version": "0.99.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

2
src/assets/vendors.css
View File

@@ -12,7 +12,7 @@
/* vue-toast-notification */ /* vue-toast-notification */
.v-toast__item { .v-toast__item {
@apply min-h-[48px] rounded-full @apply min-h-[48px]
} }
.v-toast__item .v-toast__text { .v-toast__item .v-toast__text {
@apply py-3 @apply py-3

65
src/components/Discover/sidebarFilter.vue
View File

@@ -186,9 +186,9 @@ export default {
const loadingStore = LoadingStore(); const loadingStore = LoadingStore();
const allMapDataStore = AllMapDataStore(); const allMapDataStore = AllMapDataStore();
const { isLoading } = storeToRefs(loadingStore); const { isLoading } = storeToRefs(loadingStore);
const { tempFilterId } = storeToRefs(allMapDataStore); const { hasResultRule, postRuleData} = storeToRefs(allMapDataStore);
return { isLoading, tempFilterId, allMapDataStore } return { isLoading, hasResultRule, postRuleData, allMapDataStore }
}, },
data() { data() {
return { return {
@@ -395,7 +395,7 @@ export default {
massage ? this.$toast.success('Reset Success.') : null; massage ? this.$toast.success('Reset Success.') : null;
}, },
// header:Filter 發送選取的資料 // header:Filter 發送選取的資料
submit(){ async submit(){
let data; let data;
let sele = this.selectValue; let sele = this.selectValue;
let isExclude = sele[5] === 'Exclude' ? true : false let isExclude = sele[5] === 'Exclude' ? true : false
@@ -458,24 +458,28 @@ export default {
} }
// 將資料指向 Vue data 雙向綁定 // 將資料指向 Vue data 雙向綁定
const postData = Array.isArray(data) ? data : [data]; const postData = Array.isArray(data) ? data : [data];
// 快速檢查每一 filter 規則是否為空集合
// this.logId = this.$route.params.logId;
this.postRuleData = postData;
await this.allMapDataStore.checkHasResult();
// 有 Data 就加進 Funnel，沒有 Data 不加進 Funnel 和跳錯誤訊息
if(this.hasResultRule === null) return;
else if(this.hasResultRule) {
this.temporaryData.push(...postData); this.temporaryData.push(...postData);
// 結束後要清空資料
this.reset(false); this.reset(false);
// 發送時，isLoading
this.isLoading = true; this.isLoading = true;
// 結束後，要跳出傳送成功的訊息 await new Promise(resolve => setTimeout(resolve, 1000));
// 跳轉 this.tab = 'funnel';
setTimeout(() => {
this.isLoading = false; this.isLoading = false;
this.$toast.success('Filter Success. Click on Funnel to view the configuration result.'); this.$toast.success('Filter Success. Click on Funnel to view the configuration result.');
}, 1000); }else {
// 快速檢查每一 filter 規則是否為空集合 this.reset(false);
let logId = this.$route.params.logId; this.isLoading = true;
this.axios.post(`/api/filters/has-result?log_id=${logId}`, postData) await new Promise(resolve => setTimeout(resolve, 1000));
.then(res=>{ this.isLoading = false;
res.data.result ? null : this.$toast.warning('No result.'); this.$toast.warning('No Data.');
}).catch(err=>{ };
})
}, },
// header:Funnel 刪除全部的 Funnel // header:Funnel 刪除全部的 Funnel
deleteAll() { deleteAll() {
@@ -483,16 +487,25 @@ export default {
this.$toast.success('All deleted.'); this.$toast.success('All deleted.');
}, },
// header:Funnel 發送暫存的選取資料 // header:Funnel 發送暫存的選取資料
submitAll() { async submitAll() {
let logId = this.$route.params.logId; if(this.temporaryData.length === 0) return this.$toast.error('No Filter.');
this.axios.post(`/api/temp-filters?log_id=${logId}`, this.temporaryData)
.then(res=>{ this.postRuleData = this.temporaryData;
console.log(res); await this.allMapDataStore.checkHasResult();
this.tempFilterId = res.data.id;
}).catch(err=>{ if(this.hasResultRule === null) return;
console.log(err); else if(this.hasResultRule) {
}) this.isLoading = true;
} await this.allMapDataStore.addTempFilterId();
this.isLoading = false;
this.$toast.success('Filter Success. View the Map.');
}else {
this.isLoading = true;
await new Promise(resolve => setTimeout(resolve, 1000));
this.isLoading = false;
this.$toast.warning('No Data.');
};
},
}, },
} }
</script> </script>

94
src/stores/allMapData.js
View File

@@ -28,6 +28,8 @@ export default defineStore('allMapDataStore', {
allFilterTimeframe: {}, allFilterTimeframe: {},
allFilterTrace: [], allFilterTrace: [],
httpStatus: 200, httpStatus: 200,
hasResultRule: null, // click Apply 後檢查是否有 Data
postRuleData: [],
}), }),
getters: { getters: {
processMap: state => { processMap: state => {
@@ -78,7 +80,7 @@ export default defineStore('allMapDataStore', {
let logId = this.logId; let logId = this.logId;
let tempFilterId = this.tempFilterId; let tempFilterId = this.tempFilterId;
let api = tempFilterId !== null ? `/api/temp-filters/${tempFilterId}/discover` : `/api/logs/${logId}/discover`; let api = tempFilterId !== null ? `/api/temp-filters/${tempFilterId}/discover` : `/api/logs/${logId}/discover`;
// console.log(tempFilterId); console.log(tempFilterId);
// console.log(logId); // console.log(logId);
// const api = `/api/logs/${logId}/discover`; // const api = `/api/logs/${logId}/discover`;
@@ -89,18 +91,15 @@ export default defineStore('allMapDataStore', {
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; // if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; this.httpStatus = error.request.status;
delay().then(() =>{ await delay();
loading.isLoading = true; loading.isLoading = true;
return delay(1000); await delay(1000);
}).then(()=>{
loading.isLoading = false; loading.isLoading = false;
return delay(500); await delay(500);
}).then(() => { $toast.default('Failed to load the Map.',{position: 'bottom'});
$toast.default('Failed to load the Map.');
})
}; };
}, },
/** /**
@@ -114,18 +113,15 @@ 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; // if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; this.httpStatus = error.request.status;
delay().then(() =>{ await delay();
loading.isLoading = true; loading.isLoading = true;
return delay(1000); await delay(1000);
}).then(()=>{
loading.isLoading = false; loading.isLoading = false;
return delay(500); await delay(500);
}).then(() => { $toast.default('Failed to load the Trace.',{position: 'bottom'});
$toast.default('Failed to load the Trace.');
})
} }
}, },
/** /**
@@ -146,18 +142,15 @@ export default defineStore('allMapDataStore', {
return this.allCase; return this.allCase;
}); });
if(this.httpStatus < 300) loading.isLoading = false; // if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; this.httpStatus = error.request.status;
delay().then(() =>{ await delay();
loading.isLoading = true; loading.isLoading = true;
return delay(1000); await delay(1000);
}).then(()=>{
loading.isLoading = false; loading.isLoading = false;
return delay(500); await delay(500);
}).then(() => { $toast.default('Failed to load the Trace Detail.',{position: 'bottom'});
$toast.default('Failed to load the Trace Detail.');
});
}; };
}, },
/** /**
@@ -175,19 +168,54 @@ export default defineStore('allMapDataStore', {
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; // if(this.httpStatus < 300) loading.isLoading = false;
} catch(error) { } catch(error) {
this.httpStatus = error.request.status; this.httpStatus = error.request.status;
delay().then(() =>{ await delay();
loading.isLoading = true; loading.isLoading = true;
return delay(1000); await delay(1000);
}).then(()=>{
loading.isLoading = false; loading.isLoading = false;
return delay(500); await delay(500);
}).then(() => { $toast.default('Failed to load the Filter Parameters.',{position: 'bottom'});
$toast.default('Failed to load the Filter Parameters.');
});
}; };
}, },
async checkHasResult() {
let logId = this.logId;
const api = `/api/filters/has-result?log_id=${logId}`;
try {
const response = await this.$axios.post(api, this.postRuleData)
this.hasResultRule = response.data.result;
// if(this.httpStatus < 300) loading.isLoading = false;
} 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 load the Has Result.',{position: 'bottom'});
};
},
async addTempFilterId() {
let logId = this.logId;
const api = `/api/temp-filters?log_id=${logId}`;
try {
const response = await this.$axios.post(api, this.postRuleData)
this.tempFilterId = response.data.id;
// if(this.httpStatus < 300) loading.isLoading = false;
} 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 add the Temporary Filters.',{position: 'bottom'});
};
}
}, },
}) })

4
src/stores/files.js
View File

@@ -84,7 +84,7 @@ export default defineStore('filesStore', {
loading.isLoading = false; loading.isLoading = false;
return delay(500); return delay(500);
}).then(() => { }).then(() => {
$toast.default('Failed to load the logs.'); $toast.default('Failed to load the logs.',{position: 'bottom'});
}) })
}; };
}, },
@@ -114,7 +114,7 @@ export default defineStore('filesStore', {
loading.isLoading = false; loading.isLoading = false;
return delay(500); return delay(500);
}).then(() => { }).then(() => {
$toast.default('Failed to load the filters.'); $toast.default('Failed to load the filters.',{position: 'bottom'});
}) })
}; };
}, },

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

@@ -294,17 +294,14 @@ export default {
}, },
async created() { async created() {
this.allMapDataStore.logId = this.$route.params.logId; this.allMapDataStore.logId = this.$route.params.logId;
await this.allMapDataStore.getAllMapData(); await this.allMapDataStore.getAllMapData();
await this.allMapDataStore.getAllTrace(); await this.allMapDataStore.getAllTrace();
await this.allMapDataStore.getTraceDetail(); await this.allMapDataStore.getTraceDetail();
this.createCy(this.mapType); this.createCy(this.mapType);
await this.allMapDataStore.getFilterParams();
this.allMapDataStore.getFilterParams(); this.isLoading = true;
}, await new Promise(resolve => setTimeout(resolve, 1000));
mounted() { this.isLoading = false;
// this.isLoading = false;
}, },
} }
</script> </script>