@oneuptime/common 12.0.23 → 12.0.24

package/UI/Components/ModelTable/ColumnCustomizationModal.tsx

@@ -18,11 +18,49 @@ import {
   DropResult,
 } from "react-beautiful-dnd";
 
+/*
+ * A pool of columns the viewer can bring INTO the picker, rather than one
+ * checklist entry per possibility.
+ *
+ * Attribute columns are the motivating case: the keys inside a row's
+ * `attributes` map differ per event class and per source, so a project can
+ * easily have several hundred of them. Listing every one as a checkbox turns
+ * "which columns do I want?" into a scroll through noise (and hands "Show all"
+ * a way to put 500 columns on screen), so they are offered through a search
+ * box that only materializes what was asked for.
+ */
+export interface AddableColumnsConfig<
+  TBaseModel extends BaseModel | AnalyticsBaseModel,
+> {
+  title: string;
+  description?: string | undefined;
+  placeholder?: string | undefined;
+  // Still fetching the pool. The section says so rather than reading as empty.
+  isLoading?: boolean | undefined;
+  errorMessage?: string | undefined;
+  // Shown when the pool itself is empty, e.g. nothing has been ingested yet.
+  emptyMessage?: string | undefined;
+  /*
+   * Every column that could be added, in the order they should be offered.
+   * Ones already in the picker are filtered out here rather than by the
+   * caller, so a column added and then removed reappears in the pool.
+   */
+  columns: Array<CustomizableColumn<TBaseModel>>;
+  /*
+   * How many matches to render at once. The pool can be in the thousands and
+   * an unbounded list would put all of it in the DOM; the search box is what
+   * gets you to the rest.
+   */
+  maxResults?: number | undefined;
+}
+
 export interface ComponentProps<
   TBaseModel extends BaseModel | AnalyticsBaseModel,
 > {
   // Every customizable column, already in the order the table renders them.
   columns: Array<CustomizableColumn<TBaseModel>>;
+  // Optional pool of columns the viewer can add. Omit to hide the whole section.
+  addableColumns?: AddableColumnsConfig<TBaseModel> | undefined;
   onSave: (columns: Array<CustomizableColumn<TBaseModel>>) => void;
   onClose: () => void;
   // Drop the stored layout and go back to what the table ships with.
@@ -97,6 +135,109 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
   const isEverythingVisible: boolean = visibleCount === entries.length;
   const isOnlyOneVisible: boolean = visibleCount <= 1;
 
+  /*
+   * ---------------------------------------------------------------------
+   * The "add a column" pool
+   * ---------------------------------------------------------------------
+   */
+  const [addSearchText, setAddSearchText] = useState<string>("");
+
+  const stagedIds: Set<string> = useMemo(() => {
+    return new Set(
+      entries.map((entry: CustomizableColumn<TBaseModel>) => {
+        return entry.id;
+      }),
+    );
+  }, [entries]);
+
+  // Everything in the pool that is not already sitting in the list above.
+  const addableColumns: Array<CustomizableColumn<TBaseModel>> = useMemo(() => {
+    return (props.addableColumns?.columns || []).filter(
+      (entry: CustomizableColumn<TBaseModel>) => {
+        return !stagedIds.has(entry.id);
+      },
+    );
+  }, [props.addableColumns?.columns, stagedIds]);
+
+  const normalizedAddSearch: string = addSearchText.trim().toLowerCase();
+
+  const matchingAddableColumns: Array<CustomizableColumn<TBaseModel>> =
+    useMemo(() => {
+      if (normalizedAddSearch.length === 0) {
+        return addableColumns;
+      }
+
+      return addableColumns.filter((entry: CustomizableColumn<TBaseModel>) => {
+        return (entry.column.title || "")
+          .toLowerCase()
+          .includes(normalizedAddSearch);
+      });
+    }, [addableColumns, normalizedAddSearch]);
+
+  const addableResultLimit: number = props.addableColumns?.maxResults ?? 25;
+
+  const shownAddableColumns: Array<CustomizableColumn<TBaseModel>> =
+    useMemo(() => {
+      return matchingAddableColumns.slice(0, addableResultLimit);
+    }, [matchingAddableColumns, addableResultLimit]);
+
+  type AddColumnFunction = (entry: CustomizableColumn<TBaseModel>) => void;
+
+  /*
+   * An added column goes on the end and starts visible. Adding a column you
+   * then have to go and switch on would be a strange thing to ask of someone
+   * who just searched for it by name.
+   */
+  const addColumn: AddColumnFunction = (
+    entry: CustomizableColumn<TBaseModel>,
+  ): void => {
+    setEntries((current: Array<CustomizableColumn<TBaseModel>>) => {
+      if (
+        current.some((existing: CustomizableColumn<TBaseModel>) => {
+          return existing.id === entry.id;
+        })
+      ) {
+        return current;
+      }
+
+      return [...current, { ...entry, isVisible: true, isPinned: false }];
+    });
+  };
+
+  type RemoveColumnFunction = (id: string) => void;
+
+  const removeColumn: RemoveColumnFunction = (id: string): void => {
+    setEntries((current: Array<CustomizableColumn<TBaseModel>>) => {
+      const target: CustomizableColumn<TBaseModel> | undefined = current.find(
+        (entry: CustomizableColumn<TBaseModel>) => {
+          return entry.id === id;
+        },
+      );
+
+      if (!target || !target.isRemovable) {
+        return current;
+      }
+
+      /*
+       * Removing is hiding plus forgetting, so it is bound by the same rule:
+       * the last column standing cannot go.
+       */
+      const isLastVisible: boolean =
+        target.isVisible &&
+        current.filter((entry: CustomizableColumn<TBaseModel>) => {
+          return entry.isVisible;
+        }).length <= 1;
+
+      if (isLastVisible) {
+        return current;
+      }
+
+      return current.filter((entry: CustomizableColumn<TBaseModel>) => {
+        return entry.id !== id;
+      });
+    });
+  };
+
   type ToggleFunction = (id: string, isVisible: boolean) => void;
 
   const toggleColumn: ToggleFunction = (
@@ -303,6 +444,22 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
               moveColumn(index, index + 1);
             }}
           />
+          {entry.isRemovable && (
+            <Button
+              buttonSize={ButtonSize.Small}
+              buttonStyle={ButtonStyleType.ICON}
+              icon={IconProp.Close}
+              title=""
+              tooltip="Remove column"
+              ariaLabel={`Remove ${entry.column.title}`}
+              className="text-gray-400 hover:bg-red-100 hover:text-red-600 disabled:text-gray-200 disabled:hover:bg-transparent"
+              dataTestId={`column-remove-${entry.id}`}
+              disabled={isOnlyVisibleColumn}
+              onClick={() => {
+                removeColumn(entry.id);
+              }}
+            />
+          )}
         </div>
       </div>
     );
@@ -413,6 +570,157 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
     );
   };
 
+  type GetAddColumnSectionFunction = () => ReactElement;
+
+  const getAddColumnSection: GetAddColumnSectionFunction = (): ReactElement => {
+    const config: AddableColumnsConfig<TBaseModel> | undefined =
+      props.addableColumns;
+
+    if (!config) {
+      return <></>;
+    }
+
+    type GetBodyFunction = () => ReactElement;
+
+    const getBody: GetBodyFunction = (): ReactElement => {
+      if (config.errorMessage) {
+        return (
+          <p
+            className="px-3 py-4 text-sm text-red-500"
+            data-testid="add-column-error"
+          >
+            {config.errorMessage}
+          </p>
+        );
+      }
+
+      if (config.isLoading) {
+        return (
+          <p
+            className="px-3 py-4 text-sm text-gray-500"
+            data-testid="add-column-loading"
+          >
+            Loading...
+          </p>
+        );
+      }
+
+      if (addableColumns.length === 0) {
+        return (
+          <p
+            className="px-3 py-4 text-sm text-gray-500"
+            data-testid="add-column-empty"
+          >
+            {(config.columns || []).length === 0
+              ? config.emptyMessage || "Nothing to add."
+              : "Every one of these is already in the list above."}
+          </p>
+        );
+      }
+
+      if (shownAddableColumns.length === 0) {
+        return (
+          <p
+            className="px-3 py-4 text-sm text-gray-500"
+            data-testid="add-column-no-results"
+          >
+            No matches for &quot;{addSearchText}&quot;.
+          </p>
+        );
+      }
+
+      return (
+        <div className="divide-y divide-gray-100">
+          {shownAddableColumns.map((entry: CustomizableColumn<TBaseModel>) => {
+            return (
+              <div
+                key={entry.id}
+                className="flex items-center gap-2 px-3 py-2 transition-colors hover:bg-gray-50"
+              >
+                <span className="min-w-0 flex-1 break-words text-sm text-gray-700">
+                  {entry.column.title}
+                </span>
+                <Button
+                  buttonSize={ButtonSize.Small}
+                  buttonStyle={ButtonStyleType.ICON}
+                  icon={IconProp.Add}
+                  title=""
+                  tooltip="Add column"
+                  ariaLabel={`Add ${entry.column.title}`}
+                  className="flex-none text-gray-400 hover:bg-gray-200 hover:text-gray-700"
+                  dataTestId={`add-column-${entry.id}`}
+                  onClick={() => {
+                    addColumn(entry);
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      );
+    };
+
+    return (
+      <div className="space-y-2 pt-1" data-testid="add-column-section">
+        <div>
+          <h4 className="text-sm font-medium text-gray-900">{config.title}</h4>
+          {config.description ? (
+            <p className="text-xs text-gray-500">{config.description}</p>
+          ) : (
+            <></>
+          )}
+        </div>
+
+        <div className="relative">
+          <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+            <Icon icon={IconProp.Search} className="h-4 w-4 text-gray-400" />
+          </div>
+          <Input
+            type={InputType.TEXT}
+            placeholder={config.placeholder || "Search..."}
+            value={addSearchText}
+            dataTestId="add-column-search"
+            outerDivClassName="w-full"
+            className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-9 pr-9 text-sm placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+            onChange={(value: string) => {
+              setAddSearchText(value);
+            }}
+          />
+          {addSearchText.length > 0 && (
+            <button
+              type="button"
+              aria-label="Clear search"
+              title="Clear search"
+              data-testid="add-column-search-clear"
+              onClick={() => {
+                setAddSearchText("");
+              }}
+              className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 transition-colors hover:text-gray-600 focus:outline-none focus-visible:text-gray-600"
+            >
+              <Icon icon={IconProp.Close} className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+
+        <div className="max-h-48 overflow-y-auto overscroll-contain rounded-md border border-gray-200 bg-white">
+          {getBody()}
+        </div>
+
+        {/*
+         * Said out loud rather than silently truncating: a viewer who cannot
+         * see their key otherwise has no way to know that typing more of it
+         * would find it.
+         */}
+        {matchingAddableColumns.length > shownAddableColumns.length && (
+          <p className="text-xs text-gray-400" data-testid="add-column-hint">
+            Showing {shownAddableColumns.length} of{" "}
+            {matchingAddableColumns.length}. Search to narrow this down.
+          </p>
+        )}
+      </div>
+    );
+  };
+
   return (
     <Modal
       title={props.title || "Customize Columns"}
@@ -515,6 +823,8 @@ const ColumnCustomizationModal: ColumnCustomizationModalFunction = <
             ? "Clear the search to reorder columns."
             : "Drag a row, or use the arrows, to change the column order."}
         </p>
+
+        {getAddColumnSection()}
       </div>
     </Modal>
   );

package/UI/Components/ModelTable/ColumnPreference.ts

@@ -153,6 +153,12 @@ export interface CustomizableColumn<
   isVisible: boolean;
   // Pinned columns are always shown and cannot be moved.
   isPinned: boolean;
+  /*
+   * The picker may drop this column entirely, not just switch it off. True
+   * only for columns the viewer added themselves (attribute columns); a
+   * pinned column is never removable, since it is not the viewer's to touch.
+   */
+  isRemovable?: boolean | undefined;
 }
 
 export type IsDefaultHiddenFunction = <
@@ -214,7 +220,13 @@ export const getCustomizableColumns: GetCustomizableColumnsFunction = <
         }
       }
 
-      return { id, column, isVisible, isPinned };
+      return {
+        id,
+        column,
+        isVisible,
+        isPinned,
+        isRemovable: Boolean(column.isRemovable) && !isPinned,
+      };
     },
   );
 

package/UI/Components/MonitorTemplateVariables/TemplateVariablesModal.tsx

@@ -32,8 +32,8 @@ export interface ComponentProps {
  * that scales when a user groups by many attributes.
  *
  * Click a variable to copy `{{var}}` to the clipboard; the chip flips
- * to a "Copied" state briefly so the user gets feedback without a
- * toast.
+ * to a "Copied" state briefly so the feedback lands on the thing that
+ * was clicked.
  */
 const TemplateVariablesModal: FunctionComponent<ComponentProps> = (
   props: ComponentProps,

package/UI/Components/SideOver/SideOver.tsx

@@ -150,11 +150,11 @@ const SideOver: FunctionComponent<ComponentProps> = (
     /*
      * z-30 clears every tier of page chrome (sticky headers and table headers
      * at z-10/z-20, map and log-viewer toolbars at z-20) while staying under
-     * the app-wide overlays that must remain visible over a panel: Toast and
-     * the AI chat panel at z-40, Modal at z-50, portalled dropdown menus at
-     * z-60. Deliberately NOT z-40 — Toast and AIChatPanel are mounted ahead of
-     * the routed page in App.tsx, so an equal z-index would be broken in this
-     * panel's favour by document order and toasts would disappear behind it.
+     * the app-wide overlays that must remain visible over a panel: the AI chat
+     * panel at z-40, Modal at z-50, portalled dropdown menus at z-60.
+     * Deliberately NOT z-40 — AIChatPanel is mounted ahead of the routed page
+     * in App.tsx, so an equal z-index would be broken in this panel's favour
+     * by document order and the AI drawer would disappear behind it.
      *
      * role="dialog" without aria-modal, because the panel genuinely is not
      * modal: everything outside it stays clickable by design (both topology

package/UI/Components/StatusPage/ResourceGrid.tsx

@@ -4,6 +4,7 @@ import StatusPageResourceExplorerUtil, {
   StatusPageResourceGridModel,
 } from "../../../Utils/StatusPage/ResourceExplorer";
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
+import CheckboxElement from "../Checkbox/Checkbox";
 import Icon, { ThickProp } from "../Icon/Icon";
 import React, { FunctionComponent, ReactElement, useMemo } from "react";
 
@@ -22,6 +23,18 @@ export interface ComponentProps {
   isEditable: boolean;
   isDeleteable: boolean;
 
+  /*
+   * See ResourceList: a checkbox whose only action is removing, so it is drawn
+   * only for somebody who may remove. A grid group is the same resources as a
+   * list group in a different arrangement, and clearing twenty seven of them
+   * one at a time is no better here than it is there (issue #3419) - so the
+   * chips carry the same box the rows do, and the bulk bar the pane draws above
+   * is shared between the two.
+   */
+  isSelectable: boolean;
+  selectedResourceIds: Set<string>;
+  onToggleResourceSelected: (statusPageResource: StatusPageResource) => void;
+
   onAddToCell: (rowValue: string | null, columnValue: string | null) => void;
   onEdit: (statusPageResource: StatusPageResource) => void;
   onDelete: (statusPageResource: StatusPageResource) => void;
@@ -50,6 +63,57 @@ const ResourceGrid: FunctionComponent<ComponentProps> = (
       });
     }, [props.statusPageResources, props.rowValues, props.columnValues]);
 
+  type IsResourceSelectedFunction = (
+    statusPageResource: StatusPageResource,
+  ) => boolean;
+
+  const isResourceSelected: IsResourceSelectedFunction = (
+    statusPageResource: StatusPageResource,
+  ): boolean => {
+    if (!props.isSelectable) {
+      return false;
+    }
+
+    const resourceId: string | null =
+      StatusPageResourceExplorerUtil.getResourceId(statusPageResource);
+
+    return Boolean(resourceId && props.selectedResourceIds.has(resourceId));
+  };
+
+  type RenderSelectFunction = (
+    statusPageResource: StatusPageResource,
+  ) => ReactElement;
+
+  const renderSelect: RenderSelectFunction = (
+    statusPageResource: StatusPageResource,
+  ): ReactElement => {
+    if (!props.isSelectable) {
+      return <></>;
+    }
+
+    const resourceId: string | null =
+      StatusPageResourceExplorerUtil.getResourceId(statusPageResource);
+    const name: string =
+      StatusPageResourceExplorerUtil.getResourceName(statusPageResource);
+
+    return (
+      <span
+        className="flex flex-shrink-0 items-center"
+        data-testid="status-page-resource-grid-select"
+      >
+        <CheckboxElement
+          value={isResourceSelected(statusPageResource)}
+          disabled={!resourceId}
+          ariaLabel={`Select ${name}`}
+          hoverText={`Select ${name}`}
+          onChange={() => {
+            props.onToggleResourceSelected(statusPageResource);
+          }}
+        />
+      </span>
+    );
+  };
+
   type RenderResourceChipFunction = (
     statusPageResource: StatusPageResource,
   ) => ReactElement;
@@ -60,12 +124,21 @@ const ResourceGrid: FunctionComponent<ComponentProps> = (
     const name: string =
       StatusPageResourceExplorerUtil.getResourceName(statusPageResource);
 
+    const isSelected: boolean = isResourceSelected(statusPageResource);
+
     return (
       <div
         key={statusPageResource._id?.toString()}
-        className="group flex items-center justify-between gap-2 rounded-lg border border-gray-200 bg-white px-2 py-1.5 text-xs shadow-sm transition-shadow hover:shadow"
+        className={`group flex items-center justify-between gap-2 rounded-lg border px-2 py-1.5 text-xs shadow-sm transition-shadow hover:shadow ${
+          isSelected
+            ? "border-indigo-300 bg-indigo-50"
+            : "border-gray-200 bg-white"
+        }`}
         data-testid="status-page-resource-grid-cell-item"
+        data-selected={isSelected}
       >
+        {renderSelect(statusPageResource)}
+
         <div className="min-w-0 flex-1">
           <div className="truncate font-medium text-gray-900">
             {props.getResourceElement(statusPageResource)}
@@ -248,9 +321,16 @@ const ResourceGrid: FunctionComponent<ComponentProps> = (
                 return (
                   <div
                     key={statusPageResource._id?.toString()}
-                    className="flex items-center justify-between gap-2 rounded-lg border border-amber-200 bg-white px-3 py-2 text-xs"
+                    className={`flex items-center justify-between gap-2 rounded-lg border border-amber-200 px-3 py-2 text-xs ${
+                      isResourceSelected(statusPageResource)
+                        ? "bg-indigo-50"
+                        : "bg-white"
+                    }`}
                     data-testid="status-page-resource-grid-orphan"
+                    data-selected={isResourceSelected(statusPageResource)}
                   >
+                    {renderSelect(statusPageResource)}
+
                     <div className="min-w-0 flex-1">
                       <div className="truncate font-medium text-gray-900">
                         {props.getResourceElement(statusPageResource)}