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