Description
The uxMAX module allows you to change the color of the menu, background, and highlight tags, which can improve the user experience and simplify orientation, also allowing you to drag and move modal windows for Zabbix elements. The color picker or numeric value allows you to choose a color that matches your company theme for the menu and background.
As for tags, you can create a simple, noticeable logic (red being errors from logs or critical alerts, blue being disk space, etc.). With this setup, new users will have a much easier time orienting themselves inside the Zabbix frontend. Lastly, you can choose from six options on how your JavaScript code will be formatted and highlighted, such as JetBrains Mono and Source Code Pro.
Installation
Repository setup on the server
Connect to your Zabbix frontend server (perform on all frontend nodes) via SSH
Navigate to the /modules folder (typically located at /usr/share/zabbix/ or /usr/share/zabbix/ui/)
cd /usr/share/zabbix/modules/Clone the repository on your server
#FREE
git clone https://git.initmax.cz/initMAX-Public/Zabbix-UI-Modules-uxMAX.gitChange the ownership of the directory to the user under which your Zabbix frontend is running using the chown command (cat /etc/passwd to find which user was created during installation), some examples:
chown nginx:nginx ./Zabbix-UI-Modules-uxMAX*chown apache:apache ./Zabbix-UI-Modules-uxMAX*chown www-data:www-data ./Zabbix-UI-Modules-uxMAX*Frontend module initialization
Navigate to the Zabbix frontend menu and select: Administration → General → Modules
Use the ‘Scan directory’ button at the top
Enable the newly discovered module
The module is available in the menu
Configuration
| Field | Description |
| Enable dragging of modal windows | Any pop-up setup window can now be dragged around |
| Custom color theme | Choose a color for the background and menu |
| Color tags | Choose the logic from Contains or Starts/Ends, which will change color of matching tabs |
| Code Highlight | Size of the text in pixels and Style of highlight |
Note that this module uses the Pho Ace editor, no need to install it’s a part of the module.
Usage Examples
Here are a few examples of how you can use the uxMAX module:
Example 1 – Move modal window
You can Enable dragging of modal windows.
Example 2 – Tags highlight
You can also highlight tags based on your company logic.
Here is an example where items with a CPU tag are pink, memory is yellow, and service is blue.
Example 3 – The Zabbix Frontend Color Change
In the module menu, you can choose the background color of the Zabbix Frontend menu to your liking.
Example 4 – JavaScript Code block highlight
You can also choose which code style your JavaScript will be displayed in.
Where to get it?
If you’re interested in this module, you can find it in our e-shop. There you’ll learn more about the available versions and how to get the product.