@oneuptime/common 11.7.2 → 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/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/SideMenu/SideMenu.tsx

@@ -415,30 +415,50 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       role="navigation"
       aria-label="Main navigation"
     >
-      <div className="sticky top-6">
+      {/*
+       * Stick below the app header, not at the top of the viewport. The header
+       * is sticky too, so a plain `top-6` slides the first menu items behind it
+       * as soon as the page scrolls. --app-header-height is measured and
+       * published by MasterPage; the 0px fallback keeps this correct on pages
+       * that render without a sticky header.
+       */}
+      <div
+        className="sticky"
+        style={{ top: "calc(var(--app-header-height, 0px) + 1.5rem)" }}
+      >
         <div
           className={`
+            flex flex-col
             bg-white rounded-2xl
             border border-gray-200/80
             shadow-sm
             overflow-hidden
           `}
+          /*
+           * Menus longer than the viewport (the Kubernetes cluster menu, for
+           * one) would otherwise get pushed back up behind the header near the
+           * bottom of a long page. Cap the card to the space left under the
+           * header and let the item list scroll inside it instead.
+           */
+          style={{
+            maxHeight: "calc(100vh - var(--app-header-height, 0px) - 3rem)",
+          }}
         >
           {/* Optional Header */}
           {props.header && (
-            <div className="px-3 py-3 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white">
+            <div className="flex-shrink-0 px-3 py-3 border-b border-gray-100 bg-gradient-to-b from-gray-50 to-white">
               {props.header}
             </div>
           )}
 
           {/* Menu Content */}
-          <nav className="p-2">
+          <nav className="p-2 min-h-0 overflow-y-auto">
             <div className="space-y-0.5">{renderMenuContent()}</div>
           </nav>
 
           {/* Optional Footer */}
           {props.footer && (
-            <div className="px-3 py-2 border-t border-gray-100 bg-gray-50/50">
+            <div className="flex-shrink-0 px-3 py-2 border-t border-gray-100 bg-gray-50/50">
               {props.footer}
             </div>
           )}

package/UI/Components/Table/Table.tsx

@@ -181,10 +181,23 @@ const Table: TableFunction = <T extends GenericObject>(
     }
   }, [props.bulkSelectedItems]);
 
+  /*
+   * Width of the loading / error / "no items" row, in cells. It has to match
+   * what TableHeader actually renders or those messages sit under part of the
+   * table instead of spanning it: the Actions column is already one of
+   * `props.columns`, and the drag-handle and bulk-select cells are extra
+   * leading columns that only exist when those features are on.
+   */
   let colspan: number = props.columns.length || 0;
-  if (props.actionButtons && props.actionButtons?.length > 0) {
+  if (props.enableDragAndDrop) {
     colspan++;
   }
+  if (isBulkActionsEnabled) {
+    colspan++;
+  }
+  if (colspan === 0) {
+    colspan = 1;
+  }
 
   const getTablebody: GetReactElementFunction = (): ReactElement => {
     if (props.isLoading) {