http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/logger/log4j2.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/logger/log4j2.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/logger/log4j2.pug
index fc94e06..c5b785b 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/logger/log4j2.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/logger/log4j2.pug
@@ -21,18 +21,30 @@ include /app/helpers/jade/mixins
 -var log4j2Required = '$ctrl.clonedCluster.logger.kind === "Log4j2"'
 
 .pc-form-grid-col-60
-    +dropdown('Level:', `${model}.level`, '"log4j2Level"', 'true', 'Default',
-        '[\
-            {value: "OFF", label: "OFF"},\
-            {value: "FATAL", label: "FATAL"},\
-            {value: "ERROR", label: "ERROR"},\
-            {value: "WARN", label: "WARN"},\
-            {value: "INFO", label: "INFO"},\
-            {value: "DEBUG", label: "DEBUG"},\
-            {value: "TRACE", label: "TRACE"},\
-            {value: "ALL", label: "ALL"},\
-            {value: null, label: "Default"}\
-        ]',
-        'Level for internal log4j2 implementation')
+    +form-field__dropdown({
+        label: 'Level:',
+        model: `${model}.level`,
+        name: '"log4j2Level"',
+        placeholder: 'Default',
+        options: '[\
+                    {value: "OFF", label: "OFF"},\
+                    {value: "FATAL", label: "FATAL"},\
+                    {value: "ERROR", label: "ERROR"},\
+                    {value: "WARN", label: "WARN"},\
+                    {value: "INFO", label: "INFO"},\
+                    {value: "DEBUG", label: "DEBUG"},\
+                    {value: "TRACE", label: "TRACE"},\
+                    {value: "ALL", label: "ALL"},\
+                    {value: null, label: "Default"}\
+                ]',
+        tip: 'Level for internal log4j2 implementation'
+    })
 .pc-form-grid-col-60
-    +text('Path:', `${model}.path`, '"log4j2Path"', log4j2Required, 'Input 
path', 'Path or URI to XML configuration')
+    +form-field__text({
+        label: 'Path:',
+        model: `${model}.path`,
+        name: '"log4j2Path"',
+        required: log4j2Required,
+        placeholder: 'Input path',
+        tip: 'Path or URI to XML configuration'
+    })

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/marshaller.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/marshaller.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/marshaller.pug
index baa4956..23393b8 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/marshaller.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/marshaller.pug
@@ -24,52 +24,91 @@ include /app/helpers/jade/mixins
 panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
     panel-title Marshaller
     panel-description
-        | Marshaller allows to marshal or unmarshal objects in grid. 
-        | It provides serialization/deserialization mechanism for all 
instances that are sent across networks or are otherwise serialized. 
-        | By default BinaryMarshaller will be used. 
+        | Marshaller allows to marshal or unmarshal objects in grid.
+        | It provides serialization/deserialization mechanism for all 
instances that are sent across networks or are otherwise serialized.
+        | By default BinaryMarshaller will be used.
         | 
#[a.link-success(href="https://apacheignite.readme.io/docs/binary-marshaller"; 
target="_blank") More info]
     panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
             .pc-form-grid-col-60(ng-if='$ctrl.available(["1.0.0", "2.0.0"])')
-                +dropdown('Marshaller:', marshaller + '.kind', '"kind"', 
'true', 'Default', '$ctrl.marshallerVariant',
-                    'Instance of marshaller to use in grid<br/>\
-                    <ul>\
-                        <li>OptimizedMarshaller - Optimized implementation of 
marshaller</li>\
-                        <li>JdkMarshaller - Marshaller based on JDK 
serialization mechanism</li>\
-                        <li>Default - BinaryMarshaller serialize and 
deserialize all objects in the binary format</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Marshaller:',
+                    model: marshaller + '.kind',
+                    name: '"kind"',
+                    placeholder: 'Default',
+                    options: '$ctrl.marshallerVariant',
+                    tip: 'Instance of marshaller to use in grid<br/>\
+                       <ul>\
+                           <li>OptimizedMarshaller - Optimized implementation 
of marshaller</li>\
+                           <li>JdkMarshaller - Marshaller based on JDK 
serialization mechanism</li>\
+                           <li>Default - BinaryMarshaller serialize and 
deserialize all objects in the binary format</li>\
+                       </ul>'
+                })
             .pc-form-grid-col-60(ng-if='$ctrl.available(["2.0.0", "2.1.0"])')
-                +dropdown('Marshaller:', marshaller + '.kind', '"kind"', 
'true', 'Default', '$ctrl.marshallerVariant',
-                    'Instance of marshaller to use in grid<br/>\
-                    <ul>\
-                        <li>JdkMarshaller - Marshaller based on JDK 
serialization mechanism</li>\
-                        <li>Default - BinaryMarshaller serialize and 
deserialize all objects in the binary format</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Marshaller:',
+                    model: marshaller + '.kind',
+                    name: '"kind"',
+                    placeholder: 'Default',
+                    options: '$ctrl.marshallerVariant',
+                    tip: 'Instance of marshaller to use in grid<br/>\
+                        <ul>\
+                            <li>JdkMarshaller - Marshaller based on JDK 
serialization mechanism</li>\
+                            <li>Default - BinaryMarshaller serialize and 
deserialize all objects in the binary format</li>\
+                        </ul>'
+                })
             .pc-form-group.pc-form-grid-row(
                 ng-show=`${marshaller}.kind === 'OptimizedMarshaller'`
                 ng-if='$ctrl.available(["1.0.0", "2.1.0"])'
             )
                 .pc-form-grid-col-60
-                    +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')
+                    +form-field__number({
+                        label: 'Streams pool size:',
+                        model: `${optMarshaller}.poolSize`,
+                        name: '"poolSize"',
+                        placeholder: '0',
+                        min: '0',
+                        tip: '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'
+                    })
                 .pc-form-grid-col-60
-                    +checkbox('Require serializable', 
`${optMarshaller}.requireSerializable`, '"requireSerializable"',
-                        'Whether marshaller should require Serializable 
interface or not')
+                    +form-field__checkbox({
+                        label: 'Require serializable',
+                        model: `${optMarshaller}.requireSerializable`,
+                        name: '"requireSerializable"',
+                        tip: 'Whether marshaller should require Serializable 
interface or not'
+                    })
             .pc-form-grid-col-60
-                +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')
+                +form-field__checkbox({
+                    label: 'Marshal local jobs',
+                    model: `${model}.marshalLocalJobs`,
+                    name: '"marshalLocalJobs"',
+                    tip: 'If this flag is enabled, jobs mapped to local node 
will be marshalled as if it was remote node'
+                })
 
             //- Removed in ignite 2.0
             .pc-form-grid-col-30(ng-if-start='$ctrl.available(["1.0.0", 
"2.0.0"])')
-                +number('Keep alive time:', 
`${model}.marshallerCacheKeepAliveTime`, '"marshallerCacheKeepAliveTime"', 
'true', '10000', '0',
-                    'Keep alive time of thread pool that is in charge of 
processing marshaller messages')
+                +form-field__number({
+                    label: 'Keep alive time:',
+                    model: `${model}.marshallerCacheKeepAliveTime`,
+                    name: '"marshallerCacheKeepAliveTime"',
+                    placeholder: '10000',
+                    min: '0',
+                    tip: 'Keep alive time of thread pool that is in charge of 
processing marshaller messages'
+                })
             .pc-form-grid-col-30(ng-if-end)
-                +number('Pool size:', 
`${model}.marshallerCacheThreadPoolSize`, '"marshallerCacheThreadPoolSize"', 
'true', 'max(8, availableProcessors) * 2', '1',
-                    'Default size of thread pool that is in charge of 
processing marshaller messages')
+                +form-field__number({
+                    label: 'Pool size:',
+                    model: `${model}.marshallerCacheThreadPoolSize`,
+                    name: '"marshallerCacheThreadPoolSize"',
+                    placeholder: 'max(8, availableProcessors) * 2',
+                    min: '1',
+                    tip: 'Default size of thread pool that is in charge of 
processing marshaller messages'
+                })
 
         .pca-form-column-6
             +preview-xml-java(model, 'clusterMarshaller')

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug
index dbe1935..7712cb7 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/memory.pug
@@ -21,13 +21,13 @@ include /app/helpers/jade/mixins
 -var memoryPolicies = model + '.memoryPolicies'
 
 panel-collapsible(
-    ng-form=form
-    on-open=`ui.loadPanel('${form}')`
-    ng-show='$ctrl.available(["2.0.0", "2.3.0"])'
+ng-form=form
+on-open=`ui.loadPanel('${form}')`
+ng-show='$ctrl.available(["2.0.0", "2.3.0"])'
 )
     panel-title Memory configuration
     panel-description
-        | Page memory is a manageable off-heap based memory architecture that 
is split into pages of fixed size. 
+        | Page memory is a manageable off-heap based memory architecture that 
is split into pages of fixed size.
         | 
#[a.link-success(href="https://apacheignite.readme.io/docs/durable-memory"; 
target="_blank") More info]
     panel-content.pca-form-row(ng-if=`$ctrl.available(["2.0.0", "2.3.0"]) && 
ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
@@ -40,8 +40,14 @@ panel-collapsible(
                     tip: 'Every memory region is split on pages of fixed size'
                 })
             .pc-form-grid-col-60
-                +number('Concurrency level:', model + '.concurrencyLevel', 
'"MemoryConfigurationConcurrencyLevel"',
-                'true', 'availableProcessors', '2', 'The number of concurrent 
segments in Ignite internal page mapping tables')
+                +form-field__number({
+                    label: 'Concurrency level:',
+                    model: `${model}.concurrencyLevel`,
+                    name: '"MemoryConfigurationConcurrencyLevel"',
+                    placeholder: 'availableProcessors',
+                    min: '2',
+                    tip: 'The number of concurrent segments in Ignite internal 
page mapping tables'
+                })
             .pc-form-grid-col-60.pc-form-group__text-title
                 span System cache
             .pc-form-group.pc-form-grid-row
@@ -78,8 +84,8 @@ panel-collapsible(
                     })(
                         
pc-not-in-collection='::$ctrl.Clusters.memoryPolicy.name.invalidValues'
                         ui-validate=`{
-                            defaultMemoryPolicyExists: 
'$ctrl.Clusters.memoryPolicy.customValidators.defaultMemoryPolicyExists($value, 
${memoryPolicies})'
-                        }`
+                                defaultMemoryPolicyExists: 
'$ctrl.Clusters.memoryPolicy.customValidators.defaultMemoryPolicyExists($value, 
${memoryPolicies})'
+                            }`
                         ui-validate-watch=`"${memoryPolicies}"`
                         ui-validate-watch-object-equality='true'
                         ng-model-options='{allowInvalid: true}'
@@ -87,9 +93,14 @@ panel-collapsible(
                         +form-field__error({ error: 'notInCollection', 
message: '{{::$ctrl.Clusters.memoryPolicy.name.invalidValues[0]}} is reserved 
for internal use' })
                         +form-field__error({ error: 
'defaultMemoryPolicyExists', message: 'Memory policy with that name should be 
configured' })
                 .pc-form-grid-col-60(ng-hide='(' + model + 
'.defaultMemoryPolicyName || "default") !== "default"')
-                    +number('Default memory policy size:', model + 
'.defaultMemoryPolicySize', '"defaultMemoryPolicySize"',
-                    'true', '0.8 * totalMemoryAvailable', '10485760',
-                    'Specify desired size of default memory policy without 
having to use more verbose syntax of MemoryPolicyConfiguration elements')
+                    +form-field__number({
+                        label: 'Default memory policy size:',
+                        model: `${model}.defaultMemoryPolicySize`,
+                        name: '"defaultMemoryPolicySize"',
+                        placeholder: '0.8 * totalMemoryAvailable',
+                        min: '10485760',
+                        tip: 'Specify desired size of default memory policy 
without having to use more verbose syntax of MemoryPolicyConfiguration elements'
+                    })
                 .pc-form-grid-col-60
                     mixin clusters-memory-policies
                         .ignite-form-field(ng-init='memoryPoliciesTbl={type: 
"memoryPolicies", model: "memoryPolicies", focusId: "name", ui: 
"memory-policies-table"}')
@@ -109,8 +120,8 @@ panel-collapsible(
                                             tip: 'Memory policy name'
                                         })(
                                             ui-validate=`{
-                                                uniqueMemoryPolicyName: 
'$ctrl.Clusters.memoryPolicy.customValidators.uniqueMemoryPolicyName($item, 
${items})'
-                                            }`
+                                                    uniqueMemoryPolicyName: 
'$ctrl.Clusters.memoryPolicy.customValidators.uniqueMemoryPolicyName($item, 
${items})'
+                                                }`
                                             ui-validate-watch=`"${items}"`
                                             
ui-validate-watch-object-equality='true'
                                             
pc-not-in-collection='::$ctrl.Clusters.memoryPolicy.name.invalidValues'
@@ -140,24 +151,42 @@ panel-collapsible(
                                             tip='Maximum memory region size 
defined by this memory policy'
                                         )
                                     .pc-form-grid-col-60
-                                        +text('Swap file path:', 
'$item.swapFilePath', '"MemoryPolicySwapFilePath"', 'false',
-                                        'Input swap file path', 'An optional 
path to a memory mapped file for this memory policy')
+                                        +form-field__text({
+                                            label: 'Swap file path:',
+                                            model: '$item.swapFilePath',
+                                            name: '"MemoryPolicySwapFilePath"',
+                                            placeholder: 'Input swap file 
path',
+                                            tip: 'An optional path to a memory 
mapped file for this memory policy'
+                                        })
                                     .pc-form-grid-col-60
-                                        +dropdown('Eviction mode:', 
'$item.pageEvictionMode', '"MemoryPolicyPageEvictionMode"', 'true', 'DISABLED',
-                                        '[\
-                                            {value: "DISABLED", label: 
"DISABLED"},\
-                                            {value: "RANDOM_LRU", label: 
"RANDOM_LRU"},\
-                                            {value: "RANDOM_2_LRU", label: 
"RANDOM_2_LRU"}\
-                                        ]',
-                                        'An algorithm for memory pages 
eviction\
-                                        <ul>\
-                                            <li>DISABLED - Eviction is 
disabled</li>\
-                                            <li>RANDOM_LRU - Once a memory 
region defined by a memory policy is configured, an off - heap array is 
allocated to track last usage timestamp for every individual data page</li>\
-                                            <li>RANDOM_2_LRU - Differs from 
Random - LRU only in a way that two latest access timestamps are stored for 
every data page</li>\
-                                        </ul>')
+                                        +form-field__dropdown({
+                                            label: 'Eviction mode:',
+                                            model: '$item.pageEvictionMode',
+                                            name: 
'"MemoryPolicyPageEvictionMode"',
+                                            placeholder: 'DISABLED',
+                                            options: '[\
+                                                {value: "DISABLED", label: 
"DISABLED"},\
+                                                {value: "RANDOM_LRU", label: 
"RANDOM_LRU"},\
+                                                [value: "RANDOM_2_LRU", label: 
"RANDOM_2_LRU"}\
+                                            ]',
+                                            tip: 'An algorithm for memory 
pages eviction\
+                                                 <ul>\
+                                                    <li>DISABLED - Eviction is 
disabled</li>\
+                                                    <li>RANDOM_LRU - Once a 
memory region defined by a memory policy is configured, an off - heap array is 
allocated to track last usage timestamp for every individual data page</li>\
+                                                    <li>RANDOM_2_LRU - Differs 
from Random - LRU only in a way that two latest access timestamps are stored 
for every data page</li>\
+                                                 </ul>'
+                                        })
                                     .pc-form-grid-col-30
-                                        +number-min-max-step('Eviction 
threshold:', '$item.evictionThreshold', '"MemoryPolicyEvictionThreshold"',
-                                        'true', '0.9', '0.5', '0.999', '0.05', 
'A threshold for memory pages eviction initiation')
+                                        +form-field__number({
+                                            label: 'Eviction threshold:',
+                                            model: '$item.evictionThreshold',
+                                            name: 
'"MemoryPolicyEvictionThreshold"',
+                                            placeholder: '0.9',
+                                            min: '0.5',
+                                            max: '0.999',
+                                            step: '0.05',
+                                            tip: 'A threshold for memory pages 
eviction initiation'
+                                        })
                                     .pc-form-grid-col-30
                                         +form-field__number({
                                             label: 'Empty pages pool size:',
@@ -171,15 +200,31 @@ panel-collapsible(
 
                                     //- Since ignite 2.1
                                     
.pc-form-grid-col-30(ng-if-start='$ctrl.available("2.1.0")')
-                                        +number('Sub intervals:', 
'$item.subIntervals', '"MemoryPolicySubIntervals"',
-                                            'true', '5', '1', 'A number of 
sub-intervals the whole rate time interval will be split into to calculate 
allocation and eviction rates')
+                                        +form-field__number({
+                                            label: 'Sub intervals:',
+                                            model: '$item.subIntervals',
+                                            name: '"MemoryPolicySubIntervals"',
+                                            placeholder: '5',
+                                            min: '1',
+                                            tip: 'A number of sub-intervals 
the whole rate time interval will be split into to calculate allocation and 
eviction rates'
+                                        })
                                     .pc-form-grid-col-30(ng-if-end)
-                                        +number('Rate time interval:', 
'$item.rateTimeInterval', '"MemoryPolicyRateTimeInterval"',
-                                            'true', '60000', '1000', 'Time 
interval for allocation rate and eviction rate monitoring purposes')
-                                            
+                                        +form-field__number({
+                                            label: 'Rate time interval:',
+                                            model: '$item.rateTimeInterval',
+                                            name: 
'"MemoryPolicyRateTimeInterval"',
+                                            placeholder: '60000',
+                                            min: '1000',
+                                            tip: 'Time interval for allocation 
rate and eviction rate monitoring purposes'
+                                        })
+
                                     .pc-form-grid-col-60
-                                        +checkbox('Metrics enabled', 
'$item.metricsEnabled', '"MemoryPolicyMetricsEnabled"',
-                                        'Whether memory metrics are enabled by 
default on node startup')
+                                        +form-field__checkbox({
+                                            label: 'Metrics enabled',
+                                            model: '$item.metricsEnabled',
+                                            name: 
'"MemoryPolicyMetricsEnabled"',
+                                            tip: 'Whether memory metrics are 
enabled by default on node startup'
+                                        })
 
                                 list-editable-no-items
                                     list-editable-add-item-button(

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/metrics.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/metrics.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/metrics.pug
index c4c9260..f99efbb 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/metrics.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/metrics.pug
@@ -25,22 +25,46 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
     panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
             .pc-form-grid-col-30
-                +number('Expire time:', `${model}.metricsExpireTime`, 
'"metricsExpireTime"', 'true', 'Long.MAX_VALUE', '1',
-                    'Time in milliseconds after which a certain metric value 
is considered expired')
+                +form-field__number({
+                    label: 'Expire time:',
+                    model: `${model}.metricsExpireTime`,
+                    name: '"metricsExpireTime"',
+                    placeholder: 'Long.MAX_VALUE',
+                    min: '0',
+                    tip: 'Time in milliseconds after which a certain metric 
value is considered expired'
+                })
             .pc-form-grid-col-30
-                +number('History size:', `${model}.metricsHistorySize`, 
'"metricsHistorySize"', 'true', '10000', '1',
-                    'Number of metrics kept in history to compute totals and 
averages')
+                +form-field__number({
+                    label: 'History size:',
+                    model: `${model}.metricsHistorySize`,
+                    name: '"metricsHistorySize"',
+                    placeholder: '10000',
+                    min: '1',
+                    tip: 'Number of metrics kept in history to compute totals 
and averages'
+                })
             .pc-form-grid-col-30
-                +number('Log frequency:', `${model}.metricsLogFrequency`, 
'"metricsLogFrequency"', 'true', '60000', '0',
-                    'Frequency of metrics log print out<br/>\ ' +
-                    'When <b>0</b> log print of metrics is disabled')
+                +form-field__number({
+                    label: 'Log frequency:',
+                    model: `${model}.metricsLogFrequency`,
+                    name: '"metricsLogFrequency"',
+                    placeholder: '60000',
+                    min: '0',
+                    tip: 'Frequency of metrics log print out<br/>\ ' +
+                    'When <b>0</b> log print of metrics is disabled'
+                })
             .pc-form-grid-col-30
-                +number('Update frequency:', 
`${model}.metricsUpdateFrequency`, '"metricsUpdateFrequency"', 'true', '2000', 
'-1',
-                    '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>')
+                +form-field__number({
+                    label: 'Update frequency:',
+                    model: `${model}.metricsUpdateFrequency`,
+                    name: '"metricsUpdateFrequency"',
+                    placeholder: '2000',
+                    min: '-1',
+                    tip: '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>'
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'clusterMetrics')

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/misc.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/misc.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/misc.pug
index cdc7258..d0e5d9f 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/misc.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/misc.pug
@@ -25,34 +25,69 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
     panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
             .pc-form-grid-col-60
-                +text('Work directory:', model + '.workDirectory', 
'"workDirectory"', 'false', 'Input work directory',
-                    'Ignite work directory.<br/>\
-                    If not provided, the method will use work directory under 
IGNITE_HOME specified by IgniteConfiguration#setIgniteHome(String)\
-                    or IGNITE_HOME environment variable or system property.')
+                +form-field__text({
+                    label: 'Work directory:',
+                    model: `${model}.workDirectory`,
+                    name: '"workDirectory"',
+                    placeholder: 'Input work directory',
+                    tip: 'Ignite work directory.<br/>\
+                          If not provided, the method will use work directory 
under IGNITE_HOME specified by IgniteConfiguration#setIgniteHome(String)\
+                          or IGNITE_HOME environment variable or system 
property.'
+                })
 
             //- Since ignite 2.0
             .pc-form-grid-col-60(ng-if-start='$ctrl.available("2.0.0")')
-                +text('Consistent ID:', model + '.consistentId', 
'"ConsistentId"', 'false', 'Input consistent ID', 'Consistent globally unique 
node ID which survives node restarts')
+                +form-field__text({
+                    label: 'Consistent ID:',
+                    model: `${model}.consistentId`,
+                    name: '"ConsistentId"',
+                    placeholder: 'Input consistent ID',
+                    tip: 'Consistent globally unique node ID which survives 
node restarts'
+                })
             .pc-form-grid-col-60
-                +java-class('Warmup closure:', model + '.warmupClosure', 
'"warmupClosure"', 'true', 'false', 'This closure will be executed before 
actual grid instance start')
+                +form-field__java-class({
+                    label: 'Warmup closure:',
+                    model: `${model}.warmupClosure`,
+                    name: '"warmupClosure"',
+                    tip: 'This closure will be executed before actual grid 
instance start'
+                })
+
             .pc-form-grid-col-60
-                +checkbox('Active on start', model + '.activeOnStart', 
'"activeOnStart"',
-                    'If cluster is not active on start, there will be no cache 
partition map exchanges performed until the cluster is activated')
+                +form-field__checkbox({
+                    label: 'Active on start',
+                    model: model + '.activeOnStart',
+                    name: '"activeOnStart"',
+                    tip: 'If cluster is not active on start, there will be no 
cache partition map exchanges performed until the cluster is activated'
+                })
             .pc-form-grid-col-60(ng-if-end)
-                +checkbox('Cache sanity check enabled', model + 
'.cacheSanityCheckEnabled', '"cacheSanityCheckEnabled"',
-                    'If enabled, then Ignite will perform the following checks 
and throw an exception if check fails<br/>\
-                    <ul>\
-                    <li>Cache entry is not externally locked with lock or 
lockAsync methods when entry is enlisted to transaction</li>\
-                    <li>Each entry in affinity group - lock transaction has 
the same affinity key as was specified on affinity transaction start</li>\
-                    <li>Each entry in partition group - lock transaction 
belongs to the same partition as was specified on partition transaction 
start</li>\
-                    </ul>')
+                +form-field__checkbox({
+                    label: 'Cache sanity check enabled',
+                    model: model + '.cacheSanityCheckEnabled',
+                    name: '"cacheSanityCheckEnabled"',
+                    tip: 'If enabled, then Ignite will perform the following 
checks and throw an exception if check fails<br/>\
+                          <ul>\
+                              <li>Cache entry is not externally locked with 
lock or lockAsync methods when entry is enlisted to transaction</li>\
+                              <li>Each entry in affinity group - lock 
transaction has the same affinity key as was specified on affinity transaction 
start</li>\
+                              <li>Each entry in partition group - lock 
transaction belongs to the same partition as was specified on partition 
transaction start</li>\
+                          </ul>'
+                })
 
             .pc-form-grid-col-60(ng-if='$ctrl.available(["1.0.0", "2.1.0"])')
-                +checkbox('Late affinity assignment', model + 
'.lateAffinityAssignment', '"lateAffinityAssignment"',
-                    'With late affinity assignment mode if primary node was 
changed for some partition this nodes becomes primary only when rebalancing for 
all assigned primary partitions is finished')
+                +form-field__checkbox({
+                    label: 'Late affinity assignment',
+                    model: model + '.lateAffinityAssignment',
+                    name: '"lateAffinityAssignment"',
+                    tip: 'With late affinity assignment mode if primary node 
was changed for some partition this nodes becomes primary only when rebalancing 
for all assigned primary partitions is finished'
+                })
 
             .pc-form-grid-col-60(ng-if='$ctrl.available("2.1.0")')
-                +number('Long query timeout:', 
`${model}.longQueryWarningTimeout`, '"LongQueryWarningTimeout"', 'true', 
'3000', '0',
-                'Timeout in milliseconds after which long query warning will 
be printed')
+                +form-field__number({
+                    label: 'Long query timeout:',
+                    model: `${model}.longQueryWarningTimeout`,
+                    name: '"LongQueryWarningTimeout"',
+                    placeholder: '3000',
+                    min: '0',
+                    tip: 'Timeout in milliseconds after which long query 
warning will be printed'
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'clusterMisc', 'caches')

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/odbc.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/odbc.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/odbc.pug
index 07b9919..3f1bca5 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/odbc.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/odbc.pug
@@ -27,7 +27,7 @@ panel-collapsible(
 )
     panel-title ODBC configuration
     panel-description
-        | ODBC server configuration. 
+        | ODBC server configuration.
         | 
#[a.link-success(href="https://apacheignite.readme.io/docs/odbc-driver"; 
target="_blank") More info]
     panel-content.pca-form-row(ng-if=`$ctrl.available(["1.0.0", "2.1.0"]) && 
ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
@@ -45,26 +45,61 @@ panel-collapsible(
                 )
                     +form-field__error({ error: 'correctMarshaller', message: 
'ODBC can only be used with BinaryMarshaller' })
             .pc-form-grid-col-60
-                +text-ip-address-with-port-range('ODBC endpoint address:', 
`${model}.endpointAddress`, '"endpointAddress"', enabled, 
'0.0.0.0:10800..10810',
-                    'ODBC endpoint address. <br/>\
-                    The following address formats are permitted:\
-                    <ul>\
-                        <li>hostname - will use provided hostname and default 
port range</li>\
-                        <li>hostname:port - will use provided hostname and 
port</li>\
-                        <li>hostname:port_from..port_to - will use provided 
hostname and port range</li>\
-                    </ul>')
+                +form-field__ip-address-with-port-range({
+                    label: `${model}.endpointAddress`,
+                    model: '$item.localOutboundHost',
+                    name: '"endpointAddress"',
+                    enabled,
+                    placeholder: '0.0.0.0:10800..10810',
+                    tip: 'ODBC endpoint address. <br/>\
+                          The following address formats are permitted:\
+                          <ul>\
+                              <li>hostname - will use provided hostname and 
default port range</li>\
+                              <li>hostname:port - will use provided hostname 
and port</li>\
+                              <li>hostname:port_from..port_to - will use 
provided hostname and port range</li>\
+                          </ul>'
+                })
             .pc-form-grid-col-30
-                +number('Send buffer size:', `${model}.socketSendBufferSize`, 
'"ODBCSocketSendBufferSize"', enabled, '0', '0',
-                    'Socket send buffer size.<br/>\
-                    When set to <b>0</b>, operation system default will be 
used')
+                +form-field__number({
+                    label: 'Send buffer size:',
+                    model: `${model}.socketSendBufferSize`,
+                    name: '"ODBCSocketSendBufferSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Socket send buffer size.<br/>\
+                          When set to <b>0</b>, operation system default will 
be used'
+                })
             .pc-form-grid-col-30
-                +number('Socket receive buffer size:', 
`${model}.socketReceiveBufferSize`, '"ODBCSocketReceiveBufferSize"', enabled, 
'0', '0',
-                    'Socket receive buffer size.<br/>\
-                    When set to <b>0</b>, operation system default will be 
used')
+                +form-field__number({
+                    label:'Socket receive buffer size:',
+                    model: `${model}.socketReceiveBufferSize`,
+                    name: '"ODBCSocketReceiveBufferSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Socket receive buffer size.<br/>\
+                          When set to <b>0</b>, operation system default will 
be used'
+                })
             .pc-form-grid-col-30
-                +number('Maximum open cursors', `${model}.maxOpenCursors`, 
'"maxOpenCursors"', enabled, '128', '1', 'Maximum number of opened cursors per 
connection')
+                +form-field__number({
+                    label: 'Maximum open cursors',
+                    model: `${model}.maxOpenCursors`,
+                    name: '"maxOpenCursors"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '128',
+                    min: '1',
+                    tip: 'Maximum number of opened cursors per connection'
+                })
             .pc-form-grid-col-30
-                +number('Pool size:', `${model}.threadPoolSize`, 
'"ODBCThreadPoolSize"', enabled, 'max(8, availableProcessors)', '1',
-                    'Size of thread pool that is in charge of processing ODBC 
tasks')
+                +form-field__number({
+                    label: 'Pool size:',
+                    model: `${model}.threadPoolSize`,
+                    name: '"ODBCThreadPoolSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: 'max(8, availableProcessors)',
+                    min: '1',
+                    tip: 'Size of thread pool that is in charge of processing 
ODBC tasks'
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'clusterODBC')

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/persistence.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/persistence.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/persistence.pug
index 2c8d10a..a15707a 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/persistence.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/persistence.pug
@@ -27,56 +27,189 @@ panel-collapsible(
 )
     panel-title Persistence store
     panel-description
-        | Configures Apache Ignite Native Persistence. 
+        | Configures Apache Ignite Native Persistence.
         
a.link-success(href='https://apacheignite.readme.io/docs/distributed-persistent-store'
 target='_blank') More info
     panel-content.pca-form-row(ng-if=`$ctrl.available(["2.1.0", "2.3.0"]) && 
ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
             .pc-form-grid-col-60
-                +checkbox('Enabled', enabled, '"PersistenceEnabled"', 'Flag 
indicating whether to configure persistent configuration')
+                +form-field__checkbox({
+                    label: 'Enabled',
+                    model: enabled,
+                    name: '"PersistenceEnabled"',
+                    tip: 'Flag indicating whether to configure persistent 
configuration'
+                })
             .pc-form-grid-col-60
-                +text-enabled('Store path:', `${model}.persistentStorePath`, 
'"PersistenceStorePath"', enabled, 'false', 'Input store path',
-                'A path the root directory where the Persistent Store will 
persist data and indexes')
+                +form-field__text({
+                    label: 'Store path:',
+                    model: `${model}.persistentStorePath`,
+                    name: '"PersistenceStorePath"',
+                    disabled: `!(${enabled})`,
+                    placeholder: 'Input store path',
+                    tip: 'A path the root directory where the Persistent Store 
will persist data and indexes'
+                })
             .pc-form-grid-col-60
-                +checkbox-enabled('Metrics enabled', 
`${model}.metricsEnabled`, '"PersistenceMetricsEnabled"', enabled, 'Flag 
indicating whether persistence metrics collection is enabled')
+                +form-field__checkbox({
+                    label: 'Metrics enabled',
+                    model: `${model}.metricsEnabled`,
+                    name: '"PersistenceMetricsEnabled"',
+                    disabled: `!${enabled}`,
+                    tip: 'Flag indicating whether persistence metrics 
collection is enabled'
+                })
             .pc-form-grid-col-60
-                +checkbox-enabled('Always write full pages', 
`${model}.alwaysWriteFullPages`, '"PersistenceAlwaysWriteFullPages"', enabled, 
'Flag indicating whether always write full pages')
+                +form-field__checkbox({
+                    label: 'Always write full pages',
+                    model: `${model}.alwaysWriteFullPages`,
+                    name: '"PersistenceAlwaysWriteFullPages"',
+                    disabled: `!${enabled}`,
+                    tip: 'Flag indicating whether always write full pages'
+                })
             .pc-form-grid-col-60
-                +number('Checkpointing frequency:', 
`${model}.checkpointingFrequency`, '"PersistenceCheckpointingFrequency"', 
enabled, '180000', '1',
-                'Frequency which is a minimal interval when the dirty pages 
will be written to the Persistent Store')
+                +form-field__number({
+                    label: 'Checkpointing frequency:',
+                    model: `${model}.checkpointingFrequency`,
+                    name: '"PersistenceCheckpointingFrequency"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '180000',
+                    min: '1',
+                    tip: 'Frequency which is a minimal interval when the dirty 
pages will be written to the Persistent Store'
+                })
             .pc-form-grid-col-60
-                +number('Checkpointing page buffer size:', 
`${model}.checkpointingPageBufferSize`, 
'"PersistenceCheckpointingPageBufferSize"', enabled, '268435456', '0',
-                'Amount of memory allocated for a checkpointing temporary 
buffer')
+                +form-field__number({
+                    label: 'Checkpointing page buffer size:',
+                    model: `${model}.checkpointingPageBufferSize`,
+                    name: '"PersistenceCheckpointingPageBufferSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '268435456',
+                    min: '0',
+                    tip: 'Amount of memory allocated for a checkpointing 
temporary buffer'
+                })
             .pc-form-grid-col-60
-                +number('Checkpointing threads:', 
`${model}.checkpointingThreads`, '"PersistenceCheckpointingThreads"', enabled, 
'1', '1', 'A number of threads to use for the checkpointing purposes')
+                +form-field__number({
+                    label: 'Checkpointing threads:',
+                    model: `${model}.checkpointingThreads`,
+                    name: '"PersistenceCheckpointingThreads"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '1',
+                    min: '1',
+                    tip: 'A number of threads to use for the checkpointing 
purposes'
+                })
             .pc-form-grid-col-60
-                +text-enabled('WAL store path:', `${model}.walStorePath`, 
'"PersistenceWalStorePath"', enabled, 'false', 'Input store path', 'A path to 
the directory where WAL is stored')
+                +form-field__text({
+                    label: 'WAL store path:',
+                    model: `${model}.walStorePath`,
+                    name: '"PersistenceWalStorePath"',
+                    disabled: `!(${enabled})`,
+                    placeholder: 'Input store path',
+                    tip: 'A path to the directory where WAL is stored'
+                })
             .pc-form-grid-col-60
-                +text-enabled('WAL archive path:', `${model}.walArchivePath`, 
'"PersistenceWalArchivePath"', enabled, 'false', 'Input archive path', 'A path 
to the WAL archive directory')
+                +form-field__text({
+                    label: 'WAL archive path:',
+                    model: `${model}.walArchivePath`,
+                    name: '"PersistenceWalArchivePath"',
+                    disabled: `!(${enabled})`,
+                    placeholder: 'Input archive path',
+                    tip: 'A path to the WAL archive directory'
+                })
             .pc-form-grid-col-30
-                +number('WAL segments:', `${model}.walSegments`, 
'"PersistenceWalSegments"', enabled, '10', '1', 'A number of WAL segments to 
work with')
+                +form-field__number({
+                    label: 'WAL segments:',
+                    model: `${model}.walSegments`,
+                    name: '"PersistenceWalSegments"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '10',
+                    min: '1',
+                    tip: 'A number of WAL segments to work with'
+                })
             .pc-form-grid-col-30
-                +number('WAL segment size:', `${model}.walSegmentSize`, 
'"PersistenceWalSegmentSize"', enabled, '67108864', '0', 'Size of a WAL 
segment')
+                +form-field__number({
+                    label: 'WAL segment size:',
+                    model: `${model}.walSegmentSize`,
+                    name: '"PersistenceWalSegmentSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '67108864',
+                    min: '0',
+                    tip: 'Size of a WAL segment'
+                })
             .pc-form-grid-col-30
-                +number('WAL history size:', `${model}.walHistorySize`, 
'"PersistenceWalHistorySize"', enabled, '20', '1', 'A total number of 
checkpoints to keep in the WAL history')
+                +form-field__number({
+                    label: 'WAL history size:',
+                    model: `${model}.walHistorySize`,
+                    name: '"PersistenceWalHistorySize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '20',
+                    min: '1',
+                    tip: 'A total number of checkpoints to keep in the WAL 
history'
+                })
             .pc-form-grid-col-30
-                +number('WAL flush frequency:', `${model}.walFlushFrequency`, 
'"PersistenceWalFlushFrequency"', enabled, '2000', '1',
-                'How often will be fsync, in milliseconds. In background mode, 
exist thread which do fsync by timeout')
+                +form-field__number({
+                    label: 'WAL flush frequency:',
+                    model: `${model}.walFlushFrequency`,
+                    name: '"PersistenceWalFlushFrequency"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '2000',
+                    min: '1',
+                    tip:'How often will be fsync, in milliseconds. In 
background mode, exist thread which do fsync by timeout'
+                })
             .pc-form-grid-col-30
-                +number('WAL fsync delay:', `${model}.walFsyncDelayNanos`, 
'"PersistenceWalFsyncDelay"', enabled, '1000', '1', 'WAL fsync delay, in 
nanoseconds')
+                +form-field__number({
+                    label: 'WAL fsync delay:',
+                    model: `${model}.walFsyncDelayNanos`,
+                    name: '"PersistenceWalFsyncDelay"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '1000',
+                    min: '1',
+                    tip: 'WAL fsync delay, in nanoseconds'
+                })
             .pc-form-grid-col-30
-                +number('WAL record iterator buffer size:', 
`${model}.walRecordIteratorBufferSize`, 
'"PersistenceWalRecordIteratorBufferSize"', enabled, '67108864', '1',
-                'How many bytes iterator read from disk(for one reading), 
during go ahead WAL')
+                +form-field__number({
+                    label: 'WAL record iterator buffer size:',
+                    model: `${model}.walRecordIteratorBufferSize`,
+                    name: '"PersistenceWalRecordIteratorBufferSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '67108864',
+                    min: '1',
+                    tip: 'How many bytes iterator read from disk(for one 
reading), during go ahead WAL'
+                })
             .pc-form-grid-col-30
-                +number('Lock wait time:', `${model}.lockWaitTime`, 
'"PersistenceLockWaitTime"', enabled, '10000', '1',
-                'Time out in second, while wait and try get file lock for 
start persist manager')
+                +form-field__number({
+                    label: 'Lock wait time:',
+                    model: `${model}.lockWaitTime`,
+                    name: '"PersistenceLockWaitTime"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '10000',
+                    min: '1',
+                    tip: 'Time out in second, while wait and try get file lock 
for start persist manager'
+                })
             .pc-form-grid-col-30
-                +number('Rate time interval:', `${model}.rateTimeInterval`, 
'"PersistenceRateTimeInterval"', enabled, '60000', '1000',
-                'The length of the time interval for rate - based metrics. 
This interval defines a window over which hits will be tracked.')
+                +form-field__number({
+                    label: 'Rate time interval:' ,
+                    model: `${model}.rateTimeInterval`,
+                    name: '"PersistenceRateTimeInterval"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '60000',
+                    min: '1000',
+                    tip: 'The length of the time interval for rate - based 
metrics. This interval defines a window over which hits will be tracked.'
+                })
             .pc-form-grid-col-30
-                +number('Thread local buffer size:', `${model}.tlbSize`, 
'"PersistenceTlbSize"', enabled, '131072', '1',
-                'Define size thread local buffer. Each thread which write to 
WAL have thread local buffer for serialize recode before write in WAL')
+                +form-field__number({
+                    label: 'Thread local buffer size:',
+                    model: `${model}.tlbSize`,
+                    name: '"PersistenceTlbSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '131072',
+                    min: '1',
+                    tip: 'Define size thread local buffer. Each thread which 
write to WAL have thread local buffer for serialize recode before write in WAL'
+                })
             .pc-form-grid-col-30
-                +number('Sub intervals:', `${model}.subIntervals`, 
'"PersistenceSubIntervals"', enabled, '5', '1',
-                'Number of sub - intervals the whole rate time interval will 
be split into to calculate rate - based metrics')
+                +form-field__number({
+                    label: 'Sub intervals:',
+                    model: `${model}.subIntervals`,
+                    name: '"PersistenceSubIntervals"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '5',
+                    min: '1',
+                    tip: 'Number of sub - intervals the whole rate time 
interval will be split into to calculate rate - based metrics'
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'clusterPersistence')

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/service.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/service.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/service.pug
index 7f318ed..10b5dd8 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/service.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/service.pug
@@ -22,7 +22,7 @@ include /app/helpers/jade/mixins
 panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
     panel-title Service configuration
     panel-description
-        | Service Grid allows for deployments of arbitrary user-defined 
services on the cluster. 
+        | Service Grid allows for deployments of arbitrary user-defined 
services on the cluster.
         | 
#[a.link-success(href="https://apacheignite.readme.io/docs/fault-tolerance"; 
target="_blank") More info]
     panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
         .pca-form-column-6
@@ -51,24 +51,54 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                                 )
                                     +form-field__error({ error: 'uniqueName', 
message: 'Service with that name is already configured' })
                             .pc-form-grid-col-60
-                                +java-class('Service class', '$item.service', 
'"serviceService"', 'true', 'true', 'Service implementation class name')
+                                +form-field__java-class({
+                                    label: 'Service class',
+                                    model: '$item.service',
+                                    name: '"serviceService"',
+                                    required: 'true',
+                                    tip: 'Service implementation class name'
+                                })
                             .pc-form-grid-col-60
-                                +number('Max per node count:', 
'$item.maxPerNodeCount', '"ServiceMaxPerNodeCount"', 'true', 'Unlimited', '0',
-                                    'Maximum number of deployed service 
instances on each node.<br/>' +
-                                    'Zero for unlimited')
+                                +form-field__number({
+                                    label: 'Max per node count:',
+                                    model: '$item.maxPerNodeCount',
+                                    name: '"ServiceMaxPerNodeCount"',
+                                    placeholder: 'Unlimited',
+                                    min: '0',
+                                    tip: 'Maximum number of deployed service 
instances on each node.<br/>\
+                                          Zero for unlimited'
+                                })
                             .pc-form-grid-col-60
-                                +number('Total count:', '$item.totalCount', 
'"serviceTotalCount"', 'true', 'Unlimited', '0',
-                                    'Total number of deployed service 
instances in the cluster.<br/>' +
-                                    'Zero for unlimited')
+                                +form-field__number({
+                                    label: 'Total count:',
+                                    model: '$item.totalCount',
+                                    name: '"serviceTotalCount"',
+                                    placeholder: 'Unlimited',
+                                    min: '0',
+                                    tip: 'Total number of deployed service 
instances in the cluster.<br/>\
+                                        Zero for unlimited'
+                                })
                             .pc-form-grid-col-60
-                                +dropdown-required-empty('Cache:', 
'$item.cache', '"serviceCache"', 'true', 'false',
-                                    'Choose cache', 'No caches configured for 
current cluster', '$ctrl.cachesMenu', 'Cache name used for key-to-node affinity 
calculation')(
+                                +form-field__dropdown({
+                                    label: 'Cache:',
+                                    model: '$item.cache',
+                                    name: '"serviceCache"',
+                                    placeholder: 'Choose cache',
+                                    placeholderEmpty: 'No caches configured 
for current cluster',
+                                    options: '$ctrl.cachesMenu',
+                                    tip: 'Cache name used for key-to-node 
affinity calculation'
+                                })(
                                     
pc-is-in-collection='$ctrl.clonedCluster.caches'
                                 )
                                     +form-field__error({ error: 
'isInCollection', message: `Cluster doesn't have such a cache` })
                             .pc-form-grid-col-60
-                                +text('Affinity key:', '$item.affinityKey', 
'"serviceAffinityKey"', 'false', 'Input affinity key',
-                                    'Affinity key used for key-to-node 
affinity calculation')
+                                +form-field__text({
+                                    label: 'Affinity key:',
+                                    model: '$item.affinityKey',
+                                    name: '"serviceAffinityKey"',
+                                    placeholder: 'Input affinity key',
+                                    tip: 'Affinity key used for key-to-node 
affinity calculation'
+                                })
 
                         list-editable-no-items
                             list-editable-add-item-button(

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/sql-connector.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/sql-connector.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/sql-connector.pug
index 708aa0d..3b2ca27 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/sql-connector.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/sql-connector.pug
@@ -31,28 +31,86 @@ panel-collapsible(
     panel-content.pca-form-row(ng-if=`$ctrl.available(["2.1.0", "2.3.0"]) && 
ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
             .pc-form-grid-col-60
-                +checkbox('Enabled', connectionEnabled, 
'"SqlConnectorEnabled"', 'Flag indicating whether to configure SQL connector 
configuration')
+                +form-field__checkbox({
+                    label: 'Enabled',
+                    model: connectionEnabled,
+                    name: '"SqlConnectorEnabled"',
+                    tip: 'Flag indicating whether to configure SQL connector 
configuration'
+                })
             .pc-form-grid-col-60
-                +text-enabled('Host:', `${connectionModel}.host`, 
'"SqlConnectorHost"', connectionEnabled, 'false', 'localhost')
+                +form-field__text({
+                    label: 'Host:',
+                    model: `${connectionModel}.host`,
+                    name: '"SqlConnectorHost"',
+                    disabled: `!(${connectionEnabled})`,
+                    placeholder: 'localhost'
+                })
             .pc-form-grid-col-30
-                +number('Port:', `${connectionModel}.port`, 
'"SqlConnectorPort"', connectionEnabled, '10800', '1025')
+                +form-field__number({
+                    label: 'Port:',
+                    model: `${connectionModel}.port`,
+                    name: '"SqlConnectorPort"',
+                    disabled: `!(${connectionEnabled})`,
+                    placeholder: '10800',
+                    min: '1025'
+                })
             .pc-form-grid-col-30
-                +number('Port range:', `${connectionModel}.portRange`, 
'"SqlConnectorPortRange"', connectionEnabled, '100', '0')
+                +form-field__number({
+                    label: 'Port range:',
+                    model: `${connectionModel}.portRange`,
+                    name: '"SqlConnectorPortRange"',
+                    disabled: `!(${connectionEnabled})`,
+                    placeholder: '100',
+                    min: '0'
+                })
             .pc-form-grid-col-30
-                +number('Socket send buffer size:', 
`${connectionModel}.socketSendBufferSize`, 
'"SqlConnectorSocketSendBufferSize"', connectionEnabled, '0', '0',
-                    'Socket send buffer size.<br/>\
-                    When set to <b>0</b>, operation system default will be 
used')
+                +form-field__number({
+                    label: 'Socket send buffer size:',
+                    model: `${connectionModel}.socketSendBufferSize`,
+                    name: '"SqlConnectorSocketSendBufferSize"',
+                    disabled: `!(${connectionEnabled})`,
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Socket send buffer size.<br/>\
+                          When set to <b>0</b>, operation system default will 
be used'
+                })
             .pc-form-grid-col-30
-                +number('Socket receive buffer size:', 
`${connectionModel}.socketReceiveBufferSize`, 
'"SqlConnectorSocketReceiveBufferSize"', connectionEnabled, '0', '0',
-                    'Socket receive buffer size.<br/>\
-                    When set to <b>0</b>, operation system default will be 
used')
+                +form-field__number({
+                    label: 'Socket receive buffer size:',
+                    model: `${connectionModel}.socketReceiveBufferSize`,
+                    name: '"SqlConnectorSocketReceiveBufferSize"',
+                    disabled: `!(${connectionEnabled})`,
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Socket receive buffer size.<br/>\
+                         When set to <b>0</b>, operation system default will 
be used'
+                })
             .pc-form-grid-col-30
-                +number('Max connection cursors:', 
`${connectionModel}.maxOpenCursorsPerConnection`, 
'"SqlConnectorMaxOpenCursorsPerConnection"', connectionEnabled, '128', '0',
-                    'Max number of opened cursors per connection')
+                +form-field__number({
+                    label: 'Max connection cursors:',
+                    model: `${connectionModel}.maxOpenCursorsPerConnection`,
+                    name: '"SqlConnectorMaxOpenCursorsPerConnection"',
+                    disabled: `!(${connectionEnabled})`,
+                    placeholder: '128',
+                    min: '0',
+                    tip: 'Max number of opened cursors per connection'
+                })
             .pc-form-grid-col-30
-                +number('Pool size:', `${connectionModel}.threadPoolSize`, 
'"SqlConnectorThreadPoolSize"', connectionEnabled, 'max(8, 
availableProcessors)', '1',
-                    'Size of thread pool that is in charge of processing SQL 
requests')
+                +form-field__number({
+                    label: 'Pool size:',
+                    model: `${connectionModel}.threadPoolSize`,
+                    name: '"SqlConnectorThreadPoolSize"',
+                    disabled: `!(${connectionEnabled})`,
+                    placeholder: 'max(8, availableProcessors)',
+                    min: '1',
+                    tip: 'Size of thread pool that is in charge of processing 
SQL requests'
+                })
             .pc-form-grid-col-60
-                +checkbox-enabled('TCP_NODELAY option', 
`${connectionModel}.tcpNoDelay`, '"SqlConnectorTcpNoDelay"', connectionEnabled)
+                +form-field__checkbox({
+                    label: 'TCP_NODELAY option',
+                    model: `${connectionModel}.tcpNoDelay`,
+                    name: '"SqlConnectorTcpNoDelay"',
+                    disabled: `!${connectionEnabled}`
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'clusterQuery')

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/ssl.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/ssl.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/ssl.pug
index c1e2337..61c722e 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/ssl.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/ssl.pug
@@ -25,25 +25,60 @@ include /app/helpers/jade/mixins
 panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
     panel-title SSL configuration
     panel-description
-        | Settings for SSL configuration for creating a secure socket layer. 
+        | Settings for SSL configuration for creating a secure socket layer.
         | #[a.link-success(href="https://apacheignite.readme.io/docs/ssltls"; 
target="_blank") More info]
     panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
             .pc-form-grid-col-60
-                +checkbox('Enabled', enabled, '"sslEnabled"', 'Flag indicating 
whether to configure SSL configuration')
+                +form-field__checkbox({
+                    label: 'Enabled',
+                    model: enabled,
+                    name: '"sslEnabled"',
+                    tip: 'Flag indicating whether to configure SSL 
configuration'
+                })
             .pc-form-grid-col-60
-                +text-options('Algorithm to create a key manager:', 
`${model}.keyAlgorithm`, '"keyAlgorithm"', '["SumX509", "X509"]', enabled, 
'false', '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')
+                +form-field__typeahead({
+                    label: 'Algorithm to create a key manager:',
+                    model: `${model}.keyAlgorithm`,
+                    name: '"keyAlgorithm"',
+                    disabled: `!(${enabled})`,
+                    placeholder: 'SumX509',
+                    options: '["SumX509", "X509"]',
+                    tip: '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'
+                })
+
             .pc-form-grid-col-60
-                +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')
+                +form-field__text({
+                    label: 'Key store file:',
+                    model: `${secondaryFileSystem}.keyStoreFilePath`,
+                    name: '"keyStoreFilePath"',
+                    disabled: `!(${enabled})`,
+                    required: enabled,
+                    placeholder: 'Path to the key store file',
+                    tip: 'Path to the key store file<br/>\
+                          This is a mandatory parameter since ssl context 
could not be initialized without key manager'
+                })
             .pc-form-grid-col-30
-                +text-options('Key store type:', `${model}.keyStoreType`, 
'"keyStoreType"', '["JKS", "PCKS11", "PCKS12"]', enabled, 'false', 'JKS',
-                    'Key store type used in context initialization')
+                +form-field__typeahead({
+                    label: 'Key store type:',
+                    model: `${model}.keyStoreType`,
+                    name: '"keyStoreType"',
+                    disabled: `!(${enabled})`,
+                    placeholder: 'JKS',
+                    options: '["JKS", "PCKS11", "PCKS12"]',
+                    tip: 'Key store type used in context initialization'
+                })
             .pc-form-grid-col-30
-                +text-options('Protocol:', `${model}.protocol`, '"protocol"', 
'["TSL", "SSL"]', enabled, 'false', 'TSL', 'Protocol for secure transport')
+                +form-field__typeahead({
+                    label: 'Protocol:',
+                    model: `${model}.protocol`,
+                    name: '"protocol"',
+                    disabled: `!(${enabled})`,
+                    placeholder: 'TSL',
+                    options: '["TSL", "SSL"]',
+                    tip: 'Protocol for secure transport'
+                })
             .pc-form-grid-col-60
                 .ignite-form-field
                     list-editable(
@@ -57,7 +92,7 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
 
                         list-editable-item-edit
                             +list-java-class-field('Trust manager', '$item', 
'"trustManager"', trust)
-                                +unique-feedback('"trustManager"', 'Such trust 
manager already exists!')
+                                +form-field__error({ error: 'igniteUnique', 
message: 'Such trust manager already exists!' })
 
                         list-editable-no-items
                             list-editable-add-item-button(
@@ -83,6 +118,14 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                 })
                     +form-field__error({ error: 'required', message: 'Trust 
store file or trust managers should be configured' })
             .pc-form-grid-col-30(ng-if-end)
-                +text-options('Trust store type:', `${model}.trustStoreType`, 
'"trustStoreType"', '["JKS", "PCKS11", "PCKS12"]', enabled, 'false', 'JKS', 
'Trust store type used in context initialization')
+                +form-field__typeahead({
+                    label: 'Trust store type:',
+                    model: `${model}.trustStoreType`,
+                    name: '"trustStoreType"',
+                    disabled: `!(${enabled})`,
+                    placeholder: 'JKS',
+                    options: '["JKS", "PCKS11", "PCKS12"]',
+                    tip: 'Trust store type used in context initialization'
+                })
         .pca-form-column-6
             +preview-xml-java(cluster, 'clusterSsl')

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/swap.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/swap.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/swap.pug
index 458de38..d39dae6 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/swap.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/swap.pug
@@ -28,23 +28,33 @@ panel-collapsible(
 )
     panel-title Swap
     panel-description
-        | Settings for overflow data to disk if it cannot fit in memory. 
+        | Settings for overflow data to disk if it cannot fit in memory.
         | 
#[a.link-success(href="https://apacheignite.readme.io/v1.9/docs/off-heap-memory#swap-space";
 target="_blank") More info]
     panel-content.pca-form-row(ng-if=`$ctrl.available(["1.0.0", "2.0.0"]) && 
ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
             .pc-form-grid-col-60
-                +dropdown('Swap space SPI:', `${swapModel}.kind`, 
'"swapSpaceSpi"', 'true', 'Choose swap SPI',
-                    '::$ctrl.Clusters.swapSpaceSpis',
-                    '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\
-                    <ul>\
-                        <li>File-based swap - File-based swap space SPI 
implementation which holds keys in memory</li>\
-                        <li>Not set - File-based swap space SPI with default 
configuration when it needed</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Swap space SPI:',
+                    model: `${swapModel}.kind`,
+                    name: '"swapSpaceSpi"',
+                    placeholder: 'Choose swap SPI',
+                    options: '::$ctrl.Clusters.swapSpaceSpis',
+                    tip: '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\
+                        <ul>\
+                            <li>File-based swap - File-based swap space SPI 
implementation which holds keys in memory</li>\
+                            <li>Not set - File-based swap space SPI with 
default configuration when it needed</li>\
+                        </ul>'
+                })
             .pc-form-group.pc-form-grid-row(ng-show=`${swapModel}.kind`)
                 .pc-form-grid-col-60
-                    +text('Base directory:', `${fileSwapModel}.baseDirectory`, 
'"baseDirectory"', 'false', 'swapspace',
-                        'Base directory where to write files')
+                    +form-field__text({
+                        label: 'Base directory:',
+                        model: `${fileSwapModel}.baseDirectory`,
+                        name: '"baseDirectory"',
+                        placeholder: 'swapspace',
+                        tip: 'Base directory where to write files'
+                    })
                 .pc-form-grid-col-30
                     +form-field__number({
                         label: 'Read stripe size:',
@@ -59,16 +69,36 @@ panel-collapsible(
                     )
                         +form-field__error({ error: 'powerOfTwo', message: 
'Read stripe size must be positive and power of two' })
                 .pc-form-grid-col-30
-                    +number-min-max-step('Maximum sparsity:', 
`${fileSwapModel}.maximumSparsity`, '"maximumSparsity"', 'true', '0.5', '0', 
'0.999', '0.001',
-                        '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')
+                    +form-field__number({
+                        label: 'Maximum sparsity:',
+                        model: `${fileSwapModel}.maximumSparsity`,
+                        name: '"maximumSparsity"',
+                        placeholder: '0.5',
+                        min: '0',
+                        max: '0.999',
+                        step: '0.001',
+                        tip: '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'
+                    })
                 .pc-form-grid-col-30
-                    +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')
+                    +form-field__number({
+                        label: 'Max write queue size:',
+                        model: `${fileSwapModel}.maxWriteQueueSize`,
+                        name: '"maxWriteQueueSize"',
+                        placeholder: '1024 * 1024',
+                        min: '0',
+                        tip: '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'
+                    })
                 .pc-form-grid-col-30
-                    +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')
+                    +form-field__number({
+                        label: 'Write buffer size:',
+                        model: `${fileSwapModel}.writeBufferSize`,
+                        name: '"writeBufferSize"',
+                        placeholder: '64 * 1024',
+                        min: '0',
+                        tip: 'Write buffer size in bytes<br/>\
+                              Write to disk occurs only when this buffer is 
full'
+                    })
         .pca-form-column-6
             +preview-xml-java(model, 'clusterSwap')

Reply via email to