design summit - ui roadmap - dan clarizio, martin povolny
DESCRIPTION
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/TRANSCRIPT
![Page 1: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/1.jpg)
UI Directions
![Page 2: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/2.jpg)
UI Project Areas
● Product Features● New Technologies● Integrations● Refactoring/Rewrites● Javascript Controls
![Page 3: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/3.jpg)
Product Features
● Automate Enhancements● Storage UI● Internationalization (I18N)
![Page 4: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/4.jpg)
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?
![Page 5: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/5.jpg)
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
![Page 6: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/6.jpg)
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
![Page 7: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/7.jpg)
Integrations
● Red Hat Access as a UI plugino Downstream onlyo Will be the first UI plugin prototype (for up/down
upstream)● Foreman● Others?
![Page 8: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/8.jpg)
Refactoring / Rewrites
● Reporting UI● Layouts
o Replace DHTMLX layouts with responsive CSSo 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
![Page 9: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/9.jpg)
Javascript Controls
● DHTMLXo Layouts, Accordions, Menus, Toolbars, Calendars, Combo, Grido Currently only using controls available in the open source version, but
would still like to get away from the GPL V2 licenseo 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 upstreamo Styling improvements
![Page 10: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/10.jpg)
I18n
![Page 11: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/11.jpg)
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
![Page 12: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/12.jpg)
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
![Page 13: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/13.jpg)
rake gettext:find
rake gettext:store_model_attributes
I18n Examples: rake tasks
![Page 14: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/14.jpg)
● Dictionary class
● Productization
● Build automation
● Pre-generated content
I18n of ManageIQ: specialities
![Page 15: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/15.jpg)
● Command line toolshttps://github.com/zanata/zanata-python-client
● Build process integration
zanata version createzanata publican pushzanata publican pull
I18n: Zanata - Cooperation with translators
![Page 16: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/16.jpg)
● What it is?
● Integration library
https://github.com/redhataccess/redhat_access_angular_ui
● Existing Rails project: Foreman plugin
https://github.com/redhataccess/foreman-plugin
Red Hat Access Integration
![Page 17: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/17.jpg)
Angular introduction - some basics
![Page 18: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/18.jpg)
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(); }});
![Page 19: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/19.jpg)
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;}]);
![Page 20: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/20.jpg)
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’;}]);
![Page 21: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/21.jpg)
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!’); });};
![Page 22: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/22.jpg)
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
![Page 23: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/23.jpg)
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’}); }};
![Page 24: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/24.jpg)
ng-change
![Page 25: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/25.jpg)
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’; });};
![Page 26: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/26.jpg)
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!’; };};
![Page 27: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/27.jpg)
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!’); }); };}]);
![Page 28: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/28.jpg)
Styling, Layouts, and other fun stuff
![Page 29: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/29.jpg)
![Page 30: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/30.jpg)
“... created to promote design commonality and improved user experience across enterprise IT products and applications.”
Red Hat Common User Experience (RCUE)
![Page 31: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/31.jpg)
Patternfly
![Page 32: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/32.jpg)
Patternfly (Implemented)
![Page 33: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/33.jpg)
Patternfly Glyphicons
● based on FontAwesome, IcoMoon, Bootstrap and Custom-made glyphicons ● two dimensional and monochromatic● vector-based● styled with css
![Page 34: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/34.jpg)
Fancytree (sequel of DynaTree 1.x) 'glyph' extension for scalable vector icons
![Page 35: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/35.jpg)
Patternfly (future)
![Page 36: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/36.jpg)
Patternfly Grid System (Responsive layout)
![Page 37: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/37.jpg)
LayoutChallenges
![Page 38: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/38.jpg)
Old layout - HTML
FixedWidth
Flexible Width
![Page 39: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/39.jpg)
Flexible WidthFixedWidth
Old layout - HTML
![Page 40: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/40.jpg)
DHTMLX Explorer Layout
![Page 41: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/41.jpg)
DHTMLX Explorer Outer Layout
A
B
C
![Page 42: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/42.jpg)
DHTMLX Explorer Center Layout
BA
![Page 43: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/43.jpg)
DHTMLX Explorer Right Cell Layout
A
B
C
![Page 44: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/44.jpg)
Column 1 Column 2 Column 3
Widget 1
Widget 2
Widget 3
Widget 1 Widget 1
Widget 2
Current Dashboard Configuration
![Page 45: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/45.jpg)
1600px-
![Page 46: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/46.jpg)
1280-1600px
![Page 47: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/47.jpg)
- 1024px
![Page 48: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/48.jpg)
- 1024px Navigation Dropdown
![Page 49: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/49.jpg)
Fun Stuff
![Page 50: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/50.jpg)
Thumbnails in Single Quadrant Mode (Heat Map)
![Page 51: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/51.jpg)
Grouped by Region
![Page 52: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/52.jpg)
Configurable Thumbnails
![Page 53: Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny](https://reader033.vdocuments.mx/reader033/viewer/2022060117/5585a497d8b42ae22a8b4839/html5/thumbnails/53.jpg)
Questions?