Category Archives: ExtZabbix

ExtZabbix: Anatomy of a Group Selector

In case you’re wondering: ExtZabbix is the project name for the ExtJS-based Zabbix frontend, at least for now.

I’ve been working quite hard on a good method to assign groups to templates and hosts. I wasn’t satisfied with the way the Zabbix frontend currently does it, for several reasons:

  • The group selector takes lots of space
  • It becomes unhandy with lots of groups
  • No chance of adding groups which were added by somebody else (requires page reload to update the group list)

The Zabbix Group Picker, as of Version 1.9.8

While the picker works pretty well on most installations, the widget size is simply too huge for me. It took me quite some time to test with some alternative implementations. My requirements were these:

  • Slim widget footprint – don’t take up much space
  • Hide groups which are already added
  • Allow selection for removing multiple groups at once
  • Have pagination for a large number of groups
  • Add new groups on the fly [not implemented yet]
  • Allow searching by the group name [not implemented yet]

The ExtZabbix Group Picker

The result is a very lightweight group widget, which can be re-used for everything which uses a host group. The embedded grid which appears after clicking the “Add group…” button (“Assign group” probably¬†would be a better naming) already has pagination support and only includes the groups which haven’t been added so far.

One drawback is that each time the button is clicked, the grid reloads the groups from the server. I’m not sure if I should change this; it ensures that the group list is always up-to-date, even if somebody else removed a group in the meanwhile. Of course, when you have added a group to a template and then somebody removes a group prior saving the template, you’ll end up with an error.

The embedded grid for selecting groups

What’s missing for now is a search field and the ability to create groups directly. While the search field isn’t a big problem, I’m still thinking about how to add groups the “best” way. Basically I have two options:

  • Do it like the current Zabbix frontend and have a simple text box to enter a new group name
  • Open the group editor (or the “Add Group” form) and let the user configure a group with all options

While the first option should be obvious, it has one drawback: If somebody decides to create a new group, chances are good that he also wish to add hosts or other templates to that new group, which would mean: Add the group, navigate to the newly created group and add the hosts/templates to that group. That’s an additional navigational step I’d really like to avoid.

This might be a bit of over-engineering for groups, but as I also developed the host picker as a “showcase” and also about best practises, there are other areas of interest where it isn’t over-engineering anymore – namely items and triggers. I find myself navigating back- and forwards between items and triggers all the time; the navigational overhead is really huge. That’s what I want to avoid from the beginning, making the frontend as easy and intuitive as possible.

Last but not least, I’m also thinking of allowing the user to add multiple groups at once. Right now, when you click any group in the drop-down, it gets immediately added to the group list. By enabling multiple selections, an additional button would be required to add the selected groups to the list, which is quite an overhead for users (2 clicks instead of one), but I really can’t judge. If you have feedback regarding this one, I’d be grateful to hear it!