High Availability - Brett Thurber - ManageIQ Design Summit 2016
Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016
-
Upload
manageiq -
Category
Technology
-
view
289 -
download
2
Transcript of Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016
![Page 1: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/1.jpg)
The Self Service UIHarpreet Kataria and Erik Clarizio
![Page 2: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/2.jpg)
IntroductionsHarpreet Kataria
Email: [email protected]
Github: h-kataria
Erik Clarizio
Email: [email protected]
Github: eclarizio
![Page 3: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/3.jpg)
AgendaSelf Service support in the Operations UI (Screenshots)
New Self-Service UI (Demo)
Dialogs (dynamic, etc) & Custom Button support in SSUI (Demo)
Futures (SDUI and Dialog Editor demos) (10 mins total)
![Page 4: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/4.jpg)
Services in Operations UIDialogs, Catalog Items, Catalogs (For Admins & users with privileges)
Service Catalogs
Ordering Services
Edit/Remove Services
Reconfigure
Retire
Set ownership
Tag Services
![Page 5: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/5.jpg)
Service Dialog - Summary
![Page 6: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/6.jpg)
Catalog Item - Summary
![Page 7: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/7.jpg)
Service Catalogs - Table view
![Page 8: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/8.jpg)
Service - Ordering a Service
![Page 9: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/9.jpg)
Service - Request details
![Page 10: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/10.jpg)
Services - Table view
![Page 11: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/11.jpg)
Service - Detail view
![Page 12: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/12.jpg)
Service - Edit/Remove
![Page 13: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/13.jpg)
Service - Reconfigure
![Page 14: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/14.jpg)
Service - Retire
![Page 15: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/15.jpg)
Service - Set Ownership
![Page 16: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/16.jpg)
Self-Service UINew UI Architecture
Design Goals
Patternfly/Bootstrap Styling
Dashboard
Remove/Edit Services
Retire
Reconfigure
Set Ownership
Shopping Cart (New feature)
Service Catalogs and ordering them
Dialogs and custom buttons
SSUI Demo
![Page 17: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/17.jpg)
SSUI: New UI Architecture & Design GoalsUsing AngularJS & REST vs AJAX & Ruby on Rails
All form validation and form change checking is being done on client side
No more round trips to server on each user interaction with form fields, making the user experience better and faster.
With Angular based forms, we no longer have to save large amounts of data in the session to be used back and forth during transactions
![Page 18: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/18.jpg)
Patternfly styling
Search filtering
List view sorting
![Page 19: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/19.jpg)
DashboardClickable links to items with their counts on the Dashboard as well as in left
navigation area
![Page 20: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/20.jpg)
Shopping CartMultiple Service Items can be added to shopping cart
Items stay available in the user’s shopping cart upon re-login
Items can be removed from the cart
Shopping cart can be cleared out (remove all items from cart)
![Page 21: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/21.jpg)
Requests - List viewMultiple requests generated for each item in shopping cart
![Page 22: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/22.jpg)
Self Service UI - Demo
![Page 23: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/23.jpg)
Dialogs (dynamic) & Custom Buttons OverviewDialogs with dynamically refreshing fields
Custom Buttons on services, which can also leverage dialogs
Demo
![Page 24: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/24.jpg)
Dynamic dialogsAll of the dialog types support the dynamic property
Fields can be set to trigger auto-refreshes and also listen to auto-refreshes
![Page 25: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/25.jpg)
Custom ButtonsCan be generic to all services or specific per service
Leverages dialogs
![Page 26: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/26.jpg)
SSUI - Dialog and Custom button demo
![Page 27: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/27.jpg)
Future - Service Designer and Dialog EditorOrder History
Wish List
Tagging support for Services
About Dialog
More Patternfly components (Kebab menus, wizards)
Service Designer
Dialog Editor
![Page 28: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016](https://reader035.fdocuments.us/reader035/viewer/2022062412/587097cd1a28ab412b8b6d1d/html5/thumbnails/28.jpg)
Q & A