Skip to content

Commit

Permalink
Improve layout in the stats tab
Browse files Browse the repository at this point in the history 
We're now using cards and cols.

The title for the tables have been removed. Table row headers are self
explaining.
  • Loading branch information
@pgiraud
pgiraud committed Aug 22, 2024
1 parent 45e932a commit 8145152
Showing 1 changed file with 162 additions and 134 deletions.
296 changes: 162 additions & 134 deletions src/components/Stats.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,9 @@ const perFunction = computed(() => {
NodeProp.FUNCTION_NAME
)
const values: StatsTableItemType[] = []
_.each(functions, (nodes, tableName) => {
_.each(functions, (nodes, functionName) => {
values.push({
name: tableName,
name: functionName,
count: nodes.length,
time: _.sumBy(nodes, NodeProp.EXCLUSIVE_DURATION),
timePercent: durationPercent(nodes),
Expand Down Expand Up @@ -112,137 +112,165 @@ const perIndex = computed(() => {
</script>

<template>
<div class="p-2 small stats">
<h6 class="mt-2">Per table stats</h6>
<sorted-table
class="table table-nonfluid table-sm table-bordered"
:values="perTable"
sort="time"
:dir="SortDirection.desc"
>
<thead class="table-secondary">
<tr>
<th scope="col">
<sort-link name="name">Table</sort-link>
</th>
<th scope="col" class="text-end">
<sort-link name="count">Count</sort-link>
</th>
<th scope="col" colspan="2" class="text-end">
<sort-link name="time">Time</sort-link>
</th>
</tr>
</thead>
<template v-slot:body="sort">
<template v-for="value in sort.values" :key="value">
<stats-table-item
:value="value as StatsTableItemType"
:executionTime="executionTime"
></stats-table-item>
</template>
</template>
<tbody v-if="!perTable.length">
<tr>
<td colspan="3" class="text-center fst-italic">No tables used</td>
</tr>
</tbody>
</sorted-table>
<h6 class="mt-2">Per function stats</h6>
<sorted-table
class="table table-nonfluid table-sm table-bordered"
:values="perFunction"
sort="time"
:dir="SortDirection.desc"
>
<thead class="table-secondary">
<tr>
<th scope="col">
<sort-link name="name">Function</sort-link>
</th>
<th scope="col" class="text-end">
<sort-link name="count">Count</sort-link>
</th>
<th scope="col" colspan="2" class="text-end">
<sort-link name="time">Time</sort-link>
</th>
</tr>
</thead>
<template v-slot:body="sort">
<template v-for="value in sort.values" :key="value">
<stats-table-item
:value="value as StatsTableItemType"
:executionTime="executionTime"
></stats-table-item>
</template>
</template>
<tbody v-if="!perFunction.length">
<tr>
<td colspan="3" class="text-center fst-italic">No function used</td>
</tr>
</tbody>
</sorted-table>
<h6>Per node type stats</h6>
<sorted-table
class="table table-nonfluid table-sm table-bordered"
:values="perNodeType"
sort="time"
:dir="SortDirection.desc"
>
<thead class="table-secondary">
<tr>
<th scope="col">
<sort-link name="name">Node Type</sort-link>
</th>
<th scope="col" class="text-end">
<sort-link name="count">Count</sort-link>
</th>
<th scope="col" colspan="2" class="text-end">
<sort-link name="time">Time</sort-link>
</th>
</tr>
</thead>
<template v-slot:body="sort">
<template v-for="value in sort.values" :key="value">
<stats-table-item
:value="value as StatsTableItemType"
:executionTime="executionTime"
></stats-table-item>
</template>
</template>
</sorted-table>
<h6>Per index stats</h6>
<sorted-table
class="table table-nonfluid table-sm table-bordered"
:values="perIndex"
sort="time"
:dir="SortDirection.desc"
>
<thead class="table-secondary">
<tr>
<th scope="col">
<sort-link name="name">Index</sort-link>
</th>
<th scope="col" class="text-end">
<sort-link name="count">Count</sort-link>
</th>
<th scope="col" colspan="2" class="text-end">
<sort-link name="time">Time</sort-link>
</th>
</tr>
</thead>
<template v-slot:body="sort">
<template v-for="value in sort.values" :key="value">
<stats-table-item
:value="value as StatsTableItemType"
:executionTime="executionTime"
></stats-table-item>
</template>
</template>
<tbody v-if="!perIndex.length">
<tr>
<td colspan="3" class="text-center fst-italic">No index used</td>
</tr>
</tbody>
</sorted-table>
<div class="small stats container-fluid mt-2">
<div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-3 g-4">
<div class="col">
<div class="card">
<div class="card-body">
<sorted-table
class="table table-sm mb-0"
:values="perTable"
sort="time"
:dir="SortDirection.desc"
>
<thead class="table-secondary">
<tr>
<th scope="col">
<sort-link name="name">Table</sort-link>
</th>
<th scope="col" class="text-end">
<sort-link name="count">Count</sort-link>
</th>
<th scope="col" colspan="2" class="text-end">
<sort-link name="time">Time</sort-link>
</th>
</tr>
</thead>
<template v-slot:body="sort">
<template v-for="value in sort.values" :key="value">
<stats-table-item
:value="value as StatsTableItemType"
:executionTime="executionTime"
></stats-table-item>
</template>
</template>
<tbody v-if="!perTable.length">
<tr>
<td colspan="3" class="text-center fst-italic">
No tables used
</td>
</tr>
</tbody>
</sorted-table>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<sorted-table
class="table table-sm mb-0"
:values="perFunction"
sort="time"
:dir="SortDirection.desc"
>
<thead class="table-secondary">
<tr>
<th scope="col">
<sort-link name="name">Function</sort-link>
</th>
<th scope="col" class="text-end">
<sort-link name="count">Count</sort-link>
</th>
<th scope="col" colspan="2" class="text-end">
<sort-link name="time">Time</sort-link>
</th>
</tr>
</thead>
<template v-slot:body="sort">
<template v-for="value in sort.values" :key="value">
<stats-table-item
:value="value as StatsTableItemType"
:executionTime="executionTime"
></stats-table-item>
</template>
</template>
<tbody v-if="!perFunction.length">
<tr>
<td colspan="3" class="text-center fst-italic">
No function used
</td>
</tr>
</tbody>
</sorted-table>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<sorted-table
class="table table-sm mb-0"
:values="perNodeType"
sort="time"
:dir="SortDirection.desc"
>
<thead class="table-secondary">
<tr>
<th scope="col">
<sort-link name="name">Node Type</sort-link>
</th>
<th scope="col" class="text-end">
<sort-link name="count">Count</sort-link>
</th>
<th scope="col" colspan="2" class="text-end">
<sort-link name="time">Time</sort-link>
</th>
</tr>
</thead>
<template v-slot:body="sort">
<template v-for="value in sort.values" :key="value">
<stats-table-item
:value="value as StatsTableItemType"
:executionTime="executionTime"
></stats-table-item>
</template>
</template>
</sorted-table>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<sorted-table
class="table table-sm mb-0"
:values="perIndex"
sort="time"
:dir="SortDirection.desc"
>
<thead class="table-secondary">
<tr>
<th scope="col">
<sort-link name="name">Index</sort-link>
</th>
<th scope="col" class="text-end">
<sort-link name="count">Count</sort-link>
</th>
<th scope="col" colspan="2" class="text-end">
<sort-link name="time">Time</sort-link>
</th>
</tr>
</thead>
<template v-slot:body="sort">
<template v-for="value in sort.values" :key="value">
<stats-table-item
:value="value as StatsTableItemType"
:executionTime="executionTime"
></stats-table-item>
</template>
</template>
<tbody v-if="!perIndex.length">
<tr>
<td colspan="3" class="text-center fst-italic">
No index used
</td>
</tr>
</tbody>
</sorted-table>
</div>
</div>
</div>
</div>
</div>
</template>

0 comments on commit 8145152

Please sign in to comment.