dozzle/assets/components/HostList.vue

<template>
  <ul class="grid gap-4 md:grid-cols-[repeat(auto-fill,minmax(480px,1fr))]">
    <li v-for="host in hosts" class="card bg-base-lighter">
      <div class="card-body grid auto-cols-auto grid-flow-col justify-between">
        <div class="overflow-hidden">
          <div class="truncate text-xl font-semibold">{{ host.name }}</div>
          <ul class="flex flex-row gap-4 text-sm md:gap-3">
            <li><ph:cpu class="inline-block" /> {{ host.nCPU }} <span class="mobile-hidden">CPUs</span></li>
            <li>
              <ph:memory class="inline-block" /> {{ formatBytes(host.memTotal) }}
              <span class="mobile-hidden">total</span>
            </li>
          </ul>
          <div class="text-sm">
            <octicon:container-24 class="inline-block" /> {{ $t("label.container", hostContainers[host.id]?.length) }}
          </div>
        </div>

        <div class="flex flex-row gap-8">
          <div
            class="radial-progress text-primary"
            :style="`--value: ${Math.floor((weightedStats[host.id].weighted.totalCPU / (host.nCPU * 100)) * 100)}; --thickness: 0.25em`"
            role="progressbar"
          >
            {{ weightedStats[host.id].weighted.totalCPU.toFixed(0) }}%
          </div>
          <div
            class="radial-progress text-primary"
            :style="`--value: ${(weightedStats[host.id].weighted.totalMem / host.memTotal) * 100}; --thickness: 0.25em`"
            role="progressbar"
          >
            {{ formatBytes(weightedStats[host.id].weighted.totalMem, 1) }}
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { Container } from "@/models/Container";

const containerStore = useContainerStore();
const { containers } = storeToRefs(containerStore) as unknown as {
  containers: Ref<Container[]>;
};

const runningContainers = computed(() => containers.value.filter((container) => container.state === "running"));

const { hosts } = useHosts();
const hostContainers = computed(() => {
  const results: Record<string, Container[]> = {};
  for (const container of runningContainers.value) {
    if (!results[container.host]) {
      results[container.host] = [];
    }
    results[container.host].push(container);
  }
  return results;
});

type TotalStat = {
  totalCPU: number;
  totalMem: number;
};

const weightedStats: Record<string, { mostRecent: TotalStat; weighted: TotalStat }> = {};

for (const host of Object.values(hosts.value)) {
  const mostRecent = ref<TotalStat>({ totalCPU: 0, totalMem: 0 });
  weightedStats[host.id] = reactive({ mostRecent, weighted: useExponentialMovingAverage(mostRecent) });
}

useIntervalFn(
  () => {
    for (const [host, containers] of Object.entries(hostContainers.value)) {
      const stat = { totalCPU: 0, totalMem: 0 };
      for (const container of containers) {
        stat.totalCPU += container.stat.cpu;
        stat.totalMem += container.stat.memoryUsage;
      }
      weightedStats[host].mostRecent = stat;
    }
  },
  1000,
  { immediate: true },
);
</script>

<style scoped></style>