UI Component Reference - v2.63.2
    Preparing search index...

    Interface ComponentContext<ComponentContextInputs>

    The Component Context provides access to the component's inputs, the page's time range, to the LoggingDataClient and ResourceDataClient and to other application data.

    interface ComponentContext<
        ComponentContextInputs extends object = { [key: string]: any },
    > {
        appData: ComponentContextAppData;
        componentBaseUrl: string;
        destroyed: boolean;
        getDesignToken: { var(name: string): string; (name: string): string };
        inputMap: Map<string, any>;
        inputs: ComponentContextInputs;
        mode: "edit" | "view";
        ontimerangechange: ((newTimeRange: LoggingDataTimeRange) => any) | null;
        onvpnclientstatuschange:
            | ((newStatus: VpnClientStatus | null) => any)
            | null;
        timeRange: LoggingDataTimeRange;
        timeRangeIsAdjustable: boolean;
        vpnClientStatus: VpnClientStatus | null;
        createBackendComponentClient(): BackendComponentClient;
        createLoggingDataClient(): LoggingDataClient;
        createObjectStorageClient(): ObjectStorageClient;
        createResourceDataClient(): ResourceDataClient;
        createTooltip(target: HTMLElement, options: TooltipOptions): Tooltip;
        destroy(): void;
        getApiUrl(rel: string, params?: { [param: string]: string }): string;
        navigateByUrl(url: string): void;
        openAlertDialog(options: AlertDialogOptions): Promise<true | undefined>;
        openConfirmDialog(
            options: ConfirmDialogOptions,
        ): Promise<boolean | undefined>;
        openFormDialog(
            options: FormDialogOptions,
        ): Promise<false | FormDialogResult | undefined>;
        openToast(options: ToastOptions): Promise<true | undefined>;
        openToast(
            message: string,
            options?: Omit<ToastOptions, "message">,
        ): Promise<true | undefined>;
        sanitizeHtml(
            html: string,
            options?: { allowStyleAttr?: boolean },
        ): string | null;
        saveAsFile(data: string | Blob, fileName: string): void;
        setTimeRange(timeRange: LoggingDataTimeRange): void;
        showVpnStatusDetails(agentId: string): void;
        testVpnAccess(agentId: string): boolean;
        toggleVpn(agentId: string): void;
        translate(
            key: string,
            interpolateParams?: object,
            options?: TranslateOptions,
        ): string;
        translate<T extends string>(
            key: T[],
            interpolateParams?: object,
            options?: TranslateOptions,
        ): Record<T, string>;
        translate<T extends string>(
            key: string | T[],
            interpolateParams?: object,
            options?: TranslateOptions,
        ): string | Record<T, string>;
    }

    Type Parameters

    • ComponentContextInputs extends object = { [key: string]: any }
    Index

    Properties

    appData componentBaseUrl destroyed getDesignToken inputMap inputs mode ontimerangechange onvpnclientstatuschange timeRange timeRangeIsAdjustable vpnClientStatus

    Methods

    createBackendComponentClient createLoggingDataClient createObjectStorageClient createResourceDataClient createTooltip destroy getApiUrl navigateByUrl openAlertDialog openConfirmDialog openFormDialog openToast sanitizeHtml saveAsFile setTimeRange showVpnStatusDetails testVpnAccess toggleVpn translate

    Properties

    appData: ComponentContextAppData

    Application data.

    componentBaseUrl: string

    The component's base URL. This can be used to compose an absolute URL to a static component asset.

    For example:

    new URL('./static/image.png', context.componentBaseUrl).href;
    destroyed: boolean

    True if destroy is called and has destroyed all clients.

    getDesignToken: { var(name: string): string; (name: string): string }

    Retrieves the evaluated value of a design token by name, typically a color (e.g., "#ff0000"), while also exposing a .var() method for retrieving the associated CSS custom property string (e.g., "var(--uic-primary)").

    Type Declaration

      • (name: string): string

      • Parameters

        • name: string

          The design token name, e.g., 'primary', 'error', 'background'

        Returns string

        The resolved token value as a string (e.g., color hex, spacing value, etc.)

    • var: function
      • var(name: string): string

        Parameters

        • name: string

        Returns string

    // Get the resolved value of a design token in JavaScript
    const color = context.getDesignToken('primary'); // → "#ff0000"

    // Get the CSS variable string for usage in markup or inline styles
    const cssVar = context.getDesignToken.var('primary'); // → "var(--uic-primary)"

    @experimental
    inputMap: Map<string, any>

    Values for the inputs declared in the components manifest file as a Javascript Map.

    inputs: ComponentContextInputs

    Values for the inputs declared in the components manifest file

    mode: "edit" | "view"

    'edit' when the component is used in the Studio, else 'view'.

    ontimerangechange: ((newTimeRange: LoggingDataTimeRange) => any) | null

    Called when the time range is changed

    onvpnclientstatuschange: ((newStatus: VpnClientStatus | null) => any) | null

    Called when the VPN client status changes

    timeRange: LoggingDataTimeRange

    Snapshot of the current time range

    timeRangeIsAdjustable: boolean

    If the time range is adjustable.

    vpnClientStatus: VpnClientStatus | null

    Snapshot of the current VPN client status.

    Methods

    • Creates a client to retrieve logging data.

      Every time this method is called, a new client is created.

      Returns LoggingDataClient

    • Attaches a tooltip on the target element.

      Parameters

      • target: HTMLElement

        the target element

      • options: TooltipOptions

        configures the tooltip message and other (optional) properties

      Returns Tooltip

      returns the tooltip instance

    • Destroy the clients associated to this context and destroy the context.

      Returns void

    • Get the endpoint for a resource, the rel.

      Parameters

      • rel: string

        The name of the resource, see the reference for all resource relations.

      • Optionalparams: { [param: string]: string }

        Extra query parameters, see the reference for all the URL and query paramaters that can be used for a specific resource.

      Returns string

    • Use this method to navigate to a specific page in the portal, for example the VNC-viewer. Don't use this method to navigate to navigate outside the Portal.

      Parameters

      • url: string

        The URL to navigate to, don't include the host.

      Returns void

    • Opens an alert dialog.

      Parameters

      Returns Promise<true | undefined>

    • Opens a confirmation dialog.

      Parameters

      Returns Promise<boolean | undefined>

    • Opens a toast notification.

      Parameters

      Returns Promise<true | undefined>

      A promise that resolves to true if the action was triggered, or undefined otherwise.

      // Default auto-close behavior (true)
      context.openToast({ message: 'Changes saved' });

      // Default auto-close behavior when actionButtonText is set (false)
      context.openToast({ message: 'Connection timed out', actionButtonText: 'Retry' });

      // Overrides default auto-close behavior, despite actionButtonText being set.
      context.openToast({ message: 'Email archived', actionButtonText: 'Undo', autoClose: true });

    • Opens a toast notification with a simple message and additional options.

      Parameters

      • message: string

        The message to display in the toast.

      • Optionaloptions: Omit<ToastOptions, "message">

        Additional options to configure the toast.

      Returns Promise<true | undefined>

      A promise that resolves to true if the action was triggered, or undefined otherwise.

      // Default auto-close behavior (true)
      context.openToast('Changes saved');

      // Default auto-close behavior when actionButtonText is set (false)
      context.openToast('Connection timed out', { actionButtonText: 'Retry' });

      // Overrides default auto-close behavior, despite actionButtonText being set.
      context.openToast('Email archived', { actionButtonText: 'Undo', autoClose: true });

    • Helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing the passed HTML, removing any potentially unsafe content.

      Parameters

      • html: string

        the HTML to sanitize

      • Optionaloptions: { allowStyleAttr?: boolean }

        allowStyleAttr: if set to true, the style attribute will be allowed in the HTML. Defaults to false

      Returns string | null

    • Save a file.

      Parameters

      • data: string | Blob

        the file data to save

      • fileName: string

        the name of the file

      Returns void

    • Set a new time range. Check timeRangeIsAdjustable to verify the time range is adjustable

      Parameters

      Returns void

    • Open a dialog with VPN status details for an agent.

      Parameters

      • agentId: string

        The agent to show VPN status info for

      Returns void

    • Tests whether the currently logged in user has VPN access to the Agent with the given {@code agentId}.

      Parameters

      • agentId: string

        the Agent ID

      Returns boolean

      true if the user has access, false otherwise

    • Connects or disconnects the VPN-client

      Parameters

      • agentId: string

        The public ID of the agent to connect to or disconnect from.

      Returns void

    • Translate a key to the user's language.

      Parameters

      Returns string

    • Type Parameters

      • T extends string

      Parameters

      Returns Record<T, string>

    • Type Parameters

      • T extends string

      Parameters

      Returns string | Record<T, string>

    Settings

    Member Visibility

    On This Page

    Properties
    Methods