UI ImprovementsDan Clarizio / Eric WinchellWith guests - Serena Doyle & Roman Blanco

AgendaPast Improvements

Future Improvements / Conceptual Designs

Demos: Service Designer / Dialog Editor

Discussion

Past ImprovementsDHTMLX component replacements

● PF Toolbar● PF Table View ● PF Panels● Bootstrap-datepicker ● Bootstrap Select ● Bootstrap Grid system● Layout Resizer

Other library replacements● Jquery-UI Tabs to PF Tabs● SlickGrid to PF TreeGrid Table ● Ziya Flash Charts to PF C3 charts

Other Enhancements● Login Screen ● Modals (Search, Entry Point) ● Bootstrap Filestyle● Bootstrap Switch ● Dashboards - PF Cards & dropdown● Container Topology● Angular forms● Vector images● Vertical Navigation w/ Tertiary ● Container-level Dashboards

Patternfly (PF) is an open source UI framework for enterprise web applications, built on Bootstrap, and sponsored by Red Hat.

DHTMLX Toolbar => PF Toolbar

New

Old

DHTMLX Grid => PF Table View

New

Old

DHTMLX Accordions => PF PanelsNewOld

DHTMLX Datepicker => Bootstrap-datepicker

NewOld

DHTMLX Combo => Bootstrap Select

New

Old

● multi-select● images● live search (future enhancement)

DHTMLX & HTML Layouts => Bootstrap grid system

● responsive● ‘mobile first’● Up to 12 columns

Layout Resizer5 positions:● 0-12 (collapsed)● 2-10● 3-7● 4-8● 5-7

jQuery UI Tabs => Patternfly Tabs

New

Old

SlickGrid => PF TreeGrid Table

New

New

Ziya Flash charts => PF C3 charts

Flash C3

Darga C3 PatternFly StylesE+ PatternFly Angular chart directives

PF Login Screen corner images, solid background

PF Login Screen (legacy)

PF Login Screen (legacy)● scaled PNG file (1280x1000)

Pop-ups => PF Modals

Custom file upload => Bootstrap Filestyle

Old

New

● Attractive file field styling for forms● Browser agnostic

Checkboxes => Bootstrap Switch● turns checkboxes and radio buttons in toggle switches● Optimal for touch-based devices

Old

New

Main Dashboard - PF Cards w/ action dropdown

NewOld

Container Topology

● Interactive graph● Showing the status and relationships

between different objects● Object color indicates status● Double-clicking object navigates to its

summary screen● Hovering activates a pop-up with object

details● Legend shows and hides objects

Angular Forms

PNGS => Vector images (SVGs and font icons)Font icons

● Patternfly, Font Awesome, “Product” (MIQ specific)

● Vector-based● Monochrome

SVGs● Vector-based● Multi-color (vendors, OS, etc)

Current PNG Count: about 800Goal: 0

PF Vertical Navigation w/ TertiaryOld

New

● Reorganized menu hierarchy

● Toggles between ‘icon only’ & ‘icon with text’ using hamburger

● 2nd and 3rd level can be pinned

Container-level Dashboard

Future Improvements / Conceptual DesignsMove Settings to headerDynatree to Bootstrap Tree ViewBootstrap Time PickerSearch and FilteringTable View - configurable columnsTimelinesEditable DashboardsObject-level DashboardObject-level TopologyHeat Map ViewNew chart typesPF ‘About’ ModalPF WizardsNotification drawer

Move Settings to Header

Dynatree to Bootstrap Tree View

Bootstrap Time Picker

Old

New

Current Dashboard Layout

Editable Dashboard (research phase)● Work in progress ...● Drag and drop● Multiple shapes

Object-level Topology

Heat Map View Concept

Quad Icon Redesign ● Work in progress ...● Moving towards a flatter design

Current

WIP

PF Table View with configurable columns● Saved per table● Hide● Show● Reorder● Resize

PF List View ● Minimalist design● Action buttons and menus● Simple & compound expansions

Object-level Dashboards E+● VM Provider● RHEV Provider● VMs, etc

PF Toolbar (Searching & Filtering)

Configurable pattern which allows one or more of the following features● Simple filter● Sort● Action buttons● Search the dataset● Change view type

Timeline View

Work in progress ...● D3 based component● Replacement of current timeline view● Supports both SVG and fonts

Timeline View - Zooming Work in progress ...● Investigating zooming interactions

New PF chart types

Sparkline

Heat Map

Timeline?

Area Chart

Utilization Bar Chart

New PF chart types

Utilization BarsUtilization Trend Utilization Trend

Color of utilization charts change based on thresholds

‘About’ Modal ● Standardized product info● Provides consistency across Patternfly-based projects

PF Wizards● Useful when the user needs

to go through a sequential set of steps to complete a task

● Optional Summary Panel ● Optional Progress Panel with

‘in progress’ and completion states

● User can navigate by clicking Back/Next buttons OR by clicking on the steps in the steps panel

PF Notification Drawer● Delivers events, tasks, and alerts● Accessible from any screen● Toast Notifications at login● Notification Drawer expands by

clicking the bell icon

PF Notification Drawer● Drawer will consist of 2 trays:

tasks & events● Tasks tray

○ Progress bar is shown for running tasks

○ Tasks show time stamp and outcome of completion

● Events tray● Remove a notification from the

drawer by clicking on the x● Clear all events or tasks by

clicking ‘Clear All’ at the bottom of the appropriate area

Service Designer DemoSerena Doyle

Service DesignerNew role

Enables the user to author infrastructure and cloud blueprints to be deployed heterogeneously across clouds

Blueprints can be published to the Self Service Catalog for easy consumption

Blueprints can be exported and shared with other organizations, regions and teams

Features drag and drop orchestration as well as hybrid cloud blueprinting

Service Designer - Demo-able Features

● View Blueprints● Create Service Bundle● Save Blueprint● Publish Blueprint● Canvas Item CRUD● Delete Blueprint

Service Designer - Upcoming Features

● Create Service Item● Edit Service Item

○ PatternFly Wizard

Service Designer - Upcoming Features

● Set & Edit Provision Order● Set & Edit Action Order

○ Featuring drag and drop

Service Designer - Upcoming Features

● Duplicate Blueprint ● Blueprint Versioning● Dashboard Changes● Costs per Item● Canvas Cost● Resourceless Services

Dialog Editor DemoRoman Blanco

Discussion