@oneuptime/common 12.0.2 → 12.0.4

package/UI/Components/LogsViewer/useLiveLogsRefresh.ts

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef } from "react";
+
+export interface LiveLogsRefreshOptions {
+  /** Whether the user has switched live mode on. */
+  isLive: boolean;
+  /**
+   * Whether the current view can be refreshed in place. Live tailing only
+   * makes sense on the first page sorted newest-first — on page 3, or sorted
+   * by severity, "the newest logs" is not what the viewer is showing.
+   */
+  isEligible: boolean;
+  /** How often to poll while live mode is on. */
+  intervalInMs: number;
+  /** Pull the newest page of logs. */
+  refreshLogs: () => void;
+  /**
+   * Re-run the histogram query. The chart is driven by its own aggregation
+   * request rather than by the rows in the table, so it goes stale unless it
+   * is refreshed on the same beat as the list.
+   */
+  refreshHistogram: () => void;
+}
+
+export type UseLiveLogsRefreshFunction = (
+  options: LiveLogsRefreshOptions,
+) => void;
+
+/**
+ * Drives the polling loop behind the log viewer's live mode.
+ *
+ * Every tick refreshes the log list *and* the histogram together. That
+ * pairing is the point of this hook: the two come from different endpoints,
+ * and refreshing only the list leaves a chart that stops moving while rows
+ * keep arriving underneath it.
+ *
+ * The callbacks are read through refs, so a parent that re-renders (which it
+ * does on every poll, as results land) does not tear down and re-arm the
+ * timer — that would reset the cadence and fire an extra immediate poll each
+ * time. Only the gating flags and the interval restart the loop.
+ */
+const useLiveLogsRefresh: UseLiveLogsRefreshFunction = (
+  options: LiveLogsRefreshOptions,
+): void => {
+  const { isLive, isEligible, intervalInMs } = options;
+
+  const refreshLogsRef: React.MutableRefObject<() => void> = useRef<() => void>(
+    options.refreshLogs,
+  );
+  const refreshHistogramRef: React.MutableRefObject<() => void> = useRef<
+    () => void
+  >(options.refreshHistogram);
+
+  /*
+   * Declared before the polling effect so the refs are already current by the
+   * time that effect (re-)runs — effects fire in declaration order.
+   */
+  useEffect(() => {
+    refreshLogsRef.current = options.refreshLogs;
+    refreshHistogramRef.current = options.refreshHistogram;
+  });
+
+  useEffect(() => {
+    if (!isLive || !isEligible) {
+      return;
+    }
+
+    const poll: () => void = (): void => {
+      refreshLogsRef.current();
+      refreshHistogramRef.current();
+    };
+
+    // Switching live mode on should show fresh data immediately, not one tick later.
+    poll();
+
+    const intervalId: ReturnType<typeof setInterval> = setInterval(
+      poll,
+      intervalInMs,
+    );
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [isLive, isEligible, intervalInMs]);
+};
+
+export default useLiveLogsRefresh;

package/UI/Components/LogsViewer/useLogsHistogram.ts

@@ -0,0 +1,113 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { HistogramBucket } from "./types";
+
+export interface LogsHistogramRefreshOptions {
+  /**
+   * A background refresh: no loader, no blanking on failure, and no stacking
+   * if the previous one has not come back yet. This is what live mode uses.
+   */
+  silent?: boolean | undefined;
+}
+
+export interface LogsHistogramState {
+  buckets: Array<HistogramBucket>;
+  isLoading: boolean;
+  refresh: (options?: LogsHistogramRefreshOptions) => Promise<void>;
+}
+
+export type FetchHistogramBucketsFunction = () => Promise<
+  Array<HistogramBucket>
+>;
+
+export type UseLogsHistogramFunction = (
+  fetchBuckets: FetchHistogramBucketsFunction,
+) => LogsHistogramState;
+
+/**
+ * Owns the log histogram's data, loading flag and refresh loop.
+ *
+ * The chart is fed by its own aggregation query rather than by the rows in
+ * the table, so it needs refreshing in its own right — including on every
+ * live-mode tick. A poll is a *silent* refresh, which is what keeps live mode
+ * from looking broken:
+ *
+ * - it does not raise the loading flag, so the chart does not flash a loader
+ *   every few seconds;
+ * - it keeps the buckets already on screen if the request fails, so one bad
+ *   response does not blank the chart;
+ * - it is dropped while an earlier poll is still running, so a slow
+ *   aggregation cannot pile requests up behind it.
+ *
+ * `fetchBuckets` doubles as the query identity: hand over a new callback (a
+ * new time range, filter or scope) and the histogram reloads.
+ */
+const useLogsHistogram: UseLogsHistogramFunction = (
+  fetchBuckets: FetchHistogramBucketsFunction,
+): LogsHistogramState => {
+  const [buckets, setBuckets] = useState<Array<HistogramBucket>>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const silentRequestInFlight: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+
+  /*
+   * The query the viewer is on right now. A request that comes back after the
+   * reader has moved to another time range or filter is dropped rather than
+   * painted over the window they are actually looking at.
+   */
+  const currentQuery: React.MutableRefObject<FetchHistogramBucketsFunction> =
+    useRef<FetchHistogramBucketsFunction>(fetchBuckets);
+
+  useEffect(() => {
+    currentQuery.current = fetchBuckets;
+  }, [fetchBuckets]);
+
+  const refresh: (options?: LogsHistogramRefreshOptions) => Promise<void> =
+    useCallback(
+      async (options: LogsHistogramRefreshOptions = {}): Promise<void> => {
+        const isSilent: boolean = options.silent === true;
+
+        if (isSilent) {
+          if (silentRequestInFlight.current) {
+            return;
+          }
+
+          silentRequestInFlight.current = true;
+        } else {
+          setIsLoading(true);
+        }
+
+        try {
+          const nextBuckets: Array<HistogramBucket> = await fetchBuckets();
+
+          if (currentQuery.current === fetchBuckets) {
+            setBuckets(nextBuckets);
+          }
+        } catch {
+          // The histogram is non-critical; degrade rather than fail the page.
+          if (!isSilent && currentQuery.current === fetchBuckets) {
+            setBuckets([]);
+          }
+        } finally {
+          if (isSilent) {
+            silentRequestInFlight.current = false;
+          } else if (currentQuery.current === fetchBuckets) {
+            setIsLoading(false);
+          }
+        }
+      },
+      [fetchBuckets],
+    );
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  return {
+    buckets: buckets,
+    isLoading: isLoading,
+    refresh: refresh,
+  };
+};
+
+export default useLogsHistogram;

package/UI/Components/Navbar/NavBar.tsx

@@ -13,6 +13,7 @@ import NavBarMenuModal from "./NavBarMenuModal";
 import Button, { ButtonStyleType } from "../Button/Button";
 import Navigation from "../../Utils/Navigation";
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
+import useTranslateValue from "../../Utils/Translation";
 import Icon, { ThickProp } from "../Icon/Icon";
 
 export interface NavItem {
@@ -54,7 +55,7 @@ export interface ComponentProps {
   items?: NavItem[];
   rightElement?: NavItem;
   moreMenuItems?: MoreMenuItem[];
-  moreMenuTitle?: string; // Title for the more menu (default: "More")
+  moreMenuTitle?: string; // Title for the more menu (default: "Products")
   moreMenuSearchPlaceholder?: string; // Placeholder for the menu search box
   moreMenuNoResultsText?: string; // Empty-state text when search matches nothing
   moreMenuKeyboardHint?: string; // Keyboard hint shown in the menu footer
@@ -79,6 +80,7 @@ const MOBILE_MENU_MIN_HEIGHT_IN_PX: number = 160;
 const Navbar: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
   const [isMobile, setIsMobile] = useState<boolean>(false);
   const [isMobileMenuVisible, setIsMobileMenuVisible] =
     useState<boolean>(false);
@@ -408,7 +410,15 @@ const Navbar: FunctionComponent<ComponentProps> = (
                     className="mr-1.5 h-4 w-4 transition-transform duration-150 group-hover:scale-110 group-hover:text-indigo-600"
                     thick={ThickProp.Thick}
                   />
-                  <span>{props.moreMenuTitle || "Products"}</span>
+                  {/*
+                   * Callers pass a plain English literal here (or nothing, and
+                   * take the default) — run it through the same flat-key lookup
+                   * the side menu uses so the button is localised like every
+                   * other label in the nav.
+                   */}
+                  <span>
+                    {translateString(props.moreMenuTitle || "Products")}
+                  </span>
                   <Icon
                     icon={IconProp.ChevronDown}
                     className={`ml-1.5 h-3 w-3 text-gray-400 transition-transform duration-200 ${

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -1,6 +1,7 @@
 import Icon from "../Icon/Icon";
 import Link from "../Link/Link";
 import Navigation from "../../Utils/Navigation";
+import useTranslateValue from "../../Utils/Translation";
 import IconProp from "../../../Types/Icon/IconProp";
 import URL from "../../../Types/API/URL";
 import { isMoreMenuItemActive, type MoreMenuItem } from "./NavBar";
@@ -163,7 +164,18 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
     Array<HTMLDivElement | null>
   >([]);
 
-  const recentLabel: string = props.recentLabel || "Recent";
+  /*
+   * Callers hand us plain English literals (or omit them and take the
+   * defaults). Run every user-facing string through the same flat-key lookup
+   * the rest of the nav uses, so a caller that has not been wired up to i18n
+   * still renders localised text instead of English.
+   */
+  const { translateString } = useTranslateValue();
+  const tx: (value: string) => string = (value: string): string => {
+    return translateString(value) ?? value;
+  };
+
+  const recentLabel: string = tx(props.recentLabel || "Recent");
 
   // Show the OS-appropriate shortcut hint (⌘K on macOS, Ctrl K elsewhere).
   const shortcutLabel: string = useMemo(() => {
@@ -482,7 +494,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                     ? `navbar-menu-option-${activeIndex}`
                     : undefined
                 }
-                aria-label={props.searchPlaceholder || "Search products"}
+                aria-label={tx(props.searchPlaceholder || "Search products")}
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
@@ -492,7 +504,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                   setQuery(event.target.value);
                 }}
                 onKeyDown={handleKeyDown}
-                placeholder={props.searchPlaceholder || "Search…"}
+                placeholder={tx(props.searchPlaceholder || "Search…")}
                 className="flex-1 border-0 bg-transparent p-0 text-base text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-0"
               />
               {query ? (
@@ -530,7 +542,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                     />
                   </div>
                   <p className="text-sm font-medium text-gray-900">
-                    {props.noResultsText || "No results found."}
+                    {tx(props.noResultsText || "No results found.")}
                   </p>
                   {query && (
                     <p className="mt-1 text-xs text-gray-500">
@@ -640,20 +652,20 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                   </div>
                   <div className="min-w-0 text-left">
                     <p className="flex items-center gap-1 text-sm font-medium text-gray-900">
-                      <span className="truncate">{props.footer.title}</span>
+                      <span className="truncate">{tx(props.footer.title)}</span>
                       <Icon
                         icon={IconProp.ExternalLink}
                         className="h-3 w-3 flex-shrink-0 text-gray-400 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
                       />
                     </p>
                     <p className="truncate text-xs text-gray-500">
-                      {props.footer.description}
+                      {tx(props.footer.description)}
                     </p>
                   </div>
                 </Link>
                 {props.keyboardHint && (
                   <div
-                    aria-label={props.keyboardHint}
+                    aria-label={tx(props.keyboardHint)}
                     className="hidden flex-shrink-0 items-center gap-2 text-xs text-gray-400 md:flex"
                   >
                     <span className="flex items-center gap-1">

package/UI/Utils/ModelAPI/UserProjectsModelAPI.ts

@@ -0,0 +1,257 @@
+import ModelAPI, { ListResult, RequestOptions } from "./ModelAPI";
+import API from "../API/API";
+import { APP_API_URL } from "../../Config";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import Team from "../../../Models/DatabaseModels/Team";
+import TeamMember from "../../../Models/DatabaseModels/TeamMember";
+import User from "../../../Models/DatabaseModels/User";
+import HTTPErrorResponse from "../../../Types/API/HTTPErrorResponse";
+import HTTPMethod from "../../../Types/API/HTTPMethod";
+import HTTPResponse from "../../../Types/API/HTTPResponse";
+import URL from "../../../Types/API/URL";
+import Query from "../../../Types/BaseDatabase/Query";
+import Select from "../../../Types/BaseDatabase/Select";
+import Sort from "../../../Types/BaseDatabase/Sort";
+import GroupBy from "../../../Types/BaseDatabase/GroupBy";
+import BadDataException from "../../../Types/Exception/BadDataException";
+import { JSONArray, JSONObject } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+
+/*
+ * A drop-in ModelAPI for tables that list TeamMember but mean to list the
+ * PROJECTS one user belongs to - the Admin Dashboard's User > Projects page
+ * being the one that does.
+ *
+ * TeamMember rows are (user, team) pairs, so the plain API pages over
+ * memberships: a user on three teams of one project occupies three rows and
+ * reads as three projects. This API pages over projects instead, by calling the
+ * master-admin endpoint that does the grouping server-side
+ * (POST /user/:userId/projects). Grouping there rather than in the browser is
+ * what makes `count` a number of projects and every page boundary fall between
+ * two projects rather than between two of one project's teams.
+ *
+ * The endpoint owns the shape of a row, so the caller's `select` and `sort` are
+ * NOT forwarded - a row is always a project with its teams, always ordered by
+ * project name. Adding a column to the table therefore means adding the field
+ * to the endpoint's select and to the row it serializes, not just to the
+ * column list. Only `skip`/`limit` and the user in the query are the caller's.
+ *
+ * Deleting is redefined to match what a row now means - see deleteItem.
+ */
+
+export interface UserProjectExtras {
+  // Every team this user belongs to in this project, sorted by name.
+  teamsForProject: Array<Team>;
+  teamCountForProject: number;
+  /*
+   * How many of those memberships are still unaccepted invitations. A user can
+   * be a fully accepted member of one team of a project and a pending invite on
+   * another.
+   */
+  pendingTeamCountForProject: number;
+  // The ids of every membership this row was folded from.
+  teamMemberIdsForProject: Array<string>;
+}
+
+/*
+ * The row is still a TeamMember - the table, its columns and its delete action
+ * are all typed against the model - it just stands for a project the user is in
+ * rather than for one of their memberships.
+ */
+export type UserProjectRow = TeamMember & UserProjectExtras;
+
+export default class UserProjectsModelAPI extends ModelAPI {
+  public static override async getList<TBaseModel extends BaseModel>(data: {
+    modelType: { new (): TBaseModel };
+    query: Query<TBaseModel>;
+    groupBy?: GroupBy<TBaseModel> | undefined;
+    limit: number;
+    skip: number;
+    select: Select<TBaseModel>;
+    sort: Sort<TBaseModel>;
+    requestOptions?: RequestOptions | undefined;
+  }): Promise<ListResult<TBaseModel>> {
+    if (!(new data.modelType() instanceof TeamMember)) {
+      /*
+       * Not the model this API exists for - a table's entity filter fetching
+       * its dropdown options, say. Behave like the plain one, but through
+       * `super` so a subclass's getCommonHeaders still applies.
+       */
+      return super.getList<TBaseModel>(data);
+    }
+
+    const userId: ObjectID | null = this.getUserIdFromQuery(
+      data.query as Query<TeamMember>,
+    );
+
+    if (!userId) {
+      /*
+       * Without a user there is no list to fetch - the endpoint is
+       * "the projects of THIS user". Failing loudly beats returning an empty
+       * list, which would render as "this user is in no projects".
+       */
+      throw new BadDataException(
+        "A user id is required to list the projects a user belongs to.",
+      );
+    }
+
+    const url: URL = URL.fromString(APP_API_URL.toString())
+      .addRoute(new User().getCrudApiPath()!)
+      .addRoute(`/${userId.toString()}/projects`);
+
+    const result: HTTPResponse<JSONArray> | HTTPErrorResponse =
+      await API.fetch<JSONArray>({
+        method: HTTPMethod.POST,
+        url: url,
+        data: {},
+        headers: this.getCommonHeaders(data.requestOptions),
+        params: {
+          limit: data.limit.toString(),
+          skip: data.skip.toString(),
+        },
+      });
+
+    if (result instanceof HTTPErrorResponse) {
+      throw result;
+    }
+
+    const rows: Array<UserProjectRow> = (result.data as JSONArray).map(
+      (item: JSONObject) => {
+        return this.toRow(item);
+      },
+    );
+
+    return {
+      data: rows as unknown as Array<TBaseModel>,
+      count: result.count,
+      skip: result.skip,
+      limit: result.limit,
+    };
+  }
+
+  /**
+   * Removes the user from the project on this row - every one of their team
+   * memberships in it, not just the one whose id the row happens to carry.
+   *
+   * A grouped row stands for a project, so deleting one membership would leave
+   * the row on screen (still in the project, via their other teams) and look
+   * like the delete silently failed. Removing the user from a single team is
+   * done from the memberships table on the same page, where a row is a
+   * membership again.
+   *
+   * This goes through one `remove-from-project` request rather than a DELETE
+   * per membership, and that is load-bearing rather than an optimisation. The
+   * server refuses to remove the last accepted member of the Owners team, and
+   * it refuses per request - so a loop deletes every other membership first and
+   * only then reports a failure, leaving the person stripped of the teams the
+   * caller was just told they had not lost. The endpoint runs that check across
+   * the whole set before deleting anything.
+   */
+  public static override async deleteItem<TBaseModel extends BaseModel>(data: {
+    modelType: { new (): TBaseModel };
+    id: ObjectID;
+    requestOptions?: RequestOptions | undefined;
+  }): Promise<void> {
+    if (!(new data.modelType() instanceof TeamMember)) {
+      return super.deleteItem<TBaseModel>(data);
+    }
+
+    const rowMembership: TeamMember | null = await this.getItem<TeamMember>({
+      modelType: TeamMember,
+      id: data.id,
+      select: {
+        _id: true,
+        userId: true,
+        projectId: true,
+      },
+      requestOptions: data.requestOptions,
+    });
+
+    const userId: ObjectID | undefined = rowMembership?.userId;
+    const projectId: ObjectID | undefined = rowMembership?.projectId;
+
+    if (!userId || !projectId) {
+      /*
+       * The row is gone, or came back without the user or project it stands
+       * for. Fall back to the single delete the table asked for rather than
+       * guessing which project to empty.
+       */
+      return super.deleteItem<TBaseModel>(data);
+    }
+
+    const url: URL = URL.fromString(APP_API_URL.toString())
+      .addRoute(new User().getCrudApiPath()!)
+      .addRoute(`/${userId.toString()}/remove-from-project`);
+
+    const result: HTTPResponse<JSONObject> | HTTPErrorResponse =
+      await API.post<JSONObject>({
+        url: url,
+        data: {
+          projectId: projectId.toString(),
+        },
+        headers: this.getCommonHeaders(data.requestOptions),
+      });
+
+    if (result instanceof HTTPErrorResponse) {
+      throw result;
+    }
+  }
+
+  /**
+   * The user the table is listing projects for.
+   *
+   * Accepts the id in the shapes a table query can carry it in: an ObjectID
+   * (what the page passes) or a plain string.
+   */
+  private static getUserIdFromQuery(query: Query<TeamMember>): ObjectID | null {
+    const value: unknown = (query as Record<string, unknown>)["userId"];
+
+    if (value instanceof ObjectID) {
+      return value;
+    }
+
+    if (typeof value === "string" && value) {
+      return new ObjectID(value);
+    }
+
+    return null;
+  }
+
+  /**
+   * One row of the response.
+   *
+   * The base of the row is a TeamMember and hydrates as one. The aggregate
+   * fields are not columns of TeamMember, so BaseModel.fromJSON drops them -
+   * they are read off the raw JSON and attached here.
+   */
+  private static toRow(item: JSONObject): UserProjectRow {
+    const row: UserProjectRow = BaseModel.fromJSON(
+      item,
+      TeamMember,
+    ) as UserProjectRow;
+
+    row.teamsForProject = BaseModel.fromJSONArray(
+      (item["teams"] as Array<JSONObject>) || [],
+      Team,
+    );
+    row.teamCountForProject = row.teamsForProject.length;
+    row.pendingTeamCountForProject = this.toCount(item["pendingTeamCount"]);
+    row.teamMemberIdsForProject = (
+      (item["teamMemberIds"] as Array<unknown>) || []
+    )
+      .map((id: unknown) => {
+        return id?.toString() || "";
+      })
+      .filter((id: string) => {
+        return Boolean(id);
+      });
+
+    return row;
+  }
+
+  private static toCount(value: unknown): number {
+    const count: number = Number(value);
+
+    return Number.isFinite(count) && count > 0 ? count : 0;
+  }
+}