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?