@oneuptime/common 11.7.1 → 11.7.3

package/UI/Components/ModelTable/CustomFieldColumns.tsx

@@ -0,0 +1,326 @@
+import Column from "./Column";
+import Columns from "./Columns";
+import FieldType from "../Types/FieldType";
+import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import CustomFieldType from "../../../Types/CustomField/CustomFieldType";
+import { JSONObject } from "../../../Types/JSON";
+import React, { ReactElement } from "react";
+
+/*
+ * ---------------------------------------------------------------------------
+ * One table column per custom field
+ * ---------------------------------------------------------------------------
+ *
+ * Custom field *definitions* live in a per-resource table (MonitorCustomField,
+ * IncidentCustomField, ...); the *values* live in a single `customFields`
+ * jsonb column on the resource itself, keyed by the definition's name. So a
+ * generated column reads the whole JSON column and picks one key out of it:
+ *
+ *     field:            { customFields: true }   <- a real model column
+ *     selectedProperty: "Severity"               <- the key inside it
+ *
+ * which BaseModelTable turns into the column key "customFields.Severity".
+ *
+ * Two things about that shape are load-bearing:
+ *
+ *  - the declared field has to be the real column. A synthetic
+ *    `field: { "customFields.Severity": true }` would fail the model's column
+ *    check in getSelectFromColumns and throw the whole table away.
+ *
+ *  - sorting has to be off. Nothing downstream validates `sort` before it
+ *    reaches TypeORM, so a clickable header here would send an unknown
+ *    property into the query builder. Postgres can only order by a jsonb
+ *    key through an explicit ->> expression, which the sort path has no
+ *    concept of.
+ *
+ * Cells render through `getElement` for the same class of reason: the typed
+ * cell renderers index `item[column.key]` directly, so they would look for a
+ * literal "customFields.Severity" property and find nothing. Only the
+ * fall-through text branch understands a dotted key.
+ */
+
+export interface CustomFieldDefinition {
+  name: string;
+  description?: string | undefined;
+  customFieldType?: CustomFieldType | undefined;
+  dropdownOptions?: string | undefined;
+}
+
+export const CustomFieldsColumnKey: string = "customFields";
+
+export type ParseDropdownOptionsFunction = (
+  value: string | undefined | null,
+) => Array<string>;
+
+/*
+ * Dropdown options are stored as one option per line, the same format the
+ * settings page writes.
+ */
+export const parseDropdownOptions: ParseDropdownOptionsFunction = (
+  value: string | undefined | null,
+): Array<string> => {
+  if (typeof value !== "string" || !value) {
+    return [];
+  }
+
+  return value
+    .split("\n")
+    .map((line: string) => {
+      return line.trim();
+    })
+    .filter((line: string) => {
+      return line.length > 0;
+    });
+};
+
+export type GetCustomFieldDefinitionsFunction = (
+  items: Array<BaseModel | JSONObject>,
+) => Array<CustomFieldDefinition>;
+
+/*
+ * Normalise whatever the definition API returned into a plain, sorted list.
+ *
+ * Sorting matters: the definition models carry no ordering column and the
+ * list endpoint is queried with an empty sort, so Postgres is free to hand
+ * back a different order on every request. Without a deterministic order
+ * here, a viewer's saved column layout would appear to shuffle itself
+ * between page loads.
+ */
+export const getCustomFieldDefinitions: GetCustomFieldDefinitionsFunction = (
+  items: Array<BaseModel | JSONObject>,
+): Array<CustomFieldDefinition> => {
+  const definitions: Array<CustomFieldDefinition> = [];
+  const seenNames: Set<string> = new Set();
+
+  for (const item of items || []) {
+    const name: unknown = (item as JSONObject)?.["name"];
+
+    if (typeof name !== "string" || name.trim().length === 0) {
+      continue;
+    }
+
+    const trimmedName: string = name.trim();
+
+    if (seenNames.has(trimmedName)) {
+      continue;
+    }
+
+    seenNames.add(trimmedName);
+
+    const description: unknown = (item as JSONObject)["description"];
+    const customFieldType: unknown = (item as JSONObject)["customFieldType"];
+    const dropdownOptions: unknown = (item as JSONObject)["dropdownOptions"];
+
+    definitions.push({
+      name: trimmedName,
+      description: typeof description === "string" ? description : undefined,
+      customFieldType:
+        typeof customFieldType === "string"
+          ? (customFieldType as CustomFieldType)
+          : undefined,
+      dropdownOptions:
+        typeof dropdownOptions === "string" ? dropdownOptions : undefined,
+    });
+  }
+
+  return definitions.sort(
+    (a: CustomFieldDefinition, b: CustomFieldDefinition) => {
+      return a.name.localeCompare(b.name);
+    },
+  );
+};
+
+export type GetCustomFieldValueFunction = (
+  item: unknown,
+  name: string,
+) => unknown;
+
+export const getCustomFieldValue: GetCustomFieldValueFunction = (
+  item: unknown,
+  name: string,
+): unknown => {
+  const customFields: unknown = (item as JSONObject | undefined)?.[
+    CustomFieldsColumnKey
+  ];
+
+  if (!customFields || typeof customFields !== "object") {
+    return undefined;
+  }
+
+  return (customFields as JSONObject)[name];
+};
+
+type BadgeFunction = (data: { label: string; key: string }) => ReactElement;
+
+const badge: BadgeFunction = (data: {
+  label: string;
+  key: string;
+}): ReactElement => {
+  return (
+    <span
+      key={data.key}
+      className="inline-flex items-center gap-x-1.5 px-2 py-1 rounded-md bg-indigo-50 text-indigo-700 text-xs font-medium ring-1 ring-inset ring-indigo-700/10"
+    >
+      <svg
+        className="h-1.5 w-1.5 fill-indigo-500"
+        viewBox="0 0 6 6"
+        aria-hidden="true"
+      >
+        <circle cx={3} cy={3} r={3} />
+      </svg>
+      {data.label}
+    </span>
+  );
+};
+
+export type RenderCustomFieldValueFunction = (data: {
+  value: unknown;
+  definition: CustomFieldDefinition;
+  noValueMessage?: string | undefined;
+}) => ReactElement;
+
+export const renderCustomFieldValue: RenderCustomFieldValueFunction = (data: {
+  value: unknown;
+  definition: CustomFieldDefinition;
+  noValueMessage?: string | undefined;
+}): ReactElement => {
+  const { value, definition } = data;
+  const noValueMessage: string = data.noValueMessage ?? "-";
+
+  const empty: ReactElement = (
+    <span className="text-gray-400">{noValueMessage}</span>
+  );
+
+  if (value === undefined || value === null || value === "") {
+    return empty;
+  }
+
+  if (definition.customFieldType === CustomFieldType.Boolean) {
+    /*
+     * A boolean custom field renders "No" rather than falling into the empty
+     * branch above - `false` is a real answer, not a missing one.
+     */
+    const isTrue: boolean = value === true || value === "true";
+
+    return (
+      <span
+        className={
+          isTrue
+            ? "inline-flex items-center px-2 py-1 rounded-md bg-green-50 text-green-700 text-xs font-medium ring-1 ring-inset ring-green-600/20"
+            : "inline-flex items-center px-2 py-1 rounded-md bg-gray-50 text-gray-600 text-xs font-medium ring-1 ring-inset ring-gray-500/10"
+        }
+      >
+        {isTrue ? "Yes" : "No"}
+      </span>
+    );
+  }
+
+  if (definition.customFieldType === CustomFieldType.MultiSelectDropdown) {
+    /*
+     * Tolerant on the way out: an older single-select value that was later
+     * switched to multi-select is still a bare string in the JSON.
+     */
+    const values: Array<unknown> = Array.isArray(value) ? value : [value];
+
+    const labels: Array<string> = values
+      .filter((entry: unknown) => {
+        return entry !== undefined && entry !== null && entry !== "";
+      })
+      .map((entry: unknown) => {
+        return String(entry);
+      });
+
+    if (labels.length === 0) {
+      return empty;
+    }
+
+    return (
+      <div className="flex flex-wrap gap-1.5">
+        {labels.map((label: string, index: number) => {
+          return badge({ label, key: `${label}-${index}` });
+        })}
+      </div>
+    );
+  }
+
+  if (definition.customFieldType === CustomFieldType.Dropdown) {
+    return badge({ label: String(value), key: String(value) });
+  }
+
+  if (Array.isArray(value)) {
+    return <span>{value.join(", ")}</span>;
+  }
+
+  if (typeof value === "object") {
+    return <span>{JSON.stringify(value)}</span>;
+  }
+
+  return <span>{String(value)}</span>;
+};
+
+export type GetCustomFieldColumnsFunction = <
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+>(data: {
+  definitions: Array<CustomFieldDefinition>;
+  isHiddenByDefault?: boolean | undefined;
+}) => Columns<TBaseModel>;
+
+/*
+ * Custom field columns default to hidden. A project is free to define a dozen
+ * of them, and turning every one on by default would push the columns the
+ * table was designed around off the side of the screen the first time anyone
+ * opens it. They are all listed in the column picker, one click away.
+ */
+export const getCustomFieldColumns: GetCustomFieldColumnsFunction = <
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+>(data: {
+  definitions: Array<CustomFieldDefinition>;
+  isHiddenByDefault?: boolean | undefined;
+}): Columns<TBaseModel> => {
+  const isHidden: boolean = data.isHiddenByDefault !== false;
+
+  return (data.definitions || []).map(
+    (definition: CustomFieldDefinition): Column<TBaseModel> => {
+      return {
+        id: `${CustomFieldsColumnKey}.${definition.name}`,
+        field: {
+          [CustomFieldsColumnKey]: true,
+        } as Column<TBaseModel>["field"],
+        selectedProperty: definition.name,
+        title: definition.name,
+        description: definition.description,
+        type: FieldType.Element,
+        /*
+         * See the file header: sorting a jsonb key is not something the
+         * query path can express.
+         */
+        disableSort: true,
+        isHiddenByDefault: isHidden,
+        getExportValue: (item: TBaseModel): string => {
+          const value: unknown = getCustomFieldValue(item, definition.name);
+
+          if (value === undefined || value === null) {
+            return "";
+          }
+
+          if (Array.isArray(value)) {
+            return value.join(", ");
+          }
+
+          if (typeof value === "object") {
+            return JSON.stringify(value);
+          }
+
+          return String(value);
+        },
+        getElement: (item: TBaseModel): ReactElement => {
+          return renderCustomFieldValue({
+            value: getCustomFieldValue(item, definition.name),
+            definition: definition,
+          });
+        },
+      };
+    },
+  );
+};

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/ModelTable/TableView.tsx

@@ -40,6 +40,13 @@ export interface ComponentProps<T extends GenericObject> {
    * `TableView.facets`). Owner: the parent's filter hook.
    */
   currentFacetState?: JSONObject | undefined;
+  /**
+   * The viewer's current column layout ({ order, hidden }), persisted on
+   * `TableView.columns` so a saved view restores the columns it was saved
+   * with. `undefined` means "the table's default layout", which is stored as
+   * no value at all.
+   */
+  currentColumns?: JSONObject | undefined;
   tableView: TableView | null;
 }
 
@@ -90,6 +97,7 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
           query: true,
           name: true,
           facets: true,
+          columns: true,
         },
         sort: {
           name: SortOrder.Ascending,
@@ -223,6 +231,17 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
 
   const hasActiveFilters: boolean = hasQueryFilters || hasFacetState;
 
+  /*
+   * A customized column layout is worth saving on its own - "the columns I
+   * care about, in my order" is a view even when nothing is filtered.
+   */
+  const hasColumnLayout: boolean = Boolean(
+    props.currentColumns &&
+      Object.keys(props.currentColumns as JSONObject).length > 0,
+  );
+
+  const hasSavableState: boolean = hasActiveFilters || hasColumnLayout;
+
   const getMenuContents: GetReactElementArrayFunction =
     (): Array<ReactElement> => {
       if (isLoading) {
@@ -239,7 +258,7 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
         );
       }
 
-      if (hasActiveFilters) {
+      if (hasSavableState) {
         elements.push(
           <MoreMenuItem
             key={"save-new-view"}
@@ -359,6 +378,9 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
           if (props.currentFacetState) {
             tableView.facets = props.currentFacetState;
           }
+          if (props.currentColumns) {
+            tableView.columns = props.currentColumns;
+          }
           return Promise.resolve(tableView);
         }}
         onSuccess={async (tableView: TableView) => {
@@ -476,7 +498,7 @@ const TableViewElement: <T extends DatabaseBaseModel | AnalyticsBaseModel>(
   if (
     !isLoading &&
     allTableViews.length === 0 &&
-    !hasActiveFilters &&
+    !hasSavableState &&
     !currentlySelectedView
   ) {
     return <></>;

package/UI/Components/ModelTable/useCustomFieldColumns.ts

@@ -0,0 +1,150 @@
+import Columns from "./Columns";
+import {
+  CustomFieldDefinition,
+  getCustomFieldColumns,
+  getCustomFieldDefinitions,
+} from "./CustomFieldColumns";
+import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
+import ProjectUtil from "../../Utils/Project";
+import { Logger } from "../../Utils/Logger";
+import AnalyticsBaseModel from "../../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import ListResult from "../../../Types/BaseDatabase/ListResult";
+import { LIMIT_PER_PROJECT } from "../../../Types/Database/LimitMax";
+import ObjectID from "../../../Types/ObjectID";
+import { useEffect, useMemo, useState } from "react";
+
+export interface CustomFieldColumnsResult<
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+> {
+  columns: Columns<TBaseModel>;
+  definitions: Array<CustomFieldDefinition>;
+  isLoading: boolean;
+  error: string;
+}
+
+/*
+ * Loads a resource's custom field *definitions* and turns them into table
+ * columns.
+ *
+ * The definitions arrive after the table's first render, which is fine: they
+ * only add columns, and every one of them is hidden until the viewer switches
+ * it on. What must NOT wait on this request is the `customFields` entry in the
+ * API select - the table does not refetch when its column set changes, so the
+ * select has to be right from the first request. BaseModelTable handles that
+ * from the synchronous `customFieldsModelType` prop instead.
+ *
+ * Pass `undefined` for the model type to switch the whole thing off; the hook
+ * still runs (hooks cannot be conditional) but makes no request.
+ */
+export type UseCustomFieldColumnsFunction = <
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+>(data: {
+  customFieldsModelType?: { new (): BaseModel } | undefined;
+  projectId?: ObjectID | null | undefined;
+}) => CustomFieldColumnsResult<TBaseModel>;
+
+const useCustomFieldColumns: UseCustomFieldColumnsFunction = <
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+>(data: {
+  customFieldsModelType?: { new (): BaseModel } | undefined;
+  projectId?: ObjectID | null | undefined;
+}): CustomFieldColumnsResult<TBaseModel> => {
+  const { customFieldsModelType } = data;
+
+  const [definitions, setDefinitions] = useState<Array<CustomFieldDefinition>>(
+    [],
+  );
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  const projectId: ObjectID | null =
+    data.projectId ?? ProjectUtil.getCurrentProjectId();
+
+  const projectIdString: string = projectId?.toString() || "";
+  const modelName: string = customFieldsModelType?.name || "";
+
+  useEffect(() => {
+    if (!customFieldsModelType || !projectId) {
+      setDefinitions([]);
+      return;
+    }
+
+    let isCancelled: boolean = false;
+
+    const load: () => Promise<void> = async (): Promise<void> => {
+      setIsLoading(true);
+      setError("");
+
+      try {
+        const result: ListResult<BaseModel> = await ModelAPI.getList<BaseModel>(
+          {
+            modelType: customFieldsModelType,
+            query: {
+              projectId: projectId,
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            } as any,
+            limit: LIMIT_PER_PROJECT,
+            skip: 0,
+            select: {
+              name: true,
+              customFieldType: true,
+              description: true,
+              dropdownOptions: true,
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            } as any,
+            sort: {},
+          },
+        );
+
+        if (isCancelled) {
+          return;
+        }
+
+        setDefinitions(getCustomFieldDefinitions(result.data || []));
+      } catch (err) {
+        if (isCancelled) {
+          return;
+        }
+
+        /*
+         * Custom fields are a paid feature and the caller may not have read
+         * access to the definition table, so a failure here is expected in
+         * normal operation. It costs the viewer some optional columns; it must
+         * never take the table down with it.
+         */
+        Logger.warn(
+          `Could not load custom field definitions for ${modelName}: ${
+            (err as Error)?.message || String(err)
+          }`,
+        );
+        setDefinitions([]);
+        setError((err as Error)?.message || "");
+      } finally {
+        if (!isCancelled) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    load().catch(() => {
+      // load() already funnels every failure into the catch above.
+    });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [modelName, projectIdString]);
+
+  const columns: Columns<TBaseModel> = useMemo(() => {
+    if (definitions.length === 0) {
+      return [];
+    }
+
+    return getCustomFieldColumns<TBaseModel>({ definitions });
+  }, [definitions]);
+
+  return { columns, definitions, isLoading, error };
+};
+
+export default useCustomFieldColumns;

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">