L'interface utilisateur et les styles de StableNet

Configuration de l'interface utilisateur 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 Analytics StableNet®.
Modifiez la propriété et définissez-la sur une adresse HTTPS d'hôte SKOOR :

Configurer le 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 (les utilisateurs portant des noms identiques ne doivent pas exister dans SKOOR)

CORS (partage de ressources entre origines)

Afin de permettre à l'interface utilisateur StableNet d'envoyer des requêtes à SKOOR Auth et SKOOR Webservice, l'URL StableNet doit être ajoutée comme 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é à l'aide d'un IFRAME, l'origine StableNet doit être définie comme ancêtre de cadre autorisé.

/etc/opt/erangerer/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>

HTTPD, SKOOR Auth et SKOOR Webservice doivent être redémarrés pour que cette configuration soit active.

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

Configuration de l'interface utilisateur SKOOR

Configurer le groupe d'utilisateurs

Dans l'interface utilisateur SKOOR, passez au composant Engine
Accédez à /root /Users
Créer un groupe d'utilisateurs dans SKOOR
Saisissez le nom du groupe d'utilisateurs Stablenet dans le champ Groupe distant
Définissez un rôle utilisateur pour refléter les 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 favicon :

mkdir /srv/eranger/html/favicons_stablenet

Ajoutez des icônes au 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 Docker Compose

Ajoutez les icônes StableNet et les certificats SSL à la section environnement des services eranger-ui du fichier SKOOR docker-compose.yaml :

Le répertoire favicons_stablenet doit être créé et les éléments doivent être ajoutés
Les chemins d'accès aux certificats doivent être modifiés pour correspondre à des emplacements valides du 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 eranger-webservice services environment du fichier SKOOR docker-compose.yaml :

      - 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;
}