mirror of
https://github.com/podman-desktop/podman-desktop
synced 2026-05-24 10:18:53 +00:00
chore: use donuts for container stats
Switches the container statistics from bars to use the Donut component. This is more consistent, will match what we do in Settings > Resources, visually nice, and takes up far less horizontal space vs today (which is necessary for #4226 - details page consistency with design and other forms). Minor benefit: the colors are now from the palette. The donuts are taller than the previous component, but still visually look a little small. To me this is ok and still legible, and I can't go any bigger and solve #4226. Two minor fixes for Donut: move the tooltip below instead of right (since container stats are shown near the right edge of the window) and do not show the value until it is set. This avoids showing 'undefined' before the container stats are available. Partial fix for #4226. Signed-off-by: Tim deBoer <git@tdeboer.ca>
This commit is contained in:
Tim deBoer
parent
d0294d0b45
commit
db4d2c3b15
2 changed files with 11 additions and 72 deletions
|
|
@ -3,35 +3,15 @@ import { onMount, onDestroy } from 'svelte';
|
|||
import type { ContainerStatsInfo } from '../../../../main/src/plugin/api/container-stats-info';
|
||||
import type { ContainerInfoUI } from './ContainerInfoUI';
|
||||
import { ContainerUtils } from './container-utils';
|
||||
import Donut from '../donut/Donut.svelte';
|
||||
|
||||
export let container: ContainerInfoUI;
|
||||
|
||||
const WARNING_PERCENTAGE = 70;
|
||||
const DANGER_PERCENTAGE = 90;
|
||||
|
||||
const GREEN_COLOR = '#16a34a';
|
||||
const ORANGE_COLOR = '#F97316';
|
||||
const RED_COLOR = '#cb4d3e';
|
||||
|
||||
const containerUtils = new ContainerUtils();
|
||||
|
||||
$: cpuColor =
|
||||
cpuUsagePercentage < WARNING_PERCENTAGE
|
||||
? GREEN_COLOR
|
||||
: cpuUsagePercentage < DANGER_PERCENTAGE
|
||||
? ORANGE_COLOR
|
||||
: RED_COLOR;
|
||||
$: memoryColor =
|
||||
memoryUsagePercentage < WARNING_PERCENTAGE
|
||||
? GREEN_COLOR
|
||||
: memoryUsagePercentage < DANGER_PERCENTAGE
|
||||
? ORANGE_COLOR
|
||||
: RED_COLOR;
|
||||
|
||||
// percentage
|
||||
let cpuUsagePercentage = -1;
|
||||
let memoryUsagePercentage = -1;
|
||||
let usedMemory;
|
||||
|
||||
// id to cancel the streaming
|
||||
let fetchStatsId: number;
|
||||
|
|
@ -40,10 +20,8 @@ let fetchStatsId: number;
|
|||
let firstIteration = true;
|
||||
|
||||
// title to use on
|
||||
let cpuUsagePercentageTitle: string;
|
||||
let cpuUsageTitle: string;
|
||||
let memoryUsagePercentageTitle: string;
|
||||
let memoryUsageTitle: string;
|
||||
let cpuUsage: string;
|
||||
let memoryUsage: string;
|
||||
|
||||
async function updateStatistics(containerStats: ContainerStatsInfo) {
|
||||
// we need enough data to compute the CPU usage
|
||||
|
|
@ -52,12 +30,10 @@ async function updateStatistics(containerStats: ContainerStatsInfo) {
|
|||
return;
|
||||
}
|
||||
|
||||
//
|
||||
usedMemory = containerStats.memory_stats.usage - (containerStats.memory_stats.stats?.cache || 0);
|
||||
const usedMemory = containerStats.memory_stats.usage - (containerStats.memory_stats.stats?.cache || 0);
|
||||
const availableMemory = containerStats.memory_stats.limit;
|
||||
memoryUsagePercentage = (usedMemory / availableMemory) * 100.0;
|
||||
memoryUsagePercentageTitle = containerUtils.getMemoryPercentageUsageTitle(memoryUsagePercentage, usedMemory);
|
||||
memoryUsageTitle = containerUtils.getMemoryUsageTitle(usedMemory);
|
||||
memoryUsage = containerUtils.getMemoryUsageTitle(usedMemory);
|
||||
|
||||
const cpuDelta = containerStats.cpu_stats.cpu_usage.total_usage - containerStats.precpu_stats.cpu_usage.total_usage;
|
||||
const systemCpuDelta =
|
||||
|
|
@ -65,8 +41,7 @@ async function updateStatistics(containerStats: ContainerStatsInfo) {
|
|||
const numberCpus =
|
||||
containerStats.cpu_stats.online_cpus || containerStats.cpu_stats.cpu_usage?.percpu_usage?.length || 1.0;
|
||||
cpuUsagePercentage = (cpuDelta / systemCpuDelta) * numberCpus * 100.0;
|
||||
cpuUsagePercentageTitle = `${cpuUsagePercentage.toFixed(2)}% of ${numberCpus}CPUs`;
|
||||
cpuUsageTitle = `${cpuUsagePercentage.toFixed(2)}%`;
|
||||
cpuUsage = cpuUsagePercentage.toFixed(1) + '%';
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
|
|
@ -88,44 +63,8 @@ onDestroy(async () => {
|
|||
</script>
|
||||
|
||||
{#if container.state === 'RUNNING'}
|
||||
<div class="mt-2 px-1 mx-2 border border-zinc-700 w-[240px] flex flex-row">
|
||||
<svg class="mr-1 text-zinc-400" width="70px" height="40px">
|
||||
<g class="bars">
|
||||
<text text-anchor="end" x="63" y="16" font-size="12px" fill="currentColor">MEMORY </text>
|
||||
<text text-anchor="end" x="63" y="34" font-size="12px" fill="currentColor">CPU</text>
|
||||
</g>
|
||||
</svg>
|
||||
<svg width="100px" height="40px">
|
||||
<g class="bars">
|
||||
<rect fill="currentColor" width="100%" x="0" y="5" height="12"><title>{memoryUsagePercentageTitle}</title></rect
|
||||
>;
|
||||
{#if memoryUsagePercentage >= 0}
|
||||
<rect fill="{memoryColor}" width="{memoryUsagePercentage}%" x="0" y="5" height="12"
|
||||
><title>{memoryUsagePercentageTitle}</title></rect>
|
||||
{/if}
|
||||
<rect fill="currentColor" width="100%" x="0" y="23" height="12"><title>{cpuUsagePercentageTitle}</title></rect>;
|
||||
|
||||
{#if cpuUsagePercentage >= 0}
|
||||
<rect fill="{cpuColor}" width="{cpuUsagePercentage}%" x="0" y="23" height="12"
|
||||
><title>{cpuUsagePercentageTitle}</title></rect>
|
||||
{/if}
|
||||
{#if memoryUsagePercentage === -1}
|
||||
<rect fill="#888" width="100%" x="0" y="5" height="12"></rect>;
|
||||
<text text-anchor="end" x="90" y="14" font-size="8px" fill="#DDD">Initializing... </text>
|
||||
<rect fill="#888" width="100%" x="0" y="23" height="12"></rect>;
|
||||
<text text-anchor="end" x="90" y="32" font-size="8px" fill="#DDD">Initializing... </text>
|
||||
{/if}
|
||||
</g>
|
||||
</svg>
|
||||
<svg class="mr-1 text-zinc-400" width="80px" height="40px">
|
||||
<g class="bars">
|
||||
{#if memoryUsageTitle}
|
||||
<text text-anchor="start" x="2" y="16" font-size="12px" fill="currentColor">{memoryUsageTitle} </text>
|
||||
{/if}
|
||||
{#if cpuUsageTitle}
|
||||
<text text-anchor="start" x="2" y="34" font-size="12px" fill="currentColor">{cpuUsageTitle}</text>
|
||||
{/if}
|
||||
</g>
|
||||
</svg>
|
||||
<div class="flex flex-row gap-1">
|
||||
<Donut title="vCPUs" size="{45}" value="{cpuUsage}" percent="{cpuUsagePercentage}" />
|
||||
<Donut title="MEM" size="{45}" value="{memoryUsage}" percent="{memoryUsagePercentage}" />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ $: stroke = percent < 0 ? '' : percent < 50 ? 'stroke-green-500' : percent < 75
|
|||
$: tooltip = percent ? percent.toFixed(0) + '% ' + title + ' usage' : '';
|
||||
</script>
|
||||
|
||||
<Tooltip tip="{tooltip}" right>
|
||||
<Tooltip tip="{tooltip}" bottom>
|
||||
<svg viewBox="-4 -4 {size + 8} {size + 8}" height="{size}" width="{size}">
|
||||
<circle fill="none" class="stroke-charcoal-300" stroke-width="1" r="{size / 2}" cx="{size / 2}" cy="{size / 2}"
|
||||
></circle>
|
||||
|
|
@ -38,6 +38,6 @@ $: tooltip = percent ? percent.toFixed(0) + '% ' + title + ' usage' : '';
|
|||
text-anchor="middle"
|
||||
font-size="{size / 4.5}"
|
||||
dominant-baseline="central"
|
||||
class="fill-gray-400">{value}</text>
|
||||
class="fill-gray-400">{value || ''}</text>
|
||||
</svg>
|
||||
</Tooltip>
|
||||
|
|
|
|||
Loading…
Reference in a new issue