Zabbix Server Dashboard: New CSS Challenge

Zabbix Server Dashboard: New CSS Challenge

If you're a Zabbix user, unless you're SERIOUSLY behind on software updates, you're aware by now that a change in v7.0 reoriented the dashboard labels from horizontal to vertical.

Zabbix Screenshot - Vertical Tags
Zabbix Screenshot - Vertical Tags

It bugged me enough that I created a post with instructions on how to change it. However, Zabbix threw me a curve in v7.2, moving from defined styles to Javascript components. It took some experimentation, but here's how to revert back to horizontal menus in Zabbix v7.2:

  1. SSH to your Zabbix server system.
  2. Change to the Zabbix js components directory:
    1. cd /usr/share/zabbix/ui/js
  3. Make a backup copy of component.z-vertical.js:
    1. cp component.z-vertical.js /root/zabbix_component.z-vertical.js_backup
  4. Edit component.z-vertical.js with the editor of your choice (vim, of course!):
    1. Search for the line that reads transform: 'rotate(270deg)' and comment it out:
      1. //transform: 'rotate(270deg)'
      2. As of Zabbix 7.2.7, this will be line #45.
    2. Remove the comma at the end of the previous line, #44; it should read:
      1. left: 0
    3. Comment out lines #88 and #89:
        1. NOTE: Replace the single quotes in the lines below with a backtick character; backticks indicate code formatting in Markdown and as such, aren't displayed correctly.
        2. //this.style.width = '${this.#inner_container.scrollHeight}px;'
        3. //this.style.height = '${this.#inner_container.scrollWidth}px;'
    4. Copy and paste the commented lines, swapping the variables:
      1. this.style.width = '${this.#inner_container.scrollWidth}px;'
      2. this.style.height = '${this.#inner_container.scrollHeight}px;'
  5. Save the file and restart Zabbix server:
    1. :wq
    2. systemctl restart zabbix-server
  6. Double-check Zabbix's status:
    1. systemctl status zabbix-server
Zabbix server status from systemctl
  1. Reload the Zabbix server dashboard in your browser. Your tags should now be restored to their former horizontal glory:
Zabbix dashboard with horizontal tabs restored.

Like the previous Zabbix fix, this one is pretty minor, and a relatively easy fix to boot, but hopefully some of my fellow Zabbix admins will find it useful. As always, if you have any questions, don't hesitate to reach out: matt@thesoloadmin.com.