Benutzeroberfläche

Dieses Kapitel beschreibt den Aufbau der OPSI-WebGUI. Die Oberfläche funktioniert auf Desktop- und Mobilgeräten und unterstützt ein helles und ein dunkles Theme; das Theme lässt sich in den Einstellungen des Schnellzugriffs ändern.

Themes (hell und dunkel)

Das OPSI-WebGUI unterstützt ein helles und ein dunkles Theme. Bei der ersten Nutzung ist das Standard-Theme hell. Danach wird Ihre Auswahl im Browser gespeichert und automatisch wiederhergestellt; Sie können das Theme jederzeit im Schnellzugriff umschalten.

Abbildung 1. OPSI-WebGUI: Dashboard im dunklen Theme

Kopfleiste

Die Kopfleiste enthält von links nach rechts:

Menü-Button: Klappt die Navigationsleiste ein oder aus.
Logo und Version: Das OPSI-WebGUI-Logo mit der Versionsnummer. Ein Klick führt zu Ihrer Standardseite.
Session-Timer: Ein gelber Countdown-Badge, der nur kurz vor Ablauf der Sitzung erscheint. Die verbleibende Zeit ist immer unten im Schnellzugriff sichtbar.
OPSI-Messagebus-Status: Zeigt an, ob die Echtzeitverbindung zum OPSI-Messagebus aktiv ist. Der OPSI-Messagebus wird für Auto-Refresh und das Terminal genutzt (siehe Auto-Refresh).
Health-Check-Badge: Erscheint nur, wenn der Health Check Warnungen oder Fehler meldet; ein Klick öffnet die Diagnose-Seite.
Benutzer & Schnellzugriff: Ihr Benutzername; ein Klick öffnet den Schnellzugriff.

Abbildung 2. OPSI-WebGUI: Kopfleiste mit Session-Timeout-Warnung

Unterhalb der Kopfleiste zeigt eine Breadcrumb-Navigation Ihren aktuellen Standort innerhalb der Anwendung an. Rechts neben der Breadcrumb-Navigation befindet sich eine Seitenbeschreibung, die zusätzlichen Kontext zur aktuellen Seite bereitstellt.

Navigationsleiste

Die Navigationsleiste am linken Fensterrand ermöglicht den Wechsel zwischen den Seiten. Auf Mobilgeräten erscheint sie als Overlay und kann durch Tippen außerhalb geschlossen werden. Auf dem Desktop ist die Navigationsleiste einklappbar und kann über die Umschaltfläche in der oberen linken Ecke ein- und ausgeklappt werden.

Sie enthält die folgenden Bereiche:

Dashboard: Eine Systemübersicht mit Informationen zum Config-Server, Health-Check-Zusammenfassung, Benutzerkonfiguration und Einschränkungen, Systeminfo sowie Client-/Depot-Statistiken.
Admin
- Terminal: Öffnet ein Terminal, um mit einem Channel zu interagieren; in der Voreinstellung steht hier ein Terminal zum OPSI-Configserver bereit.
- Diagnose: Eine kombinierte Ansicht mit Reitern für Health Check, Module und Systeminfo.
- Wartung: Admin-spezifische Aufgaben wie Blockierung/Freigabe von Clients oder Produkten, Wartungsmodus und Backup-Einstellungen.
Server
- Alle Server: Verwaltung der OPSI-Server (Config- und Depotserver)
- Konfiguration: Bearbeitung der Attribute und Parameter eines OPSI-Servers
Clients
- Alle Clients: Verwaltung der OPSI-Clients
- Neu hinzufügen: Erstellung eines neuen OPSI-Clients
- Klonen: Klonen eines bestehenden OPSI-Clients
- Konfiguration: Bearbeitung der Attribute und Parameter eines OPSI-Clients
- Log: Logfiles der Clients anzeigen
Produkte: Produkte bereitstellen, Abhängigkeiten überprüfen oder Eigenschaften bearbeiten
Gruppen: Eine Übersicht zum Bearbeiten der Client- und Produkt-Gruppen
Support: Anzeige der OPSI-Dokumentation, Community-Links und Informationen zum professionellen Support

Der frühere Bereich System heißt jetzt Admin.

Schnellzugriff

Der Schnellzugriff ist eine ein- und ausblendbare rechte Seitenleiste, die schnellen Zugriff auf Auswahlen, Aktionen, Einstellungen und die Kontoverwaltung ermöglicht, ohne die aktuelle Seite zu verlassen. Benutzer können Server, Client-Gruppen und Produkt-Gruppen auswählen, Stapelaktionen ausführen, OPSI-WebGUI-Einstellungen konfigurieren und sich abmelden.

Alle Details zum Schnellzugriff beschreibt das Kapitel Schnellzugriff.

Standalone-Seiten und lokale Selektoren

Einige Seiten können als Standalone-Ansicht geöffnet werden, zum Beispiel Server / Konfiguration und Clients / Konfiguration. Selektoren auf diesen Seiten sind lokal für diese Seite und werden nicht mit der globalen Auswahl synchronisiert.

Für die tägliche Arbeit ist die Unterscheidung von zwei Auswahlbereichen hilfreich:

Globale Auswahl: Auswahlen in den Quick-Panel-Bäumen und Auswahlen über Checkboxen in Tabellen sind global. Sie bestimmen, was seitenübergreifend ausgewählt bleibt.
Lokale Auswahl: Die Dropdown-Selektoren auf Standalone-Seiten sind lokal. Sie legen nur fest, welcher einzelne Client oder Server auf dieser Seite gerade angezeigt wird.

Beispiele:

Auf Clients / Alle Clients erzeugt oder verändert das Markieren von Tabellenzeilen die globale Client-Auswahl.
Auf Schnellzugriff / Clients oder Schnellzugriff / Produkte verändert die Auswahl im Baum ebenfalls die globale Auswahl.
Auf Clients / Konfiguration (Standalone) wechselt der lokale Host-Selektor nur den gerade angezeigten Client. Die globale Auswahl bleibt unverändert.
Auf Server / Konfiguration (Standalone) gilt dasselbe für das Server-Dropdown: nur lokaler Seitenkontext.

Hauptbereich

Der Hauptbereich zeigt die aktuelle Seite, meist eine Tabelle mit Servern, Clients oder Produkten. Jede Tabelle hat eine Kopfzeile mit:

Filter: Filtert die Tabelleninhalte nach ID oder Text.
Tabelleneinstellungen: Öffnet ein Popup mit Anzeigemodus (Infinite Scroll oder Seitennummerierung), Auswahlmodus (Mehrfach- oder Einfachauswahl), Seitengröße, Sortierspalte und -richtung, sichtbaren Spalten sowie einem Zurücksetzen-Button.
Aktualisieren: Lädt die Tabellendaten neu.

Abbildung 3. OPSI-WebGUI: Tabelleneinstellungen

Bei Infinite Scroll werden weitere Zeilen beim Scrollen automatisch nachgeladen; bei Seitennummerierung erscheinen Seitensteuerungen unter der Tabelle. Der Tabellenfilter wird in der Seiten-URL gespeichert (?filter=…) und pro Seite gemerkt, sodass Lesezeichen und geteilte Links dieselbe Ansicht wiederherstellen.

Bei Tabellen mit Einzelauswahl öffnet ein Klick auf eine Zeile das Detailpanel auf der rechten Seite und wählt das Element gleichzeitig aus. Im Detailpanel kann die Konfiguration des Elements angezeigt und bearbeitet werden. Bei Tabellen mit Mehrfachauswahl dient ein Klick auf eine Zeile ausschließlich zur Auswahl des Elements. Um das Detailpanel zu öffnen, verwenden Sie die Aktionsschaltflächen in der fixierten rechten Spalte.

Mobile Ansicht

Auf Mobilgeräten werden Navigation und Detailbereiche als Overlays statt als dauerhafte Split-Ansicht dargestellt. Dadurch bleiben die Arbeitsabläufe auf kleinen Displays gleich und gut bedienbar.

Barrierefreiheit

Das OPSI-WebGUI wird mit WCAG 2.1 Level AA als Zielniveau entwickelt und kontinuierlich in diese Richtung getestet, sodass sie auch von Menschen mit Seh- oder Motorikeinschränkungen genutzt werden kann:

Tastaturbedienung: Alle interaktiven Elemente sind vollständig per Tastatur erreichbar und bedienbar. Mit [Tab]/[Umschalt]+[Tab] bewegen Sie den Fokus, mit [Enter]/[Leertaste] aktivieren Sie Elemente, mit [Esc] schließen Sie Dialoge. Modale Dialoge halten den Fokus, bis sie geschlossen werden.
Tastaturauswahl in Tabellen und Listen: Auswahl-Komponenten unterstützen eine tastaturzentrierte Mehrfachauswahl. Abhängig von Browser und Betriebssystem gehören dazu übliche Muster wie [Strg]+[A] und Bereichsauswahl mit [Umschalt].
Screenreader-Unterstützung: Die Oberfläche verwendet semantisches HTML mit Überschriftenstruktur, Landmark-Regionen und ARIA-Beschriftungen für Icon-Buttons und Bedienelemente. Status- und Fehlermeldungen werden über Live-Regionen angekündigt, sodass Screenreader-Nutzer über das Ergebnis ihrer Aktionen informiert werden.
Farbkontrast: Alle Text- und Oberflächenfarben erfüllen die WCAG-AA-Kontrastanforderungen — sowohl im hellen als auch im dunklen Theme.
Farbfehlsichtigkeit: Statusinformationen beruhen nie allein auf Farbe. Erfolgs-, Warn- und Fehlerzustände werden immer mit eindeutigen Symbolen und Texten kombiniert und bleiben so auch bei Farbfehlsichtigkeit unterscheidbar.
Tooltips und Hilfetexte: Icon-Buttons und Statusindikatoren zeigen erklärende Tooltips — sowohl beim Überfahren mit der Maus als auch beim Tastaturfokus. Wo das Verhalten überraschend sein könnte (z. B. Regeln für Gruppenmitgliedschaften), erklären Inline-Hilfetexte die Details.
Skalierbarkeit: Das Layout ist responsiv und funktioniert mit Browser-Zoom und größeren Schriftgraden.

Die Barrierefreiheit wird kontinuierlich überprüft: Automatisierte Audits (einschließlich tastatur- und screenreaderrelevanter Strukturprüfungen) sowie Kontrastprüfungen laufen in der Test-Pipeline der OPSI-WebGUI. Sollten Sie dennoch auf ein Barrierefreiheitsproblem stoßen, melden Sie es bitte — solche Probleme werden wie Fehler behandelt.