Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016

602 views

Published on

ManageIQ UI Improvements by Dan Clarizio and Eric Winchell at ManageIQ Design Summit 2016

Dialog Editor demo: https://youtu.be/ikAshtnQG0o (by Roman Blanco)

Published in: Technology
  • Be the first to comment

UI Improvements - Dan Clarizio, Eric Winchell - ManageIQ Design Summit 2016

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

×