@oneuptime/common 11.7.1 → 11.7.3

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

@@ -78,9 +78,19 @@ export interface ComponentProps<T extends GenericObject> {
   bulkSelectedItems?: Array<T> | undefined;
   onBulkSelectedItemAdded?: ((item: T) => void) | undefined;
   onBulkSelectedItemRemoved?: ((item: T) => void) | undefined;
-  onBulkSelectAllItems?: (() => void) | undefined;
+  /*
+   * Resolves to whether every matching row really got selected. The table
+   * only claims "all items selected" when it did - otherwise a failed
+   * select-all would hide the Select All button while leaving just the
+   * current page selected, with no way to retry.
+   */
+  onBulkSelectAllItems?: (() => Promise<boolean>) | undefined;
   onBulkSelectItemsOnCurrentPage?: (() => void) | undefined;
   onBulkClearAllItems?: (() => void) | undefined;
+  bulkSelectionError?: string | undefined;
+  isBulkSelectAllLoading?: boolean | undefined;
+  isBulkSelectionTruncated?: boolean | undefined;
+  bulkSelectionTotalCount?: number | undefined;
   matchBulkSelectedItemByField?: keyof T | undefined; // which field to use to match selected items. For exmaple this could be '_id'
   onBulkActionEnd?: (() => void) | undefined;
   onBulkActionStart?: (() => void) | undefined;
@@ -156,13 +166,38 @@ const Table: TableFunction = <T extends GenericObject>(
   useEffect(() => {
     if (props.bulkSelectedItems) {
       setBulkSelectedItems(props.bulkSelectedItems);
+
+      /*
+       * "All items selected" is a claim about a selection that exists, so it
+       * cannot outlive one. The parent drops the selection whenever the query
+       * changes underneath it (and after a bulk action completes), and this
+       * state is local to the table - without this, the next single row the
+       * user ticked would re-open the bulk bar with the "Select All" button
+       * still hidden, as though everything matching were already selected.
+       */
+      if (props.bulkSelectedItems.length === 0) {
+        setIsAllItemsSelected(false);
+      }
     }
   }, [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) {
@@ -238,16 +273,20 @@ const Table: TableFunction = <T extends GenericObject>(
           if (props.matchBulkSelectedItemByField === undefined) {
             return;
           }
-          const index: number = bulkSelectedItems.findIndex((x: T) => {
-            return (
-              x[props.matchBulkSelectedItemByField!]?.toString() ===
-              item[props.matchBulkSelectedItemByField!]?.toString()
-            );
-          });
 
-          if (index > -1) {
-            bulkSelectedItems.splice(index, 1);
-          }
+          /*
+           * Rebuild rather than splice: this array is the parent's state
+           * array by reference (see the sync effect above), so mutating it
+           * in place edits React state behind React's back.
+           */
+          setBulkSelectedItems(
+            bulkSelectedItems.filter((x: T) => {
+              return (
+                x[props.matchBulkSelectedItemByField!]?.toString() !==
+                item[props.matchBulkSelectedItemByField!]?.toString()
+              );
+            }),
+          );
 
           props.onBulkSelectedItemRemoved?.(item);
         }}
@@ -301,14 +340,27 @@ const Table: TableFunction = <T extends GenericObject>(
             props.onBulkClearAllItems?.();
             setIsAllItemsSelected(false);
           }}
-          onSelectAllClick={() => {
-            props.onBulkSelectAllItems?.();
-            setIsAllItemsSelected(true);
+          onSelectAllClick={async () => {
+            const didSelectAllItems: boolean =
+              (await props.onBulkSelectAllItems?.()) ?? false;
+
+            /*
+             * Only on success. Otherwise the bulk bar would hide the Select
+             * All button and claim everything was selected while the
+             * selection is still just the current page.
+             */
+            if (didSelectAllItems) {
+              setIsAllItemsSelected(true);
+            }
           }}
           selectedItems={bulkSelectedItems}
           singularLabel={translatedSingularLabel}
           pluralLabel={translatedPluralLabel}
           isAllItemsSelected={isAllItemsSelected}
+          errorMessage={props.bulkSelectionError}
+          isSelectingAllItems={props.isBulkSelectAllLoading}
+          isSelectionTruncated={props.isBulkSelectionTruncated}
+          totalMatchingItemsCount={props.bulkSelectionTotalCount}
           onActionStart={props.onBulkActionStart}
           onActionEnd={() => {
             setIsAllItemsSelected(false);

package/UI/Components/Table/TableRow.tsx

@@ -77,6 +77,13 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
     };
   }, []);
 
+  // The columns this row will actually put on screen.
+  const renderedColumns: Array<Column<T>> = (props.columns || []).filter(
+    (column: Column<T>) => {
+      return !(column.hideOnMobile && isMobile);
+    },
+  );
+
   type GetRowFunction = (provided?: DraggableProvided) => ReactElement;
 
   const getRow: GetRowFunction = (
@@ -339,186 +346,184 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
             </td>
           )}
           {props.columns &&
-            props.columns
-              .filter((column: Column<T>) => {
-                return !(column.hideOnMobile && isMobile);
-              })
-              .map((column: Column<T>, i: number) => {
-                let className: string =
-                  "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-                if (i === props.columns.length - 1) {
-                  className =
-                    "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-                }
-
-                let columnContent: React.ReactNode = null;
-
-                if (column.key && !column.getElement) {
-                  columnContent =
-                    column.type === FieldType.Date ? (
-                      props.item[column.key] ? (
-                        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-                          props.item[column.key] as string,
-                          true,
-                        )
-                      ) : (
-                        column.noValueMessage || ""
-                      )
-                    ) : column.type === FieldType.DateTime ? (
-                      props.item[column.key] ? (
-                        OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
-                          props.item[column.key] as string,
-                          false,
-                        )
-                      ) : (
-                        column.noValueMessage || ""
-                      )
-                    ) : column.type === FieldType.USDCents ? (
-                      props.item[column.key] ? (
-                        ((props.item[column.key] as number) || 0) / 100 + " USD"
-                      ) : (
-                        column.noValueMessage || "0 USD"
-                      )
-                    ) : column.type === FieldType.Percent ? (
-                      props.item[column.key] ? (
-                        props.item[column.key] + "%"
-                      ) : (
-                        column.noValueMessage || "0%"
+            renderedColumns.map((column: Column<T>, i: number) => {
+              let className: string =
+                "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
+              /*
+               * Compared against the rendered count, not the declared one:
+               * with any column filtered out the two differ, and the extra
+               * right padding would land on the wrong cell - or on none.
+               */
+              if (i === renderedColumns.length - 1) {
+                className =
+                  "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
+              }
+
+              let columnContent: React.ReactNode = null;
+
+              if (column.key && !column.getElement) {
+                columnContent =
+                  column.type === FieldType.Date ? (
+                    props.item[column.key] ? (
+                      OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+                        props.item[column.key] as string,
+                        true,
                       )
-                    ) : column.type === FieldType.Color ? (
-                      props.item[column.key] ? (
-                        <ColorInput value={props.item[column.key] as Color} />
-                      ) : (
-                        column.noValueMessage || "0%"
-                      )
-                    ) : column.type === FieldType.LongText ? (
-                      props.item[column.key] ? (
-                        <LongTextViewer
-                          text={props.item[column.key] as string}
-                        />
-                      ) : (
-                        column.noValueMessage || ""
-                      )
-                    ) : column.type === FieldType.Boolean ? (
-                      props.item[column.key] ? (
-                        <Icon
-                          icon={IconProp.Check}
-                          className={"h-5 w-5 text-gray-500"}
-                          thick={ThickProp.Thick}
-                        />
-                      ) : (
-                        <Icon
-                          icon={IconProp.False}
-                          className={"h-5 w-5 text-gray-500"}
-                          thick={ThickProp.Thick}
-                        />
+                    ) : (
+                      column.noValueMessage || ""
+                    )
+                  ) : column.type === FieldType.DateTime ? (
+                    props.item[column.key] ? (
+                      OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+                        props.item[column.key] as string,
+                        false,
                       )
                     ) : (
-                      getNestedValue(
-                        props.item,
-                        String(column.key),
-                      )?.toString() ||
-                      column.noValueMessage ||
-                      ""
-                    );
-                } else if (column.key && column.getElement) {
-                  columnContent = column.getElement(props.item);
-                }
-
-                const contentWrapperClassName: string = column.contentClassName
-                  ? column.contentClassName
-                  : "";
-
-                const actionsContainerClassName: string =
-                  column.contentClassName
-                    ? `flex justify-end ${column.contentClassName}`
-                    : "flex justify-end";
+                      column.noValueMessage || ""
+                    )
+                  ) : column.type === FieldType.USDCents ? (
+                    props.item[column.key] ? (
+                      ((props.item[column.key] as number) || 0) / 100 + " USD"
+                    ) : (
+                      column.noValueMessage || "0 USD"
+                    )
+                  ) : column.type === FieldType.Percent ? (
+                    props.item[column.key] ? (
+                      props.item[column.key] + "%"
+                    ) : (
+                      column.noValueMessage || "0%"
+                    )
+                  ) : column.type === FieldType.Color ? (
+                    props.item[column.key] ? (
+                      <ColorInput value={props.item[column.key] as Color} />
+                    ) : (
+                      column.noValueMessage || "0%"
+                    )
+                  ) : column.type === FieldType.LongText ? (
+                    props.item[column.key] ? (
+                      <LongTextViewer text={props.item[column.key] as string} />
+                    ) : (
+                      column.noValueMessage || ""
+                    )
+                  ) : column.type === FieldType.Boolean ? (
+                    props.item[column.key] ? (
+                      <Icon
+                        icon={IconProp.Check}
+                        className={"h-5 w-5 text-gray-500"}
+                        thick={ThickProp.Thick}
+                      />
+                    ) : (
+                      <Icon
+                        icon={IconProp.False}
+                        className={"h-5 w-5 text-gray-500"}
+                        thick={ThickProp.Thick}
+                      />
+                    )
+                  ) : (
+                    getNestedValue(
+                      props.item,
+                      String(column.key),
+                    )?.toString() ||
+                    column.noValueMessage ||
+                    ""
+                  );
+              } else if (column.key && column.getElement) {
+                columnContent = column.getElement(props.item);
+              }
+
+              const contentWrapperClassName: string = column.contentClassName
+                ? column.contentClassName
+                : "";
+
+              const actionsContainerClassName: string = column.contentClassName
+                ? `flex justify-end ${column.contentClassName}`
+                : "flex justify-end";
+
+              return (
+                <td
+                  key={i}
+                  className={className}
+                  style={{
+                    textAlign:
+                      column.type === FieldType.Actions ? "right" : "left",
+                  }}
+                  onClick={() => {
+                    if (column.tooltipText) {
+                      setTooltipModalText(column.tooltipText(props.item));
+                    }
+                  }}
+                >
+                  {columnContent !== null && columnContent !== undefined && (
+                    <div className={contentWrapperClassName}>
+                      {columnContent}
+                    </div>
+                  )}
+                  {column.type === FieldType.Actions && (
+                    <div className={actionsContainerClassName}>
+                      {error && (
+                        <div className="text-align-left">
+                          <ConfirmModal
+                            title={`Error`}
+                            description={error}
+                            submitButtonText={"Close"}
+                            onSubmit={() => {
+                              return setError("");
+                            }}
+                          />
+                        </div>
+                      )}
+                      {props.actionButtons?.map(
+                        (button: ActionButtonSchema<T>, i: number) => {
+                          if (
+                            button.isVisible &&
+                            !button.isVisible(props.item)
+                          ) {
+                            return <div key={i}></div>;
+                          }
 
-                return (
-                  <td
-                    key={i}
-                    className={className}
-                    style={{
-                      textAlign:
-                        column.type === FieldType.Actions ? "right" : "left",
-                    }}
-                    onClick={() => {
-                      if (column.tooltipText) {
-                        setTooltipModalText(column.tooltipText(props.item));
-                      }
-                    }}
-                  >
-                    {columnContent !== null && columnContent !== undefined && (
-                      <div className={contentWrapperClassName}>
-                        {columnContent}
-                      </div>
-                    )}
-                    {column.type === FieldType.Actions && (
-                      <div className={actionsContainerClassName}>
-                        {error && (
-                          <div className="text-align-left">
-                            <ConfirmModal
-                              title={`Error`}
-                              description={error}
-                              submitButtonText={"Close"}
-                              onSubmit={() => {
-                                return setError("");
-                              }}
-                            />
-                          </div>
-                        )}
-                        {props.actionButtons?.map(
-                          (button: ActionButtonSchema<T>, i: number) => {
-                            if (
-                              button.isVisible &&
-                              !button.isVisible(props.item)
-                            ) {
-                              return <div key={i}></div>;
-                            }
-
-                            // Hide button on mobile if hideOnMobile is true
-                            if (button.hideOnMobile && isMobile) {
-                              return <div key={i}></div>;
-                            }
-
-                            return (
-                              <div key={i}>
-                                <Button
-                                  buttonSize={ButtonSize.Small}
-                                  title={button.title}
-                                  icon={button.icon}
-                                  buttonStyle={button.buttonStyleType}
-                                  isLoading={isButtonLoading[i]}
-                                  onClick={() => {
-                                    if (button.onClick) {
-                                      isButtonLoading[i] = true;
-                                      setIsButtonLoading(isButtonLoading);
+                          // Hide button on mobile if hideOnMobile is true
+                          if (button.hideOnMobile && isMobile) {
+                            return <div key={i}></div>;
+                          }
 
-                                      button.onClick(
-                                        props.item,
-                                        () => {
-                                          // on action complete
-                                          isButtonLoading[i] = false;
-                                          setIsButtonLoading(isButtonLoading);
-                                        },
-                                        (err: Error) => {
-                                          isButtonLoading[i] = false;
-                                          setIsButtonLoading(isButtonLoading);
-                                          setError((err as Error).message);
-                                        },
-                                      );
-                                    }
-                                  }}
-                                />
-                              </div>
-                            );
-                          },
-                        )}
-                      </div>
-                    )}
-                  </td>
-                );
-              })}
+                          return (
+                            <div key={i}>
+                              <Button
+                                buttonSize={ButtonSize.Small}
+                                title={button.title}
+                                icon={button.icon}
+                                buttonStyle={button.buttonStyleType}
+                                isLoading={isButtonLoading[i]}
+                                onClick={() => {
+                                  if (button.onClick) {
+                                    isButtonLoading[i] = true;
+                                    setIsButtonLoading(isButtonLoading);
+
+                                    button.onClick(
+                                      props.item,
+                                      () => {
+                                        // on action complete
+                                        isButtonLoading[i] = false;
+                                        setIsButtonLoading(isButtonLoading);
+                                      },
+                                      (err: Error) => {
+                                        isButtonLoading[i] = false;
+                                        setIsButtonLoading(isButtonLoading);
+                                        setError((err as Error).message);
+                                      },
+                                    );
+                                  }
+                                }}
+                              />
+                            </div>
+                          );
+                        },
+                      )}
+                    </div>
+                  )}
+                </td>
+              );
+            })}
         </tr>
         {tooltipModalText && (
           <ConfirmModal

package/UI/Components/Table/Types/Column.ts

@@ -5,6 +5,8 @@ import { ReactElement } from "react";
 
 export default interface Column<T extends GenericObject> {
   title: string;
+  // Stable identity carried over from the ModelTable column, if it had one.
+  id?: string | undefined;
   description?: string | undefined;
   disableSort?: boolean | undefined;
   tooltipText?: ((item: T) => string) | undefined;
@@ -15,6 +17,24 @@ export default interface Column<T extends GenericObject> {
   alignItem?: AlignItem | undefined;
   key?: keyof T | null; //can be null because actions column does not have a key.
   hideOnMobile?: boolean | undefined; // Hide column on mobile devices
+  /*
+   * Every field that backs this cell, in declaration order. A ModelTable
+   * column may declare more than one - e.g. the alert "Affected Resources"
+   * cell spans hosts / kubernetesClusters / dockerHosts / podmanHosts /
+   * services - while `key` only ever holds the first one, because that is the
+   * one used for sorting and for the default renderer. CSV export reads all
+   * of them so it does not silently drop the rest. Defaults to [key].
+   */
+  exportKeys?: Array<string> | undefined;
+  /*
+   * Exact text for this column's CSV cell, overriding the value read off the
+   * row. Use it when the rendered cell is built from something the row does
+   * not carry under the column's own field (data fetched alongside the table,
+   * a computed summary, several fields combined into one phrase).
+   */
+  getExportValue?: ((item: T) => string) | undefined;
+  // Leave this column out of the CSV export entirely.
+  disableCsvExport?: boolean | undefined;
   getElement?:
     | ((item: T, onBeforeFetchData?: T | undefined) => ReactElement)
     | undefined;