@oneuptime/common 11.7.3 → 12.0.0

package/UI/Components/Pagination/Pagination.tsx

@@ -31,6 +31,13 @@ export interface ComponentProps {
    * we render prev/next-only with no jump-to-page modal.
    */
   hasMore?: boolean | undefined;
+  /*
+   * Optional. Rows this page actually rendered. The analytics list
+   * endpoints over-fetch one probe row to derive `hasMore` and count it
+   * in `totalItemsCount`, even though it was dropped from the payload —
+   * so the printed range is clamped to rows the page can really show.
+   */
+  itemsOnCurrentPage?: number | undefined;
 }
 
 const Pagination: FunctionComponent<ComponentProps> = (
@@ -77,6 +84,23 @@ const Pagination: FunctionComponent<ComponentProps> = (
   const [showPaginationModel, setShowPaginationModel] =
     useState<boolean>(false);
 
+  /*
+   * The range has-more mode prints. `totalItemsCount` is only a lower bound
+   * there, so the range is clamped to what this page can prove.
+   */
+  const alreadySeenCount: number =
+    props.itemsOnPage * (props.currentPageNumber - 1);
+  const firstOnPage: number = alreadySeenCount + 1;
+  const provenOnPage: number = Math.max(
+    props.totalItemsCount - alreadySeenCount,
+    0,
+  );
+  const lastOnPage: number =
+    alreadySeenCount +
+    (props.itemsOnCurrentPage === undefined
+      ? provenOnPage
+      : Math.min(provenOnPage, props.itemsOnCurrentPage));
+
   return (
     <nav
       className="flex items-center justify-between border-t border-gray-200 bg-white px-4"
@@ -88,16 +112,15 @@ const Pagination: FunctionComponent<ComponentProps> = (
         <p className="text-sm text-gray-500">
           {!props.isLoading && isHasMoreMode && (
             <span>
-              {`Showing ${
-                props.itemsOnPage * (props.currentPageNumber - 1) + 1
-              } to ${
-                props.itemsOnPage * (props.currentPageNumber - 1) +
-                Math.max(
-                  props.totalItemsCount -
-                    props.itemsOnPage * (props.currentPageNumber - 1),
-                  0,
-                )
-              }${props.hasMore ? "+" : ""} ${props.pluralLabel.toLowerCase()}.`}
+              {/*
+               * An empty page has no range to print - "Showing 1 to 0" is
+               * how that used to read.
+               */}
+              {lastOnPage < firstOnPage
+                ? `No ${props.pluralLabel.toLowerCase()}.`
+                : `Showing ${firstOnPage} to ${lastOnPage}${
+                    props.hasMore ? "+" : ""
+                  } ${props.pluralLabel.toLowerCase()}.`}
             </span>
           )}
           {!props.isLoading && !isHasMoreMode && (

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/Table/Table.tsx

@@ -428,6 +428,7 @@ const Table: TableFunction = <T extends GenericObject>(
               currentPageNumber={props.currentPageNumber}
               totalItemsCount={props.totalItemsCount}
               hasMore={props.hasMore}
+              itemsOnCurrentPage={props.data.length}
               itemsOnPage={props.itemsOnPage}
               onNavigateToPage={props.onNavigateToPage}
               isLoading={props.isLoading}

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 }) => {