@oneuptime/common 11.3.2 → 11.3.4

package/Server/Infrastructure/ClickhouseConfig.ts

@@ -99,5 +99,26 @@ export const ingestDataSourceOptions: ClickHouseClientConfigOptions = {
   max_open_connections: MaxClickhouseIngestConnections,
 };
 
+/*
+ * Dedicated pool for schema sync + data migrations. The 58s request_timeout
+ * above is a socket *idle* timer (see the note on request_timeout) sized for
+ * dashboard reads sitting behind nginx's 60s proxy_read_timeout. Migrations
+ * do NOT go through nginx (the app connects straight to clickhouse:8123), and
+ * a single migration statement — an ON CLUSTER DDL, an MV / projection
+ * rebuild, or a type/codec-rewrite MODIFY COLUMN on a multi-billion-row
+ * telemetry table — can legitimately stream zero bytes for many minutes,
+ * which the 58s idle timer would destroy mid-flight ("Timeout error.") and
+ * crash the boot process. Give migrations a much higher idle ceiling. It is
+ * finite (not 0) on purpose: a genuinely dead connection / network black hole
+ * must still fail eventually rather than hang forever. Long statements should
+ * additionally carry send_progress_in_http_headers (see MigrationExecuteOptions
+ * in AnalyticsDatabaseService) so the socket stays non-idle, and a server-side
+ * SETTINGS max_execution_time so ClickHouse remains the authoritative cap.
+ */
+export const migrationDataSourceOptions: ClickHouseClientConfigOptions = {
+  ...options,
+  request_timeout: 30 * 60 * 1000, // 30 minutes
+};
+
 export const testDataSourceOptions: ClickHouseClientConfigOptions =
   dataSourceOptions;

package/Server/Infrastructure/ClickhouseDatabase.ts

@@ -3,6 +3,7 @@ import {
   ClickHouseClientConfigOptions,
   dataSourceOptions,
   ingestDataSourceOptions,
+  migrationDataSourceOptions,
   testDataSourceOptions,
 } from "./ClickhouseConfig";
 import { PingResult, createClient, ClickHouseClient } from "@clickhouse/client";
@@ -200,3 +201,14 @@ export const ClickhouseAppInstance: ClickhouseDatabase = new ClickhouseDatabase(
  */
 export const ClickhouseIngestInstance: ClickhouseDatabase =
   new ClickhouseDatabase(ingestDataSourceOptions);
+
+/*
+ * Separate pool for schema sync + data migrations. Identical to the App pool
+ * except for a much higher request_timeout (see migrationDataSourceOptions):
+ * the App pool's 58s socket-idle timer is correct for dashboard reads but
+ * would destroy a long-running migration DDL/mutation mid-flight and crash
+ * boot. Schema sync and migrations route through this instance via
+ * MigrationExecuteOptions (AnalyticsDatabaseService).
+ */
+export const ClickhouseMigrationInstance: ClickhouseDatabase =
+  new ClickhouseDatabase(migrationDataSourceOptions);

package/Server/Services/AnalyticsDatabaseService.ts

@@ -3,6 +3,7 @@ import ClickhouseDatabase, {
   ClickhouseAppInstance,
   ClickhouseClient,
   ClickhouseIngestInstance,
+  ClickhouseMigrationInstance,
 } from "../Infrastructure/ClickhouseDatabase";
 import ClusterKeyAuthorization from "../Middleware/ClusterKeyAuthorization";
 import CountBy from "../Types/AnalyticsDatabase/CountBy";
@@ -96,8 +97,41 @@ export type { ClickHouseSettings } from "@clickhouse/client";
 export interface ClickhouseExecuteOptions {
   clickhouseSettings?: ClickHouseSettings | undefined;
   queryId?: string | undefined;
+  /**
+   * Route this statement through the dedicated migration pool
+   * (ClickhouseMigrationInstance) instead of the App pool. The migration pool
+   * has a much higher `request_timeout` (socket-idle ceiling) so a long DDL /
+   * mutation / INSERT...SELECT is not destroyed at the App pool's 58s. Schema
+   * sync and data migrations set this (via MigrationExecuteOptions); the read /
+   * write hot path leaves it unset and keeps the 58s App pool.
+   */
+  useMigrationConnection?: boolean | undefined;
 }
 
+/**
+ * Standard options for every schema-sync / data-migration statement. Two
+ * layers of protection against the socket-idle `request_timeout` killing a
+ * long migration:
+ *   1. `useMigrationConnection` routes through ClickhouseMigrationInstance
+ *      (30-minute idle ceiling) — reliable even for pure-DDL / ON CLUSTER
+ *      coordination that streams no bytes at all.
+ *   2. `send_progress_in_http_headers` makes the server emit periodic
+ *      X-ClickHouse-Progress header lines for data-rewriting statements
+ *      (MODIFY COLUMN rewrites, MATERIALIZE, INSERT...SELECT), keeping the
+ *      socket non-idle so the request completes instead of timing out.
+ * Pass this as the second arg to `execute` / `executeQuery` from migration
+ * code. The schema-mutating helpers on this service default to it already.
+ */
+export const MigrationExecuteOptions: ClickhouseExecuteOptions = {
+  useMigrationConnection: true,
+  clickhouseSettings: {
+    send_progress_in_http_headers: 1,
+    // Emit a progress header every 10s — well under the App pool's 58s and the
+    // migration pool's 30-minute idle ceiling.
+    http_headers_progress_interval_ms: "10000",
+  },
+};
+
 /**
  * Ambient context that makes ClickHouse inserts idempotent across queue
  * retries. The telemetry queue worker wraps each job in
@@ -140,9 +174,11 @@ export default class AnalyticsDatabaseService<
   public modelType!: { new (): TBaseModel };
   public database!: ClickhouseDatabase;
   public ingestDatabase!: ClickhouseDatabase;
+  public migrationDatabase!: ClickhouseDatabase;
   public model!: TBaseModel;
   public databaseClient!: ClickhouseClient | null;
   public ingestDatabaseClient!: ClickhouseClient | null;
+  public migrationDatabaseClient!: ClickhouseClient | null;
   public statementGenerator!: StatementGenerator<TBaseModel>;
 
   public constructor(data: {
@@ -165,8 +201,16 @@ export default class AnalyticsDatabaseService<
       this.ingestDatabase = ClickhouseIngestInstance;
     }
 
+    /*
+     * Migrations route through their own pool (higher socket-idle timeout) via
+     * MigrationExecuteOptions. In tests `data.database` is the in-test instance,
+     * so reuse it there to keep tests on a single mocked client.
+     */
+    this.migrationDatabase = data.database || ClickhouseMigrationInstance;
+
     this.databaseClient = this.database.getDataSource();
     this.ingestDatabaseClient = this.ingestDatabase.getDataSource();
+    this.migrationDatabaseClient = this.migrationDatabase.getDataSource();
 
     this.statementGenerator = new StatementGenerator<TBaseModel>({
       modelType: this.modelType,
@@ -443,13 +487,16 @@ export default class AnalyticsDatabaseService<
   ): Promise<void> {
     const statement: Statement =
       this.statementGenerator.toAddColumnStatement(column);
-    await this.execute(statement);
+    // Schema-sync / migration-only path: route through the migration pool so a
+    // column add that backfills a DEFAULT/MATERIALIZED expression on a large
+    // table is not destroyed at the App pool's 58s socket-idle timeout.
+    await this.execute(statement, MigrationExecuteOptions);
 
     // Add skip index separately (ClickHouse requires ADD INDEX as a separate ALTER statement)
     const indexStatement: Statement | null =
       this.statementGenerator.toAddSkipIndexStatement(column);
     if (indexStatement) {
-      await this.execute(indexStatement);
+      await this.execute(indexStatement, MigrationExecuteOptions);
     }
   }
 
@@ -467,11 +514,13 @@ export default class AnalyticsDatabaseService<
     if (column?.skipIndex) {
       await this.execute(
         this.statementGenerator.toDropSkipIndexStatement(column.skipIndex.name),
+        MigrationExecuteOptions,
       );
     }
 
     await this.execute(
       this.statementGenerator.toDropColumnStatement(columnName),
+      MigrationExecuteOptions,
     );
   }
 
@@ -552,6 +601,7 @@ export default class AnalyticsDatabaseService<
 
     await this.execute(
       `ALTER TABLE ${tableName} MODIFY COLUMN ${data.columnName} ${data.columnType} CODEC(${data.codec}) SETTINGS mutations_sync=0`,
+      MigrationExecuteOptions,
     );
     logger.info(
       `Applied ${data.codec} codec to ${tableName}.${data.columnName} (async)`,
@@ -1471,6 +1521,8 @@ export default class AnalyticsDatabaseService<
     this.databaseClient = this.database.getDataSource();
     this.ingestDatabase = ClickhouseIngestInstance;
     this.ingestDatabaseClient = this.ingestDatabase.getDataSource();
+    this.migrationDatabase = ClickhouseMigrationInstance;
+    this.migrationDatabaseClient = this.migrationDatabase.getDataSource();
   }
 
   @CaptureSpan()
@@ -1478,7 +1530,9 @@ export default class AnalyticsDatabaseService<
     statement: Statement | string,
     options?: ClickhouseExecuteOptions,
   ): Promise<ExecResult<Stream>> {
-    const client: ClickhouseClient = this.getDatabaseClient();
+    const client: ClickhouseClient = options?.useMigrationConnection
+      ? this.getMigrationClient()
+      : this.getDatabaseClient();
 
     const query: string =
       statement instanceof Statement ? statement.query : statement;
@@ -1500,7 +1554,9 @@ export default class AnalyticsDatabaseService<
     statement: Statement | string,
     options?: ClickhouseExecuteOptions,
   ): Promise<ResultSet<"JSON">> {
-    const client: ClickhouseClient = this.getDatabaseClient();
+    const client: ClickhouseClient = options?.useMigrationConnection
+      ? this.getMigrationClient()
+      : this.getDatabaseClient();
 
     const query: string =
       statement instanceof Statement ? statement.query : statement;
@@ -1560,6 +1616,25 @@ export default class AnalyticsDatabaseService<
     return this.ingestDatabaseClient;
   }
 
+  private getMigrationClient(): ClickhouseClient {
+    if (!this.migrationDatabase) {
+      this.useDefaultDatabase();
+    }
+
+    if (!this.migrationDatabaseClient && this.migrationDatabase) {
+      this.migrationDatabaseClient = this.migrationDatabase.getDataSource();
+    }
+
+    if (!this.migrationDatabaseClient) {
+      throw new Exception(
+        ExceptionCode.DatabaseNotConnectedException,
+        "ClickHouse migration client is not connected",
+      );
+    }
+
+    return this.migrationDatabaseClient;
+  }
+
   protected async onUpdateSuccess(
     onUpdate: OnUpdate<TBaseModel>,
     _updatedItemIds: Array<ObjectID>,

package/Server/Services/TraceAggregationService.ts

@@ -107,8 +107,12 @@ export interface TraceAnalyticsTopItem {
 export interface TraceAnalyticsTableRow {
   groupValues: Record<string, string>;
   count: number;
+  errorCount: number;
   avgDurationMs: number;
   p50DurationMs: number;
+  p90DurationMs: number;
+  p95DurationMs: number;
+  p99DurationMs: number;
   minDurationMs: number;
   maxDurationMs: number;
 }
@@ -1344,8 +1348,12 @@ export class TraceAggregationService {
       return {
         groupValues,
         count: Number(row["cnt"] || 0),
+        errorCount: Number(row["err_cnt"] || 0),
         avgDurationMs: Number(row["avg_ms"] || 0),
         p50DurationMs: Number(row["p50_ms"] || 0),
+        p90DurationMs: Number(row["p90_ms"] || 0),
+        p95DurationMs: Number(row["p95_ms"] || 0),
+        p99DurationMs: Number(row["p99_ms"] || 0),
         minDurationMs: Number(row["min_ms"] || 0),
         maxDurationMs: Number(row["max_ms"] || 0),
       };
@@ -1676,15 +1684,20 @@ export class TraceAggregationService {
       request.limit ?? TraceAggregationService.DEFAULT_ANALYTICS_LIMIT;
 
     /*
-     * The "top dimensions" table always carries the full duration stat set
-     * (count, avg, median, min, max) — one query answers "requests and
-     * median response time per tenant" without a follow-up.
+     * The "top dimensions" table always carries the full stat set (count,
+     * errors, avg, p50/p90/p95/p99, min, max) — one query answers "requests,
+     * errors and tail latency per tenant" without a follow-up. errorCount
+     * mirrors the METRIC_EXPRESSIONS convention: statusCode = 2 is an error.
      */
     const statement: Statement = new Statement();
     statement.append(
       "SELECT count() AS cnt" +
+        ", countIf(statusCode = 2) AS err_cnt" +
         ", avg(durationUnixNano) / 1000000 AS avg_ms" +
         ", quantile(0.5)(durationUnixNano) / 1000000 AS p50_ms" +
+        ", quantile(0.9)(durationUnixNano) / 1000000 AS p90_ms" +
+        ", quantile(0.95)(durationUnixNano) / 1000000 AS p95_ms" +
+        ", quantile(0.99)(durationUnixNano) / 1000000 AS p99_ms" +
         ", min(durationUnixNano) / 1000000 AS min_ms" +
         ", max(durationUnixNano) / 1000000 AS max_ms",
     );

package/Tests/Server/Services/TraceAggregationService.test.ts

@@ -328,10 +328,20 @@ describe("TraceAggregationService", () => {
 
       const query: string = normalizedQuery(statement);
       expect(query).toContain("count() AS cnt");
+      expect(query).toContain("countIf(statusCode = 2) AS err_cnt");
       expect(query).toContain("avg(durationUnixNano) / 1000000 AS avg_ms");
       expect(query).toContain(
         "quantile(0.5)(durationUnixNano) / 1000000 AS p50_ms",
       );
+      expect(query).toContain(
+        "quantile(0.9)(durationUnixNano) / 1000000 AS p90_ms",
+      );
+      expect(query).toContain(
+        "quantile(0.95)(durationUnixNano) / 1000000 AS p95_ms",
+      );
+      expect(query).toContain(
+        "quantile(0.99)(durationUnixNano) / 1000000 AS p99_ms",
+      );
       expect(query).toContain("min(durationUnixNano) / 1000000 AS min_ms");
       expect(query).toContain("max(durationUnixNano) / 1000000 AS max_ms");
       expect(query).toContain(" AND name IN (");

package/Tests/UI/Components/Pill.test.tsx

@@ -52,6 +52,8 @@ describe("<Pill />", () => {
     const { container } = render(
       <Pill text="Love" color={color} icon={IconProp.Label} />,
     );
-    expect(container.querySelector('[role="icon"]')).not.toBeNull();
+    // The icon renders an inline <svg>. (It no longer uses the invalid
+    // role="icon" ARIA role, which was removed for WCAG 4.1.2 compliance.)
+    expect(container.querySelector("svg")).not.toBeNull();
   });
 });

package/Types/Dashboard/DashboardComponentType.ts

@@ -7,6 +7,7 @@ enum DashboardComponentType {
   LogStream = `LogStream`,
   TraceList = `TraceList`,
   TraceChart = `TraceChart`,
+  TraceTable = `TraceTable`,
   IncidentList = `IncidentList`,
   AlertList = `AlertList`,
   MonitorList = `MonitorList`,

package/Types/Dashboard/DashboardComponents/DashboardTraceTableComponent.ts

@@ -0,0 +1,39 @@
+import ObjectID from "../../ObjectID";
+import DashboardComponentType from "../DashboardComponentType";
+import BaseComponent from "./DashboardBaseComponent";
+
+export default interface DashboardTraceTableComponent extends BaseComponent {
+  componentType: DashboardComponentType.TraceTable;
+  componentId: ObjectID;
+  arguments: {
+    title?: string | undefined;
+    // Substring filter on span name (e.g. "/Shipment/ShipShipment").
+    spanNameContains?: string | undefined;
+    /*
+     * Attribute equality filters, ANDed. The structured editor stores a
+     * key/value record (e.g. { "url.host": "torginol.starship.online" }).
+     * A legacy "key=value; key2=value2" string is still read for widgets
+     * saved before the structured editor existed.
+     */
+    attributeFilters?:
+      | string
+      | Record<string, string | number | boolean>
+      | undefined;
+    /*
+     * The dimension to break the table into rows by: a span attribute key
+     * (e.g. url.host, resource.service.instance.id) or a top-level column
+     * (name, primaryEntityId, statusCode, kind). One row per value. Unlike
+     * the trace chart's optional split, this is REQUIRED — the table is a
+     * "top dimensions" breakdown, so an unset group-by renders an empty
+     * prompt instead of a query.
+     */
+    groupByAttribute?: string | undefined;
+    // Cap on the number of rows (default 10).
+    topLimit?: number | undefined;
+    /*
+     * Include non-root spans. Off by default so "Requests" matches the
+     * traces explorer, which is root-spans-only.
+     */
+    includeChildSpans?: boolean | undefined;
+  };
+}

package/UI/Components/Date/RangeStartAndEndDateEdit.tsx

@@ -1,64 +1,248 @@
 import React, { FunctionComponent, ReactElement } from "react";
-import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import RangeStartAndEndDateTime, {
+  RangeStartAndEndDateTimeUtil,
+} from "../../../Types/Time/RangeStartAndEndDateTime";
 import StartAndEndDate, {
   StartAndEndDateType,
 } from "../../../UI/Components/Date/StartAndEndDate";
 import InBetween from "../../../Types/BaseDatabase/InBetween";
 import TimeRange from "../../../Types/Time/TimeRange";
-import Dropdown, {
-  DropdownOption,
-  DropdownValue,
-} from "../../../UI/Components/Dropdown/Dropdown";
-import DropdownUtil from "../../../UI/Utils/Dropdown";
+import OneUptimeDate from "../../../Types/Date";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 
 export interface ComponentProps {
   value?: RangeStartAndEndDateTime | undefined;
   onChange: (startAndEndDate: RangeStartAndEndDateTime) => void;
+  /*
+   * When provided, clicking a quick range immediately commits the selection
+   * (and the parent is expected to close the picker). Custom ranges always
+   * go through onChange so the user can fine-tune before applying.
+   */
+  onApply?: ((startAndEndDate: RangeStartAndEndDateTime) => void) | undefined;
 }
 
-const DashboardStartAndEndDateEditElement: FunctionComponent<ComponentProps> = (
+/*
+ * Quick ranges shown in the left rail, in display order. Custom is handled
+ * separately below the list.
+ */
+const QUICK_RANGES: Array<TimeRange> = [
+  TimeRange.PAST_FIVE_MINS,
+  TimeRange.PAST_FIFTEEN_MINS,
+  TimeRange.PAST_THIRTY_MINS,
+  TimeRange.PAST_ONE_HOUR,
+  TimeRange.PAST_TWO_HOURS,
+  TimeRange.PAST_THREE_HOURS,
+  TimeRange.PAST_ONE_DAY,
+  TimeRange.PAST_TWO_DAYS,
+  TimeRange.PAST_ONE_WEEK,
+  TimeRange.PAST_TWO_WEEKS,
+  TimeRange.PAST_ONE_MONTH,
+  TimeRange.PAST_THREE_MONTHS,
+];
+
+const RangeStartAndEndDateEdit: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  const dropdownOptions: DropdownOption[] =
-    DropdownUtil.getDropdownOptionsFromEnum(TimeRange);
-  const defaultDropdownOption: DropdownOption =
-    dropdownOptions.find((option: DropdownOption) => {
-      return option.value === TimeRange.PAST_ONE_HOUR;
-    }) || dropdownOptions[0]!;
-  const selectedDropdownnOption: DropdownOption =
-    dropdownOptions.find((option: DropdownOption) => {
-      return option.value === props.value?.range;
-    }) || defaultDropdownOption;
+  const selectedRange: TimeRange =
+    props.value?.range || TimeRange.PAST_ONE_HOUR;
+  const isCustom: boolean = selectedRange === TimeRange.CUSTOM;
+
+  /*
+   * Absolute window for the current selection. Used to preview a quick range
+   * and to seed the custom editor when the user switches to it.
+   */
+  const resolvedRange: InBetween<Date> =
+    RangeStartAndEndDateTimeUtil.getStartAndEndDate(
+      props.value || { range: TimeRange.PAST_ONE_HOUR },
+    );
+
+  const formatDateTime: (date: Date) => string = (date: Date): string => {
+    return OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
+      date,
+      false,
+      true,
+    );
+  };
+
+  const getDurationText: (start: Date, end: Date) => string = (
+    start: Date,
+    end: Date,
+  ): string => {
+    const seconds: number = OneUptimeDate.getDifferenceInSeconds(end, start);
+
+    if (seconds <= 0) {
+      return "";
+    }
+
+    return OneUptimeDate.secondsToFormattedFriendlyTimeString(seconds).trim();
+  };
+
+  const onSelectQuickRange: (range: TimeRange) => void = (
+    range: TimeRange,
+  ): void => {
+    const next: RangeStartAndEndDateTime = { range };
+
+    if (props.onApply) {
+      props.onApply(next);
+    } else {
+      props.onChange(next);
+    }
+  };
+
+  const onSelectCustom: () => void = (): void => {
+    props.onChange({
+      range: TimeRange.CUSTOM,
+      startAndEndDate: props.value?.startAndEndDate || resolvedRange,
+    });
+  };
+
+  const customStart: Date | undefined =
+    props.value?.startAndEndDate?.startValue;
+  const customEnd: Date | undefined = props.value?.startAndEndDate?.endValue;
+  /*
+   * Only show the duration hint for a valid range. getDifferenceInSeconds is
+   * absolute, so without this guard an inverted (end-before-start) range would
+   * read as a positive "Showing N of data" while Apply is disabled.
+   */
+  const customDuration: string =
+    customStart && customEnd && OneUptimeDate.isAfter(customEnd, customStart)
+      ? getDurationText(customStart, customEnd)
+      : "";
+
+  const previewDuration: string = getDurationText(
+    resolvedRange.startValue,
+    resolvedRange.endValue,
+  );
 
   return (
-    <div>
-      <Dropdown
-        value={selectedDropdownnOption}
-        onChange={(range: DropdownValue | Array<DropdownValue> | null) => {
-          props.onChange({
-            range: range as TimeRange,
-          });
-        }}
-        options={dropdownOptions}
-      />
-      {/* Start and End Date */}
-      {props.value?.range === TimeRange.CUSTOM && (
-        <StartAndEndDate
-          type={StartAndEndDateType.DateTime}
-          value={props.value?.startAndEndDate || undefined}
-          hideTimeButtons={true}
-          onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
-            if (startAndEndDate) {
-              props.onChange({
-                range: TimeRange.CUSTOM,
-                startAndEndDate,
-              });
-            }
-          }}
-        />
-      )}
+    <div className="flex flex-col md:flex-row md:divide-x md:divide-gray-200">
+      {/* Left rail: quick ranges */}
+      <div
+        className="md:w-52 md:shrink-0 md:pr-4 md:max-h-96 md:overflow-y-auto"
+        role="radiogroup"
+        aria-label="Time range"
+      >
+        <div className="px-1 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-400">
+          Quick ranges
+        </div>
+        <div className="grid grid-cols-2 gap-1 md:grid-cols-1">
+          {QUICK_RANGES.map((range: TimeRange) => {
+            const isActive: boolean = !isCustom && selectedRange === range;
+
+            return (
+              <button
+                key={range}
+                type="button"
+                role="radio"
+                aria-checked={isActive}
+                onClick={() => {
+                  return onSelectQuickRange(range);
+                }}
+                className={`w-full rounded-md px-3 py-1.5 text-left text-sm transition-colors ${
+                  isActive
+                    ? "bg-indigo-50 font-medium text-indigo-700"
+                    : "text-gray-700 hover:bg-gray-100"
+                }`}
+              >
+                {range}
+              </button>
+            );
+          })}
+        </div>
+        <div className="mt-2 border-t border-gray-100 pt-2">
+          <button
+            type="button"
+            role="radio"
+            aria-checked={isCustom}
+            onClick={onSelectCustom}
+            className={`flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-sm transition-colors ${
+              isCustom
+                ? "bg-indigo-50 font-medium text-indigo-700"
+                : "text-gray-700 hover:bg-gray-100"
+            }`}
+          >
+            <Icon icon={IconProp.Calendar} className="h-4 w-4" />
+            Custom range
+          </button>
+        </div>
+      </div>
+
+      {/* Right pane: custom editor or quick-range preview */}
+      <div className="mt-4 md:mt-0 md:flex-1 md:pl-4">
+        {isCustom ? (
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              Custom range
+            </div>
+            <div className="mt-0.5 text-xs text-gray-500">
+              Pick the exact start and end date &amp; time.
+            </div>
+            <StartAndEndDate
+              type={StartAndEndDateType.DateTime}
+              value={props.value?.startAndEndDate || resolvedRange}
+              hideTimeButtons={true}
+              onValueChanged={(startAndEndDate: InBetween<Date> | null) => {
+                if (startAndEndDate) {
+                  props.onChange({
+                    range: TimeRange.CUSTOM,
+                    startAndEndDate,
+                  });
+                }
+              }}
+            />
+            {customDuration ? (
+              <div className="mt-2 flex items-center gap-1.5 text-xs text-gray-500">
+                <Icon icon={IconProp.Clock} className="h-3.5 w-3.5" />
+                <span>
+                  Showing{" "}
+                  <span className="font-medium text-gray-700">
+                    {customDuration}
+                  </span>{" "}
+                  of data.
+                </span>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        ) : (
+          <div>
+            <div className="text-sm font-medium text-gray-900">
+              {selectedRange}
+            </div>
+            <div className="mt-0.5 text-xs text-gray-500">
+              Relative to now &mdash; updates every time the dashboard loads.
+            </div>
+            <div className="mt-3 space-y-2 rounded-md border border-gray-200 bg-gray-50 p-3">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-500">From</span>
+                <span className="font-medium text-gray-900">
+                  {formatDateTime(resolvedRange.startValue)}
+                </span>
+              </div>
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-500">To</span>
+                <span className="font-medium text-gray-900">
+                  {formatDateTime(resolvedRange.endValue)}
+                </span>
+              </div>
+              {previewDuration ? (
+                <div className="flex items-center justify-between border-t border-gray-200 pt-2 text-sm">
+                  <span className="text-gray-500">Duration</span>
+                  <span className="font-medium text-gray-900">
+                    {previewDuration}
+                  </span>
+                </div>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
 
-export default DashboardStartAndEndDateEditElement;
+export default RangeStartAndEndDateEdit;