chore: fix random appear/disappear of statistics box

also add values of memory of CPU Fixes #495 Fixes #505 Change-Id: I0b1459d73658190a98636218be18fae38d8818b9 Signed-off-by: Florent Benoit <fbenoit@redhat.com>
containers · Jan 9, 2023 · f740b33 · f740b33
1 parent be91210
commit f740b33
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 13 deletions.
diff --git a/packages/renderer/src/lib/container/ContainerStatistics.svelte b/packages/renderer/src/lib/container/ContainerStatistics.svelte
@@ -29,8 +29,8 @@ $: memoryColor =
     : RED_COLOR;
 
 // percentage
-let cpuUsagePercentage: number;
-let memoryUsagePercentage: number;
+let cpuUsagePercentage: number = -1;
+let memoryUsagePercentage: number = -1;
 let usedMemory;
 
 // id to cancel the streaming
@@ -41,7 +41,9 @@ let firstIteration = true;
 
 // title to use on
 let cpuUsagePercentageTitle;
+let cpuUsageTitle;
 let memoryUsagePercentageTitle;
+let memoryUsageTitle;
 
 async function updateStatistics(containerStats: ContainerStatsInfo) {
   // we need enough data to compute the CPU usage
@@ -54,15 +56,17 @@ async function updateStatistics(containerStats: ContainerStatsInfo) {
   usedMemory = containerStats.memory_stats.usage - (containerStats.memory_stats.stats?.cache || 0);
   const availableMemory = containerStats.memory_stats.limit;
   memoryUsagePercentage = (usedMemory / availableMemory) * 100.0;
-  memoryUsagePercentageTitle = containerUtils.getMemoryUsageTitle(memoryUsagePercentage, usedMemory);
+  memoryUsagePercentageTitle = containerUtils.getMemoryPercentageUsageTitle(memoryUsagePercentage, usedMemory);
+  memoryUsageTitle = containerUtils.getMemoryUsageTitle(usedMemory);
 
   const cpuDelta = containerStats.cpu_stats.cpu_usage.total_usage - containerStats.precpu_stats.cpu_usage.total_usage;
   const systemCpuDelta =
     containerStats.cpu_stats.system_cpu_usage - (containerStats.precpu_stats?.system_cpu_usage || 0);
   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)}%`;
+  cpuUsagePercentageTitle = `${cpuUsagePercentage.toFixed(2)}% of ${numberCpus}CPUs`;
+  cpuUsageTitle = `${cpuUsagePercentage.toFixed(2)}%`;
 }
 
 onMount(async () => {
@@ -81,23 +85,44 @@ onDestroy(async () => {
 });
 </script>
 
-{#if container.state === 'RUNNING' && memoryUsagePercentage && cpuUsagePercentage}
-  <div class="mt-2 px-1 mx-2 border border-zinc-700 w-[220px] flex flex-row">
+{#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="150px" height="40px">
+    <svg width="100px" height="40px">
       <g class="bars">
         <rect fill="currentColor" width="100%" x="0" y="5" height="12"><title>{memoryUsagePercentageTitle}</title></rect
         >;
-        <rect fill="{memoryColor}" width="{memoryUsagePercentage}%" 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>;
-        <rect fill="{cpuColor}" width="{cpuUsagePercentage}%" 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>

diff --git a/packages/renderer/src/lib/container/container-utils.spec.ts b/packages/renderer/src/lib/container/container-utils.spec.ts
@@ -27,6 +27,6 @@ beforeEach(() => {
 });
 
 test('should expect valid memory usage', async () => {
-  const size = containerUtils.getMemoryUsageTitle(4, 1000000);
+  const size = containerUtils.getMemoryPercentageUsageTitle(4, 1000000);
   expect(size).toBe('4.00% (1 MB)');
 });
diff --git a/packages/renderer/src/lib/container/container-utils.ts b/packages/renderer/src/lib/container/container-utils.ts
@@ -178,7 +178,11 @@ export class ContainerUtils {
     return Array.from(groups.values());
   }
 
-  getMemoryUsageTitle(memoryUsagePercentage: number, usedMemory: number): string {
+  getMemoryPercentageUsageTitle(memoryUsagePercentage: number, usedMemory: number): string {
     return `${memoryUsagePercentage.toFixed(2)}% (${filesize(usedMemory)})`;
   }
+
+  getMemoryUsageTitle(usedMemory: number): string {
+    return `${filesize(usedMemory)}`;
+  }
 }