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.

Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny

816 views

Published on

The UI, while fullty-features, is intimidating to new users. The roadmap for the UI is to make it more intuitive and navigable for new users.

For more on ManageIQ, see http://manageiq.org/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny

  1. 1. UI Directions
  2. 2. UI Project Areas ● Product Features ● New Technologies ● Integrations ● Refactoring/Rewrites ● Javascript Controls
  3. 3. Product Features ● Automate Enhancements ● Storage UI ● Internationalization (I18N)
  4. 4. Automate Enhancements Completed: ● Domain support ● Copy/rename Classes/Instances/Methods ● Method (code) editor updated to full width and scrolling ● Import/Export - select by Namespace Coming: ● Import/Export - select by Class ● Change automate URIs to allow relative or full path ● Ideas/suggestions?
  5. 5. Storage UI ● Resurrect hidden Storage tab (NetApp) w/fixes (done) ● Rework the UI to include other types, such as EMC, Hitatchi, HP, etc. ● Will require some re-design as there are a lot of overlapping concepts, but details will be specific to certain storage types
  6. 6. New Technologies ● Converting all views to HAML ● Use SASS for stylesheets ● Using PatternFly for consistency and responsive design ● Using angular.js to replace Rails RJS ● Replacing custom VNC plugin w/noVNC
  7. 7. Integrations ● Red Hat Access as a UI plugin o Downstream only o Will be the first UI plugin prototype (for up/down upstream) ● Foreman ● Others?
  8. 8. Refactoring / Rewrites ● Reporting UI ● Layouts o Replace DHTMLX layouts with responsive CSS o Get to a single, reusable layout structure ● UI using REST API ● Remove/replace Prototype with jQuery ● General code clean up: service objects, presenters, helpers, model methods, etc
  9. 9. Javascript Controls ● DHTMLX o Layouts, Accordions, Menus, Toolbars, Calendars, Combo, Grid o Currently only using controls available in the open source version, but would still like to get away from the GPL V2 license o Layouts are top priority, as they are very restrictive and sometimes difficult to work with ● Upgrade trees from Dynatree to Fancytree ● Bring jqPlot chart support (upstream) up to parity with flash charts (product) o Drill down and interactivity is not currently available upstream o Styling improvements
  10. 10. I18n
  11. 11. I18n ● Choice of tools: Gettext vs. Rails I18n ● Programming work to be done ○ Dependencies ○ Conversions ○ Find translatable strings (views, controllers, models, javascript…) ● Workflow changes ○ Programming ○ Release engineering
  12. 12. I18n Examples: usage _('Car') == 'Auto' _('not-found') == 'not-found' s_('Namespace|not-found') == 'not-found' n_('Axis','Axis',3) == 'Achsen' #German plural of Axis _('Hello %{name}!') % {:name => "Pete"} == 'Hello Pete!' d_("domainname", "string") D_("string") # finds 'string' in any domain
  13. 13. I18n Examples: rake tasks rake gettext:find rake gettext:store_model_attributes
  14. 14. I18n of ManageIQ: specialities ● Dictionary class ● Productization ● Build automation ● Pre-generated content
  15. 15. I18n: Zanata - Cooperation with translators ● Command line tools https://github.com/zanata/zanata-python-client ● Build process integration zanata version create zanata publican push zanata publican pull
  16. 16. Red Hat Access Integration ● What it is? ● Integration library https://github.com/redhataccess/redhat_access_angular_ui ● Existing Rails project: Foreman plugin https://github.com/redhataccess/foreman-plugin
  17. 17. Angular introduction - some basics
  18. 18. Previous jQuery version # haml .container .shown-from-the-start .hidden-from-the-start %button.input-class Toggle # js $(‘.hidden-from-the-start’).hide(); // Or CSS $(‘.input-class’).click(function() { if ($(‘.shown-from-the-start’).is(‘:visible’)) { $(‘.shown-from-the-start’).hide(); $(‘.hidden-from-the-start’).show(); } else { $(‘.shown-from-the-start’).show(); $(‘.hidden-from-the-start’).hide(); } });
  19. 19. Basic Angular version # haml .container(ng-controller=”testController”) .shown-from-the-start(ng-show=”someMethod()”) .hidden-from-the-start(ng-hide=”someMethod()”) %button(ng-click=”toggleFormState()”) Toggle # js controller(‘testController’, [‘$scope’, function($scope) { $scope.someMethod = function() { return $scope.formState; }; $scope.toggleFormState = function() { $scope.formState = !$scope.formState; }; // Initialization stuff $scope.formState = true; }]);
  20. 20. ng-switch # haml .container(ng-controller=”testController”) .inner-container(ng-switch on=”type”) .one(ng-switch-when=”type1”) .two(ng-switch-when=”type2”) .three(ng-switch-when=”type3”) .four(ng-switch-when=”type4”) # js controller(‘testController’, [function() { $scope.type = ‘type2’; }]);
  21. 21. ng-model # haml .some-table %input.name(ng-model=”name”) %input.address(ng-model=”address”) %input.favorite-color(ng-model=”favoriteColor”) %button.submit-button(ng-click=”submitIt()”) # js $scope.submitIt = function() { var theData = { name: $scope.name, address: $scope.address }; $http.post(‘/the_url’, theData).success(function() { console.log(‘hooray!’); }); };
  22. 22. ng-model with ng-switch # haml .some-table .container(ng-switch on=”favoriteColorShade”) %select(ng-model=”favoriteColorShade”) %option Light %option Dark .one(ng-switch-when=”Light”) %input(type=”radio”) Yellow %input(type=”radio”) Orange %input(type=”radio”) Pink .two(ng-switch-when=”Dark”) %input(type=”radio”) Brick Red %input(type=”radio”) Brown %input(type=”radio”) Navy
  23. 23. ng-change # haml .some-table .container(ng-switch on=”favoriteColorShade”) %select(ng-change=”getColorOptions()”) %option Light %option Dark %select(ng-options=”color.name for color in colorList”) # js $scope.getColorOptions = function() { $scope.colorList = []; if ($scope.favoriteColorShade === ‘Light’) { $scope.colorList.push({name: ‘yellow’}); $scope.colorList.push({name: ‘orange’}); $scope.colorList.push({name: ‘pink’}); } else { $scope.colorList.push({name: ‘brick red’}); $scope.colorList.push({name: ‘brown’}); $scope.colorList.push({name: ‘blue’}); } };
  24. 24. ng-change
  25. 25. Bindings {{, }} # haml .some-table .message {{message}} %input.name(ng-model=”name”) %input.address(ng-model=”address”) %input.favorite-color(ng-model=”favoriteColor”) %button.submit-button(ng-click=”submitIt()”) # js $scope.submitIt = function() { var theData = { name: $scope.name, address: $scope.address }; $http.post(‘/the_url’, theData).success(function() { $scope.message = ‘Your favorite color is blue now!’; $scope.favoriteColor = ‘blue’; }); };
  26. 26. Bindings {{, }} # haml .some-table .message {{messageMethod}} %input.name(ng-model=”name”) # js $scope.messageMethod = function() { if ($scope.name === ‘Erik’) { return ‘Hello World!’; } else { return ‘Greetings World!’; }; };
  27. 27. Services # js - service angularApp.service(‘myCoolService’, function() { this.doSomethingCool = function() { // does something cool }; }); # js - controller controller(‘testController’, [‘$http’, ‘$scope’, ‘myCoolService’, function($http, $scope, myCoolService) { $scope.submitIt = function() { myCoolService.doSomethingCool(); // Now do the boring stuff like submitting // which still uses a service. $http.post(‘/the_url’, {}).success(function() { console.log(‘hooray!’); }); }; }]);
  28. 28. Styling, Layouts, and other fun stuff
  29. 29. Red Hat Common User Experience (RCUE) “... created to promote design commonality and improved user experience across enterprise IT products and applications.”
  30. 30. Patternfly
  31. 31. Patternfly (Implemented)
  32. 32. Patternfly Glyphicons ● based on FontAwesome, IcoMoon, Bootstrap and Custom-made glyphicons ● two dimensional and monochromatic ● vector-based ● styled with css
  33. 33. Fancytree (sequel of DynaTree 1.x) 'glyph' extension for scalable vector icons
  34. 34. Patternfly (future)
  35. 35. Patternfly Grid System (Responsive layout)
  36. 36. Layout Challenges
  37. 37. Old layout - HTML Fixed Width Flexible Width
  38. 38. Flexible Width Fixed Width Old layout - HTML
  39. 39. DHTMLX Explorer Layout
  40. 40. DHTMLX Explorer Outer Layout A B C
  41. 41. DHTMLX Explorer Center Layout A B
  42. 42. DHTMLX Explorer Right Cell Layout A B C
  43. 43. Column 1 Column 2 Column 3 Widget 1 Widget 2 Widget 3 Widget 1 Widget 1 Widget 2 Current Dashboard Configuration
  44. 44. 1600px-
  45. 45. 1280-1600px
  46. 46. - 1024px
  47. 47. - 1024px Navigation Dropdown
  48. 48. Fun Stuff
  49. 49. Thumbnails in Single Quadrant Mode (Heat Map)
  50. 50. Grouped by Region
  51. 51. Configurable Thumbnails
  52. 52. Questions?

×