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",
"version": "0.2.0",
"version": "0.99.0",
"private": true,
"scripts": {
"dev": "vite",

2
src/assets/vendors.css
View File

@@ -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

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

@@ -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.');
};
},
},
}
</script>

110
src/stores/allMapData.js
View File

@@ -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'});
};
}
},
})

4
src/stores/files.js
View File

@@ -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'});
})
};
},

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

@@ -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;
},
}
</script>