@oneuptime/common 11.3.2 → 11.3.3

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/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/UI/Components/EditionLabel/EditionLabel.tsx

@@ -462,7 +462,12 @@ const EditionLabel: FunctionComponent<ComponentProps> = (
         type="button"
         onClick={openDialog}
         className={`${pillClassName} ${props.className ? props.className : ""}`}
-        aria-label={`${editionName} details`}
+        /*
+         * Accessible name must include the visible text (WCAG 2.5.3 Label in
+         * Name) so voice-control users can activate it by the words they see
+         * ("{editionName}" and "{ctaLabel}", e.g. "Learn more").
+         */
+        aria-label={`${editionName}, ${ctaLabel}`}
       >
         {showAlertedPill && (
           <Icon

package/UI/Components/Footer/Footer.tsx

@@ -66,7 +66,7 @@ const Footer: FunctionComponent<ComponentProps> = (
           {/* Copyright: Show on mobile, hide on larger screens unless specified */}
           <div className="mt-5 md:order-1 md:mt-0 block md:hidden lg:block">
             {props.copyright && (
-              <p className="text-center text-sm text-gray-400">
+              <p className="text-center text-sm text-gray-500">
                 &copy; {props.copyright}
               </p>
             )}

package/UI/Components/Icon/Icon.tsx

@@ -35,6 +35,14 @@ export interface ComponentProps {
   onClick?: (() => void) | undefined;
   type?: IconType | undefined;
   style?: React.CSSProperties | undefined;
+  /*
+   * When the icon conveys meaning on its own (e.g. a standalone status or
+   * severity indicator that is not described by adjacent text), pass an
+   * ariaLabel so the icon is exposed to assistive technology as an image
+   * with an accessible name (WCAG 1.1.1). When omitted, the icon is treated
+   * as decorative and hidden from assistive technology.
+   */
+  ariaLabel?: string | undefined;
   "data-testid"?: string;
 }
 const Icon: FunctionComponent<ComponentProps> = ({
@@ -46,6 +54,7 @@ const Icon: FunctionComponent<ComponentProps> = ({
   onClick,
   type,
   style,
+  ariaLabel,
   "data-testid": dataTestId,
 }: ComponentProps): ReactElement => {
   let sizeClassName: string = "";
@@ -113,7 +122,10 @@ const Icon: FunctionComponent<ComponentProps> = ({
       | undefined,
   ): ReactElement => {
     return (
-      <div role="icon">
+      <div
+        role={ariaLabel ? "img" : undefined}
+        aria-label={ariaLabel || undefined}
+      >
         <svg
           onClick={() => {
             if (onClick) {

package/UI/Components/Image/Image.tsx

@@ -41,7 +41,12 @@ const Image: FunctionComponent<ComponentProps> = (
           props.onClick?.();
         }}
         data-testid={props["data-testid"]}
-        alt={props.alt}
+        /*
+         * Always render an alt attribute so the <img> is never missing it
+         * (WCAG 1.1.1). Callers should pass a descriptive alt for meaningful
+         * images (e.g. avatars); an empty string marks the image decorative.
+         */
+        alt={props.alt ?? ""}
         src={url}
         height={props.height}
         className={props.className}

package/UI/Components/Link/Link.tsx

@@ -33,6 +33,28 @@ const Link: FunctionComponent<ComponentProps> = (
     children = props.children;
   }
 
+  /*
+   * Neither a destination nor an action: this is static text, not a link or a
+   * button. Render a <span> rather than an <a> with no href, which is
+   * ambiguous to assistive technology (is it a link, a button, or just text?
+   * WCAG 4.1.2 Name, Role, Value).
+   */
+  if (!props.to && !props.onClick) {
+    return (
+      <span
+        id={props.id}
+        className={`cursor-default ${props.className || ""}`}
+        onMouseOver={props.onMouseOver}
+        onMouseOut={props.onMouseOut}
+        onMouseLeave={props.onMouseLeave}
+        style={props.style}
+        title={props.title}
+      >
+        {children}
+      </span>
+    );
+  }
+
   const linkProps: JSONObject = {};
 
   /*

package/UI/Components/MasterPage/MasterPage.tsx

@@ -15,6 +15,12 @@ export interface ComponentProps {
   className?: string | undefined;
   hideHeader?: boolean | undefined;
   makeTopSectionUnstick?: boolean | undefined;
+  /*
+   * Set when the consumer renders its own <main id="main-content"> landmark
+   * and skip link inside children (e.g. the status page), so this component
+   * does not add a second, nested main landmark or a duplicate skip link.
+   */
+  disableMainContentWrapper?: boolean | undefined;
 }
 
 const MasterPage: FunctionComponent<ComponentProps> = (
@@ -42,6 +48,19 @@ const MasterPage: FunctionComponent<ComponentProps> = (
     <React.Fragment>
       {isOnline && (
         <div className={props.className}>
+          {/*
+           * Skip link so keyboard and screen-reader users can bypass the
+           * repeated header/navigation and jump straight to the page content
+           * (WCAG 2.4.1 Bypass Blocks). Visually hidden until focused.
+           */}
+          {!props.disableMainContentWrapper && (
+            <a
+              href="#main-content"
+              className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-indigo-600 focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-white focus:shadow-lg"
+            >
+              Skip to main content
+            </a>
+          )}
           <div
             className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
           >
@@ -53,7 +72,17 @@ const MasterPage: FunctionComponent<ComponentProps> = (
             />
           </div>
 
-          {props.children}
+          {props.disableMainContentWrapper ? (
+            props.children
+          ) : (
+            <main
+              id="main-content"
+              tabIndex={-1}
+              className="focus:outline-none"
+            >
+              {props.children}
+            </main>
+          )}
 
           {props.footer && props.footer}
         </div>

package/UI/Components/Page/Page.tsx

@@ -40,6 +40,33 @@ const Page: FunctionComponent<ComponentProps> = (
     }
   }, [props.breadcrumbLinks]);
 
+  /*
+   * Give each page a unique, descriptive document title (WCAG 2.4.2 Page
+   * Titled). Without this, every page keeps the generic title set once at app
+   * startup (e.g. "OneUptime | Dashboard"), which does not describe the page.
+   * Prefer the breadcrumb trail (most specific page last) and fall back to the
+   * page title.
+   */
+  useEffect(() => {
+    const breadcrumbTitle: string | undefined =
+      props.breadcrumbLinks && props.breadcrumbLinks.length > 0
+        ? props.breadcrumbLinks
+            .map((link: Link) => {
+              return translateString(link.title);
+            })
+            .filter((value: string | undefined): value is string => {
+              return Boolean(value);
+            })
+            .join(" - ")
+        : undefined;
+
+    const pageTitle: string | undefined = breadcrumbTitle || translatedTitle;
+
+    if (pageTitle) {
+      document.title = `OneUptime | ${pageTitle}`;
+    }
+  }, [translatedTitle, props.breadcrumbLinks]);
+
   if (props.error) {
     return <ErrorMessage message={props.error} />;
   }
@@ -104,7 +131,7 @@ const Page: FunctionComponent<ComponentProps> = (
       )}
 
       {props.sideMenu && (
-        <main className="mx-auto max-w-full pb-10">
+        <div className="mx-auto max-w-full pb-10">
           <div className="flex flex-col md:flex-row md:gap-4 lg:gap-5">
             {props.sideMenu}
 
@@ -117,7 +144,7 @@ const Page: FunctionComponent<ComponentProps> = (
               </div>
             )}
           </div>
-        </main>
+        </div>
       )}
 
       {!props.sideMenu && !props.isLoading && props.children}