StableNet® UI und Stile

Konfiguration der Stablenet-Benutzeroberfläche

URL des Analytics-Portals festlegen

Suchen Sie im Bereich „Management / Administration / Standard-Eigenschaften“ von Stablenet nach der Eigenschaft „StableNet® Analytics-Portal-URL“
Bearbeiten Sie die Eigenschaft und legen Sie als Wert die HTTPS-Adresse eines SKOOR-Hosts fest:

Benutzergruppe konfigurieren

Erstellen Sie eine Benutzergruppe unter „Management / Administration / Benutzer/Kunden“
Fügen Sie der Gruppe im Abschnitt „Gruppenmitglieder“ Benutzer hinzu (Benutzer mit identischen Namen dürfen in SKOOR nicht vorhanden sein)

CORS (Cross-Origin Resource Sharing)

Damit die StableNet-Benutzeroberfläche Anfragen an SKOOR Auth und den SKOOR Webservice stellen kann, muss die StableNet-URL als zulässige Herkunft hinzugefügt werden.

Angenommen, der Zugriff auf die StableNet-Benutzeroberfläche erfolgt über https://stablenet.domain.com:5443, ist im SKOOR-System folgende Konfiguration erforderlich:

/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

Da SKOOR über einen IFRAME integriert ist, muss die StableNet-Quelle als zulässiger Frame-Vorfahr festgelegt werden.

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

HTTPD, SKOOR Auth und der SKOOR Webservice müssen neu gestartet werden, damit diese Änderung wirksam wird

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

Konfiguration der SKOOR-Benutzeroberfläche

Benutzergruppe konfigurieren

Wechseln Sie in der SKOOR-Benutzeroberfläche zur Komponente „Engine“
Navigieren Sie zu /root/Users
Erstellen Sie eine Benutzergruppe in SKOOR
Geben Sie den Namen der Stablenet-Benutzergruppe in das Feld „Remote-Gruppe“ ein
Legen Sie eine Benutzerrolle fest, die die Berechtigungen für diese Benutzergruppe widerspiegelt
Wählen Sie eine Startseite aus. Diese Seite wird nach der Anmeldung bei SKOOR geöffnet

StableNet®-Symbole

Standardmäßige SKOOR-Installation

Neues Favicon-Verzeichnis erstellen:

mkdir /srv/eranger/html/favicons_stablenet

Fügen Sie Symbole zum neuen Verzeichnis „favicons_stablenet“ hinzu (fragen Sie den SKOOR-Support nach dem ZIP-Archiv mit den Symbolen):

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

Um die SKOOR Dashboards für die Verwendung der neuen Symbole zu konfigurieren, fügen Sie die Parameter „title“ und „faviconRoot“ in der Datei „settings.json“ hinzu oder ändern Sie diese:

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

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

Docker-Compose-Installation

Fügen Sie StableNet-Icons und SSL-Zertifikate zum Abschnitt „environment“ des „eranger-ui“-Dienstes in der Datei „SKOOR docker-compose.yaml“ hinzu:

Das Verzeichnis „favicons_stablenet“ muss erstellt und mit Elementen gefüllt werden
Die Zertifikatspfade müssen auf gültige Pfade des Hostsystems geändert werden

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

Fügen Sie Dashboard-Symbole und einen Titel im Abschnitt „services environment“ von „eranger-webservice“ in der Datei „SKOOR docker-compose.yaml“ hinzu:

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

StableNet®-Design

Navigieren Sie zum Abschnitt „Einstellungen“, um das Dashboard-Theme zu ändern:

Klicken Sie anschließend auf die Registerkarte „Design“:

Legen Sie die UI-Farben des Themes wie folgt fest:

Hintergrundfarbe (hell): #a9a9a9
Akzentfarbe 1 (hell und dunkel): #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;
}