Bug 1301584

Summary: [UI] Web UI doesn't scale well for higher number of nodes, longer hostnames or narrow window
Product: Red Hat Storage Console Reporter: Daniel Horák <dahorak>
Component: UIAssignee: sankarshan <sankarshan>
Status: CLOSED CURRENTRELEASE QA Contact: Daniel Horák <dahorak>
Severity: unspecified Docs Contact:
Priority: unspecified    
Version: 2CC: dahorak, mcarrano, nthomas, sankarshan
Target Milestone: ---   
Target Release: 2   
Hardware: Unspecified   
OS: Unspecified   
Whiteboard:
Fixed In Version: rhscon-ui-0.0.46-1.el7scon.noarch Doc Type: Bug Fix
Doc Text:
Story Points: ---
Clone Of: Environment:
Last Closed: 2018-11-19 05:34:45 UTC Type: Bug
Regression: --- Mount Type: ---
Documentation: --- CRM:
Verified Versions: Category: ---
oVirt Team: --- RHEL 7.3 requirements from Atomic Host:
Cloudforms Team: --- Target Upstream Version:
Attachments:
Description Flags
Dashboard
none
dashboard_discovered_hosts.png
none
dashboard_discovered_hosts_narrow_window.png
none
Create_Cluster_narrow_window_01.png
none
Create_Cluster_narrow_window_02.png
none
Create Cluster - Storage Profiles page none

Description Daniel Horák 2016-01-25 12:44:57 UTC
Description of problem:
  There are some issues with the web UI, with higher number of nodes, longer hostnames or when the browser window is narrower than cca 100px.

* Dashboard with discovered hosts - "The following hosts are discovered." area height seems fixed and is quite low on higher screens. There is lot of unused space below but only few hosts displayed at once (depends on the window with - 4-6 hosts from total number of 10 in my case). See screenshots dashboard_discovered_hosts.png and dashboard_discovered_hosts_narrow_window.png in attachment.
Also when is the window narrower than cca 100Opx, it is not possible to scroll the list of discovered hosts (dashboard_discovered_hosts_narrow_window.png).

* Dashboard - "Top Hosts - CPU", "Top Hosts - Memory" area: there are issues with overlapping (see attached image dashboard.png).

* Create Cluster -> 2. Select Hosts page: on window narrower than cca 100px doesn't looks well and there is lot of unused space (attached pictures Create_Cluster_narrow_window_*.png).

Version-Release number of selected component (if applicable):
  rhscon-ceph-0.0.5-0.1.alpha1.el7.x86_64
  rhscon-core-0.0.7-0.1.alpha1.el7.x86_64
  rhscon-ui-0.0.6-0.1.alpha1.el7.noarch

(browser on client side firefox-43.0.3-1.fc23.x86_64)

How reproducible:
100%

Comment 1 Daniel Horák 2016-02-11 16:10:21 UTC
Created attachment 1123217 [details]
Dashboard

Comment 2 Daniel Horák 2016-02-15 09:17:57 UTC
Created attachment 1127197 [details]
dashboard_discovered_hosts.png

Comment 3 Daniel Horák 2016-02-15 09:18:54 UTC
Created attachment 1127199 [details]
dashboard_discovered_hosts_narrow_window.png

Comment 4 Daniel Horák 2016-02-15 09:23:54 UTC
Created attachment 1127200 [details]
Create_Cluster_narrow_window_01.png

(In reply to Daniel Horák from comment #0)
> * Create Cluster -> 2. Select Hosts page: on window narrower than cca 100px
> doesn't looks well and there is lot of unused space (attached pictures
> Create_Cluster_narrow_window_*.png).
There should be ...on window narrower than cca 1000px...

All screenshots are created on newer version of rhscon-* packages:
  rhscon-ceph-0.0.6-2.el7.x86_64
  rhscon-core-0.0.8-2.el7.x86_64
  rhscon-ui-0.0.11-1.el7.noarch

Comment 5 Daniel Horák 2016-02-15 09:24:25 UTC
Created attachment 1127201 [details]
Create_Cluster_narrow_window_02.png

Comment 7 Matt Carrano 2016-03-11 21:47:27 UTC
UI needs to be responsive to accommodate different browser widths.  This should be retested after UI is brought in line with UI wireframes.  Most of the screens referenced in this bug do not conform with intended design.

Comment 9 Nishanth Thomas 2016-06-20 12:16:31 UTC
Please check this on the latest builds

Comment 10 Nishanth Thomas 2016-06-21 18:00:45 UTC
By looking at the screens attached, this bug is raised at a very old build, the design is totally changed and the newer design is responsive. Hence moving to ON_QA, reopen if find any issues with newer screens

Comment 11 Daniel Horák 2016-07-21 09:34:00 UTC
Created attachment 1182413 [details]
Create Cluster - Storage Profiles page

I see problem on the Create Cluster - Storage Profiles page (see the attachment) - the device path overflows to the size field (even on quite wide browser window).

I'll also check the issues from the comment 0 and update this bug later.

Comment 12 Daniel Horák 2016-07-22 08:59:44 UTC
Moving to ASSIGNED because of issue described in Comment 11.

Comment 13 Nishanth Thomas 2016-07-22 12:56:29 UTC
As per the discussion moving this to ON_QA, Please raise separate bug for the issue mentioned in comment 11

Comment 14 Daniel Horák 2016-07-22 14:08:09 UTC
Separated bug for issue from comment 11: Bug 1359214

Comment 15 Daniel Horák 2016-07-27 11:20:37 UTC
Tested with USM Server on RHEL 7.2:
  rhscon-ceph-0.0.36-1.el7scon.x86_64
  rhscon-core-0.0.36-1.el7scon.x86_64
  rhscon-core-selinux-0.0.36-1.el7scon.noarch
  rhscon-ui-0.0.50-1.el7scon.noarch

(In reply to Daniel Horák from comment #0)
> * Dashboard with discovered hosts - "The following hosts are discovered."
> area height seems fixed and is quite low on higher screens. There is lot of
> unused space below but only few hosts displayed at once (depends on the
> window with - 4-6 hosts from total number of 10 in my case). See screenshots
> dashboard_discovered_hosts.png and
> dashboard_discovered_hosts_narrow_window.png in attachment.
> Also when is the window narrower than cca 100Opx, it is not possible to
> scroll the list of discovered hosts
> (dashboard_discovered_hosts_narrow_window.png).
The design of discovered hosts page was changed and neither of the issues mentioned above affect the new design.

> * Dashboard - "Top Hosts - CPU", "Top Hosts - Memory" area: there are issues
> with overlapping (see attached image dashboard.png).
The design of Dashboard was changed and this didn't apply anymore.

> * Create Cluster -> 2. Select Hosts page: on window narrower than cca 1000px
> doesn't looks well and there is lot of unused space (attached pictures
> Create_Cluster_narrow_window_*.png).
Create Cluster -> 2. Select Hosts page works quite well in narrower window.

>> VERIFIED