Adds total CPU and Mem usage. See #1715

assets/components/ContainerStat.vue

@@ -20,6 +20,7 @@
 <script lang="ts" setup>
 import { ContainerStat } from "@/types/Container";
 import { PropType } from "vue";
+import { formatBytes } from "@/utils";
 
 defineProps({
   stat: {
@@ -28,14 +29,6 @@ defineProps({
   },
   state: String,
 });
-function formatBytes(bytes: number, decimals = 2) {
-  if (bytes === 0) return "0 Bytes";
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-}
 </script>
 
 <style lang="scss" scoped>

assets/pages/Index.vue

@@ -14,7 +14,7 @@
         </div>
       </div>
     </section>
-    <section class="level section is-mobile">
+    <section class="level section">
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ containers.length }}</p>
@@ -27,6 +27,18 @@
           <p class="heading">Running</p>
         </div>
       </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ totalCpu }}%</p>
+          <p class="heading">Total CPU Usage</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="title">{{ formatBytes(totalMem) }}</p>
+          <p class="heading">Total Mem Usage</p>
+        </div>
+      </div>
       <div class="level-item has-text-centered">
         <div>
           <p class="title">{{ version }}</p>
@@ -81,6 +93,7 @@ import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
 import { useContainerStore } from "@/stores/container";
+import { formatBytes } from "@/utils";
 import fuzzysort from "fuzzysort";
 import SearchIcon from "~icons/mdi-light/magnify";
 import PastTime from "../components/PastTime.vue";
@@ -110,6 +123,8 @@ const results = computed(() => {
 
 const mostRecentContainers = computed(() => [...containers.value].sort((a, b) => b.created - a.created));
 const runningContainers = computed(() => mostRecentContainers.value.filter((c) => c.state === "running"));
+const totalCpu = computed(() => runningContainers.value.reduce((acc, c) => acc + (c.stat?.cpu ?? 0), 0));
+const totalMem = computed(() => runningContainers.value.reduce((acc, c) => acc + (c.stat?.memoryUsage ?? 0), 0));
 
 function onEnter() {
   if (results.value.length == 1) {

assets/utils/index.ts

@@ -0,0 +1,8 @@
+export function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}