From db4d2c3b15681d8ec33f8b1a985dc4ab96d6d37d Mon Sep 17 00:00:00 2001 From: Tim deBoer Date: Thu, 5 Oct 2023 16:34:48 -0400 Subject: [PATCH] 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 --- .../lib/container/ContainerStatistics.svelte | 79 +++---------------- packages/renderer/src/lib/donut/Donut.svelte | 4 +- 2 files changed, 11 insertions(+), 72 deletions(-) diff --git a/packages/renderer/src/lib/container/ContainerStatistics.svelte b/packages/renderer/src/lib/container/ContainerStatistics.svelte index efea8e48c96..381ad6f8a6d 100644 --- a/packages/renderer/src/lib/container/ContainerStatistics.svelte +++ b/packages/renderer/src/lib/container/ContainerStatistics.svelte @@ -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 () => { {#if container.state === 'RUNNING'} -
- - - MEMORY - CPU - - - - - {memoryUsagePercentageTitle}; - {#if memoryUsagePercentage >= 0} - {memoryUsagePercentageTitle} - {/if} - {cpuUsagePercentageTitle}; - - {#if cpuUsagePercentage >= 0} - {cpuUsagePercentageTitle} - {/if} - {#if memoryUsagePercentage === -1} - ; - Initializing... - ; - Initializing... - {/if} - - - - - {#if memoryUsageTitle} - {memoryUsageTitle} - {/if} - {#if cpuUsageTitle} - {cpuUsageTitle} - {/if} - - +
+ +
{/if} diff --git a/packages/renderer/src/lib/donut/Donut.svelte b/packages/renderer/src/lib/donut/Donut.svelte index ef512617f08..66fd0fab7aa 100644 --- a/packages/renderer/src/lib/donut/Donut.svelte +++ b/packages/renderer/src/lib/donut/Donut.svelte @@ -26,7 +26,7 @@ $: stroke = percent < 0 ? '' : percent < 50 ? 'stroke-green-500' : percent < 75 $: tooltip = percent ? percent.toFixed(0) + '% ' + title + ' usage' : ''; - + @@ -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} + class="fill-gray-400">{value || ''}