@oneuptime/common 14.0.12 → 14.0.13

package/UI/Components/Runbook/StepTimeoutInput.tsx

@@ -6,6 +6,8 @@ import React, {
   useId,
   useState,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import {
   NON_NUMERIC_TIMEOUT_MESSAGE,
   TimeoutBounds,
@@ -38,6 +40,7 @@ export interface ComponentProps {
 const StepTimeoutInput: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const uniqueId: string = useId();
   const inputId: string = `step-timeout-${uniqueId}`;
   const describedById: string = `step-timeout-help-${uniqueId}`;
@@ -101,11 +104,14 @@ const StepTimeoutInput: FunctionComponent<ComponentProps> = (
    * 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.";
+  const consequence: string =
+    translator.translateText(
+      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";
@@ -125,9 +131,9 @@ const StepTimeoutInput: FunctionComponent<ComponentProps> = (
         htmlFor={inputId}
         className="block text-xs font-medium text-gray-700 mb-1.5"
       >
-        {props.label}
+        {translator.translateText(props.label)}
         <span className="ml-2 text-[10px] font-normal text-gray-400">
-          seconds
+          {translator.translateText("seconds")}
         </span>
       </label>
       <input
@@ -157,13 +163,18 @@ const StepTimeoutInput: FunctionComponent<ComponentProps> = (
       />
       <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.
+        {translator.translateTemplate(
+          "Leave blank to use the default of {{default}} seconds. Allowed range: {{min}}–{{max}} seconds.",
+          {
+            default: defaultInSeconds,
+            min: props.bounds.minInMs / 1000,
+            max: props.bounds.maxInMs / 1000,
+          },
+        )}
       </p>
       {validationError ? (
         <p id={errorId} role="alert" className="text-xs text-red-600 mt-1">
-          {validationError} {consequence}
+          {translator.translateText(validationError)} {consequence}
         </p>
       ) : null}
     </div>

package/UI/Components/SavedViews/SavedViewsFacetSection.tsx

@@ -5,6 +5,12 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import {
+  translatableTerm,
+  Translator,
+  translationKey,
+} from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import SavedViewsSearchInput from "./SavedViewsSearchInput";
@@ -30,7 +36,7 @@ export interface SavedViewsFacetSectionProps {
   initialVisibleCount?: number | undefined;
 }
 
-const DEFAULT_TITLE: string = "Saved Views";
+const DEFAULT_TITLE: string = translationKey("Saved Views");
 
 /*
  * Issue 3319: the sidebar's saved views were a bare list with no search and no
@@ -42,6 +48,7 @@ const DEFAULT_TITLE: string = "Saved Views";
 const SavedViewsFacetSection: FunctionComponent<SavedViewsFacetSectionProps> = (
   props: SavedViewsFacetSectionProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
   const [showAll, setShowAll] = useState<boolean>(false);
   const [searchText, setSearchText] = useState<string>("");
@@ -106,7 +113,7 @@ const SavedViewsFacetSection: FunctionComponent<SavedViewsFacetSectionProps> = (
       >
         <div className="flex items-center gap-1.5">
           <span className="text-[11px] font-semibold uppercase tracking-wider text-gray-500">
-            {title}
+            {translator.translateText(title)}
           </span>
           {appliedCount > 0 && (
             <span className="inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-indigo-100 px-1 text-[10px] font-semibold text-indigo-600">
@@ -126,7 +133,9 @@ const SavedViewsFacetSection: FunctionComponent<SavedViewsFacetSectionProps> = (
             <div className="mb-1 px-1">
               <SavedViewsSearchInput
                 value={searchText}
-                label={`Search ${title.toLowerCase()}...`}
+                label={translator.translateTemplate("Search {{name}}...", {
+                  name: translatableTerm(title, { inSentence: true }),
+                })}
                 onChange={(text: string) => {
                   setSearchText(text);
                 }}
@@ -155,7 +164,11 @@ const SavedViewsFacetSection: FunctionComponent<SavedViewsFacetSectionProps> = (
                    * reader should hear the word, not a stray badge.
                    */
                   aria-label={
-                    view.isDefault ? `${view.name} (default)` : view.name
+                    view.isDefault
+                      ? translator.translateTemplate("{{name}} (default)", {
+                          name: view.name,
+                        })
+                      : view.name
                   }
                   /*
                    * The row behaves like a checkbox: clicking the applied
@@ -163,11 +176,12 @@ const SavedViewsFacetSection: FunctionComponent<SavedViewsFacetSectionProps> = (
                    * what is already on.
                    */
                   aria-pressed={isSelected}
-                  title={
+                  title={translator.translateTemplate(
                     isSelected
-                      ? `Clear saved view: ${view.name}`
-                      : `Apply saved view: ${view.name}`
-                  }
+                      ? "Clear saved view: {{name}}"
+                      : "Apply saved view: {{name}}",
+                    { name: view.name },
+                  )}
                   onClick={() => {
                     if (isSelected && props.onClear) {
                       props.onClear();
@@ -206,7 +220,7 @@ const SavedViewsFacetSection: FunctionComponent<SavedViewsFacetSectionProps> = (
                     aria-hidden="true"
                     className="flex-none rounded-full bg-amber-100 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-700"
                   >
-                    Default
+                    {translator.translateText("Default")}
                   </span>
                 )}
               </div>
@@ -215,7 +229,11 @@ const SavedViewsFacetSection: FunctionComponent<SavedViewsFacetSectionProps> = (
 
           {visible.views.length === 0 && (
             <p className="px-1 py-2 text-[11px] text-gray-400">
-              {visible.isSearching ? "No matches found" : "No saved views yet."}
+              {translator.translateText(
+                visible.isSearching
+                  ? "No matches found"
+                  : "No saved views yet.",
+              )}
             </p>
           )}
 

package/UI/Components/SavedViews/SavedViewsSearchInput.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import { Translator, translationKey } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface SavedViewsSearchInputProps {
   value: string;
@@ -8,7 +10,7 @@ export interface SavedViewsSearchInputProps {
   className?: string | undefined;
 }
 
-const DEFAULT_LABEL: string = "Search saved views...";
+const DEFAULT_LABEL: string = translationKey("Search saved views...");
 
 /*
  * One search box, shared by every saved-views surface, so the logs sidebar,
@@ -19,7 +21,9 @@ const DEFAULT_LABEL: string = "Search saved views...";
 const SavedViewsSearchInput: FunctionComponent<SavedViewsSearchInputProps> = (
   props: SavedViewsSearchInputProps,
 ): ReactElement => {
-  const label: string = props.label || DEFAULT_LABEL;
+  const translator: Translator = useTranslator();
+  const label: string =
+    translator.translateText(props.label || DEFAULT_LABEL) || DEFAULT_LABEL;
 
   return (
     <input

package/UI/Components/SavedViews/SavedViewsShowMoreButton.tsx

@@ -1,4 +1,6 @@
 import React, { FunctionComponent, ReactElement } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface SavedViewsShowMoreButtonProps {
   /*
@@ -23,6 +25,7 @@ export interface SavedViewsShowMoreButtonProps {
 const SavedViewsShowMoreButton: FunctionComponent<
   SavedViewsShowMoreButtonProps
 > = (props: SavedViewsShowMoreButtonProps): ReactElement | null => {
+  const translator: Translator = useTranslator();
   if (!props.hasMore) {
     return null;
   }
@@ -36,7 +39,12 @@ const SavedViewsShowMoreButton: FunctionComponent<
       }
       onClick={props.onToggle}
     >
-      {props.isShowingAll ? "Show less" : `+${props.hiddenCount} more`}
+      {props.isShowingAll
+        ? translator.translateText("Show less")
+        : translator.translatePlural(
+            { one: "+{{count}} more", other: "+{{count}} more" },
+            props.hiddenCount,
+          )}
     </button>
   );
 };

package/UI/Components/SideMenu/SideMenu.tsx

@@ -555,10 +555,8 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
           aria-expanded={isMobileMenuVisible}
           aria-label={
             isMobileMenuVisible
-              ? translateString("Close navigation menu") ||
-                "Close navigation menu"
-              : translateString("Open navigation menu") ||
-                "Open navigation menu"
+              ? translateString("Close navigation menu")
+              : translateString("Open navigation menu")
           }
           data-testid="mobile-sidemenu-toggle"
         >
@@ -616,7 +614,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                 animate-in slide-in-from-top-2 fade-in duration-200
               `}
               role="navigation"
-              aria-label="Main navigation"
+              aria-label={translateString("Main navigation")}
             >
               {/* Optional Header */}
               {props.header && (
@@ -662,7 +660,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
        */
       className={`max-md:hidden md:block w-56 lg:w-64 flex-shrink-0 mb-10 ${props.className || ""}`}
       role="navigation"
-      aria-label="Main navigation"
+      aria-label={translateString("Main navigation")}
     >
       {/*
        * Stick below the app header, not at the top of the viewport. The header

package/UI/Components/SideMenu/SideMenuSection.tsx

@@ -14,9 +14,11 @@ export interface ComponentProps {
   title: string;
   children: ReactElement | Array<ReactElement>;
   /*
-   * Leave unset to follow the product rule: a section titled "Advanced"
-   * starts collapsed, every other section starts open (see
-   * SideMenuSectionState.ts). Set it to decide for this section either way.
+   * Leave unset to follow the product rule: a section whose title names a
+   * rarely used kind of section (Advanced, Developer, Settings, Rules,
+   * Workspace, AI, Logs and the rest of SECTION_TITLES_COLLAPSED_BY_DEFAULT
+   * in SideMenuSectionState.ts) starts collapsed, every other section starts
+   * open. Set it to decide for this section either way.
    */
   defaultCollapsed?: boolean;
   collapsible?: boolean;

package/UI/Components/SideMenu/SideMenuSectionState.ts

@@ -16,23 +16,66 @@ import React, { ReactElement, ReactNode } from "react";
  * Section titles that start collapsed in every menu, unless the menu says
  * otherwise with an explicit `defaultCollapsed`.
  *
- * "Advanced" holds what most visits never need: settings, audit logs, owners,
- * custom fields and the Delete page. Left open, it puts all of that beside
- * the pages people came for, and the menu reads as a wall of choices. So it
- * folds away by default, everywhere, including in menus written after this
- * rule, and still opens by itself on any page inside it.
+ * The maintainer asked for "collapsing things in the side menu that are not
+ * used frequently", in every side menu, so that people are not met with a
+ * wall of choices: on the Incidents menu, Overview and Episodes open, and
+ * AI, Workspace, Rules and Settings folded away.
  *
- * "Developer" (Terraform, API, AI Assistants: managing a resource from code
- * rather than from the dashboard) is the same kind of section: there on
- * every resource's menu, wanted on few visits.
+ * So a side menu shows, open, the sections that hold what people come to it
+ * for: the lists and overviews of a product, and the views of the resource
+ * whose page this is. Every other section is folded down to its title: still
+ * there to be found and opened with one click, and open by itself on any page
+ * inside it, but not one more row of choices on every visit. These titles
+ * name that kind of section in every menu that has one:
+ *
+ *  - what most visits never need: "Advanced" (settings, audit logs, owners,
+ *    custom fields, the Delete page) and "Developer" (Terraform, API, AI
+ *    Assistants: managing a resource from code rather than the dashboard);
+ *  - setting things up, done once and revisited rarely: settings, rules,
+ *    chat workspaces, AI, owners, branding, security, notification setup;
+ *  - records looked at when something needs checking: logs and reports;
+ *  - reading for a first visit rather than every visit: help;
+ *  - deleting things: the danger zone.
+ *
+ * A section whose title is not here starts open. A menu with a section that
+ * is rarely used but titled for its own subject (the "Calendar" feed in a
+ * person's User Settings, say) sets `defaultCollapsed` on it; one whose
+ * section here is an everyday one (a workflow's run history, in "Logs")
+ * keeps it open with `defaultCollapsed: false`. The guard
+ * Common/Tests/App/RarelyUsedMenuSectionsCollapsed.test.tsx renders every
+ * side menu and holds each of them to this.
  *
  * The match is on the title a menu passes in (English, before translation).
  * A menu that passes an already translated title, as the Admin Dashboard
- * does, sets `defaultCollapsed` on its Advanced section itself.
+ * does, sets `defaultCollapsed` on those sections itself.
  */
 export const SECTION_TITLES_COLLAPSED_BY_DEFAULT: ReadonlyArray<string> = [
+  // What most visits never need.
   "Advanced",
   "Developer",
+  // Setting things up: done once, revisited rarely.
+  "Settings",
+  "Configuration",
+  "Manage",
+  "Management",
+  "Rules",
+  "Workspace",
+  "AI",
+  "Owners",
+  "Ownership",
+  "Branding",
+  "Security",
+  "Notifications",
+  // Records, looked at when something needs checking.
+  "Logs",
+  "Notification Logs",
+  "Audit Logs",
+  "On-Call Logs",
+  "Reports",
+  // Reading for a first visit, not every visit.
+  "Help",
+  // Deleting things.
+  "Danger Zone",
 ];
 
 export function isTitleCollapsedByDefault(title: string): boolean {

package/UI/Components/SideOver/SideOver.tsx

@@ -10,6 +10,7 @@ import React, {
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import useTranslateValue from "../../Utils/Translation";
 
 export enum SideOverSize {
   Small = "Small",
@@ -83,6 +84,7 @@ const getPortalTarget: PortalTargetFunction = (): HTMLElement | null => {
 const SideOver: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
   let widthClass: string = "max-w-2xl";
 
   if (props.size === SideOverSize.Small) {
@@ -192,14 +194,14 @@ const SideOver: FunctionComponent<ComponentProps> = (
                     id={titleId}
                     data-testid="side-over-title"
                   >
-                    {props.title}
+                    {translateString(props.title) ?? props.title}
                   </h2>
                   <p
                     className="text-sm text-gray-500"
                     id={descriptionId}
                     data-testid="side-over-description"
                   >
-                    {props.description}
+                    {translateString(props.description) ?? props.description}
                   </p>
                 </div>
                 <div className="flex h-7 items-center">
@@ -208,11 +210,13 @@ const SideOver: FunctionComponent<ComponentProps> = (
                       props.onClose();
                     }}
                     type="button"
-                    title="Close panel"
+                    title={translateString("Close panel")}
                     data-testid="close-button"
                     className="rounded-md text-gray-400 transition-colors duration-150 ease-out hover:text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
                   >
-                    <span className="sr-only">Close panel</span>
+                    <span className="sr-only">
+                      {translateString("Close panel")}
+                    </span>
 
                     <Icon className="h-6 w-6" icon={IconProp.Close} />
                   </button>
@@ -226,12 +230,26 @@ const SideOver: FunctionComponent<ComponentProps> = (
              * page scrollbar bleeding through the panel. overscroll-contain
              * stops a wheel past the end of the panel from scrolling the page
              * out from under it.
+             *
+             * scroll-pb-6 matches the bottom padding below, for what the
+             * keyboard scrolls into view: the workflow picker's arrow keys, or
+             * Tab through a form, stop the same 24px short of the footer
+             * rather than leaving the item on its divider.
              */}
             <div
-              className="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+              className="min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pb-6"
               data-testid="side-over-content"
             >
-              <div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0 p-5">
+              {/*
+               * The bottom padding is kept at every width. It used to go with
+               * the top padding from sm up (sm:py-0), so on any screen 640px or
+               * wider the last row of a scrolled panel - the workflow picker's
+               * "Browse all resources" - sat flush on the footer's divider.
+               * Only the top is still dropped from sm up: callers rely on it,
+               * such as the workflow picker, whose sticky search box sits at
+               * the very top and brings its own spacing.
+               */}
+              <div className="space-y-6 px-5 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:pt-0">
                 {props.children}
               </div>
             </div>

package/UI/Components/SimpleLogViewer/SimpleLogViewer.tsx

@@ -4,6 +4,8 @@ import React, {
   useEffect,
   useRef,
 } from "react";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 
 export interface ComponentProps {
   children: ReactElement | string | Array<ReactElement>;
@@ -20,9 +22,10 @@ export interface ComponentProps {
 const SimpleLogViewer: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const showLineNumbers: boolean = props.showLineNumbers !== false;
   const height: string = props.height || "400px";
-  const title: string | undefined = props.title;
+  const title: string | undefined = translator.translateText(props.title);
 
   const renderContent: () => ReactElement = (): ReactElement => {
     if (typeof props.children === "string") {

package/UI/Components/StackedProgressBar/StackedProgressBar.tsx

@@ -1,3 +1,5 @@
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface StackedProgressBarSegment {
@@ -18,6 +20,7 @@ export interface ComponentProps {
 const StackedProgressBar: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const translator: Translator = useTranslator();
   const total: number =
     props.totalValue ||
     props.segments.reduce((sum: number, seg: StackedProgressBarSegment) => {
@@ -32,7 +35,7 @@ const StackedProgressBar: FunctionComponent<ComponentProps> = (
       <div
         className={`flex ${heightClass} rounded-full overflow-hidden bg-gray-100`}
         role="progressbar"
-        aria-label="Stacked progress bar"
+        aria-label={translator.translateText("Stacked progress bar")}
       >
         {props.segments.map(
           (segment: StackedProgressBarSegment, index: number) => {

package/UI/Components/StateTimeline/CurrentlyActiveIndicator.tsx

@@ -0,0 +1,48 @@
+import Pill, { PillSize } from "../Pill/Pill";
+import { Indigo500 } from "../../../Types/BrandColors";
+import useTranslateValue from "../../Utils/Translation";
+import React, { FunctionComponent, ReactElement } from "react";
+
+/*
+ * The English text, which is also its key in the Dashboard locale files
+ * (looked up by value, like every other string Common renders).
+ */
+export const CURRENTLY_ACTIVE_TEXT: string = "Currently Active";
+
+export interface ComponentProps {
+  size?: PillSize | undefined;
+}
+
+/*
+ * Marks the status or state that is in effect right now - the timeline row
+ * that has no end yet. It used to be the words "Currently Active" in the same
+ * grey as every other cell, which was easy to read past.
+ *
+ * A pill like the status pill beside it, in the brand indigo the product
+ * already uses for "happening now" (an on-call override in force, an AI
+ * investigation running) rather than the status's own colour: a red
+ * "Identified" next to a red marker would say the same thing twice, and a
+ * green one would read as "healthy". Its dot pulses, except for readers who
+ * asked for reduced motion, for whom the words carry it alone.
+ */
+const CurrentlyActiveIndicator: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const { translateString } = useTranslateValue();
+
+  return (
+    <span
+      data-testid="currently-active-indicator"
+      className="inline-flex max-w-full align-middle"
+    >
+      <Pill
+        color={Indigo500}
+        text={translateString(CURRENTLY_ACTIVE_TEXT) || CURRENTLY_ACTIVE_TEXT}
+        size={props.size}
+        isPulsing={true}
+      />
+    </span>
+  );
+};
+
+export default CurrentlyActiveIndicator;

package/UI/Components/StateTimeline/StateTimelineColumns.tsx

@@ -0,0 +1,134 @@
+import StateTimelineDuration from "./StateTimelineDuration";
+import StateTimelineEndsAt from "./StateTimelineEndsAt";
+import Column from "../ModelTable/Column";
+import { PillSize } from "../Pill/Pill";
+import FieldType from "../Types/FieldType";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import OneUptimeDate from "../../../Types/Date";
+import { getLiveDuration } from "../../Utils/UseLiveDuration";
+import React, { ReactElement } from "react";
+
+/*
+ * ---------------------------------------------------------------------------
+ * The "Ends At" and "Duration" columns of every state and status timeline
+ * ---------------------------------------------------------------------------
+ *
+ * Monitor, incident, incident episode, alert, alert episode and scheduled
+ * maintenance timelines each declared these two columns by hand, identically:
+ * a DateTime column whose empty value read "Currently Active" in plain grey,
+ * and a duration worked out once, at render, so the current row's never
+ * moved. They are declared here once instead, so each timeline gets the
+ * pulsing "Currently Active" marker and the live duration, and a fix to
+ * either reaches all of them.
+ *
+ * Both columns read `endsAt` as their primary field, as they always have:
+ * that is what a viewer's saved column layout is keyed by
+ * (ColumnPreference.getColumnIds), so the layouts survive the move. The
+ * duration also declares `startsAt`, which it cannot be worked out without.
+ */
+
+// The two dates every timeline row carries.
+export interface StateTimelineRow {
+  startsAt?: Date | undefined;
+  endsAt?: Date | undefined;
+}
+
+export type StateTimelineModel = BaseModel & StateTimelineRow;
+
+export const STATE_TIMELINE_ENDS_AT_TITLE: string = "Ends At";
+export const STATE_TIMELINE_DURATION_TITLE: string = "Duration";
+
+export interface StateTimelineEndsAtColumnOptions {
+  // The header. "Ends At" unless the page words its columns differently.
+  title?: string | undefined;
+  // Match the status pill in the same row. Normal unless given.
+  indicatorSize?: PillSize | undefined;
+}
+
+export type GetStateTimelineEndsAtColumnFunction = <
+  TModel extends StateTimelineModel,
+>(
+  options?: StateTimelineEndsAtColumnOptions | undefined,
+) => Column<TModel>;
+
+/*
+ * When the row ended, or the pulsing "Currently Active" marker. Still a
+ * DateTime column underneath, so filtering, sorting and the CSV export treat
+ * it exactly as before (a row with no end exports an empty cell).
+ */
+export const getStateTimelineEndsAtColumn: GetStateTimelineEndsAtColumnFunction =
+  <TModel extends StateTimelineModel>(
+    options?: StateTimelineEndsAtColumnOptions | undefined,
+  ): Column<TModel> => {
+    return {
+      field: {
+        endsAt: true,
+      } as Column<TModel>["field"],
+      title: options?.title || STATE_TIMELINE_ENDS_AT_TITLE,
+      type: FieldType.DateTime,
+      getElement: (item: TModel): ReactElement => {
+        return (
+          <StateTimelineEndsAt
+            endDate={item.endsAt}
+            indicatorSize={options?.indicatorSize}
+          />
+        );
+      },
+    };
+  };
+
+export type GetStateTimelineDurationTextFunction = (
+  item: StateTimelineRow,
+  now?: Date | undefined,
+) => string;
+
+/*
+ * The duration as text, at `now` (the current time unless given): what the
+ * Duration column writes into a CSV export. It used to write the row's end
+ * date, the only value the column's `endsAt` field held.
+ */
+export const getStateTimelineDurationText: GetStateTimelineDurationTextFunction =
+  (item: StateTimelineRow, now?: Date | undefined): string => {
+    return getLiveDuration({
+      startDate: item.startsAt,
+      endDate: item.endsAt,
+      now: now || OneUptimeDate.getCurrentDate(),
+    }).formattedDuration;
+  };
+
+export interface StateTimelineDurationColumnOptions {
+  // The header. "Duration" unless the page words its columns differently.
+  title?: string | undefined;
+}
+
+export type GetStateTimelineDurationColumnFunction = <
+  TModel extends StateTimelineModel,
+>(
+  options?: StateTimelineDurationColumnOptions | undefined,
+) => Column<TModel>;
+
+// How long the row lasted, counting up every second for the current one.
+export const getStateTimelineDurationColumn: GetStateTimelineDurationColumnFunction =
+  <TModel extends StateTimelineModel>(
+    options?: StateTimelineDurationColumnOptions | undefined,
+  ): Column<TModel> => {
+    return {
+      field: {
+        endsAt: true,
+        startsAt: true,
+      } as Column<TModel>["field"],
+      title: options?.title || STATE_TIMELINE_DURATION_TITLE,
+      type: FieldType.Text,
+      getElement: (item: TModel): ReactElement => {
+        return (
+          <StateTimelineDuration
+            startDate={item.startsAt}
+            endDate={item.endsAt}
+          />
+        );
+      },
+      getExportValue: (item: TModel): string => {
+        return getStateTimelineDurationText(item);
+      },
+    };
+  };