Overview of Dynamix webGui
masterThe Dynamix webGui is the Unraid OS System Management Utility. It is built upon Simple Features and provides the following capabilities:
- Real-time screen updates
- Tabbed viewing
- Various system management enhancements
repository·master·Indexed 42 days ago
https://github.com/unraid/webguiSource code and documentation for the Unraid web interface, including the Dynamix System Management Utility. Covers the theme system architecture using CSS variables, repository structure, local development environment setup, and system administration guides for array device assignment, pool configuration, encryption, and SMB share security.
The Dynamix webGui is the Unraid OS System Management Utility. It is built upon Simple Features and provides the following capabilities:
The Split level determines if a directory can expand across multiple disks:
The Allocation method determines how Unraid chooses a disk when creating new files/directories within a share:
If set to Yes, share directories under /mnt/user act as symlinks to the share directory on a storage volume. This bypasses the FUSE layer, which can significantly increase I/O performance.
Conditions for Exclusive Shares:
Anti-Pattern Alert: Do not create separate CSS files for different themes (e.g., Eth0-azure.css and Eth0-black.css). This causes code duplication and maintenance issues.
Recommended Pattern: Use a single component file that defines variables in :root and uses theme classes (.Theme--{name}) to override those variables or specific properties via nesting.
sheets/ directory./* ✅ Do this instead - single file with theme variables and nesting */
/* Eth0.css */
:root {
/* file specific variables */
--eth0-narrow-input-width: 188px;
--eth0-narrow-input-padding: 5px 6px;
--eth0-narrow-input-border-color: var(--border-color);
--eth0-narrow-input-text-color: var(--text-color);
}
/* theme file specific variables */
.Theme--black,
.Theme--white {
--eth0-narrow-input-width: 166px;
--eth0-narrow-input-padding: 4px 0;
}
.Theme--black {
--eth0-narrow-input-border-color: var(--gray-100);
--eth0-narrow-input-text-color: var(--gray-100);
}
.Theme--white {
--eth0-narrow-input-border-color: var(--gray-900);
--eth0-narrow-input-text-color: var(--gray-900);
}
input[type="text"].narrow {
width: var(--eth0-narrow-input-width);
padding: var(--eth0-narrow-input-padding);
border: var(--eth0-narrow-input-border-color);
color: var(--eth0-narrow-input-text-color);
}
/* Use nesting to override specific properties for groups of themes */
.Theme--black,
.Theme--white {
input[type="text"].narrow {
border: none;
border-bottom: 1px solid var(--eth0-narrow-input-border-color);
}
}Unraid uses colored status indicators to represent the state of devices in the Array or Pools. Use these to quickly identify device health and availability:
Array Devices:
green-orb: Normal operation, device is active.grey-orb: Device is in standby mode (spun-down).yellow-orb: Device contents emulated.red-orb: Device is disabled, contents emulated.blue-orb: New device.grey-orb (square): No device present, position is empty.Pool Devices:
green-orb: Normal operation, device is active.grey-orb: Device is in standby mode (spun-down).blue-orb: New device.grey-orb (square): No device present, position is empty.Array Status (Overall):
green-orb: Array is Started and Parity is valid.grey-orb: Array is Stopped, Parity is valid.yellow-orb: Array is Started, but Parity is invalid.The Dynamix theme system uses a layered approach with CSS variables (custom properties) to provide consistent styling across the Unraid webGUI. The system is composed of four core layers:
default-color-palette.css): Defines fundamental color scales (e.g., --gray-100 to --gray-900) and opacity variants. This layer should be used as a source but not overridden.default-base.css): Provides foundational layout, typography, form elements, and responsive patterns. It also includes theme-specific modifiers like .Theme--sidebar.themes/*.css): Located in emhttp/plugins/dynamix/styles/themes/, these files (e.g., azure, black, gray, white) define specific color schemes by mapping theme-specific variables to the base color palette.sheets/*.css): Located in emhttp/plugins/dynamix/styles/sheets/, these files define styles for specific features or utilities using the variables established in the previous layers.Unraid uses two types of Docker templates:
The Unraid webgui repository contains several key directories that are extracted to the /usr/local/ directory on an Unraid server during the build process. When working with the codebase, keep in mind that the following directories map to that location:
emhttpetcsbinsrcUnraid allows assigning hardware directly to Virtual Machines via IOMMU groups and driver binding.
vfio-pci driver.vfio-pci.lsusb output.lsscsi output (includes ATA, SATA, and SAS).The Use SSL/TLS setting determines how the webGUI responds to HTTP and HTTPS requests.
| Setting | Behavior |
|---|---|
| No | Uses HTTP only. Access via http://<server-name>.<localTLD> or http://<server-ip-address>. |
| Yes | Enables an automatically-generated self-signed SSL certificate. Access via https://<server-name>.<localTLD>. Note: Browsers will show a warning. |
| Strict | Enables exclusive use of a myunraid.net SSL certificate. Access via https://<lan-ip>.<hash>.myunraid.net. |
If using Strict mode, your router or ISP might block access due to DNS rebinding protection.
rebind-domain-ok=/myunraid.net/ to the configuration.server: private-domain: "myunraid.net".set service dns forwarding options rebind-domain-ok=/myunraid.net/.Encryption can be configured while the array is Stopped.
Methods:
CRITICAL WARNING: If you lose your passphrase or keyfile, the encrypted content cannot be recovered. Changing an encryption key requires reformatting the device, which results in permanent data loss.