See for the official Zabbix site.

UI elements

Jump to: navigation, search

The behaviour of frontend UI elements should follow these guidelines.

Generic elements

Modal windows

Modal windows must be draggable.


Objects must be alphabetically sorted whenever possible. Exceptions:

  • Discovery status in action conditions, as those are grouped by pairs Up-Down, Discovered-Lost. It is better to keep logically connected entries together.
  • Entity names that use placeholders might not be sorted properly - for example, item keys that use key parameter positional references ($1, $2 etc). Entries are limited when retrieving them from the database and we don't know what the placeholders will evaluate to until frontend gets them.


Currently there are 3 types of links:

  • Default: links with a standard behaviour. Blue colour, underline on hover, focus, active.
  • Alternative: links with a standard behaviour, but are in non standard colour variations. Have a semi-transparent underline by default.
  • Action: links that bring up an action menu or overlay block with any additional information. Have a dotted underline by default.


  • Links in forms should be opened in new tabs to avoid accidental form input loss.
  • Fields that create new entities should be highlighted by a green outside stroke - for example, the New group field in the host and template properties, and New application field in the item properties.
  • Check boxes and radio buttons should have clickable text labels.

Cloning forms

  • Pressing Clone must preserve input values of the current form.


  • Each filter must implement at least to buttons: "Filter" and "Reset".
  • Pressing the "Filter" button must submit the filter form, save the values of the filter input fields in the profiles table.
  • Pressing the "Reset" button must submit the filter form and delete all of the filter values saved in the profiles table.


  • Filters must be hidden by default to avoid confusing new users and drawing attention from the presented information.
  • Exceptions are filters that contain a time bar, they should be open by default.

External links

  • Navigating to a page that displays filtered results via a link in the frontend must also set and remember the filter.
  • If the link contains values for only some of the filter input fields, all of the missing fields must be reset to default.

Disabling functionality

If a feature is disabled globally, it should be hidden in the frontend. For example, if acknowledgements are disabled, they should disappear from the frontend (in these locations) and any saved configuration should be ignored by the server.