Connectors Action menu
Author: Yubo Xing | Last edit: May 24, 2023 | Design type: Action menus | Product area: Kafka
Overview
Based on usability testing results, we made design explorations of the actions menu in tableview, drawer and overview page to help users particularly be more focused on the Kabab menu and actions menu.
Actions menu is accessible from a number of places, such as:
- table view kebab
- Details page kebab
- Overview page actions dropdown menu
By default, menus will keep consistency between main pages. In cases where there is unreasonable action flow, some actions will be unavailable.
Task related statement
- Did researches on the competitive products and Openshift design guidance
- PatternFly "With titled groups" menu component: https://www.patternfly.org/v4/components/menu/#with-titled-groups
- Design guideline for organizing actions
- Actions: MAS: Microcopy database
Kebab menu — table
Kebab menus architecture in tableview:
Kebab menus architecture in tableview:
Start instance
Stop instance
View instance information
Details
Edit instance configuration
Duplicate instance
Delete instance
Case : when the instance is failed or stopped
If the instance fails,it displays a tooltip like this to explain to a user why the “start instance” action is disabled.The tooltip message depends on the tech perspective that allows and supports this content.
Kebab menu — drawer
The kebab menu was still used for the drawer to keep this compact page readable and concise compared to the dropdown menu. Its architecture changes:
Start instance
Stop instance
Edit instance configuration
Duplicate instance
Delete instance
Actions dropdown — overview page
Dropdown menu was used for the overview page to keep consistency with other Openshift products.On the one hand, it is more prominent on the overview page compared to the kebab menu. On the other hand, this page would include much more detailed information and metrics about this instance, the users are more likely to act on the instance.It keeps same architecture with drawer.
Open question: Why don't we have “Details” here?
From the aspect of use flow, the overview page is at a deeper level than the drawer, but the drawer shows the same information as the overview page of RHOC, so it is confusing to trigger the drawer on the overview page.
Results when user do actions
Start instance
Stop instance
Start instance and stop instance actions work for different status.The “start ”is unavailable but “stop” is available if the instance is ready or failed.The “stop ”is unavailable but “start” is available if the instance is stopped.
View instance information
Details
Details action triggers drawer panel.
Edit instance configuration
Duplicate instance
Edit action could help jump to the overview configuration page.
Duplicate action could help jump to a new creation wizard.
Delete instance
Delete action triggers delete modal.
In the overview page,,it will return to the table view to open the delete modal if users click the “Delete instance”.
In the drawer page, it open the delete modal on current page if users click the “Delete instance”.
Remove all actions button in the edit mode