Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

28
The Self Service UI Harpreet Kataria and Erik Clarizio

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

The Self Service UIHarpreet Kataria and Erik Clarizio

Page 2: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

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

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

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

Service Dialog - Summary

Page 6: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Catalog Item - Summary

Page 7: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Service Catalogs - Table view

Page 8: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Service - Ordering a Service

Page 9: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Service - Request details

Page 10: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Services - Table view

Page 11: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Service - Detail view

Page 12: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Service - Edit/Remove

Page 13: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Service - Reconfigure

Page 14: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Service - Retire

Page 15: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Service - Set Ownership

Page 16: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

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

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

Patternfly styling

Search filtering

List view sorting

Page 19: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

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

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

Requests - List viewMultiple requests generated for each item in shopping cart

Page 22: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

Self Service UI - Demo

Page 23: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

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

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

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

SSUI - Dialog and Custom button demo

Page 27: Self-Service UI - Hapreet Kataria, Erik Clarizio - ManageIQ Design Summit 2016

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

Q & A