@oneuptime/common 13.0.7 → 13.0.8

package/UI/Utils/ModelAPI/ModelAPI.ts

@@ -47,6 +47,16 @@ export default class ModelAPI {
     return API;
   }
 
+  /*
+   * The client for ONE request: a client the caller routed this request
+   * through (RequestOptions.apiClient) wins; otherwise this class's client.
+   */
+  protected static getApiClientForRequest(
+    requestOptions?: RequestOptions | undefined,
+  ): typeof API {
+    return requestOptions?.apiClient || this.getApiClient();
+  }
+
   public static async create<TBaseModel extends BaseModel>(data: {
     model: TBaseModel;
     modelType: { new (): TBaseModel };
@@ -109,7 +119,7 @@ export default class ModelAPI {
 
     const result: HTTPResponse<
       JSONObject | JSONArray | TBaseModel | Array<TBaseModel>
-    > = await this.getApiClient().fetch<
+    > = await this.getApiClientForRequest(data.requestOptions).fetch<
       JSONObject | JSONArray | TBaseModel | Array<TBaseModel>
     >({
       method: HTTPMethod.PUT,
@@ -163,7 +173,7 @@ export default class ModelAPI {
     }
 
     const apiResult: HTTPErrorResponse | HTTPResponse<TBaseModel> =
-      await this.getApiClient().fetch<TBaseModel>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<TBaseModel>({
         method: httpMethod,
         url: apiUrl,
         data: {
@@ -241,7 +251,7 @@ export default class ModelAPI {
     }
 
     const result: HTTPResponse<JSONArray> | HTTPErrorResponse =
-      await this.getApiClient().fetch<JSONArray>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<JSONArray>({
         method: HTTPMethod.POST,
         url: apiUrl,
         data: {
@@ -315,7 +325,7 @@ export default class ModelAPI {
     }
 
     const result: HTTPResponse<JSONObject> | HTTPErrorResponse =
-      await this.getApiClient().fetch<JSONObject>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<JSONObject>({
         method: HTTPMethod.POST,
         url: apiUrl,
         data: {
@@ -343,10 +353,21 @@ export default class ModelAPI {
   ): Dictionary<string> {
     let headers: Dictionary<string> = {};
 
+    /*
+     * A request routed through another app's client (a public dashboard
+     * widget's /public-dashboard-api read) is not scoped to the viewer's own
+     * project: that client sends its own tenant header. The viewer's
+     * last-opened dashboard project would override it, and a stale or
+     * foreign one turns the public read into a 405 (tenant not found) that
+     * the public page treats as a login event.
+     */
+    const isRoutedToAnotherClient: boolean = Boolean(requestOptions?.apiClient);
+
     if (
-      !requestOptions ||
-      !requestOptions.isMultiTenantRequest ||
-      Object.keys(requestOptions).length === 0
+      !isRoutedToAnotherClient &&
+      (!requestOptions ||
+        !requestOptions.isMultiTenantRequest ||
+        Object.keys(requestOptions).length === 0)
     ) {
       /*
        * Read the tenant id via getCurrentProjectId() first - a plain string
@@ -427,7 +448,7 @@ export default class ModelAPI {
     requestOptions?: RequestOptions | undefined;
   }): Promise<TBaseModel | null> {
     const result: HTTPResponse<TBaseModel> | HTTPErrorResponse =
-      await this.getApiClient().fetch<TBaseModel>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<TBaseModel>({
         method: HTTPMethod.POST,
         url: data.apiUrl,
         data: {
@@ -476,7 +497,7 @@ export default class ModelAPI {
     }
 
     const result: HTTPResponse<TBaseModel> | HTTPErrorResponse =
-      await this.getApiClient().fetch<TBaseModel>({
+      await this.getApiClientForRequest(data.requestOptions).fetch<TBaseModel>({
         method: HTTPMethod.DELETE,
         url: apiUrl,
         headers: this.getCommonHeaders(data.requestOptions),

package/UI/Utils/Navigation.ts

@@ -174,6 +174,15 @@ abstract class Navigation {
   }
 
   public static getCurrentRoute(): Route {
+    /*
+     * The router hands us its location once it has rendered. An API error can
+     * be handled before that (or outside a router altogether), and the address
+     * bar is the same answer then.
+     */
+    if (!this.location) {
+      return new Route(window.location.pathname);
+    }
+
     return new Route(this.location.pathname);
   }
 

package/UI/Utils/OpenAuthenticatedUrl.ts

@@ -0,0 +1,154 @@
+import BaseAPI from "./API/API";
+
+/*
+ * Opening an authenticated URL in a new tab, with the session refreshed first.
+ *
+ * A link to an authenticated API route (an attachment, a pprof export) is a
+ * plain navigation. It carries the session cookies but none of the API
+ * class's recovery: a request made through BaseAPI that comes back 401
+ * refreshes the session and replays itself, while a navigation simply shows
+ * the 401. The access cookie expires with the 15-minute access token, so on a
+ * page left open that long every such link opened a bare "Authentication
+ * required" page although the refresh token was still good. Refreshing before
+ * navigating makes the new tab arrive with a live access cookie. It costs
+ * nothing extra when another request or another tab has just refreshed:
+ * refreshSession() reuses that result.
+ */
+
+export type RefreshSessionFunction = () => Promise<boolean>;
+
+/*
+ * The part of a click event the link handler reads. React.MouseEvent
+ * satisfies it, and so does a DOM MouseEvent, so this module needs neither.
+ */
+export interface AuthenticatedLinkClickEvent {
+  button: number;
+  metaKey: boolean;
+  ctrlKey: boolean;
+  shiftKey: boolean;
+  altKey: boolean;
+  defaultPrevented: boolean;
+  preventDefault: () => void;
+}
+
+/*
+ * The dashboard's session. A client with a session of its own (the status
+ * page) passes its API class's refresh instead.
+ */
+const refreshDashboardSession: RefreshSessionFunction =
+  async (): Promise<boolean> => {
+    return await BaseAPI.refreshSession();
+  };
+
+/*
+ * Point a tab this click already opened at the URL, once the session has been
+ * refreshed. A refresh that did not work closes the tab instead: a refused one
+ * means the session has ended and this page's API client is already taking
+ * the user to the login page, and one that got no answer means the server
+ * cannot be reached, so the tab would only show an error either way.
+ */
+async function navigateTabAfterRefresh(
+  tab: Window,
+  url: string,
+  refreshSession: RefreshSessionFunction,
+): Promise<void> {
+  /*
+   * Cut loose from this page, as rel="noopener" would have done. A blank tab
+   * opened WITH the "noopener" feature could not be pointed anywhere
+   * afterwards, because window.open returns null for it.
+   */
+  tab.opener = null;
+
+  let refreshed: boolean = false;
+
+  try {
+    refreshed = await refreshSession();
+  } catch {
+    refreshed = false;
+  }
+
+  // Closed while the refresh ran: the user changed their mind.
+  if (tab.closed) {
+    return;
+  }
+
+  if (!refreshed) {
+    tab.close();
+    return;
+  }
+
+  tab.location.href = url;
+}
+
+export default async function openAuthenticatedUrl(
+  url: string,
+  refreshSession: RefreshSessionFunction = refreshDashboardSession,
+): Promise<void> {
+  /*
+   * Popup blockers let window.open through only while the click is still
+   * being handled; once the handler has awaited something, Safari and Firefox
+   * no longer count the new tab as the user's doing and block it. So the tab
+   * is opened now, blank, and pointed at the URL once the refresh has settled.
+   */
+  const newTab: Window | null = window.open("", "_blank");
+
+  if (!newTab) {
+    /*
+     * Blocked. Ask for the URL itself, still inside the click: without a tab
+     * to hold, there is nothing to refresh the session for.
+     */
+    window.open(url, "_blank", "noopener,noreferrer");
+    return;
+  }
+
+  await navigateTabAfterRefresh(newTab, url, refreshSession);
+}
+
+/*
+ * The onClick for an <a href={url} target="_blank"> that points at an
+ * authenticated route. The href stays on the element so middle-click, "copy
+ * link address" and the context menu keep working exactly as before (those
+ * paths get no refresh); a plain click opens the URL in a tab of its own once
+ * the session is refreshed.
+ */
+export function handleAuthenticatedLinkClick(
+  event: AuthenticatedLinkClickEvent,
+  url: string,
+  refreshSession?: RefreshSessionFunction,
+): void {
+  /*
+   * Modified clicks stay the browser's: cmd/ctrl-click opens a background
+   * tab, shift-click a new window, alt-click downloads. Turning all of them
+   * into a foreground tab would be a surprise.
+   */
+  if (
+    event.defaultPrevented ||
+    event.button !== 0 ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.shiftKey ||
+    event.altKey
+  ) {
+    return;
+  }
+
+  /*
+   * Open the tab before deciding to take the click over. Where window.open
+   * is refused (a popup-blocking extension, some in-app browsers) the anchor's
+   * own navigation may still be allowed, so the click is left to it - no
+   * refresh, but a link that opens, as it always did.
+   */
+  const newTab: Window | null = window.open("", "_blank");
+
+  if (!newTab) {
+    return;
+  }
+
+  event.preventDefault();
+
+  void navigateTabAfterRefresh(
+    newTab,
+    url,
+    refreshSession || refreshDashboardSession,
+  );
+}

package/UI/Utils/Realtime.ts

@@ -1,4 +1,5 @@
 import { HOST, HTTP_PROTOCOL } from "../Config";
+import API from "./API/API";
 import AnalyticsBaseModel from "../../Models/AnalyticsModels/AnalyticsBaseModel/AnalyticsBaseModel";
 import BaseModel from "../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import { RealtimeRoute } from "../../ServiceRoute";
@@ -21,14 +22,55 @@ export interface ListenToModelEvent<
   modelId?: ObjectID | undefined;
 }
 
+/*
+ * One subscription a caller holds: what the server has to be asked for (again
+ * after every reconnect) and the handler listening on its room.
+ */
+interface RealtimeSubscription {
+  request: ListenToModelEventJSON;
+  roomId: string;
+  handler: (data: JSONObject) => void;
+}
+
 export default abstract class Realtime {
+  /*
+   * The least time between two refresh-and-reconnects. A reconnect with a
+   * freshly refreshed session that the server still refuses (a cookie that
+   * does not reach the socket, say) must not turn into a reconnect loop; the
+   * next refusal after this long tries again. Far shorter than the 15-minute
+   * access token, so a session that genuinely expires again is still renewed.
+   */
+  public static readonly AUTHENTICATION_RECOVERY_COOLDOWN_IN_MS: number =
+    60 * 1000;
+
   private static socket: Socket;
 
+  /*
+   * Every subscription still wanted, by identity: two callers asking for the
+   * same room are two entries, and each one's stop function removes only its
+   * own. The server forgets a socket's rooms when the connection drops, so
+   * this is what gets re-sent on every (re)connect.
+   */
+  private static subscriptions: Set<RealtimeSubscription> = new Set();
+
+  private static isRecoveringAuthentication: boolean = false;
+
+  private static lastAuthenticationRecoveryAt: number | null = null;
+
   public static init(): void {
     const socket: Socket = SocketIO(new URL(HTTP_PROTOCOL, HOST).toString(), {
       path: RealtimeRoute.toString(),
     });
 
+    // Initial connect and every reconnect: the new connection is in no rooms.
+    socket.on("connect", (): void => {
+      this.resubscribeAll();
+    });
+
+    socket.on(EventName.AuthenticationRequired, (): void => {
+      this.onAuthenticationRequired();
+    });
+
     this.socket = socket;
   }
 
@@ -55,27 +97,22 @@ export default abstract class Realtime {
       tenantId: listenToModelEvent.tenantId.toString(),
     };
 
-    this.emit(EventName.ListenToModalEvent, listenToModelEventJSON as any);
-
     const roomId: string = RealtimeUtil.getRoomId(
       listenToModelEvent.tenantId,
       listenToModelEvent.modelType.name,
       listenToModelEvent.eventType,
     );
 
-    this.socket.on(roomId, (data: JSONObject) => {
-      const id: ObjectID = ObjectID.fromString(
-        data["modelId"]?.toString() as string,
-      );
-      onEvent(id);
-    });
-
-    // Stop listening to the event.
-    const stopListening: () => void = (): void => {
-      this.socket.off(roomId);
-    };
-
-    return stopListening;
+    return this.subscribe(
+      listenToModelEventJSON,
+      roomId,
+      (data: JSONObject): void => {
+        const id: ObjectID = ObjectID.fromString(
+          data["modelId"]?.toString() as string,
+        );
+        onEvent(id);
+      },
+    );
   }
 
   public static listenToAnalyticsModelEvent<Model extends AnalyticsBaseModel>(
@@ -93,8 +130,6 @@ export default abstract class Realtime {
       tenantId: listenToModelEvent.tenantId.toString(),
     };
 
-    this.emit(EventName.ListenToModalEvent, listenToModelEventJSON as any);
-
     let roomId: string = RealtimeUtil.getRoomId(
       listenToModelEvent.tenantId,
       listenToModelEvent.modelType.name,
@@ -110,28 +145,139 @@ export default abstract class Realtime {
       );
     }
 
-    this.socket.on(roomId, (model: JSONObject) => {
-      onEvent(
-        AnalyticsBaseModel.fromJSON(
-          model,
-          listenToModelEvent.modelType,
-        ) as Model,
-      );
-    });
+    return this.subscribe(
+      listenToModelEventJSON,
+      roomId,
+      (model: JSONObject): void => {
+        onEvent(
+          AnalyticsBaseModel.fromJSON(
+            model,
+            listenToModelEvent.modelType,
+          ) as Model,
+        );
+      },
+    );
+  }
+
+  public static emit(eventName: string, data: JSONObject): void {
+    if (!this.socket) {
+      this.init();
+    }
+
+    this.socket.emit(eventName, data);
+  }
+
+  private static subscribe(
+    request: ListenToModelEventJSON,
+    roomId: string,
+    handler: (data: JSONObject) => void,
+  ): () => void {
+    const subscription: RealtimeSubscription = {
+      request: request,
+      roomId: roomId,
+      handler: handler,
+    };
+
+    this.subscriptions.add(subscription);
+
+    this.socket.on(roomId, handler);
+
+    /*
+     * Not connected yet (or between a disconnect and a reconnect): the
+     * 'connect' handler sends every registered subscription, this one
+     * included. Emitting now as well would have socket.io buffer this one and
+     * send it a second time on connect.
+     */
+    if (this.socket.connected) {
+      this.socket.emit(EventName.ListenToModalEvent, request);
+    }
 
     // Stop listening to the event.
     const stopListening: () => void = (): void => {
-      this.socket.off(roomId);
+      this.subscriptions.delete(subscription);
+
+      /*
+       * Only this subscription's handler. Removing every listener on the room
+       * would also silence any other subscription to the same room.
+       */
+      this.socket.off(roomId, handler);
     };
 
     return stopListening;
   }
 
-  public static emit(eventName: string, data: JSONObject): void {
-    if (!this.socket) {
-      this.init();
+  private static resubscribeAll(): void {
+    // The server's join is idempotent, so identical requests go once.
+    const sentRequests: Set<string> = new Set();
+
+    for (const subscription of this.subscriptions) {
+      const requestKey: string = JSON.stringify(subscription.request);
+
+      if (sentRequests.has(requestKey)) {
+        continue;
+      }
+
+      sentRequests.add(requestKey);
+
+      this.socket.emit(EventName.ListenToModalEvent, subscription.request);
     }
+  }
 
-    this.socket.emit(eventName, data);
+  /*
+   * The server refused a subscription because this socket's handshake carries
+   * no access token, or an expired one. The cookie is read once, when the
+   * socket connects, so an HTTP request refreshing the session does nothing
+   * for the socket: refresh (or reuse a refresh another request or tab just
+   * did), then reconnect so the new handshake carries the new cookie. The
+   * reconnect's 'connect' re-sends every subscription, including the refused
+   * one.
+   *
+   * A burst of refusals (a page subscribing to several rooms at once) is one
+   * recovery: the first starts it, the rest arrive while it is in flight or
+   * inside the cool-down.
+   */
+  private static onAuthenticationRequired(): void {
+    if (this.isRecoveringAuthentication) {
+      return;
+    }
+
+    if (
+      this.lastAuthenticationRecoveryAt !== null &&
+      Date.now() - this.lastAuthenticationRecoveryAt <
+        this.AUTHENTICATION_RECOVERY_COOLDOWN_IN_MS
+    ) {
+      return;
+    }
+
+    this.isRecoveringAuthentication = true;
+    this.lastAuthenticationRecoveryAt = Date.now();
+
+    this.recoverAuthentication().catch(() => {
+      // recoverAuthentication settles every outcome itself.
+    });
+  }
+
+  private static async recoverAuthentication(): Promise<void> {
+    try {
+      /*
+       * Without a new cookie a reconnect would only be refused again. When
+       * the refresh failed because the session is over, the refresh request
+       * has already sent the user to the login page.
+       */
+      const refreshed: boolean = await API.refreshSession();
+
+      if (!refreshed) {
+        return;
+      }
+
+      this.socket.disconnect();
+      this.socket.connect();
+    } catch {
+      // A refresh that could not complete (offline, say) did not happen.
+    } finally {
+      this.isRecoveringAuthentication = false;
+      // The cool-down runs from the end of the attempt, however long it took.
+      this.lastAuthenticationRecoveryAt = Date.now();
+    }
   }
 }

package/Utils/API.ts

@@ -247,34 +247,43 @@ export default class API {
     return false;
   }
 
+  /*
+   * The class this instance was built from, so `new BaseAPI(...).get()` gets
+   * BaseAPI's session refresh, error handling and headers rather than the
+   * base class's no-op versions.
+   */
+  private getStaticClient(): typeof API {
+    return this.constructor as typeof API;
+  }
+
   public async get<
     T extends JSONObject | JSONArray | BaseModel | Array<BaseModel>,
   >(options: APIRequestOptions): Promise<HTTPResponse<T> | HTTPErrorResponse> {
-    return await API.get<T>(options);
+    return await this.getStaticClient().get<T>(options);
   }
 
   public async delete<
     T extends JSONObject | JSONArray | BaseModel | Array<BaseModel>,
   >(options: APIRequestOptions): Promise<HTTPResponse<T> | HTTPErrorResponse> {
-    return await API.delete<T>(options);
+    return await this.getStaticClient().delete<T>(options);
   }
 
   public async head<
     T extends JSONObject | JSONArray | BaseModel | Array<BaseModel>,
   >(options: APIRequestOptions): Promise<HTTPResponse<T> | HTTPErrorResponse> {
-    return await API.head<T>(options);
+    return await this.getStaticClient().head<T>(options);
   }
 
   public async put<
     T extends JSONObject | JSONArray | BaseModel | Array<BaseModel>,
   >(options: APIRequestOptions): Promise<HTTPResponse<T> | HTTPErrorResponse> {
-    return await API.put<T>(options);
+    return await this.getStaticClient().put<T>(options);
   }
 
   public async patch<
     T extends JSONObject | JSONArray | BaseModel | Array<BaseModel>,
   >(options: APIRequestOptions): Promise<HTTPResponse<T> | HTTPErrorResponse> {
-    return await API.patch<T>(options);
+    return await this.getStaticClient().patch<T>(options);
   }
 
   public static handleError(