@oneuptime/common 11.7.3 → 11.7.4

package/UI/Components/Runbook/StepTimeoutInput.tsx

@@ -0,0 +1,173 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useEffect,
+  useId,
+  useState,
+} from "react";
+import {
+  NON_NUMERIC_TIMEOUT_MESSAGE,
+  TimeoutBounds,
+  getTimeoutValidationError,
+  secondsInputValueToTimeoutInMs,
+  timeoutInMsToSecondsInputValue,
+  willTimeoutBeClamped,
+} from "../../../Types/Runbook/RunbookStepTimeout";
+
+export interface ComponentProps {
+  label: string;
+  // Stored value, in milliseconds. Undefined means "use the default".
+  value: number | undefined;
+  bounds: TimeoutBounds;
+  onChange: (timeoutInMs: number | undefined) => void;
+  description?: ReactNode | undefined;
+  dataTestId?: string | undefined;
+  disabled?: boolean | undefined;
+}
+
+/*
+ * Seconds-in, milliseconds-out editor for a per-step timeout.
+ *
+ * The typed text is held locally rather than derived from the stored value on
+ * every keystroke: deriving it would fight the author mid-edit, because a
+ * partially typed "0" or an emptied field both resolve to "unset" and would
+ * erase what they were typing. The stored value only moves when the text
+ * parses to something usable.
+ */
+const StepTimeoutInput: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const uniqueId: string = useId();
+  const inputId: string = `step-timeout-${uniqueId}`;
+  const describedById: string = `step-timeout-help-${uniqueId}`;
+  const errorId: string = `step-timeout-error-${uniqueId}`;
+
+  const [text, setText] = useState<string>(
+    timeoutInMsToSecondsInputValue(props.value),
+  );
+
+  /*
+   * A number input reports an empty string for text it cannot parse — a
+   * dangling exponent ("1e"), a lone "-" — while still showing that text to
+   * the author. Tracked separately from `text` so an unparseable keystroke
+   * does not read as "the author cleared the field".
+   */
+  const [hasUnparseableInput, setHasUnparseableInput] =
+    useState<boolean>(false);
+
+  /*
+   * Re-sync when the step being edited changes underneath us (collapse /
+   * reorder / reload). Skipped while the text still represents the stored
+   * value so the author's in-progress typing survives re-renders.
+   */
+  useEffect(() => {
+    const storedAsText: string = timeoutInMsToSecondsInputValue(props.value);
+    setText((currentText: string) => {
+      return secondsInputValueToTimeoutInMs(currentText) === props.value
+        ? currentText
+        : storedAsText;
+    });
+  }, [props.value]);
+
+  const validationError: string | null = hasUnparseableInput
+    ? NON_NUMERIC_TIMEOUT_MESSAGE
+    : getTimeoutValidationError(text, props.bounds);
+
+  const defaultInSeconds: number = props.bounds.defaultInMs / 1000;
+
+  const handleChange: (value: string, isUnparseable: boolean) => void = (
+    value: string,
+    isUnparseable: boolean,
+  ): void => {
+    if (isUnparseable) {
+      /*
+       * Hold the stored value. Reporting undefined here would discard a
+       * timeout the author had already saved, without them touching a digit —
+       * the field would look edited, save cleanly, and the step would silently
+       * drop back to the default.
+       */
+      setHasUnparseableInput(true);
+      return;
+    }
+
+    setHasUnparseableInput(false);
+    setText(value);
+    props.onChange(secondsInputValueToTimeoutInMs(value));
+  };
+
+  /*
+   * Only a usable-but-out-of-range value gets clamped at run time. Anything
+   * unusable falls back to the default instead, so the two cases need
+   * different copy.
+   */
+  const consequence: string = hasUnparseableInput
+    ? "The saved value is unchanged."
+    : willTimeoutBeClamped(text, props.bounds)
+      ? "Values outside the range are clamped when the step runs."
+      : "Leave the field blank to use the default.";
+
+  let inputClassName: string =
+    "block w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm";
+
+  if (validationError) {
+    inputClassName +=
+      " border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500";
+  }
+
+  if (props.disabled) {
+    inputClassName += " bg-gray-100 text-gray-500 cursor-not-allowed";
+  }
+
+  return (
+    <div>
+      <label
+        htmlFor={inputId}
+        className="block text-xs font-medium text-gray-700 mb-1.5"
+      >
+        {props.label}
+        <span className="ml-2 text-[10px] font-normal text-gray-400">
+          seconds
+        </span>
+      </label>
+      <input
+        id={inputId}
+        type="number"
+        inputMode="decimal"
+        min={props.bounds.minInMs / 1000}
+        max={props.bounds.maxInMs / 1000}
+        step="any"
+        disabled={props.disabled}
+        className={inputClassName}
+        value={text}
+        placeholder={`${defaultInSeconds}`}
+        /*
+         * The error is part of the field's description, not only a live region:
+         * a screen reader that reaches an already-invalid field on focus still
+         * hears why.
+         */
+        aria-describedby={
+          validationError ? `${describedById} ${errorId}` : describedById
+        }
+        aria-invalid={validationError ? true : undefined}
+        data-testid={props.dataTestId}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          handleChange(e.target.value, e.target.validity?.badInput === true);
+        }}
+      />
+      <p id={describedById} className="text-xs text-gray-500 mt-1.5">
+        {props.description ? <>{props.description} </> : null}
+        Leave blank to use the default of {defaultInSeconds} seconds. Allowed
+        range: {props.bounds.minInMs / 1000}–{props.bounds.maxInMs / 1000}{" "}
+        seconds.
+      </p>
+      {validationError ? (
+        <p id={errorId} role="alert" className="text-xs text-red-600 mt-1">
+          {validationError} {consequence}
+        </p>
+      ) : null}
+    </div>
+  );
+};
+
+export default StepTimeoutInput;

package/UI/Components/StatusPage/ResourceGroupSection.tsx

@@ -0,0 +1,231 @@
+import Icon, { ThickProp } from "../Icon/Icon";
+import MarkdownViewer from "../Markdown.tsx/LazyMarkdownViewer";
+import IconProp from "../../../Types/Icon/IconProp";
+import StatusPageGroupNestingLayoutUtil from "../../../Utils/StatusPage/GroupNestingLayout";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+
+export interface ComponentProps {
+  /*
+   * 0 for a top level group, 1 for its children, and so on. Everything about
+   * how this section is drawn comes from it - see GroupNestingLayout.
+   */
+  depth: number;
+  name: string;
+  /*
+   * Markdown. Rendered below the header rather than inside it - a description
+   * may contain links, and a link inside a button is not something a browser or
+   * a screen reader can make sense of.
+   */
+  description?: string | undefined;
+  /*
+   * Rendered next to the name when the group has sub groups. Pre-translated by
+   * the caller: this component has no i18n of its own.
+   */
+  subGroupCountLabel?: string | undefined;
+  /*
+   * The group's rolled up status or uptime, already formatted and translated by
+   * the caller ("99.9% uptime", "Operational"). Drawn with a status dot so it
+   * reads as a rollup of everything below rather than as one more resource
+   * reading, and it stays visible while the section is open - the point of the
+   * hierarchy is that every level always shows what it rolls up, and a number
+   * that disappears on expand is a number you cannot compare against the level
+   * below it.
+   */
+  rollupLabel?: string | undefined;
+  /* Hex or css colour for the rollup, from the rolled up status. */
+  rollupColor?: string | undefined;
+  isInitiallyExpanded?: boolean | undefined;
+  /* The group's own resources. */
+  resourcesElement?: ReactElement | undefined;
+  /* Nested sections, normally one per sub group. */
+  subGroupsElement?: ReactElement | undefined;
+  hasOwnResources?: boolean | undefined;
+  subGroupCount?: number | undefined;
+  testId?: string | undefined;
+}
+
+/*
+ * One level of the status page resource group hierarchy.
+ *
+ * A top level group is a card. Everything under it is a row on a tree rail -
+ * no card, no second border, no background tint stacked on the last one - so
+ * the hierarchy stays readable however deep it goes and the uptime bars keep
+ * the width they need.
+ */
+const ResourceGroupSection: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isOpen, setIsOpen] = useState<boolean>(
+    Boolean(props.isInitiallyExpanded),
+  );
+
+  /*
+   * Groups arrive with the page payload, so isInitiallyExpanded can flip after
+   * the first render. Keyed on the *boolean*, not on the prop: the column is an
+   * optional boolean, so it routinely arrives as undefined and settles to false,
+   * and keying on the prop would fire on that and slam shut a section the
+   * visitor had just opened.
+   */
+  const initiallyExpanded: boolean = Boolean(props.isInitiallyExpanded);
+
+  useEffect(() => {
+    setIsOpen(initiallyExpanded);
+  }, [initiallyExpanded]);
+
+  const generatedId: string = React.useId();
+  const bodyId: string = `status-page-group-body-${generatedId}`;
+  const descriptionId: string = `status-page-group-description-${generatedId}`;
+
+  const isRootLevel: boolean = StatusPageGroupNestingLayoutUtil.isRootLevel({
+    depth: props.depth,
+  });
+
+  const subGroupCount: number = props.subGroupCount || 0;
+
+  const showSubGroupDivider: boolean =
+    StatusPageGroupNestingLayoutUtil.shouldShowSubGroupDivider({
+      hasOwnResources: Boolean(props.hasOwnResources),
+      subGroupCount: subGroupCount,
+    });
+
+  return (
+    <div
+      className={StatusPageGroupNestingLayoutUtil.getContainerClassName({
+        depth: props.depth,
+      })}
+      data-testid={
+        props.testId ||
+        (isRootLevel ? "status-page-group" : "status-page-nested-group")
+      }
+      data-depth={props.depth}
+    >
+      <button
+        type="button"
+        className={StatusPageGroupNestingLayoutUtil.getHeaderClassName({
+          depth: props.depth,
+        })}
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? bodyId : undefined}
+        aria-describedby={props.description ? descriptionId : undefined}
+        data-testid="status-page-group-header"
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+      >
+        <span
+          className={StatusPageGroupNestingLayoutUtil.getHeaderRowClassName()}
+        >
+          <span
+            className={`${StatusPageGroupNestingLayoutUtil.getChevronBoxClassName()} ${
+              isOpen ? "bg-gray-900/5 text-gray-700" : "text-gray-400"
+            }`}
+            data-testid="status-page-group-chevron"
+            aria-hidden="true"
+          >
+            <Icon
+              className={`h-3.5 w-3.5 transition-transform duration-200 ease-out ${
+                isOpen ? "rotate-90" : ""
+              }`}
+              icon={IconProp.ChevronRight}
+              thick={ThickProp.Thick}
+            />
+          </span>
+          <span
+            className={StatusPageGroupNestingLayoutUtil.getTitleClassName({
+              depth: props.depth,
+            })}
+            title={props.name}
+          >
+            {props.name}
+          </span>
+          {props.subGroupCountLabel ? (
+            <span
+              className={StatusPageGroupNestingLayoutUtil.getSubGroupCountBadgeClassName()}
+              data-testid="status-page-group-sub-group-count"
+            >
+              {props.subGroupCountLabel}
+            </span>
+          ) : (
+            <></>
+          )}
+        </span>
+        {props.rollupLabel ? (
+          <span
+            className={StatusPageGroupNestingLayoutUtil.getRollupClassName()}
+            data-testid="status-page-group-rollup"
+          >
+            <span className="inline-flex items-center gap-1.5">
+              <span
+                className={StatusPageGroupNestingLayoutUtil.getRollupDotClassName()}
+                style={
+                  props.rollupColor
+                    ? { backgroundColor: props.rollupColor }
+                    : undefined
+                }
+                data-testid="status-page-group-rollup-dot"
+                aria-hidden="true"
+              />
+              <span
+                className={StatusPageGroupNestingLayoutUtil.getRollupLabelClassName()}
+                style={
+                  props.rollupColor ? { color: props.rollupColor } : undefined
+                }
+              >
+                {props.rollupLabel}
+              </span>
+            </span>
+          </span>
+        ) : (
+          <></>
+        )}
+      </button>
+      {props.description ? (
+        <div
+          id={descriptionId}
+          className={StatusPageGroupNestingLayoutUtil.getDescriptionClassName()}
+          data-testid="status-page-group-description"
+        >
+          <MarkdownViewer text={props.description} />
+        </div>
+      ) : (
+        <></>
+      )}
+      {isOpen ? (
+        <div
+          id={bodyId}
+          className={StatusPageGroupNestingLayoutUtil.getBodyClassName({
+            depth: props.depth,
+          })}
+          data-testid="status-page-group-body"
+        >
+          {props.resourcesElement || <></>}
+          {props.subGroupsElement ? (
+            <div
+              className={`${
+                showSubGroupDivider
+                  ? StatusPageGroupNestingLayoutUtil.getSubGroupDividerClassName()
+                  : ""
+              } ${StatusPageGroupNestingLayoutUtil.getSubGroupListClassName({
+                depth: props.depth,
+              })}`.trim()}
+              data-testid="status-page-sub-group-list"
+            >
+              {props.subGroupsElement}
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+};
+
+export default ResourceGroupSection;

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;
+}