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:04 UTC

[24/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/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 842506f..20312e7 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
@@ -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'
 - var exclude = model + '.peerClassLoadingLocalClassPathExclude'
 - var form = 'deployment'
@@ -21,9 +23,9 @@
 
 mixin feedback(name, error, message)
     i.fa.fa-exclamation-triangle.form-control-feedback(
-        ng-show='!#{form}.#{name}.$pristine && #{form}.#{name}.$error.#{error}'
+        ng-show=form + '.' + name +  '.$error.' + error
         bs-tooltip
-        data-title='#{message}'
+        data-title=message
     )
 
 form.panel.panel-default(name='#{form}' novalidate)
@@ -37,160 +39,71 @@ form.panel.panel-default(name='#{form}' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Deployment mode:
-                        ignite-form-field-tooltip
-                            | Task classes and resources sharing mode#[br]
-                            | The following deployment modes are supported:#[br]
-                            ul
-                                li PRIVATE - in this mode deployed classes do not share resources
-                                li ISOLATED - in this mode tasks or classes deployed within the same class loader will share the same instances of resources
-                                li SHARED - same as ISOLATED, but now tasks from different master nodes with the same user version and same class loader will share the same class loader on remote nodes
-                                li CONTINUOUS - same as SHARED deployment mode, but resources will not be undeployed even after all master nodes left grid
-                        ignite-form-field-dropdown(
-                            data-id='deploymentMode'
-                            data-name='deploymentMode'
-                            data-options='[\
-                                {value: "PRIVATE", label: "PRIVATE"},\
-                                {value: "ISOLATED", label: "ISOLATED"}, \
-                                {value: "SHARED", label: "SHARED"},\
-                                {value: "CONTINUOUS", label: "CONTINUOUS"}\
-                            ]'
-                            data-ng-model='#{model}.deploymentMode'
-                            data-placeholder='SHARED'
-                        )
+                    +dropdown('Deployment mode:', model + '.deploymentMode', 'deploymentMode', 'true', 'SHARED',
+                        '[\
+                            {value: "PRIVATE", label: "PRIVATE"},\
+                            {value: "ISOLATED", label: "ISOLATED"}, \
+                            {value: "SHARED", label: "SHARED"},\
+                            {value: "CONTINUOUS", label: "CONTINUOUS"}\
+                        ]',
+                        'Task classes and resources sharing mode<br/>\
+                        The following deployment modes are supported:\
+                        <ul>\
+                            <li>PRIVATE - in this mode deployed classes do not share resources</li>\
+                            <li>ISOLATED - in this mode tasks or classes deployed within the same class loader will share the same instances of resources</li>\
+                            <li>SHARED - same as ISOLATED, but now tasks from different master nodes with the same user version and same class loader will share the same class loader on remote nodes</li>\
+                            <li>CONTINUOUS - same as SHARED deployment mode, but resources will not be undeployed even after all master nodes left grid</li>\
+                        </ul>')
                 .settings-row
-                    ignite-form-field.checkbox
-                        ignite-form-field-input-checkbox(
-                            data-id='peerClassLoadingEnabled'
-                            data-name='peerClassLoadingEnabled'
-                            data-ng-model='#{model}.peerClassLoadingEnabled'
-                        )
-                        | Enable peer class loading
-                        ignite-form-field-tooltip
-                            | Enables/disables peer class loading
+                    +checkbox('Enable peer class loading', model + '.peerClassLoadingEnabled', 'peerClassLoadingEnabled', 'Enables/disables peer class loading')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Missed resources cache size:
-                        ignite-form-field-tooltip
-                            | If size greater than 0, missed resources will be cached and next resource request ignored
-                            | If size is 0, then request for the resource will be sent to the remote node every time this resource is requested
-                        ignite-form-field-input-number(
-                            data-id='peerClassLoadingMissedResourcesCacheSize'
-                            data-name='peerClassLoadingMissedResourcesCacheSize'
-                            data-ng-model='#{model}.peerClassLoadingMissedResourcesCacheSize'
-                            data-placeholder='100'
-                            data-ng-disabled='!#{enabled}'
-                        )
+                    +number('Missed resources cache size:', model + '.peerClassLoadingMissedResourcesCacheSize', 'peerClassLoadingMissedResourcesCacheSize', enabled, '100', '0',
+                        'If size greater than 0, missed resources will be cached and next resource request ignored<br/>\
+                        If size is 0, then request for the resource will be sent to the remote node every time this resource is requested')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Pool size:
-                        ignite-form-field-tooltip
-                            | Thread pool size to use for peer class loading
-                        ignite-form-field-input-number(
-                            data-id='peerClassLoadingThreadPoolSize'
-                            data-name='peerClassLoadingThreadPoolSize'
-                            data-ng-model='#{model}.peerClassLoadingThreadPoolSize'
-                            data-placeholder='2'
-                            data-ng-disabled='!#{enabled}'
-                            data-min='1'
-                        )
+                    +number('Pool size:', model + '.peerClassLoadingThreadPoolSize', 'peerClassLoadingThreadPoolSize', enabled, '2', '1', 'Thread pool size to use for peer class loading')
                 .settings-row
-                    ignite-form-group(ng-model='#{exclude}' ng-form='#{form}' )
+                    ignite-form-group(ng-model=exclude ng-form=form)
                         ignite-form-field-label
                             | Local class path exclude
                         ignite-form-group-tooltip
-                            | List of packages from the system classpath that need to be peer-to-peer loaded from task originating node#[br]
+                            | List of packages from the system classpath that need to be peer-to-peer loaded from task originating node<br/>
                             | '*' is supported at the end of the package name which means that all sub-packages and their classes are included like in Java package import clause
                         ignite-form-group-add(ng-show='#{enabled}' ng-click='(group.add = [{}])')
                             | Add package name.
 
-                        - var field = 'edit'
-                        - var valid = form + '.' + field + '.$valid'
-                        - var save = exclude + '[$index] = ' + field
+                        .group-content(ng-if=exclude + '.length')
+                            - var field = 'edit'
+                            - var valid = form + '.' + field + '.$valid'
+                            - var save = exclude + '[$index] = ' + field
 
-                        .group-content(ng-if='#{exclude}.length')
-                            ignite-form-field(ng-repeat='model in #{exclude} track by $index' type='internal')
+                            ignite-form-field(ng-repeat='model in #{exclude} track by $index' type='internal' name='Package name')
                                 .indexField
-                                    | {{ $index+1 }}) 
-                                i.tipField.fa.fa-remove(
-                                    ng-hide='field.edit'
-                                    bs-tooltip='"Remove package name"'
-                                    ng-click='#{exclude}.splice(#{exclude}.indexOf(model), 1)'
-                                )
+                                    | {{ $index+1 }})
+                                +table-remove-button(exclude, 'Remove package name')
                                 span(ng-hide='field.edit')
                                     a.labelFormField(ng-click='#{enabled} && (field.edit = true)') {{ model }}
                                 span(ng-if='field.edit' ng-init='#{field} = model')
-                                    ignite-form-field-input-text(
-                                        data-name='#{field}'
-                                        data-ng-model='#{field}'
-                                        data-ng-required='true'
-                                        data-placeholder='Enter package name'
-                                        data-java-keywords='true'
-                                        data-java-package-name='true'
-                                        data-ignite-unique='#{exclude}'
-                                        data-ignite-form-field-input-autofocus='true'
-                                        on-enter='#{valid} && (#{save}); #{valid} && (field.edit = false);'
-                                        on-escape='field.edit = false'
-                                        ng-blur='#{valid} && (#{save}); (field.edit = false)'
-                                    )
-                                        i.fa.fa-floppy-o(
-                                            ng-show='#{valid}'
-                                            ng-click='#{valid} && (#{save}); #{valid} && (field.edit = false);'
-                                            bs-tooltip 
-                                            data-title='Click icon or press [Enter] to save item' 
-                                        )
-
-                                        +feedback(field, 'required', 'Package name could not be empty')
+                                    +table-java-package-field(field, exclude, save, false)
+                                        +table-save-button(valid, save, false)
+                                        +table-feedback-unique(form, field, 'Such package already exists')
                                         +feedback(field, 'javaPackageName', 'Package name is invalid')
                                         +feedback(field, 'javaKeywords', 'Package name could not contains reserved java keyword')
-                                        +feedback(field, 'igniteUnique', 'Such package already exists')
-
-                        - var field = 'new'
-                        - var valid = form + '.' + field + '.$valid'
-                        - var push = exclude + '.push(' + field + ')'
 
                         .group-content(ng-repeat='field in group.add')
-                            ignite-form-field(type='internal')
-                                ignite-form-field-input-text(
-                                    data-name='#{field}'
-                                    data-ng-model='#{field}'
-                                    data-ng-required='true'
-                                    data-placeholder='Enter package name'
-                                    data-java-keywords='true'
-                                    data-java-package-name='true'
-                                    data-ignite-unique='#{exclude}'
-                                    data-ignite-form-field-input-autofocus='true'
-                                    on-enter='#{valid} && #{push}; #{valid} && (stopblur = true) && (group.add = [{}])'
-                                    on-escape='group.add = []'
-                                    ng-blur='#{valid} && #{push}; !stopblur && (group.add = [])'
-                                )
-                                    i.fa.fa-floppy-o(
-                                        ng-show='#{valid}'
-                                        ng-click='#{valid} && #{push}; #{valid} && (group.add = [])'
-                                        bs-tooltip 
-                                        data-title='Click icon or press [Enter] to save item' 
-                                    )
+                            - var field = 'new'
+                            - var valid = form + '.' + field + '.$valid'
+                            - var save = exclude + '.push(' + field + ')'
 
-                                    +feedback(field, 'required', 'Package name could not be empty')
+                            ignite-form-field(type='internal' name='Package name')
+                                +table-java-package-field(field, exclude, save, true)
+                                    +table-save-button(valid, save, true)
+                                    +table-feedback-unique(form, field, 'Such package already exists')
                                     +feedback(field, 'javaPackageName', 'Package name is invalid')
                                     +feedback(field, 'javaKeywords', 'Package name could not contains reserved java keyword')
-                                    +feedback(field, 'igniteUnique', 'Such package already exists')
-            
+
+
                         .group-content-empty(ng-if='!(#{exclude}.length) && !group.add.length')
                             | Not defined
-            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='clusterDeployment' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterDeployment' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+            .col-sm-6
+                +preview-xml-java(model, 'clusterDeployment')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 58959b6..6077ab5 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
@@ -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.discovery'
 
 form.panel.panel-default(name='discovery' novalidate)
@@ -27,292 +29,52 @@ form.panel.panel-default(name='discovery' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                   ignite-form-field
-                        ignite-form-field-label
-                            | Local address:
-                        ignite-form-field-tooltip
-                            | Local address
-                        ignite-form-field-input-text(
-                            data-id='discoLocalAddress'
-                            data-name='discoLocalAddress'
-                            data-ng-model='#{model}.localAddress'
-                            data-placeholder='228.1.2.4'
-                        )
+                    +text-ip-address('Local address:', model + '.localAddress', 'discoLocalAddress', 'true', '228.1.2.4', 'Local address')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Local port:
-                        ignite-form-field-tooltip
-                            | Local port which node uses
-                        ignite-form-field-input-number(
-                            data-id='discoLocalPort'
-                            data-name='discoLocalPort'
-                            data-ng-model='#{model}.localPort'
-                            data-min='1024'
-                            data-max='65535'
-                            data-placeholder='47500'
-                        )
+                    +number-min-max('Local port:', model + '.localPort', 'discoLocalPort', 'true', '47500', '1024', '65535', 'Local port which node uses')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Local port range:
-                        ignite-form-field-tooltip
-                            | Local port range
-                        ignite-form-field-input-number(
-                            data-id='discoLocalPortRange'
-                            data-name='discoLocalPortRange'
-                            data-ng-model='#{model}.localPortRange'
-                            data-placeholder='100'
-                            data-min='1'
-                        )
+                    +number('Local port range:', model + '.localPortRange', 'discoLocalPortRange', 'true', '100', '1', 'Local port range')
                 .settings-row
-                   ignite-form-field
-                        ignite-form-field-label
-                            | Address resolver:
-                        ignite-form-field-tooltip
-                            | Class name of resolution between external and internal addresses provider
-                        ignite-form-field-java-class(
-                            data-id='discoAddressResolver'
-                            data-name='discoAddressResolver'
-                            data-ng-model='#{model}.addressResolver'
-                        )
+                    +java-class('Address resolver:', model + '.addressResolver', 'discoAddressResolver', 'true', 'false',
+                        'Class name of resolution between external and internal addresses provider')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Socket timeout:
-                        ignite-form-field-tooltip
-                            | Socket operations timeout
-                        ignite-form-field-input-number(
-                            data-id='socketTimeout'
-                            data-name='socketTimeout'
-                            data-ng-model='#{model}.socketTimeout'
-                            data-placeholder='5000'
-                        )
+                    +number('Socket timeout:', model + '.socketTimeout', 'socketTimeout', 'true', '5000', '0', 'Socket operations timeout')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Acknowledgement timeout:
-                        ignite-form-field-tooltip
-                            | Message acknowledgement timeout
-                        ignite-form-field-input-number(
-                            data-id='ackTimeout'
-                            data-name='ackTimeout'
-                            data-ng-model='#{model}.ackTimeout'
-                            data-placeholder='5000'
-                        )
+                    +number('Acknowledgement timeout:', model + '.ackTimeout', 'ackTimeout', 'true', '5000', '0', 'Message acknowledgement timeout')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Max acknowledgement timeout:
-                        ignite-form-field-tooltip
-                            | Maximum message acknowledgement timeout
-                        ignite-form-field-input-number(
-                            data-id='maxAckTimeout'
-                            data-name='maxAckTimeout'
-                            data-ng-model='#{model}.maxAckTimeout'
-                            data-placeholder='600000'
-                        )
+                    +number('Max acknowledgement timeout:', model + '.maxAckTimeout', 'maxAckTimeout', 'true', '600000', '0', 'Maximum message acknowledgement timeout')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Network timeout:
-                        ignite-form-field-tooltip
-                            | Network timeout
-                        ignite-form-field-input-number(
-                            data-id='discoNetworkTimeout'
-                            data-name='discoNetworkTimeout'
-                            data-ng-model='#{model}.networkTimeout'
-                            data-placeholder='5000'
-                            data-min='1'
-                        )
+                    +number('Network timeout:', model + '.networkTimeout', 'discoNetworkTimeout', 'true', '5000', '1', 'Network timeout')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Join timeout:
-                        ignite-form-field-tooltip
-                            | Join timeout
-                        ignite-form-field-input-number(
-                            data-id='joinTimeout'
-                            data-name='joinTimeout'
-                            data-ng-model='#{model}.joinTimeout'
-                            data-placeholder='0'
-                        )
+                    +number('Join timeout:', model + '.joinTimeout', 'joinTimeout', 'true', '0', '0', 'Join timeout')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Thread priority:
-                        ignite-form-field-tooltip
-                            | Thread priority for all threads started by SPI
-                        ignite-form-field-input-number(
-                            data-id='threadPriority'
-                            data-name='threadPriority'
-                            data-ng-model='#{model}.threadPriority'
-                            data-placeholder='10'
-                            data-min='1'
-                        )
+                    +number('Thread priority:', model + '.threadPriority', 'threadPriority', 'true', '10', '1', 'Thread priority for all threads started by SPI')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Heartbeat frequency:
-                        ignite-form-field-tooltip
-                            | Heartbeat messages issuing frequency
-                        ignite-form-field-input-number(
-                            data-id='heartbeatFrequency'
-                            data-name='heartbeatFrequency'
-                            data-ng-model='#{model}.heartbeatFrequency'
-                            data-placeholder='2000'
-                            data-min='1'
-                        )
+                    +number('Heartbeat frequency:', model + '.heartbeatFrequency', 'heartbeatFrequency', 'true', '2000', '1', 'Heartbeat messages issuing frequency')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Max heartbeats miss w/o init:
-                        ignite-form-field-tooltip
-                            | Max heartbeats count node can miss without initiating status check
-                        ignite-form-field-input-number(
-                            data-id='maxMissedHeartbeats'
-                            data-name='maxMissedHeartbeats'
-                            data-ng-model='#{model}.maxMissedHeartbeats'
-                            data-placeholder='1'
-                            data-min='1'
-                        )
+                    +number('Max heartbeats miss w/o init:', model + '.maxMissedHeartbeats', 'maxMissedHeartbeats', 'true', '1', '1',
+                        'Max heartbeats count node can miss without initiating status check')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Max heartbeats miss w/o failing client node:
-                        ignite-form-field-tooltip
-                            | Max heartbeats count node can miss without failing client node
-                        ignite-form-field-input-number(
-                            data-id='maxMissedClientHeartbeats'
-                            data-name='maxMissedClientHeartbeats'
-                            data-ng-model='#{model}.maxMissedClientHeartbeats'
-                            data-placeholder='5'
-                            data-min='1'
-                        )
+                    +number('Max heartbeats miss w/o failing client node:', model + '.maxMissedClientHeartbeats', 'maxMissedClientHeartbeats', 'true', '5', '1')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Topology history:
-                        ignite-form-field-tooltip
-                            | Size of topology snapshots history
-                        ignite-form-field-input-number(
-                            data-id='topHistorySize'
-                            data-name='topHistorySize'
-                            data-ng-model='#{model}.topHistorySize'
-                            data-placeholder='1000'
-                        )
+                    +number('Topology history:', model + '.topHistorySize', 'topHistorySize', 'true', '1000', '0', 'Size of topology snapshots history')
                 .settings-row
-                   ignite-form-field
-                        ignite-form-field-label
-                            | Discovery listener:
-                        ignite-form-field-tooltip
-                            | Grid discovery listener
-                        ignite-form-field-java-class(
-                            data-id='discoListener'
-                            data-name='discoListener'
-                            data-ng-model='#{model}.listener'
-                        )
+                    +java-class('Discovery listener:', model + '.listener', 'discoListener', 'true', 'false', 'Grid discovery listener')
                 .settings-row
-                   ignite-form-field
-                        ignite-form-field-label
-                            | Data exchange:
-                        ignite-form-field-tooltip
-                            | Class name of handler for initial data exchange between Ignite nodes
-                        ignite-form-field-java-class(
-                            data-id='dataExchange'
-                            data-name='dataExchange'
-                            data-ng-model='#{model}.dataExchange'
-                        )
+                    +java-class('Data exchange:', model + '.dataExchange', 'dataExchange', 'true', 'false', 'Class name of handler for initial data exchange between Ignite nodes')
                 .settings-row
-                   ignite-form-field
-                        ignite-form-field-label
-                            | Metrics provider:
-                        ignite-form-field-tooltip
-                            | Class name of metric provider to discovery SPI
-                        ignite-form-field-java-class(
-                            data-id='metricsProvider'
-                            data-name='metricsProvider'
-                            data-ng-model='#{model}.metricsProvider'
-                        )
+                    +java-class('Metrics provider:', model + '.metricsProvider', 'metricsProvider', 'true', 'false', 'Class name of metric provider to discovery SPI')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Reconnect count:
-                        ignite-form-field-tooltip
-                            | Reconnect attempts count
-                        ignite-form-field-input-number(
-                            data-id='discoReconnectCount'
-                            data-name='discoReconnectCount'
-                            data-ng-model='#{model}.reconnectCount'
-                            data-placeholder='10'
-                            data-min='1'
-                        )
+                    +number('Reconnect count:', model + '.reconnectCount', 'discoReconnectCount', 'true', '10', '1', 'Reconnect attempts count')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Statistics frequency:
-                        ignite-form-field-tooltip
-                            | Statistics print frequency
-                        ignite-form-field-input-number(
-                            data-id='statisticsPrintFrequency'
-                            data-name='statisticsPrintFrequency'
-                            data-ng-model='#{model}.statisticsPrintFrequency'
-                            data-placeholder='0'
-                            data-min='1'
-                        )
+                    +number('Statistics frequency:', model + '.statisticsPrintFrequency', 'statisticsPrintFrequency', 'true', '0', '1', 'Statistics print frequency')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | IP finder clean frequency:
-                        ignite-form-field-tooltip
-                            | IP finder clean frequency
-                        ignite-form-field-input-number(
-                            data-id='ipFinderCleanFrequency'
-                            data-name='ipFinderCleanFrequency'
-                            data-ng-model='#{model}.ipFinderCleanFrequency'
-                            data-placeholder='60000'
-                            data-min='1'
-                        )
+                    +number('IP finder clean frequency:', model + '.ipFinderCleanFrequency', 'ipFinderCleanFrequency', 'true', '60000', '1', 'IP finder clean frequency')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Node authenticator:
-                        ignite-form-field-tooltip
-                            | Node authenticator
-                        ignite-form-field-java-class(
-                            data-id='authenticator'
-                            data-name='authenticator'
-                            data-ng-model='#{model}.authenticator'
-                        )
+                    +java-class('Node authenticator:', model + '.authenticator', 'authenticator', 'true', 'false', 'Node authenticator')
                 .settings-row
-                    ignite-form-field.checkbox
-                        ignite-form-field-input-checkbox(
-                            data-id='forceServerMode'
-                            data-name='forceServerMode'
-                            data-ng-model='#{model}.forceServerMode'
-                        )
-                        | Force server mode
-                        ignite-form-field-tooltip
-                            | Force server mode
+                    +checkbox('Force server mode', model + '.forceServerMode', 'forceServerMode', 'Force server mode')
                 .settings-row
-                    ignite-form-field.checkbox
-                        ignite-form-field-input-checkbox(
-                            data-id='clientReconnectDisabled'
-                            data-name='clientReconnectDisabled'
-                            data-ng-model='#{model}.clientReconnectDisabled'
-                        )
-                        | Client reconnect disabled
-                        ignite-form-field-tooltip
-                            | Client reconnect disabled
-            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='clusterDiscovery' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterDiscovery' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                    +checkbox('Client reconnect disabled', model + '.clientReconnectDisabled', 'clientReconnectDisabled', 'Client reconnect disabled')
+            .col-sm-6
+                +preview-xml-java(model, 'clusterDiscovery')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 d221cbc..edcde05 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
@@ -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='events' novalidate)
@@ -27,29 +29,8 @@ form.panel.panel-default(name='events' novalidate)
         .panel-body(ng-if='__show__')
             .col-sm-6
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Include type:
-                        ignite-form-field-tooltip
-                            | Array of event types, which will be recorded by GridEventStorageManager#record(Event)#[br]
-                            | Note, that either the include event types or the exclude event types can be established
-                        ignite-form-field-dropdown(
-                            data-id='includeEventTypes'
-                            data-name='includeEventTypes'
-                            data-options='eventGroups'
-                            data-multiple='true'
-                            data-ng-model='#{model}.includeEventTypes'
-                            data-placeholder='Choose recorded event types'
-                        )
-            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='clusterEvents' ng-model='$parent.data')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterEvents' ng-model='$parent.data')
-                    .preview-content-empty(ng-if='!data')
-                        label All Defaults
+                    +dropdown-multiple('Include type:', model + '.includeEventTypes', 'includeEventTypes', 'Choose recorded event types', '', 'eventGroups',
+                        'Array of event types, which will be recorded by GridEventStorageManager#record(Event)<br/>\
+                        Note, that either the include event types or the exclude event types can be established')
+            .col-sm-6
+                +preview-xml-java(model, 'clusterEvents')

http://git-wip-us.apache.org/repos/asf/ignite/blob/f8a690ec/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 aa29382..2f5771d 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
@@ -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='general' novalidate)
@@ -25,66 +27,27 @@ form.panel.panel-default(name='general' novalidate)
         .panel-body
             .col-sm-6
                 .settings-row
-                   ignite-form-field
-                        ignite-form-field-label
-                            | Name:
-                        ignite-form-field-tooltip
-                            | Grid name
-                        ignite-form-field-input-text(
-                            data-id='clusterName'
-                            data-name='clusterName'
-                            data-ng-model='#{model}.name'
-                            data-ng-required='true'
-                            data-placeholder='Input name'
-                        )
+                    +text('Name:', model + '.name', 'clusterName', 'true', 'Input name', 'Grid name')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Caches: #[a(ui-sref='base.configuration.caches({id: #{model}._id})') (add)]
-                        ignite-form-field-tooltip
-                            | Select caches to start in cluster or add a new cache
-                        ignite-form-field-dropdown(
-                            data-id='caches'
-                            data-name='caches'
-                            data-options='caches'
-                            data-multiple='true'
-                            data-ng-model='#{model}.caches'
-                            data-ng-disabled='!caches.length'
-                            data-placeholder='{{ caches.length ? "Choose caches": "No caches configured" }}'
-                        )
+                    +dropdown-multiple('<span>Caches:</span>' +
+                        '<a ui-sref="base.configuration.caches({id: ' + model + '._id})"> (add)</a>',
+                        model + '.caches', 'caches', 'Choose caches', 'No caches configured', 'caches',
+                        'Select caches to start in cluster or add a new cache')
                 .settings-row
-                   ignite-form-field
-                        ignite-form-field-label
-                            | Local host:
-                        ignite-form-field-tooltip
-                            | System-wide local address or host for all Ignite components to bind to
-                        ignite-form-field-input-text(
-                            data-id='localHost'
-                            data-name='localHost'
-                            data-ng-model='#{model}.localHost'
-                            data-placeholder='0.0.0.0'
-                        )
+                    +text-ip-address('Local host:', model + '.localHost', 'localHost', 'true', '0.0.0.0', 'System-wide local address or host for all Ignite components to bind to')
                 .settings-row
-                    ignite-form-field
-                        ignite-form-field-label
-                            | Discovery:
-                        ignite-form-field-tooltip
-                            | Discovery allows to discover remote nodes in grid
-                            ul: li Static IPs - IP Finder which works only with pre configured list of IP addresses specified
-                                li Multicast - Multicast based IP finder
-                                li AWS S3 - AWS S3 based IP finder
-                                li Apache jclouds - Apache jclouds multi cloud toolkit based IP finder
-                                li Google cloud storage - Google Cloud Storage based IP finder
-                                li JDBC - JDBC based IP finder
-                                li Shared filesystem - Shared filesystem based IP finder
-                                li Apache ZooKeeper - Apache ZooKeeper based IP finder
-                        ignite-form-field-dropdown(
-                            data-id='discovery'
-                            data-name='discovery'
-                            data-options='discoveries'
-                            data-ng-model='#{model}.discovery.kind'
-                            data-placeholder='Choose marshaller'
-                        )
+                    +dropdown('Discovery:', model + '.discovery.kind', 'discovery', 'true', 'Choose discovery', 'discoveries',
+                        'Discovery allows to discover remote nodes in grid\
+                        <ul>\
+                            <li>Static IPs - IP Finder which works only with pre configured list of IP addresses specified</li>\
+                            <li>Multicast - Multicast based IP finder</li>\
+                            <li>AWS S3 - AWS S3 based IP finder</li>\
+                            <li>Apache jclouds - Apache jclouds multi cloud toolkit based IP finder</li>\
+                            <li>Google cloud storage - Google Cloud Storage based IP finder</li>\
+                            <li>JDBC - JDBC based IP finder</li>\
+                            <li>Shared filesystem - Shared filesystem based IP finder</li>\
+                            <li>Apache ZooKeeper - Apache ZooKeeper based IP finder</li>\
+                        </ul>')
                 .settings-row
                     .panel-details.col-sm-12
                         ignite-configuration-clusters-general-discovery-cloud(
@@ -103,13 +66,5 @@ form.panel.panel-default(name='general' novalidate)
                             ng-if='#{model}.discovery.kind === "Vm"')
                         ignite-configuration-clusters-general-discovery-zookeeper(
                             ng-if='#{model}.discovery.kind === "ZooKeeper"')
-            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='clusterCaches' data-details='caches')
-                    .preview-content(ng-if='!mode')
-                        ignite-ui-ace-xml(data-master='backupItem' data-generator='clusterCaches' data-details='caches')
+            .col-sm-6
+                +preview-xml-java(model, 'clusterCaches', 'caches')

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/cloud.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/cloud.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/cloud.jade
index 258524f..c880d8a 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/cloud.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/cloud.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.discovery.Cloud';
 - var regions = model + '.regions';
 - var zones = model + '.zones';
@@ -22,56 +24,23 @@
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Credential:
-            ignite-form-field-tooltip
-                | Credential that is used during authentication on the cloud#[br]
-                | Depending on a cloud platform it can be a password or access key
-            ignite-form-field-input-text(
-                data-id='credential'
-                data-name='credential'
-                data-ng-model='#{model}.credential'
-            )
+        +text('Credential:', model + '.credential', 'credential', 'false', 'Input cloud credential',
+            'Credential that is used during authentication on the cloud<br/>\
+            Depending on a cloud platform it can be a password or access key')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Path to credential:
-            ignite-form-field-tooltip
-                | Path to a credential that is used during authentication on the cloud#[br]
-                | Access key or private key should be stored in a plain or PEM file without a passphrase
-            ignite-form-field-input-text(
-                data-id='credentialPath'
-                data-name='credentialPath'
-                data-ng-model='#{model}.credentialPath'
-            )
+        +text('Path to credential:', model + '.credentialPath', 'credentialPath', 'false', 'Input pathto credential',
+            'Path to a credential that is used during authentication on the cloud<br/>\
+            Access key or private key should be stored in a plain or PEM file without a passphrase')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Identity:
-            ignite-form-field-tooltip
-                | Identity that is used as a user name during a connection to the cloud#[br]
-                | Depending on a cloud platform it can be an email address, user name, etc
-            ignite-form-field-input-text(
-                data-id='identity'
-                data-name='identity'
-                data-ng-model='#{model}.identity'
-                data-ng-required='true'
-            )
+        +text('Identity:', model + '.identity', 'identity', 'true', 'Input identity',
+            'Identity that is used as a user name during a connection to the cloud<br/>\
+            Depending on a cloud platform it can be an email address, user name, etc')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Provider:
-            ignite-form-field-tooltip
-                | Cloud provider to use
-            ignite-form-field-input-text(
-                data-id='provider'
-                data-name='provider'
-                data-ng-model='#{model}.provider'
-                data-ng-required='true'
-            )
+        +text('Provider:', model + '.provider', 'provider', 'true', 'Input provider', 'Cloud provider to use')
     .details-row
-        ignite-form-group(ng-model='#{regions}' ng-form='#{formRegions}')
+        ignite-form-group(ng-model=regions ng-form=formRegions)
+            - var uniqueTip = 'Such region already exists!'
+
             ignite-form-field-label
                 | Regions
             ignite-form-group-tooltip
@@ -81,80 +50,38 @@ div
             ignite-form-group-add(ng-click='group.add = [{}]')
                 | Add new region
 
-            - var field = 'edit'
-            - var valid = formRegions + '.' + field + '.$valid'
-            - var save = regions + '[$index] = ' + field
-
             .group-content(ng-if='#{regions}.length')
-                ignite-form-field(ng-repeat='model in #{regions} track by $index' type='internal')
+                - var field = 'edit'
+                - var valid = formRegions + '.' + field + '.$valid'
+                - var save = regions + '[$index] = ' + field
+
+                ignite-form-field(ng-repeat='model in #{regions} track by $index' type='internal' name='Region')
                     .indexField
-                        | {{ $index+1 }}) 
-                    i.tipField.fa.fa-remove(
-                        ng-hide='field.edit'
-                        bs-tooltip='"Remove region"'
-                        ng-click='#{regions}.splice(#{regions}.indexOf(model), 1)'
-                    )
+                        | {{ $index+1 }})
+                    +table-remove-button(regions, 'Remove region')
                     span(ng-hide='field.edit')
                         a.labelFormField(ng-click='field.edit = true') {{ model }}
                     span(ng-if='field.edit' ng-init='#{field} = model')
-                        ignite-form-field-input-text(
-                            data-name='#{field}'
-                            data-ng-model='#{field}'
-                            data-ng-required='true'
-                            data-placeholder='Region name'
-                            data-ignite-unique='#{regions}'
-                            data-ignite-form-field-input-autofocus='true'
-                            on-enter='#{valid} && (#{save}); #{valid} && (field.edit = false);'
-                            on-escape='field.edit = false'
-                            ng-blur='#{valid} && (#{save}); (field.edit = false)'
-                        )
-                            i.fa.fa-floppy-o(
-                                ng-show='#{valid}'
-                                ng-click='#{valid} && (#{save}); #{valid} && (field.edit = false);'
-                                bs-tooltip 
-                                data-title='Click icon or press [Enter] to save item' 
-                            )
-
-                            i.fa.fa-exclamation-triangle.form-control-feedback(
-                                ng-show='!#{formRegions}.#{field}.$pristine && #{formRegions}.#{field}.$error.igniteUnique'
-                                bs-tooltip
-                                data-title='Such region already exists!'
-                            )
-
-            - var field = 'new'
-            - var valid = formRegions + '.' + field + '.$valid'
-            - var push = regions + '.push(' + field + ')'
+                        +table-text-field(field, regions, save, 'Region name', false)
+                            +table-save-button(valid, save, false)
+                            +table-feedback-unique(formRegions, field, uniqueTip)
 
             .group-content(ng-repeat='field in group.add')
-                ignite-form-field(type='internal')
-                    ignite-form-field-input-text(
-                        data-name='#{field}'
-                        data-ng-model='#{field}'
-                        data-ng-required='true'
-                        data-placeholder='Region name'
-                        data-ignite-unique='#{regions}'
-                        data-ignite-form-field-input-autofocus='true'
-                        on-enter='#{valid} && #{push}; #{valid} && (stopblur = true) && (group.add = [{}])'
-                        on-escape='group.add = []'
-                        ng-blur='#{valid} && #{push}; !stopblur && (group.add = [])'
-                    )
-                        i.fa.fa-floppy-o(
-                            ng-show='#{valid}'
-                            ng-click='#{valid} && #{push}; #{valid} && (group.add = [])'
-                            bs-tooltip 
-                            data-title='Click icon or press [Enter] to save item' 
-                        )
-
-                        i.fa.fa-exclamation-triangle.form-control-feedback(
-                            ng-show='!#{formRegions}.#{field}.$pristine && #{formRegions}.#{field}.$error.igniteUnique'
-                            bs-tooltip
-                            data-title='Such region already exists!'
-                        )
-            
+                - var field = 'new'
+                - var valid = formRegions + '.' + field + '.$valid'
+                - var save = regions + '.push(' + field + ')'
+
+                ignite-form-field(type='internal' name='Region')
+                    +table-text-field(field, regions, save, 'Region name', true)
+                        +table-save-button(valid, save, true)
+                        +table-feedback-unique(formRegions, field, uniqueTip)
+
             .group-content-empty(ng-if='!(#{regions}.length) && !group.add.length')
                 | Not defined
     .details-row
-         ignite-form-group(ng-model='#{zones}' ng-form='#{formZones}')
+        ignite-form-group(ng-model=zones ng-form=formZones)
+            - var uniqueTip = 'Such zone already exists!'
+
             ignite-form-field-label
                 | Zones
             ignite-form-group-tooltip
@@ -164,75 +91,31 @@ div
             ignite-form-group-add(ng-click='group.add = [{}]')
                 | Add new zone
 
-            - var field = 'edit'
-            - var valid = formZones + '.' + field + '.$valid'
-            - var save = zones + '[$index] = ' + field
-
             .group-content(ng-if='#{zones}.length')
-                ignite-form-field(ng-repeat='model in #{zones} track by $index' type='internal')
+                - var field = 'edit'
+                - var valid = formZones + '.' + field + '.$valid'
+                - var save = zones + '[$index] = ' + field
+
+                ignite-form-field(ng-repeat='model in #{zones} track by $index' type='internal' name='Zone')
                     .indexField
-                        | {{ $index+1 }}) 
-                    i.tipField.fa.fa-remove(
-                        ng-hide='field.edit'
-                        bs-tooltip='"Remove zone"'
-                        ng-click='#{zones}.splice(#{zones}.indexOf(model), 1)'
-                    )
+                        | {{ $index+1 }})
+                    +table-remove-button(zones, 'Remove zone')
                     span(ng-hide='field.edit')
                         a.labelFormField(ng-click='field.edit = true') {{ model }}
                     span(ng-if='field.edit' ng-init='#{field} = model')
-                        ignite-form-field-input-text(
-                            data-name='#{field}'
-                            data-ng-model='#{field}'
-                            data-ng-required='true'
-                            data-placeholder='Zone name'
-                            data-ignite-unique='#{zones}'
-                            data-ignite-form-field-input-autofocus='true'
-                            on-enter='#{valid} && (#{save}); #{valid} && (field.edit = false);'
-                            on-escape='field.edit = false'
-                            ng-blur='#{valid} && (#{save}); (field.edit = false)'
-                        )
-                            i.fa.fa-floppy-o(
-                                ng-show='#{valid}'
-                                ng-click='#{valid} && (#{save}); #{valid} && (field.edit = false);'
-                                bs-tooltip 
-                                data-title='Click icon or press [Enter] to save item' 
-                            )
-
-                            i.fa.fa-exclamation-triangle.form-control-feedback(
-                                ng-show='!#{formZones}.#{field}.$pristine && #{formZones}.#{field}.$error.igniteUnique'
-                                bs-tooltip
-                                data-title='Such zone already exists!'
-                            )
-
-            - var field = 'new'
-            - var valid = formZones + '.' + field + '.$valid'
-            - var push = zones + '.push(' + field + ')'
+                        +table-text-field(field, zones, save, 'Zone name',false)
+                            +table-save-button(valid, save, false)
+                            +table-feedback-unique(formZones, field, uniqueTip)
 
             .group-content(ng-repeat='field in group.add')
-                ignite-form-field(type='internal')
-                    ignite-form-field-input-text(
-                        data-name='#{field}'
-                        data-ng-model='#{field}'
-                        data-ng-required='true'
-                        data-placeholder='Zone name'
-                        data-ignite-unique='#{zones}'
-                        data-ignite-form-field-input-autofocus='true'
-                        on-enter='#{valid} && #{push}; #{valid} && (stopblur = true) && (group.add = [{}])'
-                        on-escape='group.add = []'
-                        ng-blur='#{valid} && #{push}; !stopblur && (group.add = [])'
-                    )
-                        i.fa.fa-floppy-o(
-                            ng-show='#{valid}'
-                            ng-click='#{valid} && #{push}; #{valid} && (group.add = [])'
-                            bs-tooltip 
-                            data-title='Click icon or press [Enter] to save item' 
-                        )
-
-                        i.fa.fa-exclamation-triangle.form-control-feedback(
-                            ng-show='!#{formZones}.#{field}.$pristine && #{formZones}.#{field}.$error.igniteUnique'
-                            bs-tooltip
-                            data-title='Such zone already exists!'
-                        )
-            
+                - var field = 'new'
+                - var valid = formZones + '.' + field + '.$valid'
+                - var save = zones + '.push(' + field + ')'
+
+                ignite-form-field(type='internal' name='Zone')
+                    +table-text-field(field, zones, save, 'Zone name',true)
+                        +table-save-button(valid, save, true)
+                        +table-feedback-unique(formZones, field, uniqueTip)
+
             .group-content-empty(ng-if='!(#{zones}.length) && !group.add.length')
                 | Not defined

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/google.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/google.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/google.jade
index 79ae2f1..5dbe2c5 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/google.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/google.jade
@@ -14,57 +14,22 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.GoogleStorage';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Project name:
-            ignite-form-field-tooltip
-                | Google Cloud Platforms project name#[br]
-                | Usually this is an auto generated project number (ex. 208709979073) that can be found in 'Overview' section of Google Developer Console
-            ignite-form-field-input-text(
-                data-id='projectName'
-                data-name='projectName'
-                data-ng-model='#{model}.projectName'
-                data-ng-required='true'
-            )
+        +text('Project name:', model + '.projectName', 'projectName', 'true', 'Input project name', '' +
+            'Google Cloud Platforms project name<br/>\
+            Usually this is an auto generated project number(ex. 208709979073) that can be found in "Overview" section of Google Developer Console')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Bucket name:
-            ignite-form-field-tooltip
-                | Google Cloud Storage bucket name#[br]
-                | If the bucket doesn't exist Ignite will automatically create it#[br]
-                | However the name must be unique across whole Google Cloud Storage and Service Account Id must be authorized to perform this operation
-            ignite-form-field-input-text(
-                data-id='bucketName'
-                data-name='bucketName'
-                data-ng-model='#{model}.bucketName'
-                data-ng-required='true'
-            )
+        +text('Bucket name:', model + '.bucketName', 'bucketName', 'true', 'Input bucket name',
+            'Google Cloud Storage bucket name<br/>\
+            If the bucket does not exist Ignite will automatically create it<br/>\
+            However the name must be unique across whole Google Cloud Storage and Service Account Id must be authorized to perform this operation')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Private key path:
-            ignite-form-field-tooltip
-                | Full path to the private key in PKCS12 format of the Service Account
-            ignite-form-field-input-text(
-                data-id='serviceAccountP12FilePath'
-                data-name='serviceAccountP12FilePath'
-                data-ng-model='#{model}.serviceAccountP12FilePath'
-                data-ng-required='true'
-            )
+        +text('Private key path:', model + '.serviceAccountP12FilePath', 'serviceAccountP12FilePath', 'true', 'Input private key path',
+            'Full path to the private key in PKCS12 format of the Service Account')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Account id:
-            ignite-form-field-tooltip
-                | Service account ID (typically an e-mail address)
-            ignite-form-field-input-text(
-                data-id='serviceAccountId'
-                data-name='serviceAccountId'
-                data-ng-model='#{model}.serviceAccountId'
-                data-ng-required='true'
-            )
\ No newline at end of file
+        +text('Account id:', model + '.serviceAccountId', 'serviceAccountId', 'true', 'Input account id', 'Service account ID (typically an e-mail address)')

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/jdbc.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/jdbc.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/jdbc.jade
index e677392..b26a4ee 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/jdbc.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/jdbc.jade
@@ -14,16 +14,11 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.Jdbc';
 
 div
     .details-row
-        ignite-form-field.checkbox
-            ignite-form-field-input-checkbox(
-                data-id='initSchema'
-                data-name='initSchema'
-                data-ng-model='#{model}.initSchema'
-            )
-            | DB schema should be initialized by Ignite
-            ignite-form-field-tooltip
-                | Flag indicating whether DB schema should be initialized by Ignite or was explicitly created by user
\ No newline at end of file
+        +checkbox('DB schema should be initialized by Ignite', model + '.initSchema', 'initSchema',
+            'Flag indicating whether DB schema should be initialized by Ignite or was explicitly created by user')

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/multicast.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/multicast.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/multicast.jade
index 63e46cc..acabab3 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/multicast.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/multicast.jade
@@ -14,124 +14,34 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.Multicast';
 - var addresses = model + '.addresses';
 - var form = 'discoveryMulticastAddresses';
 
-mixin addressField(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-input-text(
-        data-name='#{field}'
-        data-ng-model='#{field}'
-        data-ng-required='true'
-        data-placeholder='IP address:port'
-        data-ipaddress='true'
-        data-ignite-unique='#{addresses}'
-        data-ignite-form-field-input-autofocus='true'
-        on-enter='#{valid} && (#{save}); #{valid} && #{resetOnEnter};'
-        on-escape='#{reset}'
-        ng-blur='#{valid} && (#{save}); #{resetOnBlur};'
-    )
-        block
-
-mixin addressSaveBtn(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 addressFeedbackUnique(field)
-    i.fa.fa-exclamation-triangle.form-control-feedback(
-        ng-show='#{form}.#{field}.$error.igniteUnique'
-        bs-tooltip
-        data-title='Such IP address already exists!'
-    )
-
-mixin addressFeedbackValid(field)
-    i.fa.fa-exclamation-triangle.form-control-feedback(
-        ng-show='#{form}.#{field}.$error.ipadress'
-        bs-tooltip
-        data-title='Invalid IP address!'
-    )
-
-mixin addressFeedbackRequired(field)
-    i.fa.fa-exclamation-triangle.form-control-feedback(
-        ng-show='!#{form}.#{field}.$pristine && #{form}.#{field}.$error.required'
-        bs-tooltip
-        data-title='IP address should not be empty!'
-    )
-
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | IP address:
-            ignite-form-field-tooltip
-                | IP address of multicast group
-            ignite-form-field-input-text(
-                data-id='multicastGroup'
-                data-name='multicastGroup'
-                data-ng-model='#{model}.multicastGroup'
-                data-placeholder='228.1.2.4'
-            )
+        +text-ip-address('IP address:', model + '.multicastGroup', 'multicastGroup', 'true', '228.1.2.4', 'IP address of multicast group')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Port number:
-            ignite-form-field-tooltip
-                | Port number which multicast messages are sent to
-            ignite-form-field-input-number(
-                data-id='multicastPort'
-                data-name='multicastPort'
-                data-ng-model='#{model}.multicastPort'
-                data-max='65535'
-                data-placeholder='47400'
-            )
+        +number-min-max('Port number:', model + '.multicastPort', 'multicastPort', 'true', '47400', '0', '65535', 'Port number which multicast messages are sent to')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Waits for reply:
-            ignite-form-field-tooltip
-                | Time in milliseconds IP finder waits for reply to multicast address request
-            ignite-form-field-input-number(
-                data-id='responseWaitTime'
-                data-name='responseWaitTime'
-                data-ng-model='#{model}.responseWaitTime'
-                data-placeholder='500'
-            )
+        +number('Waits for reply:', model + '.responseWaitTime', 'responseWaitTime', 'true', '500', '0',
+            'Time in milliseconds IP finder waits for reply to multicast address request')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Attempts count:
-            ignite-form-field-tooltip
-                | Number of attempts to send multicast address request#[br]
-                | IP finder re-sends request only in case if no reply for previous request is received
-            ignite-form-field-input-number(
-                data-id='addressRequestAttempts'
-                data-name='addressRequestAttempts'
-                data-ng-model='#{model}.addressRequestAttempts'
-                data-placeholder='2'
-            )
+        +number('Attempts count:', model + '.addressRequestAttempts', 'addressRequestAttempts', 'true', '2', '0',
+            'Number of attempts to send multicast address request<br/>\
+            IP finder re - sends request only in case if no reply for previous request is received')
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Local address:
-            ignite-form-field-tooltip
-                | Local host address used by this IP finder#[br]
-                | If provided address is non-loopback then multicast socket is bound to this interface#[br]
-                | If local address is not set or is any local address then IP finder creates multicast sockets for all found non-loopback addresses
-            ignite-form-field-input-text(
-                data-id='localAddress'
-                data-name='localAddress'
-                data-ng-model='#{model}.localAddress'
-            )
+        +text-ip-address('Local address:', model + '.localAddress', 'localAddress', 'true', '0.0.0.0',
+            'Local host address used by this IP finder<br/>\
+            If provided address is non - loopback then multicast socket is bound to this interface<br/>\
+            If local address is not set or is any local address then IP finder creates multicast sockets for all found non - loopback addresses')
     .details-row
-        ignite-form-group(ng-model='#{addresses}' ng-form='discoveryMulticastAddresses')
+        ignite-form-group(ng-model=addresses ng-form=form)
+            - var uniqueTip = 'Such IP address already exists!'
+            - var ipAddressTip = 'Invalid IP address!'
+
             ignite-form-field-label
                 | Addresses
             ignite-form-group-tooltip
@@ -153,40 +63,33 @@ div
                 - var field = 'edit'
                 - var valid = form + '.' + field + '.$valid'
                 - var save = addresses + '[$index] = ' + field
-                - var reset = 'field.edit = false'
 
-                ignite-form-field(ng-repeat='model in #{addresses} track by $index' type='internal')
+                ignite-form-field(ng-repeat='model in #{addresses} track by $index' type='internal' name='Address')
                     .indexField
-                        | {{ $index+1 }}) 
-                    i.tipField.fa.fa-remove(
-                        ng-hide='field.edit'
-                        bs-tooltip='"Remove address"'
-                        ng-click='#{addresses}.splice(#{addresses}.indexOf(model), 1)'
-                    )
+                        | {{ $index+1 }})
+                    +table-remove-button(addresses, 'Remove address')
 
-                    ignite-form-field-down(ng-if='!$last' ng-hide='field.edit' data-ng-model='model' data-models='#{addresses}')
-                    ignite-form-field-up(ng-if='!$first' ng-hide='field.edit' data-ng-model='model' data-models='#{addresses}')
+                    ignite-form-field-down(ng-if='!$last' ng-hide='field.edit' data-ng-model='model' data-models=addresses)
+                    ignite-form-field-up(ng-if='!$first' ng-hide='field.edit' data-ng-model='model' data-models=addresses)
 
                     span(ng-hide='field.edit')
                         a.labelFormField(ng-click='field.edit = true') {{ model }}
                     span(ng-if='field.edit' ng-init='#{field} = model')
-                        +addressField(field, save, false)
-                            +addressSaveBtn(valid, save, reset)
-                            +addressFeedbackUnique(field)
-                            +addressFeedbackValid(field)
-                            +addressFeedbackRequired(field)
+                        +table-address-field(field, addresses, save, false)
+                            +table-save-button(valid, save, false)
+                            +table-feedback-unique(form, field, uniqueTip)
+                            +table-feedback-ip-address(form, field, ipAddressTip)
 
             .group-content(ng-repeat='field in group.add')
                 - var field = 'new'
                 - var valid = form + '.' + field + '.$valid'
                 - var save = addresses + '.push(' + field + ')'
-                - var reset = 'group.add = []'
 
-                ignite-form-field(type='internal')
-                    +addressField(field, save, true)
-                        +addressFeedbackUnique(field)
-                        +addressFeedbackValid(field)
-                        +addressFeedbackUnique(field)
+                ignite-form-field(type='internal' name='Address')
+                    +table-address-field(field, addresses, save, true)
+                        +table-save-button(valid, save, true)
+                        +table-feedback-unique(form, field, uniqueTip)
+                        +table-feedback-ip-address(form, field, ipAddressTip)
 
             .group-content-empty(ng-if='!(#{addresses}.length) && !group.add.length')
                 | Not defined

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/s3.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/s3.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/s3.jade
index d6652ce..650d739 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/s3.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/s3.jade
@@ -14,20 +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.S3';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | Bucket name:
-            ignite-form-field-tooltip
-                | Bucket name for IP finder
-            ignite-form-field-input-text(
-                data-id='bucketName'
-                data-name='bucketName'
-                data-ng-model='#{model}.bucketName'
-                data-ng-required='true'
-            )
+        +text('Bucket name:', model + '.bucketName', 'bucketName', 'true', 'Input bucket name', 'Bucket name for IP finder')
     .details-row
         label Note, AWS credentials will be generated as stub

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/shared.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/shared.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/shared.jade
index 4f492d5..8f22568 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/shared.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/shared.jade
@@ -14,16 +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.SharedFs';
 
 div
     .details-row
-        ignite-form-field
-            ignite-form-field-label
-                | File path:
-            ignite-form-field-input-text(
-                data-id='path'
-                data-name='path'
-                data-ng-model='#{model}.path'
-                data-placeholder='disco/tcp'
-            )
\ No newline at end of file
+        +text('File path:', model + '.path', 'path', 'false', 'disco/tcp', 'Shared path')

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/vm.jade
----------------------------------------------------------------------
diff --git a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/vm.jade b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/vm.jade
index a0071e6..313074d 100644
--- a/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/vm.jade
+++ b/modules/control-center-web/src/main/js/app/modules/states/configuration/clusters/general/discovery/vm.jade
@@ -14,60 +14,17 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 
+include ../../../../../../../app/helpers/jade/mixins.jade
+
 - var model = 'backupItem.discovery.Vm';
 - var addresses = model + '.addresses';
 - var form = 'discoveryVmAddresses';
 
-mixin addressField(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-input-text(
-        data-name='#{field}'
-        data-ng-model='#{field}'
-        data-ng-required='true'
-        data-placeholder='IP address:port'
-        data-ipaddress='true'
-        data-ignite-unique='#{addresses}'
-        data-ignite-form-field-input-autofocus='true'
-        on-enter='#{valid} && (#{save}); #{valid} && #{resetOnEnter};'
-        on-escape='#{reset}'
-        ng-blur='#{valid} && (#{save}); #{resetOnBlur};'
-    )
-        block
-
-mixin addressSaveBtn(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 addressFeedbackUnique(field)
-    i.fa.fa-exclamation-triangle.form-control-feedback(
-        ng-show='#{form}.#{field}.$error.igniteUnique'
-        bs-tooltip
-        data-title='Such IP address already exists!'
-    )
-
-mixin addressFeedbackValid(field)
-    i.fa.fa-exclamation-triangle.form-control-feedback(
-        ng-show='#{form}.#{field}.$error.ipaddress'
-        bs-tooltip
-        data-title='Invalid IP address!'
-    )
-
-mixin addressFeedbackRequired(field)
-    i.fa.fa-exclamation-triangle.form-control-feedback(
-        ng-show='!#{form}.#{field}.$pristine && #{form}.#{field}.$error.required'
-        bs-tooltip
-        data-title='IP address should not be empty!'
-    )
-
 .details-row
-    ignite-form-group(ng-model='#{addresses}' ng-form='discoveryVmAddresses')
+    ignite-form-group(ng-model=addresses ng-form=form)
+        - var uniqueTip = 'Such IP address already exists!'
+        - var ipAddressTip = 'Invalid IP address!'
+
         ignite-form-field-label
             | Addresses
         ignite-form-group-tooltip
@@ -89,40 +46,33 @@ mixin addressFeedbackRequired(field)
             - var field = 'edit'
             - var valid = form + '.' + field + '.$valid'
             - var save = addresses + '[$index] = ' + field
-            - var reset = 'field.edit = false'
 
-            ignite-form-field(ng-repeat='model in #{addresses} track by $index' type='internal')
+            ignite-form-field(ng-repeat='model in #{addresses} track by $index' type='internal' name='Address')
                 .indexField
-                    | {{ $index+1 }}) 
-                i.tipField.fa.fa-remove(
-                    ng-hide='field.edit'
-                    bs-tooltip='"Remove address"'
-                    ng-click='#{addresses}.splice(#{addresses}.indexOf(model), 1)'
-                )
+                    | {{ $index+1 }})
+                +table-remove-button(addresses, 'Remove address')
 
-                ignite-form-field-down(ng-if='!$last' ng-hide='field.edit' data-ng-model='model' data-models='#{addresses}')
-                ignite-form-field-up(ng-if='!$first' ng-hide='field.edit' data-ng-model='model' data-models='#{addresses}')
+                ignite-form-field-down(ng-if='!$last' ng-hide='field.edit' data-ng-model='model' data-models=addresses)
+                ignite-form-field-up(ng-if='!$first' ng-hide='field.edit' data-ng-model='model' data-models=addresses)
                 
                 span(ng-hide='field.edit')
                     a.labelFormField(ng-click='field.edit = true') {{ model }}
                 span(ng-if='field.edit' ng-init='#{field} = model')
-                    +addressField(field, save, false)
-                        +addressSaveBtn(valid, save, reset)
-                        +addressFeedbackUnique(field)
-                        +addressFeedbackValid(field)
-                        +addressFeedbackRequired(field)
-
-        - var field = 'new'
-        - var valid = form + '.' + field + '.$valid'
-        - var save = addresses + '.push(' + field + ')'
-        - var reset = 'group.add = []'
+                    +table-address-field(field, addresses, save, false)
+                        +table-save-button(valid, save, false)
+                        +table-feedback-unique(form, field, uniqueTip)
+                        +table-feedback-ip-address(form, field, ipAddressTip)
 
         .group-content(ng-repeat='field in group.add')
-            ignite-form-field(type='internal')
-                +addressField(field, save, true)
-                    +addressSaveBtn(valid, save, reset)
-                    +addressFeedbackUnique(field)
-                    +addressFeedbackValid(field)
-        
+            - var field = 'new'
+            - var valid = form + '.' + field + '.$valid'
+            - var save = addresses + '.push(' + field + ')'
+
+            ignite-form-field(type='internal' name='Address')
+                +table-address-field(field, addresses, save, true)
+                    +table-save-button(valid, save, true)
+                    +table-feedback-unique(form, field, uniqueTip)
+                    +table-feedback-ip-address(form, field, ipAddressTip)
+
         .group-content-empty(id='addresses' ng-if='!(#{addresses}.length) && !group.add.length')
                 | Not defined