@oneuptime/common 11.7.2 → 11.7.4

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;

package/UI/Components/TelemetryViewer/components/TelemetryTimeRangePicker.tsx

@@ -14,12 +14,20 @@ import InBetween from "../../../../Types/BaseDatabase/InBetween";
 import StartAndEndDate, {
   StartAndEndDateType,
 } from "../../Date/StartAndEndDate";
+import {
+  DropdownHorizontalAlignment,
+  getDropdownAlignmentClassName,
+  useDropdownHorizontalAlignment,
+} from "../../../Utils/DropdownAlignment";
 
 export interface TelemetryTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
 }
 
+// Matches the Tailwind `w-72` on the dropdown below (18rem).
+export const TIME_RANGE_DROPDOWN_WIDTH_IN_PX: number = 288;
+
 const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
   { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
   { range: TimeRange.PAST_FIFTEEN_MINS, label: "Past 15 Minutes" },
@@ -67,6 +75,20 @@ const TelemetryTimeRangePicker: FunctionComponent<
   const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
     null!,
   );
+  const buttonRef: React.RefObject<HTMLButtonElement> =
+    useRef<HTMLButtonElement>(null!);
+  const dropdownRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    null!,
+  );
+
+  const alignment: DropdownHorizontalAlignment = useDropdownHorizontalAlignment(
+    {
+      isOpen: isOpen,
+      anchorRef: buttonRef,
+      dropdownRef: dropdownRef,
+      dropdownWidthInPx: TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
+    },
+  );
 
   useEffect(() => {
     const handleClickOutside: (e: MouseEvent) => void = (
@@ -117,7 +139,11 @@ const TelemetryTimeRangePicker: FunctionComponent<
   return (
     <div ref={containerRef} className="relative">
       <button
+        ref={buttonRef}
         type="button"
+        data-testid="telemetry-time-range-picker-button"
+        aria-haspopup="true"
+        aria-expanded={isOpen}
         className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
           isOpen
             ? "border-indigo-300 bg-indigo-50 text-indigo-700"
@@ -136,7 +162,14 @@ const TelemetryTimeRangePicker: FunctionComponent<
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 top-full z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white shadow-lg">
+        <div
+          ref={dropdownRef}
+          data-testid="telemetry-time-range-picker-dropdown"
+          data-align={alignment}
+          className={`absolute ${getDropdownAlignmentClassName(
+            alignment,
+          )} top-full z-50 mt-1 w-72 max-w-[calc(100vw-1rem)] rounded-lg border border-gray-200 bg-white shadow-lg`}
+        >
           <div className="max-h-64 overflow-y-auto py-1">
             {PRESET_OPTIONS.map(
               (option: { range: TimeRange; label: string }) => {

package/UI/Utils/DropdownAlignment.ts

@@ -0,0 +1,162 @@
+import React, { useEffect, useState } from "react";
+
+/*
+ * Horizontal edge of the trigger that a popup pins itself to.
+ * "Left" means the popup grows rightwards from the trigger's left edge
+ * (Tailwind `left-0`), "Right" means it grows leftwards from the trigger's
+ * right edge (Tailwind `right-0`).
+ */
+export enum DropdownHorizontalAlignment {
+  Left = "left",
+  Right = "right",
+}
+
+// Breathing room we keep between a popup and the edge of the viewport.
+export const DEFAULT_DROPDOWN_VIEWPORT_MARGIN_IN_PX: number = 8;
+
+export interface DropdownAlignmentInput {
+  // Viewport-relative left edge of the trigger, as reported by getBoundingClientRect().
+  anchorLeft: number;
+  // Viewport-relative right edge of the trigger.
+  anchorRight: number;
+  // Rendered width of the popup in pixels.
+  dropdownWidth: number;
+  // Width of the viewport in pixels.
+  viewportWidth: number;
+  // Optional override for the viewport gutter.
+  viewportMargin?: number | undefined;
+}
+
+/*
+ * Picks the edge a popup should align to so that it stays inside the viewport.
+ *
+ * Left alignment is preferred because it reads naturally next to the trigger.
+ * We only flip to the right edge when left alignment would spill past the right
+ * side of the viewport, and we never flip if doing so would spill past the left
+ * side by even more (which is what produced the off-screen popup on the metric
+ * explorer toolbar, where the trigger sits at the far left of the page).
+ */
+export function getDropdownHorizontalAlignment(
+  input: DropdownAlignmentInput,
+): DropdownHorizontalAlignment {
+  const margin: number =
+    input.viewportMargin === undefined
+      ? DEFAULT_DROPDOWN_VIEWPORT_MARGIN_IN_PX
+      : input.viewportMargin;
+
+  /*
+   * Before the popup is laid out (or in a non-visual environment) measurements
+   * come back as zero. There is nothing to solve for, so keep the default.
+   */
+  if (
+    !Number.isFinite(input.dropdownWidth) ||
+    !Number.isFinite(input.viewportWidth) ||
+    input.dropdownWidth <= 0 ||
+    input.viewportWidth <= 0
+  ) {
+    return DropdownHorizontalAlignment.Left;
+  }
+
+  // How far a left-aligned popup would poke past the right gutter.
+  const leftAlignedOverflow: number =
+    input.anchorLeft + input.dropdownWidth - (input.viewportWidth - margin);
+
+  // How far a right-aligned popup would poke past the left gutter.
+  const rightAlignedOverflow: number =
+    margin - (input.anchorRight - input.dropdownWidth);
+
+  if (leftAlignedOverflow <= 0) {
+    return DropdownHorizontalAlignment.Left;
+  }
+
+  if (rightAlignedOverflow <= 0) {
+    return DropdownHorizontalAlignment.Right;
+  }
+
+  // Neither edge fits. Pick whichever clips the least, preferring left on a tie.
+  return leftAlignedOverflow <= rightAlignedOverflow
+    ? DropdownHorizontalAlignment.Left
+    : DropdownHorizontalAlignment.Right;
+}
+
+/*
+ * Tailwind positioning class for an alignment. Kept next to the resolver so
+ * callers cannot drift out of sync with the enum.
+ */
+export function getDropdownAlignmentClassName(
+  alignment: DropdownHorizontalAlignment,
+): string {
+  return alignment === DropdownHorizontalAlignment.Right ? "right-0" : "left-0";
+}
+
+export interface UseDropdownHorizontalAlignmentOptions {
+  // Only measure while the popup is actually on screen.
+  isOpen: boolean;
+  // The trigger the popup hangs off.
+  anchorRef: React.RefObject<HTMLElement>;
+  // The popup itself. When it has not been laid out we fall back to the declared width.
+  dropdownRef?: React.RefObject<HTMLElement> | undefined;
+  // Width the popup is styled to (e.g. 288 for Tailwind `w-72`).
+  dropdownWidthInPx: number;
+  viewportMargin?: number | undefined;
+}
+
+/*
+ * Keeps a popup's horizontal alignment in sync with the space available around
+ * its trigger. Re-measures when the popup opens and whenever the viewport
+ * changes size or scrolls the trigger somewhere new.
+ */
+export function useDropdownHorizontalAlignment(
+  options: UseDropdownHorizontalAlignmentOptions,
+): DropdownHorizontalAlignment {
+  const [alignment, setAlignment] = useState<DropdownHorizontalAlignment>(
+    DropdownHorizontalAlignment.Left,
+  );
+
+  const {
+    isOpen,
+    anchorRef,
+    dropdownRef,
+    dropdownWidthInPx,
+    viewportMargin,
+  }: UseDropdownHorizontalAlignmentOptions = options;
+
+  useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+
+    const measure: () => void = (): void => {
+      const anchor: HTMLElement | null = anchorRef.current;
+
+      if (!anchor || typeof anchor.getBoundingClientRect !== "function") {
+        return;
+      }
+
+      const anchorRect: DOMRect = anchor.getBoundingClientRect();
+      const measuredWidth: number = dropdownRef?.current?.offsetWidth || 0;
+
+      setAlignment(
+        getDropdownHorizontalAlignment({
+          anchorLeft: anchorRect.left,
+          anchorRight: anchorRect.right,
+          dropdownWidth: measuredWidth > 0 ? measuredWidth : dropdownWidthInPx,
+          viewportWidth: window.innerWidth,
+          viewportMargin: viewportMargin,
+        }),
+      );
+    };
+
+    measure();
+
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+    };
+  }, [isOpen, anchorRef, dropdownRef, dropdownWidthInPx, viewportMargin]);
+
+  return alignment;
+}