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

Discover: SidebarFilter Trace table done.

Browse Source
This commit is contained in:
chiayin
2023-05-15 17:03:28 +08:00
parent 0c7765674c
commit 518842e112
2 changed files with 11 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Discover/Filter/Trace.vue
View File

@@ -1,8 +1,7 @@
<template>
<div class="flex justify-between items-start bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
<div class="flex justify-between items-start bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full space-x-4 overflow-y-auto overflow-x-auto scrollbar">
<!-- Range Selection -->
<section class="py-2 space-y-2 text-sm w-1/2 h-full">
<section class="py-2 space-y-2 text-sm min-w-[48%] h-full">
<p class="h2">Range Selection</p>
<div class="text-primary h2 flex items-center justify-start">
<span class="material-symbols-outlined mr-2 text-base">info</span>
@@ -10,7 +9,7 @@
</div>
<Chart type="bar" :data="chartData" :options="chartOptions" class="h-2/5" />
<div class="px-2">
<p class="py-2">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
<p class="py-4">Select percentage of case <span class=" float-right">{{ caseTotalPercent }}%</span></p>
<Slider v-model="selectArea" :step="1" :min="1" :max="traceTotal" range class="mx-2" />
</div>
<!-- @change="chartData = setChartData(traceList)" -->
@@ -19,13 +18,13 @@
{{ selectArea }}
</section>
<!-- Trace List -->
<section class="h-full py-2 space-y-2">
<section class="h-full min-w-[48%] py-2 space-y-2">
<p class="h2">Trace List ({{ traceTotal }})</p>
<p class="text-primary h2 flex items-center justify-start">
<span class="material-symbols-outlined mr-2 text-base">info</span>Click trace number to see more.
</p>
<div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
<table class="border-separate border-spacing-x-2 text-sm">
<table class="border-separate border-spacing-x-2 text-sm w-full">
<thead class="sticky top-0 z-10 bg-neutral-10">
<tr>
<th class="h2 px-2 border-b border-neutral-500">Trace</th>
@@ -34,21 +33,21 @@
</thead>
<tbody>
<tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
<td class="p-2">#{{ trace.id }}</td>
<td class="p-2 w-24">
<td class="p-2 text-center">#{{ trace.id }}</td>
<td class="p-2 min-w-[96px]">
<div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
<div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
</div>
</td>
<td class="py-2 text-right">{{ trace.count }}</td>
<td class="p-2">{{ trace.ratio }}%</td>
<td class="p-2 text-right">{{ trace.ratio }}%</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- Trace item Table -->
<section v-show="showTraceId" class="pl-4 h-full w-[calc(100%_-_320px)]">
<section v-show="showTraceId" class="pl-4 h-full min-w-full">
<p class="h2 mb-2">Trace #{{ showTraceId }}</p>
<div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
<div class="h-full w-full">
@@ -56,7 +55,7 @@
</div>
</div>
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
<DataTable :value="cases" showGridlines tableClass="text-sm">
<DataTable :value="cases" showGridlines tableClass="text-sm" breakpoint="0">
<Column field="id" header="Case ID" sortable></Column>
<Column field="started_at" header="Start time" sortable></Column>
<Column field="completed_at" header="End time" sortable></Column>
@@ -112,7 +111,6 @@ export default {
let lastDigit = str[str.length - 1]; // 取得小數點後的第一位數字
return lastDigit === '0' ? sum.toFixed(0) : sum.toFixed(1)
// return sum.toFixed(1);
},
chartData: function() {
const start = this.selectArea[0]-1;
@@ -335,7 +333,6 @@ export default {
this.setNodesData();
this.setEdgesData();
this.createCy();
// this.chartData = this.barData();
this.chartOptions = this.barOptions();
// this.chartData = this.setChartData();
// this.chartOptions = this.setChartOptions();
@@ -345,10 +342,6 @@ export default {
</script>
<style scoped>
/* 進度條顏色 */
:deep(.p-progressbar .p-progressbar-value) {
@apply !bg-primary
}
/* Table set */
:deep(.p-datatable-thead th) {
@apply sticky top-0 left-0 z-10 bg-neutral-10

2
src/components/Discover/SidebarTraces.vue
View File

@@ -42,7 +42,7 @@
</div>
</div>
<div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
<DataTable :value="cases" showGridlines tableClass="text-sm">
<DataTable :value="cases" showGridlines tableClass="text-sm" breakpoint="0">
<Column field="id" header="Case ID" sortable></Column>
<Column field="started_at" header="Start time" sortable></Column>
<Column field="completed_at" header="End time" sortable></Column>