Collapsible node groups in Fuel Web UI

https://blueprints.launchpad.net/fuel/+spec/collapsible-node-groups

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

Alternatives

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

None

REST API impact

None.

Upgrade impact

None.

Security impact

None

Notifications impact

None

Other end user impact

None

Performance Impact

None

Plugin impact

None

Other deployer impact

None.

Developer impact

None

Infrastructure impact

None

Implementation

Assignee(s)

Primary assignee:

Developers:

Mandatory Design Reviewer:

Approver:

QA engineer:

Work Items

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

Testing

  • 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.

References

  • #fuel-ui on freenode