feat: Performance API done.
This commit is contained in:
chiayin
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<section class="w-full top-0 absolute shadow-[0px_6px_6px_inset_rgba(0,0,0,0.1)] z-20">
|
||||
<!-- status content -->
|
||||
<ul class="bg-neutral-100 flex justify-start shadow-[0px_1px_4px_rgba(0,0,0,0.2)] gap-3 p-3 text-sm overflow-x-auto scrollbar duration-700" v-show="isPanel" v-if="statData">
|
||||
<li class="bg-neutral-10 rounded p-3 w-full">
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<p class="font-bold text-sm leading-8">Cases</p>
|
||||
<!-- <span class="material-symbols-outlined text-base">info</span> -->
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mr-2 w-full">
|
||||
<span class="block text-sm mb-2">{{ statData.cases.count }} / {{ statData.cases.total }}</span>
|
||||
<ProgressBar :value="statData.cases.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-2xl font-medium">{{ statData.cases.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-neutral-10 rounded p-3 w-full">
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<p class="font-bold text-sm leading-8">Traces</p>
|
||||
<!-- <span class="material-symbols-outlined text-base">info</span> -->
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mr-2 w-full">
|
||||
<span class="block text-sm mb-2">{{ statData.traces.count }} / {{ statData.traces.total }}</span>
|
||||
<ProgressBar :value="statData.traces.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-2xl font-medium">{{ statData.traces.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-neutral-10 rounded p-3 w-full">
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<p class="font-bold text-sm leading-8">Activity Instances</p>
|
||||
<!-- <span class="material-symbols-outlined text-base">info</span> -->
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mr-2 w-full">
|
||||
<span class="block text-sm mb-2">{{ statData.task_instances.count }} / {{ statData.task_instances.total }}</span>
|
||||
<ProgressBar :value="statData.task_instances.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-2xl font-medium">{{ statData.task_instances.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-neutral-10 rounded p-3 w-full">
|
||||
<div class="flex justify-between items-center mb-5">
|
||||
<p class="font-bold text-sm leading-8">Activities</p>
|
||||
<!-- <span class="material-symbols-outlined text-base">info</span> -->
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="mr-2 w-full">
|
||||
<span class="block text-sm mb-2">{{ statData.tasks.count }} / {{ statData.tasks.total }}</span>
|
||||
<ProgressBar :value="statData.tasks.ratio" :showValue="false" class="!h-1.5 min-w-[136px] rounded !bg-neutral-200"></ProgressBar>
|
||||
</div>
|
||||
<span class="block text-2xl font-medium">{{ statData.tasks.ratio }}%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-neutral-10 rounded p-3 w-full">
|
||||
<p class="font-bold text-sm leading-8 mb-2.5">Log Timeframe</p>
|
||||
<div class="px-2 space-y-2 min-w-[140px] h-[40px]">
|
||||
<span class="inline-block">{{ statData.started_at }} </span>
|
||||
<span class="inline-block">~ {{ statData.completed_at }}</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="bg-neutral-10 rounded p-3 w-full">
|
||||
<p class="font-bold text-sm leading-8">Case Duration</p>
|
||||
<div class="flex justify-between items-center space-x-2 min-w-[272px]">
|
||||
<div class="space-y-2">
|
||||
<p><Tag value="MAX" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.max }}</p>
|
||||
<p><Tag value="MIN" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.min }}</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<p><Tag value="MED" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.median }}</p>
|
||||
<p><Tag value="AVG" class="!text-neutral-900 !bg-neutral-300 mr-2 !w-10 !text-sm !px-2 !py-0"></Tag>{{ statData.case_duration.average }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- control button -->
|
||||
<div class="bg-neutral-300 rounded-b-full w-20 text-center mx-auto cursor-pointer hover:bg-neutral-500 hover:text-neutral-10 active:ring focus:outline-none focus:border-neutral-500 focus:ring" @click="isPanel = !isPanel">
|
||||
<span class="material-symbols-outlined block px-8 text-xs ">{{ isPanel ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down' }}</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import AllMapDataStore from '@/stores/allMapData.js';
|
||||
import getTimeLabel from '@/module/timeLabel.js';
|
||||
import getMoment from 'moment';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const allMapDataStore = AllMapDataStore();
|
||||
const { logId, stats, createFilterId } = storeToRefs(allMapDataStore);
|
||||
|
||||
return { logId, stats, createFilterId, allMapDataStore };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isPanel: false,
|
||||
statData: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Number to percentage
|
||||
* @param {number} val
|
||||
* @returns {string} 轉換完成的百分比字串
|
||||
*/
|
||||
getPercentLabel(val){
|
||||
if((val * 100).toFixed(1) >= 100) return 100;
|
||||
else return parseFloat((val * 100).toFixed(1));
|
||||
},
|
||||
/**
|
||||
* setting stats data
|
||||
*/
|
||||
getStatData() {
|
||||
this.statData = {
|
||||
cases: {
|
||||
count: this.stats.cases.count.toLocaleString('en-US'),
|
||||
total: this.stats.cases.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(this.stats.cases.ratio)
|
||||
},
|
||||
traces: {
|
||||
count: this.stats.traces.count.toLocaleString('en-US'),
|
||||
total: this.stats.traces.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(this.stats.traces.ratio)
|
||||
},
|
||||
task_instances: {
|
||||
count: this.stats.task_instances.count.toLocaleString('en-US'),
|
||||
total: this.stats.task_instances.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(this.stats.task_instances.ratio)
|
||||
},
|
||||
tasks: {
|
||||
count: this.stats.tasks.count.toLocaleString('en-US'),
|
||||
total: this.stats.tasks.total.toLocaleString('en-US'),
|
||||
ratio: this.getPercentLabel(this.stats.tasks.ratio)
|
||||
},
|
||||
started_at: getMoment(this.stats.started_at).format('YYYY-MM-DD HH:mm'),
|
||||
completed_at: getMoment(this.stats.completed_at).format('YYYY-MM-DD HH:mm'),
|
||||
case_duration: {
|
||||
min: getTimeLabel(this.stats.case_duration.min),
|
||||
max: getTimeLabel(this.stats.case_duration.max),
|
||||
average: getTimeLabel(this.stats.case_duration.average),
|
||||
median: getTimeLabel(this.stats.case_duration.median),
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let params = this.$route.params;
|
||||
|
||||
switch (params.type) {
|
||||
case 'log':
|
||||
this.logId = params.fileId;
|
||||
break;
|
||||
case 'filter':
|
||||
this.createFilterId = params.fileId;
|
||||
break;
|
||||
case 'rule':
|
||||
switch (params.checkType) {
|
||||
case 'log':
|
||||
this.logId = params.checkFileId;
|
||||
break;
|
||||
case 'filter':
|
||||
this.createFilterId = params.checkFileId;
|
||||
}
|
||||
break;
|
||||
}
|
||||
await this.allMapDataStore.getAllMapData();
|
||||
await this.getStatData();
|
||||
this.isPanel = false; // 預設不打開
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
:deep(.p-progressbar .p-progressbar-value) {
|
||||
@apply bg-neutral-900
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user