@oneuptime/common 12.0.34 → 13.0.1

package/UI/Utils/WebAuthn.ts

@@ -0,0 +1,220 @@
+/* global PublicKeyCredentialDescriptor, PublicKeyCredentialRequestOptions, PublicKeyCredentialCreationOptions, PublicKeyCredentialUserEntity */
+import { JSONObject } from "../../Types/JSON";
+
+type CredentialDescriptorJSON = Omit<PublicKeyCredentialDescriptor, "id"> & {
+  id: string;
+};
+
+type RequestOptionsJSON = Omit<
+  PublicKeyCredentialRequestOptions,
+  "challenge" | "allowCredentials"
+> & {
+  challenge: string;
+  allowCredentials?: Array<CredentialDescriptorJSON>;
+};
+
+type CreationOptionsJSON = Omit<
+  PublicKeyCredentialCreationOptions,
+  "challenge" | "user" | "excludeCredentials"
+> & {
+  challenge: string;
+  user: Omit<PublicKeyCredentialUserEntity, "id"> & { id: string };
+  excludeCredentials?: Array<CredentialDescriptorJSON>;
+};
+
+// Keep binary conversion in the browser: Buffer is not available on all clients.
+export default class WebAuthn {
+  private static decode(value: string): ArrayBuffer {
+    const binary: string = atob(value.replace(/-/g, "+").replace(/_/g, "/"));
+    return Uint8Array.from(binary, (character: string) => {
+      return character.charCodeAt(0);
+    }).buffer;
+  }
+
+  private static encode(value: ArrayBuffer): string {
+    let binary: string = "";
+    for (const byte of new Uint8Array(value)) {
+      binary += String.fromCharCode(byte);
+    }
+
+    return btoa(binary)
+      .replace(/\+/g, "-")
+      .replace(/\//g, "_")
+      .replace(/[=]+$/g, "");
+  }
+
+  public static ensureSupported(): void {
+    if (typeof window !== "undefined" && window.isSecureContext === false) {
+      throw new Error(
+        "Passkeys require a secure connection. Open OneUptime using HTTPS, or sign in with your password.",
+      );
+    }
+
+    if (
+      typeof PublicKeyCredential === "undefined" ||
+      typeof navigator === "undefined" ||
+      !navigator.credentials?.get ||
+      !navigator.credentials?.create
+    ) {
+      throw new Error(
+        "This browser does not support passkeys. Use a supported browser or sign in with your password.",
+      );
+    }
+  }
+
+  public static isSupported(): boolean {
+    try {
+      WebAuthn.ensureSupported();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  public static async authenticate(
+    options: JSONObject,
+    signal?: AbortSignal,
+  ): Promise<JSONObject> {
+    WebAuthn.ensureSupported();
+    if (signal?.aborted) {
+      throw new DOMException("Passkey request canceled.", "AbortError");
+    }
+    const json: RequestOptionsJSON = options as unknown as RequestOptionsJSON;
+    const credential: PublicKeyCredential | null =
+      (await navigator.credentials.get({
+        ...(signal ? { signal: signal } : {}),
+        publicKey: {
+          ...json,
+          challenge: WebAuthn.decode(json.challenge),
+          ...(json.allowCredentials
+            ? {
+                allowCredentials: json.allowCredentials.map(
+                  (
+                    item: CredentialDescriptorJSON,
+                  ): PublicKeyCredentialDescriptor => {
+                    return { ...item, id: WebAuthn.decode(item.id) };
+                  },
+                ),
+              }
+            : {}),
+        } as PublicKeyCredentialRequestOptions,
+      })) as PublicKeyCredential | null;
+
+    if (signal?.aborted) {
+      throw new DOMException("Passkey request canceled.", "AbortError");
+    }
+
+    if (!credential) {
+      throw new DOMException("No credential was selected.", "NotAllowedError");
+    }
+
+    const response: AuthenticatorAssertionResponse =
+      credential.response as AuthenticatorAssertionResponse;
+
+    return {
+      id: credential.id,
+      rawId: WebAuthn.encode(credential.rawId),
+      type: credential.type,
+      ...(credential.authenticatorAttachment
+        ? { authenticatorAttachment: credential.authenticatorAttachment }
+        : {}),
+      clientExtensionResults:
+        credential.getClientExtensionResults() as JSONObject,
+      response: {
+        authenticatorData: WebAuthn.encode(response.authenticatorData),
+        clientDataJSON: WebAuthn.encode(response.clientDataJSON),
+        signature: WebAuthn.encode(response.signature),
+        userHandle: response.userHandle
+          ? WebAuthn.encode(response.userHandle)
+          : null,
+      },
+    };
+  }
+
+  public static async register(
+    options: JSONObject,
+    signal?: AbortSignal,
+  ): Promise<JSONObject> {
+    WebAuthn.ensureSupported();
+    if (signal?.aborted) {
+      throw new DOMException("Passkey request canceled.", "AbortError");
+    }
+    const json: CreationOptionsJSON = options as unknown as CreationOptionsJSON;
+    const credential: PublicKeyCredential | null =
+      (await navigator.credentials.create({
+        ...(signal ? { signal: signal } : {}),
+        publicKey: {
+          ...json,
+          challenge: WebAuthn.decode(json.challenge),
+          user: { ...json.user, id: WebAuthn.decode(json.user.id) },
+          ...(json.excludeCredentials
+            ? {
+                excludeCredentials: json.excludeCredentials.map(
+                  (
+                    item: CredentialDescriptorJSON,
+                  ): PublicKeyCredentialDescriptor => {
+                    return { ...item, id: WebAuthn.decode(item.id) };
+                  },
+                ),
+              }
+            : {}),
+        } as PublicKeyCredentialCreationOptions,
+      })) as PublicKeyCredential | null;
+
+    if (signal?.aborted) {
+      throw new DOMException("Passkey request canceled.", "AbortError");
+    }
+
+    if (!credential) {
+      throw new DOMException("No credential was created.", "NotAllowedError");
+    }
+
+    const response: AuthenticatorAttestationResponse =
+      credential.response as AuthenticatorAttestationResponse;
+
+    return {
+      id: credential.id,
+      rawId: WebAuthn.encode(credential.rawId),
+      type: credential.type,
+      ...(credential.authenticatorAttachment
+        ? { authenticatorAttachment: credential.authenticatorAttachment }
+        : {}),
+      clientExtensionResults:
+        credential.getClientExtensionResults() as JSONObject,
+      response: {
+        attestationObject: WebAuthn.encode(response.attestationObject),
+        clientDataJSON: WebAuthn.encode(response.clientDataJSON),
+        transports: response.getTransports?.() || [],
+      },
+    };
+  }
+
+  public static getErrorMessage(
+    error: unknown,
+    operation: "sign-in" | "registration",
+  ): string {
+    if (error instanceof Error) {
+      if (error.name === "NotAllowedError" || error.name === "AbortError") {
+        return operation === "sign-in"
+          ? "Passkey sign-in was canceled or timed out. Try again, or sign in with your password."
+          : "Passkey registration was canceled or timed out. Try again when you are ready.";
+      }
+
+      if (error.name === "InvalidStateError") {
+        return "This authenticator is already registered. Choose a different authenticator or use your existing passkey.";
+      }
+    }
+
+    if (
+      error &&
+      typeof error === "object" &&
+      "message" in error &&
+      typeof error.message === "string" &&
+      error.message
+    ) {
+      return error.message;
+    }
+
+    return `Unable to complete passkey ${operation}. Please try again.`;
+  }
+}

package/UI/esbuild-config.js

@@ -304,6 +304,9 @@ function createConfig(options) {
   const isDev = process.env.NODE_ENV !== "production";
   const isAnalyze = process.env.analyze === "true";
   const reactRoot = resolvePackageRoot("react");
+  const reactDomRoot = resolvePackageRoot("react-dom");
+  const reactRouterRoot = resolvePackageRoot("react-router");
+  const reactRouterDomRoot = resolvePackageRoot("react-router-dom");
   const reactI18nextRoot = resolvePackageRoot("react-i18next");
   const i18nextRoot = resolvePackageRoot("i18next");
 
@@ -354,8 +357,15 @@ function createConfig(options) {
     external: ["react-native-sqlite-storage", ...additionalExternal],
     alias: {
       react: reactRoot,
+      // Shared controls use portals while the entry point uses react-dom/client.
+      // Resolve both to one renderer even when each package installs its own copy.
+      "react-dom": reactDomRoot,
       "react/jsx-runtime": path.join(reactRoot, "jsx-runtime.js"),
       "react/jsx-dev-runtime": path.join(reactRoot, "jsx-dev-runtime.js"),
+      // Public dashboards reuse widgets from the private dashboard package.
+      // Their links must share the router context installed by the entry app.
+      "react-router": reactRouterRoot,
+      "react-router-dom": reactRouterDomRoot,
       // Force a single instance of i18next/react-i18next so that translations
       // initialized in the service entry are visible to Common UI components.
       // Without this, Common's own node_modules copy gets a separate, never-

package/Utils/API.ts

@@ -11,6 +11,9 @@ import URL from "../Types/API/URL";
 import Dictionary from "../Types/Dictionary";
 import APIException from "../Types/Exception/ApiException";
 import BadDataException from "../Types/Exception/BadDataException";
+import EgressGuardException, {
+  EgressFailureReason,
+} from "../Types/Exception/EgressGuardException";
 import { JSONArray, JSONObject } from "../Types/JSON";
 import RequestFailedDetails, {
   RequestFailedPhase,
@@ -1158,6 +1161,37 @@ export default class API {
     const rawErrorMessage: string =
       (error as Error)?.message || String(error) || "Unknown error";
 
+    /*
+     * The egress guard refuses a target BEFORE any socket is opened, and for
+     * tenant-facing callers it sanitizes its message down to one sentence that
+     * matches none of the patterns below. Left to the fall-through, every such
+     * failure was reported as phase "Unknown" with the sanitized sentence
+     * echoed back as its own explanation — which is exactly what a monitor
+     * incident showed for a host whose DNS had hiccuped. Classify it here
+     * instead, from the exception TYPE rather than from its text.
+     */
+    if (error instanceof EgressGuardException) {
+      return {
+        failedPhase: RequestFailedPhase.TargetResolution,
+        errorCode:
+          error.reason === EgressFailureReason.InvalidTarget
+            ? "INVALID_TARGET"
+            : "TARGET_UNREACHABLE",
+        /*
+         * One constant description for every unreachable reason. It names all
+         * the possibilities without saying which occurred, so it stays useful
+         * without telling a tenant on a shared probe whether a hostname
+         * resolved — that difference is the enumeration oracle the guard's
+         * sanitized message exists to close.
+         */
+        errorDescription:
+          error.reason === EgressFailureReason.InvalidTarget
+            ? `The monitor's target is not a valid HTTP or HTTPS destination, so no request was attempted. ${rawErrorMessage}`
+            : "The probe could not obtain a usable network address for this host, so no connection was attempted and the target was never contacted. Either DNS did not answer, answered with no records, or returned an address this probe is not allowed to dial. Check that the hostname resolves publicly and that its authoritative nameservers are healthy. If this monitor targets an internal host, run it from a self-hosted probe with PROBE_ALLOW_PRIVATE_NETWORK_MONITORS=true.",
+        rawErrorMessage,
+      };
+    }
+
     // Helper to determine the phase and description based on error code/message
     const lowerMessage: string = rawErrorMessage.toLowerCase();
 

package/Utils/Dashboard/Components/DashboardMonitorListComponent.ts

@@ -74,7 +74,8 @@ export default class DashboardMonitorListComponentUtil extends DashboardBaseComp
 
     componentArguments.push({
       name: "Title",
-      description: "Header shown above the monitor list",
+      description:
+        "Header shown above the monitor list. Use {{UNIT}} to show a dashboard variable’s selected label; configure Label Variable separately to filter monitors.",
       required: false,
       type: ComponentInputType.Text,
       id: "title",
@@ -142,6 +143,16 @@ export default class DashboardMonitorListComponentUtil extends DashboardBaseComp
       entityFilterModelType: EntityFilterModelType.Label,
     });
 
+    componentArguments.push({
+      name: "Label Variable",
+      description:
+        "Filter monitors using a Project Labels dashboard variable. This is combined with the fixed filters above. All removes only the variable filter.",
+      required: false,
+      type: ComponentInputType.ProjectLabelVariable,
+      id: "labelVariableId",
+      section: FiltersSection,
+    });
+
     return componentArguments;
   }
 }

package/Utils/Dashboard/Components/DashboardVMwareHostListComponent.ts

@@ -0,0 +1,38 @@
+import DashboardVMwareHostListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardVMwareHostListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import { ComponentArgument } from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import { getVMwareCommonArguments } from "./DashboardVMwareResourceListShared";
+
+export default class DashboardVMwareHostListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardVMwareHostListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.VMwareHostList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  /*
+   * ESXi hosts carry no per-host power or connection state in the vcenter
+   * receiver's output (host power state only appears as a datacenter-level
+   * count), so this widget has no status filter — just the shared
+   * title / max rows / view mode / vCenter arguments.
+   */
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardVMwareHostListComponent>
+  > {
+    return getVMwareCommonArguments<DashboardVMwareHostListComponent>();
+  }
+}

package/Utils/Dashboard/Components/DashboardVMwareResourceListShared.ts

@@ -0,0 +1,70 @@
+import {
+  ComponentArgument,
+  ComponentArgumentSection,
+  ComponentInputType,
+  EntityFilterModelType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardBaseComponent from "../../../Types/Dashboard/DashboardComponents/DashboardBaseComponent";
+import { getViewModeArgument } from "./DashboardListSharedArgs";
+
+/*
+ * Arguments shared by every VMware inventory list widget (hosts, virtual
+ * machines). The shape — title, max rows, view mode, then a vCenter
+ * multi-select in a collapsed Filters panel — is deliberately identical to
+ * the Ceph / Docker Swarm / Proxmox / Kubernetes builders; a cross-provider
+ * test compares them. Widget-specific filters (power state, templates) are
+ * added by the per-widget util, never here.
+ */
+
+export const VMwareDisplaySection: ComponentArgumentSection = {
+  name: "Display Options",
+  description: "Configure the widget title and row limit",
+  order: 1,
+};
+
+export const VMwareFiltersSection: ComponentArgumentSection = {
+  name: "Filters",
+  description: "Narrow down which resources are shown",
+  order: 2,
+  defaultCollapsed: true,
+};
+
+export function getVMwareCommonArguments<
+  T extends DashboardBaseComponent,
+>(): Array<ComponentArgument<T>> {
+  const args: Array<ComponentArgument<T>> = [];
+
+  args.push({
+    name: "Title",
+    description: "Header shown above the list",
+    required: false,
+    type: ComponentInputType.Text,
+    id: "title" as keyof T["arguments"],
+    section: VMwareDisplaySection,
+  });
+
+  args.push({
+    name: "Max Rows",
+    description: "Maximum number of rows to show",
+    required: false,
+    type: ComponentInputType.Number,
+    id: "maxRows" as keyof T["arguments"],
+    placeholder: "25",
+    section: VMwareDisplaySection,
+  });
+
+  args.push(getViewModeArgument<T>(VMwareDisplaySection));
+
+  args.push({
+    name: "vCenters",
+    description: "Show only resources from the selected vCenters",
+    required: false,
+    type: ComponentInputType.EntityMultiSelectDropdown,
+    id: "vmwareVCenterIds" as keyof T["arguments"],
+    placeholder: "All vCenters",
+    section: VMwareFiltersSection,
+    entityFilterModelType: EntityFilterModelType.VMwareVCenter,
+  });
+
+  return args;
+}

package/Utils/Dashboard/Components/DashboardVMwareVirtualMachineListComponent.ts

@@ -0,0 +1,76 @@
+import DashboardVMwareVirtualMachineListComponent from "../../../Types/Dashboard/DashboardComponents/DashboardVMwareVirtualMachineListComponent";
+import { ObjectType } from "../../../Types/JSON";
+import ObjectID from "../../../Types/ObjectID";
+import DashboardBaseComponentUtil from "./DashboardBaseComponent";
+import {
+  ComponentArgument,
+  ComponentInputType,
+} from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
+import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import {
+  VMwareFiltersSection,
+  getVMwareCommonArguments,
+} from "./DashboardVMwareResourceListShared";
+
+export default class DashboardVMwareVirtualMachineListComponentUtil extends DashboardBaseComponentUtil {
+  public static override getDefaultComponent(): DashboardVMwareVirtualMachineListComponent {
+    return {
+      _type: ObjectType.DashboardComponent,
+      componentType: DashboardComponentType.VMwareVirtualMachineList,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 4,
+      topInDashboardUnits: 0,
+      leftInDashboardUnits: 0,
+      componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6,
+      arguments: {
+        maxRows: 25,
+      },
+    };
+  }
+
+  public static override getComponentConfigArguments(): Array<
+    ComponentArgument<DashboardVMwareVirtualMachineListComponent>
+  > {
+    const args: Array<
+      ComponentArgument<DashboardVMwareVirtualMachineListComponent>
+    > = getVMwareCommonArguments<DashboardVMwareVirtualMachineListComponent>();
+
+    /*
+     * Power state is inferred at ingest: the vcenter receiver emits
+     * vcenter.vm.cpu.* only for powered-on VMs, so "off" covers both
+     * powered-off and suspended machines.
+     */
+    args.push({
+      name: "Power State",
+      description: "Quick filter by virtual machine power state",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "powerStateFilter",
+      section: VMwareFiltersSection,
+      dropdownOptions: [
+        { label: "All", value: "" },
+        { label: "Powered on only", value: "on" },
+        { label: "Powered off only", value: "off" },
+      ],
+    });
+
+    args.push({
+      name: "Templates",
+      description:
+        "Include VM templates alongside virtual machines, hide them, or show only templates",
+      required: false,
+      type: ComponentInputType.Dropdown,
+      id: "templateFilter",
+      section: VMwareFiltersSection,
+      dropdownOptions: [
+        { label: "VMs and templates", value: "" },
+        { label: "Hide templates", value: "exclude" },
+        { label: "Templates only", value: "only" },
+      ],
+    });
+
+    return args;
+  }
+}

package/Utils/Dashboard/Components/Index.ts

@@ -50,6 +50,8 @@ import DashboardTraceChartComponentUtil from "./DashboardTraceChartComponent";
 import DashboardTraceTableComponentUtil from "./DashboardTraceTableComponent";
 import DashboardTraceListComponentUtil from "./DashboardTraceListComponent";
 import DashboardValueComponentUtil from "./DashboardValueComponent";
+import DashboardVMwareHostListComponentUtil from "./DashboardVMwareHostListComponent";
+import DashboardVMwareVirtualMachineListComponentUtil from "./DashboardVMwareVirtualMachineListComponent";
 
 export default class DashboardComponentsUtil {
   public static getComponentSettingsArguments(
@@ -318,6 +320,20 @@ export default class DashboardComponentsUtil {
       >;
     }
 
+    if (dashboardComponentType === DashboardComponentType.VMwareHostList) {
+      return DashboardVMwareHostListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
+    if (
+      dashboardComponentType === DashboardComponentType.VMwareVirtualMachineList
+    ) {
+      return DashboardVMwareVirtualMachineListComponentUtil.getComponentConfigArguments() as Array<
+        ComponentArgument<DashboardBaseComponent>
+      >;
+    }
+
     if (dashboardComponentType === DashboardComponentType.DockerSwarmNodeList) {
       return DashboardDockerSwarmNodeListComponentUtil.getComponentConfigArguments() as Array<
         ComponentArgument<DashboardBaseComponent>

package/Utils/Dashboard/LabelVariable.ts

@@ -0,0 +1,152 @@
+import Includes from "../../Types/BaseDatabase/Includes";
+import IncludesAnyOfGroups from "../../Types/BaseDatabase/IncludesAnyOfGroups";
+import DashboardVariable, {
+  DashboardVariableOption,
+  DashboardVariableType,
+} from "../../Types/Dashboard/DashboardVariable";
+import BadDataException from "../../Types/Exception/BadDataException";
+import ObjectID from "../../Types/ObjectID";
+import DashboardVariableInterpolation, {
+  ResolvedVariableValue,
+} from "./VariableInterpolation";
+
+export interface DashboardLabelFilterData {
+  labelIds?: Array<string> | undefined;
+  labelVariableId?: string | undefined;
+  variables?: Array<DashboardVariable> | undefined;
+}
+
+export default class DashboardLabelVariable {
+  public static getOptions(
+    variable: DashboardVariable,
+  ): Array<DashboardVariableOption> {
+    const options: Array<DashboardVariableOption> | undefined =
+      variable.labelOptions;
+    if (
+      !Array.isArray(options) ||
+      options.length === 0 ||
+      options.length > 1000
+    ) {
+      throw new BadDataException(
+        "A project label variable must offer between 1 and 1000 labels.",
+      );
+    }
+
+    const seen: Set<string> = new Set<string>();
+    for (const option of options) {
+      if (
+        !option ||
+        typeof option.value !== "string" ||
+        !ObjectID.isValidUUID(option.value) ||
+        typeof option.label !== "string" ||
+        option.label.trim().length === 0 ||
+        option.label.length > 1024 ||
+        seen.has(option.value)
+      ) {
+        throw new BadDataException(
+          "Project label variable choices must have unique label IDs and nonempty display names.",
+        );
+      }
+      seen.add(option.value);
+    }
+    return options;
+  }
+
+  public static getFilter(
+    data: DashboardLabelFilterData,
+  ): Includes | IncludesAnyOfGroups | undefined {
+    const fixed: Array<string> = [...new Set(data.labelIds || [])];
+    if (!data.labelVariableId) {
+      return fixed.length > 0 ? new Includes(fixed) : undefined;
+    }
+
+    const matching: Array<DashboardVariable> = (data.variables || []).filter(
+      (variable: DashboardVariable) => {
+        return variable.id === data.labelVariableId;
+      },
+    );
+    const variable: DashboardVariable | undefined = matching[0];
+    if (
+      matching.length !== 1 ||
+      !variable ||
+      variable.type !== DashboardVariableType.ProjectLabel
+    ) {
+      throw new BadDataException(
+        "The monitor widget's label variable is missing or is not a project label variable. Edit the widget to select a label variable.",
+      );
+    }
+
+    const allowed: Set<string> = new Set(
+      DashboardLabelVariable.getOptions(variable).map(
+        (option: DashboardVariableOption) => {
+          return option.value;
+        },
+      ),
+    );
+    const resolved: ResolvedVariableValue | undefined =
+      DashboardVariableInterpolation.resolveValue(variable);
+    const selected: Array<string> =
+      resolved?.multi ||
+      (resolved?.scalar !== undefined ? [resolved.scalar] : []);
+    if (
+      selected.length > 100 ||
+      selected.some((value: string) => {
+        return !allowed.has(value);
+      })
+    ) {
+      throw new BadDataException(
+        "Choose up to 100 labels offered by this dashboard variable, or select All.",
+      );
+    }
+
+    if (selected.length === 0) {
+      return fixed.length > 0 ? new Includes(fixed) : undefined;
+    }
+    const dynamic: Array<string> = [...new Set(selected)];
+    return fixed.length > 0
+      ? new IncludesAnyOfGroups([fixed, dynamic])
+      : new Includes(dynamic);
+  }
+
+  public static interpolateTitle(
+    title: string | undefined,
+    variables: Array<DashboardVariable> | undefined,
+  ): string | undefined {
+    if (!title || !variables?.length) {
+      return title;
+    }
+    return title.replace(
+      /\{\{([a-zA-Z_][a-zA-Z0-9_]*)\}\}/g,
+      (placeholder: string, name: string): string => {
+        const variable: DashboardVariable | undefined = variables.find(
+          (item: DashboardVariable) => {
+            return item.name === name;
+          },
+        );
+        if (!variable) {
+          return placeholder;
+        }
+        const resolved: ResolvedVariableValue | undefined =
+          DashboardVariableInterpolation.resolveValue(variable);
+        if (!resolved) {
+          return "All";
+        }
+        const values: Array<string> = resolved.multi || [
+          resolved.scalar as string,
+        ];
+        return values
+          .map((value: string): string => {
+            if (variable.type !== DashboardVariableType.ProjectLabel) {
+              return value;
+            }
+            return (
+              variable.labelOptions?.find((option: DashboardVariableOption) => {
+                return option.value === value;
+              })?.label || "Unavailable label"
+            );
+          })
+          .join(", ");
+      },
+    );
+  }
+}