User Interface

This chapter describes the layout of the OPSI-WebGUI. The interface works on desktop and mobile devices and supports a light and a dark theme; the theme can be changed in the Quick Panel.

Themes (Light and Dark)

The OPSI-WebGUI supports both light and dark themes. For first-time use, the default theme is light. After that, your selected theme is stored in the browser and restored automatically; you can switch it at any time from the Quick Panel.

OPSI-WebGUI: Dashboard in dark theme
Figure 1. OPSI-WebGUI: Dashboard in dark theme

Top Bar

The top bar contains, from left to right:

  • Menu button: Collapses or expands the navigation bar.

  • Logo and version: The OPSI-WebGUI logo with the version number. Clicking it takes you to your default page.

  • Session Timer: A yellow countdown badge that only appears shortly before your session expires. The remaining time is always visible in the Quick Panel footer.

  • OPSI-Messagebus Status: Shows whether the real-time OPSI-Messagebus connection is active. The OPSI-Messagebus is used for auto refresh and the terminal (see Auto Refresh).

  • Health Check Badge: Only appears if the health check reports warnings or errors; clicking it opens the diagnostics page.

  • User & Quick Panel: Your username; clicking it opens the Quick Panel.

OPSI-WebGUI: Top bar session timeout warning
Figure 2. OPSI-WebGUI: Top bar session timeout warning

Below the top bar, a breadcrumb shows your current location within the application. To the right of the breadcrumb, a page description provides additional context about the current page.

Navigation Bar

The navigation bar on the left-hand side allows for easy movement between the pages. On mobile devices it appears as an overlay and can be dismissed by tapping outside of it. On desktop, the navigation bar is collapsible and expandable using the toggle button located in the top-left corner.

It contains the following sections:

  • Dashboard: A system overview showing config server information, health check summary, user configuration and restrictions, system info, and client/depot statistics.

  • Admin

    • Terminal: Opens a terminal to interact with a channel; by default, a terminal to the OPSI config server is available here.

    • Diagnostics: A combined view with tabs for Health Check, Modules, and System Info.

    • Maintenance: Admin-specific tasks such as blocking/unblocking clients or products, maintenance mode, and backup settings.

  • Servers

    • All servers: Management of the OPSI servers (config and depot servers)

    • Configuration: Editing the attributes and parameters of an OPSI server

  • Clients

    • All clients: Management of the OPSI clients

    • Add New: Creation of a new OPSI client

    • Clone: Cloning an existing OPSI client

    • Configuration: Editing the attributes and parameters of an OPSI client

    • Logs: Displaying logfiles of the clients

  • Products: Provide products, check dependencies, or edit properties

  • Groups: An overview for editing client and product groups

  • Support: Displaying the OPSI documentation, community links, and professional support information

The former System area is now named Admin.

Quick Panel

The Quick Panel is a toggleable right sidebar that provides quick access to selections, actions, settings, and account management without leaving the current page. Users can select servers, client groups, and product groups, perform batch operations, configure OPSI-WebGUI preferences, and log out.

For detailed information about using the Quick Panel and all its features, see Quick Panel.

Standalone Pages and Local Selectors

Some pages can be opened as standalone views, for example Servers / Configuration and Clients / Configuration. Selectors on these pages are local to that page and are not synced to the global selection.

In daily use, it helps to distinguish two selection scopes:

  • Global selection: selections made in the Quick Panel trees and selections made through table checkboxes are global. They define what stays selected across pages and panels.

  • Local selection: the dropdown selectors on standalone pages are local. They only decide which single client or server is currently displayed on that page.

Examples:

  • On Clients / All clients, checking rows in the table creates or updates the global client selection.

  • On Quick Panel / Clients or Quick Panel / Products, selecting entries in the tree also changes the global selection.

  • On Clients / Configuration (standalone), changing the host selector only switches the currently shown client. It does not replace the global selection.

  • On Servers / Configuration (standalone), the server dropdown behaves the same way: local page context only.

Main Area

The main area shows the current page, usually a table of servers, clients, or products. Each table has a header with:

  • Filter: Filters the table contents by ID or text.

  • Table settings: Opens a popup with display mode (infinite scroll or pagination), selection mode (multi or single), page size, sort column and direction, visible columns, and a reset button.

  • Refresh: Reloads the table data.

OPSI-WebGUI: Table settings
Figure 3. OPSI-WebGUI: Table settings

With infinite scroll, further rows load automatically as you scroll down; with pagination, page controls appear below the table. The table filter is stored in the page URL (?filter=…​) and remembered per page, so bookmarks and shared links restore the same view.

For single-select tables, clicking a row selects the item and opens its detail panel on the right, where the item configuration can be viewed and edited. For multi-select tables, clicking a row only selects the item. To open the detail panel, use the action buttons in the fixed right-side column.

Mobile View

On mobile devices, navigation and detail areas are shown as overlays instead of a permanent split layout. This keeps actions usable on smaller screens while preserving the same workflows.

Accessibility

The OPSI-WebGUI is developed with WCAG 2.1 Level AA as the target accessibility level and is tested continuously in that direction, so that it can also be used by people with visual or motor impairments:

  • Keyboard navigation: All interactive elements are reachable and operable with the keyboard alone. Use [Tab]/[Shift]+[Tab] to move focus, [Enter]/[Space] to activate, and [Esc] to close dialogs. Modal dialogs keep the focus inside until they are closed.

  • Keyboard selection in tables and lists: Selection components support keyboard-first multi-selection behavior. Depending on browser and OS, this includes common patterns such as [Ctrl]+[A] and range selection with [Shift].

  • Screen reader support: The interface uses semantic HTML with heading structure, landmark regions, and ARIA labels for icon-only buttons and controls. Status and error messages are announced through live regions, so screen reader users are informed about the result of their actions.

  • Color contrast: All text and interface colors meet the WCAG AA contrast requirements in both the light and the dark theme.

  • Color-blind friendly: Status information never relies on color alone. Success, warning, and error states are always combined with distinct icons and text, so they remain distinguishable for users with color vision deficiencies.

  • Tooltips and help texts: Icon buttons and status indicators show explanatory tooltips on hover and on keyboard focus. Where behavior may be surprising (for example group membership rules), inline help messages explain the details.

  • Scalability: The layout is responsive and works with browser zoom and larger font sizes.

Accessibility is verified continuously with automated audits (including keyboard/screen-reader relevant structure checks) and contrast checks in the OPSI-WebGUI test pipeline. If you encounter an accessibility problem, please report it; accessibility issues are treated as bugs.