WoK top sections are getting over crowded

[potula-chandra]

Here are my observations: 1> Second level tab is getting over crowded. Please look in above figure. As we are keep adding more and more tabs some how we are losing precious space for the actual content.

Over head of the page gone 6 lines of the screen (a. logo 2b First level tab c. second level tab d. additional color line), which is almost contributing to nearly half of the screen. By doing this we are wasting precious space. There could be potential of many more tabs in the future.

2> Each tab will contain may of the sections (accordions). Again this is big problem I see when it comes to what is the amount of space we are providing when we expand each section.

Example screen shot:

In the above screen shot If we want to view "SAN Adapter" section, we have 4 sections above which consumes lot of spaces provide no value even though those accordions are in close state.

Additional disadvantage I see is whenever user clicks the storage tab for example, would end up in fetching data of all the accordions.. 3> Additionally we have done great job in showing powered by section with icons of the plugin end of the page

Many times I see this never shown due to the expansion of the individual sections. I feel this should be shown if required little smaller in size but not go out as this section bring kind of rich look to the application.

Some of how I feel the top layer is becoming pretty much hectic and implications would be inconvenience to the user.

I recommend all the UI developers to revisit the design and propose better UI where we provide King share of the page display to the actual content !!!

[danielhb]

I agree about the powered by section. We need to make it always visible in the bottom of the screen, even if we need to scroll down to see all the content of the page.

About the issues with the accordions, one solution I can think of is to change the layout of those tabs, showing the sections in a panel in the left margin and the actual content fitting the remaining of the screen. We can do this change in all Ginger tabs to provide the user with a consistent experience.

@samhenri @sstoppler any thoughts about this?

[harche]

If you guys want to consider, here is how Amazon AWS and Google Compute Cloud console interfaces look like. Navigation is mainly handled from the left hand side panel.

[danielhb]

Yeah, this is the kind of layout I was talking about.

[danielhb]

I talked with @alinefm and @samhenri in the weekly scrum today and we agreed that we can do a rework in Ginger UI as a whole, trying to consolidate all Ginger functions in this sidebar layout we're talking it here.

I will create a RFC to discuss it further in the ML. Please join the discussion there and provide feedback.

[alinefm]

Hi @chandrureddy and @danielhb

From what we have discussed in the weekly scrum meeting, it is a Ginger specific issue and not rely on Wok. So I propose to open an new issue on Ginger to address the new Tab design with the sidebar menu.

[samhenri]

For now I'll send a patch to Wok with media queries for small screens that should remove the padding from the second level menu items. It should fix it for screen resolutions between 1024px and 1200px wide. Then after the important patches for today's release I'll work on some solutions for Ginger like we discussed on the scrum meeting.

[danielhb]

@samhenri ok!

@samhenri @alinefm @chandrureddy I've created a RFC to discuss this further:

[RFC] Ginger/Gingerbase features layout change, merging them into a single sidebar layout

I will open up new bug in Ginger if required. For now, as Aline suggested, I'll close this bug

[potula-chandra]

Sorry, I was not able to participate in the scrum meeting. But a general question is WoK and plugins should have understanding on what to expect from the plugin level for the navigation like right now second level tabs and may be left tree pane in future.

For example:

For ginger, proposal is we want to eliminate second level tabs and move it to tree as left pane. So I am hoping WoK understand this some how for the host management it will provide left tree pane based on the plugin input.

So are we expected that WoK should also have to undergone some changes too (even this may be implemented for ginger) ?

Thanks and Regards Chandra On 6/1/16 8:49 PM, Aline Manera wrote:

Hi @chandrureddy https://github.com/chandrureddy and @danielhb https://github.com/danielhb

From what we have discussed in the weekly scrum meeting, it is a Ginger specific issue and not rely on Wok. So I propose to open an new issue on Ginger to address the new Tab design with the sidebar menu.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kimchi-project/wok/issues/120#issuecomment-223026716, or mute the thread https://github.com/notifications/unsubscribe/AKVDhSrscgK-VGUOcQjdbQmXTOFaIneRks5qHaLngaJpZM4Ipoko.

[danielhb]

This was discussed in the IRC and the conclusion was that we can't eliminate the second level tab of Ginger and Ginger-base without reviewing Kimchi style too. It would be too much of a change for plug-ins that can be used together in the same product.

On the other hand, I don't want to wait for a consensus of what should be the standardized UI look and feel of all WoK plugins to take action in the Ginger UI. This is a very broad and long discussion to have and the issues with Ginger UI keep appearing.

This is why, for now, the proposal is to change the inner layout of the second level tab "Administration", putting all the other tabs inside it with the sidebar layout, but without eliminating the second level tab. The idea is that the plug-ins have freedom to change its inner layout, but the second level tab is a WoK standard we can't simply ignore.

[potula-chandra]

Daniel,

Thanks for the input !!!

So are we saying for the Host tab there will be only on second level tab called "Administration" and rest of the functionality moved to side bar lay out ?

For example: Side bar will look like :

Dashboard Statistics Basic Info ...... Storage Volume Groups Storage Devices ....... Network Global N/w Configurations N/w Configurations ......

and so on ?

Thanks in advance

Regards Chandra

On 6/2/16 5:17 PM, Daniel Henrique Barboza wrote:

This was discussed in the IRC and the conclusion was that we can't eliminate the second level tab of Ginger and Ginger-base without reviewing Kimchi style too. It would be too much of a change for plug-ins that can be used together in the same product.

On the other hand, I don't want to wait for a consensus of what should be the standardized UI look and feel of all WoK plugins to take action in the Ginger UI. This is a very broad and long discussion to have and the issues with Ginger UI keep appearing.

This is why, for now, the proposal is to change the inner layout of the second level tab "Administration", putting all the other tabs inside it with the sidebar layout, but without eliminating the second level tab. The idea is that the plug-ins have freedom to change its inner layout, but the second level tab is a WoK standard we can't simply ignore.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/kimchi-project/wok/issues/120#issuecomment-223268513, or mute the thread https://github.com/notifications/unsubscribe/AKVDhbax7hfLXaJ4pCuxlcC7Bjo3cu2wks5qHsLGgaJpZM4Ipoko.

[danielhb]

Something like that, but Dashboard is a Ginger-base UI so it wouldn't be put together in this same layout.

Assuming that we do this change in Ginger-base too this is what it can look like assuming wok, ginger-base, ginger and kimchi running:

Upper tabs: Wok || Host || Virtualization

Under Host:

Host diagnosis\ || Administration

\ "Host diagnosis" can be any other name to contain all Ginger-base features in one tab. We don't need to do that, of course. What I would like to do in Gingerbase is adding the sidebar layout in the "Updates" tab. Perhaps renaming it to something else and adding the "debug reports" features in the sidebar layout too, making the Dashboard containing only host stats. For start, considering Ginger-base, I would be happy to just put the sidebar layout under "updates" only and leave everything else as is.

Under the tab Administration we would have the side bar layout with:

• Config Backup
• Firmware update
• Network (expand/collapse menu) -----Global net config -----Network config -----Openvswitch bridge config
• Power Management
• Sep (IBM Sep)
• Sensor monitor
• Storage (expand/collapse menu) -----File systems -----SAN adapters -----Storage Devices -----Swap Devices -----Volume Group
• System services
• System modules
• User management

Hopefully I didn't miss anything. Note that there are arch/config specific features like Power Management (depends on tuned) and Firmware Update (pSeries only). These features would be hid from this sidebar if they're not available.

I think this would drastically improve the user experience, having all available features at one tab and having the same content pane for everything. It would also be easier for us to maintain it - all changes made in the content pane would be available for all plug-ins, instead of maintaining 4 sub tabs.

And, let me emphasize, no content changes would be made at this step. The idea is to simply relocate the existing content of each accordion to use this common content pane. After doing that it will be easier for us to spot differences in style between then and standardize the look and feel of all of them if required.

Daniel