@oneuptime/common 12.0.31 → 12.0.32

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

@@ -0,0 +1,302 @@
+import { describe, expect, test } from "@jest/globals";
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+  EntityFilterModelType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardBaseComponent from "../../../Types/Dashboard/DashboardComponents/DashboardBaseComponent";
+import {
+  CephDisplaySection,
+  CephFiltersSection,
+  getCephCommonArguments,
+} from "../../../Utils/Dashboard/Components/DashboardCephResourceListShared";
+import {
+  DockerSwarmDisplaySection,
+  DockerSwarmFiltersSection,
+  getDockerSwarmCommonArguments,
+} from "../../../Utils/Dashboard/Components/DashboardDockerSwarmResourceListShared";
+import {
+  ProxmoxDisplaySection,
+  ProxmoxFiltersSection,
+  getProxmoxCommonArguments,
+} from "../../../Utils/Dashboard/Components/DashboardProxmoxResourceListShared";
+import {
+  KubernetesDisplaySection,
+  KubernetesFiltersSection,
+  getKubernetesCommonArguments,
+} from "../../../Utils/Dashboard/Components/DashboardKubernetesResourceListShared";
+
+/*
+ * The per-provider argument builders behind the infrastructure list widgets.
+ *
+ * Ceph, Docker Swarm and Proxmox are the same widget four times over — the
+ * files are identical but for the provider's name — and Kubernetes is that
+ * shape plus a namespace filter. They were written by copying one another,
+ * which is fine, and it is also exactly why they drift: a fix or an addition
+ * made to one has no reason to fail anywhere else, so the widgets slowly stop
+ * behaving alike and nobody finds out until an operator asks why the Proxmox
+ * list has no honeycomb view.
+ *
+ * The entity filter type is the sharper risk. It is what a cluster filter
+ * resolves ids against, and a copy-paste that left the wrong provider's model
+ * behind would offer one product's clusters as the filter for another's — no
+ * type error, no crash, just a picker that lists the wrong things and a widget
+ * that silently matches nothing.
+ */
+
+type AnyArgument = ComponentArgument<DashboardBaseComponent>;
+
+interface ProviderWidget {
+  provider: string;
+  args: Array<AnyArgument>;
+  displaySection: ComponentArgumentSection;
+  filtersSection: ComponentArgumentSection;
+  clusterArgumentId: string;
+  clusterEntityType: EntityFilterModelType;
+}
+
+/*
+ * Kubernetes is asked for WITHOUT its namespace filter here, which is the
+ * arrangement in which it is meant to be the same widget as the other three.
+ * Its extra argument is covered separately below.
+ */
+const WIDGETS: Array<ProviderWidget> = [
+  {
+    provider: "Ceph",
+    args: getCephCommonArguments<DashboardBaseComponent>(),
+    displaySection: CephDisplaySection,
+    filtersSection: CephFiltersSection,
+    clusterArgumentId: "cephClusterIds",
+    clusterEntityType: EntityFilterModelType.CephCluster,
+  },
+  {
+    provider: "Docker Swarm",
+    args: getDockerSwarmCommonArguments<DashboardBaseComponent>(),
+    displaySection: DockerSwarmDisplaySection,
+    filtersSection: DockerSwarmFiltersSection,
+    clusterArgumentId: "dockerSwarmClusterIds",
+    clusterEntityType: EntityFilterModelType.DockerSwarmCluster,
+  },
+  {
+    provider: "Proxmox",
+    args: getProxmoxCommonArguments<DashboardBaseComponent>(),
+    displaySection: ProxmoxDisplaySection,
+    filtersSection: ProxmoxFiltersSection,
+    clusterArgumentId: "proxmoxClusterIds",
+    clusterEntityType: EntityFilterModelType.ProxmoxCluster,
+  },
+  {
+    provider: "Kubernetes",
+    args: getKubernetesCommonArguments<DashboardBaseComponent>({
+      includeNamespaceFilter: false,
+    }),
+    displaySection: KubernetesDisplaySection,
+    filtersSection: KubernetesFiltersSection,
+    clusterArgumentId: "kubernetesClusterIds",
+    clusterEntityType: EntityFilterModelType.KubernetesCluster,
+  },
+];
+
+function argumentById(
+  args: Array<AnyArgument>,
+  id: string,
+): AnyArgument | undefined {
+  return args.find((argument: AnyArgument): boolean => {
+    return (argument.id as unknown as string) === id;
+  });
+}
+
+describe("infrastructure list widget arguments", () => {
+  describe.each(WIDGETS)(
+    "$provider",
+    ({
+      args,
+      displaySection,
+      filtersSection,
+      clusterArgumentId,
+      clusterEntityType,
+    }: ProviderWidget) => {
+      /*
+       * These three are what the widget reads at render time. A dropped one
+       * does not fail to compile — the widget just stops offering the
+       * control, and the argument silently reads as undefined.
+       */
+      test("offers the title, row cap and view mode every one of these widgets has", () => {
+        for (const id of ["title", "maxRows", "viewMode"]) {
+          expect(argumentById(args, id)).toBeDefined();
+        }
+      });
+
+      test("view mode is a dropdown offering exactly list and honeycomb", () => {
+        const viewMode: AnyArgument = argumentById(args, "viewMode")!;
+
+        expect(viewMode.type).toBe(ComponentInputType.Dropdown);
+        expect(
+          (viewMode.dropdownOptions || []).map(
+            (option: { value: string | number | boolean }): unknown => {
+              return option.value;
+            },
+          ),
+        ).toEqual(["list", "honeycomb"]);
+      });
+
+      /*
+       * The one that cannot be caught by reading the file: a cluster filter
+       * pointed at another provider's model resolves ids against the wrong
+       * table, so the picker lists the wrong clusters and the widget matches
+       * nothing.
+       */
+      test("the cluster filter resolves against its own provider's clusters", () => {
+        const clusterFilter: AnyArgument | undefined = argumentById(
+          args,
+          clusterArgumentId,
+        );
+
+        expect(clusterFilter).toBeDefined();
+        expect(clusterFilter!.type).toBe(
+          ComponentInputType.EntityMultiSelectDropdown,
+        );
+        expect(clusterFilter!.entityFilterModelType).toBe(clusterEntityType);
+      });
+
+      /*
+       * Display holds what the widget looks like, Filters holds what it
+       * shows. An argument filed under the wrong one is not a crash, it just
+       * puts the control in a panel no operator thinks to open — and Filters
+       * starts collapsed, so a misfiled display control is invisible.
+       */
+      test("display controls and filters are filed in the right panels", () => {
+        for (const id of ["title", "maxRows", "viewMode"]) {
+          expect(argumentById(args, id)!.section).toBe(displaySection);
+        }
+
+        expect(argumentById(args, clusterArgumentId)!.section).toBe(
+          filtersSection,
+        );
+      });
+
+      test("Display is ordered ahead of Filters, which starts collapsed", () => {
+        expect(displaySection.order).toBeLessThan(filtersSection.order!);
+        expect(filtersSection.defaultCollapsed).toBe(true);
+      });
+
+      /*
+       * Ids are the keys the saved widget config is written under. A repeat
+       * would have two controls writing over each other.
+       */
+      test("no argument id is used twice", () => {
+        const ids: Array<string> = args.map((argument: AnyArgument): string => {
+          return argument.id as unknown as string;
+        });
+
+        expect(new Set(ids).size).toBe(ids.length);
+      });
+
+      /*
+       * Every one of these is optional: a required argument with no value
+       * blocks the widget from rendering at all, and an empty list widget
+       * showing everything is the intended default.
+       */
+      test("nothing is required, so a freshly added widget renders", () => {
+        for (const argument of args) {
+          expect(argument.required).toBe(false);
+        }
+      });
+    },
+  );
+
+  /*
+   * The point of the whole suite: the four are meant to be the same widget.
+   * Comparing them to each other catches a change made to one and not the
+   * rest, which is the way these files actually go wrong.
+   */
+  describe("the providers stay the same widget as each other", () => {
+    test("they expose the same arguments, in the same order", () => {
+      const shapes: Array<Array<string>> = WIDGETS.map(
+        (widget: ProviderWidget): Array<string> => {
+          return widget.args.map((argument: AnyArgument): string => {
+            const id: string = argument.id as unknown as string;
+
+            // The cluster filter is the one id that is legitimately per-provider.
+            return id === widget.clusterArgumentId
+              ? `clusterIds:${argument.type}`
+              : `${id}:${argument.type}`;
+          });
+        },
+      );
+
+      for (const shape of shapes) {
+        expect(shape).toEqual(shapes[0]);
+      }
+    });
+
+    test("each provider filters on its own cluster model, and no two share one", () => {
+      const entityTypes: Array<EntityFilterModelType> = WIDGETS.map(
+        (widget: ProviderWidget): EntityFilterModelType => {
+          return argumentById(widget.args, widget.clusterArgumentId)!
+            .entityFilterModelType!;
+        },
+      );
+
+      expect(new Set(entityTypes).size).toBe(WIDGETS.length);
+    });
+  });
+
+  /*
+   * Kubernetes is the one that differs, and it differs on request rather than
+   * always — the namespace filter is only meaningful for widgets listing
+   * namespaced objects.
+   */
+  describe("the Kubernetes namespace filter is opt-in", () => {
+    test("it is absent unless asked for", () => {
+      expect(
+        argumentById(
+          getKubernetesCommonArguments<DashboardBaseComponent>({
+            includeNamespaceFilter: false,
+          }),
+          "namespaces",
+        ),
+      ).toBeUndefined();
+    });
+
+    test("asking for it adds it to the filters panel, still optional", () => {
+      const namespaces: AnyArgument | undefined = argumentById(
+        getKubernetesCommonArguments<DashboardBaseComponent>({
+          includeNamespaceFilter: true,
+        }),
+        "namespaces",
+      );
+
+      expect(namespaces).toBeDefined();
+      expect(namespaces!.required).toBe(false);
+      expect(namespaces!.section).toBe(KubernetesFiltersSection);
+    });
+
+    /*
+     * Asking for the namespace filter must not disturb anything else — it is
+     * an addition, not a different widget.
+     */
+    test("it changes nothing else about the widget", () => {
+      const without: Array<string> =
+        getKubernetesCommonArguments<DashboardBaseComponent>({
+          includeNamespaceFilter: false,
+        }).map((argument: AnyArgument): string => {
+          return argument.id as unknown as string;
+        });
+
+      const with_: Array<string> =
+        getKubernetesCommonArguments<DashboardBaseComponent>({
+          includeNamespaceFilter: true,
+        })
+          .map((argument: AnyArgument): string => {
+            return argument.id as unknown as string;
+          })
+          .filter((id: string): boolean => {
+            return id !== "namespaces";
+          });
+
+      expect(with_).toEqual(without);
+    });
+  });
+});

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

@@ -0,0 +1,242 @@
+import { describe, expect, test } from "@jest/globals";
+import DashboardTimeRangeZoomUtil, {
+  DashboardTimeRangeZoomState,
+} from "../../../Utils/Dashboard/DashboardTimeRangeZoom";
+import InBetween from "../../../Types/BaseDatabase/InBetween";
+import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
+
+/*
+ * The state machine behind dashboard-wide drag-to-zoom. Its whole job is to
+ * make the gesture REVERSIBLE: a drag on any time-series panel retimes the
+ * whole board, and one double-click has to land back exactly where the
+ * investigation started — not one drag back, and not on "now".
+ *
+ * `baseline === null` is the contract the UI reads for "nothing to reset",
+ * so the no-op cases below are as load-bearing as the happy path: a stray
+ * double-click on an unzoomed board must not retime it, and must not even
+ * hand React a new object to re-render every widget over.
+ */
+
+const ROLLING_HOUR: RangeStartAndEndDateTime = {
+  range: TimeRange.PAST_ONE_HOUR,
+};
+
+const PINNED_DAY: RangeStartAndEndDateTime = {
+  range: TimeRange.CUSTOM,
+  startAndEndDate: new InBetween<Date>(
+    new Date("2026-08-20T00:00:00.000Z"),
+    new Date("2026-08-21T00:00:00.000Z"),
+  ),
+};
+
+const DRAG_START: Date = new Date("2026-08-20T09:20:00.000Z");
+const DRAG_END: Date = new Date("2026-08-20T09:35:00.000Z");
+const NARROWER_START: Date = new Date("2026-08-20T09:25:00.000Z");
+const NARROWER_END: Date = new Date("2026-08-20T09:27:00.000Z");
+
+describe("DashboardTimeRangeZoomUtil", () => {
+  describe("getInitialState", () => {
+    test("starts on the given range with nothing to reset", () => {
+      const state: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR);
+
+      expect(state.current).toBe(ROLLING_HOUR);
+      expect(state.baseline).toBeNull();
+      expect(DashboardTimeRangeZoomUtil.isZoomed(state)).toBe(false);
+    });
+  });
+
+  describe("zoomToWindow", () => {
+    test("pins the board to the dragged window and remembers the way back", () => {
+      const zoomed: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR),
+          DRAG_START,
+          DRAG_END,
+        );
+
+      expect(zoomed.current.range).toBe(TimeRange.CUSTOM);
+      expect(zoomed.current.startAndEndDate?.startValue).toEqual(DRAG_START);
+      expect(zoomed.current.startAndEndDate?.endValue).toEqual(DRAG_END);
+      expect(zoomed.baseline).toBe(ROLLING_HOUR);
+      expect(DashboardTimeRangeZoomUtil.isZoomed(zoomed)).toBe(true);
+    });
+
+    test("a right-to-left drag is the same window as left-to-right", () => {
+      const forward: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR),
+          DRAG_START,
+          DRAG_END,
+        );
+      const backward: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR),
+          DRAG_END,
+          DRAG_START,
+        );
+
+      expect(backward.current.startAndEndDate?.startValue).toEqual(
+        forward.current.startAndEndDate?.startValue,
+      );
+      expect(backward.current.startAndEndDate?.endValue).toEqual(
+        forward.current.startAndEndDate?.endValue,
+      );
+    });
+
+    test("zooming again keeps the ORIGINAL baseline, so one reset gets all the way out", () => {
+      const once: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR),
+          DRAG_START,
+          DRAG_END,
+        );
+      const twice: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          once,
+          NARROWER_START,
+          NARROWER_END,
+        );
+
+      expect(twice.current.startAndEndDate?.startValue).toEqual(NARROWER_START);
+      // NOT `once.current` — a reader should not have to climb out a drag at a time.
+      expect(twice.baseline).toBe(ROLLING_HOUR);
+
+      const reset: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.resetZoom(twice);
+      expect(reset.current).toBe(ROLLING_HOUR);
+      expect(reset.baseline).toBeNull();
+    });
+
+    test("a zero-width selection changes nothing at all", () => {
+      const state: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR);
+
+      /*
+       * The chart library can hand back start === end when a drag never
+       * leaves its starting bucket. Same reference back, so no widget
+       * re-renders and no refetch is spent.
+       */
+      expect(
+        DashboardTimeRangeZoomUtil.zoomToWindow(state, DRAG_START, DRAG_START),
+      ).toBe(state);
+    });
+
+    test("an invalid date changes nothing at all", () => {
+      const state: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR);
+
+      expect(
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          state,
+          new Date("not-a-date"),
+          DRAG_END,
+        ),
+      ).toBe(state);
+      expect(
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          state,
+          DRAG_START,
+          new Date("not-a-date"),
+        ),
+      ).toBe(state);
+      expect(
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          state,
+          null as unknown as Date,
+          DRAG_END,
+        ),
+      ).toBe(state);
+    });
+
+    test("the stored window is a copy — mutating the dragged dates cannot move the board", () => {
+      const dragStart: Date = new Date(DRAG_START.getTime());
+      const zoomed: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR),
+          dragStart,
+          DRAG_END,
+        );
+
+      dragStart.setFullYear(1999);
+
+      expect(zoomed.current.startAndEndDate?.startValue).toEqual(DRAG_START);
+    });
+  });
+
+  describe("resetZoom", () => {
+    test("restores the range the board had before the first drag", () => {
+      const zoomed: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          DashboardTimeRangeZoomUtil.getInitialState(PINNED_DAY),
+          DRAG_START,
+          DRAG_END,
+        );
+
+      const reset: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.resetZoom(zoomed);
+
+      expect(reset.current).toBe(PINNED_DAY);
+      expect(reset.baseline).toBeNull();
+      expect(DashboardTimeRangeZoomUtil.isZoomed(reset)).toBe(false);
+    });
+
+    test("is a true no-op when nothing is zoomed", () => {
+      const state: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR);
+
+      // Same reference: a stray double-click cannot even cost a render.
+      expect(DashboardTimeRangeZoomUtil.resetZoom(state)).toBe(state);
+    });
+
+    test("a second reset does not keep unwinding", () => {
+      const zoomed: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR),
+          DRAG_START,
+          DRAG_END,
+        );
+      const once: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.resetZoom(zoomed);
+
+      expect(DashboardTimeRangeZoomUtil.resetZoom(once)).toBe(once);
+    });
+  });
+
+  describe("selectRange", () => {
+    test("an explicit pick becomes the new baseline and retires the reset", () => {
+      const zoomed: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(
+          DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR),
+          DRAG_START,
+          DRAG_END,
+        );
+
+      const picked: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.selectRange(zoomed, PINNED_DAY);
+
+      expect(picked.current).toBe(PINNED_DAY);
+      /*
+       * The picker is not an undo stack: offering to jump back to a range
+       * the user has deliberately left is worse than offering nothing.
+       */
+      expect(picked.baseline).toBeNull();
+      expect(DashboardTimeRangeZoomUtil.isZoomed(picked)).toBe(false);
+    });
+
+    test("picking then zooming makes the PICKED range the way back", () => {
+      const picked: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.selectRange(
+          DashboardTimeRangeZoomUtil.getInitialState(ROLLING_HOUR),
+          PINNED_DAY,
+        );
+      const zoomed: DashboardTimeRangeZoomState =
+        DashboardTimeRangeZoomUtil.zoomToWindow(picked, DRAG_START, DRAG_END);
+
+      expect(DashboardTimeRangeZoomUtil.resetZoom(zoomed).current).toBe(
+        PINNED_DAY,
+      );
+    });
+  });
+});