StableNet® UI und Stile

Stablenet UI-Konfiguration

Festlegen der Analytics-Portal-URL

  1. Suchen Sie im Abschnitt Management / Administration / Default Properties von Stablenet nach der Eigenschaft StableNet® Analytics Portal URL

  2. Bearbeiten Sie die Eigenschaft und setzen Sie sie auf eine HTTPS-Adresse des SKOOR-Hosts:

    image-20240308-144939.png

Benutzergruppe konfigurieren

  1. Erstellen Sie eine Benutzergruppe unter Verwaltung / Administration / Benutzer/Kunden

  2. Fügen Sie der Gruppe im Abschnitt Gruppenmitglieder Benutzer hinzu (Benutzer mit identischen Namen dürfen nicht in SKOOR existieren)

SKOOR UI Konfiguration

Benutzergruppe konfigurieren

  1. Wechseln Sie in der SKOOR UI zur Komponente Engine

    image-20240515-113724.png
  2. Navigieren Sie zu /root /Users

  3. Erstellen Sie eine Benutzergruppe in SKOOR

    image-20240515-114336.png
  4. Geben Sie den Namen der Stablenet-Benutzergruppe in das Feld Remote group ein

    image-20240515-114254.png
  5. Legen Sie eine Benutzerrolle fest, die die Berechtigungen für diese Benutzergruppe widerspiegelt.

  6. Wählen Sie eine Startseite. Diese Seite wird nach der Anmeldung bei SKOOR geöffnet.

StableNet®-Symbole

Standard SKOOR-Installation

Erstellen Sie ein neues Favicon-Verzeichnis:

mkdir /srv/eranger/html/favicons_stablenet

Fügen Sie die Icons in das neue Verzeichnis favicons_stablenet ein (fragen Sie den SKOOR-Support nach incons zip archive):

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

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

/opt/eranger/eranger-dashboards/settings.json
{
  "title":"StableNet® Analytics Portal",
  "faviconRoot": "/favicons_stablenet"
}

Docker Compose-Installation

Fügen Sie StableNet-Symbole und SSL-Zertifikate zum Abschnitt eranger-ui services environment der SKOOR docker-compose.yaml hinzu:

  • Das Verzeichnis favicons_stablenet muss erstellt und die Elemente müssen hinzugefügt werden

  • Die Zertifikatspfade müssen in gültige Speicherorte 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"

Hinzufügen der Dashboard-Symbole und des Titels zum Abschnitt eranger-webservice services environment der SKOOR docker-compose.yaml:

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

StableNet® Theme

Navigieren Sie zum Abschnitt Einstellungen, um das Dashboard-Thema zu ändern:

image-20240905-065056.png

Klicken Sie dann auf die Registerkarte Theme:

image-20240905-065237.png

Stellen Sie die UI-Farben des Themas wie folgt ein:

  • Farbton des Hintergrunds (hell): #a9a9a9

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