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/

1. UI Directions

2. UI Project Areas
● Product Features
● New Technologies
● Integrations
● Refactoring/Rewrites
● Javascript Controls

3. Product Features
● Automate Enhancements
● Storage UI
● Internationalization (I18N)

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. 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. 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. 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. 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. 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. I18n

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. 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. I18n Examples: rake tasks
rake gettext:find
rake gettext:store_model_attributes

14. I18n of ManageIQ: specialities
● Dictionary class
● Productization
● Build automation
● Pre-generated content

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. 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. Angular introduction - some basics

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. 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. 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. 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. 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. 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. ng-change

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. 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. 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. Styling, Layouts, and other fun stuff

30. Red Hat Common User Experience (RCUE)
“... created to promote design commonality
and improved user experience across
enterprise IT products and applications.”

31. Patternfly

32. Patternfly (Implemented)

33. Patternfly Glyphicons
● based on FontAwesome, IcoMoon, Bootstrap and Custom-made glyphicons
● two dimensional and monochromatic
● vector-based
● styled with css

34. Fancytree (sequel of DynaTree 1.x)
'glyph' extension for scalable vector icons

35. Patternfly (future)

36. Patternfly Grid System (Responsive layout)

37. Layout
Challenges

38. Old layout - HTML
Fixed
Width
Flexible Width

39. Flexible Width
Fixed
Width
Old layout - HTML

40. DHTMLX Explorer Layout

41. DHTMLX Explorer Outer Layout
A
B
C

42. DHTMLX Explorer Center Layout
A B

43. DHTMLX Explorer Right Cell Layout
A
B
C

44. Column 1 Column 2 Column 3
Widget 1
Widget 2
Widget 3
Widget 1 Widget 1
Widget 2
Current Dashboard Configuration

45. 1600px-

46. 1280-1600px

47. - 1024px

48. - 1024px Navigation Dropdown

49. Fun Stuff

50. Thumbnails in Single Quadrant Mode (Heat Map)

51. Grouped by Region

52. Configurable Thumbnails

53. Questions?