@oneuptime/common 13.0.7 → 13.0.8

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

@@ -424,18 +424,22 @@ describe("DashboardVariableSelector", () => {
 
     test("a default the attribute no longer reports does not select some other value", async () => {
       /*
-       * The attribute stopped reporting "prod" in this time range. There is no
-       * option to select, so the control lands on "All" — the point being that
-       * it does not silently scope the board to a different cluster.
+       * The attribute stopped reporting "prod" in this time range. The
+       * widgets still filter by "prod", so the control shows "prod" rather
+       * than scoping the board to a different cluster, or reading "All".
        */
       getTelemetryAttributeValuesMock.mockResolvedValue(["staging"]);
 
-      renderToolbar([telemetryVariable({ defaultValue: "prod" })]);
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "prod" }),
+      ]);
 
       const select: HTMLSelectElement = await waitForOptions();
 
-      expect(optionLabels(select)).toEqual(["All", "staging"]);
-      expect(select).toHaveValue("");
+      expect(optionLabels(select)).toEqual(["All", "prod", "staging"]);
+      expect(select).toHaveValue("prod");
+      expect(select).toHaveDisplayValue("prod");
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ scalar: "prod" });
     });
   });
 
@@ -477,12 +481,29 @@ describe("DashboardVariableSelector", () => {
       expect(getSelect()).toHaveValue("prod");
     });
 
-    test('a failed fetch leaves the control usable and on "All"', async () => {
+    test("a failed fetch leaves the control usable and still showing the default", async () => {
       getTelemetryAttributeValuesMock.mockRejectedValue(
         new Error("attribute values unavailable"),
       );
 
-      renderToolbar([telemetryVariable({ defaultValue: "prod" })]);
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "prod" }),
+      ]);
+
+      const select: HTMLSelectElement = await waitForOptions();
+
+      // No values came back, but the widgets are still filtered by "prod".
+      expect(optionLabels(select)).toEqual(["All", "prod"]);
+      expect(select).toHaveDisplayValue("prod");
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ scalar: "prod" });
+    });
+
+    test("a failed fetch with no default or selection stays on All", async () => {
+      getTelemetryAttributeValuesMock.mockRejectedValue(
+        new Error("attribute values unavailable"),
+      );
+
+      renderToolbar([telemetryVariable({})]);
 
       const select: HTMLSelectElement = await waitForOptions();
 
@@ -491,6 +512,139 @@ describe("DashboardVariableSelector", () => {
     });
   });
 
+  describe("a value missing from the fetched options", () => {
+    /*
+     * The option list is not every value the attribute has: the server
+     * returns the first 100 in ascending order, from the last day only. A
+     * variable's default is free text, and a selection can come from the URL,
+     * so the value in effect can be missing from the list and still match
+     * data. The widgets filter by it regardless. The select used to have no
+     * option for it, so the browser showed the first one, "All", over widgets
+     * that were filtered.
+     */
+    const FIRST_HUNDRED: Array<string> = Array.from(
+      { length: 100 },
+      (_unused: unknown, index: number): string => {
+        return `cluster-${String(index).padStart(3, "0")}`;
+      },
+    );
+
+    test("a default past the first 100 values reads as itself, not All", async () => {
+      getTelemetryAttributeValuesMock.mockResolvedValue(FIRST_HUNDRED);
+
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "zeta" }),
+      ]);
+
+      const select: HTMLSelectElement = await waitForOptions();
+
+      expect(select).toHaveValue("zeta");
+      expect(select).toHaveDisplayValue("zeta");
+      expect(optionLabels(select)).toEqual(["All", "zeta", ...FIRST_HUNDRED]);
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ scalar: "zeta" });
+      expect(
+        DashboardVariableInterpolation.applyToAttributes({}, state.variables),
+      ).toEqual({ [ATTRIBUTE_KEY]: "zeta" });
+    });
+
+    test("a selection missing from the options reads as itself", async () => {
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "prod", selectedValue: "zeta" }),
+      ]);
+
+      const select: HTMLSelectElement = await waitForOptions();
+
+      expect(select).toHaveValue("zeta");
+      expect(select).toHaveDisplayValue("zeta");
+      expect(optionLabels(select)).toEqual(["All", "zeta", "prod", "staging"]);
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ scalar: "zeta" });
+    });
+
+    test("a listed value is not offered twice", async () => {
+      renderToolbar([telemetryVariable({ defaultValue: "staging" })]);
+
+      const select: HTMLSelectElement = await waitForOptions();
+
+      expect(optionLabels(select)).toEqual(["All", "prod", "staging"]);
+      expect(select).toHaveDisplayValue("staging");
+    });
+
+    test("the extra option goes away once the user picks something else", async () => {
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ defaultValue: "zeta" }),
+      ]);
+
+      selectValue(await waitForOptions(), "staging");
+
+      expect(getSelect()).toHaveDisplayValue("staging");
+      expect(optionLabels(getSelect())).toEqual(["All", "prod", "staging"]);
+      expect(resolvedFilter(state.variables[0]!)).toEqual({
+        scalar: "staging",
+      });
+
+      selectValue(getSelect(), "");
+
+      expect(getSelect()).toHaveDisplayValue("All");
+      expect(optionLabels(getSelect())).toEqual(["All", "prod", "staging"]);
+      expect(resolvedFilter(state.variables[0]!)).toBeUndefined();
+    });
+
+    test("while values load it still reads Loading…, not the value", async () => {
+      let releaseValues: (values: Array<string>) => void = (): void => {
+        // Replaced synchronously by the executor below.
+      };
+
+      getTelemetryAttributeValuesMock.mockImplementation((): unknown => {
+        return new Promise<Array<string>>(
+          (resolve: (values: Array<string>) => void): void => {
+            releaseValues = resolve;
+          },
+        );
+      });
+
+      renderToolbar([telemetryVariable({ defaultValue: "zeta" })]);
+
+      expect(optionLabels(getSelect())).toEqual(["Loading…"]);
+
+      await act(async (): Promise<void> => {
+        releaseValues(OPTIONS);
+      });
+
+      expect(optionLabels(getSelect())).toEqual([
+        "All",
+        "zeta",
+        "prod",
+        "staging",
+      ]);
+      expect(getSelect()).toHaveDisplayValue("zeta");
+    });
+
+    test("a multi-select keeps and names a picked value the options do not list", async () => {
+      const state: ToolbarState = renderToolbar([
+        telemetryVariable({ isMultiSelect: true, selectedValues: ["zeta"] }),
+      ]);
+
+      await waitFor((): void => {
+        expect(screen.getByRole("button")).not.toBeDisabled();
+      });
+
+      expect(screen.getByRole("button")).toHaveTextContent("zeta");
+      expect(resolvedFilter(state.variables[0]!)).toEqual({ multi: ["zeta"] });
+
+      fireEvent.click(screen.getByRole("button"));
+      fireEvent.click(screen.getByRole("checkbox", { name: "staging" }));
+
+      // Ticking a listed value adds to the selection; "zeta" is not dropped.
+      expect(state.variables[0]!.selectedValues).toEqual(["zeta", "staging"]);
+      expect(
+        screen.getByRole("button", { name: "Cluster: 2 selected" }),
+      ).toBeInTheDocument();
+      expect(resolvedFilter(state.variables[0]!)).toEqual({
+        multi: ["zeta", "staging"],
+      });
+    });
+  });
+
   describe("custom list variables", () => {
     test("options come from the comma-separated list, trimmed", () => {
       renderToolbar([customListVariable({ defaultValue: "eu-west-1" })]);

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

@@ -21,7 +21,10 @@ import ObjectID from "../../../Types/ObjectID";
  * selected: a blank picker over a live selection is how that selection gets
  * silently dropped on the next edit. So the picker lists only live SLOs and,
  * separately, looks up any selected SLO that list is missing, showing it marked
- * "(archived)". Every other entity type is untouched.
+ * "(archived)" - but only when it really is archived: a live SLO can be missing
+ * from the list just by sitting past its 1000-row cap. Only SLOs narrow the
+ * list; the by-id lookup itself is shared with every entity type (see
+ * EntityFilterDropdownUnlistedSelection.test.tsx).
  */
 
 interface ListArgs {
@@ -36,6 +39,7 @@ interface ListArgs {
 interface Row {
   _id: string;
   name: string;
+  isArchived?: boolean | undefined;
 }
 
 interface ListResultShape {
@@ -106,11 +110,20 @@ import ServiceLevelObjective from "../../../Models/DatabaseModels/ServiceLevelOb
 const LIVE_SLO: Row = {
   _id: "0193c0de-7777-4aaa-8bbb-000000000101",
   name: "Checkout availability",
+  isArchived: false,
 };
 
 const ARCHIVED_SLO: Row = {
   _id: "0193c0de-7777-4aaa-8bbb-000000000102",
   name: "Legacy search latency",
+  isArchived: true,
+};
+
+// Live, but past the list's 1000-row cap in a project with many SLOs.
+const LIVE_SLO_PAST_CAP: Row = {
+  _id: "0193c0de-7777-4aaa-8bbb-000000000103",
+  name: "Zeta payments latency",
+  isArchived: false,
 };
 
 function listOf(rows: Array<Row>): Promise<ListResultShape> {
@@ -124,8 +137,8 @@ function listOf(rows: Array<Row>): Promise<ListResultShape> {
 
 /*
  * The server as the picker sees it: the pickable list returns only the live
- * SLO, and a lookup by id returns whichever SLOs were asked for, archived or
- * not.
+ * SLO within its cap, and a lookup by id returns whichever SLOs were asked
+ * for, archived or not - carrying isArchived only if the lookup selected it.
  */
 function serveSlos(args: ListArgs): Promise<ListResultShape> {
   const idFilter: unknown = args.query["_id"];
@@ -138,9 +151,15 @@ function serveSlos(args: ListArgs): Promise<ListResultShape> {
     );
 
     return listOf(
-      [LIVE_SLO, ARCHIVED_SLO].filter((row: Row): boolean => {
-        return ids.includes(row._id);
-      }),
+      [LIVE_SLO, ARCHIVED_SLO, LIVE_SLO_PAST_CAP]
+        .filter((row: Row): boolean => {
+          return ids.includes(row._id);
+        })
+        .map((row: Row): Row => {
+          return args.select["isArchived"]
+            ? row
+            : { _id: row._id, name: row.name };
+        }),
     );
   }
 
@@ -151,12 +170,14 @@ function renderPicker(options: {
   type: EntityFilterModelType;
   isMultiSelect?: boolean | undefined;
   value?: string | Array<string> | undefined;
+  placeholder?: string | undefined;
 }): void {
   render(
     <EntityFilterDropdown
       entityFilterModelType={options.type}
       isMultiSelect={Boolean(options.isMultiSelect)}
       value={options.value}
+      placeholder={options.placeholder}
       onChange={() => {
         return undefined;
       }}
@@ -228,6 +249,8 @@ describe("EntityFilterDropdown and archived SLOs", () => {
       ),
     ).toEqual([ARCHIVED_SLO._id]);
     expect(lookup.limit).toBe(1);
+    // Fetches isArchived, so the marker is earned rather than assumed.
+    expect(lookup.select).toEqual({ isArchived: true, _id: true, name: true });
   });
 
   test("in a multi-select, looks up only the selected SLOs the live list is missing", async () => {
@@ -306,6 +329,82 @@ describe("EntityFilterDropdown and archived SLOs", () => {
     expect(getListMock).toHaveBeenCalledTimes(1);
   });
 
+  test("a live SLO past the list's row cap is shown by name, not marked archived", async () => {
+    renderPicker({
+      type: EntityFilterModelType.ServiceLevelObjective,
+      value: LIVE_SLO_PAST_CAP._id,
+      placeholder: "All SLOs",
+    });
+
+    expect(
+      await screen.findByText("Zeta payments latency"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/\(archived\)/)).not.toBeInTheDocument();
+    expect(screen.queryByText("All SLOs")).not.toBeInTheDocument();
+
+    expect(getListMock).toHaveBeenCalledTimes(2);
+    expect(
+      ((listCall(1).query["_id"] as Includes).values as Array<ObjectID>).map(
+        (id: ObjectID): string => {
+          return id.toString();
+        },
+      ),
+    ).toEqual([LIVE_SLO_PAST_CAP._id]);
+  });
+
+  test("in a multi-select, marks only the archived one of two unlisted SLOs", async () => {
+    renderPicker({
+      type: EntityFilterModelType.ServiceLevelObjective,
+      isMultiSelect: true,
+      value: [LIVE_SLO._id, LIVE_SLO_PAST_CAP._id, ARCHIVED_SLO._id],
+    });
+
+    expect(
+      await screen.findByRole("button", {
+        name: "Remove Legacy search latency (archived)",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove Zeta payments latency" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Remove Checkout availability" }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Zeta payments latency (archived)"),
+    ).not.toBeInTheDocument();
+
+    expect(getListMock).toHaveBeenCalledTimes(2);
+    expect(
+      ((listCall(1).query["_id"] as Includes).values as Array<ObjectID>)
+        .map((id: ObjectID): string => {
+          return id.toString();
+        })
+        .sort(),
+    ).toEqual([ARCHIVED_SLO._id, LIVE_SLO_PAST_CAP._id].sort());
+  });
+
+  test("does not mark an SLO archived when the lookup cannot tell", async () => {
+    getListMock.mockImplementation((args: ListArgs) => {
+      if (args.query["_id"]) {
+        // e.g. the field came back unreadable: no isArchived on the row.
+        return listOf([{ _id: ARCHIVED_SLO._id, name: ARCHIVED_SLO.name }]);
+      }
+
+      return listOf([LIVE_SLO]);
+    });
+
+    renderPicker({
+      type: EntityFilterModelType.ServiceLevelObjective,
+      value: ARCHIVED_SLO._id,
+    });
+
+    expect(
+      await screen.findByText("Legacy search latency"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/\(archived\)/)).not.toBeInTheDocument();
+  });
+
   test("a failed lookup of the stale selection leaves the picker working", async () => {
     getListMock.mockImplementation((args: ListArgs) => {
       if (args.query["_id"]) {