Usage

Admin UI

The Admin UI enables you to manage the data stored in io.Manager more easily.

Dashboard

The "Dashboard" is the entry page that allows quick access to other pages.

Dashboard

Applications

The "Applications" section allows you to:

  • see a list of all apps:

All Apps

  • see apps that are available to a specific user group:

Apps by Group

  • see apps that are available to a specific user:

Apps by User

  • import new apps:

Apps Import

Layouts

The "Layouts" section allows you to:

  • see a list of all Layouts:

Layouts

  • see Layouts that are available to a specific user group:

Layouts by Group

  • import new Layouts:

Layouts Import

Desktop Configs

The "Desktop Configs" section allows you to add, edit and remove different versions of the configuration files for io.Connect Desktop. The remote configurations provided here will be merged with the locally available ones when io.Connect Desktop is initialized.

Desktop Configs

For more details on how to enable io.Connect Desktop to fetch configurations from a remote location, see the How to Rebrand io.Connect Desktop > Functionality > Remote Configurations section.

Use the "Select Version and Config" panel on the left to add different io.Connect Desktop versions. When you add a version, it appears on the list below the "Add new version" input field. When you click on a newly added version, empty templates for all configuration files of io.Connect Desktop will appear automatically. You can also add other files manually by using the "Add new config" input field. Click on a file to edit it. The left editor section shows the currently edited file, while the right editor section shows the final merged version of the file (e.g., the files from a specific version named 3.17 will be merged with the same files from a base version named *).

⚠️ Note that merging is available only for top-level file properties. If you provide different values for the same top-level key in different file versions, the value in the most specific version will be taken into account when merging the files.

The following demonstrates creating a specific version of the system.json file which contains a setting for disabling the hotkeys functionality of io.Connect Desktop. This version is automatically merged with the system.json file from an already existing version named *, in which there is a setting for disabling the "Restart" entry in the tray icon menu:

Adding Configs

Users

The "Users" section allows you to see all users that have connected to the server:

Users

Sessions

The "Sessions" section allows you to monitor all user sessions:

Sessions

Commands

The "Commands" section allows you to send commands to a specific user session:

Commands

Feedback

The "Feedback" section allows you to see a list of all feedback items submitted by the users:

Feedback

Configuration

io.Connect Desktop

To configure io.Connect Desktop to connect to io.Manager, use the "server" top-level key of the system.json system configuration file of io.Connect Desktop, located in the %LocalAppData%\interop.io\io.Connect Desktop\Desktop\config folder. Add the following configuration to enable connection to io.Manager:

{
    "server": {
        "enabled": true,
        "url": "http://localhost:4356/api"
    }
}

This will add io.Manager as an additional app store. If you want io.Manager to be the only app store, set the "appStores" top-level key to an empty array.

This will also instruct io.Connect Desktop to store Layouts and App Preferences on io.Manager.

If you want to send client crashes to the server, edit the "output" property of the "crashReporter" top-level key:

{
    "crashReporter": {
        "output": {
            "type": "server",
            "serverUrl": "http://localhost:4356/api/crashes"
        }
    }
}

If you want to support different environments and regions that connect to different io.Manager instances, see the How to Rebrand io.Connect Desktop > Functionality > Environments & Regions section.

io.Connect Browser

Connecting to io.Manager from an io.Connect Browser project requires modifying the configuration for initializing the @interopio/browser-platform library in the Main app.

For details on how to set up your io.Connect Browser project to connect to io.Manager, see the Connectivity to io.Manager section in the io.Connect Browser documentation.

Custom Authentication

If your organization has an authentication mechanism that isn't supported by io.Manager, you can implement plugins and build a custom version of io.Manager and the Admin UI that work with it.

The following steps must be executed in order to allow io.Manager to work with your custom authentication mechanism:

  1. Add a custom login page to io.Connect Desktop - when the user logs in, this new page will add a token that will be used by io.Manager to authenticate the user.

  2. Implement a custom authenticator in io.Manager.

  3. Implement a custom authenticator in the Admin UI.

Login Page

To add a custom login screen that will appear on io.Connect Desktop startup to authenticate the user, edit the "ssoAuth" top-level key of the system.json file:

{
    "ssoAuth": {
        "authController": "sso",
        "options": {
            "url": "<URL_TO_LOGIN_PAGE>",
            "window": {
                "width": 500,
                "height": 730,
                "mode": "flat"
            }
        }
    }
}

For more details on setting up a custom login page and managing custom authentication, see the How to Rebrand io.Connect Desktop > Functionality > Login Screen section.

Authenticator in io.Manager

In io.Manager, the custom authenticator should take care of authenticating requests based on a token passed by io.Connect Desktop:

import { start, Config } from "@interopio/manager";

export class Authenticator implements CustomAuthenticator {

    initialize(): void {
        // Will be called when initializing **io.Manager**.
    };

    authenticate(req: Request, res: Response, next: (err?: Error, info?: User) => void): void {
        // A typical implementation would the following:
        // 1. Extract a token from the `req` object (e.g., from the authorization request header).
        // 2. Validate the token.
        // 3. Extract user info.
        // 3. Call the `next()` function.
    };
};

const startServer = async () => {
    const config: Config = {
        name: "test-server",
        port: 4356,
        store: {
            type: "mongo",
            connection: "mongodb://localhost:27017/server",
        },
        token: {
            secret: "mV|GuHok*+6N<C5~S|I0Wy^;Vg1!B~{KT4<U'@%6ZweX;]aw)|wkK5}QmodFl.s"
        },
        auth_method: "custom",
        auth_custom: new Authenticator(),
    };

    const server = await start(config);
};

startServer();

For a full example, see the io.Manager example on GitHub.

Authenticator in the Admin UI

The following is a sample implementation of a custom authenticator for the Admin UI:

import { AuthProvider } from "@glue42/server-admin-ui";

export class CustomAuthProvider implements AuthProvider {
    public isLoading = false;
    public isAuthenticated = true;
    public addTokenToRequest = true;
    public addCredentialsToRequest = false;
    public addUsernameToRequest = false;
    public error: any = undefined;

    public async loginIfNeeded(): Promise<void> {
        // Do nothing, `isAuthenticated` is hard-coded to `true`, so this is never called.
    };

    public async getAccessToken(): Promise<string | undefined> {
        return "test.token";
    };

    public async getUserInfo(): Promise<{ id?: string | undefined; } | undefined> {
        return {
            id: "test"
        };
    };
};

Plugging the custom authenticator in the Admin UI:

// In index.tsx

import React from "react";
import ReactDOM from "react-dom";

import AdminUI from "@glue42/server-admin-ui";
import "@interopio/theme-demo-apps";
import "@interopio/theme-demo-apps/dist/packages/rc-select.css";
import "@glue42/server-admin-ui/dist/src/styles/index.css";
import "@ag-grid-community/core/dist/styles/ag-grid.css";
import { LicenseManager } from "@ag-grid-enterprise/core";

LicenseManager.setLicenseKey("");

ReactDOM.render(
    <React.StrictMode>
        <AdminUI
            serverBase="http://localhost:4356"
            auth={new CustomAuthProvider()}
            theme="dark"
        />
    </React.StrictMode>,
    document.getElementById("root")
);