This document summarizes past and planned UI improvements for an application. It discusses replacing several third-party UI components with Patternfly components to improve consistency. Past improvements included updating login screens, modals, file uploads, and navigation. Planned improvements involve moving settings to headers, updating time pickers, search/filtering, and adding new chart types. Demos showed a service designer for authoring blueprints and a dialog editor. The discussion covered getting feedback on future concepts.

1. UI Improvements
Dan Clarizio / Eric Winchell
With guests - Serena Doyle & Roman Blanco

2. Agenda
Past Improvements
Future Improvements / Conceptual Designs
Demos: Service Designer / Dialog Editor
Discussion

3. Past Improvements
DHTMLX 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.

4. DHTMLX Toolbar => PF Toolbar
New
Old

5. DHTMLX Grid => PF Table View
New
Old

6. DHTMLX Accordions => PF Panels
NewOld

7. DHTMLX Datepicker => Bootstrap-datepicker
NewOld

8. DHTMLX Combo => Bootstrap Select
New
Old
● multi-select
● images
● live search (future enhancement)

9. DHTMLX & HTML Layouts => Bootstrap grid system
● responsive
● ‘mobile first’
● Up to 12 columns

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

11. jQuery UI Tabs => Patternfly Tabs
New
Old

12. SlickGrid => PF TreeGrid Table
New
New

13. Ziya Flash charts => PF C3 charts
Flash C3
Darga C3 PatternFly Styles
E+ PatternFly Angular chart directives

14. PF Login Screen
corner images, solid background

15. PF Login Screen (legacy)

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

17. Pop-ups => PF Modals

18. Custom file upload => Bootstrap Filestyle
Old
New
● Attractive file field styling for forms
● Browser agnostic

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

20. Main Dashboard - PF Cards w/ action dropdown
New
Old

21. 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

22. Angular Forms

23. 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 800
Goal: 0

24. PF Vertical Navigation w/ Tertiary
Old
New
● Reorganized menu
hierarchy
● Toggles between ‘icon
only’ & ‘icon with text’ using
hamburger
● 2nd and 3rd level can be
pinned

25. Container-level Dashboard

26. Future Improvements / Conceptual Designs
Move Settings to header
Dynatree to Bootstrap Tree View
Bootstrap Time Picker
Search and Filtering
Table View - configurable columns
Timelines
Editable Dashboards
Object-level Dashboard
Object-level Topology
Heat Map View
New chart types
PF ‘About’ Modal
PF Wizards
Notification drawer

27. Move Settings to Header

28. Dynatree to Bootstrap Tree View

29. Bootstrap Time Picker
Old
New

30. Current Dashboard Layout

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

32. Object-level Topology

33. Heat Map View Concept

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

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

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

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

38. 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

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

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

41. New PF chart types
Sparkline
Heat Map
Timeline?
Area Chart
Utilization Bar Chart

42. New PF chart types
Utilization BarsUtilization Trend Utilization Trend
Color of utilization charts change based on thresholds

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

44. 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

45. PF Notification Drawer
● Delivers events, tasks, and alerts
● Accessible from any screen
● Toast Notifications at login
● Notification Drawer expands by
clicking the bell icon

46. 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

47. Service Designer Demo
Serena Doyle

48. Service Designer
New 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

49. Service Designer - Demo-able Features
● View Blueprints
● Create Service Bundle
● Save Blueprint
● Publish Blueprint
● Canvas Item CRUD
● Delete Blueprint

50. Service Designer - Upcoming Features
● Create Service Item
● Edit Service Item
○ PatternFly Wizard

51. Service Designer - Upcoming Features
● Set & Edit Provision Order
● Set & Edit Action Order
○ Featuring drag and drop

52. Service Designer - Upcoming Features
● Duplicate Blueprint
● Blueprint Versioning
● Dashboard Changes
● Costs per Item
● Canvas Cost
● Resourceless Services

53. Dialog Editor Demo
Roman Blanco

54. Discussion