You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by an...@apache.org on 2016/03/28 10:48:03 UTC

[23/50] [abbrv] ignite git commit: IGNITE-2840 Refactoring to mixins.

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper.jade
index 1aca477..4e11cc6 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper.jade
@@ -14,65 +14,42 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.ZooKeeper';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Curator:
-            ignite-form-field-tooltip
-                | The Curator framework in use #[br]
-                | By default generates curator of org.apache.curator. framework.imps.CuratorFrameworkImpl
-                | class with configured connect string, retry policy, and default session and connection timeouts
-            ignite-form-field-java-class(
-                data-id='curator'
-                data-name='curator'
-                data-ng-model='#{model}.curator'
-            )
+        +java-class('Curator:', model + '.curator', 'curator', 'true', 'false',
+            'The Curator framework in use<br/>\
+            By default generates curator of org.apache.curator. framework.imps.CuratorFrameworkImpl\
+            class with configured connect string, retry policy, and default session and connection timeouts')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Connect string:
-            ignite-form-field-tooltip
-                | When "IGNITE_ZK_CONNECTION_STRING" system property is not configured this property will be used
-            ignite-form-field-input-text(
-                data-id='zkConnectionString'
-                data-name='zkConnectionString'
-                data-ng-model='#{model}.zkConnectionString'
-                data-placeholder='host:port[chroot][,host:port[chroot]]'
-                data-ng-required='true'
-            )
+        +text('Connect string:', model + '.zkConnectionString', 'zkConnectionString', 'true', 'host:port[chroot][,host:port[chroot]]',
+            'When "IGNITE_ZK_CONNECTION_STRING" system property is not configured this property will be used')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Retry policy:
-            ignite-form-field-tooltip
-                | Available retry policies:
-                ul: li Exponential backoff - retries a set number of times with increasing sleep time between retries
-                   li Bounded exponential backoff - retries a set number of times with an increasing (up to a maximum bound) sleep time between retries
-                    li Until elapsed - retries until a given amount of time elapses
-                    li Max number of times - retries a max number of times
-                    li Only once - retries only once
-                    li Always allow retry - retries infinitely
-                    li Custom - custom retry policy implementation
-                    li Default - exponential backoff retry policy with configured base sleep time equal to 1000ms and max retry count equal to 10
-            ignite-form-field-dropdown(
-                data-id='retryPolicy'
-                data-name='retryPolicy'
-                data-options='[\
-                    {value: "ExponentialBackoff", label: "Exponential backoff"},\
-                    {value: "BoundedExponentialBackoff", label: "Bounded exponential backoff"},\
-                    {value: "UntilElapsed", label: "Until elapsed"},\
-                    {value: "NTimes", label: "Max number of times"},\
-                    {value: "OneTime", label: "Only once"},\
-                    {value: "Forever", label: "Always allow retry"},\
-                    {value: "Custom", label: "Custom"},\
-                    {value: undefined, label: "Default"}\
-                ]'
-                data-ng-model='#{model}.retryPolicy.kind'
-                data-multiple='false'
-            )
+        +dropdown('Retry policy:', model + '.retryPolicy.kind', 'retryPolicy', 'true', 'Default',
+            '[\
+                {value: "ExponentialBackoff", label: "Exponential backoff"},\
+                {value: "BoundedExponentialBackoff", label: "Bounded exponential backoff"},\
+                {value: "UntilElapsed", label: "Until elapsed"},\
+                {value: "NTimes", label: "Max number of times"},\
+                {value: "OneTime", label: "Only once"},\
+                {value: "Forever", label: "Always allow retry"},\
+                {value: "Custom", label: "Custom"},\
+                {value: undefined, label: "Default"}\
+            ]',
+            'Available retry policies:\
+            <ul>\
+                <li>Exponential backoff - retries a set number of times with increasing sleep time between retries</li>\
+                <li>Bounded exponential backoff - retries a set number of times with an increasing (up to a maximum bound) sleep time between retries</li>\
+                <li>Until elapsed - retries until a given amount of time elapses</li>\
+                <li>Max number of times - retries a max number of times</li>\
+                <li>Only once - retries only once</li>\
+                <li>Always allow retry - retries infinitely</li>\
+                <li>Custom - custom retry policy implementation</li>\
+                <li>Default - exponential backoff retry policy with configured base sleep time equal to 1000ms and max retry count equal to 10</li>\
+            </ul>')
     .details-row(ng-if='#{model}.retryPolicy.kind')
         .panel-details.col-sm-12
             div(ng-switch='#{model}.retryPolicy.kind')
@@ -84,40 +61,13 @@ div
                 ignite-configuration-clusters-general-discovery-zookeeper-forever(ng-switch-when='Forever')
                 ignite-configuration-clusters-general-discovery-zookeeper-custom(ng-switch-when='Custom')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Base path:
-            ignite-form-field-tooltip
-                | Base path for service registration
-            ignite-form-field-input-text(
-                data-id='basePath'
-                data-name='basePath'
-                data-ng-model='#{model}.basePath'
-                data-placeholder='/services'
-            )
+        +text('Base path:', model + '.basePath', 'basePath', 'false', '/services', 'Base path for service registration')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Service name:
-            ignite-form-field-tooltip
-                | Service name to use, as defined by Curator's ServiceDiscovery recipe#[br]
-                | In physical ZooKeeper terms, it represents the node under basePath, under which services will be registered
-            ignite-form-field-input-text(
-                data-id='serviceName'
-                data-name='serviceName'
-                data-ng-model='#{model}.serviceName'
-                data-placeholder='ignite'
-            )
+        +text('Service name:', model + '.serviceName', 'serviceName', 'false', 'ignite',
+            'Service name to use, as defined by Curator&#39;s ServiceDiscovery recipe<br/>\
+            In physical ZooKeeper terms, it represents the node under basePath, under which services will be registered')
     .details-row
-        ignite-form-field.checkbox
-            ignite-form-field-input-checkbox(
-                data-id='allowDuplicateRegistrations'
-                data-name='allowDuplicateRegistrations'
-                data-ng-model='#{model}.allowDuplicateRegistrations'
-            )
-            | Allow duplicate registrations
-            ignite-form-field-tooltip
-                | Whether to register each node only once, or if duplicate registrations are allowed#[br]
-                | Nodes will attempt to register themselves, plus those they know about#[br]
-                | By default, duplicate registrations are not allowed, but you might want to set this property
-                | to #[b true] if you have multiple network interfaces or if you are facing troubles
+        +checkbox('Allow duplicate registrations', model + '.allowDuplicateRegistrations', 'allowDuplicateRegistrations',
+            'Whether to register each node only once, or if duplicate registrations are allowed<br/>\
+            Nodes will attempt to register themselves, plus those they know about<br/>\
+            By default, duplicate registrations are not allowed, but you might want to set this property to <b>true</b> if you have multiple network interfaces or if you are facing troubles')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/bounded-exponential-backoff.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/bounded-exponential-backoff.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/bounded-exponential-backoff.jade
index db6a9d6..9a03e75 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/bounded-exponential-backoff.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/bounded-exponential-backoff.jade
@@ -14,43 +14,14 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.ZooKeeper.retryPolicy.BoundedExponentialBackoff';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Base interval:
-            ignite-form-field-tooltip
-                | Initial amount of time in ms to wait between retries
-            ignite-form-field-input-number(
-                data-id='baseSleepTimeMs'
-                data-name='baseSleepTimeMs'
-                data-ng-model='#{model}.baseSleepTimeMs'
-                data-placeholder='1000'
-            )
+        +number('Base interval:', model + '.baseSleepTimeMs', 'baseSleepTimeMs', 'true', '1000', '0', 'Initial amount of time in ms to wait between retries')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Max interval:
-            ignite-form-field-tooltip
-                | Max time in ms to sleep on each retry
-            ignite-form-field-input-number(
-                data-id='maxSleepTimeMs'
-                data-name='maxSleepTimeMs'
-                data-ng-model='#{model}.maxSleepTimeMs'
-                data-placeholder='Integer.MAX_VALUE'
-            )
+        +number('Max interval:', model + '.maxSleepTimeMs', 'maxSleepTimeMs', 'true', 'Integer.MAX_VALUE', '0', 'Max time in ms to sleep on each retry')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Max retries:
-            ignite-form-field-tooltip
-                | Max number of times to retry
-            ignite-form-field-input-number(
-                data-id='maxRetries'
-                data-name='maxRetries'
-                data-ng-model='#{model}.maxRetries'
-                data-placeholder='10'
-                data-max='29'
-            )
+        +number-min-max('Max retries:', model + '.maxRetries', 'maxRetries', 'true', '10', '0', '29', 'Max number of times to retry')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/custom.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/custom.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/custom.jade
index 337f2f8..f0d5311 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/custom.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/custom.jade
@@ -14,17 +14,9 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.ZooKeeper.retryPolicy.Custom';
 
 .details-row
-    ignite-form-field
-        ignite-form-field-label
-            | Class name:
-        ignite-form-field-tooltip
-            | Custom retry policy implementation class name
-        ignite-form-field-java-class(
-            data-id='className'
-            data-name='className'
-            data-ng-model='#{model}.className'
-            data-ng-required='true'
-        )
+    +java-class('Class name:', model + '.className', 'className', 'true', 'false', 'Custom retry policy implementation class name')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/exponential-backoff.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/exponential-backoff.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/exponential-backoff.jade
index 0e89242..729d937 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/exponential-backoff.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/exponential-backoff.jade
@@ -14,43 +14,14 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.ZooKeeper.retryPolicy.ExponentialBackoff';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Base interval:
-            ignite-form-field-tooltip
-                | Initial amount of time in ms to wait between retries
-            ignite-form-field-input-number(
-                data-id='baseSleepTimeMs'
-                data-name='baseSleepTimeMs'
-                data-ng-model='#{model}.baseSleepTimeMs'
-                data-placeholder='1000'
-            )
+        +number('Base interval:', model + '.baseSleepTimeMs', 'baseSleepTimeMs', 'true', '1000', '0', 'Initial amount of time in ms to wait between retries')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Max retries:
-            ignite-form-field-tooltip
-                | Max number of times to retry
-            ignite-form-field-input-number(
-                data-id='maxRetries'
-                data-name='maxRetries'
-                data-ng-model='#{model}.maxRetries'
-                data-placeholder='10'
-                data-max='29'
-            )
+        +number-min-max('Max retries:', model + '.maxRetries', 'maxRetries', 'true', '10', '0', '29', 'Max number of times to retry')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Max interval:
-            ignite-form-field-tooltip
-                | Max time in ms to sleep on each retry
-            ignite-form-field-input-number(
-                data-id='maxSleepMs'
-                data-name='maxSleepMs'
-                data-ng-model='#{model}.maxSleepMs'
-                data-placeholder='Integer.MAX_VALUE'
-            )
+        +number('Max interval:', model + '.maxSleepMs', 'maxSleepMs', 'true', 'Integer.MAX_VALUE', '0', 'Max time in ms to sleep on each retry')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/forever.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/forever.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/forever.jade
index d14ff21..f3d0957 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/forever.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/forever.jade
@@ -14,17 +14,9 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.ZooKeeper.retryPolicy.Forever';
 
 .details-row
-    ignite-form-field
-        ignite-form-field-label
-            | Interval:
-        ignite-form-field-tooltip
-            | Time in ms between retry attempts
-        ignite-form-field-input-number(
-            data-id='retryIntervalMs'
-            data-name='retryIntervalMs'
-            data-ng-model='#{model}.retryIntervalMs'
-            data-placeholder='1000'
-        )
+    +number('Interval:', model + '.retryIntervalMs', 'retryIntervalMs', 'true', '1000', '0', 'Time in ms between retry attempts')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/n-times.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/n-times.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/n-times.jade
index 977a028..2cb6f90 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/n-times.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/n-times.jade
@@ -14,30 +14,12 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.ZooKeeper.retryPolicy.NTimes';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Retries:
-            ignite-form-field-tooltip
-                | Number of times to retry
-            ignite-form-field-input-number(
-                data-id='n'
-                data-name='n'
-                data-ng-model='#{model}.n'
-                data-placeholder='10'
-            )
+        +number('Retries:', model + '.n', 'n', 'true', '10', '0', 'Number of times to retry')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Interval:
-            ignite-form-field-tooltip
-                | Time in ms between retry attempts
-            ignite-form-field-input-number(
-                data-id='sleepMsBetweenRetries'
-                data-name='sleepMsBetweenRetries'
-                data-ng-model='#{model}.sleepMsBetweenRetries'
-                data-placeholder='1000'
-            )
+        +number('Interval:', model + '.sleepMsBetweenRetries', 'sleepMsBetweenRetries', 'true', '1000', '0', 'Time in ms between retry attempts')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/one-time.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/one-time.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/one-time.jade
index f102f7e..d1c8607 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/one-time.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/one-time.jade
@@ -14,18 +14,10 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.ZooKeeper.retryPolicy.OneTime';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Interval:
-            ignite-form-field-tooltip
-                | Time in ms to retry attempt
-            ignite-form-field-input-number(
-                data-id='sleepMsBetweenRetry'
-                data-name='sleepMsBetweenRetry'
-                data-ng-model='#{model}.sleepMsBetweenRetry'
-                data-placeholder='1000'
-            )
+        +number('Interval:', model + '.sleepMsBetweenRetry', 'sleepMsBetweenRetry', 'true', '1000', '0', 'Time in ms to retry attempt')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/until-elapsed.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/until-elapsed.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/until-elapsed.jade
index b5cadc7..94850df 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/until-elapsed.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/zookeeper/retrypolicy/until-elapsed.jade
@@ -14,30 +14,12 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.ZooKeeper.retryPolicy.UntilElapsed';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Total time:
-            ignite-form-field-tooltip
-                | Total time in ms for execution of retry attempt
-            ignite-form-field-input-number(
-                data-id='maxElapsedTimeMs'
-                data-name='maxElapsedTimeMs'
-                data-ng-model='#{model}.maxElapsedTimeMs'
-                data-placeholder='60000'
-            )
+        +number('Total time:', model + '.maxElapsedTimeMs', 'maxElapsedTimeMs', 'true', '60000', '0', 'Total time in ms for execution of retry attempt')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Interval:
-            ignite-form-field-tooltip
-                | Time in ms between retry attempts
-            ignite-form-field-input-number(
-                data-id='sleepMsBetweenRetries'
-                data-name='sleepMsBetweenRetries'
-                data-ng-model='#{model}.sleepMsBetweenRetries'
-                data-placeholder='1000'
-            )
+        +number('Interval:', model + '.sleepMsBetweenRetries', 'sleepMsBetweenRetries', 'true', '1000', '0', 'Time in ms between retry attempts')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 5ce730e..f326607 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
@@ -14,6 +14,8 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem'
 
 form.panel.panel-default(name='igfs' novalidate)
@@ -27,29 +29,9 @@ form.panel.panel-default(name='igfs' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | IGFS: #[a(ui-sref='base.configuration.igfs({id: #{model}._id})') (add)]
-                        ignite-form-field-tooltip
-                            | Select IGFS to start in cluster or add a new IGFS
-                        ignite-form-field-dropdown(
-                            data-id='igfss'
-                            data-name='igfss'
-                            data-options='igfss'
-                            data-multiple='true'
-                            data-ng-model='#{model}.igfss'
-                            data-ng-disabled='!igfss.length'
-                            data-placeholder='{{ igfss.length ? "Choose IGFS": "No IGFS configured" }}'
-                        )
-            ignite-ui-ace-tabs.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='mode')
-                        ignite-ui-ace-java(data-master='backupItem' data-generator='igfss' data-detail='igfss' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='igfss' data-detail='igfss' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                    +dropdown-multiple('<span>IGFS:</span>' +
+                        '<a ui-sref="base.configuration.igfs({id: ' + model + '._id})"> (add)</a>',
+                        model + '.igfss', 'igfss', 'Choose IGFS', 'No IGFS configured', 'igfss',
+                        'Select IGFS to start in cluster or add a new IGFS')
+            .col-sm-6
+                +preview-xml-java(model, 'igfss')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 dc28bdf..6f752ed 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
@@ -14,7 +14,11 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
-- var model = 'backupItem.marshaller'
+include ../../../../../app/helpers/jade/mixins.jade
+
+- var model = 'backupItem'
+- var marshaller = model + '.marshaller'
+- var optMarshaller = marshaller + '.OptimizedMarshaller'
 
 form.panel.panel-default(name='marshaller' novalidate)
     .panel-heading(bs-collapse-toggle ng-click='__show__ = true')
@@ -28,106 +32,37 @@ form.panel.panel-default(name='marshaller' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Marshaller:
-                        ignite-form-field-tooltip
-                            | Instance of marshaller to use in grid#[br]
-                            | If not provided, BinaryMarshaller will be used
-                        ignite-form-field-dropdown(
-                            data-id='kind'
-                            data-name='kind'
-                            data-options='[\
-                                {value: "OptimizedMarshaller", label: "OptimizedMarshaller"},\
-                                {value: "JdkMarshaller", label: "JdkMarshaller"},\
-                                {value: undefined, label: "Not set"}\
-                            ]'
-                            data-ng-model='#{model}.kind'
-                            data-placeholder='Choose marshaller'
-                        )
-
+                    +dropdown('Marshaller:', marshaller + '.kind', 'kind', 'true', 'Choose marshaller',
+                        '[\
+                            {value: "OptimizedMarshaller", label: "OptimizedMarshaller"},\
+                            {value: "JdkMarshaller", label: "JdkMarshaller"},\
+                            {value: undefined, label: "Not set"}\
+                        ]',
+                        'Instance of marshaller to use in grid<br/>\
+                        If not provided, BinaryMarshaller will be used')
                     a.customize(
-                        ng-if='#{model}.kind && #{model}.kind === "OptimizedMarshaller"'
-                        ng-click='#{model}.expanded = !#{model}.expanded'
-                    ) {{ #{model}.expanded ? "Hide settings" : "Show settings"}}
-
+                        ng-if='#{marshaller}.kind && #{marshaller}.kind === "OptimizedMarshaller"'
+                        ng-click='#{marshaller}.expanded = !#{marshaller}.expanded'
+                    ) {{ #{marshaller}.expanded ? "Hide settings" : "Show settings"}}
                 .settings-row
-                    .panel-details.col-sm-12(ng-if='#{model}.expanded && #{model}.kind === "OptimizedMarshaller"')
+                    .panel-details.col-sm-12(ng-if='#{marshaller}.expanded && #{marshaller}.kind === "OptimizedMarshaller"')
                         .details-row
-                            ignite-form-field
-                                ignite-form-field-label
-                                    | Streams pool size:
-                                ignite-form-field-tooltip
-                                    | Specifies size of cached object streams used by marshaller#[br]
-                                    | Object streams are cached for performance reason to avoid costly recreation for every serialization routine#[br]
-                                    | If 0 (default), pool is not used and each thread has its own cached object stream which it keeps reusing#[br]
-                                    | Since each stream has an internal buffer, creating a stream for each thread can lead to high memory consumption if many large messages are marshalled or unmarshalled concurrently#[br]
-                                    | Consider using pool in this case. This will limit number of streams that can be created and, therefore, decrease memory consumption#[br]
-                                    | NOTE: Using streams pool can decrease performance since streams will be shared between different threads which will lead to more frequent context switching
-                                ignite-form-field-input-number(
-                                    data-id='poolSize'
-                                    data-name='poolSize'
-                                    data-ng-model='#{model}.OptimizedMarshaller.poolSize'
-                                    data-placeholder='0'
-                                )
-
+                            +number('Streams pool size:', optMarshaller + '.poolSize', 'poolSize', 'true', '0', '0',
+                                'Specifies size of cached object streams used by marshaller<br/>\
+                                Object streams are cached for performance reason to avoid costly recreation for every serialization routine<br/>\
+                                If 0 (default), pool is not used and each thread has its own cached object stream which it keeps reusing<br/>\
+                                Since each stream has an internal buffer, creating a stream for each thread can lead to high memory consumption if many large messages are marshalled or unmarshalled concurrently<br/>\
+                                Consider using pool in this case. This will limit number of streams that can be created and, therefore, decrease memory consumption<br/>\
+                                NOTE: Using streams pool can decrease performance since streams will be shared between different threads which will lead to more frequent context switching')
                         .details-row
-                            ignite-form-field.checkbox
-                                ignite-form-field-input-checkbox(
-                                    data-id='requireSerializable'
-                                    data-name='requireSerializable'
-                                    data-ng-model='#{model}.OptimizedMarshaller.requireSerializable'
-                                )
-                                | Require serializable
-                                ignite-form-field-tooltip
-                                    | Whether marshaller should require Serializable interface or not
-
+                            +checkbox('Require serializable', optMarshaller + '.requireSerializable', 'requireSerializable',
+                                'Whether marshaller should require Serializable interface or not')
                 .settings-row
-                    ignite-form-field.checkbox
-                        ignite-form-field-input-checkbox(
-                            data-id='marshalLocalJobs'
-                            data-name='marshalLocalJobs'
-                            data-ng-model='backupItem.marshalLocalJobs'
-                        )
-                        | Marshal local jobs
-                        ignite-form-field-tooltip
-                            | If this flag is enabled, jobs mapped to local node will be marshalled as if it was remote node
-
+                    +checkbox('Marshal local jobs', model + '.marshalLocalJobs', 'marshalLocalJobs', 'If this flag is enabled, jobs mapped to local node will be marshalled as if it was remote node')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Keep alive time:
-                        ignite-form-field-tooltip
-                            | Keep alive time of thread pool that is in charge of processing marshaller messages
-                        ignite-form-field-input-number(
-                            data-id='marshallerCacheKeepAliveTime'
-                            data-name='marshallerCacheKeepAliveTime'
-                            data-ng-model='backupItem.marshallerCacheKeepAliveTime'
-                            data-placeholder='10000'
-                        )
-
+                    +number('Keep alive time:', model + '.marshallerCacheKeepAliveTime', 'marshallerCacheKeepAliveTime', 'true', '10000', '0')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Pool size:
-                        ignite-form-field-tooltip
-                            | Default size of thread pool that is in charge of processing marshaller messages
-                        ignite-form-field-input-number(
-                            data-id='marshallerCacheThreadPoolSize'
-                            data-name='marshallerCacheThreadPoolSize'
-                            data-ng-model='backupItem.marshallerCacheThreadPoolSize'
-                            data-placeholder='max(8, availableProcessors) * 2'
-                        )
-
-            ignite-ui-ace-tabs.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='mode')
-                        ignite-ui-ace-java(data-master='backupItem' data-generator='clusterMarshaller' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterMarshaller' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                    +number('Pool size:', model + '.marshallerCacheThreadPoolSize', 'marshallerCacheThreadPoolSize', 'true', 'max(8, availableProcessors) * 2', '0',
+                        'Default size of thread pool that is in charge of processing marshaller messages')
+            .col-sm-6
+                +preview-xml-java(model, 'clusterMarshaller')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 0ed99e6..bcfe977 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
@@ -14,6 +14,8 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem'
 
 form.panel.panel-default(name='metrics' novalidate)
@@ -27,63 +29,21 @@ form.panel.panel-default(name='metrics' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field(data-label='Elapsed time')
-                        ignite-form-field-tooltip
-                            |Time in milliseconds after which a certain metric value is considered expired
-                        ignite-form-field-input-number(
-                            data-id='metricsExpireTime'
-                            data-name='metricsExpireTime'
-                            data-ng-model='#{model}.metricsExpireTime'
-                            data-min='1'
-                            data-placeholder='Long.MAX_VALUE'
-                        )
-
+                    +number('Elapsed time:', model + '.metricsExpireTime', 'metricsExpireTime', 'true', 'Long.MAX_VALUE', '1',
+                        'Time in milliseconds after which a certain metric value is considered expired')
                 .settings-row
-                    ignite-form-field(data-label='History size')
-                        ignite-form-field-tooltip
-                            | Number of metrics kept in history to compute totals and averages
-                        ignite-form-field-input-number(
-                            data-id='metricsHistorySize'
-                            data-name='metricsHistorySize'
-                            data-ng-model='#{model}.metricsHistorySize'
-                            data-placeholder='10000'
-                            data-min='1'
-                        )
-
+                    +number('History size:', model + '.metricsHistorySize', 'metricsHistorySize', 'true', '10000', '1',
+                        'Number of metrics kept in history to compute totals and averages')
                 .settings-row
-                    ignite-form-field(data-label='Log frequency')
-                        ignite-form-field-tooltip
-                            | Frequency of metrics log print out. To disable set to 0
-                        ignite-form-field-input-number(
-                            data-id='metricsLogFrequency'
-                            data-name='metricsLogFrequency'
-                            data-ng-model='#{model}.metricsLogFrequency'
-                            data-placeholder='60000'
-                        )
-
+                    +number('Log frequency:', model + '.metricsLogFrequency', 'metricsLogFrequency', 'true', '60000', '0',
+                        'Frequency of metrics log print out. To disable set to 0')
                 .settings-row
-                    ignite-form-field(data-label='Update frequency')
-                        ignite-form-field-tooltip
-                            | Job metrics update frequency in milliseconds
-                            ul
-                                li If set to -1 job metrics are never updated
-                                li If set to 0 job metrics are updated on each job start and finish
-                                li Positive value defines the actual update frequency
-                        ignite-form-field-input-number(
-                            data-id='metricsUpdateFrequency'
-                            data-name='metricsUpdateFrequency'
-                            data-ng-model='#{model}.metricsUpdateFrequency'
-                            data-placeholder='2000'
-                        )
-            ignite-ui-ace-tabs.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='mode')
-                        ignite-ui-ace-java(data-master='backupItem' data-generator='clusterMetrics' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterMetrics' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                    +number('Update frequency:', model + '.metricsUpdateFrequency', 'metricsUpdateFrequency', 'true', '2000', '0',
+                        'Job metrics update frequency in milliseconds\
+                        <ul>\
+                            <li>If set to -1 job metrics are never updated</li>\
+                            <li>If set to 0 job metrics are updated on each job start and finish</li>\
+                            <li>Positive value defines the actual update frequency</li>\
+                        </ul>')
+            .col-sm-6
+                +preview-xml-java(model, 'clusterMetrics')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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
deleted file mode 100644
index fb67326..0000000
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/preview-panel.directive.js
+++ /dev/null
@@ -1,239 +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.
- */
-
-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 stage Start stage of animation.
-     * @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, [igniteUiAceTabs1, igniteUiAceTabs2]) => {
-        const igniteUiAceTabs = igniteUiAceTabs1 || igniteUiAceTabs2;
-
-        if (!igniteUiAceTabs)
-            return;
-
-        igniteUiAceTabs.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');
-        };
-
-        igniteUiAceTabs.onChange = onChange;
-    };
-
-    return {
-        restrict: 'C',
-        link,
-        require: ['?igniteUiAceTabs', '?^igniteUiAceTabs']
-    };
-}]];

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 39387c3..cb4ed65 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
@@ -14,44 +14,14 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../app/helpers/jade/mixins.jade
+
 - var cluster = 'backupItem'
 - var enabled = 'backupItem.sslEnabled'
 - var model = cluster + '.sslContextFactory'
 - var trust = model + '.trustManagers'
 - var form = 'trustManagers'
 
-mixin trstMgrField(field, save, newItem)
-    - var reset = (newItem ? 'group.add = []' : 'field.edit = false')
-    - var resetOnEnter = (newItem ? '(stopblur = true) && (group.add = [{}])' : '(field.edit = false)')
-    - var resetOnBlur = (newItem ? '!stopblur && (group.add = [])' : 'field.edit = false')
-
-    ignite-form-field-java-class(
-        data-name='#{field}'
-        data-ng-model='#{field}'
-        data-ng-required='true'
-        data-ignite-unique='#{trust}'
-        data-ignite-form-field-input-autofocus='true'
-        on-enter='#{valid} && (#{save}); #{valid} && #{resetOnEnter};'
-        on-escape='#{reset}'
-        ng-blur='#{valid} && (#{save}); #{resetOnBlur};'
-    )
-        block
-
-mixin trstMgrSaveBtn(valid, save, reset)
-    i.fa.fa-floppy-o(
-        ng-show='#{valid}'
-        ng-click='#{valid} && (#{save}); #{valid} && (#{reset});'
-        bs-tooltip
-        data-title='Click icon or press [Enter] to save item'
-    )
-
-mixin trstMgrFeedbackUnique(field)
-    i.fa.fa-exclamation-triangle.form-control-feedback(
-        ng-show='!#{form}.#{field}.$pristine && #{form}.#{field}.$error.igniteUnique'
-        bs-tooltip
-        data-title='Such trust manager already exists!'
-    )
-
 form.panel.panel-default(name='#{form}' novalidate)
     .panel-heading(bs-collapse-toggle ng-click='__show__ = true')
         ignite-form-panel-chevron
@@ -63,80 +33,24 @@ form.panel.panel-default(name='#{form}' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field.checkbox
-                        ignite-form-field-input-checkbox(
-                            data-id='sslEnabled'
-                            data-name='sslEnabled'
-                            data-ng-model='#{enabled}'
-                        )
-                        | Enabled
-                        ignite-form-field-tooltip
-                            | Flag indicating whether to configure SSL configuration
-                
+                    +checkbox('Enabled', enabled, 'sslEnabled', 'Flag indicating whether to configure SSL configuration')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Algorithm to create a key manager:
-                        ignite-form-field-tooltip
-                            | Sets key manager algorithm that will be used to create a key manager,#[br]
-                            | Notice that in most cased default value suites well, however, on Android platform this value need to be set to X509
-                        ignite-form-field-input-datalist(
-                            data-id='keyAlgorithm'
-                            data-name='keyAlgorithm'
-                            data-options='["SumX509", "X509"]'
-                            data-ng-model='#{model}.keyAlgorithm'
-                            data-placeholder='SumX509'
-                            data-ng-disabled='!#{enabled}'
-                        )
-
+                    +text-options('Algorithm to create a key manager:', model + '.keyAlgorithm', 'keyAlgorithm', '["SumX509", "X509"]', enabled, 'SumX509',
+                        'Sets key manager algorithm that will be used to create a key manager<br/>\
+                        Notice that in most cased default value suites well, however, on Android platform this value need to be set to X509')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Key store file:
-                        ignite-form-field-tooltip
-                            | Path to the key store file,#[br]
-                            | This is a mandatory parameter since ssl context could not be initialized without key manager
-                        ignite-form-field-input-text(
-                            data-id='keyStoreFilePath'
-                            data-name='keyStoreFilePath'
-                            data-ng-model='#{model}.keyStoreFilePath'
-                            data-placeholder='Path to the key store file'
-                            data-ng-required='#{enabled}'
-                            data-ng-disabled='!#{enabled}'
-                        )
-
+                    +text-enabled('Key store file:', model + '.keyStoreFilePath', 'keyStoreFilePath', enabled, enabled, 'Path to the key store file',
+                        'Path to the key store file<br/>\
+                        This is a mandatory parameter since ssl context could not be initialized without key manager')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Key store type:
-                        ignite-form-field-tooltip
-                            | Key store type used in context initialization
-                        ignite-form-field-input-datalist(
-                            data-id='keyStoreType'
-                            data-name='keyStoreType'
-                            data-options='["JKS", "PCKS11", "PCKS12"]'
-                            data-ng-model='#{model}.keyStoreType'
-                            data-placeholder='JKS'
-                            data-ng-disabled='!#{enabled}'
-                        )
-
+                    +text-options('Key store type:', model + '.keyStoreType', 'keyStoreType', '["JKS", "PCKS11", "PCKS12"]', enabled, 'JKS',
+                        'Key store type used in context initialization')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Protocol:
-                        ignite-form-field-tooltip
-                            | Protocol for secure transport
-                        ignite-form-field-input-datalist(
-                            data-id='protocol'
-                            data-name='protocol'
-                            data-options='["TSL", "SSL"]'
-                            data-ng-model='#{model}.protocol'
-                            data-placeholder='TSL'
-                            data-ng-disabled='!#{enabled}'
-                        )
-
+                    +text-options('Protocol:', model + '.protocol', 'protocol', '["TSL", "SSL"]', enabled, 'TSL', 'Protocol for secure transport')
                 .settings-row
                     ignite-form-group(ng-form='trustManagers' ng-model='#{trust}')
+                        - var uniqueTip = 'Such trust manager already exists!'
+
                         ignite-form-field-label
                             | Trust managers
                         ignite-form-group-tooltip
@@ -152,72 +66,31 @@ form.panel.panel-default(name='#{form}' novalidate)
 
                             ignite-form-field(ng-repeat='model in #{trust} track by $index' type='internal' name='Trust manager')
                                 .indexField
-                                    | {{ $index+1 }}) 
-                                i.tipField.fa.fa-remove(
-                                    ng-show='#{enabled}'
-                                    ng-hide='field.edit'
-                                    bs-tooltip='"Remove trust manager"'
-                                    ng-click='#{enabled} && (#{trust}.splice(#{trust}.indexOf(model), 1))'
-                                )
+                                    | {{ $index+1 }})
+                                +table-remove-conditional-button(trust, enabled, 'Remove trust manager')
                                 span(ng-hide='field.edit')
                                     a.labelFormField(ng-click='#{enabled} && (field.edit = true)') {{ model }}
                                 span(ng-if='field.edit' ng-init='#{field} = model')
-                                    +trstMgrField(field, save, false)
-                                        +trstMgrSaveBtn(valid, save, reset)
-                                        +trstMgrFeedbackUnique(field)
+                                    +table-java-class-field(field, trust, save, false)
+                                        +table-save-button(valid, save, false)
+                                        +table-feedback-unique(form, field, uniqueTip)
 
                         .group-content(ng-repeat='field in group.add')
                             - var field = 'new'
                             - var valid = form + '.' + field + '.$valid'
                             - var save = trust + '.push(' + field + ')'
-                            - var reset = 'group.add = []'
 
                             ignite-form-field(type='internal' name='Trust manager')
-                                +trstMgrField(field, save, true)
-                                    +trstMgrSaveBtn(valid, save, reset)
-                                    +trstMgrFeedbackUnique(field)
+                                +table-java-class-field(field, trust, save, true)
+                                    +table-save-button(valid, save, true)
+                                    +table-feedback-unique(form, field, uniqueTip)
 
                         .group-content-empty(ng-if='!(#{trust}.length) && !group.add.length')
                             | Not defined
 
                 .settings-row(ng-if='!#{trust}.length')
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Trust store file:
-                        ignite-form-field-tooltip
-                            | Path to the trust store file
-                        ignite-form-field-input-text(
-                            data-id='trustStoreFilePath'
-                            data-name='trustStoreFilePath'
-                            data-ng-model='#{model}.trustStoreFilePath'
-                            data-placeholder='Path to the trust store file'
-                            data-ng-disabled='!#{enabled}'
-                        )
-
+                    +text-enabled('Trust store file:', model + '.trustStoreFilePath', 'trustStoreFilePath', enabled, 'false', 'Path to the trust store file', 'Path to the trust store file')
                 .settings-row(ng-if='!#{trust}.length')
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Trust store type:
-                        ignite-form-field-tooltip
-                            | Trust store type used in context initialization
-                        ignite-form-field-input-datalist(
-                            data-id='trustStoreType'
-                            data-name='trustStoreType'
-                            data-options='["JKS", "PCKS11", "PCKS12"]'
-                            data-ng-model='#{model}.trustStoreType'
-                            data-placeholder='JKS'
-                            data-ng-disabled='!#{enabled}'
-                        )                        
- 
-            ignite-ui-ace-tabs.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='mode')
-                        ignite-ui-ace-java(data-master='backupItem' data-generator='clusterSsl' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterSsl' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                    +text-options('Trust store type:', model + '.trustStoreType', 'trustStoreType', '["JKS", "PCKS11", "PCKS12"]', enabled, 'JKS', 'Trust store type used in context initialization')
+            .col-sm-6
+                +preview-xml-java(cluster, 'clusterSsl')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 22a3725..0672c22 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
@@ -14,7 +14,11 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
-- var model = 'backupItem.swapSpaceSpi'
+include ../../../../../app/helpers/jade/mixins.jade
+
+- var model = 'backupItem'
+- var swapModel = model + '.swapSpaceSpi'
+- var fileSwapModel = swapModel + '.FileSwapSpaceSpi'
 
 form.panel.panel-default(name='swapSpaceSpi' novalidate)
     .panel-heading(bs-collapse-toggle ng-click='__show__ = true')
@@ -27,106 +31,36 @@ form.panel.panel-default(name='swapSpaceSpi' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Swap space SPI:
-                        ignite-form-field-tooltip
-                            | Provides a mechanism in grid for storing data on disk#[br]
-                            | Ignite cache uses swap space to overflow data to disk if it cannot fit in memory
-                        ignite-form-field-dropdown(
-                            data-id='swapSpaceSpi'
-                            data-name='swapSpaceSpi'
-                            data-options='[\
-                                {value: "FileSwapSpaceSpi", label: "File-based swap"},\
-                                {value: undefined, label: "Not set"}\
-                            ]'
-                            data-ng-model='#{model}.kind'
-                            data-placeholder='Choose swap SPI'
-                        )
-                        
+                    +dropdown('Swap space SPI:', swapModel + '.kind', 'swapSpaceSpi', 'true', 'Choose swap SPI',
+                        '[\
+                            {value: "FileSwapSpaceSpi", label: "File-based swap"},\
+                            {value: undefined, label: "Not set"}\
+                        ]',
+                        'Provides a mechanism in grid for storing data on disk<br/>\
+                        Ignite cache uses swap space to overflow data to disk if it cannot fit in memory')
                     a.customize(
-                        ng-if='#{model}.kind'
-                        ng-click='#{model}.expanded = !#{model}.expanded'
-                    ) {{ #{model}.expanded ? "Hide settings" : "Show settings"}}
-
+                        ng-if='#{swapModel}.kind'
+                        ng-click='#{swapModel}.expanded = !#{swapModel}.expanded'
+                    ) {{ #{swapModel}.expanded ? "Hide settings" : "Show settings"}}
                 .settings-row
-                    .panel-details.col-sm-12(ng-if='#{model}.expanded && #{model}.kind')
+                    .panel-details.col-sm-12(ng-if='#{swapModel}.expanded && #{swapModel}.kind')
                         .details-row
-                            ignite-form-field
-                                ignite-form-field-label
-                                    | Base directory:
-                                ignite-form-field-tooltip
-                                    | Base directory where to write files
-                                ignite-form-field-input-text(
-                                    data-id='baseDirectory'
-                                    data-name='baseDirectory'
-                                    data-ng-model='#{model}.FileSwapSpaceSpi.baseDirectory'
-                                    data-placeholder='swapspace'
-                                )
+                            +text('Base directory:', fileSwapModel + '.baseDirectory', 'baseDirectory', 'false', 'swapspace',
+                                'Base directory where to write files')
                         .details-row
-                            ignite-form-field
-                                ignite-form-field-label
-                                    | Read stripe size:
-                                ignite-form-field-tooltip
-                                    | Read stripe size defines number of file channels to be used concurrently
-                                ignite-form-field-input-number(
-                                    data-id='readStripesNumber'
-                                    data-name='readStripesNumber'
-                                    data-ng-model='#{model}.FileSwapSpaceSpi.readStripesNumber'
-                                    data-placeholder='availableProcessors'
-                                )
+                            +number('Read stripe size:', fileSwapModel + '.readStripesNumber', 'readStripesNumber', 'true', 'availableProcessors', '0',
+                                'Read stripe size defines number of file channels to be used concurrently')
                         .details-row
-                            ignite-form-field
-                                ignite-form-field-label
-                                    | Maximum sparsity:
-                                ignite-form-field-tooltip
-                                    | This property defines maximum acceptable wasted file space to whole file size ratio#[br]
-                                    | When this ratio becomes higher than specified number compacting thread starts working
-                                ignite-form-field-input-number(
-                                    data-id='maximumSparsity'
-                                    data-name='maximumSparsity'
-                                    data-ng-model='#{model}.FileSwapSpaceSpi.maximumSparsity'
-                                    data-placeholder='0.5'
-                                    data-max='0.999'
-                                    data-min='0'
-                                )
+                            +number-min-max-step('Maximum sparsity:', fileSwapModel + '.maximumSparsity', maximumSparsity, 'true', '0.5', '0', '0.999', '0.05',
+                                'This property defines maximum acceptable wasted file space to whole file size ratio<br/>\
+                                When this ratio becomes higher than specified number compacting thread starts working')
                         .details-row
-                            ignite-form-field
-                                ignite-form-field-label
-                                    | Max write queue size:
-                                ignite-form-field-tooltip
-                                    | Max write queue size in bytes#[br]
-                                    | If there are more values are waiting for being written to disk then specified size, SPI will block on store operation
-                                ignite-form-field-input-number(
-                                    data-id='maxWriteQueueSize'
-                                    data-name='maxWriteQueueSize'
-                                    data-ng-model='#{model}.FileSwapSpaceSpi.maxWriteQueueSize'
-                                    data-placeholder='1024 * 1024'
-                                )
+                            +number('Max write queue size:', fileSwapModel + '.maxWriteQueueSize', 'maxWriteQueueSize', 'true', '1024 * 1024', '0',
+                                'Max write queue size in bytes<br/>\
+                                If there are more values are waiting for being written to disk then specified size, SPI will block on store operation')
                         .details-row
-                            ignite-form-field
-                                ignite-form-field-label
-                                    | Write buffer size:
-                                ignite-form-field-tooltip
-                                    | Write buffer size in bytes#[br]
-                                    | Write to disk occurs only when this buffer is full
-                                ignite-form-field-input-number(
-                                    data-id='writeBufferSize'
-                                    data-name='writeBufferSize'
-                                    data-ng-model='#{model}.FileSwapSpaceSpi.writeBufferSize'
-                                    data-placeholder='64 * 1024'
-                                )
-
-
-            ignite-ui-ace-tabs.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='mode')
-                        ignite-ui-ace-java(data-master='backupItem' data-generator='clusterSwap' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterSwap' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                            +number('Write buffer size:', fileSwapModel + '.writeBufferSize', 'writeBufferSize', 'true', '64 * 1024', '0',
+                                'Write buffer size in bytes<br/>\
+                                Write to disk occurs only when this buffer is full')
+            .col-sm-6
+                +preview-xml-java(model, 'clusterSwap')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 cabcab2..ad526ed 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
@@ -14,6 +14,8 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem'
 
 form.panel.panel-default(name='thread' novalidate)
@@ -27,69 +29,19 @@ form.panel.panel-default(name='thread' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field(data-label='Public')
-                        ignite-form-field-tooltip
-                            | Thread pool that is in charge of processing ComputeJob, GridJobs and user messages sent to node
-                        ignite-form-field-input-number(
-                            data-id='publicThreadPoolSize'
-                            data-name='publicThreadPoolSize'
-                            data-ng-model='#{model}.publicThreadPoolSize'
-                            data-placeholder='max(8, availableProcessors) * 2'
-                            data-min='1'
-                        )
+                    +number('Public:', model + '.publicThreadPoolSize', 'publicThreadPoolSize', 'true', 'max(8, availableProcessors) * 2', '1',
+                        'Thread pool that is in charge of processing ComputeJob, GridJobs and user messages sent to node')
                 .settings-row
-                    ignite-form-field(data-label='System')
-                        ignite-form-field-tooltip
-                            | Thread pool that is in charge of processing internal system messages
-                        ignite-form-field-input-number(
-                            data-id='systemThreadPoolSize'
-                            data-name='systemThreadPoolSize'
-                            data-ng-model='#{model}.systemThreadPoolSize'
-                            data-placeholder='max(8, availableProcessors) * 2'
-                            data-min='1'
-                        )
+                    +number('System:', model + '.systemThreadPoolSize', 'systemThreadPoolSize', 'true', 'max(8, availableProcessors) * 2', '1',
+                        'Thread pool that is in charge of processing internal system messages')
                 .settings-row
-                    ignite-form-field(data-label='Management')
-                        ignite-form-field-tooltip
-                            | Thread pool that is in charge of processing internal and Visor ComputeJob, GridJobs
-                        ignite-form-field-input-number(
-                            data-id='managementThreadPoolSize'
-                            data-name='managementThreadPoolSize'
-                            data-ng-model='#{model}.managementThreadPoolSize'
-                            data-placeholder='4'
-                            data-min='1'
-                        )
+                    +number('Management:', model + '.managementThreadPoolSize', 'managementThreadPoolSize', 'true', '4', '1',
+                        'Thread pool that is in charge of processing internal and Visor ComputeJob, GridJobs')
                 .settings-row
-                    ignite-form-field(data-label='IGFS')
-                        ignite-form-field-tooltip
-                            | Thread pool that is in charge of processing outgoing IGFS messages
-                        ignite-form-field-input-number(
-                            data-id='igfsThreadPoolSize'
-                            data-name='igfsThreadPoolSize'
-                            data-ng-model='#{model}.igfsThreadPoolSize'
-                            data-placeholder='availableProcessors'
-                            data-min='1'
-                        )
+                    +number('IGFS:', model + '.igfsThreadPoolSize', 'igfsThreadPoolSize', 'true', 'availableProcessors', '1',
+                        'Thread pool that is in charge of processing outgoing IGFS messages')
                 .settings-row
-                    ignite-form-field(data-label='Rebalance')
-                        ignite-form-field-tooltip
-                            | Max count of threads can be used at rebalancing
-                        ignite-form-field-input-number(
-                            data-id='rebalanceThreadPoolSize'
-                            data-name='rebalanceThreadPoolSize'
-                            data-ng-model='#{model}.rebalanceThreadPoolSize'
-                            data-placeholder='1'
-                            data-min='1'
-                        )
-            ignite-ui-ace-tabs.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='mode')
-                        ignite-ui-ace-java(data-master='backupItem' data-generator='clusterPools' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterPools' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                    +number('Rebalance:', model + '.rebalanceThreadPoolSize', 'rebalanceThreadPoolSize', 'true', '1', '1',
+                        'Max count of threads can be used at rebalancing')
+            .col-sm-6
+                +preview-xml-java(model, 'clusterPools')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 239a820..cade190 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
@@ -14,6 +14,8 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem'
 
 form.panel.panel-default(name='time' novalidate)
@@ -27,67 +29,18 @@ form.panel.panel-default(name='time' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Samples size
-                        ignite-form-field-tooltip
-                            | Number of samples used to synchronize clocks between different nodes#[br]
-                            | Clock synchronization is used for cache version assignment in CLOCK order mode
-                        ignite-form-field-input-number(
-                            data-id='clockSyncSamples'
-                            data-name='clockSyncSamples'
-                            data-ng-model='#{model}.clockSyncSamples'
-                            data-placeholder='8'
-                        )
+                    +number('Samples size:', model + '.clockSyncSamples', 'clockSyncSamples', 'true', '8', '0',
+                        'Number of samples used to synchronize clocks between different nodes<br/>\
+                        Clock synchronization is used for cache version assignment in CLOCK order mode')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Frequency
-                        ignite-form-field-tooltip
-                            | Frequency at which clock is synchronized between nodes, in milliseconds#[br]
-                            | Clock synchronization is used for cache version assignment in CLOCK order mode
-                        ignite-form-field-input-number(
-                            data-id='clockSyncFrequency'
-                            data-name='clockSyncFrequency'
-                            data-ng-model='#{model}.clockSyncFrequency'
-                            data-placeholder='120000'
-                        )
+                    +number('Frequency:', model + '.clockSyncFrequency', 'clockSyncFrequency', 'true', '120000', '0',
+                        'Frequency at which clock is synchronized between nodes, in milliseconds<br/>\
+                        Clock synchronization is used for cache version assignment in CLOCK order mode')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Port base
-                        ignite-form-field-tooltip
-                            | Time server provides clock synchronization between nodes#[br]
-                            | Base UPD port number for grid time server. Time server will be started on one of free ports in range
-                        ignite-form-field-input-number(
-                            data-id='timeServerPortBase'
-                            data-name='timeServerPortBase'
-                            data-ng-model='#{model}.timeServerPortBase'
-                            data-placeholder='31100'
-                            data-max='65535'
-                        )
+                    +number-min-max('Port base:', model + '.timeServerPortBase', 'timeServerPortBase', 'true', '31100', '0', '65535',
+                        'Time server provides clock synchronization between nodes<br/>\
+                        Base UPD port number for grid time server. Time server will be started on one of free ports in range')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Port range
-                        ignite-form-field-tooltip
-                            | Time server port range
-                        ignite-form-field-input-number(
-                            data-id='timeServerPortRange'
-                            data-name='timeServerPortRange'
-                            data-ng-model='#{model}.timeServerPortRange'
-                            data-placeholder='100'
-                            data-min='1'
-                        )
-            ignite-ui-ace-tabs.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='mode')
-                        ignite-ui-ace-java(data-master='backupItem' data-generator='clusterTime' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterTime' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                    +number('Port range:', model + '.timeServerPortRange', 'timeServerPortRange', 'true', '100', '1', 'Time server port range')
+            .col-sm-6
+                +preview-xml-java(model, 'clusterTime')