adds radial progress

assets/pages/index.vue

@@ -1,6 +1,35 @@
 <template>
  <page-with-links class="gap-16">
  <section>
+ <ul class="flex flex-row flex-wrap gap-4">
+ <li v-for="host in hostSummaries" class="card w-1/3 bg-base-lighter">
+ <div class="card-body flex-row gap-4">
+ <div>
+ <div class="card-title">{{ host.name }}</div>
+ <div class="text-sm">{{ host.containers.length }} containers</div>
+ <div class="text-sm">{{ host.nCPU }} CPUs</div>
+ <div class="text-sm">{{ formatBytes(host.memTotal) }}</div>
+ </div>
+
+ <div
+ class="radial-progress text-primary"
+ :style="`--value: ${Math.floor((host.avgTotalCPU / (host.nCPU * 100)) * 100)}; --thickness: 0.25em`"
+ role="progressbar"
+ >
+ {{ host.avgTotalCPU.toFixed(0) }}%
+ </div>
+ <div
+ class="radial-progress text-primary"
+ :style="`--value: ${(host.avgTotalMem / host.memTotal) * 100}; --thickness: 0.25em`"
+ role="progressbar"
+ >
+ {{ ((host.avgTotalMem / host.memTotal) * 100).toFixed(0) }}%
+ </div>
+ </div>
+ </li>
+ </ul>
+ </section>
+ <!-- <section>
  <div class="stats grid bg-base-lighter shadow">
  <div class="stat">
  <div class="stat-value">{{ runningContainers.length }} / {{ hostContainers.length }}</div>
@@ -39,7 +68,7 @@
  <div class="stat-desc text-secondary">Showing only localhost</div>
  </div>
  </div>
- </section>
+ </section> -->
 
  <section>
  <container-table :containers="runningContainers"></container-table>
@@ -59,26 +88,54 @@ const { containers, ready } = storeToRefs(containerStore) as unknown as {
  ready: Ref<boolean>;
 };
 
+type HostSummary = {
+ name: string;
+ containers: Container[];
+ avgTotalCPU: number;
+ avgTotalMem: number;
+ nCPU: number;
+ memTotal: number;
+};
+
+const hostSummaries = computed(() => {
+ console.log("hostSummaries");
+ const summaries: Record<string, HostSummary> = {};
+ for (const container of containers.value) {
+ if (!summaries[container.host]) {
+ const host = hosts.value[container.host];
+ summaries[container.host] = reactive({
+ name: host.name,
+ containers: [],
+ avgTotalCPU: 0,
+ avgTotalMem: 0,
+ nCPU: host.nCPU,
+ memTotal: host.memTotal,
+ });
+ }
+ const summary = summaries[container.host];
+ summary.containers.push(container);
+ }
+
+ return Object.values(summaries).sort((a, b) => a.name.localeCompare(b.name));
+});
+
 const hostContainers = $computed(() =>
  containers.value.filter((c) => sessionHost.value === null || c.host === sessionHost.value),
 );
 
 const mostRecentContainers = $computed(() => [...hostContainers].sort((a, b) => +b.created - +a.created));
 const runningContainers = $computed(() => mostRecentContainers.filter((c) => c.state === "running"));
 
-let totalCpu = $ref(0);
-useIntervalFn(
- () => {
- totalCpu = runningContainers.reduce((acc, c) => acc + c.movingAverage.cpu, 0);
- },
- 1000,
- { immediate: true },
-);
-
-let totalMem = $ref(0);
 useIntervalFn(
  () => {
- totalMem = runningContainers.reduce((acc, c) => acc + c.movingAverage.memoryUsage, 0);
+ for (const summary of hostSummaries.value) {
+ summary.avgTotalCPU = 0;
+ summary.avgTotalMem = 0;
+ for (const container of summary.containers) {
+ summary.avgTotalCPU += container.movingAverage.cpu;
+ summary.avgTotalMem += container.movingAverage.memoryUsage;
+ }
+ }
  },
  1000,
  { immediate: true },