# AI DIAL Admin Frontend
## Overview
This project is a web application built using [Next.js](https://nextjs.org/), a React framework with server-rendering capabilities. It can be easily customized and adapted to your needs by following the steps mentioned below.
> Refer to [User Guide](https://docs.dialx.ai/tutorials/admin/home) for administrators to learn about features of DIAL Admin.
## Set Up Developer Environment
This project is managed by [NX](https://nx.dev/).
Before diving into the development environment, install Node.js (version >=20) and npm on your system. If you don't already have them, follow the [instruction](https://nodejs.org/en/download/).
Once you have Node.js and npm installed, follow these steps to set up your developer environment:
1. Clone the AI DIAL Admin repository:
```bash
git clone https://github.com/epam/ai-dial-admin-frontend.git
```
2. Setup Node JS version
Recommended version of Node JS `24.12.0`\
Use `nvm` to switch to the supported version of Node JS
3. Install project dependencies:
```bash
npm install
```
4. Create `.env.local` file in the `\apps\ai-dial-admin` project directory and add the required variables with appropriate values. These two are the only required environment variables.
```bash
DIAL_ADMIN_API_URL="ADD_VALUE_HERE"
NEXTAUTH_SECRET="ADD_VALUE_HERE"
```
5. To start the development server, run:
```bash
npm start
```
Once the server is up and running, open `http://localhost:4200` in your browser to view the AI DIAL Admin application.
To run the optimized production build, execute this command:
```bash
npm start --configuration=production
```
This will start a production server on the default port 4200.
## Build
To create an optimized build of your application, run the following command:
```bash
npm run build --configuration=production
```
After running the command, you will see a `.dist` folder created in your project directory with the optimized output.
## Test
To run the unit tests suite for your application, execute the following command:
```bash
npm run test
```
## Environment Variables
AI DIAL Admin uses environment variables for configuration. All environment variables that can be used to configure settings and behavior of the application are included in the `.env` file.
| Variable | Required | Description | Available Values | Default values |
| ------------------------------------------- | :------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
| `DIAL_ADMIN_API_URL` | Yes | AI DIAL Admin Backend API url.<br />Refer to [AI DIAL Admin Backend](https://github.com/epam/ai-dial-admin-backend.git). | Any string | |
| `DIAL_CORE_API_URL` | Yes | DIAL Core API url. Required for Publications, which call DIAL Core directly (forwarding the user JWT). | Any string | |
| `THEMES_CONFIG_URL` | No | The host URL for a custom themes configuration and list of available icons for entities<br />Can lead to public and private resource. | Any string | |
| `DISABLE_MENU_ITEMS` | No | List of menu items to hide in the application | Any string | |
| `GRAFANA_LINK` | No | Link to Grafana UI application [Menu Documentation](https://github.com/epam/ai-dial-admin-front/-/blob/development/docs/MENU-DOCUMENTATION.md) | Any string | |
| `APP_NAME` | No | Application name | Any string | `AI Dial Admin` |
| `DIAL_LINK` | No | Link to DIAL application on the **Home page** | Any string | |
| `DIAL_LINK_BUTTON_NAME` | No | The name of the `Open Dial Chat` button on the Home page application | Any string | |
| `DIAL_ADMIN_DOCUMENTATION` | No | Link to DIAL Admin documentation application | Any string | |
| `PUBLICATION_FILTERS` | No | Defines types of publications that can be retrieved from the database | Any string | `title,role` |
| `ORG_UNITS_GROUP_CLAIM` | No | Claim name (or dotted path such as `realm_access.roles`) that holds a user's groups; group holders on org units are recognised and created with it | Any string | `groups` |
| `DEPLOYMENTS_ENABLED` | No | Defines if deployment manager is enabled in app | Any boolean | false |
| `MCP_REGISTRY_ENABLED` [Preview] | No | Enables MCP Registry integration for creating MCP containers from registry servers | Any boolean | false |
| `POLICIES_ENABLED` [Preview] | No | Shows the Governance Policies and Policy Assignments pages. Core stores these records but does not enforce them yet | Any boolean | false |
| `HF_ENABLED` | No | Enables the HF Model Serving option in the Deployments section; when disabled, the Model Servings tab is hidden | Any boolean | false |
| `DEPLOYMENTS_DISABLE_JSON_EDITOR` | No | Defines if JSON editor is enabled in Deployment manager | Any boolean | false |
| `DEPLOYMENTS_RESOURCES_DEFAULTS` | No | Defines resources defaults for deployments/servings | Object | `{"CPU_REQUEST": "0.5", "CPU_LIMIT": "0.5", "MEMORY_REQUEST": "1024", "MEMORY_LIMIT": "1024", "GPU_REQUEST": "1", "GPU_LIMIT": "1"}` |
| `DIAL_DEPLOYMENTS_API_URL` | No | AI DIAL Deployments API url. | Any string | |
| `CODE_APP_EDITOR_URL` | No | Editor URL for Code App applications. When an Endpoints application's `endpoint` and `editorUrl` both equal this value, it is shown as the `Code App` source type. | Any string | |
| `DIAL_EVAL_API_URL` [Preview] | No | AI DIAL Evaluation API url. | Any string | |
| `ANALYTICS_ENABLED` [Preview] | No | Enables the Analytics section (menu group with the Query Builder and Tables sub-items). When disabled, the group and its routes are hidden. | Any boolean | false |
| `ANALYTICS_SESSIONS_ENABLED` [Preview] | No | Enables the Sessions sub-item in the Analytics section. Takes effect only when `ANALYTICS_ENABLED` is `true`; when disabled, the sub-item is hidden while the rest of the Analytics section stays available. | Any boolean | false |
| `DIAL_ANALYTICS_API_URL` [Preview] | No | AI DIAL Analytics data-access service API url (Analytics). | Any string | |
| `DIAL_QUERY_ASSISTANT_DEPLOYMENT` [Preview] | No | Deployment id (resource URL, e.g. `applications/<bucket>/<app>__<version>`) of the DIAL application backing the Query Builder AI view. When set (and Analytics is enabled), the AI view is shown; requests go to this deployment via `DIAL_CORE_API_URL`. When unset, the AI view is hidden. | Any string | |
| `ENABLE_EXPORT_CONFIG_MAP` | No | Available on the **Export config** page to export configuration from Core config source. | JSON | false |
| `ENABLE_UNSAFE_TOOLSET_IMPORT` | No | Toolset **JSON** import only: adds a warning and an editable `Client secret` column (default `REPLACE_WITH_REAL_SECRET`) for OAUTH toolsets, which Core rejects without a secret. Set a real secret there or later on the toolset page, or OAuth sign-in will not work. | Boolean | false |
| `ALLOWED_IFRAME_ORIGINS` | No | Specifies all URLs that are allowed to embed DIAL Admin within an iframe. | Any origin valid format. List of space separated | `none` |
| `ALLOWED_IMAGE_ORIGINS` | No | Specifies all URLs that are allowed to embed images inside DIAL Admin | Any origin valid format. List of space separated | `none` |
### Environment Variables for the Configuration of Auth Providers
The table below presents a list of environment variables you can use to configure a specific IDP provider.
> **NOTE**: to test the AI DIAL Admin application in an **unauthenticated** mode, do not provide any of these variables. The only required variable to launch the application is `NEXTAUTH_SECRET`.
| Variable | Required | Description | Available Values | Default values |
| -------------------------------- | :------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| `NEXTAUTH_URL` | Optional.<br /> Required for **production** deployments. | NextAuth URL | Any string | |
| `NEXTAUTH_SECRET` | Yes | NextAuth Secret (generate by `openssl rand -base64 32` for example) | Any string | |
| `NEXTAUTH_COOKIE_PREFIX` | No | Custom prefix for next auth cookie names Yes | Any string | |
| `AUTH_IDTOKEN_PROVIDERS` | No | List of identity provider ids which will pass identity token to API instead of access token (e.g. Google and Gitlab access tokens are not JWT) | Any string. Values must be separated by a comma. E.g. `google,gitlab` | |
| `ADMIN_ROLE_NAMES` | No | Defines default administrator role names | Any string. Values must be separated by a comma. | `admin` |
| `DIAL_ROLES_FIELD` | No | Defines the path of the roles field in JWT token | Any string. Value can be dot-separated. E.g. path `realm_access.roles` if there is a claim `realm_access: { roles: ['admin'] }` | `dial_roles` |
| `AUTH_AUTH0_AUDIENCE` | No | Auth0 Audience | Any string | |
| `AUTH_AUTH0_CLIENT_ID` | No | Auth0 Client ID | Any string | |
| `AUTH_AUTH0_HOST` | No | Auth0 Host | Any string | |
| `AUTH_AUTH0_NAME` | No | Auth0 Name | Any string | |
| `AUTH_AUTH0_SECRET` | No | Auth0 Secret | Any string | |
| `AUTH_AUTH0_SCOPE` | No | Auth0 Scope | Any string | `openid email profile offline_access` |
| `AUTH_AUTH0_ADMIN_ROLE_NAMES` | No | Defines the administrator names | Any string. Values must be separated by a comma. | |
| `AUTH_AUTH0_DIAL_ROLES_FIELD` | No | Defines the path of the roles field in JWT token | refer to `DIAL_ROLES_FIELD` for details | |
| `AUTH_AZURE_AD_CLIENT_ID` | No | A unique identifier for the client application registered in Azure Active Directory (AD). It is used to authenticate the client application when accessing Azure AD resources. | Any string | |
| `AUTH_AZURE_AD_NAME` | No | A name of the Azure AD tenant. It is used to specify the specific Azure AD instance to authenticate against. | Any string | |
| `AUTH_AZURE_AD_SECRET` | No | Also known as the client secret or application secret, this parameter is a confidential string that authenticates and authorizes the client application to access Azure AD resources. It serves as a password for the client application. | Any string | |
| `AUTH_AZURE_AD_TENANT_ID` | No | Tenant ID refers to a globally unique identifier (GUID) that represents a specific Azure AD tenant. It is used to identify and authenticate the Azure AD tenant that the client application belongs to. | Any string | |
| `AUTH_AZURE_AD_SCOPE` | No | This parameter specifies the level of access and permissions that the client application requests when making a request to Azure AD resources. It defines the resources and actions that the application can access on behalf of a user or itself. | Any string | `openid profile user.Read email offline_access` |
| `AUTH_AZURE_ADMIN_ROLE_NAMES` | No | Defines the administrator names | Any string. Values must be separated by a comma. | |
| `AUTH_AZURE_DIAL_ROLES_FIELD` | No | Defines the path of the roles field in JWT token | refer to `DIAL_ROLES_FIELD` for details | |
| `AUTH_GITLAB_CLIENT_ID` | No | GitLab Client ID | Any string | |
| `AUTH_GITLAB_HOST` | No | GitLab Host | Any string | |
| `AUTH_GITLAB_NAME` | No | GitLab Name | Any string | |
| `AUTH_GITLAB_SECRET` | No | GitLab Secret | Any string | |
| `AUTH_GITLAB_SCOPE` | No | GitLab Scope | Any string | `read_user` |
| `AUTH_GITLAB_ADMIN_ROLE_NAMES` | No | Defines the administrator names | Any string. Values must be separated by a comma. | |
| `AUTH_GITLAB_DIAL_ROLES_FIELD` | No | Defines the path of the roles field in JWT token | refer to `DIAL_ROLES_FIELD` for details | |
| `AUTH_GOOGLE_CLIENT_ID` | No | Google Client ID | Any string | |
| `AUTH_GOOGLE_NAME` | No | Google Name | Any string | |
| `AUTH_GOOGLE_SECRET` | No | Google Secret | Any string | |
| `AUTH_GOOGLE_SCOPE` | No | Google Scope | Any string | `openid email profile offline_access` |
| `AUTH_KEYCLOAK_CLIENT_ID` | No | Keycloak Client ID | Any string | |
| `AUTH_KEYCLOAK_HOST` | No | Keycloak Host | Any string | |
| `AUTH_KEYCLOAK_NAME` | No | Keycloak Name | Any string | |
| `AUTH_KEYCLOAK_SECRET` | No | Keycloak Secret | Any string | |
| `AUTH_KEYCLOAK_SCOPE` | No | Keycloak Scope | Any string | `openid email profile offline_access` |
| `AUTH_KEYCLOAK_ADMIN_ROLE_NAMES` | No | Defines the administrator names | Any string. Values must be separated by a comma. | |
| `AUTH_KEYCLOAK_DIAL_ROLES_FIELD` | No | Defines the path of the roles field in JWT token | refer to `DIAL_ROLES_FIELD` for details | |
| `AUTH_PING_ID_CLIENT_ID` | No | PingID Client ID | Any string | |
| `AUTH_PING_ID_HOST` | No | PingID Host | Any string | |
| `AUTH_PING_ID_NAME` | No | PingID Name | Any string | |
| `AUTH_PING_ID_SECRET` | No | PingID Secret | Any string | |
| `AUTH_PING_ID_SCOPE` | No | PingID Scope | Any string | `offline_access` |
| `AUTH_PING_ID_ADMIN_ROLE_NAMES` | No | Defines the administrator names | Any string. Values must be separated by a comma. | |
| `AUTH_PING_ID_DIAL_ROLES_FIELD` | No | Defines the path of the roles field in JWT token | refer to `DIAL_ROLES_FIELD` for details | |
| `AUTH_COGNITO_CLIENT_ID` | No | Cognito Client ID | Any string | |
| `AUTH_COGNITO_HOST` | No | Cognito Host | Any string | |
| `AUTH_COGNITO_NAME` | No | Cognito Name | Any string | |
| `AUTH_COGNITO_SECRET` | No | Cognito Secret | Any string | |
| `AUTH_COGNITO_SCOPE` | No | Cognito Scope | Any string | `openid email profile` |
| `AUTH_COGNITO_ADMIN_ROLE_NAMES` | No | Defines the administrator names | Any string. Values must be separated by a comma. | |
| `AUTH_COGNITO_DIAL_ROLES_FIELD` | No | Defines the path of the roles field in JWT token | refer to `DIAL_ROLES_FIELD` for details | |
| `AUTH_OKTA_CLIENT_ID` | No | Okta Client ID | Any string | |
| `AUTH_OKTA_CLIENT_SECRET` | No | Okta Client Secret | Any string | |
| `AUTH_OKTA_ISSUER` | No | Okta domain issuer | Any string | |
| `AUTH_OKTA_SCOPE` | No | Okta Scope | Any string | `openid email profile` |
| `AUTH_OKTA_ADMIN_ROLE_NAMES` | No | Defines the administrator names | Any string. Values must be separated by a comma. | |
| `AUTH_OKTA_DIAL_ROLES_FIELD` | No | Defines the path of the roles field in JWT token | refer to `DIAL_ROLES_FIELD` for details | |
## Setup OpenTelemetry
All standard env variables you could find in the official [opentelemetry documentation](https://opentelemetry.io/docs/specs/otel/configuration/sdk-environment-variables/).
If no value set for the **OTEL_METRICS_EXPORTER** then [OpenTelemetry Prometheus Metric Exporter](https://www.npmjs.com/package/@opentelemetry/exporter-prometheus) will be used. If value set to _"otlp"_ the [OpenTelemetry Collector Metrics Exporter for web and node](https://www.npmjs.com/package/@opentelemetry/exporter-metrics-otlp-http) will be used.
### Using Telemetry locally
Clone `https://github.com/vercel/opentelemetry-collector-dev-setup` locally and run `docker-compose up -d`
### Environment Variables for the Configuration of Opentelemetry
> **Note**: use can find full list of parameters here `https://opentelemetry.io/docs/languages/sdk-configuration/`
| Variable | Required | Description | Available Values | Default values | Example value |
| ----------------------------- | :------: | ---------------------------------------- | ------------------------------ | ----------------------------------------------------- | --------------------- |
| `OTEL_SERVICE_NAME` | No | What name is assigned to service in logs | Any string | name from package.json (@dial/source) or 'dial-admin' | |
| `OTEL_METRICS_EXPORTER` | No | What to use as metrics exporter | "otlp" or empty | empty, it means that Prometheus will be used | |
| `OTEL_EXPORTER_OTLP_ENDPOINT` | No | Collector endpoint address | Any valid url | | http://localhost:4318 |
| `OTEL_EXPORTER_OTLP_PROTOCOL` | No | Which protocol to use | grpc, http/protobuf, http/json | | |