Node list standard and compact view modes in Fuel UI

https://blueprints.launchpad.net/fuel/+spec/node-list-view-modes

Implement possibility to switch between standard and compact node list view modes.

Problem description

In big environments it becomes hard to manage a large number of nodes.

Node panel takes an entire row on environment nodes screen now and End User is forced to scroll through a large list of nodes before finding the right one. At the same time not all information on a node panel is needed for everyday work with operational cloud.

Proposed change

We should introduce a compact view for a clickable node panel which shows the most significant information about the node such as:

• name
• status (including deployment progress bar)
• hardware information (HDD/CPU/RAM) in a short form
• checked state

And add an ability to switch between standard and compact modes in particular environment. The choice should be stored in the database, so UI settings for an environment will be the same for every client. This will allow user not to set environment UI on each device.

Standard mode should be default view mode for new environments.

Switching node list view is always available and does not depend on environment status.

In compact mode there should be about 5 nodes in row in the node list.

When user hovers a compact node it should transform to extended view with more detailed info:

• name (with ability to rename the node)
• status (including deployment progress bar)
• checked state
• role list
• hardware information (HDD/CPU/RAM) in a short form
• action buttons (such as Discard Addition, Discard Deletion, Remove (for offline nodes), View Logs)
• Details button to launch node pop-up with detailed hardware information.

There are mockups for the feature:

Alternatives

As the next iteration it is suggested to consider saving of UI settings not to Nailgun DB but to Keystone. This will allow to couple UI settings of particular environment to a particular user. This will be increasingly relevant with the growing number of UI settings.

UX impact

Proposed solution mostly affects UI/UX:

• New control for changing node list view mode should be added in a node management panel.
• A node panel should have a new layout in case of ‘compact’ mode with less node data.
• Compact node panel should transform to extended view with more details when user hovers a node.
• The proposed change does not affect neither standard node view nor existing node pop-up with detailed hardware configuration.

Data model impact

Existing grouping column should be removed from Cluster model into Nailgun. At the same time new ui_settings attribute of JSON type should be added to Cluster model with the following default value:

{
  "view_mode": "standard",
  "grouping": "roles"
}

This attribute should contain all UI settings of specific environment including node list grouping mode, that stored in grouping field of Cluster model now.

This is an extendable way to handle future UI changes and not to create a big amount of additional fields in Cluster model.

This new ui_settings field should be validated on backend using JSON schema. “view_mode” property has one of the following values: “standard” (default) or “compact”. “grouping” property has one of the following values: “roles” (default), “hardware” or “both”.

REST API impact

No new methods needed.

Existing PUT /api/cluster/{cluster_id} method should be modified to be able to accept data (Ok code 200, server error code starting from 500) in the form of the following JSON:

{
  "ui_settings": {
    "view_mode": "compact",
    "grouping": "roles"
  }
}

Accordingly, this new ui_settings field should be added to the method output:

{
  "id": 1,
  "name": "cluster#1",
  "release_id": 2,
  ...
  "ui_settings": {
    "view_mode": "compact",
    "grouping": "roles"
  }
}

Similarly existing GET /api/cluster/{cluster_id} method should return the new field.

Upgrade impact

Since we have a “Data model impact” we have to prepare an Alembic migration that should update clusters to fit the new format.

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:

• Julia Aranovich (jkirnosova@mirantis.com)

Developers:

• Julia Aranovich (jkirnosova@mirantis.com) - JS code
• Bogdan Dudko (bdudko@mirantis.com) - Design
• Vitaly Kramskikh (vkramskikh@mirantis.com) - Python code

Mandatory Design Reviewer:

• Vitaly Kramskikh (vkramskikh@mirantis.com)

Approver:

• Sheena Gregson <sgregson@mirantis.com>

QA engineer:

• Anastasia Palkina <apalkina@mirantis.com>

Work Items

• Provide a control to switch between standard and compact node list views.
• Implement a new compact node panel layout.
• Implement layout of an extended view of compact node.

Dependencies

None

Testing

• This new Fuel UI feature should be covered by UI functional tests.
• Addition of ui_settings attribute to Cluster model should be covered by Python tests.

Acceptance criteria

• User can switch between standard and compact view mode on nodes screen (both environment nodes and unallocated nodes screens).
• The view mode choice is saved for particular environment, so user does not need to switch again when he returned to environment. Selected view mode is also the same for different clients (browsers).
• When switching to compact view node panels should transform to their compact view.
• Compact node panel tranforms to extended view with more detailed information when user hovers a node.

Documentation Impact

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

References

• #fuel-ui on freenode