Collapsible node groups in Fuel Web UI

Implement possibility to collapse and expand node groups in Fuel Web UI.

Problem description

In Fuel Web UI it becomes difficult to scroll through a large list of nodes to observe overall nodes state. As long as nodes are always grouped by their parameters, which corresponds to applied sorting on the screen, user does not always need to see the entire list of nodes in a group. In most cases nodes in a group will not have many differences. For everyday work with a cloud some aggregated information about a node group would be enough.

Proposed change

Collapsible behaviour of node groups should be introduced in Fuel Web UI.

Collapsible node group should represent an aggregated information about its nodes and a set of controls:

  • A title which reflects node parameters by which they are grouped.
  • Number of total nodes in the group.
  • Number of selected nodes in the group.
  • ‘Select All’ control to (un)select nodes in the group.
  • Button to toggle the group.
  • A short summary of node statuses to give user an important information if some nodes in the group failed or went offline.

There are mockups for the feature:

../../_images/expanded-view.png ../../_images/collapsed-view.png


It would be a good UX to store collapsed state of node groups on backend. This would help user not to toggle groups every time nodes screen is loaded. Since node grouping depends on applied sorting for node list, sorting should also be stored on backend. So, these UI settings (collapsed state of node groups, current sorting) should be saved every time user toggles a node group or changes sorting on nodes screen. This UI settings should be coupled with a particular user to give the user an ability to keep his own settings for all clients (browsers). This proposal should be considered in the next iterations of node namanement flow rework.

Data model impact


REST API impact


Upgrade impact


Security impact


Notifications impact


Other end user impact


Performance Impact


Plugin impact


Other deployer impact


Developer impact


Infrastructure impact




Primary assignee:


Mandatory Design Reviewer:


QA engineer:

Work Items

  • Provide a new visual design for collapsible node groups.
  • Implement JS part of the task.


  • The feature should be covered by UI functional tests.

Acceptance criteria

  • User can toggle node groups both on the screen of environment nodes and the screen of unallocated nodes.
  • User can select all nodes in group by an appropriate ‘Select All’ checkbox.
  • Node group title accompanied by numbers of selected and total nodes in the group.
  • Collapsed node groups show an aggregated node statuses summary.

Documentation Impact

The documentation should cover how the end user experience has been changed.


  • #fuel-ui on freenode