@oneuptime/common 12.0.19 → 12.0.21

package/Tests/Server/Views/AnalyticsConsentPartial.test.ts

@@ -0,0 +1,241 @@
+import { describe, expect, test } from "@jest/globals";
+import ejs from "ejs";
+import fs from "fs";
+import path from "path";
+
+/*
+ * Consent and attribution have to behave the same on every origin that loads
+ * the Google Tag Manager container.
+ *
+ * They did not. Consent Mode v2 and the attribution capture lived only in
+ * Home/Views/head-basic.ejs, so the marketing site denied storage by default
+ * and asked, while /accounts and /dashboard loaded the same container with no
+ * consent signal and captured nothing. A visitor who pressed "Reject all" was
+ * tracked anyway on the signup page — which is precisely where the conversion
+ * fires — and an ad pointed at /accounts/register?gclid=... stored no click id,
+ * so that signup could never be attributed to the campaign that bought it.
+ *
+ * These render each origin the way Express does and assert the invariants that
+ * were being violated. They are deliberately about ORDER and SAMENESS: a
+ * consent default that arrives after the container has read the dataLayer is
+ * not a consent default, and three copies of the storage contract is how the
+ * copies stop agreeing.
+ */
+
+const REPOSITORY_ROOT: string = path.resolve(__dirname, "..", "..", "..", "..");
+
+const PARTIAL_PATH: string = path.join(
+  REPOSITORY_ROOT,
+  "Common",
+  "Server",
+  "Views",
+  "Partials",
+  "AnalyticsConsent.ejs",
+);
+
+interface Origin {
+  label: string;
+  viewPath: string;
+}
+
+/*
+ * Every OneUptime-owned origin that loads GTM-PKQD5WH. Status pages and public
+ * dashboards deliberately are not here: they render on customer-owned custom
+ * domains, where the answer is to remove the tag rather than to ask the
+ * customer's visitors for consent on OneUptime's behalf.
+ */
+const ORIGINS: Array<Origin> = [
+  {
+    label: "marketing site",
+    viewPath: path.join(REPOSITORY_ROOT, "Home", "Views", "head-basic.ejs"),
+  },
+  {
+    label: "accounts (signup)",
+    viewPath: path.join(
+      REPOSITORY_ROOT,
+      "App",
+      "FeatureSet",
+      "Accounts",
+      "views",
+      "index.ejs",
+    ),
+  },
+  {
+    label: "dashboard",
+    viewPath: path.join(
+      REPOSITORY_ROOT,
+      "App",
+      "FeatureSet",
+      "Dashboard",
+      "views",
+      "index.ejs",
+    ),
+  },
+  {
+    label: "admin dashboard",
+    viewPath: path.join(
+      REPOSITORY_ROOT,
+      "App",
+      "FeatureSet",
+      "AdminDashboard",
+      "views",
+      "index.ejs",
+    ),
+  },
+];
+
+type RenderOriginFunction = (
+  origin: Origin,
+  enableGoogleTagManager: boolean,
+) => string;
+
+const renderOrigin: RenderOriginFunction = (
+  origin: Origin,
+  enableGoogleTagManager: boolean,
+): string => {
+  return ejs.render(
+    fs.readFileSync(origin.viewPath, "utf-8"),
+    { enableGoogleTagManager: enableGoogleTagManager },
+    { filename: origin.viewPath },
+  );
+};
+
+const GTM_SCRIPT: string = "googletagmanager.com/gtm.js";
+const CONSENT_DEFAULT: string = "pushConsentSignal('default', false)";
+
+describe("the shared analytics consent partial", () => {
+  test("exists in Common, so every origin can reach it", () => {
+    expect(fs.existsSync(PARTIAL_PATH)).toBe(true);
+  });
+
+  test("does not carry Home-only concerns", () => {
+    const source: string = fs.readFileSync(PARTIAL_PATH, "utf-8");
+
+    /*
+     * The PostHog loader carries Home's own project key, and the home/-prefixed
+     * event names are the marketing site's. Moving either here would start the
+     * product reporting into Home's funnel. Reporting is handed back to the
+     * page through window.oneUptimeOnAttributionCaptured instead.
+     */
+    expect(source).not.toContain("posthog.init(");
+    // The prose may mention them; no code here may emit one.
+    expect(source).not.toContain("capture('home/");
+    expect(source).toContain("window.oneUptimeOnAttributionCaptured");
+  });
+});
+
+for (const origin of ORIGINS) {
+  describe(origin.label, () => {
+    test("defines the consent state machine", () => {
+      expect(renderOrigin(origin, true)).toContain(
+        "window.oneUptimeConsent = (function",
+      );
+    });
+
+    test("captures ad click identifiers", () => {
+      const html: string = renderOrigin(origin, true);
+
+      expect(html).toContain("window.oneUptimeGetAttribution");
+      expect(html).toContain("gclid");
+      expect(html).toContain("wbraid");
+      expect(html).toContain("gbraid");
+    });
+
+    test("reads and writes the same consent storage key as every other origin", () => {
+      /*
+       * These origins share one hostname on OneUptime Cloud, so they share one
+       * localStorage. A different key here would mean the banner answer given
+       * on the marketing site simply did not apply in the product.
+       */
+      expect(renderOrigin(origin, true)).toContain("'cookiesAccepted'");
+    });
+
+    test("pushes the Consent Mode defaults before the container loads", () => {
+      const html: string = renderOrigin(origin, true);
+
+      const consentIndex: number = html.indexOf(CONSENT_DEFAULT);
+      const containerIndex: number = html.indexOf(GTM_SCRIPT);
+
+      expect(consentIndex).toBeGreaterThan(-1);
+      expect(containerIndex).toBeGreaterThan(-1);
+
+      /*
+       * The whole point. Consent Mode defaults are only read once, when the
+       * container boots; arriving afterwards is the same as never arriving.
+       */
+      expect(consentIndex).toBeLessThan(containerIndex);
+    });
+
+    test("denies ad and analytics storage until the visitor answers", () => {
+      const html: string = renderOrigin(origin, true);
+
+      expect(html).toContain("ad_storage");
+      expect(html).toContain("ad_user_data");
+      expect(html).toContain("ad_personalization");
+      expect(html).toContain("analytics_storage");
+      // `unset` is treated as denied rather than as permission-by-silence.
+      expect(html).toContain(CONSENT_DEFAULT);
+    });
+
+    test("loads no Google tag at all when analytics are switched off", () => {
+      const html: string = renderOrigin(origin, false);
+
+      expect(html).not.toContain(GTM_SCRIPT);
+    });
+  });
+}
+
+describe("consent can be withdrawn", () => {
+  const bannerPath: string = path.join(
+    REPOSITORY_ROOT,
+    "Home",
+    "Views",
+    "cookie-banner.ejs",
+  );
+  const footerPath: string = path.join(
+    REPOSITORY_ROOT,
+    "Home",
+    "Views",
+    "footer.ejs",
+  );
+  const cookiePolicyPath: string = path.join(
+    REPOSITORY_ROOT,
+    "Home",
+    "Views",
+    "cookies.ejs",
+  );
+
+  test("the banner exposes a way to reopen itself", () => {
+    expect(fs.readFileSync(bannerPath, "utf-8")).toContain(
+      "window.oneUptimeShowCookieSettings",
+    );
+  });
+
+  test("the footer carries the settings link the policy promises", () => {
+    /*
+     * The Cookie Policy has always told visitors to use "the cookie settings
+     * link in the footer". There was no such link, so a decision could be made
+     * once and never revisited - the most commonly enforced banner defect
+     * there is.
+     */
+    const footer: string = fs.readFileSync(footerPath, "utf-8");
+
+    expect(footer).toContain("Cookie settings");
+    expect(footer).toContain("window.oneUptimeShowCookieSettings");
+  });
+
+  test("the cookie policy no longer denies using marketing cookies in the product", () => {
+    /*
+     * It said "We do not use marketing cookies inside the product" while the
+     * product loaded the same container - and therefore the same advertising
+     * tags - as the marketing site.
+     */
+    const policy: string = fs.readFileSync(cookiePolicyPath, "utf-8");
+
+    expect(policy).not.toContain(
+      "We do not use marketing cookies inside the product",
+    );
+    expect(policy).toContain("governed by the same");
+    expect(policy).toContain("consent choice");
+  });
+});

package/Tests/UI/Components/Charts/ChartGhostSeries.test.tsx

@@ -0,0 +1,103 @@
+import { AreaChart } from "../../../../UI/Components/Charts/ChartLibrary/AreaChart/AreaChart";
+import { LineChart } from "../../../../UI/Components/Charts/ChartLibrary/LineChart/LineChart";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import React from "react";
+import { describe, expect, jest, test } from "@jest/globals";
+
+/*
+ * ResponsiveContainer measures its parent, which is always 0x0 in jsdom,
+ * so the chart renders nothing without a fixed size.
+ */
+jest.mock("recharts", () => {
+  const actual: Record<string, any> = jest.requireActual("recharts") as Record<
+    string,
+    any
+  >;
+  return {
+    ...actual,
+    ResponsiveContainer: ({ children }: { children: React.ReactElement }) => {
+      return React.cloneElement(children, {
+        width: 600,
+        height: 300,
+      } as Record<string, unknown>);
+    },
+  };
+});
+
+/*
+ * Compare-to-previous ghost series must be visually and interactively
+ * second-class: dashed, and never part of the fat invisible click-target
+ * lines that make live series selectable.
+ */
+
+type ChartRow = Record<string, any>;
+
+const data: Array<ChartRow> = [
+  { time: "10:00", live: 10, "live (previous)": 8 },
+  { time: "10:05", live: 20, "live (previous)": 12 },
+  { time: "10:10", live: 15, "live (previous)": 9 },
+];
+
+describe.each([
+  ["LineChart", LineChart],
+  ["AreaChart", AreaChart],
+] as Array<[string, typeof LineChart | typeof AreaChart]>)(
+  "%s ghost series",
+  (_name: string, Chart: typeof LineChart | typeof AreaChart) => {
+    test("ghost categories render dashed; live ones do not", () => {
+      const { container } = render(
+        <Chart
+          data={data}
+          index="time"
+          categories={["live", "live (previous)"]}
+          ghostCategories={["live (previous)"]}
+        />,
+      );
+
+      const dashed: Array<Element> = Array.from(
+        container.querySelectorAll('path[stroke-dasharray="6 4"]'),
+      );
+      expect(dashed.length).toBeGreaterThan(0);
+
+      /*
+       * The live series' curve must NOT be dashed — recharts names each
+       * series path group; assert at least one series curve without the
+       * ghost dash exists.
+       */
+      const allCurves: Array<Element> = Array.from(
+        container.querySelectorAll(".recharts-layer path"),
+      ).filter((el: Element) => {
+        return el.getAttribute("stroke-dasharray") !== "6 4";
+      });
+      expect(allCurves.length).toBeGreaterThan(0);
+    });
+
+    test("ghosts are excluded from the fat click-target lines", () => {
+      const { container } = render(
+        <Chart
+          data={data}
+          index="time"
+          categories={["live", "live (previous)"]}
+          ghostCategories={["live (previous)"]}
+          onValueChange={() => {
+            // Enables the click-target machinery, like the wrappers do.
+          }}
+        />,
+      );
+
+      /*
+       * LineChart renders invisible strokeWidth-12 click-targets per
+       * SELECTABLE series; ghosts must not get one. (AreaChart has no
+       * fat-line mechanism — zero is correct there.)
+       */
+      const fatLines: Array<Element> = Array.from(
+        container.querySelectorAll('path[stroke-width="12"]'),
+      );
+      expect(fatLines.length).toBeLessThanOrEqual(1);
+      for (const fatLine of fatLines) {
+        expect(fatLine.getAttribute("name")).not.toContain("(previous)");
+      }
+    });
+  },
+);

package/Tests/UI/Components/Charts/ChartTooltipSorted.test.tsx

@@ -0,0 +1,129 @@
+import "@testing-library/jest-dom";
+import { afterEach, describe, expect, test } from "@jest/globals";
+import { cleanup, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { ChartTooltip as AreaChartTooltip } from "../../../../UI/Components/Charts/ChartLibrary/AreaChart/AreaChart";
+import { ChartTooltip as BarChartTooltip } from "../../../../UI/Components/Charts/ChartLibrary/BarChart/BarChart";
+import { ChartTooltip as LineChartTooltip } from "../../../../UI/Components/Charts/ChartLibrary/LineChart/LineChart";
+
+/*
+ * The rendered tooltip is where "which host is this spike?" gets answered:
+ * with a 20-series group-by chart the entries must arrive highest-value
+ * first (recharts hands them over in series-mount order, effectively
+ * alphabetical) and the tail past the cap must be summarized, not
+ * silently dropped. All three chart types ship their own ChartTooltip, so
+ * all three are pinned to the same contract here.
+ */
+
+type TooltipComponent =
+  | typeof AreaChartTooltip
+  | typeof LineChartTooltip
+  | typeof BarChartTooltip;
+
+interface TooltipCase {
+  name: string;
+  Tooltip: TooltipComponent;
+}
+
+const TOOLTIP_CASES: Array<TooltipCase> = [
+  { name: "AreaChart", Tooltip: AreaChartTooltip },
+  { name: "LineChart", Tooltip: LineChartTooltip },
+  { name: "BarChart", Tooltip: BarChartTooltip },
+];
+
+function buildPayload(count: number): Array<{
+  category: string;
+  value: number;
+  index: string;
+  color: string;
+  payload: Record<string, unknown>;
+}> {
+  return Array.from({ length: count }, (_: unknown, index: number) => {
+    return {
+      /*
+       * Alphabetical categories with ASCENDING values — exactly the shape
+       * where mount order (host-00 first) and value order (host-NN first)
+       * disagree, so a pass proves the sort actually ran.
+       */
+      category: `host-${String(index).padStart(2, "0")}`,
+      value: index,
+      index: "10:00",
+      color: "blue",
+      payload: {},
+    };
+  });
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+describe.each(TOOLTIP_CASES)("$name tooltip", ({ Tooltip }: TooltipCase) => {
+  test("renders entries highest-value first with an overflow summary", () => {
+    const { container } = render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <Tooltip
+        active={true}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        payload={buildPayload(14) as any}
+        label="10:00"
+        valueFormatter={(value: number): string => {
+          return `${value}%`;
+        }}
+      />,
+    );
+
+    const text: string = container.textContent || "";
+
+    // The top-valued series leads; the lowest-valued ones are elided.
+    expect(text.indexOf("host-13")).toBeGreaterThan(-1);
+    expect(text.indexOf("host-13")).toBeLessThan(text.indexOf("host-12"));
+    expect(text.indexOf("host-12")).toBeLessThan(text.indexOf("host-04"));
+    expect(text).not.toContain("host-03");
+    expect(text).not.toContain("host-00");
+
+    // 14 series, 10 shown → 4 summarized.
+    expect(
+      screen.getByText(/\+4 more series — highest values shown/),
+    ).toBeInTheDocument();
+
+    // Values run through the caller's formatter.
+    expect(text).toContain("13%");
+  });
+
+  test("shows no overflow line when everything fits", () => {
+    const { container } = render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <Tooltip
+        active={true}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        payload={buildPayload(3) as any}
+        label="10:00"
+        valueFormatter={(value: number): string => {
+          return String(value);
+        }}
+      />,
+    );
+
+    expect(container.textContent).not.toContain("more series");
+    expect(container.textContent).toContain("host-02");
+    expect(container.textContent).toContain("host-00");
+  });
+
+  test("renders nothing when inactive", () => {
+    const { container } = render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <Tooltip
+        active={false}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        payload={buildPayload(3) as any}
+        label="10:00"
+        valueFormatter={(value: number): string => {
+          return String(value);
+        }}
+      />,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});

package/Tests/UI/Components/Charts/TooltipEntries.test.ts

@@ -0,0 +1,191 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  DEFAULT_TOOLTIP_MAX_ENTRIES,
+  PREVIOUS_PERIOD_SERIES_SUFFIX,
+  PreparedTooltipEntries,
+  SortableTooltipItem,
+  prepareTooltipEntries,
+} from "../../../../UI/Components/Charts/ChartLibrary/Utils/TooltipEntries";
+
+/*
+ * The tooltip ordering contract: on a grouped chart the series that is
+ * spiking AT THE HOVERED TIMESTAMP must be the first tooltip line, the
+ * list must stay readable at high cardinality (cap + "+N more"), and
+ * non-data entries (hidden series, band fills) must never displace a real
+ * reading. The chips already rank by peak; the tooltip is the only place
+ * the user reads per-timestamp values, so its order is what answers
+ * "which host is this spike?".
+ */
+
+interface TestItem extends SortableTooltipItem {
+  color?: string;
+}
+
+function item(category: string, value: number, type?: string): TestItem {
+  return { category, value, ...(type ? { type } : {}) };
+}
+
+function categories(prepared: PreparedTooltipEntries<TestItem>): Array<string> {
+  return prepared.entries.map((entry: TestItem) => {
+    return entry.category;
+  });
+}
+
+describe("prepareTooltipEntries", () => {
+  test("orders entries by value at the hovered point, highest first", () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item("host-b", 10),
+      item("host-a", 90),
+      item("host-c", 40),
+    ]);
+
+    expect(categories(prepared)).toEqual(["host-a", "host-c", "host-b"]);
+    expect(prepared.overflowCount).toBe(0);
+    expect(prepared.totalCount).toBe(3);
+  });
+
+  test("breaks value ties by natural name order (cpu2 before cpu10)", () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item("cpu10", 5),
+      item("cpu2", 5),
+      item("cpu1", 5),
+    ]);
+
+    expect(categories(prepared)).toEqual(["cpu1", "cpu2", "cpu10"]);
+  });
+
+  test("sorts non-finite values last and drops band tuples entirely", () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item("nan-series", NaN),
+      item("real-low", 1),
+      item("infinite", Infinity),
+      item("real-high", 7),
+      /*
+       * The anomaly band's dataKey yields a [low, high] tuple at runtime
+       * — a shaded region, not a series, so it must not render as a row
+       * nor count toward the overflow footer.
+       */
+      item("band", [2, 9] as unknown as number),
+    ]);
+
+    expect(categories(prepared).slice(0, 2)).toEqual(["real-high", "real-low"]);
+    // Non-finite tail keeps natural name order among itself.
+    expect(categories(prepared).slice(2)).toEqual(["infinite", "nan-series"]);
+    expect(prepared.totalCount).toBe(4);
+  });
+
+  test('filters out type "none" entries (hidden click-target lines, band fills)', () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item("visible", 3),
+      item("hidden", 99, "none"),
+    ]);
+
+    expect(categories(prepared)).toEqual(["visible"]);
+    expect(prepared.totalCount).toBe(1);
+    expect(prepared.overflowCount).toBe(0);
+  });
+
+  test("caps at the default and reports the overflow", () => {
+    const payload: Array<TestItem> = Array.from(
+      { length: 25 },
+      (_: unknown, index: number) => {
+        return item(`series-${index}`, index);
+      },
+    );
+
+    const prepared: PreparedTooltipEntries<TestItem> =
+      prepareTooltipEntries(payload);
+
+    expect(prepared.entries).toHaveLength(DEFAULT_TOOLTIP_MAX_ENTRIES);
+    expect(prepared.overflowCount).toBe(25 - DEFAULT_TOOLTIP_MAX_ENTRIES);
+    expect(prepared.totalCount).toBe(25);
+    // The cap keeps the HIGHEST values, not the first-mounted series.
+    expect(categories(prepared)[0]).toBe("series-24");
+    expect(categories(prepared)[DEFAULT_TOOLTIP_MAX_ENTRIES - 1]).toBe(
+      `series-${25 - DEFAULT_TOOLTIP_MAX_ENTRIES}`,
+    );
+  });
+
+  test("exactly at the cap means no overflow", () => {
+    const payload: Array<TestItem> = Array.from(
+      { length: DEFAULT_TOOLTIP_MAX_ENTRIES },
+      (_: unknown, index: number) => {
+        return item(`series-${index}`, index);
+      },
+    );
+
+    const prepared: PreparedTooltipEntries<TestItem> =
+      prepareTooltipEntries(payload);
+
+    expect(prepared.entries).toHaveLength(DEFAULT_TOOLTIP_MAX_ENTRIES);
+    expect(prepared.overflowCount).toBe(0);
+  });
+
+  test("honors a custom cap and rejects nonsense caps", () => {
+    const payload: Array<TestItem> = [item("a", 1), item("b", 2), item("c", 3)];
+
+    expect(prepareTooltipEntries(payload, 2).entries).toHaveLength(2);
+    expect(prepareTooltipEntries(payload, 2).overflowCount).toBe(1);
+
+    // Zero, negative, and fractional caps fall back to the default.
+    expect(prepareTooltipEntries(payload, 0).entries).toHaveLength(3);
+    expect(prepareTooltipEntries(payload, -5).entries).toHaveLength(3);
+    expect(prepareTooltipEntries(payload, 1.5).entries).toHaveLength(3);
+  });
+
+  test("tolerates empty, null, and undefined payloads", () => {
+    for (const payload of [[], null, undefined]) {
+      const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries(
+        payload as Array<TestItem>,
+      );
+      expect(prepared.entries).toEqual([]);
+      expect(prepared.overflowCount).toBe(0);
+      expect(prepared.totalCount).toBe(0);
+    }
+  });
+
+  test("previous-period ghosts sort after every live series, whatever their value", () => {
+    const prepared: PreparedTooltipEntries<TestItem> = prepareTooltipEntries([
+      item(`host-a${PREVIOUS_PERIOD_SERIES_SUFFIX}`, 999),
+      item("host-a", 10),
+      item("host-b", 50),
+      item(`host-b${PREVIOUS_PERIOD_SERIES_SUFFIX}`, 60),
+    ]);
+
+    expect(categories(prepared)).toEqual([
+      "host-b",
+      "host-a",
+      // Ghost tier keeps its own value ordering.
+      `host-a${PREVIOUS_PERIOD_SERIES_SUFFIX}`,
+      `host-b${PREVIOUS_PERIOD_SERIES_SUFFIX}`,
+    ]);
+  });
+
+  test("ghosts never displace live readings under the cap", () => {
+    const payload: Array<TestItem> = [];
+    for (let index: number = 0; index < DEFAULT_TOOLTIP_MAX_ENTRIES; index++) {
+      payload.push(item(`live-${index}`, index));
+      payload.push(item(`live-${index}${PREVIOUS_PERIOD_SERIES_SUFFIX}`, 1e6));
+    }
+
+    const prepared: PreparedTooltipEntries<TestItem> =
+      prepareTooltipEntries(payload);
+
+    expect(
+      prepared.entries.every((entry: TestItem) => {
+        return !entry.category.endsWith(PREVIOUS_PERIOD_SERIES_SUFFIX);
+      }),
+    ).toBe(true);
+    expect(prepared.overflowCount).toBe(DEFAULT_TOOLTIP_MAX_ENTRIES);
+  });
+
+  test("does not mutate the input payload", () => {
+    const payload: Array<TestItem> = [item("low", 1), item("high", 2)];
+    prepareTooltipEntries(payload);
+    expect(
+      payload.map((entry: TestItem) => {
+        return entry.category;
+      }),
+    ).toEqual(["low", "high"]);
+  });
+});