From 5b8f8dff14f058f9b9422d40f849077dd1835a26 Mon Sep 17 00:00:00 2001 From: Timur Sufiev Date: Wed, 31 Dec 2014 07:53:49 -0800 Subject: [PATCH] Implement schema-driven Action layout rendering Make use of repeat-ng `track by` clause to avoid unnecessary DOM redraw by ng-repeat each time the scope changes. Change-Id: I8e2513c5aeabd8ec4bbf72ed025bd3d5da08f94d --- .../angular-templates/collapsible-group.html | 4 +- .../angular-templates/collapsible-panel.html | 4 +- .../angular-templates/fields/dictionary.html | 13 ++ .../angular-templates/fields/frozendict.html | 10 + .../js/angular-templates/fields/list.html | 12 ++ .../js/angular-templates/fields/string.html | 4 + .../js/angular-templates/fields/varlist.html | 64 ++++++ .../mistral/static/mistral/js/controllers.js | 178 +++++++++++------ .../mistral/static/mistral/js/directives.js | 28 ++- .../mistral/templates/mistral/create.html | 185 +++--------------- 10 files changed, 277 insertions(+), 225 deletions(-) create mode 100644 extensions/mistral/static/mistral/js/angular-templates/fields/dictionary.html create mode 100644 extensions/mistral/static/mistral/js/angular-templates/fields/frozendict.html create mode 100644 extensions/mistral/static/mistral/js/angular-templates/fields/list.html create mode 100644 extensions/mistral/static/mistral/js/angular-templates/fields/string.html create mode 100644 extensions/mistral/static/mistral/js/angular-templates/fields/varlist.html diff --git a/extensions/mistral/static/mistral/js/angular-templates/collapsible-group.html b/extensions/mistral/static/mistral/js/angular-templates/collapsible-group.html index 750985d..2d20ca2 100644 --- a/extensions/mistral/static/mistral/js/angular-templates/collapsible-group.html +++ b/extensions/mistral/static/mistral/js/angular-templates/collapsible-group.html @@ -1,7 +1,7 @@
-
{$ groupTitle $}
+
{$ title $}
@@ -10,6 +10,6 @@
-
+
\ No newline at end of file diff --git a/extensions/mistral/static/mistral/js/angular-templates/collapsible-panel.html b/extensions/mistral/static/mistral/js/angular-templates/collapsible-panel.html index 33e4c48..5543a8b 100644 --- a/extensions/mistral/static/mistral/js/angular-templates/collapsible-panel.html +++ b/extensions/mistral/static/mistral/js/angular-templates/collapsible-panel.html @@ -1,10 +1,10 @@

- {$ panelTitle $} + {$ title $}

-
+
diff --git a/extensions/mistral/static/mistral/js/angular-templates/fields/dictionary.html b/extensions/mistral/static/mistral/js/angular-templates/fields/dictionary.html new file mode 100644 index 0000000..f8a24d6 --- /dev/null +++ b/extensions/mistral/static/mistral/js/angular-templates/fields/dictionary.html @@ -0,0 +1,13 @@ +
+
+
+ +
+ + +
+
+
+
diff --git a/extensions/mistral/static/mistral/js/angular-templates/fields/frozendict.html b/extensions/mistral/static/mistral/js/angular-templates/fields/frozendict.html new file mode 100644 index 0000000..857d92b --- /dev/null +++ b/extensions/mistral/static/mistral/js/angular-templates/fields/frozendict.html @@ -0,0 +1,10 @@ + +
+
+
+ + +
+
+
+ diff --git a/extensions/mistral/static/mistral/js/angular-templates/fields/list.html b/extensions/mistral/static/mistral/js/angular-templates/fields/list.html new file mode 100644 index 0000000..0134a02 --- /dev/null +++ b/extensions/mistral/static/mistral/js/angular-templates/fields/list.html @@ -0,0 +1,12 @@ + +
+
+
+
+ + +
+
+
+
+ diff --git a/extensions/mistral/static/mistral/js/angular-templates/fields/string.html b/extensions/mistral/static/mistral/js/angular-templates/fields/string.html new file mode 100644 index 0000000..e6b1ded --- /dev/null +++ b/extensions/mistral/static/mistral/js/angular-templates/fields/string.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/extensions/mistral/static/mistral/js/angular-templates/fields/varlist.html b/extensions/mistral/static/mistral/js/angular-templates/fields/varlist.html new file mode 100644 index 0000000..ede2ee0 --- /dev/null +++ b/extensions/mistral/static/mistral/js/angular-templates/fields/varlist.html @@ -0,0 +1,64 @@ + +
+
+
+ + +
+
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+ +
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+
+ +
+ + +
+
+
+
+ +
+
+
+ +
+
+ diff --git a/extensions/mistral/static/mistral/js/controllers.js b/extensions/mistral/static/mistral/js/controllers.js index 286fe9e..6600339 100644 --- a/extensions/mistral/static/mistral/js/controllers.js +++ b/extensions/mistral/static/mistral/js/controllers.js @@ -5,63 +5,131 @@ (function() { angular.module('hz') - .controller('actionsCtrl', function($scope) { - $scope.actions = [ - [{ - name: 'Name', - type: 'string', - value: 'Action1' - }, { - name: 'Base', - type: 'string', - value: 'nova.create_server' - }, { - name: 'Base Input', - type: 'fixedlist' - }, { - name: 'Input', - type: 'list', - value: [{ - type: 'string', - value: '' - }] - }, { - name: 'Output', - type: 'varlist', - value: [{ - type: 'string', - value: '' - }, { - type: 'dictionary', - value: [{ - name: 'key1', - type: 'string', - value: '' - }, { - name: 'key2', - type: 'string', - value: '' - }] - }, { - type: 'list', - value: [{ - type: 'string', - value: '' - }, { - type: 'string', - value: '' - }] - }] - }]]; + .controller('workbookCtrl', function($scope, idGenerator) { + $scope.idGenerator = idGenerator; - $scope.baseTypes = { - 'nova.create_server': [{ - name: 'Flavor Id', - type: 'string' + $scope.data = { + actions: [{ + id: 'action1', + name: 'Action1', + base: 'nova.create_server', + baseInput: { + flavorId: { + title: 'Flavor Id', + type: 'string' + }, + imageId: { + title: 'Image Id', + type: 'string' + } + }, + input: [''], + output: [{ + id: 'varlist1', + type: 'string', + value: '' + }, { + id: 'varlist2', + type: 'dictionary', + value: { + key1: '', + key2: '' + } + }, { + id: 'varlist3', + type: 'list', + value: ['', ''] + }] + } + ] + }; + + $scope.schema = { + action: [{ + name: 'name', + type: 'string', + group: 'one' }, { - name: 'Image Id', - type: 'string' - }] + name: 'base', + type: 'string', + group: 'one' + }, { + name: 'baseInput', + type: 'frozendict', + group: '' + }, { + name: 'input', + type: 'list', + group: '' + }, { + name: 'output', + type: 'varlist', + group: '' + } + ] + }; + + $scope.makeTitle = function(str) { + if ( !str ) { + return ''; + } + var firstLetter = str.substr(0, 1).toUpperCase(); + return firstLetter + str.substr(1); + }; + + $scope.getKeys = function(obj) { + return Object.keys(obj); + }; + + $scope.isAtomic = function(type) { + return ['string'].indexOf(type) > -1; + } + + }) + + .controller('actionCtrl', function($scope) { + $scope.fixedFields = [['name', 'base']]; + $scope.fields = ['baseInput', 'input', 'output']; + + var actionBase = null, + baseTypes = { + 'nova.create_server': { + flavorId: { + title: 'Flavor Id', + type: 'string' + }, + imageId: { + title: 'Image Id', + type: 'string' + } + } + }; + + + + //$scope.getBaseInput = function() { + // return baseTypes[actionBase] || []; + //}; + // + //$scope.updateBase = function(newBase) { + // actionBase = newBase; + // var values = []; + // angular.forEach($scope.getBaseInput(), function(item) { + // values.push(item.value || ''); + // }); + // $scope.item.baseInput.value = values; + //} + }) + + .controller('dictionaryCtrl', function($scope) { + if ( !$scope.item.value ) { + $scope.item.value = {'Key1': ''}; + } + }) + + .controller('listCtrl', function($scope) { + if ( !$scope.item.value ) { + $scope.item.value = ['']; } }) diff --git a/extensions/mistral/static/mistral/js/directives.js b/extensions/mistral/static/mistral/js/directives.js index 5cbc7ea..c32cbb1 100644 --- a/extensions/mistral/static/mistral/js/directives.js +++ b/extensions/mistral/static/mistral/js/directives.js @@ -19,7 +19,7 @@ templateUrl: '/static/mistral/js/angular-templates/editable-popup.html', scope: { label: '@', - value: '@' + value: '=' }, link: function(scope, element) { angular.element(element).find('a[data-toggle="popover"]') @@ -73,14 +73,14 @@ templateUrl: '/static/mistral/js/angular-templates/collapsible-panel.html', transclude: true, scope: { - panelTitle: '@', + title: '@', removable: '@' }, compile: function(element, attrs) { defaultSetter(attrs, 'removable', false); return { - post: function(scope, element) { - scope.panelId = idGenerator(); + post: function(scope, element, attrs) { + scope.id = idGenerator(); disableClickDefaultBehaviour(element); } } @@ -94,7 +94,7 @@ templateUrl: '/static/mistral/js/angular-templates/collapsible-group.html', transclude: true, scope: { - groupTitle: '@', + title: '@', additive: '@', removable: '@' }, @@ -103,7 +103,7 @@ defaultSetter(attrs, 'additive', false); return { post: function(scope, element) { - scope.groupId = idGenerator(); + scope.id = idGenerator(); disableClickDefaultBehaviour(element); } } @@ -111,4 +111,20 @@ } }) + .directive('typedField', function($http, $templateCache, $compile, idGenerator) { + return { + restrict: 'E', + scope: true, + link: function(scope, element, attrs) { + scope.id = idGenerator(); + $http.get( + '/static/mistral/js/angular-templates/fields/' + scope.spec.type + '.html', + {cache: $templateCache}).success(function(templateContent) { + element.replaceWith($compile(templateContent)(scope)); + }); + } + } + }) + + })(); diff --git a/extensions/mistral/templates/mistral/create.html b/extensions/mistral/templates/mistral/create.html index 03b5d19..2c82a90 100644 --- a/extensions/mistral/templates/mistral/create.html +++ b/extensions/mistral/templates/mistral/create.html @@ -27,7 +27,7 @@ {% block main %}

Create Workbook

-
+
@@ -71,155 +71,20 @@
-
- - -
-
-
- - -
-
-
-
- - -
+ +
+
+
+ +
- - -
-
-
- - -
-
- - -
-
-
- - - -
-
-
-
- - -
-
-
-
- - - - -
-
-
- - -
-
-
-
- - -
-
-
- -
-
-
-
- - -
-
-
-
- -
- - -
-
-
-
-
-
-
-
- -
- - -
-
-
-
- -
-
-
- -
-
-
-
- - -
-
-
- -
- - -
-
-
-
-
-
-
- - -
-
-
- -
-
-
- - -
+
+
- +
@@ -239,7 +104,7 @@
- +
@@ -252,7 +117,7 @@
- +
@@ -273,21 +138,21 @@
- - + + - + - + - - + +
@@ -315,7 +180,7 @@
- +
@@ -330,7 +195,7 @@
- +
@@ -345,16 +210,16 @@
- + - + - + - +