| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Goals
- Improve the user experience for the CDAP UI for existing and new users
- Enable faster ramp-up for new users of the CDAP UI
- Add additional functionality to the CDAP UI'
Background and strategic fit
When logging into CDAP three things need to be immediately apparent:
- What can I do?
- What am I currently doing?
- What have I completed?
...
Improving the CDAP UI will facilitate a more comprehensive user interface that is customizable, will provide faster time to value, and ease friction for adding new capabilities into the system.
Assumptions
- The new CDAP UI will likely be written in React
- The Hydrator and Tracker Extensions will remain in Angular 1.x
- The navigational experience, and security
- All requirements are deterministic based on security
Requirements
...
Checklist
- User stories documented(Todd)
- Requirements documented(Todd)
- Requirements Reviewed
- Mockups Built
- Design Built
- Design Accepted
User Stories
- As a CDAP User I want to be able to add new capabilities to the platform from a centralized repository. I want newly added capabilities to include calls for action in the UI for fast accessibility.
...
- As a CDAP User I want to be able to search on user and system tags, and filter the results based on additional criteria.
...
...
- As a CDAP User when I've built a search query that I like, I want to be able to bookmark this for repeatable viewing.
...
...
- As a CDAP User I would like a better step by step experience for creating
...
- an entity , that I can then use elsewhere in the platform. I want to be able to edit this
...
- entity in the future.
...
...
- As a CDAP User I want to be able to view entities in the platform as either "card/tile" or in a list format and drill into those entities quickly based on further actions available to those entities.
...
- As a CDAP User I would like insights into: Live Info, Container Info, Underlying system info for the platform and be able to navigate to those quickly.
...
- As a CDAP User I want to be able to
...
- update metadata from the UI.
...
...
- As a CDAP User I want to be able to
...
- manage my artifacts from the UI.
...
...
...
- As a CDAP User I want to be able to configure/map/manage namespaces from the UI.
...
- As a CDAP User I want to be able to manage secure keys from the UI.
Requirements
General
- The CDAP UI should be configurable, in the build process to include specific features like a splash screen or to not include.
...
User interaction and design
Mockups are forthcoming
Questions
Below is a list of questions to be addressed as a result of this requirements document:
| Question | Outcome |
|---|---|
| How will we manage state between multiple front end frameworks? | |
| How will we manage security between multiple front end frameworks? | |
| What is the "default" view when looking at resources? Tile view/resource center? | |
| Should a tooltip style tutorial be enabled for "first time" log into CDAP? |
Not Doing
- Not migrating existing extensions to a new framework
- The CDAP UI should be responsive
Responsive Rules
- Responsive Breakpoints - Card View Design Should be responsive with the following breakpoints:
- Widescreen Desktop Landscape - min-width:1200px
- Maximum 4 user card columns, pagination
- Desktop Workspace - min-width:1024px
- Maximum 3 user card columns, pagination
- Small Desktop Workspace - min-width:768px
- Maximum 2 columns, pagination
- Compact device (large phone, small desktop window, tablet) - min-width:480px
- Maximum 1 column, 1 user cards on screen at once, pagination
- Widescreen Desktop Landscape - min-width:1200px
- Scrolling Behaviors
- Horizontal breakpoints for scrolling
- Row breakpoints at every 300 px
- All Cards should snap to grid during scrolling- no partial row displays or column displays during initial view.
- Scrolling should be exclusively vertical. (no horizontal scroll bars except on minimum compact device size breakpoint. No propagation of cards horizontally on resizing.
- Pagination will be used based on responsive rules for amount of cards per page.
- Horizontal breakpoints for scrolling
- Visibility behaviors
- Cards should appear/disappear per specific breakpoints on resizing
- Cards should reposition dynamically when responsive breakpoint is upsized (EG going from 768->1024)
- Cards should reposition and disappear when responsive breakpoint is downsized.
- Event Color Scheme and Icons
Event Class | Type | BG | HTML CODE | Text | HTML CODE | Icon |
button | Next > | blue | white | |||
button | < Back | white | black | |||
button | cancel | white | black | X | ||
alert banner | informational | Yellow | black | |||
alert banner | error | red | white | |||
alert banner | success | green | white | |||
alert banner | loading | gray | black |
Navigation
- The new UI should have a navigation bar that includes
- Current Context
- Current logged in Username
- Search
- Distributed or Standalone (SDK)
- Current Namespace and ability to switch based on permissions
Search
New CDAP UI should be Card Based navigation System.
Resource Center