You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by ak...@apache.org on 2016/02/05 08:20:38 UTC

[2/5] ignite git commit: IGNITE-2451 - Fixes #457.

IGNITE-2451 - Fixes #457.

Signed-off-by: Alexey Kuznetsov <ak...@apache.org>


Project: http://git-wip-us.apache.org/repos/asf/ignite/repo
Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/1905ab31
Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/1905ab31
Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/1905ab31

Branch: refs/heads/ignite-843-rc2
Commit: 1905ab31ac41663b1ceb5b0bca7ab00cce7a18b8
Parents: 95ae53b
Author: Dmitriyff <dm...@gmail.com>
Authored: Fri Feb 5 10:44:51 2016 +0700
Committer: Alexey Kuznetsov <ak...@apache.org>
Committed: Fri Feb 5 10:44:51 2016 +0700

----------------------------------------------------------------------
 .../control-center-web/src/main/js/.eslintrc    |   4 +-
 .../ui-ace-docker/ui-ace-docker.controller.js   |   5 +-
 .../ui-ace-docker/ui-ace-docker.directive.js    |  12 +-
 .../ui-ace-java/ui-ace-java.controller.js       |  21 +-
 .../ui-ace-java/ui-ace-java.directive.js        |  79 +++++-
 .../app/directives/ui-ace-java/ui-ace-java.jade |   7 +-
 .../ui-ace-pojos/ui-ace-pojos.controller.js     |   5 +-
 .../ui-ace-pojos/ui-ace-pojos.directive.js      |  11 +-
 .../ui-ace-pom/ui-ace-pom.controller.js         |   5 +-
 .../ui-ace-pom/ui-ace-pom.directive.js          |  11 +-
 .../ui-ace-xml/ui-ace-xml.controller.js         |  20 +-
 .../ui-ace-xml/ui-ace-xml.directive.js          |  79 +++++-
 .../app/directives/ui-ace-xml/ui-ace-xml.jade   |   2 +-
 .../app/directives/ui-ace/ui-ace.directive.js   |  25 ++
 .../control-center-web/src/main/js/app/index.js |  30 ++-
 .../states/configuration/clusters/atomic.jade   |  16 +-
 .../states/configuration/clusters/binary.jade   |  16 +-
 .../configuration/clusters/communication.jade   |  16 +-
 .../configuration/clusters/connector.jade       |  16 +-
 .../configuration/clusters/deployment.jade      |  16 +-
 .../configuration/clusters/discovery.jade       |  16 +-
 .../states/configuration/clusters/events.jade   |  16 +-
 .../states/configuration/clusters/general.jade  |  16 +-
 .../states/configuration/clusters/igfs.jade     |  16 +-
 .../configuration/clusters/marshaller.jade      |  16 +-
 .../states/configuration/clusters/metrics.jade  |  18 +-
 .../clusters/preview-panel.directive.js         | 239 +++++++++++++++++++
 .../states/configuration/clusters/ssl.jade      |  16 +-
 .../states/configuration/clusters/swap.jade     |  16 +-
 .../states/configuration/clusters/thread.jade   |  16 +-
 .../states/configuration/clusters/time.jade     |  16 +-
 .../configuration/clusters/transactions.jade    |  21 +-
 .../app/modules/states/configuration/index.js   |   4 +
 .../summary/summary-tabs.directive.js           |  44 ++++
 .../js/app/services/Generator/Java.service.js   |  20 ++
 .../js/app/services/Generator/Xml.service.js    |  20 ++
 .../main/js/app/services/UiAceOnLoad/service.js |  36 ---
 .../control-center-web/src/main/js/config.js    |   1 +
 .../main/js/controllers/clusters-controller.js  | 119 +--------
 .../control-center-web/src/main/js/package.json |  26 +-
 .../main/js/views/configuration/summary.jade    |  38 +--
 41 files changed, 697 insertions(+), 429 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/.eslintrc
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/.eslintrc b/modules/control-center-web/src/main/js/.eslintrc
index be639ce..6d377ee 100644
--- a/modules/control-center-web/src/main/js/.eslintrc
+++ b/modules/control-center-web/src/main/js/.eslintrc
@@ -46,7 +46,7 @@ rules:
     consistent-this: [0, "that"]
     constructor-super: 2
     curly: [2, "multi-or-nest"]
-    default-case: 0
+    default-case: 2
     dot-location: 0
     dot-notation: [2, { "allowKeywords": true }]
     eol-last: 2
@@ -57,7 +57,7 @@ rules:
     guard-for-in: 1
     handle-callback-err: 0
     id-length: [2, {"min": 1, "max": 30}]
-    indent: 2
+    indent: [2, 4, {"SwitchCase": 1}]
     key-spacing: [2, { "beforeColon": false, "afterColon": true }]
     lines-around-comment: 0
     linebreak-style: [0, "unix"]

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.controller.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.controller.js
index 9745cdc..a8bf5d9 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.controller.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.controller.js
@@ -15,12 +15,9 @@
  * limitations under the License.
  */
 
-export default ['$scope', 'IgniteUiAceOnLoad', function($scope, onLoad) {
+export default ['$scope', function($scope) {
     const ctrl = this;
 
-    // Scope methods.
-    $scope.onLoad = onLoad;
-
     // Watchers definition.
     const clusterWatcher = () => {
         delete ctrl.data;

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.directive.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.directive.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.directive.js
index 36e5e06..2698e14 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.directive.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-docker/ui-ace-docker.directive.js
@@ -19,6 +19,14 @@ import template from './ui-ace-docker.jade!';
 import controller from './ui-ace-docker.controller';
 
 export default ['igniteUiAceDocker', [() => {
+    const link = ($scope, $el, $attrs, [igniteUiAce]) => {
+        if (igniteUiAce.onLoad)
+            $scope.onLoad = igniteUiAce.onLoad;
+
+        if (igniteUiAce.onChange)
+            $scope.onChange = igniteUiAce.onChange;
+    };
+
     return {
         restrict: 'E',
         scope: {
@@ -29,8 +37,10 @@ export default ['igniteUiAceDocker', [() => {
             cluster: '=',
             data: '=ngModel'
         },
+        link,
         template,
         controller,
-        controllerAs: 'ctrl'
+        controllerAs: 'ctrl',
+        require: ['?^igniteUiAce']
     };
 }]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.controller.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.controller.js
index b264bee..4b14f04 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.controller.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.controller.js
@@ -18,26 +18,13 @@
 const SERVER_CFG = 'ServerConfigurationFactory';
 const CLIENT_CFG = 'ClientConfigurationFactory';
 
-export default ['$scope', 'IgniteUiAceOnLoad', function($scope, onLoad) {
+export default ['$scope', 'GeneratorJava', function($scope, generator) {
     const ctrl = this;
 
-    // Scope methods.
-    $scope.onLoad = onLoad;
-
-    // Watchers definition.
-    const clusterWatcher = (value) => {
-        delete ctrl.data;
-
-        if (!value)
-            return;
-
+    // Set default generator
+    ctrl.generator = (cluster) => {
         const type = $scope.cfg ? CLIENT_CFG : SERVER_CFG;
-
         // TODO IGNITE-2054: need move $generatorJava to services.
-        ctrl.data = $generatorJava.cluster($scope.cluster, 'config', type, $scope.cfg);
+        return generator.cluster(cluster, 'config', type, $scope.cfg);
     };
-
-    // Setup watchers.
-    $scope.$watch('cfg', clusterWatcher, true);
-    $scope.$watch('cluster', clusterWatcher);
 }];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.directive.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.directive.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.directive.js
index 35441d0..64cd7f9 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.directive.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.directive.js
@@ -18,27 +18,92 @@
 import template from './ui-ace-java.jade!';
 import controller from './ui-ace-java.controller';
 
-export default ['igniteUiAceJava', [() => {
-    const link = ($scope, $el, {clusterCfg}) => {
-        if (typeof clusterCfg !== 'undefined') {
-            $scope.$watch('cfg', (cfg) => {
+export default ['igniteUiAceJava', ['GeneratorJava', (generator) => {
+    const link = (scope, $el, attrs, [ctrl, igniteUiAce, formCtrl, ngModelCtrl]) => {
+        if (formCtrl && ngModelCtrl)
+            formCtrl.$removeControl(ngModelCtrl);
+
+        if (typeof attrs.clusterCfg !== 'undefined') {
+            scope.$watch('cfg', (cfg) => {
                 if (typeof cfg !== 'undefined')
                     return;
 
-                $scope.cfg = {};
+                scope.cfg = {};
             });
         }
+
+        if (igniteUiAce && igniteUiAce.onLoad) {
+            scope.onLoad = (editor) => {
+                igniteUiAce.onLoad(editor);
+
+                scope.$watch('cluster', () => editor.attractAttention = false);
+            };
+        }
+
+        if (igniteUiAce && igniteUiAce.onChange)
+            scope.onChange = igniteUiAce.onChange;
+
+        const render = (data) => {
+            delete ctrl.data;
+
+            if (!data)
+                return;
+
+            return ctrl.generator(scope.cluster);
+        };
+
+        // Setup watchers.
+        scope.$watch('generator', (method) => {
+            if (!method)
+                return;
+
+            switch (method) {
+                case 'clusterCaches':
+                    ctrl.generator = (cluster) => {
+                        let caches;
+
+                        caches = _.reduce(scope.caches, (acc, cache) => {
+                            if (_.contains(cluster.caches, cache.value))
+                                acc.push(cache.cache);
+
+                            return acc;
+                        }, []);
+
+                        return generator.clusterCaches(caches, null, true, generator.clusterGeneral(cluster)).asString();
+                    };
+
+                    break;
+
+                case 'igfss':
+                    ctrl.generator = () => generator.igfss(scope.igfss, 'cfg').asString();
+
+                    break;
+
+                default:
+                    ctrl.generator = (cluster) => generator[method](cluster).asString();
+            }
+        });
+        scope.$watch('cfg', (data) => ctrl.data = render(data), true);
+        scope.$watch('cluster', (data) => ctrl.data = render(data), true);
     };
 
     return {
         restrict: 'E',
         scope: {
+            caches: '=',
+            igfss: '=',
+
+            generator: '@',
             cluster: '=',
-            cfg: '=clusterCfg'
+            cfg: '=?clusterCfg'
+        },
+        bindToController: {
+            data: '=?ngModel'
         },
         link,
         template,
         controller,
-        controllerAs: 'ctrl'
+        controllerAs: 'ctrl',
+        require: ['igniteUiAceJava', '?^igniteUiAce', '?^form', '?ngModel']
     };
 }]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.jade b/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.jade
index f45c687..6c027c8 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.jade
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-java/ui-ace-java.jade
@@ -14,4 +14,9 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
-div(ng-if='ctrl.data' ui-ace='{onLoad: onLoad, mode: "java"}' ng-model='ctrl.data')
+div(ng-if='ctrl.data' 
+    ui-ace='{onLoad: onLoad, \
+             onChange: onChange, \
+             renderOptions: renderOptions, \
+             mode: "java"}' 
+    ng-model='ctrl.data')

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.controller.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.controller.js
index 973beaa..28428e4 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.controller.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.controller.js
@@ -15,12 +15,9 @@
  * limitations under the License.
  */
 
-export default ['$scope', 'IgniteUiAceOnLoad', 'JavaTypes', function($scope, onLoad, JavaTypes) {
+export default ['$scope', 'JavaTypes', function($scope, JavaTypes) {
     const ctrl = this;
 
-    // Scope methods.
-    $scope.onLoad = onLoad;
-
     // Watchers definition.
     // Watcher clean instance data if instance to cluster caches was change
     const cleanPojos = () => {

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.directive.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.directive.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.directive.js
index 8176752..9d437f0 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.directive.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-pojos/ui-ace-pojos.directive.js
@@ -19,6 +19,13 @@ import template from './ui-ace-pojos.jade!';
 import controller from './ui-ace-pojos.controller';
 
 export default ['igniteUiAcePojos', [() => {
+    const link = ($scope, $el, $attrs, [igniteUiAce]) => {
+        if (igniteUiAce.onLoad)
+            $scope.onLoad = igniteUiAce.onLoad;
+
+        if (igniteUiAce.onChange)
+            $scope.onChange = igniteUiAce.onChange;
+    };
 
     return {
         restrict: 'E',
@@ -30,8 +37,10 @@ export default ['igniteUiAcePojos', [() => {
             cluster: '=',
             pojos: '=ngModel'
         },
+        link,
         template,
         controller,
-        controllerAs: 'ctrl'
+        controllerAs: 'ctrl',
+        require: ['?^igniteUiAce']
     };
 }]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.controller.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.controller.js
index 72b0b30..210b6de 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.controller.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.controller.js
@@ -18,12 +18,9 @@
 // TODO IGNITE-2055: use set version.
 const igniteVersion = '1.5.0.final';
 
-export default ['$scope', 'IgniteUiAceOnLoad', function($scope, onLoad) {
+export default ['$scope', function($scope) {
     const ctrl = this;
 
-    // Scope methods.
-    $scope.onLoad = onLoad;
-
     // Watchers definition.
     const clusterWatcher = (value) => {
         delete ctrl.data;

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.directive.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.directive.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.directive.js
index 6dfa7c5..7aa75ba 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.directive.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-pom/ui-ace-pom.directive.js
@@ -19,14 +19,23 @@ import template from './ui-ace-pom.jade!';
 import controller from './ui-ace-pom.controller';
 
 export default ['igniteUiAcePom', [() => {
+    const link = ($scope, $el, $attrs, [igniteUiAce]) => {
+        if (igniteUiAce.onLoad)
+            $scope.onLoad = igniteUiAce.onLoad;
+
+        if (igniteUiAce.onChange)
+            $scope.onChange = igniteUiAce.onChange;
+    };
 
     return {
         restrict: 'E',
         scope: {
             cluster: '='
         },
+        link,
         template,
         controller,
-        controllerAs: 'ctrl'
+        controllerAs: 'ctrl',
+        require: ['?^igniteUiAce']
     };
 }]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.controller.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.controller.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.controller.js
index 2fb7397..302dd92 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.controller.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.controller.js
@@ -15,24 +15,12 @@
  * limitations under the License.
  */
 
-export default ['$scope', 'IgniteUiAceOnLoad', function($scope, onLoad) {
+export default ['$scope', 'GeneratorXml', function($scope, generator) {
     const ctrl = this;
 
-    // Scope methods.
-    $scope.onLoad = onLoad;
-
-    // Watchers definition.
-    const clusterWatcher = (value) => {
-        delete ctrl.data;
-
-        if (!value)
-            return;
-
+    // Set default generator
+    ctrl.generator = (cluster) => {
         // TODO IGNITE-2052: need move $generatorXml to services.
-        ctrl.data = $generatorXml.cluster($scope.cluster, $scope.cfg);
+        return generator.cluster(cluster, $scope.cfg);
     };
-
-    // Setup watchers.
-    $scope.$watch('cfg', clusterWatcher, true);
-    $scope.$watch('cluster', clusterWatcher);
 }];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.directive.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.directive.js b/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.directive.js
index 443bbf6..52d175e 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.directive.js
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.directive.js
@@ -18,27 +18,92 @@
 import template from './ui-ace-xml.jade!';
 import controller from './ui-ace-xml.controller';
 
-export default ['igniteUiAceXml', [() => {
-    const link = ($scope, $el, {clusterCfg}) => {
-        if (typeof clusterCfg !== 'undefined') {
-            $scope.$watch('cfg', (cfg) => {
+export default ['igniteUiAceXml', ['GeneratorXml', (generator) => {
+    const link = (scope, $el, attrs, [ctrl, igniteUiAce, formCtrl, ngModelCtrl]) => {
+        if (formCtrl && ngModelCtrl)
+            formCtrl.$removeControl(ngModelCtrl);
+
+        if (typeof attrs.clusterCfg !== 'undefined') {
+            scope.$watch('cfg', (cfg) => {
                 if (typeof cfg !== 'undefined')
                     return;
 
-                $scope.cfg = {};
+                scope.cfg = {};
             });
         }
+
+        if (igniteUiAce && igniteUiAce.onLoad) {
+            scope.onLoad = (editor) => {
+                igniteUiAce.onLoad(editor);
+
+                scope.$watch('cluster', () => editor.attractAttention = false);
+            };
+        }
+
+        if (igniteUiAce && igniteUiAce.onChange)
+            scope.onChange = igniteUiAce.onChange;
+
+        const render = (data) => {
+            delete ctrl.data;
+
+            if (!data)
+                return;
+
+            return ctrl.generator(scope.cluster);
+        };
+
+        // Setup watchers.
+        scope.$watch('generator', (method) => {
+            if (!method)
+                return;
+
+            switch (method) {
+                case 'clusterCaches':
+                    ctrl.generator = (cluster) => {
+                        let caches;
+
+                        caches = _.reduce(scope.caches, function(acc, cache) {
+                            if (_.contains(cluster.caches, cache.value))
+                                acc.push(cache.cache);
+
+                            return acc;
+                        }, []);
+
+                        return generator.clusterCaches(caches, null, true, generator.clusterGeneral(cluster)).asString();
+                    };
+
+                    break;
+
+                case 'igfss':
+                    ctrl.generator = () => generator.igfss(scope.igfss).asString();
+
+                    break;
+
+                default:
+                    ctrl.generator = (cluster) => generator[method](cluster).asString();
+            }
+        });
+        scope.$watch('cfg', (data) => ctrl.data = render(data), true);
+        scope.$watch('cluster', (data) => ctrl.data = render(data), true);
     };
 
     return {
         restrict: 'E',
         scope: {
+            caches: '=',
+            igfss: '=',
+
+            generator: '@',
             cluster: '=',
-            cfg: '=clusterCfg'
+            cfg: '=?clusterCfg'
+        },
+        bindToController: {
+            data: '=?ngModel'
         },
         link,
         template,
         controller,
-        controllerAs: 'ctrl'
+        controllerAs: 'ctrl',
+        require: ['igniteUiAceXml', '?^igniteUiAce', '?^form', '?ngModel']
     };
 }]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.jade b/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.jade
index 8e263ab..585cbdd 100644
--- a/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.jade
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace-xml/ui-ace-xml.jade
@@ -14,4 +14,4 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
-div(ng-if='ctrl.data' ui-ace='{onLoad: onLoad, mode: "xml"}' ng-model='ctrl.data')
+div(ng-if='ctrl.data' ui-ace='{onLoad: onLoad, onChange: onChange, mode: "xml"}' ng-model='ctrl.data')

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/directives/ui-ace/ui-ace.directive.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/directives/ui-ace/ui-ace.directive.js b/modules/control-center-web/src/main/js/app/directives/ui-ace/ui-ace.directive.js
new file mode 100644
index 0000000..c5242f5
--- /dev/null
+++ b/modules/control-center-web/src/main/js/app/directives/ui-ace/ui-ace.directive.js
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default ['igniteUiAce', [() => {
+    const controller = () => {};
+
+    return {
+        restrict: 'E',
+        controller
+    };
+}]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/index.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/index.js b/modules/control-center-web/src/main/js/app/index.js
index e6a2c65..058ebbb 100644
--- a/modules/control-center-web/src/main/js/app/index.js
+++ b/modules/control-center-web/src/main/js/app/index.js
@@ -21,12 +21,15 @@ import ace from 'ace';
 import angular from 'angular';
 import pdfMake from 'pdfmake';
 
+window._ = _;
+window.jQuery = jQuery;
+window.ace = ace;
+window.require = ace.require;
+window.angular = angular;
+window.pdfMake = pdfMake;
+
 import 'angular-ui-router';
 import 'angular-ui-router-title';
-import 'angular-strap';
-import 'angular-ui-ace';
-import 'angular-tree-control';
-import 'angular-smart-table';
 import 'angular-animate';
 import 'angular-sanitize';
 import 'angular-ui-grid';
@@ -34,6 +37,10 @@ import 'angular-loading';
 import 'angular-drag-and-drop-lists';
 import 'angular-nvd3';
 import 'angular-retina';
+import 'angular-strap';
+import 'angular-ui-ace';
+import 'angular-tree-control';
+import 'angular-smart-table';
 
 import 'bootstrap-carousel';
 import 'file-saver';
@@ -49,13 +56,6 @@ import 'angular-ui-grid/ui-grid.css!';
 import 'angular-loading/angular-loading.css!';
 import 'angular-motion/dist/angular-motion.css!';
 
-window._ = _;
-window.jQuery = jQuery;
-window.ace = ace;
-window.require = ace.require;
-window.angular = angular;
-window.pdfMake = pdfMake;
-
 import './modules/User/index';
 import './modules/Auth/index';
 import './modules/Form/index';
@@ -84,6 +84,7 @@ import './modules/getting-started/main';
 // Directives.
 import igniteLoading from './directives/loading/loading.directive';
 import igniteInformation from './directives/information/information.directive';
+import igniteUiAce from './directives/ui-ace/ui-ace.directive';
 import igniteUiAceXml from './directives/ui-ace-xml/ui-ace-xml.directive';
 import igniteUiAceJava from './directives/ui-ace-java/ui-ace-java.directive';
 import igniteUiAcePom from './directives/ui-ace-pom/ui-ace-pom.directive';
@@ -93,7 +94,8 @@ import igniteFormFieldJavaClass from './directives/form-field-java-class/form-fi
 
 // Services.
 import cleanup from './services/cleanup/cleanup.service';
-import IgniteUiAceOnLoad from './services/UiAceOnLoad/service';
+import GeneratorXml from './services/Generator/Xml.service';
+import GeneratorJava from './services/Generator/Java.service';
 import IgniteCountries from './services/Countries/index';
 
 // Providers
@@ -133,6 +135,7 @@ angular
 // Directives.
 .directive(...igniteLoading)
 .directive(...igniteInformation)
+.directive(...igniteUiAce)
 .directive(...igniteUiAceXml)
 .directive(...igniteUiAceJava)
 .directive(...igniteUiAcePom)
@@ -141,7 +144,8 @@ angular
 .directive(...igniteFormFieldJavaClass)
 // Services.
 .service(...cleanup)
-.service(...IgniteUiAceOnLoad)
+.service(...GeneratorXml)
+.service(...GeneratorJava)
 .service(...IgniteCountries)
 // Providers.
 // Filters.

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/atomic.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/atomic.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/atomic.jade
index d3ddc91..d442d5c 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/atomic.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/atomic.jade
@@ -72,19 +72,15 @@ form.panel.panel-default(name='atomics' novalidate)
                             data-ng-model='#{model}.backups'
                             data-placeholder='0'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["atomics"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["atomics"].java')
-                    .preview-content(
-                        ng-if='!preview["atomics"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["atomics"].xml')
-                    .preview-content-empty(ng-if='preview["atomics"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterAtomics' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterAtomics' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/binary.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/binary.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/binary.jade
index ccefd20..9e63adf 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/binary.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/binary.jade
@@ -124,19 +124,15 @@ form.panel.panel-default(name='binary' novalidate)
                         | Compact footer
                         ignite-form-field-tooltip
                             | When enabled, Ignite will not write fields metadata when serializing objects(this will increase serialization performance), because internally #[b BinaryMarshaller] already distribute metadata inside cluster
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["binary"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["binary"].java')
-                    .preview-content(
-                        ng-if='!preview["binary"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["binary"].xml')
-                    .preview-content-empty(ng-if='preview["binary"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterBinary' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterBinary' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/communication.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/communication.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/communication.jade
index 1d05703..8031cfb 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/communication.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/communication.jade
@@ -322,19 +322,15 @@ form.panel.panel-default(name='communication' novalidate)
                             data-name='comAddressResolver'
                             data-ng-model='#{model}.addressResolver'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["communication"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["communication"].java')
-                    .preview-content(
-                        ng-if='!preview["communication"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["communication"].xml')
-                    .preview-content-empty(ng-if='preview["communication"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterCommunication' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterCommunication' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/connector.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/connector.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/connector.jade
index 0803a74..206a3e6 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/connector.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/connector.jade
@@ -291,19 +291,15 @@ form.panel.panel-default(name='connector' novalidate)
                             data-ng-required='#{model}.sslEnabled'
                             data-ng-disabled='!#{model}.enabled || !#{model}.sslEnabled'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["connector"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["connector"].java')
-                    .preview-content(
-                        ng-if='!preview["connector"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["connector"].xml')
-                    .preview-content-empty(ng-if='preview["connector"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterConnector' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterConnector' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/deployment.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/deployment.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/deployment.jade
index 8966325..23888a3 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/deployment.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/deployment.jade
@@ -181,19 +181,15 @@ form.panel.panel-default(name='#{form}' novalidate)
             
                         .group-content-empty(ng-if='!(#{exclude}.length) && !group.add.length')
                             | Not defined
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["deployment"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["deployment"].java')
-                    .preview-content(
-                        ng-if='!preview["deployment"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["deployment"].xml')
-                    .preview-content-empty(ng-if='preview["deployment"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterDeployment' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterDeployment' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/discovery.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/discovery.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/discovery.jade
index 37b005e..deb9f00 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/discovery.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/discovery.jade
@@ -296,19 +296,15 @@ form.panel.panel-default(name='discovery' novalidate)
                         | Client reconnect disabled
                         ignite-form-field-tooltip
                             | Client reconnect disabled
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["discovery"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["discovery"].java')
-                    .preview-content(
-                        ng-if='!preview["discovery"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["discovery"].xml')
-                    .preview-content-empty(ng-if='preview["discovery"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterDiscovery' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterDiscovery' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/events.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/events.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/events.jade
index be891f4..6db5113 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/events.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/events.jade
@@ -41,19 +41,15 @@ form.panel.panel-default(name='events' novalidate)
                             data-ng-model='#{model}.includeEventTypes'
                             data-placeholder='Choose recorded event types'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["events"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["events"].java')
-                    .preview-content(
-                        ng-if='!preview["events"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["events"].xml')
-                    .preview-content-empty(ng-if='preview["events"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterEvents' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterEvents' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general.jade
index 6dbf36d..8958cbd 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general.jade
@@ -93,19 +93,13 @@ form.panel.panel-default(name='general' novalidate)
                             ng-if='#{model}.discovery.kind === "SharedFs"')
                         ignite-configuration-clusters-general-discovery-vm(
                             ng-if='#{model}.discovery.kind === "Vm"')
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["general"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["general"].java')
-                    .preview-content(
-                        ng-if='!preview["general"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["general"].xml')
-                    .preview-content-empty(ng-if='preview["general"].allDefaults')
-                        label All Defaults
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterCaches' data-caches='caches')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterCaches' data-caches='caches')

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/igfs.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/igfs.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/igfs.jade
index a40c0ec..b831177 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/igfs.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/igfs.jade
@@ -41,19 +41,15 @@ form.panel.panel-default(name='igfs' novalidate)
                             data-ng-disabled='!igfss.length'
                             data-placeholder='{{ igfss.length ? "Choose IGFS": "No IGFS configured" }}'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["igfs"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["igfs"].java')
-                    .preview-content(
-                        ng-if='!preview["igfs"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["igfs"].xml')
-                    .preview-content-empty(ng-if='preview["igfs"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='igfss' data-igfss='igfss' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='igfss' data-igfss='igfss' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/marshaller.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/marshaller.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/marshaller.jade
index 3f41200..d61f4b1 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/marshaller.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/marshaller.jade
@@ -119,19 +119,15 @@ form.panel.panel-default(name='marshaller' novalidate)
                             data-placeholder='max(8, availableProcessors) * 2'
                         )
 
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["marshaller"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["marshaller"].java')
-                    .preview-content(
-                        ng-if='!preview["marshaller"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["marshaller"].xml')
-                    .preview-content-empty(ng-if='preview["marshaller"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterMarshaller' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterMarshaller' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/metrics.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/metrics.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/metrics.jade
index 49188f4..6c7894d 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/metrics.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/metrics.jade
@@ -74,19 +74,15 @@ form.panel.panel-default(name='metrics' novalidate)
                             data-ng-model='#{model}.metricsUpdateFrequency'
                             data-placeholder='2000'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["metrics"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["metrics"].java')
-                    .preview-content(
-                        ng-if='!preview["metrics"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["metrics"].xml')
-                    .preview-content-empty(ng-if='preview["metrics"].allDefaults')
-                        label All Defaults            
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterMetrics' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterMetrics' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
+                        label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/preview-panel.directive.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/preview-panel.directive.js b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/preview-panel.directive.js
new file mode 100644
index 0000000..1db377d
--- /dev/null
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/preview-panel.directive.js
@@ -0,0 +1,239 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ace from 'ace';
+
+export default ['previewPanel', ['$interval', '$timeout', ($interval, $timeout) => {
+    let animation = {editor: null, stage: 0, start: 0, stop: 0};
+    let prevContent = [];
+
+    const Range = ace.require('ace/range').Range;
+
+    const _clearSelection = (editor) => {
+        _.forEach(editor.session.getMarkers(false), (marker) => {
+            editor.session.removeMarker(marker.id);
+        });
+    };
+
+    /**
+     * Switch to next stage of animation.
+     */
+    const _animate = () => {
+        animation.stage += animation.step;
+
+        const stage = animation.stage;
+        const editor = animation.editor;
+
+        _clearSelection(editor);
+
+        animation.selections.forEach((selection) => {
+            editor.session.addMarker(new Range(selection.start, 0, selection.stop, 0),
+                'preview-highlight-' + stage, 'line', false);
+        });
+
+        if (stage === animation.finalStage) {
+            editor.animatePromise = null;
+
+            if (animation.clearOnFinal)
+                _clearSelection(editor);
+        }
+    };
+
+    /**
+     * Selection with animation.
+     *
+     * @param editor Editor to show selection animation.
+     * @param selections Array of selection intervals.
+     * @param step Step of animation (1 or -1).
+     * @param startStage Start stage of animaiton.
+     * @param finalStage Final stage of animation.
+     * @param clearOnFinal Boolean flat to clear selection on animation finish.
+     */
+    const _fade = (editor, selections, step, stage, finalStage, clearOnFinal) => {
+        const promise = editor.animatePromise;
+
+        if (promise) {
+            $interval.cancel(promise);
+
+            _clearSelection(editor);
+        }
+
+        animation = {editor, selections, step, stage, finalStage, clearOnFinal};
+
+        editor.animatePromise = $interval(_animate, 100, 10, false);
+    };
+
+    /**
+     * Show selections with animation.
+     *
+     * @param editor Editor to show selection.
+     * @param selections Array of selection intervals.
+     */
+    const _fadeIn = (editor, selections) => {
+        _fade(editor, selections, 1, 0, 10, false);
+    };
+
+    /**
+     * Hide selections with animation.
+     *
+     * @param editor Editor to show selection.
+     * @param selections Array of selection intervals.
+     */
+    const _fadeOut = (editor, selections) => {
+        _fade(editor, selections, -1, 10, 0, true);
+    };
+
+    const onChange = ([content, editor]) => {
+        const {clearPromise} = editor;
+        const {lines} = content;
+
+        if (content.action === 'remove')
+            prevContent = lines;
+        else if (prevContent.length > 0 && lines.length > 0 && editor.attractAttention) {
+            if (clearPromise) {
+                $timeout.cancel(clearPromise);
+
+                _clearSelection(editor);
+            }
+
+            const selections = [];
+
+            let newIx = 0;
+            let prevIx = 0;
+
+            let prevLen = prevContent.length - (prevContent[prevContent.length - 1] === '' ? 1 : 0);
+            let newLen = lines.length - (lines[lines.length - 1] === '' ? 1 : 0);
+
+            const removed = newLen < prevLen;
+
+            let skipEnd = 0;
+
+            let selected = false;
+            let scrollTo = -1;
+
+            while (lines[newLen - 1] === prevContent[prevLen - 1] && newLen > 0 && prevLen > 0) {
+                prevLen -= 1;
+                newLen -= 1;
+
+                skipEnd += 1;
+            }
+
+            while (newIx < newLen || prevIx < prevLen) {
+                let start = -1;
+                let stop = -1;
+
+                // Find an index of a first line with different text.
+                for (; (newIx < newLen || prevIx < prevLen) && start < 0; newIx++, prevIx++) {
+                    if (newIx >= newLen || prevIx >= prevLen || lines[newIx] !== prevContent[prevIx]) {
+                        start = newIx;
+
+                        break;
+                    }
+                }
+
+                if (start >= 0) {
+                    // Find an index of a last line with different text by checking last string of old and new content in reverse order.
+                    for (let i = start; i < newLen && stop < 0; i++) {
+                        for (let j = prevIx; j < prevLen && stop < 0; j++) {
+                            if (lines[i] === prevContent[j] && lines[i] !== '') {
+                                stop = i;
+
+                                newIx = i;
+                                prevIx = j;
+
+                                break;
+                            }
+                        }
+                    }
+
+                    if (stop < 0) {
+                        stop = newLen;
+
+                        newIx = newLen;
+                        prevIx = prevLen;
+                    }
+
+                    if (start === stop) {
+                        if (removed)
+                            start = Math.max(0, start - 1);
+
+                        stop = Math.min(newLen + skipEnd, stop + 1);
+                    }
+
+                    if (start <= stop) {
+                        selections.push({start, stop});
+
+                        if (!selected)
+                            scrollTo = start;
+
+                        selected = true;
+                    }
+                }
+            }
+
+            // Run clear selection one time.
+            if (selected) {
+                _fadeIn(editor, selections);
+
+                editor.clearPromise = $timeout(() => {
+                    _fadeOut(editor, selections);
+
+                    editor.clearPromise = null;
+                }, 2000);
+
+                editor.scrollToRow(scrollTo);
+            }
+
+            prevContent = [];
+        }
+        else
+            editor.attractAttention = true;
+    };
+
+
+    const link = (scope, $element, $attrs, [igniteUiAce1, igniteUiAce2]) => {
+        const igniteUiAce = igniteUiAce1 || igniteUiAce2;
+
+        if (!igniteUiAce)
+            return;
+
+        igniteUiAce.onLoad = (editor) => {
+            editor.setReadOnly(true);
+            editor.setOption('highlightActiveLine', false);
+            editor.setAutoScrollEditorIntoView(true);
+            editor.$blockScrolling = Infinity;
+            editor.attractAttention = false;
+
+            const renderer = editor.renderer;
+
+            renderer.setHighlightGutterLine(false);
+            renderer.setShowPrintMargin(false);
+            renderer.setOption('fontSize', '10px');
+            renderer.setOption('maxLines', '50');
+
+            editor.setTheme('ace/theme/chrome');
+        };
+
+        igniteUiAce.onChange = onChange;
+    };
+
+    return {
+        restrict: 'C',
+        link,
+        require: ['?igniteUiAce', '?^igniteUiAce']
+    };
+}]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/ssl.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/ssl.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/ssl.jade
index 4c428ee..7ef96e7 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/ssl.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/ssl.jade
@@ -220,19 +220,15 @@ form.panel.panel-default(name='#{form}' novalidate)
                             data-ng-disabled='!#{enabled}'
                         )                        
  
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["sslConfiguration"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["sslConfiguration"].java')
-                    .preview-content(
-                        ng-if='!preview["sslConfiguration"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["sslConfiguration"].xml')
-                    .preview-content-empty(ng-if='preview["sslConfiguration"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterSsl' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterSsl' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/swap.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/swap.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/swap.jade
index 99f7a0b..f58dc84 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/swap.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/swap.jade
@@ -118,19 +118,15 @@ form.panel.panel-default(name='swapSpaceSpi' novalidate)
                                 )
 
 
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["swap"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["swap"].java')
-                    .preview-content(
-                        ng-if='!preview["swap"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["swap"].xml')
-                    .preview-content-empty(ng-if='preview["swap"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterSwap' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterSwap' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/thread.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/thread.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/thread.jade
index f42d627..8485a3b 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/thread.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/thread.jade
@@ -76,19 +76,15 @@ form.panel.panel-default(name='thread' novalidate)
                             data-ng-model='#{model}.rebalanceThreadPoolSize'
                             data-placeholder='1'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["pools"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["pools"].java')
-                    .preview-content(
-                        ng-if='!preview["pools"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["pools"].xml')
-                    .preview-content-empty(ng-if='preview["pools"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterPools' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterPools' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/time.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/time.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/time.jade
index 63d5516..895316c 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/time.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/time.jade
@@ -78,19 +78,15 @@ form.panel.panel-default(name='time' novalidate)
                             data-ng-model='#{model}.timeServerPortRange'
                             data-placeholder='100'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["time"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["time"].java')
-                    .preview-content(
-                        ng-if='!preview["time"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["time"].xml')
-                    .preview-content-empty(ng-if='preview["time"].allDefaults')
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterTime' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterTime' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
                         label All Defaults

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/transactions.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/transactions.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/transactions.jade
index bfe7a29..a4b4971 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/transactions.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/transactions.jade
@@ -14,9 +14,6 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
-mixin ignite-form-field-tooltip(message)
-    i.tipField.fa.fa-question-circle(bs-tooltip='"#{message}"')
-
 - var model = 'backupItem.transactionConfiguration'
 
 form.panel.panel-default(name='transactionConfiguration' novalidate)
@@ -110,19 +107,15 @@ form.panel.panel-default(name='transactionConfiguration' novalidate)
                             data-ng-model='#{model}.txManagerFactory'
                             data-placeholder='Enter fully qualified class name'
                         )
-            .col-sm-6
+            ignite-ui-ace.col-sm-6
                 .preview-panel(ng-init='mode = false')
                     .preview-legend
                         a(ng-class='{active: !mode, inactive: mode}' ng-click='mode = false') XML
                         | &nbsp;
                         a(ng-class='{active: mode, inactive: !mode}' ng-click='mode = true') Java
-                    .preview-content(
-                        ng-if='!preview["transactions"].allDefaults && mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "java", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["transactions"].java')
-                    .preview-content(
-                        ng-if='!preview["transactions"].allDefaults && !mode'
-                        ui-ace='{onLoad: previewInit, onChange: previewChanged, mode: "xml", rendererOptions: {minLines: group.previewMinLines || 3}}' 
-                        ng-model='preview["transactions"].xml')
-                    .preview-content-empty(ng-if='preview["transactions"].allDefaults')
-                        label All Defaults
+                    .preview-content(ng-if='mode')
+                        ignite-ui-ace-java(data-cluster='backupItem' data-generator='clusterTransactions' ng-model='$parent.data')
+                    .preview-content(ng-if='!mode')
+                        ignite-ui-ace-xml(data-cluster='backupItem' data-generator='clusterTransactions' ng-model='$parent.data')
+                    .preview-content-empty(ng-if='!data')
+                        label All Defaults
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/index.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/index.js b/modules/control-center-web/src/main/js/app/modules/states/configuration/index.js
index 6091c62..e8f32c0 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/index.js
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/index.js
@@ -19,6 +19,8 @@ import angular from 'angular';
 
 import ConfigurationSummaryCtrl from './summary/summary.controller';
 import ConfigurationSummaryResource from './summary/summary.resource';
+import summaryTabs from './summary/summary-tabs.directive';
+import previewPanel from './clusters/preview-panel.directive';
 
 import clustersTransactions from './clusters/transactions.directive';
 import clustersThread from './clusters/thread.directive';
@@ -49,6 +51,8 @@ angular
 .module('ignite-console.states.configuration', [
     'ui.router'
 ])
+.directive(...summaryTabs)
+.directive(...previewPanel)
 .directive(...clustersTransactions)
 .directive(...clustersThread)
 .directive(...clustersTime)

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/modules/states/configuration/summary/summary-tabs.directive.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/summary/summary-tabs.directive.js b/modules/control-center-web/src/main/js/app/modules/states/configuration/summary/summary-tabs.directive.js
new file mode 100644
index 0000000..e087705
--- /dev/null
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/summary/summary-tabs.directive.js
@@ -0,0 +1,44 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default ['summaryTabs', [() => {
+    const link = (scope, $element, $attrs, [igniteUiAce]) => {
+        igniteUiAce.onLoad = (editor) => {
+            editor.setReadOnly(true);
+            editor.setOption('highlightActiveLine', false);
+            editor.setAutoScrollEditorIntoView(true);
+            editor.$blockScrolling = Infinity;
+
+            const renderer = editor.renderer;
+
+            renderer.setHighlightGutterLine(false);
+            renderer.setShowPrintMargin(false);
+            renderer.setOption('fontFamily', 'monospace');
+            renderer.setOption('fontSize', '12px');
+            renderer.setOption('minLines', '25');
+            renderer.setOption('maxLines', '25');
+
+            editor.setTheme('ace/theme/chrome');
+        };
+    };
+
+    return {
+        restrict: 'C',
+        link,
+        require: ['^igniteUiAce']
+    };
+}]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/services/Generator/Java.service.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/services/Generator/Java.service.js b/modules/control-center-web/src/main/js/app/services/Generator/Java.service.js
new file mode 100644
index 0000000..890217e
--- /dev/null
+++ b/modules/control-center-web/src/main/js/app/services/Generator/Java.service.js
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default ['GeneratorJava', () => {
+    return $generatorJava;
+}];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/services/Generator/Xml.service.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/services/Generator/Xml.service.js b/modules/control-center-web/src/main/js/app/services/Generator/Xml.service.js
new file mode 100644
index 0000000..86ec38b
--- /dev/null
+++ b/modules/control-center-web/src/main/js/app/services/Generator/Xml.service.js
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default ['GeneratorXml', () => {
+    return $generatorXml;
+}];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/app/services/UiAceOnLoad/service.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/services/UiAceOnLoad/service.js b/modules/control-center-web/src/main/js/app/services/UiAceOnLoad/service.js
deleted file mode 100644
index 84389a3..0000000
--- a/modules/control-center-web/src/main/js/app/services/UiAceOnLoad/service.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default ['IgniteUiAceOnLoad', () => {
-    return (editor) => {
-        editor.setReadOnly(true);
-        editor.setOption('highlightActiveLine', false);
-        editor.setAutoScrollEditorIntoView(true);
-        editor.$blockScrolling = Infinity;
-
-        const renderer = editor.renderer;
-
-        renderer.setHighlightGutterLine(false);
-        renderer.setShowPrintMargin(false);
-        renderer.setOption('fontFamily', 'monospace');
-        renderer.setOption('fontSize', '12px');
-        renderer.setOption('minLines', '25');
-        renderer.setOption('maxLines', '25');
-
-        editor.setTheme('ace/theme/chrome');
-    };
-}];

http://git-wip-us.apache.org/repos/asf/ignite/blob/1905ab31/modules/control-center-web/src/main/js/config.js
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/config.js b/modules/control-center-web/src/main/js/config.js
index 3fb6736..136d52e 100644
--- a/modules/control-center-web/src/main/js/config.js
+++ b/modules/control-center-web/src/main/js/config.js
@@ -54,6 +54,7 @@ System.config({
     "query-command-supported": "github:zenorocha/document.queryCommandSupported@1.0.0",
     "spinjs": "github:fgnass/spin.js@2.3.2",
     "github:akuznetsov-gridgain/angular-strap@fix-1852-2.3.6": {
+      "angular": "github:angular/bower-angular@1.4.9",
       "angular-animate": "github:angular/bower-angular-animate@1.4.9",
       "angular-motion": "github:mgcrea/angular-motion@0.4.3",
       "angular-sanitize": "github:angular/bower-angular-sanitize@1.4.9"