@oneuptime/common 14.0.10 → 14.0.11

package/Tests/App/Dashboard/ClusterAccessNotice.test.tsx

@@ -1,5 +1,12 @@
 import "@testing-library/jest-dom";
-import { afterEach, beforeEach, describe, expect, test } from "@jest/globals";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
 import { cleanup, render, screen, within } from "@testing-library/react";
 import * as React from "react";
 import ClusterAccessNotice, {
@@ -23,12 +30,13 @@ import {
 import { goTo, PROJECT_ID } from "./SideMenuHarness";
 
 /*
- * The notice sits above an investigation report and answers "could AI use
- * kubectl here?". It is fed the clusters' CURRENT readiness (the API
- * computes it at request time), so the one thing it must never do is turn
- * that into a claim about a run that finished earlier: turning investigation
- * off after a run must not make the report say the run "investigated with
- * OneUptime data only" above a usage line counting five kubectl commands.
+ * The notice sits with an investigation (above a live run's steps, after a
+ * finished run's report) and answers "could AI use kubectl here?". It is fed
+ * the clusters' CURRENT readiness (the API computes it at request time), so
+ * the one thing it must never do is turn that into a claim about a run that
+ * finished earlier: turning investigation off after a run must not make the
+ * card say the run "investigated with OneUptime data only" beside a usage
+ * line counting five kubectl commands.
  * What the run did comes from the run's own events (kubectlActivity).
  */
 
@@ -87,6 +95,14 @@ function noticeText(): string {
   return screen.getByTestId("cluster-access-notice").textContent || "";
 }
 
+/*
+ * A row's tone is carried by its icon alone: the notice draws no green,
+ * amber or gray box of its own inside the investigation card.
+ */
+function toneIconClass(row: HTMLElement): string {
+  return row.querySelector("svg")?.getAttribute("class") || "";
+}
+
 function activity(
   overrides: Partial<KubectlActivitySummary> = {},
 ): KubectlActivitySummary {
@@ -731,8 +747,8 @@ describe("ClusterAccessNotice", () => {
 
       const usage: HTMLElement = screen.getByTestId("cluster-access-run-usage");
       expect(usage).toHaveAttribute("data-tone", "failed");
-      expect(usage.className).not.toContain("emerald");
-      expect(usage.className).toContain("amber");
+      expect(toneIconClass(usage)).not.toContain("emerald");
+      expect(toneIconClass(usage)).toContain("amber");
       expect(usage).not.toHaveTextContent("ran 3");
       expect(usage).toHaveTextContent("none ran on the cluster");
       expect(noticeText()).not.toContain("had read-only kubectl access");
@@ -765,7 +781,8 @@ describe("ClusterAccessNotice", () => {
 
       const usage: HTMLElement = screen.getByTestId("cluster-access-run-usage");
       expect(usage).toHaveAttribute("data-tone", "failed");
-      expect(usage.className).not.toContain("emerald");
+      expect(toneIconClass(usage)).not.toContain("emerald");
+      expect(toneIconClass(usage)).toContain("amber");
       expect(usage).toHaveTextContent("none succeeded");
       expect(usage).not.toHaveTextContent("ran 3 read-only");
     });
@@ -781,7 +798,7 @@ describe("ClusterAccessNotice", () => {
 
       const usage: HTMLElement = screen.getByTestId("cluster-access-run-usage");
       expect(usage).toHaveAttribute("data-tone", "ran");
-      expect(usage.className).toContain("emerald");
+      expect(toneIconClass(usage)).toContain("emerald");
       expect(usage).toHaveTextContent(
         "OneUptime AI ran 1 read-only kubectl command during this investigation (2 more could not run — see Investigation activity).",
       );
@@ -798,7 +815,8 @@ describe("ClusterAccessNotice", () => {
 
       const usage: HTMLElement = screen.getByTestId("cluster-access-run-usage");
       expect(usage).toHaveAttribute("data-tone", "none");
-      expect(usage.className).toContain("gray");
+      expect(toneIconClass(usage)).toContain("gray");
+      expect(toneIconClass(usage)).not.toMatch(/emerald|amber/);
       expect(usage).toHaveTextContent(DATA_ONLY_RUN_TEXT);
     });
 
@@ -957,3 +975,147 @@ describe("ClusterAccessNotice", () => {
     }
   });
 });
+
+/*
+ * The notice used to add a green, amber or gray box per fact to a card that
+ * already nested several. Each fact is now one line under a small icon, in
+ * the card's own type, and only the icon carries the tone.
+ */
+describe("ClusterAccessNotice layout", () => {
+  const BOX_CLASS: RegExp =
+    /^(border|border-[a-z]+-\d+|ring-\d|ring-[a-z]+-\d+|shadow(-[a-z]+)?|rounded(-[a-z0-9]+)?|bg-[a-z0-9/-]+)$/;
+
+  function boxClasses(element: Element): Array<string> {
+    return (element.getAttribute("class") || "")
+      .split(/\s+/)
+      .filter((className: string): boolean => {
+        return BOX_CLASS.test(className);
+      });
+  }
+
+  function allRows(): Array<HTMLElement> {
+    return [
+      ...screen.queryAllByTestId("cluster-access-run-usage"),
+      ...screen.queryAllByTestId("cluster-access-reachable"),
+      ...screen.queryAllByTestId("cluster-access-unreachable"),
+    ];
+  }
+
+  function renderEveryRow(isRunFinished: boolean): void {
+    render(
+      <ClusterAccessNotice
+        clusterAccess={[
+          makeStatus(),
+          unreachable({
+            clusterId: OTHER_CLUSTER_ID,
+            clusterName: "staging-west",
+          }),
+        ]}
+        isRunFinished={isRunFinished}
+        kubectlActivity={
+          isRunFinished ? activity({ executed: 1, succeeded: 1 }) : undefined
+        }
+      />,
+    );
+  }
+
+  test.each([
+    ["a finished run", true],
+    ["a live run", false],
+  ])(
+    "draws every fact of %s as an icon and a sentence, with no box",
+    (_label: string, isRunFinished: boolean) => {
+      renderEveryRow(isRunFinished);
+
+      const rows: Array<HTMLElement> = allRows();
+      // The run's own usage line only exists once the run has finished.
+      expect(rows).toHaveLength(isRunFinished ? 3 : 2);
+
+      const notice: HTMLElement = screen.getByTestId("cluster-access-notice");
+      expect(boxClasses(notice)).toEqual([]);
+
+      for (const row of rows) {
+        expect(boxClasses(row)).toEqual([]);
+        // Every row opens with its icon, and nothing inside draws a box.
+        expect(row.querySelector("svg")).not.toBeNull();
+        for (const inner of Array.from(row.querySelectorAll("*"))) {
+          if (inner.closest("a")) {
+            continue;
+          }
+          expect(boxClasses(inner)).toEqual([]);
+        }
+      }
+    },
+  );
+
+  test("keeps the text neutral and puts the tone on the icon alone", () => {
+    renderEveryRow(true);
+
+    const usage: HTMLElement = screen.getByTestId("cluster-access-run-usage");
+    const reachableRow: HTMLElement = screen.getByTestId(
+      "cluster-access-reachable",
+    );
+    const unreachableRow: HTMLElement = screen.getByTestId(
+      "cluster-access-unreachable",
+    );
+
+    expect(toneIconClass(usage)).toContain("emerald");
+    expect(toneIconClass(reachableRow)).toContain("emerald");
+    expect(toneIconClass(unreachableRow)).toContain("amber");
+
+    for (const row of [usage, reachableRow, unreachableRow]) {
+      for (const paragraph of Array.from(row.querySelectorAll("p"))) {
+        const classes: string = paragraph.getAttribute("class") || "";
+        expect(classes).toMatch(/text-gray-(600|900)/);
+        expect(classes).not.toMatch(/emerald|amber/);
+      }
+    }
+  });
+
+  test("an unreachable cluster still says why, what to do and where to fix it", () => {
+    renderEveryRow(true);
+
+    const row: HTMLElement = screen.getByTestId("cluster-access-unreachable");
+    expect(row).toHaveTextContent(
+      'OneUptime AI cannot currently reach cluster "staging-west" with kubectl',
+    );
+    expect(row).toHaveTextContent(
+      "Why: Investigation is off. AI may not run kubectl on this cluster.",
+    );
+    expect(row).toHaveTextContent(
+      "What to do: Turn on 'Investigate with kubectl' on the cluster's AI agent page (AI → Agent).",
+    );
+    expect(
+      within(row).getByRole("link", { name: CLUSTER_AI_AGENT_PAGE_LINK_TEXT }),
+    ).toHaveAttribute(
+      "href",
+      `/dashboard/${PROJECT_ID}/kubernetes/${OTHER_CLUSTER_ID}/ai/agent`,
+    );
+  });
+
+  test("never nests a block inside a paragraph", () => {
+    const consoleError: ReturnType<typeof jest.spyOn> = jest.spyOn(
+      console,
+      "error",
+    );
+
+    try {
+      renderEveryRow(true);
+
+      expect(
+        screen.getByTestId("cluster-access-notice").querySelectorAll("p div"),
+      ).toHaveLength(0);
+      expect(
+        consoleError.mock.calls.some((args: Array<unknown>): boolean => {
+          return args.some((value: unknown): boolean => {
+            return (
+              typeof value === "string" && value.includes("validateDOMNesting")
+            );
+          });
+        }),
+      ).toBe(false);
+    } finally {
+      consoleError.mockRestore();
+    }
+  });
+});

package/Tests/App/Dashboard/ContainerSetupGuideCards.test.tsx

@@ -0,0 +1,345 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+import DockerDocumentationCard from "../../../../App/FeatureSet/Dashboard/src/Components/Docker/DocumentationCard";
+import PodmanDocumentationCard from "../../../../App/FeatureSet/Dashboard/src/Components/Podman/DocumentationCard";
+import DockerSwarmDocumentationCard from "../../../../App/FeatureSet/Dashboard/src/Components/DockerSwarm/DocumentationCard";
+import { SETUP_GUIDE_API_KEY_PLACEHOLDER } from "../../../../App/FeatureSet/Dashboard/src/Components/SetupGuide/SetupGuide";
+import ModelAPI from "../../../UI/Utils/ModelAPI/ModelAPI";
+import ProjectUtil from "../../../UI/Utils/Project";
+import TelemetryIngestionKey from "../../../Models/DatabaseModels/TelemetryIngestionKey";
+import TelemetryIngestionKeyType from "../../../Types/Telemetry/TelemetryIngestionKeyType";
+import ObjectID from "../../../Types/ObjectID";
+
+/*
+ * The Docker, Podman and Docker Swarm cards as they reach the screen: the
+ * question at the top, the default way of running the agent, the key in the
+ * commands, the host or cluster a resource's own tab installs for, and —
+ * for Docker Swarm — exactly what the E2E spec does after creating a key.
+ *
+ * The markdown viewer is a lazy boundary; it renders as plain text here
+ * (as in SetupGuideCard.test.tsx), because these tests are about which
+ * content is on screen, not how markdown is styled.
+ */
+
+interface MarkdownViewerProps {
+  text: string;
+}
+
+jest.mock("../../../UI/Components/Markdown.tsx/LazyMarkdownViewer", () => {
+  return {
+    __esModule: true,
+    default: (props: MarkdownViewerProps): React.ReactElement => {
+      return React.createElement("div", {}, props.text);
+    },
+  };
+});
+
+const PROJECT_ID: ObjectID = new ObjectID("project-1");
+// Ingestion keys are UUIDs; the Docker Swarm E2E spec matches that shape.
+const SECRET: string = "0f8fad5b-d9cb-469f-a165-70867728950e";
+
+const makeKey: (secret: string) => TelemetryIngestionKey = (
+  secret: string,
+): TelemetryIngestionKey => {
+  const key: TelemetryIngestionKey = new TelemetryIngestionKey();
+  key.id = new ObjectID("key-1");
+  key.name = "Production Key";
+  key.secretKey = new ObjectID(secret);
+  key.keyType = TelemetryIngestionKeyType.Server;
+  return key;
+};
+
+const mockKeys: (keys: Array<TelemetryIngestionKey>) => void = (
+  keys: Array<TelemetryIngestionKey>,
+): void => {
+  jest.spyOn(ModelAPI, "getList").mockResolvedValue({
+    data: keys,
+    count: keys.length,
+    skip: 0,
+    limit: 50,
+  } as never);
+};
+
+const renderInRouter: (element: React.ReactElement) => HTMLElement = (
+  element: React.ReactElement,
+): HTMLElement => {
+  return render(<MemoryRouter>{element}</MemoryRouter>).container;
+};
+
+// Lets the key selector finish loading an empty project's keys.
+const waitForNoKeys: () => Promise<void> = async (): Promise<void> => {
+  await waitFor(() => {
+    expect(screen.getByText("No ingestion keys yet")).toBeInTheDocument();
+  });
+};
+
+const radio: (name: RegExp) => HTMLElement = (name: RegExp): HTMLElement => {
+  return screen.getByRole("radio", { name: name });
+};
+
+/*
+ * The key selector shows the secret before it hands the key to the card, so
+ * wait for text only the guide itself renders once it has the key.
+ */
+const waitForText: (
+  container: HTMLElement,
+  text: string,
+) => Promise<void> = async (
+  container: HTMLElement,
+  text: string,
+): Promise<void> => {
+  await waitFor(() => {
+    expect(container.textContent).toContain(text);
+  });
+};
+
+describe("the container setup guide cards", () => {
+  beforeEach(() => {
+    jest.spyOn(ProjectUtil, "getCurrentProjectId").mockReturnValue(PROJECT_ID);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+
+  describe("Docker", () => {
+    test("asks how the agent runs and opens on the Docker CLI", async () => {
+      mockKeys([makeKey(SECRET)]);
+      const container: HTMLElement = renderInRouter(
+        <DockerDocumentationCard title="Connect a host" description="Guide." />,
+      );
+
+      expect(
+        screen.getByRole("radiogroup", {
+          name: "How do you want to run the agent?",
+        }),
+      ).toBeInTheDocument();
+      expect(screen.getAllByRole("radio")).toHaveLength(2);
+      expect(radio(/^Docker CLI/)).toHaveAttribute("aria-checked", "true");
+      expect(radio(/^Docker Compose/)).toHaveAttribute("aria-checked", "false");
+      expect(
+        within(screen.getByTestId("setup-guide-step-2")).getByText(
+          "Run the agent",
+        ),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          "The agent sends this host's metrics and logs to OneUptime with this key. Pick an existing key or create a new one — the commands below update to use it.",
+        ),
+      ).toBeInTheDocument();
+
+      await waitForText(container, `-e ONEUPTIME_SERVICE_TOKEN="${SECRET}"`);
+      expect(container.textContent).toContain("docker run -d");
+      expect(container.textContent).not.toContain("docker compose up -d");
+    });
+
+    test("Docker Compose swaps in the compose file, with the same key", async () => {
+      mockKeys([makeKey(SECRET)]);
+      const container: HTMLElement = renderInRouter(
+        <DockerDocumentationCard title="Connect a host" description="Guide." />,
+      );
+      await waitForText(container, `-e ONEUPTIME_SERVICE_TOKEN="${SECRET}"`);
+
+      fireEvent.click(radio(/^Docker Compose/));
+
+      expect(screen.getByText("Create docker-compose.yml")).toBeInTheDocument();
+      expect(container.textContent).toContain(
+        `- ONEUPTIME_SERVICE_TOKEN=${SECRET}`,
+      );
+      expect(container.textContent).toContain("docker compose up -d");
+      expect(container.textContent).not.toContain("docker run -d");
+    });
+
+    test("a host's own tab installs for that host", async () => {
+      mockKeys([]);
+      const container: HTMLElement = renderInRouter(
+        <DockerDocumentationCard
+          title="Agent Installation Guide"
+          description="Guide."
+          hostName="prod-docker-01"
+        />,
+      );
+      expect(container.textContent).toContain(
+        '-e DOCKER_HOST_NAME="prod-docker-01"',
+      );
+      expect(container.textContent).not.toContain("my-docker-host");
+      await waitForNoKeys();
+    });
+
+    test("shows the placeholder until the project has a key", async () => {
+      mockKeys([]);
+      const container: HTMLElement = renderInRouter(
+        <DockerDocumentationCard title="Connect a host" description="Guide." />,
+      );
+      await waitForNoKeys();
+      expect(container.textContent).toContain(
+        `-e ONEUPTIME_SERVICE_TOKEN="${SETUP_GUIDE_API_KEY_PLACEHOLDER}"`,
+      );
+    });
+  });
+
+  describe("Podman", () => {
+    test("asks how the agent runs and opens on the Podman CLI", async () => {
+      mockKeys([makeKey(SECRET)]);
+      const container: HTMLElement = renderInRouter(
+        <PodmanDocumentationCard title="Connect a host" description="Guide." />,
+      );
+
+      expect(
+        screen.getByRole("radiogroup", {
+          name: "How do you want to run the agent?",
+        }),
+      ).toBeInTheDocument();
+      expect(radio(/^Podman CLI/)).toHaveAttribute("aria-checked", "true");
+
+      await waitForText(container, `-e ONEUPTIME_SERVICE_TOKEN="${SECRET}"`);
+      expect(container.textContent).toContain("podman run -d");
+      // The log driver note is on screen before anything is folded open.
+      expect(container.textContent).toContain("Metrics but no logs?");
+
+      fireEvent.click(radio(/^Podman Compose/));
+
+      expect(container.textContent).toContain(
+        `- ONEUPTIME_SERVICE_TOKEN=${SECRET}`,
+      );
+      expect(container.textContent).toContain("podman compose up -d");
+      expect(container.textContent).not.toContain("podman run -d");
+    });
+
+    test("a host's own tab installs for that host", async () => {
+      mockKeys([]);
+      const container: HTMLElement = renderInRouter(
+        <PodmanDocumentationCard
+          title="Agent Installation Guide"
+          description="Guide."
+          hostName="prod-podman-01"
+        />,
+      );
+      expect(container.textContent).toContain(
+        '-e PODMAN_HOST_NAME="prod-podman-01"',
+      );
+      expect(container.textContent).not.toContain("my-podman-host");
+      await waitForNoKeys();
+    });
+  });
+
+  describe("Docker Swarm", () => {
+    test("opens on the install script, which asks for the URL and key itself", async () => {
+      mockKeys([makeKey(SECRET)]);
+      const container: HTMLElement = renderInRouter(
+        <DockerSwarmDocumentationCard
+          title="Getting Started with Docker Swarm Monitoring"
+          description="Guide."
+        />,
+      );
+
+      expect(
+        screen.getByRole("radiogroup", {
+          name: "How do you want to install the agent?",
+        }),
+      ).toBeInTheDocument();
+      expect(radio(/^Install script/)).toHaveAttribute("aria-checked", "true");
+      expect(
+        within(screen.getByTestId("setup-guide-step-1")).getByText(
+          /the install script asks for it/,
+        ),
+      ).toBeInTheDocument();
+      expect(container.textContent).toContain("sh install.sh");
+
+      // The key is on screen in step 1, never in the script's command.
+      await waitForText(container, SECRET);
+      expect(
+        screen.getByTestId("setup-guide-step-2").textContent,
+      ).not.toContain(SECRET);
+      expect(container.textContent).not.toContain("ONEUPTIME_SERVICE_TOKEN=");
+    });
+
+    test("an empty project gets the create-key button the E2E spec clicks", async () => {
+      mockKeys([]);
+      renderInRouter(
+        <DockerSwarmDocumentationCard
+          title="Getting Started with Docker Swarm Monitoring"
+          description="Guide."
+        />,
+      );
+      await waitForNoKeys();
+      expect(
+        screen.getByRole("button", { name: "Create Ingestion Key" }),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText("Getting Started with Docker Swarm Monitoring"),
+      ).toBeInTheDocument();
+    });
+
+    test("with a key, picking Docker Compose shows the .env the E2E spec reads", async () => {
+      mockKeys([makeKey(SECRET)]);
+      const container: HTMLElement = renderInRouter(
+        <DockerSwarmDocumentationCard
+          title="Getting Started with Docker Swarm Monitoring"
+          description="Guide."
+        />,
+      );
+      await waitForText(container, SECRET);
+
+      // The spec's lookup finds exactly one radio.
+      expect(
+        screen.getAllByRole("radio", { name: /Docker Compose/ }),
+      ).toHaveLength(1);
+      fireEvent.click(screen.getByRole("radio", { name: /Docker Compose/ }));
+      await waitForText(container, `ONEUPTIME_SERVICE_TOKEN=${SECRET}`);
+
+      const text: string = container.textContent || "";
+      expect(text).toMatch(/ONEUPTIME_SERVICE_TOKEN=([0-9a-fA-F-]{36})/);
+      expect(text.match(/ONEUPTIME_SERVICE_TOKEN=([0-9a-fA-F-]{36})/)![1]).toBe(
+        SECRET,
+      );
+      expect(text).toMatch(/ONEUPTIME_URL=/);
+      expect(text).toContain("DOCKER_SWARM_CLUSTER_NAME=my-swarm");
+      expect(text).toContain("docker compose up -d");
+      expect(text).not.toContain(SETUP_GUIDE_API_KEY_PLACEHOLDER);
+      expect(
+        within(screen.getByTestId("setup-guide-step-1")).getByText(
+          /the \.env file below updates to use it/,
+        ),
+      ).toBeInTheDocument();
+    });
+
+    test("a cluster's own tab installs for that cluster", async () => {
+      mockKeys([]);
+      const container: HTMLElement = renderInRouter(
+        <DockerSwarmDocumentationCard
+          title="Agent Installation Guide"
+          description="Guide."
+          clusterName="prod-swarm-eu"
+        />,
+      );
+      expect(container.textContent).toContain("**`prod-swarm-eu`**");
+
+      fireEvent.click(radio(/^Docker Compose/));
+
+      expect(container.textContent).toContain(
+        "DOCKER_SWARM_CLUSTER_NAME=prod-swarm-eu",
+      );
+      expect(container.textContent).not.toContain("my-swarm");
+      await waitForNoKeys();
+    });
+  });
+});