CZERTAINLY Administrator User Interface

This repository is part of the commercial open-source project CZERTAINLY. You can find more information about the project at CZERTAINLY repository, including the contribution guide.

Administrator User Interface or commonly called as Admin UI consists of the administrative web interface where various administrative tasks can be performed on top of the platform by the administrators.

Details of objects

The links and pages are constructed in a way to make the navigation between the pages easier. To view the details of any object the user can simply click on the name to be redirected to the detailed view.

Icons and tooltips

For the ease of understanding and usage, the icons are added with tooltip to understand the actions it provides when needed.

Operations

Bulk operations can be performed on most of the objects from their list page. To perform any operation on a single object (for example - a connector), the user can do it either from the list page or the details page.

For more information, please refer to the CZERTAINLY documentation.

Generating API Types

This section provides a guide on how to generate typeScript tlasses for DTOs and APIs from the OpenAPI specification, including some required customizations

Step 1: Generate TypeScript Data Transfer Objects (DTOs)

To generate TypeScript Data Transfer Objects (DTOs) from the OpenAPI specification, use the following command. This command will generate the types and format the generated files using Prettier.

npm run generate-types

Step 2: Fix Type Errors in Generated Code

Sometimes, you may encounter type errors in the generated code, such as:

Type 'PaginationRequestDto' is not assignable to type 'string | number | boolean | (string | number | boolean)[]'.ts(2322)
(property) 'paginationRequestDto': PaginationRequestDto

Original generated code:

const query: HttpQuery = { // required parameters are used directly since they are already checked by throwIfNullOrUndefined
    'paginationRequestDto': paginationRequestDto,
};

Updated code to fix the type error:

const query: HttpQuery = {};`
if (paginationRequestDto != null) {
    Object.assign(query, paginationRequestDto);
}

This change ensures that paginationRequestDto is only assigned to query if it is not null or undefined, avoiding the type error.

Step 3: Manually Add BaseAttributeContentDto to DataAttribute Interface

Currently, when OpenAPI model types are generated, the BaseAttributeContentDto gets removed from the DataAttribute interface. This issue arises due to internal library problem generating hierarchical (inheritance) types.

Update interface DataAttribute as following

interface DataAttribute {
    # Add the following property to DataAttribute interface
    /**
     * Content of the Attribute
     * @type {Array<BaseAttributeContentDto>}
     * @memberof DataAttribute
     */
    content?: Array<BaseAttributeContentDto>;
}

Make sure to manually add the content property back to the DataAttribute interface after generating the types.

Do not forget to import BaseAttributeContentDto

import type {
    AttributeCallback,
    AttributeContentType,
    AttributeType,
    BaseAttributeConstraint, # Add this import
    DataAttributeProperties,
} from './';

Docker container

Admin Web Interface is provided as a Docker container. Use the docker pull 3keycompany/czertainly-frontend-administrator:tagname to pull the required image from the repository. It can be configured using the following environment variables:

Variable	Description	Required	Default value
BASE_URL	URL Path of the frontend application		/administrator
API_URL	URL Path of the CZERTAINLY API for the web application		/api
LOGIN_URL	URL Path of the login page		/login
LOGOUT_URL	URL Path of the logout page		/logout