Enhancement: render more docker states (#7099)

src/components/services/status.test.jsx

@@ -75,6 +75,46 @@ describe("components/services/status", () => {
     expect(screen.getByText("docker.starting")).toBeInTheDocument();
   });
 
+  it("renders the remaining container states instead of falling through to unknown", () => {
+    const states = {
+      created: "docker.created",
+      paused: "docker.paused",
+      restarting: "docker.restarting",
+      removing: "docker.removing",
+      dead: "docker.dead",
+    };
+
+    Object.entries(states).forEach(([status, label]) => {
+      useSWR.mockReturnValue({ data: { statuses: { c: { status } } }, error: undefined });
+      render(<Status service={{ container: "c", server: "s" }} />);
+      expect(screen.getByText(label)).toBeInTheDocument();
+    });
+
+    expect(screen.queryByText("docker.unknown")).not.toBeInTheDocument();
+  });
+
+  it("colors problem states as warnings and merely stopped states neutrally", () => {
+    useSWR.mockReturnValue({ data: { statuses: { c: { status: "restarting" } } }, error: undefined });
+    const { container: restarting } = render(<Status service={{ container: "c", server: "s" }} style="dot" />);
+    expect(restarting.querySelector(".bg-orange-400")).toBeInTheDocument();
+
+    useSWR.mockReturnValue({ data: { statuses: { c: { status: "paused" } } }, error: undefined });
+    const { container: paused } = render(<Status service={{ container: "c", server: "s" }} style="dot" />);
+    expect(paused.querySelector(".bg-orange-400")).not.toBeInTheDocument();
+  });
+
+  it("does not surface health for containers that are not running", () => {
+    useSWR.mockReturnValue({
+      data: { statuses: { c: { status: "paused", health: "unhealthy" } } },
+      error: undefined,
+    });
+
+    render(<Status service={{ container: "c", server: "s" }} />);
+
+    expect(screen.getByText("docker.paused")).toBeInTheDocument();
+    expect(screen.queryByText("docker.unhealthy")).not.toBeInTheDocument();
+  });
+
   it("renders a dot when style is dot", () => {
     useSWR.mockReturnValue({ data: { statuses: { c: { status: "running" } } }, error: undefined });