@oneuptime/common 11.7.1 → 11.7.2

package/UI/Components/ModelDetail/ModelDetail.tsx

@@ -51,15 +51,55 @@ const ModelDetail: <TBaseModel extends BaseModel>(
     JSONObject | undefined
   >(undefined);
 
+  type HasPermissionToReadFieldFunction = (fieldName: string) => boolean;
+
+  /*
+   * The server rejects the WHOLE get-item request when the select names a
+   * single column the caller cannot read (SelectPermission.checkSelectPermission
+   * throws NotAuthorizedException), which blanks the entire card instead of
+   * hiding one row. setDetailFields() below already drops unreadable fields
+   * from the render, so the fetch has to drop them too - the same thing
+   * BaseModelTable does for its selectMoreFields.
+   */
+  const hasPermissionToReadField: HasPermissionToReadFieldFunction = (
+    fieldName: string,
+  ): boolean => {
+    if (User.isMasterAdmin()) {
+      return true;
+    }
+
+    const accessControl: Dictionary<ColumnAccessControl> =
+      new props.modelType().getColumnAccessControlForAllColumns() || {};
+
+    const fieldPermissions: Array<Permission> =
+      accessControl[fieldName]?.read || [];
+
+    return PermissionHelper.doesPermissionsIntersect(
+      PermissionUtil.getAllPermissions(),
+      fieldPermissions,
+    );
+  };
+
   type GetSelectFields = () => Select<TBaseModel>;
 
   const getSelectFields: GetSelectFields = (): Select<TBaseModel> => {
     const select: Select<TBaseModel> = {};
+
+    /*
+     * _id is never a declared field on most cards, but CardModelDetail needs
+     * it to know which record its edit modal is updating. It is exempt from
+     * select permission checks server-side, so it is always safe to ask for.
+     */
+    (select as Dictionary<boolean>)["_id"] = true;
+
     for (const field of props.fields) {
       if (!field.field) {
         continue;
       }
       for (const key of Object.keys(field.field)) {
+        if (!hasPermissionToReadField(key)) {
+          continue;
+        }
         select[key as keyof TBaseModel] = true;
       }
     }
@@ -70,7 +110,8 @@ const ModelDetail: <TBaseModel extends BaseModel>(
         typeof field === "string" &&
         field &&
         props.selectMoreFields &&
-        (props.selectMoreFields as Select<TBaseModel>)[keyofField]
+        (props.selectMoreFields as Select<TBaseModel>)[keyofField] &&
+        hasPermissionToReadField(field)
       ) {
         select[keyofField] = props.selectMoreFields[keyofField] as JSONObject;
       }
@@ -91,6 +132,10 @@ const ModelDetail: <TBaseModel extends BaseModel>(
           continue;
         }
         for (const key of Object.keys(field.field)) {
+          if (!hasPermissionToReadField(key)) {
+            continue;
+          }
+
           if (model.isFileColumn(key)) {
             (relationSelect as JSONObject)[key] = {
               file: true,

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -58,6 +58,7 @@ import TableColumn from "../Table/Types/Column";
 import FieldType from "../Types/FieldType";
 import ModelTableColumn from "./Column";
 import Columns from "./Columns";
+import { getExportKeysFromColumn } from "./ExportFromColumns";
 import {
   getRelationSelectFromColumns,
   getSelectFromColumns,
@@ -115,6 +116,21 @@ export enum ShowAs {
   OrderedStatesList,
 }
 
+/*
+ * "Select All" loads the whole filtered result set - up to LIMIT_PER_PROJECT
+ * rows - with the same columns the table itself fetches. Asking for all of
+ * them in one request would mean a single wide, relation-joined query for up
+ * to 10,000 rows, which is exactly the kind of query the database statement
+ * timeout kills. It is paged instead: each request is comparable in cost to a
+ * large page load, so a big selection degrades in latency rather than failing.
+ *
+ * The page size trades those two costs off. Every list request also runs an
+ * unbounded count over the filtered set and pays a growing OFFSET, so smaller
+ * pages multiply that overhead; 1,000 keeps each query well inside the
+ * statement timeout while capping a maxed-out selection at ten round trips.
+ */
+export const BULK_SELECT_ALL_PAGE_SIZE: number = 1000;
+
 export interface SaveFilterProps {
   tableId: string;
 }
@@ -340,6 +356,28 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
     [],
   );
 
+  /*
+   * "Select All" gets its own loading / error state instead of sharing
+   * `isLoading` and `error` with fetchItems. They ran concurrently before, so
+   * a page refresh landing mid-selection flipped the spinner off and cleared
+   * the other's error - which is how a failed select-all could leave the user
+   * with only the current page selected and nothing on screen to say so.
+   */
+  const [isBulkSelectAllLoading, setIsBulkSelectAllLoading] =
+    useState<boolean>(false);
+  const [bulkSelectionError, setBulkSelectionError] = useState<string>("");
+  const [bulkSelectionTotalCount, setBulkSelectionTotalCount] =
+    useState<number>(0);
+  const [isBulkSelectionTruncated, setIsBulkSelectionTruncated] =
+    useState<boolean>(false);
+
+  /*
+   * The paged select-all spans several round trips, so the user can clear the
+   * selection or start another one while it is still running. Every run takes
+   * a token and drops its results if a newer one has since started.
+   */
+  const bulkSelectAllToken: MutableRefObject<number> = React.useRef<number>(0);
+
   let showAs: ShowAs | undefined = props.showAs;
 
   if (!showAs) {
@@ -947,6 +985,18 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           ...column,
           disableSort: column.disableSort || shouldDisableSort(key),
           key: columnKey,
+          /*
+           * `key` is only the first declared field, so a cell composed from
+           * several of them would export just that one. Hand the exporter
+           * every field the column declares (and that we actually selected).
+           */
+          exportKeys: getExportKeysFromColumn<TBaseModel>({
+            column: column,
+            columnKey: columnKey ? String(columnKey) : null,
+            hasPermissionToReadField: (field: string): boolean => {
+              return hasPermissionToReadField(field as keyof TBaseModel);
+            },
+          }),
           tooltipText,
           getElement: column.getElement,
         });
@@ -1304,37 +1354,250 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
       return fragment;
     };
 
-  const fetchAllBulkItems: PromiseVoidFunction = async (): Promise<void> => {
-    setError("");
-    setIsLoading(true);
+  type FetchAllBulkItemsFunction = () => Promise<boolean>;
 
-    try {
-      const listResult: ListResult<TBaseModel> = await props.callbacks.getList({
-        modelType: props.modelType as
-          | DatabaseBaseModelType
-          | AnalyticsBaseModelType,
-        query: {
-          ...props.query,
-          ...query,
-          ...buildSearchQueryFragment(),
-        },
-        limit: LIMIT_PER_PROJECT,
-        skip: 0,
-        select: {
-          _id: true,
-        },
-        sort: {},
-        requestOptions: props.fetchRequestOptions,
-      });
+  /*
+   * Selects every row matching the table's current query, filters and search -
+   * not just the rows on screen - and returns whether it succeeded.
+   *
+   * It fetches the SAME columns as fetchItems. It used to ask for
+   * `select: { _id: true }`, which picked the right rows but stripped every
+   * field off them, so "Export CSV" over a select-all wrote one blank line per
+   * row and any bulk action that reads a field (or renders an item's name) saw
+   * undefined. Routing the projection through getSelect() also keeps
+   * `selectMoreFields` and per-field read permissions in play, which a
+   * hand-rolled column list would silently drop.
+   */
+  const fetchAllBulkItems: FetchAllBulkItemsFunction =
+    async (): Promise<boolean> => {
+      const token: number = ++bulkSelectAllToken.current;
 
-      setBulkSelectedItems(listResult.data);
-    } catch (err) {
-      setError(API.getFriendlyMessage(err));
-    }
+      setBulkSelectionError("");
+      setIsBulkSelectionTruncated(false);
+      setIsBulkSelectAllLoading(true);
 
-    setIsLoading(false);
+      const itemsSelected: Array<TBaseModel> = [];
+
+      try {
+        /*
+         * An unsorted table is served in the API's default order, so the
+         * selection has to ask for that order explicitly - once any sort is
+         * sent, the server stops applying its default. Without this the rows
+         * came back in random UUID order, which both scrambled the exported
+         * CSV and, on a table past the selection ceiling, kept an arbitrary
+         * slice of history instead of the newest rows the user was looking at.
+         */
+        const defaultSortColumn: string =
+          (model as AnalyticsBaseModel).defaultSortColumn || "createdAt";
+
+        const bulkSort: Sort<TBaseModel> = (
+          sortBy
+            ? { [sortBy as string]: sortOrder }
+            : { [defaultSortColumn]: SortOrder.Descending }
+        ) as Sort<TBaseModel>;
+
+        /*
+         * skip/limit paging is only stable over a total order. The field that
+         * identifies a selected row (`_id` unless a table overrides it) is
+         * appended as a tiebreaker so rows sharing a sort value - 1,200 labels
+         * imported in one transaction all share a createdAt - cannot land on
+         * two pages while another row is never returned at all.
+         */
+        if (
+          (bulkSort as Dictionary<unknown>)[
+            matchBulkSelectedItemByField as string
+          ] === undefined
+        ) {
+          (bulkSort as Dictionary<SortOrder>)[
+            matchBulkSelectedItemByField as string
+          ] = SortOrder.Ascending;
+        }
+
+        /*
+         * getSelect() throws on a misconfigured column, so it is built inside
+         * the try: otherwise the button would be left spinning forever with an
+         * unhandled rejection instead of a message.
+         */
+        const bulkSelect: Select<TBaseModel> = {
+          ...getSelect(),
+          ...getRelationSelect(),
+        };
+
+        /*
+         * Every ordered column has to be selected for the database to order by
+         * it. `_id` always is; the default sort column usually is not, and a
+         * table matching its selection on some field other than `_id` would
+         * otherwise tick no row checkboxes at all.
+         */
+        for (const sortColumn of Object.keys(bulkSort)) {
+          if (
+            (bulkSelect as Dictionary<unknown>)[sortColumn] === undefined &&
+            model.hasColumn(sortColumn)
+          ) {
+            (bulkSelect as Dictionary<boolean>)[sortColumn] = true;
+          }
+        }
+
+        let totalCount: number = 0;
+        let hasMore: boolean = false;
+        let rowsFetched: number = 0;
+
+        /*
+         * Offset paging over a table that is still receiving writes can hand
+         * back a row that an earlier page already returned. Selecting it twice
+         * would duplicate it in the export and inflate the selected count.
+         */
+        const seenItemIds: Set<string> = new Set<string>();
+
+        while (itemsSelected.length < LIMIT_PER_PROJECT) {
+          const limit: number = Math.min(
+            BULK_SELECT_ALL_PAGE_SIZE,
+            LIMIT_PER_PROJECT - itemsSelected.length,
+          );
+
+          const listResult: ListResult<TBaseModel> =
+            await props.callbacks.getList({
+              modelType: props.modelType as
+                | DatabaseBaseModelType
+                | AnalyticsBaseModelType,
+              query: {
+                ...props.query,
+                ...query,
+                ...buildSearchQueryFragment(),
+              },
+              groupBy: {
+                ...props.groupBy,
+              },
+              limit: limit,
+              skip: rowsFetched,
+              select: bulkSelect,
+              sort: bulkSort,
+              requestOptions: props.fetchRequestOptions,
+            });
+
+          if (token !== bulkSelectAllToken.current) {
+            // A newer select-all, or a cleared selection, superseded this run.
+            return false;
+          }
+
+          totalCount = listResult.count || totalCount;
+          hasMore = Boolean(listResult.hasMore);
+          rowsFetched += listResult.data.length;
+
+          for (const item of listResult.data) {
+            const itemId: string =
+              item[matchBulkSelectedItemByField]?.toString() || "";
+
+            if (itemId) {
+              if (seenItemIds.has(itemId)) {
+                continue;
+              }
+
+              seenItemIds.add(itemId);
+            }
+
+            itemsSelected.push(item);
+          }
+
+          if (listResult.data.length < limit) {
+            // A short page is the last page.
+            hasMore = false;
+            break;
+          }
+
+          if (listResult.hasMore === false) {
+            break;
+          }
+
+          if (totalCount > 0 && rowsFetched >= totalCount) {
+            /*
+             * Everything matching has been read. Stopping here saves the
+             * empty round trip a result set that is an exact multiple of the
+             * page size would otherwise cost - and each of those requests
+             * runs a full count over the filtered set.
+             */
+            break;
+          }
+        }
+
+        setBulkSelectionTotalCount(Math.max(totalCount, itemsSelected.length));
+        setIsBulkSelectionTruncated(totalCount > rowsFetched || hasMore);
+        setBulkSelectedItems(itemsSelected);
+
+        return true;
+      } catch (err) {
+        if (token === bulkSelectAllToken.current) {
+          /*
+           * Leave the existing selection alone. A half-loaded selection that
+           * claims to be everything is worse than a failed one, and the user
+           * can retry because the Select All button stays on screen.
+           */
+          setBulkSelectionError(API.getFriendlyMessage(err));
+        }
+
+        return false;
+      } finally {
+        if (token === bulkSelectAllToken.current) {
+          setIsBulkSelectAllLoading(false);
+        }
+      }
+    };
+
+  type ClearBulkSelectionStateFunction = () => void;
+
+  const clearBulkSelectionState: ClearBulkSelectionStateFunction = (): void => {
+    // Supersede any select-all still in flight so it cannot repopulate this.
+    bulkSelectAllToken.current++;
+    setIsBulkSelectAllLoading(false);
+    setBulkSelectionError("");
+    setIsBulkSelectionTruncated(false);
+    setBulkSelectionTotalCount(0);
+    setBulkSelectedItems((existingItems: Array<TBaseModel>) => {
+      /*
+       * Keep the same array when there is nothing to clear, so calling this on
+       * every query change (below) costs an idle table no re-render.
+       */
+      return existingItems.length === 0 ? existingItems : [];
+    });
   };
 
+  /*
+   * Everything that decides *which rows match* - the caller's query, the
+   * column filters, the search term and the label chips. Serialised because
+   * callers routinely pass `query` as a fresh object literal on every render,
+   * and the label chips get their display names hydrated after mount without
+   * the set of ids ever changing.
+   *
+   * Sort and page are deliberately left out: they re-order or re-window the
+   * same matching set, so a selection made under them is still a selection of
+   * rows that match. Selecting rows across pages is a real workflow, and a
+   * truncated select-all keeps saying "selected N of M matching" after a
+   * re-sort, which stays true.
+   */
+  const effectiveQueryKey: string = JSON.stringify({
+    props: props.query || {},
+    filter: query,
+    search: debouncedSearchText.trim(),
+    labels: selectedLabelIdsKey,
+  });
+
+  /*
+   * A selection refers to the rows the *previous* query returned. Once the
+   * query changes, the table underneath the bulk bar is a different result
+   * set, so carrying the selection over leaves the bar claiming "6,000 Alerts
+   * Selected" above a filtered-down list of 12 - with the Select All button
+   * hidden, as though the selection matched what is on screen, and Delete
+   * still wired to all 6,000 rows the user can no longer see.
+   *
+   * Dropping it here also bumps `bulkSelectAllToken`, so a filter change that
+   * lands while a paged select-all is still running supersedes that run
+   * instead of letting it finish and repopulate the selection against the old
+   * query.
+   */
+  useEffect(() => {
+    clearBulkSelectionState();
+  }, [effectiveQueryKey]);
+
   const fetchItems: PromiseVoidFunction = async (): Promise<void> => {
     setError("");
     setIsLoading(true);
@@ -2236,15 +2499,18 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           };
         })()}
         onBulkActionEnd={async () => {
-          setBulkSelectedItems([]);
+          clearBulkSelectionState();
           await fetchItems();
         }}
         onBulkActionStart={() => {}}
         bulkSelectedItems={bulkSelectedItems}
         onBulkSelectedItemAdded={(item: TBaseModel) => {
+          // The user has moved on from the failed select-all.
+          setBulkSelectionError("");
           setBulkSelectedItems([...bulkSelectedItems, item]);
         }}
         onBulkSelectedItemRemoved={(item: TBaseModel) => {
+          setBulkSelectionError("");
           setBulkSelectedItems(
             bulkSelectedItems.filter((i: TBaseModel) => {
               return (
@@ -2278,11 +2544,15 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
           setBulkSelectedItems(uniqueItems);
         }}
         onBulkClearAllItems={() => {
-          setBulkSelectedItems([]);
+          clearBulkSelectionState();
         }}
-        onBulkSelectAllItems={async () => {
-          await fetchAllBulkItems();
+        onBulkSelectAllItems={async (): Promise<boolean> => {
+          return await fetchAllBulkItems();
         }}
+        bulkSelectionError={bulkSelectionError}
+        isBulkSelectAllLoading={isBulkSelectAllLoading}
+        isBulkSelectionTruncated={isBulkSelectionTruncated}
+        bulkSelectionTotalCount={bulkSelectionTotalCount}
         matchBulkSelectedItemByField={matchBulkSelectedItemByField || "_id"}
         bulkItemToString={(item: TBaseModel) => {
           const label: string = props.singularName || item.singularName || "";

package/UI/Components/ModelTable/Column.ts

@@ -29,6 +29,18 @@ export default interface Columns<
   alignItem?: AlignItem | undefined;
   noValueMessage?: string | undefined;
   hideOnMobile?: boolean | undefined; // Hide column on mobile devices
+  /*
+   * Exact text for this column's CSV cell (the text twin of getElement, and
+   * it receives the same item). Set it when the cell renders from something
+   * the row does not carry under this column's own `field` - data fetched
+   * alongside the table, or a phrase composed from several fields. Columns
+   * that render entirely through getElement off a placeholder
+   * `field: { _id: true }` are left out of the CSV unless they set this,
+   * because their only exportable value is a raw UUID.
+   */
+  getExportValue?: ((item: TEntity) => string) | undefined;
+  // Leave this column out of the CSV export entirely.
+  disableCsvExport?: boolean | undefined;
   getElement?:
     | ((item: TEntity, onBeforeFetchData?: TEntity | undefined) => ReactElement)
     | undefined;

package/UI/Components/ModelTable/ExportFromColumns.ts

@@ -0,0 +1,57 @@
+import Column from "./Column";
+import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+
+/*
+ * Derives the fields a ModelTable column contributes to a CSV export from its
+ * column definition, and mirrors getSelectFromColumns: a column may declare
+ * MORE THAN ONE field when its cell is composed from several of them, and all
+ * of them are fetched. The Table column's `key` only ever holds the first, so
+ * an exporter reading `key` alone drops the rest - the alert "Affected
+ * Resources" cell spans hosts / kubernetesClusters / dockerHosts /
+ * podmanHosts / services, and only the hosts made it into the file.
+ */
+
+export function getExportKeysFromColumn<
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+>(data: {
+  column: Column<TBaseModel>;
+  /*
+   * The key the Table column renders and sorts by. It is the first declared
+   * field, with `selectedProperty` appended when the column picks a single
+   * property off a relation ("label.name"), so the export reads the same path
+   * the cell does.
+   */
+  columnKey: string | null;
+  /*
+   * Secondary fields are gated on this exactly as they are in the select: a
+   * field the caller cannot read was never fetched, so exporting it would
+   * only ever produce an empty cell.
+   */
+  hasPermissionToReadField?: ((field: string) => boolean) | undefined;
+}): Array<string> {
+  const exportKeys: Array<string> = [];
+
+  if (data.columnKey) {
+    exportKeys.push(data.columnKey);
+  }
+
+  if (!data.column.field) {
+    return exportKeys;
+  }
+
+  const declaredKeys: Array<string> = Object.keys(data.column.field);
+
+  // The primary field is already covered by columnKey.
+  for (const key of declaredKeys.slice(1)) {
+    if (data.hasPermissionToReadField && !data.hasPermissionToReadField(key)) {
+      continue;
+    }
+
+    if (!exportKeys.includes(key)) {
+      exportKeys.push(key);
+    }
+  }
+
+  return exportKeys;
+}

package/UI/Components/Navbar/NavBar.tsx

@@ -69,6 +69,13 @@ export interface ComponentProps {
   children?: ReactElement | Array<ReactElement>;
 }
 
+/*
+ * Breathing room kept between the bottom of the open mobile menu and the bottom
+ * of the viewport, and the smallest height we will ever shrink the menu to.
+ */
+const MOBILE_MENU_BOTTOM_GAP_IN_PX: number = 16;
+const MOBILE_MENU_MIN_HEIGHT_IN_PX: number = 160;
+
 const Navbar: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -76,6 +83,9 @@ const Navbar: FunctionComponent<ComponentProps> = (
   const [isMobileMenuVisible, setIsMobileMenuVisible] =
     useState<boolean>(false);
   const [isMoreMenuVisible, setIsMoreMenuVisible] = useState<boolean>(false);
+  const [mobileMenuMaxHeight, setMobileMenuMaxHeight] = useState<
+    number | undefined
+  >(undefined);
 
   // Use the existing outside click hook for mobile menu
   const {
@@ -103,6 +113,54 @@ const Navbar: FunctionComponent<ComponentProps> = (
     };
   }, []);
 
+  /*
+   * The mobile menu is absolutely positioned inside a `sticky top-0` header, so
+   * anything that overflows past the bottom of the viewport is unreachable —
+   * scrolling the page just drags the sticky header (and the menu pinned to it)
+   * along. Cap the menu to the space left below it so it scrolls on its own.
+   */
+  useEffect(() => {
+    if (!isMobileMenuOpen) {
+      return;
+    }
+
+    const updateMobileMenuMaxHeight: () => void = (): void => {
+      const menuTop: number =
+        mobileMenuRef.current?.getBoundingClientRect().top ?? 0;
+      const viewportHeight: number =
+        window.visualViewport?.height ?? window.innerHeight;
+
+      setMobileMenuMaxHeight(
+        Math.max(
+          viewportHeight - menuTop - MOBILE_MENU_BOTTOM_GAP_IN_PX,
+          MOBILE_MENU_MIN_HEIGHT_IN_PX,
+        ),
+      );
+    };
+
+    updateMobileMenuMaxHeight();
+
+    window.addEventListener("resize", updateMobileMenuMaxHeight);
+    window.addEventListener("orientationchange", updateMobileMenuMaxHeight);
+    // The address bar collapsing on mobile only shows up on the visual viewport.
+    window.visualViewport?.addEventListener(
+      "resize",
+      updateMobileMenuMaxHeight,
+    );
+
+    return () => {
+      window.removeEventListener("resize", updateMobileMenuMaxHeight);
+      window.removeEventListener(
+        "orientationchange",
+        updateMobileMenuMaxHeight,
+      );
+      window.visualViewport?.removeEventListener(
+        "resize",
+        updateMobileMenuMaxHeight,
+      );
+    };
+  }, [isMobileMenuOpen]);
+
   // Open/close the products menu with Cmd/Ctrl + K from anywhere.
   useEffect(() => {
     const handleGlobalKeyDown: (event: KeyboardEvent) => void = (
@@ -235,7 +293,14 @@ const Navbar: FunctionComponent<ComponentProps> = (
             ref={mobileMenuRef}
             className="absolute top-full left-0 right-0 z-50 mt-1 transition-all duration-200 ease-in-out"
           >
-            <nav className="bg-white rounded-lg shadow-lg px-3 py-3 space-y-1 border border-gray-200">
+            <nav
+              className="bg-white rounded-lg shadow-lg px-3 py-3 space-y-1 border border-gray-200 overflow-y-auto overscroll-contain"
+              style={
+                mobileMenuMaxHeight
+                  ? { maxHeight: `${mobileMenuMaxHeight}px` }
+                  : undefined
+              }
+            >
               {allNavItems.map((item: any) => {
                 return (
                   <div key={item.id} className="block w-full">