feat(ui): show stopped containers on dashboard (#4966)

assets/components/ContainerStatCell.spec.ts

@@ -110,3 +110,13 @@ describe("<ContainerStatCell /> chart data", () => {
     expect(chartData.at(-1)).toEqual({ percent: 30, value: 2048 });
   });
 });
+
+describe("<ContainerStatCell /> stopped containers", () => {
+  test("renders a dash instead of stats", () => {
+    const container = makeContainer({ cpu: 100 });
+    container.state = "exited";
+    const wrapper = mountCell({ container, type: "cpu", host: host(4) });
+    expect(wrapper.find("progress").exists()).toBe(false);
+    expect(wrapper.text()).toBe("—");
+  });
+});

assets/components/ContainerStatCell.vue

@@ -1,6 +1,7 @@
 <template>
+  <div v-if="!isRunning" class="text-base-content/40 text-sm">&mdash;</div>
   <div
-    v-if="isMobile"
+    v-else-if="isMobile"
     class="flex w-fit items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium tabular-nums"
     :class="type === 'cpu' ? 'bg-primary/10 text-primary' : 'bg-secondary/10 text-secondary'"
   >
@@ -36,6 +37,8 @@ const {
   mode?: "chart" | "progress";
 }>();
 
+const isRunning = computed(() => container.state === "running");
+
 function totalCores(): number {
   if (container.cpuLimit && container.cpuLimit > 0) {
     return container.cpuLimit;

assets/pages/index.vue

@@ -15,14 +15,14 @@
     <section>
       <div class="mb-4 flex items-center justify-between">
         <h2 class="text-lg font-semibold">
-          {{ $t("label.container", { count: runningContainers.length }) }}
+          {{ $t("label.container", { count: dashboardContainers.length }) }}
         </h2>
         <button @click="containersCollapsed = !containersCollapsed" class="btn btn-ghost btn-sm">
           <mdi:chevron-down :class="{ 'rotate-180': !containersCollapsed }" class="transition-transform" />
         </button>
       </div>
       <Transition name="collapse">
-        <ContainerTable v-show="!containersCollapsed" :containers="runningContainers" />
+        <ContainerTable v-show="!containersCollapsed" :containers="dashboardContainers" />
       </Transition>
     </section>
   </PageWithLinks>
@@ -40,14 +40,16 @@ const { containers, ready } = storeToRefs(containerStore) as unknown as {
   ready: Ref<boolean>;
 };
 
-const runningContainers = computed(() => containers.value.filter((c) => c.state === "running"));
+const dashboardContainers = computed(() =>
+  containers.value.filter((c) => (showAllContainers.value ? c.state !== "deleted" : c.state === "running")),
+);
 
 const hostsCollapsed = useStorage("DOZZLE_HOSTS_COLLAPSED", false);
 const containersCollapsed = useStorage("DOZZLE_CONTAINERS_COLLAPSED", false);
 
 watchEffect(() => {
   if (ready.value) {
-    setTitle(t("title.dashboard", { count: runningContainers.value.length }));
+    setTitle(t("title.dashboard", { count: dashboardContainers.value.length }));
   }
 });
 </script>