self-service ui - hapreet kataria, erik clarizio - manageiq design summit 2016

The Self Service UIHarpreet Kataria and Erik Clarizio

IntroductionsHarpreet Kataria

Email: hkataria@redhat.com

Github: h-kataria

Erik Clarizio

Email: eclarizi@redhat.com

Github: eclarizio

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)

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

Service Dialog - Summary

Catalog Item - Summary

Service Catalogs - Table view

Service - Ordering a Service

Service - Request details

Services - Table view

Service - Detail view

Service - Edit/Remove

Service - Reconfigure

Service - Retire

Service - Set Ownership

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

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

Patternfly styling

Search filtering

List view sorting

DashboardClickable links to items with their counts on the Dashboard as well as in left

navigation area

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)

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

Self Service UI - Demo

Dialogs (dynamic) & Custom Buttons OverviewDialogs with dynamically refreshing fields

Custom Buttons on services, which can also leverage dialogs

Demo

Dynamic dialogsAll of the dialog types support the dynamic property

Fields can be set to trigger auto-refreshes and also listen to auto-refreshes

Custom ButtonsCan be generic to all services or specific per service

Leverages dialogs

SSUI - Dialog and Custom button demo

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

Q & A