L'interface utilisateur et les styles de StableNet

Configuration de l'interface utilisateur de Stablenet

Définir l'URL du portail Analytics

Dans la section Gestion / Administration / Propriétés par défaut de Stablenet, recherchez la propriété « URL du portail d'analyse StableNet® ».
Modifiez cette propriété et définissez-la sur l'adresse HTTPS d'un hôte SKOOR :

Configurer un groupe d'utilisateurs

Créez un groupe d'utilisateurs dans Gestion / Administration / Utilisateurs/Clients
Ajoutez des utilisateurs au groupe dans la section « Membres du groupe » (il ne doit pas exister d’utilisateurs portant le même nom dans SKOOR)

CORS (Cross-Origin Resource Sharing)

Afin de permettre à l'interface utilisateur de StableNet d'envoyer des requêtes à SKOOR Auth et au SKOOR Webservice, l'URL de StableNet doit être ajoutée en tant qu'origine autorisée.

En supposant que l'interface utilisateur StableNet soit accessible via https://stablenet.domain.com:5443, la configuration suivante est nécessaire sur le système SKOOR :

/etc/opt/eranger/eranger-webservice.cfg

cors.allowed.origins=https://stablenet.domain.com:5443

/etc/opt/erangerer/anger-auth.conf

[cors]
allowed_origins = https://stablenet.domain.com:5443

Comme SKOOR est intégré via une balise IFRAME, l’origine StableNet doit être définie comme ancêtre de cadre autorisé.

/etc/httpd/conf.d/eranger-stablenet.conf

<Location "/skoor-dashboard/">
  Header always set Content-Security-Policy "default-src 'self'; base-uri 'self'; object-src 'self'; frame-ancestors 'self' https://stablenet.domain.com:5443; form-action 'self' http://localhost:8181; script-src 'self' maps.googleapis.com maps.gstatic.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: maps.googleapis.com maps.gstatic.com; font-src 'self' data: fonts.gstatic.com; connect-src 'self' maps.googleapis.com; worker-src 'self' blob:; upgrade-insecure-requests" "expr=%{resp:Content-Type} =~ m#(?:text/html|application/xhtml\+xml|image/svg\+xml)#i"
</Location>

Il est nécessaire de redémarrer HTTPD, SKOOR Auth et le SKOOR Webservice pour que cette configuration prenne effet

systemctl restart httpd && systemctl restart eranger-auth && systemctl restart eranger-webservice

Configuration de l’interface utilisateur SKOOR

Configuration du groupe d’utilisateurs

Dans l’interface utilisateur SKOOR, accédez au composant Engine
Accédez à /root/Users
Créez un groupe d'utilisateurs dans SKOOR
Saisissez le nom du groupe d'utilisateurs Stablenet dans le champ « Remote group »
Définissez un rôle d’utilisateur correspondant aux autorisations de ce groupe d’utilisateurs
Choisissez une page d'accueil. Cette page s'ouvre après la connexion à SKOOR

Icônes StableNet®

Installation standard de SKOOR

Créer un nouveau répertoire de favicons :

mkdir /srv/eranger/html/favicons_stablenet

Ajoutez les icônes dans le nouveau répertoire favicons_stablenet (demandez l'archive ZIP des icônes au support SKOOR) :

unzip stablenet_favicons.zip -d /srv/eranger/html/favicons_stablenet/

Pour configurer les SKOOR Dashboards afin qu'ils utilisent les nouvelles icônes, ajoutez ou modifiez les paramètres title et faviconRoot dans le fichier settings.json :

/opt/eranger/eranger-dashboards/settings.json

{
  "title":"StableNet® Analytics Portal",
  "faviconRoot": "/favicons_stablenet"
}

Installation via Docker Compose

Ajoutez les icônes StableNet et les certificats SSL à la section « environment » du service eranger-ui dans le fichier docker-compose.yaml de SKOOR :

Le répertoire « favicons_stablenet » doit être créé et les éléments doivent y être ajoutés
Les chemins d’accès aux certificats doivent être remplacés par des emplacements valides sur le système hôte

      - "${PERSISTENT_FS}/engine/favicons_stablenet:/srv/eranger/html/favicons_stablenet"
      - "${PERSISTENT_FS}/ssl/fullchain.pem:/etc/pki/tls/certs/localhost.crt"
      - "${PERSISTENT_FS}/ssl/privkey.pem:/etc/pki/tls/private/localhost.key"

Ajoutez les icônes et le titre du tableau de bord à la section « environment » du service eranger-webservice dans le fichier docker-compose.yaml de SKOOR Webservice :

      - SKOOR_DASHBOARD_title=StableNet® Analytics Portal
      - SKOOR_DASHBOARD_faviconRoot=/favicons_stablenet
      - SKOOR_DASHBOARD_etlService=true

Thème StableNet®

Accédez à la section « Paramètres » pour modifier le thème du tableau de bord :

Cliquez ensuite sur l'onglet « Thème » :

Définissez les couleurs de l’interface utilisateur du thème comme suit :

Teinte d'arrière-plan (claire) : #a9a9a9
Accent 1 (clair et foncé) : #54e0cc

CSS

div.layout-footer {
  display: none;
}

body.plain.stablenet.dark {
  background-color: #2a2a2a;
}

body.plain.stablenet .layout-titlebar {
  display: flex !important;
  height: 48px;
  padding-left: 20px !important;
}

body.plain.stablenet .layout-titlebar-actions {
  display: none;
}

body.plain.stablenet .layout-titlebar .dashboard-title {
  padding-left: 0 !important;
}

body.plain.stablenet .layout-titlebar .dashboard-title h1 {
  font-size: 1.2em;
  color: rgb(0, 40, 70);
  font-weight: 600;
}

body.plain.stablenet.dark .layout-titlebar .dashboard-title h1 {
  color: var(--color-text);
}

body.plain.stablenet .layout-titlebar .date-picker-value {
  font-size: 1.2em;
}

body.plain.stablenet .layout-titlebar .date-picker-value h1 {
  min-width: 200px; 
}

body.plain.stablenet .layout-content-sidebar-backdrop {
  display: none;   
}

@media (max-width: 992px)
html:not(.print) body.plain.stablenet .sidebar-visible .layout-content-sidebar-backdrop {
    display: none; 
}

body.stablenet .widget.date_picker svg {
  fill: #115797;
}

body.stablenet.dark .widget.date_picker svg {
  fill: #00cccc;
}