AI DIAL Admin Frontend

Overview

This project is a web application built using Next.js, 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 for administrators to learn about features of DIAL Admin.

Set Up Developer Environment

This project is managed by NX.

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.

Once you have Node.js and npm installed, follow these steps to set up your developer environment:

1. Clone the AI DIAL Admin repository:

   git clone https://github.com/epam/ai-dial-admin-frontend.git

2. Install project dependencies:

   npm install

3. 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.

   DIAL_ADMIN_API_URL="ADD_VALUE_HERE"
   NEXTAUTH_SECRET="ADD_VALUE_HERE"

4. To start the development server, run:

   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:

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:

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:

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. Refer to AI DIAL Admin Backend.	Any string
THEMES_CONFIG_URL	No	The host URL for a custom themes configuration. Can lead to public and private resource.	Any string
THEMES_CONFIG_IMAGES	No	List of images file names available in theme, comma separated.	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	Any string
APP_NAME	No	Application name	Any string	AI Dial Admin
DIAL_LINK	No	Link to DIAL application	Any string
DIAL_LINK_BUTTON_NAME	No	The name of the Open Dial 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
EMBEDDED_APPS	No	Defines integrated plugins	JSON

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. Required for production deployments.	NextAuth URL	Any string
NEXTAUTH_SECRET	Yes	NextAuth Secret (generate by openssl rand -base64 32 for example)	Any string
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. If no value set for the OTEL_METRICS_EXPORTER then OpenTelemetry Prometheus Metric Exporter will be used. If value set to "otlp" the OpenTelemetry Collector Metrics Exporter for web and node 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