feat(ui): add legend and per-bar tooltip to Platform Health
The dual meaning of the progress bar (red = failing share, green = all healthy) was not self-explanatory. Added a small legend beside the section header and a hover tooltip on each bar that states "N of M <platform> sources failing". Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -270,7 +270,16 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<!-- Platform Health bars -->
|
<!-- Platform Health bars -->
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div class="text-caption text-medium-emphasis mb-2">Platform Health</div>
|
<div class="d-flex align-center mb-2">
|
||||||
|
<div class="text-caption text-medium-emphasis">Platform Health</div>
|
||||||
|
<v-spacer />
|
||||||
|
<div class="d-flex align-center text-caption text-medium-emphasis">
|
||||||
|
<span class="legend-swatch legend-swatch--ok mr-1" />
|
||||||
|
<span class="mr-3">healthy</span>
|
||||||
|
<span class="legend-swatch legend-swatch--bad mr-1" />
|
||||||
|
<span>failing</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
v-for="row in platformHealth"
|
v-for="row in platformHealth"
|
||||||
:key="row.platform"
|
:key="row.platform"
|
||||||
@@ -286,7 +295,11 @@
|
|||||||
height="12"
|
height="12"
|
||||||
rounded
|
rounded
|
||||||
class="mx-3 flex-grow-1"
|
class="mx-3 flex-grow-1"
|
||||||
/>
|
>
|
||||||
|
<v-tooltip activator="parent" location="top">
|
||||||
|
{{ row.failing }} of {{ row.total }} {{ row.platform }} source{{ row.total !== 1 ? 's' : '' }} failing
|
||||||
|
</v-tooltip>
|
||||||
|
</v-progress-linear>
|
||||||
<div class="text-caption text-medium-emphasis count-label">
|
<div class="text-caption text-medium-emphasis count-label">
|
||||||
{{ row.failing }}/{{ row.total }}
|
{{ row.failing }}/{{ row.total }}
|
||||||
</div>
|
</div>
|
||||||
@@ -717,4 +730,13 @@ async function retrySource(source) {
|
|||||||
min-width: 50px;
|
min-width: 50px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.legend-swatch {
|
||||||
|
display: inline-block;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.legend-swatch--ok { background-color: rgb(var(--v-theme-success)); }
|
||||||
|
.legend-swatch--bad { background-color: rgb(var(--v-theme-error)); }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user