@oneuptime/common 12.0.6 → 12.0.8

package/Tests/UI/Monitor/MonitorStepCriteriaView.test.tsx

@@ -0,0 +1,432 @@
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, jest } from "@jest/globals";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+import AggregationType from "../../../Types/BaseDatabase/AggregationType";
+import Hostname from "../../../Types/API/Hostname";
+import HTTPMethod from "../../../Types/API/HTTPMethod";
+import URL from "../../../Types/API/URL";
+import MetricsViewConfig from "../../../Types/Metrics/MetricsViewConfig";
+import DnsRecordType from "../../../Types/Monitor/DnsMonitor/DnsRecordType";
+import MonitorCriteria from "../../../Types/Monitor/MonitorCriteria";
+import { KubernetesResourceScope } from "../../../Types/Monitor/MonitorStepKubernetesMonitor";
+import Port from "../../../Types/Port";
+import MonitorStep, {
+  MonitorStepType,
+} from "../../../Types/Monitor/MonitorStep";
+import MonitorType from "../../../Types/Monitor/MonitorType";
+import ObjectID from "../../../Types/ObjectID";
+import RollingTime from "../../../Types/RollingTime/RollingTime";
+import Service from "../../../Models/DatabaseModels/Service";
+import NetworkDevice from "../../../Models/DatabaseModels/NetworkDevice";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * WHAT THIS FILE PROTECTS
+ *
+ * This is the monitor "Criteria" page's step viewer, rendered for real.
+ * The bug it pins: for most monitor types the page showed criteria and
+ * nothing else — no destination, no metric name, no host — while the edit
+ * modal showed the whole configuration. MonitorStepViewModel.test.ts holds
+ * the mapping from step to rows; this file holds the other half, that the
+ * component actually PUTS those rows on the page (and, for metric monitors,
+ * the chart preview beside them).
+ *
+ * The metric preview is stubbed: it is the metric explorer's chart stack,
+ * and what matters here is that the viewer hands it the right config, not
+ * that ClickHouse answers.
+ */
+
+const getListMock: MockFunction = getJestMockFunction();
+const getItemMock: MockFunction = getJestMockFunction();
+
+jest.mock("../../../UI/Utils/ModelAPI/ModelAPI", () => {
+  return {
+    __esModule: true,
+    default: {
+      getList: (...args: Array<any>) => {
+        return getListMock(...args);
+      },
+      getItem: (...args: Array<any>) => {
+        return getItemMock(...args);
+      },
+    },
+  };
+});
+
+jest.mock("../../../UI/Utils/Project", () => {
+  return {
+    __esModule: true,
+    default: {
+      getCurrentProjectId: () => {
+        return new ObjectID("99999999-9999-4999-8999-999999999999");
+      },
+    },
+  };
+});
+
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Monitor/MonitorSteps/MonitorStepMetricPreview",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: {
+        metricsViewConfig: MetricsViewConfig;
+        rollingTime: RollingTime | undefined;
+      }) => {
+        return (
+          <div data-testid="metric-preview">
+            {`${props.metricsViewConfig.queryConfigs.length} queries over ${props.rollingTime}`}
+          </div>
+        );
+      },
+    };
+  },
+);
+
+// Imported after the mocks above so the component picks them up.
+import MonitorStepElement from "../../../../App/FeatureSet/Dashboard/src/Components/Monitor/MonitorSteps/MonitorStep";
+
+/*
+ * The heading of the criteria section is the word "Criteria", which is also
+ * the default NAME of a criteria instance — so the heading alone is an
+ * ambiguous query. The description under it is unique to the section.
+ */
+const CRITERIA_SECTION_DESCRIPTION: string =
+  "Criteria we will use to determine your resource status.";
+
+const METRIC_VIEW_CONFIG: MetricsViewConfig = {
+  queryConfigs: [
+    {
+      metricAliasData: {
+        metricVariable: "a",
+        title: "CPU Usage",
+        description: undefined,
+        legend: undefined,
+        legendUnit: undefined,
+      },
+      metricQueryData: {
+        filterData: {
+          metricName: "container.cpu.usage",
+          aggegationType: AggregationType.Avg,
+        },
+      },
+    },
+  ],
+  formulaConfigs: [],
+};
+
+function buildStep(data: Partial<MonitorStepType>): MonitorStep {
+  const monitorStep: MonitorStep = new MonitorStep();
+
+  monitorStep.data = {
+    ...(monitorStep.data as MonitorStepType),
+    monitorCriteria: new MonitorCriteria(),
+    ...data,
+  } as MonitorStepType;
+
+  return monitorStep;
+}
+
+function renderStep(monitorType: MonitorType, monitorStep: MonitorStep): void {
+  render(
+    <MemoryRouter>
+      <MonitorStepElement
+        monitorType={monitorType}
+        monitorStep={monitorStep}
+        monitorStatusOptions={[]}
+        incidentSeverityOptions={[]}
+        alertSeverityOptions={[]}
+        onCallPolicyOptions={[]}
+        labelOptions={[]}
+        teamOptions={[]}
+        userOptions={[]}
+        incidentRoleOptions={[]}
+      />
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => {
+  getListMock.mockReset();
+  getItemMock.mockReset();
+  getListMock.mockResolvedValue({ data: [], count: 0, skip: 0, limit: 0 });
+  getItemMock.mockResolvedValue(null);
+});
+
+describe("Monitor criteria page — metric monitors", () => {
+  it("names the metric and the window instead of showing an empty section", async () => {
+    renderStep(
+      MonitorType.Metrics,
+      buildStep({
+        metricMonitor: {
+          metricViewConfig: METRIC_VIEW_CONFIG,
+          rollingTime: RollingTime.Past30Minutes,
+          telemetryServiceIds: [],
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Metrics")).toBeInTheDocument();
+    });
+
+    expect(
+      screen.getByText("CPU Usage (container.cpu.usage · Avg)"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Time Range")).toBeInTheDocument();
+    expect(screen.getByText(RollingTime.Past30Minutes)).toBeInTheDocument();
+  });
+
+  it("renders the metric preview with the step's own config", async () => {
+    renderStep(
+      MonitorType.Metrics,
+      buildStep({
+        metricMonitor: {
+          metricViewConfig: METRIC_VIEW_CONFIG,
+          rollingTime: RollingTime.Past30Minutes,
+          telemetryServiceIds: [],
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("metric-preview")).toHaveTextContent(
+        "1 queries over Past 30 Minutes",
+      );
+    });
+  });
+
+  it("shows the host an infrastructure monitor watches", async () => {
+    renderStep(
+      MonitorType.Host,
+      buildStep({
+        hostMonitor: {
+          hostIdentifier: "web-1",
+          metricViewConfig: METRIC_VIEW_CONFIG,
+          rollingTime: RollingTime.Past5Minutes,
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("web-1")).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("metric-preview")).toBeInTheDocument();
+  });
+
+  it("shows the Kubernetes cluster and its resource filters", async () => {
+    renderStep(
+      MonitorType.Kubernetes,
+      buildStep({
+        kubernetesMonitor: {
+          clusterIdentifier: "prod-cluster",
+          resourceScope: KubernetesResourceScope.Workload,
+          resourceFilters: { namespace: "payments" },
+          metricViewConfig: METRIC_VIEW_CONFIG,
+          rollingTime: RollingTime.Past5Minutes,
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("prod-cluster")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Namespace")).toBeInTheDocument();
+    expect(screen.getByText("payments")).toBeInTheDocument();
+  });
+});
+
+describe("Monitor criteria page — probe monitors", () => {
+  it("still shows the API destination and request type", async () => {
+    renderStep(
+      MonitorType.API,
+      buildStep({
+        monitorDestination: URL.fromString("https://api.example.com/health"),
+        requestType: HTTPMethod.POST,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("API URL")).toBeInTheDocument();
+    });
+
+    expect(
+      screen.getByText("https://api.example.com/health"),
+    ).toBeInTheDocument();
+    expect(screen.getByText(HTTPMethod.POST)).toBeInTheDocument();
+  });
+
+  it("shows the SSL certificate monitor's destination", async () => {
+    renderStep(
+      MonitorType.SSLCertificate,
+      buildStep({
+        monitorDestination: URL.fromString("https://secure.example.com"),
+      }),
+    );
+
+    await waitFor(() => {
+      expect(
+        // URL.toString() renders the root path explicitly.
+        screen.getByText("https://secure.example.com/"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("shows the port monitor's host and port", async () => {
+    renderStep(
+      MonitorType.Port,
+      buildStep({
+        monitorDestination: new Hostname("db.example.com"),
+        monitorDestinationPort: new Port(5432),
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("db.example.com")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("5432")).toBeInTheDocument();
+  });
+
+  it("shows the DNS query, record type and resolver", async () => {
+    renderStep(
+      MonitorType.DNS,
+      buildStep({
+        dnsMonitor: {
+          queryName: "example.com",
+          recordType: DnsRecordType.A,
+          hostname: "8.8.8.8",
+          port: 53,
+          timeout: 5000,
+          retries: 3,
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("example.com")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Record Type")).toBeInTheDocument();
+    expect(screen.getByText("8.8.8.8")).toBeInTheDocument();
+  });
+});
+
+describe("Monitor criteria page — resolved references", () => {
+  it("names the telemetry services a log monitor is scoped to", async () => {
+    const service: Service = new Service();
+    service.id = new ObjectID("11111111-1111-4111-8111-111111111111");
+    service.name = "checkout";
+
+    getListMock.mockResolvedValue({
+      data: [service],
+      count: 1,
+      skip: 0,
+      limit: 10,
+    });
+
+    renderStep(
+      MonitorType.Logs,
+      buildStep({
+        logMonitor: {
+          attributes: {},
+          body: "timeout",
+          severityTexts: [],
+          telemetryServiceIds: [
+            new ObjectID("11111111-1111-4111-8111-111111111111"),
+          ],
+          lastXSecondsOfLogs: 60,
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("checkout")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Telemetry Services")).toBeInTheDocument();
+  });
+
+  it("names the network device a network device monitor alerts on", async () => {
+    const networkDevice: NetworkDevice = new NetworkDevice();
+    networkDevice.name = "core-switch-1";
+
+    getItemMock.mockResolvedValue(networkDevice);
+
+    renderStep(
+      MonitorType.NetworkDevice,
+      buildStep({
+        networkDeviceMonitor: {
+          networkDeviceId: "44444444-4444-4444-8444-444444444444",
+          monitorInterfaces: true,
+          collectEndpoints: false,
+          oids: [],
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("core-switch-1")).toBeInTheDocument();
+    });
+  });
+
+  it("falls back to the stored id when the network device no longer resolves", async () => {
+    getItemMock.mockResolvedValue(null);
+
+    renderStep(
+      MonitorType.NetworkDevice,
+      buildStep({
+        networkDeviceMonitor: {
+          networkDeviceId: "44444444-4444-4444-8444-444444444444",
+          monitorInterfaces: true,
+          collectEndpoints: false,
+          oids: [],
+        },
+      }),
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByText("44444444-4444-4444-8444-444444444444"),
+      ).toBeInTheDocument();
+    });
+  });
+});
+
+describe("Monitor criteria page — types without step configuration", () => {
+  it("hides the Monitor Details section for incoming request monitors but still shows criteria", async () => {
+    renderStep(MonitorType.IncomingRequest, buildStep({}));
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(CRITERIA_SECTION_DESCRIPTION),
+      ).toBeInTheDocument();
+    });
+
+    expect(
+      screen.queryByTestId("monitor-step-details"),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Monitor Details")).not.toBeInTheDocument();
+  });
+
+  it("always renders the criteria section, whatever the monitor type", async () => {
+    renderStep(
+      MonitorType.Website,
+      buildStep({
+        monitorDestination: URL.fromString("https://example.com"),
+      }),
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(CRITERIA_SECTION_DESCRIPTION),
+      ).toBeInTheDocument();
+    });
+
+    expect(screen.getByTestId("monitor-step-details")).toBeInTheDocument();
+  });
+});

package/Tests/UI/Rum/ReplayScrubber.test.tsx

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
 import * as React from "react";
 import { describe, expect, it } from "@jest/globals";

package/Tests/UI/Rum/ReplayStage.test.tsx

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { act, render } from "@testing-library/react";
 /*
  * The Dashboard has its own copy of react, so a component imported from there

package/Tests/UI/Telemetry/TelemetrySnapshotWindowAlert.test.tsx

@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { render, RenderResult } from "@testing-library/react";
 /*
  * The Dashboard has its own copy of react, so a component imported from there

package/Tests/UI/Utils/LocalStorageArrayRoundTrip.test.ts

@@ -0,0 +1,72 @@
+import LocalStorage from "../../../UI/Utils/LocalStorage";
+import { readLegacySerializedArray } from "../../../Utils/LegacySerializedArray";
+import { beforeEach, describe, expect, test } from "@jest/globals";
+
+/*
+ * LocalStorage.setItem hands the caller's value straight to
+ * JSONFunctions.serializeValue rather than wrapping it in an object first, so
+ * a TOP-LEVEL array took the same broken path as a nested one and came back as
+ * { "0": ..., "1": ... }. This is not the saved-view case: the array is flat.
+ *
+ * It shipped. The logs explorer stores its selected columns here, read back
+ * behind an Array.isArray guard, so the corruption showed up as the column
+ * picker silently resetting to defaults on every reload — no error anywhere.
+ */
+
+describe("LocalStorage round-trips arrays", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  test("A flat string array comes back as an array", () => {
+    LocalStorage.setItem("columns", ["time", "body", "severityText"]);
+
+    const restored: unknown = LocalStorage.getItem("columns");
+
+    expect(Array.isArray(restored)).toBe(true);
+    expect(restored).toEqual(["time", "body", "severityText"]);
+  });
+
+  test("The stored JSON is an array, not a numeric-keyed object", () => {
+    LocalStorage.setItem("columns", ["time", "body"]);
+
+    expect(localStorage.getItem("columns")).toBe('["time","body"]');
+  });
+
+  test("An empty array round-trips", () => {
+    LocalStorage.setItem("columns", []);
+
+    expect(LocalStorage.getItem("columns")).toEqual([]);
+  });
+
+  test("An array of numbers round-trips", () => {
+    LocalStorage.setItem("sizes", [10, 25, 50]);
+
+    expect(LocalStorage.getItem("sizes")).toEqual([10, 25, 50]);
+  });
+
+  test("An array nested inside a stored object round-trips", () => {
+    LocalStorage.setItem("state", { columns: ["time"], filters: [["a", "b"]] });
+
+    expect(LocalStorage.getItem("state")).toEqual({
+      columns: ["time"],
+      filters: [["a", "b"]],
+    });
+  });
+
+  test("A plain object is still stored as an object", () => {
+    LocalStorage.setItem("prefs", { pageSize: 50 });
+
+    expect(LocalStorage.getItem("prefs")).toEqual({ pageSize: 50 });
+  });
+
+  test("A value written by the old serializer still reads back as a list", () => {
+    // What a pre-fix build left in the browser.
+    localStorage.setItem("columns", '{"0":"time","1":"body"}');
+
+    const restored: unknown = LocalStorage.getItem("columns");
+
+    expect(Array.isArray(restored)).toBe(false);
+    expect(readLegacySerializedArray(restored)).toEqual(["time", "body"]);
+  });
+});

package/Tests/Utils/Dashboard/HtmlWidgetDocument.test.ts

@@ -216,7 +216,12 @@ describe("HtmlWidgetDocument", () => {
       ).toEqual({ clusters: "eu-1,us-1" });
     });
 
-    it("falls back to the default when a multi-select has no picks", () => {
+    /*
+     * A multi-select with no picks is "All", and the default does not
+     * override it — same rule the chart widgets follow. The author sees
+     * an empty string, which is what "no scope" looks like in a template.
+     */
+    it("renders an empty string when a multi-select has no picks", () => {
       expect(
         HtmlWidgetDocument.resolveVariables([
           makeVariable({
@@ -226,7 +231,19 @@ describe("HtmlWidgetDocument", () => {
             defaultValue: "eu-1",
           }),
         ]),
-      ).toEqual({ clusters: "eu-1" });
+      ).toEqual({ clusters: "" });
+    });
+
+    it("renders an empty string for an untouched multi-select with a default", () => {
+      expect(
+        HtmlWidgetDocument.resolveVariables([
+          makeVariable({
+            name: "clusters",
+            isMultiSelect: true,
+            defaultValue: "eu-1",
+          }),
+        ]),
+      ).toEqual({ clusters: "" });
     });
 
     it("maps an unset variable to an empty string rather than dropping it", () => {

package/Tests/Utils/Dashboard/ModelQueryVariableInterpolation.test.ts

@@ -105,6 +105,50 @@ describe("DashboardModelQueryInterpolation.applyToQuery - writing predicates", (
     expect((result["hostname"] as Includes).values).toEqual(["web1", "web2"]);
   });
 
+  /*
+   * Resource list widgets share DashboardVariableInterpolation.resolveValue
+   * with the metric widgets, so they inherit the "All" rule: an empty
+   * multi-select filters nothing, and the variable's single-select Default
+   * does not stand in for the picks the user did not make.
+   */
+  test("an empty multi-select writes no predicate, Default or not", () => {
+    const query: Record<string, unknown> = { kind: "Container" };
+    const result: Record<string, unknown> =
+      DashboardModelQueryInterpolation.applyToQuery(
+        query,
+        [
+          attrVariable("host.name", {
+            isMultiSelect: true,
+            selectedValues: [],
+            defaultValue: "web1",
+          }),
+        ],
+        MAP,
+      );
+
+    expect(result).toBe(query);
+    expect(result["hostname"]).toBeUndefined();
+  });
+
+  test("a cleared multi-select removes a prior filter on that column", () => {
+    const query: Record<string, unknown> = { hostname: "web1", kind: "Pod" };
+    const result: Record<string, unknown> =
+      DashboardModelQueryInterpolation.applyToQuery(
+        query,
+        [
+          attrVariable("host.name", {
+            isMultiSelect: true,
+            selectedValues: [],
+            defaultValue: "web1",
+          }),
+        ],
+        MAP,
+      );
+
+    expect(result).toEqual({ kind: "Pod" });
+    expect(query).toEqual({ hostname: "web1", kind: "Pod" }); // input untouched
+  });
+
   test("maps two variables onto their respective columns", () => {
     const result: Record<string, unknown> =
       DashboardModelQueryInterpolation.applyToQuery(