ui improvements - dan clarizio, eric winchell - manageiq design summit 2016
TRANSCRIPT
![Page 1: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/1.jpg)
UI ImprovementsDan Clarizio / Eric WinchellWith guests - Serena Doyle & Roman Blanco
![Page 2: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/2.jpg)
AgendaPast Improvements
Future Improvements / Conceptual Designs
Demos: Service Designer / Dialog Editor
Discussion
![Page 3: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/3.jpg)
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.
![Page 4: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/4.jpg)
DHTMLX Toolbar => PF Toolbar
New
Old
![Page 5: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/5.jpg)
DHTMLX Grid => PF Table View
New
Old
![Page 6: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/6.jpg)
DHTMLX Accordions => PF PanelsNewOld
![Page 7: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/7.jpg)
DHTMLX Datepicker => Bootstrap-datepicker
NewOld
![Page 8: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/8.jpg)
DHTMLX Combo => Bootstrap Select
New
Old
● multi-select● images● live search (future enhancement)
![Page 9: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/9.jpg)
DHTMLX & HTML Layouts => Bootstrap grid system
● responsive● ‘mobile first’● Up to 12 columns
![Page 10: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/10.jpg)
Layout Resizer5 positions:● 0-12 (collapsed)● 2-10● 3-7● 4-8● 5-7
![Page 11: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/11.jpg)
jQuery UI Tabs => Patternfly Tabs
New
Old
![Page 12: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/12.jpg)
SlickGrid => PF TreeGrid Table
New
New
![Page 13: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/13.jpg)
Ziya Flash charts => PF C3 charts
Flash C3
Darga C3 PatternFly StylesE+ PatternFly Angular chart directives
![Page 14: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/14.jpg)
PF Login Screen corner images, solid background
![Page 15: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/15.jpg)
PF Login Screen (legacy)
![Page 16: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/16.jpg)
PF Login Screen (legacy)● scaled PNG file (1280x1000)
![Page 17: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/17.jpg)
Pop-ups => PF Modals
![Page 18: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/18.jpg)
Custom file upload => Bootstrap Filestyle
Old
New
● Attractive file field styling for forms● Browser agnostic
![Page 19: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/19.jpg)
Checkboxes => Bootstrap Switch● turns checkboxes and radio buttons in toggle switches● Optimal for touch-based devices
Old
New
![Page 20: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/20.jpg)
Main Dashboard - PF Cards w/ action dropdown
NewOld
![Page 21: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/21.jpg)
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
![Page 22: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/22.jpg)
Angular Forms
![Page 23: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/23.jpg)
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
![Page 24: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/24.jpg)
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
![Page 25: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/25.jpg)
Container-level Dashboard
![Page 26: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/26.jpg)
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
![Page 27: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/27.jpg)
Move Settings to Header
![Page 28: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/28.jpg)
Dynatree to Bootstrap Tree View
![Page 29: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/29.jpg)
Bootstrap Time Picker
Old
New
![Page 30: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/30.jpg)
Current Dashboard Layout
![Page 31: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/31.jpg)
Editable Dashboard (research phase)● Work in progress ...● Drag and drop● Multiple shapes
![Page 32: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/32.jpg)
Object-level Topology
![Page 33: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/33.jpg)
Heat Map View Concept
![Page 34: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/34.jpg)
Quad Icon Redesign ● Work in progress ...● Moving towards a flatter design
Current
WIP
![Page 35: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/35.jpg)
PF Table View with configurable columns● Saved per table● Hide● Show● Reorder● Resize
![Page 36: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/36.jpg)
PF List View ● Minimalist design● Action buttons and menus● Simple & compound expansions
![Page 37: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/37.jpg)
Object-level Dashboards E+● VM Provider● RHEV Provider● VMs, etc
![Page 38: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/38.jpg)
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
![Page 39: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/39.jpg)
Timeline View
Work in progress ...● D3 based component● Replacement of current timeline view● Supports both SVG and fonts
![Page 40: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/40.jpg)
Timeline View - Zooming Work in progress ...● Investigating zooming interactions
![Page 41: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/41.jpg)
New PF chart types
Sparkline
Heat Map
Timeline?
Area Chart
Utilization Bar Chart
![Page 42: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/42.jpg)
New PF chart types
Utilization BarsUtilization Trend Utilization Trend
Color of utilization charts change based on thresholds
![Page 43: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/43.jpg)
‘About’ Modal ● Standardized product info● Provides consistency across Patternfly-based projects
![Page 44: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/44.jpg)
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
![Page 45: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/45.jpg)
PF Notification Drawer● Delivers events, tasks, and alerts● Accessible from any screen● Toast Notifications at login● Notification Drawer expands by
clicking the bell icon
![Page 46: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/46.jpg)
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
![Page 47: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/47.jpg)
Service Designer DemoSerena Doyle
![Page 48: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/48.jpg)
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
![Page 49: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/49.jpg)
Service Designer - Demo-able Features
● View Blueprints● Create Service Bundle● Save Blueprint● Publish Blueprint● Canvas Item CRUD● Delete Blueprint
![Page 50: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/50.jpg)
Service Designer - Upcoming Features
● Create Service Item● Edit Service Item
○ PatternFly Wizard
![Page 51: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/51.jpg)
Service Designer - Upcoming Features
● Set & Edit Provision Order● Set & Edit Action Order
○ Featuring drag and drop
![Page 52: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/52.jpg)
Service Designer - Upcoming Features
● Duplicate Blueprint ● Blueprint Versioning● Dashboard Changes● Costs per Item● Canvas Cost● Resourceless Services
![Page 53: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/53.jpg)
Dialog Editor DemoRoman Blanco
![Page 54: UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016](https://reader033.vdocument.in/reader033/viewer/2022051521/587097cd1a28ab412b8b6d21/html5/thumbnails/54.jpg)
Discussion