Admin Console

Dashboard

In the main dashboard, it is possible to view all tenants available.

To select one, click on the name and access the tenat overview page.

Tenant Overview

On the page related to the tenant, it is possible to view all the information necessary to interact with the data contained within it, such as the link to the User Panel (Portal URL), the links to the Clea Astarte and Clea Edgehog instances and some useful links to the Clea products documentations.

General Info

This card contains the general info of the tenant, such as:

• Name: the name of the tenant.
• Slug: reference name.
• Portal URL: the link to access the Portal User Panel dedicated to this tenant
• Astarte Realm: the Clea Astarte Realm name.
• Astarte Cluster: the Clea Astarte name of the cluster where the realm of this tenant resides.
• Location: the cloud provider and zone of the cluster.

Tenant Setup

Within the Tenant Setup section is possible to set some general parameters and configuration of the Tenant.

Design System

The Platform supports the customization of the graphical design. The customization happens via the Admin Console and consists of the following:

• Theme: defines the colours, fonts, spacing and visual style of the portal. It is possible to choose a standard theme or load a custom CSS to define the right theme.
• Logo: this image file will be displayed on the authentication pages and in the portal menu.
• Favicon: the favicon displayed on the tenant and user panel pages.

You can customize these settings for each tenant.

Custom CSS Theme specs

A custom theme is a CSS file that follows CSS syntax and has the .css extension.

The file is expected to define the same classes and CSS properties of Bootstrap 5.1, plus the following additional ones:

• The --online, --offline, --fault CSS properties define the colors shown on the related device status.
• The color-online, color-offline, color-fault classes, that should apply those colors, such as .color-online { color: var(--online) }.

You can compile the CSS file from a customized SASS version of the default Bootstrap sources. Here you can find a path to prepare a build pipeline documented https://getbootstrap.com/docs/5.0/getting-started/build-tools/

note

Please note that the style customization is in active development, and breaking changes is possible.

Custom CSS Theme examples

A sample theme could be the compiled CSS file of the following SASS:

// Default values for Boostrap init
$theme-colors: (
  "primary": #0631cc,
  "accent": #11b0ef,
);

$black: #000;

$box-shadow: 0 0.2rem 0.4rem rgba($black, 0.15);
$box-shadow-lg: 0 0.2rem 0.2rem rgba($black, 0.5);

@import "~bootstrap/scss/bootstrap.scss";

:root {
  --online: var(--success);
  --offline: var(--gray);
  --fault: var(--danger);
}

.color-online {
  color: var(--online);
}

.color-offline {
  color: var(--offline);
}

.color-fault {
  color: var(--fault);
}

Applications

Clea Portal Apps are external web apps developed who want to customize their Clea experience.

From this section, you can create and manage third-party Clea Portal Apps customized by you to better fit your needs. The Clea Portal platform supports loading external web apps that can be developed by third-party actors. A Clea Portal App consists of an external web application encapsulated within Clea Portal as a shadow DOM.

From the Create Application section it is possible to create a new applications or modify the existing ones.

The information needed to load a Clea Portal App within the Clea Portal UI are the following:

• Display Name: is the name visualized in the Tab inside the Appliance page.
• Slug: is the name you choose to give to the application.
• Source URL: is the URL where the JS Bundle of the application is deployed and accessible for download. It must be an externally accessible address so that Clea Portal can dynamically load the application when the appliance page is accessed.
• Scope: The scope of the Clea Portal App can be:
  • Appliance: the application will load and be visible within the single Appliance page, so it is intended to use data from a single Appliance at a time.
  • Global: the application can use data from more than one Appliance and will be displayed globally in the User Panel.
• Required Astarte interfaces: You need to set up the list of Astarte interfaces defined for this application. Each interface is determined by its name, major and minor versions. This application is loaded into every Appliance page that declares and uses these Astarte interfaces.