From d9cbd5427d0e5be3e5dbecca8d6069dc8074d810 Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@hotmail.com>
Date: Sat, 20 Jun 2026 04:58:57 +1000
Subject: [PATCH] feat: Calculate and display total CPU and memory usage
 (#5911)

* Calculate and display total CPU and memory usage

Added total CPU and memory usage calculations for containers.

* Refactor Docker component layout

Refactor component layout and remove redundant Group elements.

* Create test.yaml

* Add files via upload

* Delete packages/icons/icons directory

Accidental

* Add total CPU and memory strings to English translations

* Add English translations and size refactor

* Fix typo in search label in en.json

* chore(docs): update OpenAPI spec

* Remove color styling from CPU and memory usage text

* Enhance Docker component with footer and toolbar updates

Updated createColumns function to include totals and relativeTime parameters for footer display. Adjusted table configuration to enable bottom toolbar based on isTiny flag.

* Fix formatting and add missing newline at end of file

* Enable sticky header and footer in component

Enable sticky header and add footer row properties for sticky positioning.

* Refactor table component properties

* Refactor table columns and fix footers

* Revert "chore(docs): update OpenAPI spec"

This reverts commit 26f3c809d91299d08eb05ca5e76e875f47aa7a8e.

---------

Co-authored-by: Bergasha <Bergasha@users.noreply.github.com>
Co-authored-by: Manuel <30572287+manuel-rw@users.noreply.github.com>
---
 packages/translation/src/lang/en.json     |  4 ++-
 packages/widgets/src/docker/component.tsx | 33 ++++++++++++++++++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index e59c38dae..319820774 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -4954,7 +4954,9 @@
       "updated": "Updated {when}",
       "search": "Seach {count} containers",
       "selected": "{selectCount} of {totalCount} containers selected",
-      "footer": "Total {count} containers"
+      "footer": "Total {count} containers",
+      "totalCpu": "Total CPU: {cpu}%",
+      "totalMemory": "Total Mem: {memory}"
     },
     "field": {
       "name": {
diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx
index d8dd77bdf..b50139361 100644
--- a/packages/widgets/src/docker/component.tsx
+++ b/packages/widgets/src/docker/component.tsx
@@ -200,6 +200,17 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
 
   const totalContainers = containers.length;
 
+  const totals = useMemo(() => {
+    return containers.reduce(
+      (acc, container) => {
+        acc.cpu += safeValue(container.cpuUsage);
+        acc.memory += safeValue(container.memoryUsage);
+        return acc;
+      },
+      { cpu: 0, memory: 0 }
+    );
+  }, [containers]);
+
   const columns = useMemo(() => createColumns(t), [t]);
 
   const table = useTranslatedMantineReactTable({
@@ -261,12 +272,26 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
           }}
           p={4}
         >
-          <Group gap={4}>
-            <IconBrandDocker size={20} />
-            <Text size="sm">{t("table.footer", { count: totalContainers.toString() })}</Text>
+          <Group gap={4} wrap="nowrap">
+            <IconBrandDocker size={20} style={{ flexShrink: 0 }} />
+            <Text size="sm" truncate="end">
+              {t("table.footer", { count: totalContainers.toString() })}
+            </Text>
           </Group>
 
-          <Text size="sm">{t("table.updated", { when: relativeTime })}</Text>
+          <Group gap="sm" wrap="wrap" justify="flex-end" style={{ flex: 1, minWidth: 0 }}>
+            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+              {t("table.totalCpu", { cpu: totals.cpu.toFixed(2) })}
+            </Text>
+            
+            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+              {t("table.totalMemory", { memory: humanFileSize(totals.memory) })}
+            </Text>
+
+            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+              {t("table.updated", { when: relativeTime })}
+            </Text>
+          </Group>
         </Group>
       )}
     </Stack>