UI e stili di StableNet®

Configurazione dell'interfaccia utente di Stablenet

Impostazione dell'URL del portale di analisi

Nella sezione Gestione / Amministrazione / Proprietà predefinite di Stablenet, individuare la proprietà "URL del portale di analisi StableNet®"
Modifica la proprietà e impostala sull'indirizzo HTTPS di uno degli host SKOOR:

Configurazione del gruppo di utenti

Creare un gruppo di utenti in Gestione / Amministrazione / Utenti/Clienti
Aggiungere gli utenti al gruppo nella sezione "Membri del gruppo" (non devono esistere utenti con nomi identici in SKOOR)

CORS (Cross-Origin Resource Sharing)

Per consentire all'interfaccia utente di StableNet di inviare richieste a SKOOR Auth e al SKOOR Webservice, l'URL di StableNet deve essere aggiunto come origine consentita.

Supponendo che si acceda all’interfaccia utente di StableNet tramite https://stablenet.domain.com:5443, è necessaria la seguente configurazione sul sistema 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

Poiché SKOOR è integrato tramite un IFRAME, l’origine di StableNet deve essere impostata come frame ancestrale consentito.

/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>

È necessario riavviare HTTPD, SKOOR Auth e SKOOR Webservice per rendere attiva questa configurazione

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

Configurazione dell’interfaccia utente di SKOOR

Configurazione del gruppo utenti

Nell’interfaccia utente di SKOOR, passare al componente Engine
Accedere a /root/Users
Creare un gruppo di utenti in SKOOR
Inserire il nome del gruppo di utenti Stablenet nel campo "Gruppo remoto"
Impostare un ruolo utente che rifletta le autorizzazioni per questo gruppo di utenti
Scegli una pagina iniziale. Questa pagina si aprirà dopo aver effettuato l’accesso a SKOOR

Icone di StableNet®

Installazione standard di SKOOR

Creare una nuova directory per le favicon:

mkdir /srv/eranger/html/favicons_stablenet

Aggiungi le icone alla nuova directory favicons_stablenet (richiedi l'archivio zip delle icone all'assistenza SKOOR):

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

Per configurare le SKOOR Dashboard in modo che utilizzino le nuove icone, aggiungi o modifica i parametri title e faviconRoot nel file settings.json:

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

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

Installazione con Docker Compose

Aggiungere le icone StableNet e i certificati SSL alla sezione "environment" dei servizi eranger-ui nel file docker-compose.yaml di SKOOR:

È necessario creare la directory favicons_stablenet e aggiungere gli elementi
I percorsi dei certificati devono essere modificati in modo da indicare posizioni valide sul sistema host

      - "${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"

Aggiungere le icone della dashboard e il titolo alla sezione "services environment" di eranger-webservice nel file docker-compose.yaml di SKOOR Webservice:

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

Tema StableNet®

Accedere alla sezione Impostazioni per modificare il tema della dashboard:

Quindi fare clic sulla scheda Tema:

Impostare i colori dell’interfaccia utente del tema come segue:

Tinta di sfondo (chiara): #a9a9a9
Accento 1 (chiaro e scuro): #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;
}