From 3d5dba4c421a009ca4633bf4e7fef70caca4e945 Mon Sep 17 00:00:00 2001 From: chiayin Date: Wed, 19 Apr 2023 16:18:20 +0800 Subject: [PATCH] Discover: sidebarFilter Funnel button ApplyAll done. --- package.json | 2 +- src/assets/vendors.css | 2 +- src/components/Discover/sidebarFilter.vue | 71 ++++++++------ src/stores/allMapData.js | 110 ++++++++++++++-------- src/stores/files.js | 4 +- src/views/Discover/index.vue | 11 +-- 6 files changed, 119 insertions(+), 81 deletions(-) diff --git a/package.json b/package.json index 578a749..77f0d64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "frontend", - "version": "0.2.0", + "version": "0.99.0", "private": true, "scripts": { "dev": "vite", diff --git a/src/assets/vendors.css b/src/assets/vendors.css index 196c2e5..a7fb770 100644 --- a/src/assets/vendors.css +++ b/src/assets/vendors.css @@ -12,7 +12,7 @@ /* vue-toast-notification */ .v-toast__item { - @apply min-h-[48px] rounded-full + @apply min-h-[48px] } .v-toast__item .v-toast__text { @apply py-3 diff --git a/src/components/Discover/sidebarFilter.vue b/src/components/Discover/sidebarFilter.vue index 3f2104b..fc94c35 100644 --- a/src/components/Discover/sidebarFilter.vue +++ b/src/components/Discover/sidebarFilter.vue @@ -186,9 +186,9 @@ export default { const loadingStore = LoadingStore(); const allMapDataStore = AllMapDataStore(); const { isLoading } = storeToRefs(loadingStore); - const { tempFilterId } = storeToRefs(allMapDataStore); + const { hasResultRule, postRuleData} = storeToRefs(allMapDataStore); - return { isLoading, tempFilterId, allMapDataStore } + return { isLoading, hasResultRule, postRuleData, allMapDataStore } }, data() { return { @@ -395,7 +395,7 @@ export default { massage ? this.$toast.success('Reset Success.') : null; }, // header:Filter 發送選取的資料 - submit(){ + async submit(){ let data; let sele = this.selectValue; let isExclude = sele[5] === 'Exclude' ? true : false @@ -458,24 +458,28 @@ export default { } // 將資料指向 Vue data 雙向綁定 const postData = Array.isArray(data) ? data : [data]; - this.temporaryData.push(...postData); - // 結束後要清空資料 - this.reset(false); - // 發送時，isLoading - this.isLoading = true; - // 結束後，要跳出傳送成功的訊息 - // 跳轉 this.tab = 'funnel'; - setTimeout(() => { + + // 快速檢查每一 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.reset(false); + this.isLoading = true; + await new Promise(resolve => setTimeout(resolve, 1000)); this.isLoading = false; this.$toast.success('Filter Success. Click on Funnel to view the configuration result.'); - }, 1000); - // 快速檢查每一 filter 規則是否為空集合 - let logId = this.$route.params.logId; - this.axios.post(`/api/filters/has-result?log_id=${logId}`, postData) - .then(res=>{ - res.data.result ? null : this.$toast.warning('No result.'); - }).catch(err=>{ - }) + }else { + this.reset(false); + this.isLoading = true; + await new Promise(resolve => setTimeout(resolve, 1000)); + this.isLoading = false; + this.$toast.warning('No Data.'); + }; }, // header:Funnel 刪除全部的 Funnel deleteAll() { @@ -483,16 +487,25 @@ export default { this.$toast.success('All deleted.'); }, // header:Funnel 發送暫存的選取資料 - submitAll() { - let logId = this.$route.params.logId; - this.axios.post(`/api/temp-filters?log_id=${logId}`, this.temporaryData) - .then(res=>{ - console.log(res); - this.tempFilterId = res.data.id; - }).catch(err=>{ - console.log(err); - }) - } + async submitAll() { + if(this.temporaryData.length === 0) return this.$toast.error('No Filter.'); + + this.postRuleData = this.temporaryData; + await this.allMapDataStore.checkHasResult(); + + if(this.hasResultRule === null) return; + 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.'); + }; + }, }, } diff --git a/src/stores/allMapData.js b/src/stores/allMapData.js index 2d90a9f..b5eb78b 100644 --- a/src/stores/allMapData.js +++ b/src/stores/allMapData.js @@ -28,6 +28,8 @@ export default defineStore('allMapDataStore', { allFilterTimeframe: {}, allFilterTrace: [], httpStatus: 200, + hasResultRule: null, // click Apply 後檢查是否有 Data + postRuleData: [], }), getters: { processMap: state => { @@ -78,7 +80,7 @@ export default defineStore('allMapDataStore', { let logId = this.logId; let tempFilterId = this.tempFilterId; let api = tempFilterId !== null ? `/api/temp-filters/${tempFilterId}/discover` : `/api/logs/${logId}/discover`; - // console.log(tempFilterId); + console.log(tempFilterId); // console.log(logId); // const api = `/api/logs/${logId}/discover`; @@ -89,18 +91,15 @@ export default defineStore('allMapDataStore', { this.allStats = response.data.stats; this.allInsights = response.data.insights; - if(this.httpStatus < 300) loading.isLoading = false; + // 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.'); - }) + await delay(); + loading.isLoading = true; + await delay(1000); + loading.isLoading = false; + await delay(500); + $toast.default('Failed to load the Map.',{position: 'bottom'}); }; }, /** @@ -114,18 +113,15 @@ export default defineStore('allMapDataStore', { const response = await this.$axios.get(api); this.allTrace = response.data; - if(this.httpStatus < 300) loading.isLoading = false; + // 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.'); - }) + await delay(); + loading.isLoading = true; + await delay(1000); + loading.isLoading = false; + await delay(500); + $toast.default('Failed to load the Trace.',{position: 'bottom'}); } }, /** @@ -146,18 +142,15 @@ export default defineStore('allMapDataStore', { return this.allCase; }); - if(this.httpStatus < 300) loading.isLoading = false; + // 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.'); - }); + await delay(); + loading.isLoading = true; + await delay(1000); + loading.isLoading = false; + await delay(500); + $toast.default('Failed to load the Trace Detail.',{position: 'bottom'}); }; }, /** @@ -175,19 +168,54 @@ export default defineStore('allMapDataStore', { this.allFilterTimeframe = response.data.timeframe; this.allFilterTrace = response.data.trace; - if(this.httpStatus < 300) loading.isLoading = false; + // 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.'); - }); + await delay(); + loading.isLoading = true; + await delay(1000); + loading.isLoading = false; + await delay(500); + $toast.default('Failed to load the Filter Parameters.',{position: 'bottom'}); }; }, + 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'}); + }; + } }, }) diff --git a/src/stores/files.js b/src/stores/files.js index 32a863e..3f65303 100644 --- a/src/stores/files.js +++ b/src/stores/files.js @@ -84,7 +84,7 @@ export default defineStore('filesStore', { loading.isLoading = false; return delay(500); }).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; return delay(500); }).then(() => { - $toast.default('Failed to load the filters.'); + $toast.default('Failed to load the filters.',{position: 'bottom'}); }) }; }, diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue index f05c28e..8ebcff5 100644 --- a/src/views/Discover/index.vue +++ b/src/views/Discover/index.vue @@ -294,17 +294,14 @@ export default { }, async created() { this.allMapDataStore.logId = this.$route.params.logId; - await this.allMapDataStore.getAllMapData(); await this.allMapDataStore.getAllTrace(); await this.allMapDataStore.getTraceDetail(); - this.createCy(this.mapType); - - this.allMapDataStore.getFilterParams(); - }, - mounted() { - // this.isLoading = false; + await this.allMapDataStore.getFilterParams(); + this.isLoading = true; + await new Promise(resolve => setTimeout(resolve, 1000)); + this.isLoading = false; }, }