@oneuptime/common 12.0.19 → 12.0.20

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

@@ -0,0 +1,302 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import {
+  RenderResult,
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import * as React from "react";
+import getJestMockFunction, { MockFunction } from "../../MockType";
+
+/*
+ * Drag-to-zoom on a dashboard chart widget is the "investigate this
+ * spike" entry point: selecting a window must narrow THIS widget only
+ * (never the dashboard-wide range), refetch for the narrowed window, and
+ * offer a way back (Reset) and a way deeper (Open in Explorer, carrying
+ * the zoomed window). Edit mode must not zoom — the drag gesture belongs
+ * to widget move/resize there, and series pivots would navigate away from
+ * unsaved dashboard changes.
+ */
+
+const fetchResultsMock: MockFunction = getJestMockFunction();
+const metricChartsRenderMock: MockFunction = getJestMockFunction();
+
+/*
+ * The arrow wrappers are load bearing: jest.mock is hoisted above the
+ * compiled requires, so the mock variables above are still unassigned when
+ * the factory runs. Dereferencing them lazily, at call time, is what makes
+ * this work.
+ */
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/Utils/Metrics",
+  () => {
+    return {
+      __esModule: true,
+      default: {
+        fetchResults: (...args: Array<any>) => {
+          return fetchResultsMock(...args);
+        },
+        clearQueryTopNOverridesForScope: () => {
+          return undefined;
+        },
+      },
+    };
+  },
+);
+
+/*
+ * The widget's job under test is which window it ASKS for and which
+ * affordances it hands down; a real recharts surface in jsdom would test
+ * neither.
+ */
+jest.mock(
+  "../../../../App/FeatureSet/Dashboard/src/Components/Metrics/MetricCharts",
+  () => {
+    return {
+      __esModule: true,
+      default: (props: Record<string, unknown>): React.ReactElement => {
+        metricChartsRenderMock(props);
+        return React.createElement(
+          "div",
+          { "data-testid": "metric-charts" },
+          "chart",
+        );
+      },
+    };
+  },
+);
+
+import DashboardChartComponentElement from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent";
+import { DashboardBaseComponentProps } from "../../../../App/FeatureSet/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import DashboardChartType from "../../../Types/Dashboard/Chart/ChartType";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import DashboardChartComponent from "../../../Types/Dashboard/DashboardComponents/DashboardChartComponent";
+import DashboardViewConfig from "../../../Types/Dashboard/DashboardViewConfig";
+import { ObjectType } from "../../../Types/JSON";
+import MetricsAggregationType from "../../../Types/Metrics/MetricsAggregationType";
+import MetricViewData from "../../../Types/Metrics/MetricViewData";
+import ObjectID from "../../../Types/ObjectID";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+
+const COMPONENT_ID: ObjectID = new ObjectID(
+  "22222222-1111-4111-8111-222222222222",
+);
+
+const DASHBOARD_START: Date = new Date("2026-08-20T09:00:00.000Z");
+const DASHBOARD_END: Date = new Date("2026-08-20T10:00:00.000Z");
+const ZOOM_START: Date = new Date("2026-08-20T09:20:00.000Z");
+const ZOOM_END: Date = new Date("2026-08-20T09:35:00.000Z");
+
+/*
+ * A CUSTOM range pins the window to fixed instants — a relative range
+ * would resolve against the wall clock and make the window assertions
+ * untestable.
+ */
+const DASHBOARD_RANGE: RangeStartAndEndDateTime = {
+  range: TimeRange.CUSTOM,
+  startAndEndDate: new InBetween<Date>(DASHBOARD_START, DASHBOARD_END),
+};
+
+const DASHBOARD_VIEW_CONFIG: DashboardViewConfig = {
+  _type: ObjectType.DashboardViewConfig,
+  components: [],
+  heightInDashboardUnits: 60,
+};
+
+function buildBaseProps(
+  overrides: Partial<DashboardBaseComponentProps> = {},
+): DashboardBaseComponentProps {
+  return {
+    componentId: COMPONENT_ID,
+    isEditMode: false,
+    isSelected: false,
+    key: "chart-widget",
+    onComponentUpdate: (): void => {
+      // The widget under test never writes back through this.
+    },
+    totalCurrentDashboardWidthInPx: 1200,
+    dashboardCanvasTopInPx: 0,
+    dashboardCanvasLeftInPx: 0,
+    dashboardCanvasWidthInPx: 1200,
+    dashboardCanvasHeightInPx: 800,
+    dashboardComponentHeightInPx: 320,
+    dashboardComponentWidthInPx: 480,
+    dashboardViewConfig: DASHBOARD_VIEW_CONFIG,
+    dashboardStartAndEndDate: DASHBOARD_RANGE,
+    metricTypes: [],
+    refreshTick: 0,
+    variables: undefined,
+    ...overrides,
+  } as DashboardBaseComponentProps;
+}
+
+function buildChartComponent(): DashboardChartComponent {
+  return {
+    _type: ObjectType.DashboardComponent,
+    componentId: COMPONENT_ID,
+    componentType: DashboardComponentType.Chart,
+    topInDashboardUnits: 0,
+    leftInDashboardUnits: 0,
+    widthInDashboardUnits: 6,
+    heightInDashboardUnits: 3,
+    minWidthInDashboardUnits: 6,
+    minHeightInDashboardUnits: 3,
+    arguments: {
+      chartTitle: "CPU by host",
+      chartType: DashboardChartType.Line,
+      metricQueryConfig: {
+        metricAliasData: { metricVariable: "a" },
+        metricQueryData: {
+          filterData: {
+            metricName: "cpu.usage",
+            aggegationType: MetricsAggregationType.Avg,
+          },
+          groupByAttributeKeys: ["host.name"],
+        },
+      },
+    },
+  } as unknown as DashboardChartComponent;
+}
+
+function renderWidget(
+  overrides: Partial<DashboardBaseComponentProps> = {},
+): RenderResult {
+  return render(
+    <DashboardChartComponentElement
+      {...buildBaseProps(overrides)}
+      component={buildChartComponent()}
+    />,
+  );
+}
+
+interface CapturedChartProps {
+  metricViewData: MetricViewData;
+  onTimeRangeSelect?: ((startTime: Date, endTime: Date) => void) | undefined;
+  enableSeriesActions?: boolean | undefined;
+}
+
+function lastChartProps(): CapturedChartProps {
+  const calls: Array<Array<unknown>> = metricChartsRenderMock.mock.calls;
+  return calls[calls.length - 1]?.[0] as CapturedChartProps;
+}
+
+interface CapturedFetchArgs {
+  metricViewData: MetricViewData;
+}
+
+function lastFetchArgs(): CapturedFetchArgs {
+  const calls: Array<Array<unknown>> = fetchResultsMock.mock.calls;
+  return calls[calls.length - 1]?.[0] as CapturedFetchArgs;
+}
+
+beforeEach(() => {
+  fetchResultsMock.mockReset();
+  metricChartsRenderMock.mockReset();
+  fetchResultsMock.mockReturnValue(
+    Promise.resolve([{ data: [], truncated: false }]),
+  );
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("dashboard chart widget drag-to-zoom", () => {
+  test("drag-selecting a window refetches THIS widget for that window and shows the zoom bar", async () => {
+    renderWidget();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("metric-charts")).toBeInTheDocument();
+    });
+
+    // Initial fetch asks for the dashboard's window.
+    expect(lastFetchArgs().metricViewData.startAndEndDate?.startValue).toEqual(
+      DASHBOARD_START,
+    );
+
+    const initialProps: CapturedChartProps = lastChartProps();
+    expect(initialProps.onTimeRangeSelect).toBeDefined();
+    expect(initialProps.enableSeriesActions).toBe(true);
+    // A pinned Custom dashboard window is not a rolling token.
+    expect(initialProps.metricViewData.rangeToken).toBe(TimeRange.CUSTOM);
+
+    const fetchCountBeforeZoom: number = fetchResultsMock.mock.calls.length;
+
+    act(() => {
+      initialProps.onTimeRangeSelect?.(ZOOM_START, ZOOM_END);
+    });
+
+    // The zoom bar names the window and offers the escape hatches.
+    expect(screen.getByText(/Zoomed:/)).toBeInTheDocument();
+    expect(screen.getByText("Reset")).toBeInTheDocument();
+    expect(screen.getByText("Open in Explorer")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(fetchResultsMock.mock.calls.length).toBeGreaterThan(
+        fetchCountBeforeZoom,
+      );
+    });
+
+    // The refetch and the chart both use the ZOOMED window…
+    expect(lastFetchArgs().metricViewData.startAndEndDate?.startValue).toEqual(
+      ZOOM_START,
+    );
+    expect(lastFetchArgs().metricViewData.startAndEndDate?.endValue).toEqual(
+      ZOOM_END,
+    );
+    // …and a zoomed window is a deliberate pin: no rolling range token.
+    await waitFor(() => {
+      expect(lastChartProps().metricViewData.rangeToken).toBeUndefined();
+    });
+  });
+
+  test("Reset returns to the dashboard's window", async () => {
+    renderWidget();
+
+    await waitFor(() => {
+      expect(screen.getByTestId("metric-charts")).toBeInTheDocument();
+    });
+
+    act(() => {
+      lastChartProps().onTimeRangeSelect?.(ZOOM_START, ZOOM_END);
+    });
+
+    expect(screen.getByText(/Zoomed:/)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Reset"));
+
+    expect(screen.queryByText(/Zoomed:/)).toBeNull();
+
+    await waitFor(() => {
+      expect(
+        lastFetchArgs().metricViewData.startAndEndDate?.startValue,
+      ).toEqual(DASHBOARD_START);
+    });
+    expect(lastChartProps().metricViewData.rangeToken).toBe(TimeRange.CUSTOM);
+  });
+
+  test("edit mode disables zoom and series navigation", async () => {
+    renderWidget({ isEditMode: true });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("metric-charts")).toBeInTheDocument();
+    });
+
+    const captured: CapturedChartProps = lastChartProps();
+    expect(captured.onTimeRangeSelect).toBeUndefined();
+    expect(captured.enableSeriesActions).toBe(false);
+  });
+});

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

@@ -0,0 +1,408 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  jest,
+  test,
+} from "@jest/globals";
+import { cleanup, render, waitFor } from "@testing-library/react";
+import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
+
+/*
+ * The wiring half of issue #3377.
+ *
+ * DiscoveryScanFormValidation.test.ts (in App/Tests) proves the validators
+ * themselves are right, and BasicFormStepValidation.test.tsx proves a wizard
+ * step refuses to turn while its own field has an error. Neither proves the
+ * Discovery page actually HANGS those validators off the right fields, on the
+ * right steps — and that is the part a refactor drops silently: removing
+ * `customValidation` from a field object is type-safe, render-safe, and puts
+ * the form straight back to accepting a phone number as a scan target.
+ *
+ * The page is one big ModelTable call and its fields are configuration passed
+ * as props, so the table is mocked to capture them and the captured functions
+ * are then exercised directly — the same approach
+ * SecurityEventsDetectionRulesPage.test.tsx uses.
+ */
+
+type CapturedFormField = {
+  field: Record<string, boolean>;
+  title: string;
+  stepId?: string | undefined;
+  required?: boolean | undefined;
+  placeholder?: string | undefined;
+  validation?:
+    | {
+        maxLength?: number | undefined;
+        minValue?: number | undefined;
+        maxValue?: number | undefined;
+      }
+    | undefined;
+  customValidation?:
+    | ((values: Record<string, unknown>) => string | null)
+    | undefined;
+  showIf?: ((values: Record<string, unknown>) => boolean) | undefined;
+};
+
+type CapturedFormStep = {
+  id: string;
+  title: string;
+};
+
+type CapturedTableProps = {
+  formFields?: Array<CapturedFormField>;
+  formSteps?: Array<CapturedFormStep>;
+};
+
+let capturedTableProps: CapturedTableProps | null = null;
+
+jest.mock("../../../UI/Components/ModelTable/ModelTable", () => {
+  return {
+    __esModule: true,
+    default: (props: CapturedTableProps) => {
+      capturedTableProps = props;
+      return null;
+    },
+  };
+});
+
+import DiscoveryPage from "../../../../App/FeatureSet/Dashboard/src/Pages/NetworkDevice/Discovery";
+import ProbeUtil from "../../../../App/FeatureSet/Dashboard/src/Utils/Probe";
+import Project from "../../../Models/DatabaseModels/Project";
+import Probe from "../../../Models/DatabaseModels/Probe";
+import ProjectUtil from "../../../UI/Utils/Project";
+import ScanTargetUtil from "../../../Utils/NetworkDiscovery/ScanTargetUtil";
+import ObjectID from "../../../Types/ObjectID";
+import Route from "../../../Types/API/Route";
+
+const PROJECT_ID: ObjectID = new ObjectID(
+  "11111111-1111-4111-8111-111111111111",
+);
+
+const STEP_SCAN_TARGET: string = "scan-target";
+const STEP_SNMP: string = "snmp";
+const STEP_SCHEDULE: string = "schedule";
+
+function fieldKeyOf(field: CapturedFormField): string {
+  return Object.keys(field.field || {})[0] as string;
+}
+
+function fieldNamed(key: string): CapturedFormField {
+  const field: CapturedFormField | undefined =
+    capturedTableProps?.formFields?.find(
+      (formField: CapturedFormField): boolean => {
+        return fieldKeyOf(formField) === key;
+      },
+    );
+
+  if (!field) {
+    throw new Error(`Discovery scan form field "${key}" not found`);
+  }
+
+  return field;
+}
+
+function validate(key: string, values: Record<string, unknown>): string | null {
+  const field: CapturedFormField = fieldNamed(key);
+
+  if (!field.customValidation) {
+    throw new Error(`Field "${key}" has no customValidation`);
+  }
+
+  return field.customValidation(values);
+}
+
+async function renderPage(): Promise<void> {
+  const project: Project = new Project();
+  project.id = PROJECT_ID;
+
+  render(
+    <MemoryRouter>
+      <DiscoveryPage
+        pageRoute={new Route("/dashboard/network-devices/discovery")}
+        currentProject={project}
+        hasPaymentMethod={true}
+      />
+    </MemoryRouter>,
+  );
+
+  /*
+   * The page renders a loader until its probe fetch settles, so the table (and
+   * with it the form config) does not exist on the first paint.
+   */
+  await waitFor(() => {
+    expect(capturedTableProps).not.toBeNull();
+  });
+}
+
+describe("Create Network Device Discovery Scan wizard", () => {
+  beforeEach(() => {
+    capturedTableProps = null;
+    jest.spyOn(ProjectUtil, "getCurrentProjectId").mockReturnValue(PROJECT_ID);
+
+    const probe: Probe = new Probe();
+    probe.id = new ObjectID("22222222-2222-4222-8222-222222222222");
+    probe.name = "Datacenter Probe";
+
+    jest.spyOn(ProbeUtil, "getAllProbes").mockResolvedValue([probe] as never);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    capturedTableProps = null;
+  });
+
+  test("is still a three-step wizard", async () => {
+    await renderPage();
+
+    expect(
+      capturedTableProps?.formSteps?.map((step: CapturedFormStep): string => {
+        return step.id;
+      }),
+    ).toEqual([STEP_SCAN_TARGET, STEP_SNMP, STEP_SCHEDULE]);
+  });
+
+  test("every field names a step that the wizard actually declares", async () => {
+    await renderPage();
+
+    const declared: Array<string> =
+      capturedTableProps?.formSteps?.map((step: CapturedFormStep): string => {
+        return step.id;
+      }) || [];
+
+    const fields: Array<CapturedFormField> =
+      capturedTableProps?.formFields || [];
+
+    expect(fields.length).toBeGreaterThan(0);
+
+    for (const field of fields) {
+      /*
+       * A field with no stepId is validated on no step and rendered on no
+       * step — the exact failure this wizard's validators are meant to close.
+       */
+      expect(declared).toContain(field.stepId);
+    }
+  });
+});
+
+describe("Scan Target is validated on the Scan Target step", () => {
+  beforeEach(() => {
+    capturedTableProps = null;
+    jest.spyOn(ProjectUtil, "getCurrentProjectId").mockReturnValue(PROJECT_ID);
+    jest.spyOn(ProbeUtil, "getAllProbes").mockResolvedValue([] as never);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    capturedTableProps = null;
+  });
+
+  test("the field carries a validator, on the first step, and is required", async () => {
+    await renderPage();
+
+    const field: CapturedFormField = fieldNamed("cidr");
+
+    expect(field.stepId).toBe(STEP_SCAN_TARGET);
+    expect(field.required).toBe(true);
+    expect(typeof field.customValidation).toBe("function");
+  });
+
+  test("the reported input is rejected right there", async () => {
+    await renderPage();
+
+    expect(validate("cidr", { cidr: "9876543210" })).toContain(
+      "is not a valid scan target",
+    );
+  });
+
+  test.each([
+    ["free text", "not-a-target"],
+    ["a bad prefix", "10.0.0.0/33"],
+    ["an out-of-range octet", "10.0.0.256"],
+    ["a reversed range", "10.22-16.0.1"],
+    ["a target over the address ceiling", "10.0.0.0/8"],
+  ])("%s is rejected", async (_label: string, target: string) => {
+    await renderPage();
+
+    expect(validate("cidr", { cidr: target })).toBe(
+      ScanTargetUtil.getValidationError(target),
+    );
+  });
+
+  test.each([
+    ["CIDR", "192.168.1.0/24"],
+    ["an octet range", "10.16-22.0-255.51-66"],
+    ["a single address", "10.0.0.5"],
+  ])("%s is accepted", async (_label: string, target: string) => {
+    await renderPage();
+
+    expect(validate("cidr", { cidr: target })).toBeNull();
+  });
+
+  test("an empty target is left to the field's own required rule", async () => {
+    await renderPage();
+
+    for (const value of [undefined, null, ""]) {
+      expect(validate("cidr", { cidr: value })).toBeNull();
+    }
+  });
+
+  test("a BLANK target is not left to anything — nothing else would catch it", async () => {
+    await renderPage();
+
+    /*
+     * Validation.validateRequired measures the untrimmed string, so a lone
+     * space satisfies it. If the validator read a blank box as an empty one,
+     * "   " would clear step 1 and fail on the server two steps later — the
+     * reported bug, reproduced through the fix meant to close it.
+     */
+    for (const value of [" ", "   ", "\t"]) {
+      expect(validate("cidr", { cidr: value })).not.toBeNull();
+    }
+  });
+
+  test("a target past the parser's length cap is refused on this step", async () => {
+    await renderPage();
+
+    const tooLong: string = "1".repeat(ScanTargetUtil.MAX_TARGET_LENGTH + 1);
+
+    expect(validate("cidr", { cidr: tooLong })).toContain(
+      `longer than ${ScanTargetUtil.MAX_TARGET_LENGTH} characters`,
+    );
+  });
+
+  test("the field declares no maxLength of its own", async () => {
+    /*
+     * ModelForm infers one from the ShortText column (100) and validateLength
+     * runs before customValidation, which then overwrites its message with the
+     * parser's — so a declared cap would be inert. The rule that actually
+     * bites is the parser's own 64, asserted above.
+     */
+    await renderPage();
+
+    expect(fieldNamed("cidr").validation?.maxLength).toBeUndefined();
+  });
+});
+
+describe("Rescan Interval is validated on the Schedule step", () => {
+  beforeEach(() => {
+    capturedTableProps = null;
+    jest.spyOn(ProjectUtil, "getCurrentProjectId").mockReturnValue(PROJECT_ID);
+    jest.spyOn(ProbeUtil, "getAllProbes").mockResolvedValue([] as never);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    capturedTableProps = null;
+  });
+
+  test("the field carries a validator and lives on the last step", async () => {
+    await renderPage();
+
+    const field: CapturedFormField = fieldNamed("rescanIntervalInMinutes");
+
+    expect(field.stepId).toBe(STEP_SCHEDULE);
+    expect(typeof field.customValidation).toBe("function");
+  });
+
+  test("it only reveals itself once the scan is set to repeat", async () => {
+    await renderPage();
+
+    const field: CapturedFormField = fieldNamed("rescanIntervalInMinutes");
+
+    expect(field.showIf?.({ isRecurring: true })).toBe(true);
+    expect(field.showIf?.({ isRecurring: false })).toBe(false);
+    expect(field.showIf?.({})).toBe(false);
+  });
+
+  test("an interval under the floor is rejected", async () => {
+    await renderPage();
+
+    expect(
+      validate("rescanIntervalInMinutes", {
+        isRecurring: true,
+        rescanIntervalInMinutes: 5,
+      }),
+    ).toContain("at least 15 minutes");
+  });
+
+  test("a fractional interval is rejected even though it clears the floor", async () => {
+    await renderPage();
+
+    expect(
+      validate("rescanIntervalInMinutes", {
+        isRecurring: true,
+        rescanIntervalInMinutes: 20.5,
+      }),
+    ).toContain("whole number");
+  });
+
+  test("a sensible interval is accepted", async () => {
+    await renderPage();
+
+    expect(
+      validate("rescanIntervalInMinutes", {
+        isRecurring: true,
+        rescanIntervalInMinutes: 60,
+      }),
+    ).toBeNull();
+  });
+
+  test("nothing is demanded of a scan that does not repeat", async () => {
+    await renderPage();
+
+    expect(
+      validate("rescanIntervalInMinutes", {
+        isRecurring: false,
+        rescanIntervalInMinutes: 1,
+      }),
+    ).toBeNull();
+  });
+});
+
+describe("SNMP Port is bounded on the SNMP Credentials step", () => {
+  beforeEach(() => {
+    capturedTableProps = null;
+    jest.spyOn(ProjectUtil, "getCurrentProjectId").mockReturnValue(PROJECT_ID);
+    jest.spyOn(ProbeUtil, "getAllProbes").mockResolvedValue([] as never);
+  });
+
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+    capturedTableProps = null;
+  });
+
+  test("carries a validator on the SNMP step", async () => {
+    await renderPage();
+
+    const field: CapturedFormField = fieldNamed("snmpPort");
+
+    expect(field.stepId).toBe(STEP_SNMP);
+    expect(typeof field.customValidation).toBe("function");
+  });
+
+  test.each([
+    ["zero", 0],
+    ["a port past the top of the range", 65536],
+    ["a fractional port", 161.5],
+  ])("%s is rejected right there", async (_label: string, value: unknown) => {
+    await renderPage();
+
+    expect(validate("snmpPort", { snmpPort: value })).not.toBeNull();
+  });
+
+  test("the SNMP default is accepted, and an empty box says nothing", async () => {
+    await renderPage();
+
+    expect(validate("snmpPort", { snmpPort: 161 })).toBeNull();
+    expect(validate("snmpPort", { snmpPort: "" })).toBeNull();
+    expect(validate("snmpPort", {})).toBeNull();
+  });
+});