L'interface utilisateur et les styles de StableNet

Configuration de l'interface utilisateur de Stablenet

Définir l'URL du portail d'analyse

  1. Dans la section Gestion / Administration / Propriétés par défaut de Stablenet, recherchez la propriété StableNet® Analytics Portal URL.

  2. Modifiez la propriété et définissez-la sur une adresse HTTPS des hôtes SKOOR :

    image-20240308-144939.png

Configurer le groupe d'utilisateurs

  1. Créez un groupe d'utilisateurs dans Gestion / Administration / Utilisateurs / Clients

  2. Ajouter des utilisateurs au groupe dans la section Membres du groupe (les utilisateurs avec des noms identiques ne doivent pas exister dans SKOOR)

Configuration de l'interface utilisateur de SKOOR

Configurer le groupe d'utilisateurs

  1. Dans l'interface utilisateur de SKOOR, passez au composant Engine

    image-20240515-113724.png
  2. Naviguez vers /root /Users

  3. Créer un groupe d'utilisateurs dans SKOOR

    image-20240515-114336.png
  4. Entrez le nom du groupe d'utilisateurs Stablenet dans le champ Groupe distant

    image-20240515-114254.png
  5. Définissez un rôle d'utilisateur pour refléter les permissions de ce groupe d'utilisateurs.

  6. Choisissez une page de démarrage. Cette page s'ouvre après la connexion à SKOOR

Icônes StableNet

Installation standard de SKOOR

Créez un nouveau répertoire favicons :

mkdir /srv/eranger/html/favicons_stablenet

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

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

Pour configurer les SKOOR Dashboards afin d'utiliser 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 de Docker Compose

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

  • 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 en 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"

Ajouter les icônes et le titre du tableau de bord à la section environnement des services eranger-webservice du fichier SKOOR docker-compose.yaml :

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

Thème StableNet

Naviguez vers la section Settings pour changer le thème du tableau de bord :

image-20240905-065056.png

Cliquez ensuite sur l'onglet Theme :

image-20240905-065237.png

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

  • Teinte de l'arrière-plan (clair) : #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;
}