Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny
-
Upload
manageiq -
Category
Technology
-
view
257 -
download
3
description
Transcript of Design Summit - UI Roadmap - Dan Clarizio, Martin Povolny
UI Directions
UI Project Areas
● Product Features● New Technologies● Integrations● Refactoring/Rewrites● Javascript Controls
Product Features
● Automate Enhancements● Storage UI● Internationalization (I18N)
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?
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
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
Integrations
● Red Hat Access as a UI plugino Downstream onlyo Will be the first UI plugin prototype (for up/down
upstream)● Foreman● Others?
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
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
I18n
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
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
rake gettext:find
rake gettext:store_model_attributes
I18n Examples: rake tasks
● Dictionary class
● Productization
● Build automation
● Pre-generated content
I18n of ManageIQ: specialities
● Command line toolshttps://github.com/zanata/zanata-python-client
● Build process integration
zanata version createzanata publican pushzanata publican pull
I18n: Zanata - Cooperation with translators
● 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
Angular introduction - some basics
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(); }});
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;}]);
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’;}]);
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!’); });};
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
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’}); }};
ng-change
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’; });};
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!’; };};
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!’); }); };}]);
Styling, Layouts, and other fun stuff
“... created to promote design commonality and improved user experience across enterprise IT products and applications.”
Red Hat Common User Experience (RCUE)
Patternfly
Patternfly (Implemented)
Patternfly Glyphicons
● based on FontAwesome, IcoMoon, Bootstrap and Custom-made glyphicons ● two dimensional and monochromatic● vector-based● styled with css
Fancytree (sequel of DynaTree 1.x) 'glyph' extension for scalable vector icons
Patternfly (future)
Patternfly Grid System (Responsive layout)
LayoutChallenges
Old layout - HTML
FixedWidth
Flexible Width
Flexible WidthFixedWidth
Old layout - HTML
DHTMLX Explorer Layout
DHTMLX Explorer Outer Layout
A
B
C
DHTMLX Explorer Center Layout
BA
DHTMLX Explorer Right Cell Layout
A
B
C
Column 1 Column 2 Column 3
Widget 1
Widget 2
Widget 3
Widget 1 Widget 1
Widget 2
Current Dashboard Configuration
1600px-
1280-1600px
- 1024px
- 1024px Navigation Dropdown
Fun Stuff
Thumbnails in Single Quadrant Mode (Heat Map)
Grouped by Region
Configurable Thumbnails
Questions?