mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-31 18:17:23 +01:00
Code Issues Projects Releases Wiki Activity

feat: uses colored meters instead of progress bar for homepage (#3908)

Browse Source
This commit is contained in:
Amir Raminfar
2025-05-23 08:54:44 -07:00
committed by GitHub
parent b70c2da290
commit 0c9065a210
2 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
assets/components/ContainerTable.vue
View File

@@ -79,22 +79,30 @@
</td>
<td v-if="isVisible('cpu')">
<div class="flex flex-row items-center gap-1">
<progress
class="progress progress-primary"
<meter
class="flex-1 overflow-hidden rounded-3xl"
min="0"
max="100"
low="40"
optimum="0"
high="70"
:value="Math.min(container.movingAverage.cpu, 100)"
:max="100"
></progress>
<span class="text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
></meter>
<span class="w-8 text-right text-sm">{{ container.movingAverage.cpu.toFixed(0) }}%</span>
</div>
</td>
<td v-if="isVisible('mem')">
<div class="flex flex-row items-center gap-1">
<progress
class="progress progress-primary"
:value="container.movingAverage.memory"
<meter
class="flex-1 overflow-hidden rounded-3xl"
min="0"
max="100"
></progress>
<span class="text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
low="40"
optimum="0"
high="70"
:value="container.movingAverage.memory"
></meter>
<span class="w-8 text-right text-sm">{{ container.movingAverage.memory.toFixed(0) }}%</span>
</div>
</td>
</tr>
@@ -234,4 +242,21 @@ tbody td {
a {
@apply hover:text-primary;
}
meter::-webkit-meter-optimum-value {
background: var(--color-green);
}
meter::-webkit-meter-suboptimum-value {
background: var(--color-orange);
}
meter::-webkit-meter-even-less-good-value {
background: var(--color-red);
}
meter::-webkit-meter-bar {
background: color-mix(in oklab, var(--color-base-content) 10%, transparent);
border-radius: 1rem;
}
</style>

2
assets/main.css
View File

@@ -4,7 +4,7 @@
@plugin "@tailwindcss/typography";
@theme {
--color-green: oklch(69% 0.119722 188.479048);
--color-green: oklch(0.62 0.119722 158.82);
--color-red: oklch(64% 0.218 28.85);
--color-purple: oklch(51.49% 0.215 321.03);
--color-blue: oklch(65% 0.171 249.5);