@oneuptime/common 14.0.3 → 14.0.6

package/Tests/App/Dashboard/TelemetryMetricsSignals.test.ts

@@ -72,6 +72,7 @@ import {
   fetchLogAndExceptionSignals,
   fetchSpanMetrics,
   fetchSpanNameStats,
+  fetchWebVitalByRoute,
   fetchWebVitals,
   formatBytes as reexportedFormatBytes,
   formatCompact as reexportedFormatCompact,
@@ -84,7 +85,9 @@ import {
   spanNameStatsFromTableRows,
   summarizeLogAndExceptionBuckets,
   TimePoint,
+  WEB_VITAL_ROUTE_LIMIT,
   WebVital,
+  WebVitalByRoute,
 } from "../../../../App/FeatureSet/Dashboard/src/Components/TelemetryResource/telemetryMetrics";
 import {
   formatBytes,
@@ -98,11 +101,13 @@ import URL from "../../../Types/API/URL";
 import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import AggregationType from "../../../Types/BaseDatabase/AggregationType";
+import AggregationInterval from "../../../Types/BaseDatabase/AggregationInterval";
 import InBetween from "../../../Types/BaseDatabase/InBetween";
 import { SpanStatus } from "../../../Models/AnalyticsModels/Span";
 import {
   WebVitalDefinition,
   WebVitalDefinitions,
+  WebVitalRouteAttributeKeys,
 } from "../../../Types/Rum/WebVitals";
 import { APP_API_URL } from "../../../UI/Config";
 
@@ -126,10 +131,13 @@ interface AggregateRequest {
   aggregateBy: {
     query: Record<string, unknown>;
     aggregationType: AggregationType;
+    aggregationInterval?: AggregationInterval;
     aggregateColumnName: string;
     aggregationTimestampColumnName: string;
     startTimestamp: Date;
     endTimestamp: Date;
+    groupByAttributeKeys?: Array<string>;
+    topK?: { count: number; rankBy: string };
   };
 }
 
@@ -1072,6 +1080,7 @@ describe("fetchWebVitals", () => {
         value: null,
         unit: d.unit,
         thresholds: d.thresholds,
+        metricName: null,
       });
       expect(v.description.length).toBeGreaterThan(20);
     });
@@ -1086,12 +1095,7 @@ describe("fetchWebVitals", () => {
       ];
 
       if (name === second) {
-        return {
-          data: [
-            { time: T0, value: 1000 },
-            { time: T1, value: 3000 },
-          ],
-        };
+        return { data: [{ time: T0, value: 2000 }] };
       }
 
       return { data: [] };
@@ -1107,8 +1111,9 @@ describe("fetchWebVitals", () => {
       return v.key === "lcp";
     })!;
 
-    // The average of the per-interval averages.
+    // The one whole-range mean, and the name it was found under.
     expect(lcp.value).toBe(2000);
+    expect(lcp.metricName).toBe(second);
     expect(lcp.description).toBe(LCP.description);
 
     const asked: Array<string> = metricNames();
@@ -1119,7 +1124,13 @@ describe("fetchWebVitals", () => {
     }
   });
 
-  test("averages, scoped to the entity and window", async () => {
+  /*
+   * A mean of the whole range at once - not a mean of per-interval means,
+   * which let a quiet interval count as much as a busy one. A mean rather
+   * than a p75 because a histogram's percentile comes from its buckets,
+   * and the OpenTelemetry defaults put every CLS value in (0, 5].
+   */
+  test("asks for one mean over the whole window, scoped to the entity", async () => {
     aggregateMock.mockResolvedValue({ data: [] });
 
     await fetchWebVitals({
@@ -1130,6 +1141,7 @@ describe("fetchWebVitals", () => {
 
     for (const r of aggregateRequests()) {
       expect(r.aggregateBy.aggregationType).toBe(AggregationType.Avg);
+      expect(r.aggregateBy.aggregationInterval).toBe(AggregationInterval.Total);
       expect(String(r.aggregateBy.query["primaryEntityId"])).toBe(ENTITY_ID);
       expect(r.aggregateBy.startTimestamp).toBe(START);
       expect(r.aggregateBy.endTimestamp).toBe(END);
@@ -1137,6 +1149,154 @@ describe("fetchWebVitals", () => {
   });
 });
 
+describe("fetchWebVitalByRoute", () => {
+  const INP_NAME: string = "web_vital.inp";
+
+  function ask(): Promise<WebVitalByRoute> {
+    return fetchWebVitalByRoute({
+      primaryEntityId: new ObjectID(ENTITY_ID),
+      metricName: INP_NAME,
+      start: START,
+      end: END,
+    });
+  }
+
+  function routeRow(
+    key: string,
+    route: string | undefined,
+    value: number,
+  ): Record<string, unknown> {
+    return {
+      time: T0,
+      value: value,
+      attributes: route === undefined ? {} : { [key]: route },
+    };
+  }
+
+  test("asks for the mean of this metric per route over the whole window, top routes only", async () => {
+    aggregateMock.mockResolvedValue({ data: [] });
+
+    await ask();
+
+    const [first] = aggregateRequests();
+
+    expect(first?.aggregateBy.query["name"]).toBe(INP_NAME);
+    expect(String(first?.aggregateBy.query["primaryEntityId"])).toBe(ENTITY_ID);
+    expect(String(first?.aggregateBy.query["projectId"])).toBe(PROJECT_ID);
+    expect(first?.aggregateBy.aggregationType).toBe(AggregationType.Avg);
+    expect(first?.aggregateBy.aggregationInterval).toBe(
+      AggregationInterval.Total,
+    );
+    expect(first?.aggregateBy.groupByAttributeKeys).toEqual(["app.route"]);
+    // One spare slot for the pooled rows that carry no route at all.
+    expect(first?.aggregateBy.topK).toEqual({
+      count: WEB_VITAL_ROUTE_LIMIT + 1,
+      rankBy: "max",
+    });
+  });
+
+  test("returns the routes slowest first, leaving out rows without a route", async () => {
+    aggregateMock.mockResolvedValue({
+      data: [
+        routeRow("app.route", "/cart", 240),
+        routeRow("app.route", undefined, 900),
+        routeRow("app.route", "  ", 800),
+        routeRow("app.route", "/products/:id", 620),
+      ],
+      totalGroups: 5,
+    });
+
+    const result: WebVitalByRoute = await ask();
+
+    expect(result).toEqual({
+      routeAttribute: "app.route",
+      routes: [
+        { route: "/products/:id", value: 620 },
+        { route: "/cart", value: 240 },
+      ],
+      // Five groups, one of them the blank no-route group.
+      totalRoutes: 4,
+      failed: false,
+    });
+  });
+
+  test("falls back to url.template, OpenTelemetry's name for the route", async () => {
+    aggregateMock.mockImplementation(async (...args: Array<unknown>) => {
+      const keys: Array<string> =
+        (args[0] as AggregateRequest).aggregateBy.groupByAttributeKeys || [];
+
+      if (keys[0] === "url.template") {
+        return { data: [routeRow("url.template", "/orders/{id}", 310)] };
+      }
+
+      return { data: [routeRow("app.route", undefined, 310)] };
+    });
+
+    const result: WebVitalByRoute = await ask();
+
+    expect(
+      aggregateRequests().map((r: AggregateRequest): unknown => {
+        return r.aggregateBy.groupByAttributeKeys;
+      }),
+    ).toEqual(
+      WebVitalRouteAttributeKeys.map((key: string): Array<string> => {
+        return [key];
+      }),
+    );
+    expect(result.routeAttribute).toBe("url.template");
+    expect(result.routes).toEqual([{ route: "/orders/{id}", value: 310 }]);
+    expect(result.totalRoutes).toBeNull();
+  });
+
+  test("keeps at most the route limit", async () => {
+    aggregateMock.mockResolvedValue({
+      data: Array.from(
+        { length: WEB_VITAL_ROUTE_LIMIT + 1 },
+        (_: unknown, i: number) => {
+          return routeRow("app.route", `/r${i}`, 100 + i);
+        },
+      ),
+    });
+
+    const result: WebVitalByRoute = await ask();
+
+    expect(result.routes).toHaveLength(WEB_VITAL_ROUTE_LIMIT);
+    expect(result.routes[0]?.value).toBe(100 + WEB_VITAL_ROUTE_LIMIT);
+  });
+
+  test("no route under any attribute is an empty answer, not a failure", async () => {
+    aggregateMock.mockResolvedValue({ data: [] });
+
+    expect(await ask()).toEqual({
+      routeAttribute: null,
+      routes: [],
+      totalRoutes: null,
+      failed: false,
+    });
+    expect(aggregateMock).toHaveBeenCalledTimes(
+      WebVitalRouteAttributeKeys.length,
+    );
+  });
+
+  test("a failed lookup is marked failed rather than read as no routes", async () => {
+    aggregateMock.mockRejectedValue(new Error("403"));
+
+    const result: WebVitalByRoute = await ask();
+
+    expect(result.failed).toBe(true);
+    expect(result.routes).toEqual([]);
+  });
+
+  test("no current project: returns empty without asking", async () => {
+    projectIdMock.mockReturnValue(null);
+
+    const result: WebVitalByRoute = await ask();
+
+    expect(result.failed).toBe(false);
+    expect(aggregateMock).not.toHaveBeenCalled();
+  });
+});
+
 describe("telemetryFormat", () => {
   test.each([
     [null, "—"],

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

@@ -23,6 +23,7 @@ import CloudSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Cloud/
 import PageComponentProps from "../../../../App/FeatureSet/Dashboard/src/Pages/PageComponentProps";
 import RumSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Rum/View/Settings";
 import ServerlessSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Serverless/View/Settings";
+import DatabaseServerSettings from "../../../../App/FeatureSet/Dashboard/src/Pages/Database/View/Settings";
 import PageMap from "../../../../App/FeatureSet/Dashboard/src/Utils/PageMap";
 import RouteMap, {
   RouteUtil,
@@ -32,6 +33,7 @@ import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/Database
 import CloudResource from "../../../Models/DatabaseModels/CloudResource";
 import RumApplication from "../../../Models/DatabaseModels/RumApplication";
 import ServerlessFunction from "../../../Models/DatabaseModels/ServerlessFunction";
+import DatabaseServer from "../../../Models/DatabaseModels/DatabaseServer";
 import Route from "../../../Types/API/Route";
 import { JSONObject } from "../../../Types/JSON";
 import LogSeverity from "../../../Types/Log/LogSeverity";
@@ -195,6 +197,14 @@ const RESOURCES: Array<ResourceSettingsCase> = [
     detailIdPrefix: "serverless-function",
     hasSessionReplayRetention: false,
   },
+  {
+    name: "database",
+    Page: DatabaseServerSettings,
+    modelType: DatabaseServer,
+    settingsKey: PageMap.DATABASE_SERVER_VIEW_SETTINGS,
+    detailIdPrefix: "database-server",
+    hasSessionReplayRetention: false,
+  },
 ];
 
 let storedModel: BaseModel;

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

@@ -355,7 +355,7 @@ describe("TracesViewer — a facet for every resource type", () => {
       "resource.host.name",
     ]);
 
-    // The eight types that used to be missing are all asked for.
+    // The types beyond the original four (Databases included) are all asked for.
     for (const key of [
       "dockerSwarmClusterId",
       "proxmoxClusterId",
@@ -365,6 +365,7 @@ describe("TracesViewer — a facet for every resource type", () => {
       "cloudResourceId",
       "rumApplicationId",
       "iotFleetId",
+      "databaseServerId",
     ]) {
       expect(facetKeys).toContain(key);
     }

package/Tests/App/StatusPage/StatusPageHeaderForeignHiddenRule.test.tsx

@@ -0,0 +1,284 @@
+import "@testing-library/jest-dom";
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  test,
+} from "@jest/globals";
+import { act, cleanup, render, screen } from "@testing-library/react";
+import { createInstance, i18n } from "i18next";
+import React from "react";
+import { I18nextProvider, initReactI18next } from "react-i18next";
+import URL from "../../../Types/API/URL";
+import Link from "../../../Types/Link";
+import {
+  LAPTOP_WIDTH_IN_PX,
+  PHONE_WIDTH_IN_PX,
+  TABLET_WIDTH_IN_PX,
+  TAILWIND_BREAKPOINTS_IN_PX,
+  VisibilityOptions,
+  WIDE_DESKTOP_WIDTH_IN_PX,
+  describeVisibility,
+  isVisibleAtWidth,
+  restorePreFixMarkup,
+} from "../../ResponsiveVisibility";
+import StatusPageHeader from "../../../../App/FeatureSet/StatusPage/src/Components/Header/Header";
+import StatusPageNavBar from "../../../../App/FeatureSet/StatusPage/src/Components/NavBar/NavBar";
+import englishLocale from "../../../../App/FeatureSet/StatusPage/src/Locales/en.json";
+
+/*
+ * A status page's header links and nav bar under a foreign
+ * `.hidden { display: none !important }`.
+ *
+ * The dashboard lost its navigation bar to that rule: Bootstrap 3 and HTML5
+ * Boilerplate define it, and browser extensions and user stylesheets inject it
+ * into every page. Status pages are read by our customers' own customers, on
+ * browsers we know even less about, and both rows here were hidden the same
+ * way — `hidden md:flex` — so the rule matched the bare class, outranked
+ * `md:flex`, and took the header links and every nav entry (Incidents,
+ * Subscribe, Log Out on a private page) off a desktop screen. A visitor
+ * checking on an outage was left with the overview and no way to the incident
+ * history.
+ *
+ * Both rows now use `max-md:hidden md:flex`: the same paint on a clean page,
+ * without the class the rule targets. Each group ends with a control that
+ * puts the old class strings back on the rendered markup and shows the same
+ * assertion failing.
+ */
+
+const translation: i18n = createInstance();
+
+const WITH_FOREIGN_HIDDEN_RULE: VisibilityOptions = {
+  withForeignHiddenRule: true,
+};
+
+const MD_WIDTH_IN_PX: number = TAILWIND_BREAKPOINTS_IN_PX["md"]!;
+
+// From md up both rows are meant to be on screen.
+const DESKTOP_WIDTHS_IN_PX: Array<number> = [
+  TABLET_WIDTH_IN_PX,
+  LAPTOP_WIDTH_IN_PX,
+  WIDE_DESKTOP_WIDTH_IN_PX,
+];
+
+// Below md both rows fold behind a menu button.
+const PHONE_WIDTHS_IN_PX: Array<number> = [
+  PHONE_WIDTH_IN_PX,
+  MD_WIDTH_IN_PX - 1,
+];
+
+// The kind of links a status page owner puts in the header.
+const HEADER_LINKS: Array<Link> = [
+  { title: "Website", to: URL.fromString("https://example.com") },
+  {
+    title: "Support",
+    to: URL.fromString("https://example.com/support"),
+    openInNewTab: true,
+  },
+];
+
+// Every entry a private page with subscriptions and history shows.
+const NAV_ENTRIES: Array<string> = [
+  "Overview",
+  "Incidents",
+  "Announcements",
+  "Scheduled Events",
+  "Subscribe",
+  "Log Out",
+];
+
+type VisibleWithRuleFunction = (width: number) => string;
+
+// What describeVisibility says about an element the rule leaves alone.
+const visibleWithRule: VisibleWithRuleFunction = (width: number): string => {
+  return `visible at ${width}px with a foreign .hidden rule on the page`;
+};
+
+type RenderFunction = () => Promise<void>;
+
+const renderHeader: RenderFunction = async (): Promise<void> => {
+  await act(async () => {
+    render(<StatusPageHeader links={HEADER_LINKS} onLogoClicked={() => {}} />);
+  });
+};
+
+const renderNavBar: RenderFunction = async (): Promise<void> => {
+  await act(async () => {
+    render(
+      <I18nextProvider i18n={translation}>
+        <StatusPageNavBar
+          show={true}
+          isPreview={false}
+          isPrivateStatusPage={true}
+          enableEmailSubscribers={true}
+          enableSMSSubscribers={false}
+          showIncidentsOnStatusPage={true}
+          showAnnouncementsOnStatusPage={true}
+          showScheduledMaintenanceEventsOnStatusPage={true}
+          showSubscriberPageOnStatusPage={true}
+        />
+      </I18nextProvider>,
+    );
+  });
+};
+
+type GetElementFunction = (name: string) => HTMLElement;
+
+// The desktop copies are links; the phone bar's active entry is a button.
+const getLink: GetElementFunction = (name: string): HTMLElement => {
+  return screen.getByRole("link", { name });
+};
+
+beforeAll(async () => {
+  await translation.use(initReactI18next).init({
+    lng: "en",
+    fallbackLng: "en",
+    resources: {
+      en: { translation: englishLocale },
+    },
+    interpolation: { escapeValue: false },
+  });
+});
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  window.localStorage.clear();
+});
+
+describe("status page header links with a foreign .hidden rule on the page", () => {
+  test.each(DESKTOP_WIDTHS_IN_PX)(
+    "at %ipx every header link is on screen with the rule",
+    async (width: number) => {
+      await renderHeader();
+
+      for (const link of HEADER_LINKS) {
+        expect(
+          describeVisibility(
+            getLink(link.title),
+            width,
+            WITH_FOREIGN_HIDDEN_RULE,
+          ),
+        ).toBe(visibleWithRule(width));
+      }
+    },
+  );
+
+  test("below md they fold behind the menu button, which the rule leaves alone", async () => {
+    await renderHeader();
+
+    for (const width of PHONE_WIDTHS_IN_PX) {
+      for (const link of HEADER_LINKS) {
+        expect(
+          isVisibleAtWidth(
+            getLink(link.title),
+            width,
+            WITH_FOREIGN_HIDDEN_RULE,
+          ),
+        ).toBe(false);
+      }
+
+      // `md:hidden` is a breakpoint class, not the bare one the rule matches.
+      expect(
+        describeVisibility(
+          screen.getByTestId("mobile-header-toggle"),
+          width,
+          WITH_FOREIGN_HIDDEN_RULE,
+        ),
+      ).toBe(visibleWithRule(width));
+    }
+  });
+
+  test("control: with the pre-fix `hidden md:flex` put back, the links vanish at 1917px", async () => {
+    await renderHeader();
+
+    restorePreFixMarkup();
+
+    for (const link of HEADER_LINKS) {
+      expect(
+        describeVisibility(
+          getLink(link.title),
+          WIDE_DESKTOP_WIDTH_IN_PX,
+          WITH_FOREIGN_HIDDEN_RULE,
+        ),
+      ).toBe(
+        'hidden at 1917px with a foreign .hidden rule on the page by <div class="hidden md:flex md:items-center md:gap-5">',
+      );
+
+      // On a clean page the old row was fine, which is why nobody saw it.
+      expect(
+        isVisibleAtWidth(getLink(link.title), WIDE_DESKTOP_WIDTH_IN_PX),
+      ).toBe(true);
+    }
+  });
+});
+
+describe("status page nav bar with a foreign .hidden rule on the page", () => {
+  test.each(DESKTOP_WIDTHS_IN_PX)(
+    "at %ipx every nav entry is on screen with the rule",
+    async (width: number) => {
+      await renderNavBar();
+
+      // One line per entry, so a failure names the entry and what hid it.
+      expect(
+        NAV_ENTRIES.map((name: string): string => {
+          return `${name}: ${describeVisibility(
+            getLink(name),
+            width,
+            WITH_FOREIGN_HIDDEN_RULE,
+          )}`;
+        }),
+      ).toEqual(
+        NAV_ENTRIES.map((name: string): string => {
+          return `${name}: ${visibleWithRule(width)}`;
+        }),
+      );
+    },
+  );
+
+  test("below md the compact bar takes over, and the rule leaves that alone too", async () => {
+    await renderNavBar();
+
+    for (const width of PHONE_WIDTHS_IN_PX) {
+      expect(
+        isVisibleAtWidth(getLink("Incidents"), width, WITH_FOREIGN_HIDDEN_RULE),
+      ).toBe(false);
+
+      expect(
+        describeVisibility(
+          screen.getByTestId("mobile-nav-toggle"),
+          width,
+          WITH_FOREIGN_HIDDEN_RULE,
+        ),
+      ).toBe(visibleWithRule(width));
+    }
+  });
+
+  test("control: with the pre-fix `hidden md:flex` put back, every entry vanishes at 1917px", async () => {
+    await renderNavBar();
+
+    restorePreFixMarkup();
+
+    for (const name of NAV_ENTRIES) {
+      expect(
+        describeVisibility(
+          getLink(name),
+          WIDE_DESKTOP_WIDTH_IN_PX,
+          WITH_FOREIGN_HIDDEN_RULE,
+        ),
+      ).toBe(
+        'hidden at 1917px with a foreign .hidden rule on the page by <div class="mt-5 hidden justify-between rounded-lg bg-white px-5 py-2 text-center shadow md:flex">',
+      );
+    }
+
+    // On a clean page the old row was fine, which is why nobody saw it.
+    expect(
+      isVisibleAtWidth(getLink("Incidents"), WIDE_DESKTOP_WIDTH_IN_PX),
+    ).toBe(true);
+  });
+});