OpenBMC GUI Design Workgroup - Today 10:00 AM CST

OpenBMC GUI Design Workgroup - Today 10:00 AM CST

[Derick Montague]

Hello,


In today's GUI Design Workgroup, we will will be discussing:


- Vue Roadmap progress
- Web UI color palette
- Documentation progress (alerts, buttons, toasts)
- Reference Id table column name in Event Logs
- Date and Time design updates
- Local User management review

Meeting details are on the GUI Design Workgroup Wiki
https://github.com/openbmc/openbmc/wiki/GUI-Design-work-group

Thank you!
 

Re: OpenBMC GUI Design Workgroup - Today 10:00 AM CST

[Derick Montague]

Thank you everyone for the active and productive session today. Below are the notes:

> In today's GUI Design Workgroup, we will will be discussing:
>
>
>- Vue Roadmap progress
>- Web UI color palette
>- Documentation progress (alerts, buttons, toasts)
>- Reference Id table column name in Event Logs
>- Date and Time design updates
>- Local User management review

Road Map

- Reviewed IBM's WIP ZenHub board for their current sprint
    - Translation progress
    - Feature toggle to provide support for more upstream development to support different systems
    - Date and Time research and design
    - Local user management implementation progress
    - Reboot BMC implementation
    - Power server operations is WIP
    - Overview page using Redfish API to display data

Design story progress and feedback tracking

- Determined that we will continue the pattern for tracking design reviews in a Github story in the webui-vue branch
    - Github story will contain link to Invision prototype
    - Comments are best captured in Github, but can be created in Invision as well. Designer will add comments to Github story as needed
    - Design evolution and final design should be screen captured and added to the Github story where it can be preserved
- IBM design team will begin this process which will be evaluated for improvements in future workgroup meetings

Color Palette

- IBM has proposed a refined color palette based on the Bootstrap frameworks Theming guidelines (https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/29965)
- Reviewed the colors and an overview of how they can be easily updated downstream for branding purposes
- Slightly more extensive color palette to improve the theming of components
- Full documentation is partially completed explaining customization and the theming process
- Workgroup was happy with the proposal

Event Logs and the Reference Code column

IBM needs a table column that contains a code the users and customer support can use to troubleshoot issues. The column name was previously based on an IBM proprietary naming. Through user testing the IBM OpenBMC design squad has updated the column title to Reference Id.

- Will not be needed for Intel systems currently
- Intel systems need ID (currently can be toggled off in Intel GUI), status, and description
- Intel does not use the Systems Log page that is upstream.
- Phoenix expressed the need for a solution for improving the experience on small screens and make it easier to view the most important information. All workgroup members agreed this was description.
- New Event Log design with filter menu had not been seen by the current Workgroup members. IBM will create a Github story and send more requests for feedback to the community.
- Phoenix suggested not needed a redundant column displayed in the table during filtering, e.g. hide severity column if filter is based on a severity value
- Determined this may be a future enhancement following priority work in process
- Need to write the GUI to have a dynamic event log table that only displays a column if present in the JSON response
    - Another option might be some type of page flag that can be set either globally or in a single file component

Language Translation

- Intel and Phoenix noted that languages should be displayed in the native language, e.g. Spanish should be Español
- IBM asked for for feedback on or a use case for the user being able to change the language after login since currently the user makes their language preference on the login screen.
    - Pros for and against. IBM will conduct more research to determine if there is a need and the best pattern for enabling if needed.

Date and Time Design

- Phoenix discussed a "sync to ntp" use case there during setup the system is connected to the internet in order for the admin to connect to an NTP server to set the Host RTC and then disconnect from the internet
    - Intel noted that they ask admins to update the time in the BIOS to set the Host RTC.
    - Possible future enhancement
- Design for Date and Time will allow flexibility for different functionality, e.g IBM systems allow for NTP or manual time entry, while Intel systems offer NTP or RTC only.
- Need a toggle or flag to allow for both options to live upstream.

Action Items

- Start adding design review stories to Github
    - Update event logs prototype and send to community
    - Date and Time
    - Color palette with alert and toast components
- Update language menu options to display in native language


Review in the wiki: https://github.com/openbmc/openbmc/wiki/GUI-Design-work-group#030420
 
 
 

Re: OpenBMC GUI Design Workgroup - Today 10:00 AM CST

[Joseph Reynolds]

On 3/4/20 1:21 PM, Derick Montague wrote:
> Thank you everyone for the active and productive session today. Below are the notes:
>
>> In today's GUI Design Workgroup, we will will be discussing:
>>
>>
>> - Vue Roadmap progress
>> - Web UI color palette
>> - Documentation progress (alerts, buttons, toasts)
>> - Reference Id table column name in Event Logs
>> - Date and Time design updates
>> - Local User management review
> Road Map
>
> - Reviewed IBM's WIP ZenHub board for their current sprint
>      - Translation progress
>      - Feature toggle to provide support for more upstream development to support different systems
>      - Date and Time research and design
>      - Local user management implementation progress
>      - Reboot BMC implementation
>      - Power server operations is WIP
>      - Overview page using Redfish API to display data
>
> Design story progress and feedback tracking
>
> - Determined that we will continue the pattern for tracking design reviews in a Github story in the webui-vue branch
>      - Github story will contain link to Invision prototype
>      - Comments are best captured in Github, but can be created in Invision as well. Designer will add comments to Github story as needed
>      - Design evolution and final design should be screen captured and added to the Github story where it can be preserved
> - IBM design team will begin this process which will be evaluated for improvements in future workgroup meetings
>
> Color Palette
>
> - IBM has proposed a refined color palette based on the Bootstrap frameworks Theming guidelines (https://gerrit.openbmc-project.xyz/c/openbmc/webui-vue/+/29965)
> - Reviewed the colors and an overview of how they can be easily updated downstream for branding purposes
> - Slightly more extensive color palette to improve the theming of components
> - Full documentation is partially completed explaining customization and the theming process
> - Workgroup was happy with the proposal
>
> Event Logs and the Reference Code column
>
> IBM needs a table column that contains a code the users and customer support can use to troubleshoot issues. The column name was previously based on an IBM proprietary naming. Through user testing the IBM OpenBMC design squad has updated the column title to Reference Id.
>
> - Will not be needed for Intel systems currently
> - Intel systems need ID (currently can be toggled off in Intel GUI), status, and description
> - Intel does not use the Systems Log page that is upstream.
> - Phoenix expressed the need for a solution for improving the experience on small screens and make it easier to view the most important information. All workgroup members agreed this was description.
> - New Event Log design with filter menu had not been seen by the current Workgroup members. IBM will create a Github story and send more requests for feedback to the community.
> - Phoenix suggested not needed a redundant column displayed in the table during filtering, e.g. hide severity column if filter is based on a severity value
> - Determined this may be a future enhancement following priority work in process
> - Need to write the GUI to have a dynamic event log table that only displays a column if present in the JSON response
>      - Another option might be some type of page flag that can be set either globally or in a single file component
>
> Language Translation
>
> - Intel and Phoenix noted that languages should be displayed in the native language, e.g. Spanish should be Español

In addition or as an alternative, consider IETF language tags (for 
example es-419 or en-US) which also encodes regional differences.  A 
number of IBM products use the IETF scheme and differentiate between 
zh-CN and zh-TW.
https://en.wikipedia.org/wiki/Language_code

> - IBM asked for for feedback on or a use case for the user being able to change the language after login since currently the user makes their language preference on the login screen.
>      - Pros for and against. IBM will conduct more research to determine if there is a need and the best pattern for enabling if needed.

My two cents worth:
1. Data should be stored untranslated whenever possible, and translated 
only when it is presented to the user.
2. It seems to me the language preference should ideally be associated 
with the session (whether login session or a session to perform a single 
operation ~ 
https://lists.ozlabs.org/pipermail/openbmc/2019-November/019422.html).

Thanks for keeping track of all this Derick!

- Joseph

>
> Date and Time Design
>
> - Phoenix discussed a "sync to ntp" use case there during setup the system is connected to the internet in order for the admin to connect to an NTP server to set the Host RTC and then disconnect from the internet
>      - Intel noted that they ask admins to update the time in the BIOS to set the Host RTC.
>      - Possible future enhancement
> - Design for Date and Time will allow flexibility for different functionality, e.g IBM systems allow for NTP or manual time entry, while Intel systems offer NTP or RTC only.
> - Need a toggle or flag to allow for both options to live upstream.
>
> Action Items
>
> - Start adding design review stories to Github
>      - Update event logs prototype and send to community
>      - Date and Time
>      - Color palette with alert and toast components
> - Update language menu options to display in native language
>
>
> Review in the wiki: https://github.com/openbmc/openbmc/wiki/GUI-Design-work-group#030420
>   
>   
>   
>

Re: OpenBMC GUI Design Workgroup - Today 10:00 AM CST

[Derick Montague]

Hi Joseph,

Thank you for your feedback.

> My two cents worth:
> 1. Data should be stored untranslated whenever possible, and translated
> only when it is presented to the user.
> 
> 2. It seems to me the language preference should ideally be associated
> with the session (whether login session or a session to perform a single
> operation ~
> https://lists.ozlabs.org/pipermail/openbmc/2019-November/019422.html).

1. The GUI translations are stored in JSON files. Which content is determined
by the Vue i18n Plugin. 


2. The language preference will be stored in local storage, so it will persist
for as long as the user doesn't change the language or clear their browser's
local storage. The question is whether the user should have to log out if they
want to change their preference.
 

Re: OpenBMC GUI Design Workgroup - Today 10:00 AM CST

[Joseph Reynolds]

On 3/4/20 9:34 PM, Derick Montague wrote:
> Hi Joseph,
>
> Thank you for your feedback.
>
>> My two cents worth:
>> 1. Data should be stored untranslated whenever possible, and translated
>> only when it is presented to the user.
>>
>> 2. It seems to me the language preference should ideally be associated
>> with the session (whether login session or a session to perform a single
>> operation ~
>> https://lists.ozlabs.org/pipermail/openbmc/2019-November/019422.html).
> 1. The GUI translations are stored in JSON files. Which content is determined
> by the Vue i18n Plugin.

That sounds good but covers only the GUI elements.  I was thinking about 
the human readable data that flows from the Redfish APIs into the 
browser.  For example, SEL data.  Do you know if this data will flow 
from the Redfish APIs as messageId and replacementText, similar to 
Redfish messages?  Alternately will the message already be formatted as 
a single string when it flows from the Redfish API? <-- That was the 
intent of my original cent (quoted above).

>
>
> 2. The language preference will be stored in local storage, so it will persist
> for as long as the user doesn't change the language or clear their browser's
> local storage. The question is whether the user should have to log out if they
> want to change their preference.
>   

I understand your response to mean: the user's language preference is 
stored in the browser's local storage and presented to the BMCWeb server 
in form of something like the a HTTP request Language header (whatever 
the current practice is).  That sounds okay to me.  In any case, I think 
switching languages is infrequent.  That is, I do not foresee a user 
requirement to switch language frequently during a single signon session.

- Joseph