http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/store.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/store.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/store.pug
index 46545a8..903ea08 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/store.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/store.pug
@@ -21,8 +21,8 @@ include /app/helpers/jade/mixins
 
 panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
     panel-title Store
-    panel-description 
-        | Cache store settings. 
+    panel-description
+        | Cache store settings.
         | 
#[a.link-success(href="https://apacheignite.readme.io/docs/3rd-party-store"; 
target="_blank") More info]
     panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
@@ -42,13 +42,13 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                         <li>Hibernate BLOB store factory - Objects are stored 
in underlying database in BLOB format backed by Hibernate</li>
                     </ul>`
                 })(
-                    ui-validate=`{
+                ui-validate=`{
                         writeThroughOn: 
'$ctrl.Caches.cacheStoreFactory.storeDisabledValueOff(${model}, 
${model}.writeThrough)',
                         readThroughOn: 
'$ctrl.Caches.cacheStoreFactory.storeDisabledValueOff(${model}, 
${model}.readThrough)',
                         writeBehindOn: 
'$ctrl.Caches.cacheStoreFactory.storeDisabledValueOff(${model}, 
${model}.writeBehindEnabled)'
                     }`
-                    ui-validate-watch-collection=`"[${model}.readThrough, 
${model}.writeThrough, ${model}.writeBehindEnabled]"`
-                    ng-model-options='{allowInvalid: true}'
+                ui-validate-watch-collection=`"[${model}.readThrough, 
${model}.writeThrough, ${model}.writeBehindEnabled]"`
+                ng-model-options='{allowInvalid: true}'
                 )
                     +form-field__error({ error: 'writeThroughOn', message: 
'Write through is enabled but store is not set' })
                     +form-field__error({ error: 'readThroughOn', message: 
'Read through is enabled but store is not set' })
@@ -74,55 +74,119 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                             +form-field__error({ error: 
'isValidJavaIdentifier', message: 'Data source bean name is not a valid Java 
identifier' })
                             +form-field__error({ error: 'notJavaReservedWord', 
message: 'Data source bean name should not be a Java reserved word' })
                     .pc-form-grid-col-60
-                        +dialect('Dialect:', `${pojoStoreFactory}.dialect`, 
'"pojoDialect"', required,
-                            'Dialect of SQL implemented by a particular 
RDBMS:', 'Generic JDBC dialect',
-                            'Choose JDBC dialect')
+                        +form-field__dialect({
+                            label: 'Dialect:',
+                            model: `${pojoStoreFactory}.dialect`,
+                            name: '"pojoDialect"',
+                            required,
+                            tip: 'Dialect of SQL implemented by a particular 
RDBMS:',
+                            genericDialectName: 'Generic JDBC dialect',
+                            placeholder: 'Choose JDBC dialect'
+                        })
                     .pc-form-grid-col-30
-                        +number('Batch size:', 
`${pojoStoreFactory}.batchSize`, '"pojoBatchSize"', true, '512', '1',
-                            'Maximum batch size for writeAll and deleteAll 
operations')
+                        +form-field__number({
+                            label:'Batch size:',
+                            model: `${pojoStoreFactory}.batchSize`,
+                            name: '"pojoBatchSize"',
+                            placeholder: '512',
+                            min: '1',
+                            tip: 'Maximum batch size for writeAll and 
deleteAll operations'
+                        })
                     .pc-form-grid-col-30
-                        +number('Thread count:', 
`${pojoStoreFactory}.maximumPoolSize`, '"pojoMaximumPoolSize"', true, 
'availableProcessors', '1',
-                            'Maximum workers thread count.<br/>\
-                            These threads are responsible for load cache.')
+                        +form-field__number({
+                            label: 'Thread count:',
+                            model: `${pojoStoreFactory}.maximumPoolSize`,
+                            name: '"pojoMaximumPoolSize"',
+                            placeholder: 'availableProcessors',
+                            min: '1',
+                            tip: 'Maximum workers thread count.<br/>\
+                                 These threads are responsible for load cache.'
+                        })
                     .pc-form-grid-col-30
-                        +number('Maximum write attempts:', 
`${pojoStoreFactory}.maximumWriteAttempts`, '"pojoMaximumWriteAttempts"', true, 
'2', '0',
-                            'Maximum write attempts in case of database error')
+                        +form-field__number({
+                            label: 'Maximum write attempts:',
+                            model: `${pojoStoreFactory}.maximumWriteAttempts`,
+                            name: '"pojoMaximumWriteAttempts"',
+                            placeholder: '2',
+                            min: '0',
+                            tip: 'Maximum write attempts in case of database 
error'
+                        })
                     .pc-form-grid-col-30
-                        +number('Parallel load threshold:', 
`${pojoStoreFactory}.parallelLoadCacheMinimumThreshold`, 
'"pojoParallelLoadCacheMinimumThreshold"', true, '512', '0',
-                            'Parallel load cache minimum threshold.<br/>\
-                            If <b>0</b> then load sequentially.')
+                        +form-field__number({
+                            label: 'Parallel load threshold:',
+                            model: 
`${pojoStoreFactory}.parallelLoadCacheMinimumThreshold`,
+                            name: '"pojoParallelLoadCacheMinimumThreshold"',
+                            placeholder: '512',
+                            min: '0',
+                            tip: 'Parallel load cache minimum threshold.<br/>\
+                                 If <b>0</b> then load sequentially.'
+                        })
                     .pc-form-grid-col-60
-                        +java-class('Hasher', `${pojoStoreFactory}.hasher`, 
'"pojoHasher"', 'true', 'false', 'Hash calculator', required)
+                        +form-field__java-class({
+                            label: 'Hasher:',
+                            model: `${pojoStoreFactory}.hasher`,
+                            name: '"pojoHasher"',
+                            tip: 'Hash calculator',
+                            validationActive: required
+                        })
                     .pc-form-grid-col-60
-                        +java-class('Transformer', 
`${pojoStoreFactory}.transformer`, '"pojoTransformer"', 'true', 'false', 'Types 
transformer', required)
+                        +form-field__java-class({
+                            label: 'Transformer:',
+                            model: `${pojoStoreFactory}.transformer`,
+                            name: '"pojoTransformer"',
+                            tip: 'Types transformer',
+                            validationActive: required
+                        })
                     .pc-form-grid-col-60
-                        +checkbox('Escape table and filed names', 
`${pojoStoreFactory}.sqlEscapeAll`, '"sqlEscapeAll"',
-                            'If enabled than all schema, table and field names 
will be escaped with double quotes (for example: "tableName"."fieldName").<br/>\
-                            This enforces case sensitivity for field names and 
also allows having special characters in table and field names.<br/>\
-                            Escaped names will be used for CacheJdbcPojoStore 
internal SQL queries.')
+                        +form-field__checkbox({
+                            label: 'Escape table and filed names',
+                            model:`${pojoStoreFactory}.sqlEscapeAll`,
+                            name: '"sqlEscapeAll"',
+                            tip: 'If enabled than all schema, table and field 
names will be escaped with double quotes (for example: 
"tableName"."fieldName").<br/>\
+                                  This enforces case sensitivity for field 
names and also allows having special characters in table and field names.<br/>\
+                                  Escaped names will be used for 
CacheJdbcPojoStore internal SQL queries.'
+                        })
                 .pc-form-grid-row(ng-if=`${storeFactoryKind} === 
'CacheJdbcBlobStoreFactory'`)
                     -var blobStoreFactory = 
`${storeFactory}.CacheJdbcBlobStoreFactory`
                     -var blobStoreFactoryVia = `${blobStoreFactory}.connectVia`
 
                     .pc-form-grid-col-60
-                        +dropdown('Connect via:', blobStoreFactoryVia, 
'"connectVia"', 'true', 'Choose connection method',
-                            '[\
-                                {value: "URL", label: "URL"},\
-                                {value: "DataSource", label: "Data source"}\
-                            ]',
-                            'You can connect to database via:\
-                            <ul>\
-                                <li>JDBC URL, for example: 
jdbc:h2:mem:myDatabase</li>\
-                                <li>Configured data source</li>\
-                            </ul>')
+                        +form-field__dropdown({
+                            label: 'Connect via:',
+                            model: blobStoreFactoryVia,
+                            name: '"connectVia"',
+                            placeholder: 'Choose connection method',
+                            options: '[\
+                                                        {value: "URL", label: 
"URL"},\
+                                                        {value: "DataSource", 
label: "Data source"}\
+                                                    ]',
+                            tip: 'You can connect to database via:\
+                                                    <ul>\
+                                                        <li>JDBC URL, for 
example: jdbc:h2:mem:myDatabase</li>\
+                                                        <li>Configured data 
source</li>\
+                                                    </ul>'
+                        })
 
                     -var required = `${storeFactoryKind} === 
'CacheJdbcBlobStoreFactory' && ${blobStoreFactoryVia} === 'URL'`
 
                     .pc-form-grid-col-60(ng-if-start=`${blobStoreFactoryVia} 
=== 'URL'`)
-                        +text('Connection URL:', 
`${blobStoreFactory}.connectionUrl`, '"connectionUrl"', required, 'Input URL',
-                            'URL for database access, for example: 
jdbc:h2:mem:myDatabase')
+                        +form-field__text({
+                            label: 'Connection URL:',
+                            model: `${blobStoreFactory}.connectionUrl`,
+                            name: '"connectionUrl"',
+                            required: required,
+                            placeholder: 'Input URL',
+                            tip: 'URL for database access, for example: 
jdbc:h2:mem:myDatabase'
+                        })
                     .pc-form-grid-col-30
-                        +text('User:', `${blobStoreFactory}.user`, '"user"', 
required, 'Input user name', 'User name for database access')
+                        +form-field__text({
+                            label: 'User:',
+                            model: `${blobStoreFactory}.user`,
+                            name: '"user"',
+                            required: required,
+                            placeholder: 'Input user name',
+                            tip: 'User name for database access'
+                        })
                     .pc-form-grid-col-30(ng-if-end)
                         .pc-form-grid__text-only-item Password will be 
generated as stub.
 
@@ -137,38 +201,75 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                             placeholder: 'Input bean name',
                             tip: 'Name of the data source bean in Spring 
context'
                         })(
-                            is-valid-java-identifier
-                            not-java-reserved-word
+                        is-valid-java-identifier
+                        not-java-reserved-word
                         )
                             +form-field__error({ error: 'required', message: 
'Data source bean name is required' })
                             +form-field__error({ error: 
'isValidJavaIdentifier', message: 'Data source bean name is not a valid Java 
identifier' })
                             +form-field__error({ error: 'notJavaReservedWord', 
message: 'Data source bean name should not be a Java reserved word' })
                     .pc-form-grid-col-60(ng-if-end)
-                        +dialect('Database:', `${blobStoreFactory}.dialect`, 
'"blobDialect"', required, 'Supported databases:', 'Generic database', 'Choose 
database')
+                        +form-field__dialect({
+                            label: 'Database:',
+                            model: `${blobStoreFactory}.dialect`,
+                            name: '"blobDialect"',
+                            required,
+                            tip: 'Supported databases:',
+                            genericDialectName: 'Generic database',
+                            placeholder: 'Choose database'
+                        })
 
                     .pc-form-grid-col-60
-                        +checkbox('Init schema', 
`${blobStoreFactory}.initSchema`, '"initSchema"',
-                            'Flag indicating whether DB schema should be 
initialized by Ignite (default behaviour) or was explicitly created by user')
+                        +form-field__checkbox({
+                            label: 'Init schema',
+                            model: `${blobStoreFactory}.initSchema`,
+                            name: '"initSchema"',
+                            tip: 'Flag indicating whether DB schema should be 
initialized by Ignite (default behaviour) or was explicitly created by user'
+                        })
                     .pc-form-grid-col-60
-                        +text('Create query:', 
`${blobStoreFactory}.createTableQuery`, '"createTableQuery"', 'false', 'SQL for 
table creation',
-                            'Query for table creation in underlying 
database<br/>\
-                            Default value: create table if not exists ENTRIES 
(key binary primary key, val binary)')
+                        +form-field__text({
+                            label: 'Create query:',
+                            model: `${blobStoreFactory}.createTableQuery`,
+                            name: '"createTableQuery"',
+                            placeholder: 'SQL for table creation',
+                            tip: 'Query for table creation in underlying 
database<br/>\
+                                 Default value: create table if not exists 
ENTRIES (key binary primary key, val binary)'
+                        })
                     .pc-form-grid-col-60
-                        +text('Load query:', `${blobStoreFactory}.loadQuery`, 
'"loadQuery"', 'false', 'SQL for load entry',
-                            'Query for entry load from underlying 
database<br/>\
-                            Default value: select * from ENTRIES where key=?')
+                        +form-field__text({
+                            label: 'Load query:',
+                            model: `${blobStoreFactory}.loadQuery`,
+                            name: '"loadQuery"',
+                            placeholder: 'SQL for load entry',
+                            tip: 'Query for entry load from underlying 
database<br/>\
+                                 Default value: select * from ENTRIES where 
key=?'
+                        })
                     .pc-form-grid-col-60
-                        +text('Insert query:', 
`${blobStoreFactory}.insertQuery`, '"insertQuery"', 'false', 'SQL for insert 
entry',
-                            'Query for insert entry into underlying 
database<br/>\
-                            Default value: insert into ENTRIES (key, val) 
values (?, ?)')
+                        +form-field__text({
+                            label: 'Insert query:',
+                            model: `${blobStoreFactory}.insertQuery`,
+                            name: '"insertQuery"',
+                            placeholder: 'SQL for insert entry',
+                            tip: 'Query for insert entry into underlying 
database<br/>\
+                                 Default value: insert into ENTRIES (key, val) 
values (?, ?)'
+                        })
                     .pc-form-grid-col-60
-                        +text('Update query:', 
`${blobStoreFactory}.updateQuery`, '"updateQuery"', 'false', 'SQL for update 
entry',
-                            'Query for update entry in underlying 
database<br/>\
-                            Default value: update ENTRIES set val=? where 
key=?')
+                        +form-field__text({
+                            label: 'Update query:',
+                            model: `${blobStoreFactory}.updateQuery`,
+                            name: '"updateQuery"',
+                            placeholder: 'SQL for update entry',
+                            tip: 'Query for update entry in underlying 
database<br/>\
+                                 Default value: update ENTRIES set val=? where 
key=?'
+                        })
                     .pc-form-grid-col-60
-                        +text('Delete query:', 
`${blobStoreFactory}.deleteQuery`, '"deleteQuery"', 'false', 'SQL for delete 
entry',
-                            'Query for delete entry from underlying 
database<br/>\
-                            Default value: delete from ENTRIES where key=?')
+                        +form-field__text({
+                            label: 'Delete query:',
+                            model: `${blobStoreFactory}.deleteQuery`,
+                            name: '"deleteQuery"',
+                            placeholder: 'SQL for delete entry',
+                            tip: 'Query for delete entry from underlying 
database<br/>\
+                                 Default value: delete from ENTRIES where 
key=?'
+                        })
 
                 .pc-form-grid-row(ng-if=`${storeFactoryKind} === 
'CacheHibernateBlobStoreFactory'`)
                     -var hibernateStoreFactory = 
`${storeFactory}.CacheHibernateBlobStoreFactory`
@@ -181,7 +282,7 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
 
                             +list-pair-edit({
                                 items: 
`${hibernateStoreFactory}.hibernateProperties`,
-                                keyLbl: 'Property name', 
+                                keyLbl: 'Property name',
                                 valLbl: 'Property value',
                                 itemName: 'property',
                                 itemsName: 'properties'
@@ -189,20 +290,28 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
 
             - form = 'store'
             .pc-form-grid-col-60
-                +checkbox('Keep binary in store', `${model}.storeKeepBinary`, 
'"storeKeepBinary"',
-                    'Flag indicating that CacheStore implementation is working 
with binary objects instead of Java objects')
+                +form-field__checkbox({
+                    label: 'Keep binary in store',
+                    model: `${model}.storeKeepBinary`,
+                    name: '"storeKeepBinary"',
+                    tip: 'Flag indicating that CacheStore implementation is 
working with binary objects instead of Java objects'
+                })
             .pc-form-grid-col-60
-                +checkbox('Load previous value', `${model}.loadPreviousValue`, 
'"loadPreviousValue"',
-                    'Flag indicating whether value should be loaded from store 
if it is not in the cache for following cache operations: \
-                    <ul> \
-                        <li>IgniteCache.putIfAbsent()</li> \
-                        <li>IgniteCache.replace()</li> \
-                        <li>IgniteCache.remove()</li> \
-                        <li>IgniteCache.getAndPut()</li> \
-                        <li>IgniteCache.getAndRemove()</li> \
-                        <li>IgniteCache.getAndReplace()</li> \
-                        <li> IgniteCache.getAndPutIfAbsent()</li>\
-                    </ul>')
+                +form-field__checkbox({
+                    label: 'Load previous value',
+                    model: `${model}.loadPreviousValue`,
+                    name: '"loadPreviousValue"',
+                    tip: 'Flag indicating whether value should be loaded from 
store if it is not in the cache for following cache operations: \
+                        <ul> \
+                            <li>IgniteCache.putIfAbsent()</li> \
+                            <li>IgniteCache.replace()</li> \
+                            <li>IgniteCache.remove()</li> \
+                            <li>IgniteCache.getAndPut()</li> \
+                            <li>IgniteCache.getAndRemove()</li> \
+                            <li>IgniteCache.getAndReplace()</li> \
+                            <li> IgniteCache.getAndPutIfAbsent()</li>\
+                        </ul>'
+                })
             .pc-form-grid-col-60
                 +form-field__checkbox({
                     label: 'Read-through',
@@ -210,11 +319,11 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                     name: '"readThrough"',
                     tip: 'Flag indicating whether read-through caching should 
be used'
                 })(
-                    ng-model-options='{allowInvalid: true}'
-                    ui-validate=`{
+                ng-model-options='{allowInvalid: true}'
+                ui-validate=`{
                         storeEnabledReadOrWriteOn: 
'$ctrl.Caches.cacheStoreFactory.storeEnabledReadOrWriteOn(${model})'
                     }`
-                    ui-validate-watch-collection=`"[${storeFactoryKind}, 
${model}.writeThrough, ${model}.readThrough]"`
+                ui-validate-watch-collection=`"[${storeFactoryKind}, 
${model}.writeThrough, ${model}.readThrough]"`
                 )
                     +form-field__error({ error: 'storeEnabledReadOrWriteOn', 
message: 'Read or write through should be turned on when store kind is set' })
             .pc-form-grid-col-60
@@ -224,11 +333,11 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                     name: '"writeThrough"',
                     tip: 'Flag indicating whether write-through caching should 
be used'
                 })(
-                    ng-model-options='{allowInvalid: true}'
-                    ui-validate=`{
+                ng-model-options='{allowInvalid: true}'
+                ui-validate=`{
                         storeEnabledReadOrWriteOn: 
'$ctrl.Caches.cacheStoreFactory.storeEnabledReadOrWriteOn(${model})'
                     }`
-                    ui-validate-watch-collection=`"[${storeFactoryKind}, 
${model}.writeThrough, ${model}.readThrough]"`
+                ui-validate-watch-collection=`"[${storeFactoryKind}, 
${model}.writeThrough, ${model}.readThrough]"`
                 )
                     +form-field__error({ error: 'storeEnabledReadOrWriteOn', 
message: 'Read or write through should be turned on when store kind is set' })
 
@@ -244,14 +353,21 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                         Write-behind is a special mode when updates to cache 
accumulated and then asynchronously flushed to persistent store as a bulk 
operation.
                     `
                 })(
-                    ng-model-options='{allowInvalid: true}'
+                ng-model-options='{allowInvalid: true}'
                 )
                     +form-field__error({ error: 'storeDisabledValueOff', 
message: 'Write-behind is enabled but store kind is not set' })
             .pc-form-group.pc-form-grid-row(ng-if=enabled)
                 .pc-form-grid-col-30
-                    +number('Batch size:', `${model}.writeBehindBatchSize`, 
'"writeBehindBatchSize"', enabled, '512', '1',
-                        'Maximum batch size for write-behind cache store 
operations<br/>\
-                         Store operations(get or remove) are combined in a 
batch of this size to be passed to cache store')
+                    +form-field__number({
+                        label: 'Batch size:',
+                        model: `${model}.writeBehindBatchSize`,
+                        name: '"writeBehindBatchSize"',
+                        disabled: `!(${enabled})`,
+                        placeholder: '512',
+                        min: '1',
+                        tip: 'Maximum batch size for write-behind cache store 
operations<br/>\
+                              Store operations(get or remove) are combined in 
a batch of this size to be passed to cache store'
+                    })
                 .pc-form-grid-col-30
                     +form-field__number({
                         label: 'Flush size:',
@@ -262,7 +378,7 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                         tip: `Maximum size of the write-behind cache<br/>
                          If cache size exceeds this value, all cached items 
are flushed to the cache store and write cache is cleared`
                     })(
-                        ng-model-options='{allowInvalid: true}'
+                    ng-model-options='{allowInvalid: true}'
                     )
                 .pc-form-grid-col-30
                     +form-field__number({
@@ -273,15 +389,28 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                         min: `{{ $ctrl.Caches.writeBehindFlush.min(${model}) 
}}`,
                         tip: `Frequency with which write-behind cache is 
flushed to the cache store in milliseconds`
                     })(
-                        ng-model-options='{allowInvalid: true}'
+                    ng-model-options='{allowInvalid: true}'
                     )
                 .pc-form-grid-col-30
-                    +number('Flush threads count:', 
`${model}.writeBehindFlushThreadCount`, '"writeBehindFlushThreadCount"', 
enabled, '1', '1',
-                        'Number of threads that will perform cache flushing')
+                    +form-field__number({
+                        label: 'Flush threads count:',
+                        model: `${model}.writeBehindFlushThreadCount`,
+                        name: '"writeBehindFlushThreadCount"',
+                        disabled: `!(${enabled})`,
+                        placeholder: '1',
+                        min: '1',
+                        tip: 'Number of threads that will perform cache 
flushing'
+                    })
 
                 //- Since ignite 2.0
                 .pc-form-grid-col-60(ng-if='$ctrl.available("2.0.0")')
-                    +checkbox-enabled('Write coalescing', model + 
'.writeBehindCoalescing', '"WriteBehindCoalescing"', enabled, 'Write coalescing 
flag for write-behind cache store')
+                    +form-field__checkbox({
+                        label: 'Write coalescing',
+                        model: model + '.writeBehindCoalescing',
+                        name: '"WriteBehindCoalescing"',
+                        disabled: `!${enabled}`,
+                        tip: 'Write coalescing flag for write-behind cache 
store'
+                    })
 
         .pca-form-column-6
             +preview-xml-java(model, 'cacheStore', 'domains')

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/atomic.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/atomic.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/atomic.pug
index 13424f8..9f5f138 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/atomic.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/atomic.pug
@@ -26,50 +26,95 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
     panel-title Atomic configuration
     panel-description
         | Configuration for atomic data structures.
-        | Atomics are distributed across the cluster, essentially enabling 
performing atomic operations (such as increment-and-get or compare-and-set) 
with the same globally-visible value. 
+        | Atomics are distributed across the cluster, essentially enabling 
performing atomic operations (such as increment-and-get or compare-and-set) 
with the same globally-visible value.
         | 
#[a.link-success(href="https://apacheignite.readme.io/docs/atomic-types"; 
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-30
-                +dropdown('Cache mode:', `${model}.cacheMode`, '"cacheMode"', 
'true', 'PARTITIONED',
-                    '[\
-                        {value: "LOCAL", label: "LOCAL"},\
-                        {value: "REPLICATED", label: "REPLICATED"},\
-                        {value: "PARTITIONED", label: "PARTITIONED"}\
-                    ]',
-                    'Cache modes:\
-                    <ul>\
-                        <li>Partitioned - in this mode the overall key set 
will be divided into partitions and all partitions will be split equally 
between participating nodes</li>\
-                        <li>Replicated - in this mode all the keys are 
distributed to all participating nodes</li>\
-                        <li>Local - in this mode caches residing on different 
grid nodes will not know about each other</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Cache mode:',
+                    model: `${model}.cacheMode`,
+                    name: '"cacheMode"',
+                    placeholder: 'PARTITIONED',
+                    options: '[\
+                                            {value: "LOCAL", label: "LOCAL"},\
+                                            {value: "REPLICATED", label: 
"REPLICATED"},\
+                                            {value: "PARTITIONED", label: 
"PARTITIONED"}\
+                                        ]',
+                    tip: 'Cache modes:\
+                                        <ul>\
+                                            <li>Partitioned - in this mode the 
overall key set will be divided into partitions and all partitions will be 
split equally between participating nodes</li>\
+                                            <li>Replicated - in this mode all 
the keys are distributed to all participating nodes</li>\
+                                            <li>Local - in this mode caches 
residing on different grid nodes will not know about each other</li>\
+                                        </ul>'
+                })
             .pc-form-grid-col-30
-                +number('Sequence reserve:', 
`${model}.atomicSequenceReserveSize`, '"atomicSequenceReserveSize"', 'true', 
'1000', '0',
-                    'Default number of sequence values reserved for 
IgniteAtomicSequence instances<br/>\
-                    After a certain number has been reserved, consequent 
increments of sequence will happen locally, without communication with other 
nodes, until the next reservation has to be made')
+                +form-field__number({
+                    label: 'Sequence reserve:',
+                    model: `${model}.atomicSequenceReserveSize`,
+                    name: '"atomicSequenceReserveSize"',
+                    placeholder: '1000',
+                    min: '0',
+                    tip: 'Default number of sequence values reserved for 
IgniteAtomicSequence instances<br/>\
+                          After a certain number has been reserved, consequent 
increments of sequence will happen locally, without communication with other 
nodes, until the next reservation has to be made'
+                })
             .pc-form-grid-col-60(ng-show=`!(${model}.cacheMode && 
${model}.cacheMode != "PARTITIONED")`)
-                +number('Backups:', model + '.backups', '"backups"', 'true', 
'0', '0', 'Number of backup nodes')
+                +form-field__number({
+                    label: 'Backups:',
+                    model: model + '.backups',
+                    name: '"backups"',
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Number of backup nodes'
+                })
 
             .pc-form-grid-col-60(ng-if-start='$ctrl.available("2.1.0")')
-                +dropdown('Function:', `${affModel}.kind`, '"AffinityKind"', 
'true', 'Default', '$ctrl.Clusters.affinityFunctions',
-                    'Key topology resolver to provide mapping from keys to 
nodes\
-                    <ul>\
-                        <li>Rendezvous - Based on Highest Random Weight 
algorithm<br/></li>\
-                        <li>Custom - Custom implementation of key affinity 
function<br/></li>\
-                        <li>Default - By default rendezvous affinity function  
with 1024 partitions is used<br/></li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Function:',
+                    model: `${affModel}.kind`,
+                    name: '"AffinityKind"',
+                    placeholder: 'Default',
+                    options: '$ctrl.Clusters.affinityFunctions',
+                    tip: 'Key topology resolver to provide mapping from keys 
to nodes\
+                                        <ul>\
+                                            <li>Rendezvous - Based on Highest 
Random Weight algorithm<br/></li>\
+                                            <li>Custom - Custom implementation 
of key affinity function<br/></li>\
+                                            <li>Default - By default 
rendezvous affinity function  with 1024 partitions is used<br/></li>\
+                                        </ul>'
+                })
             .pc-form-group(ng-if-end ng-if=rendezvousAff + ' || ' + customAff)
                 .pc-form-grid-row
                     .pc-form-grid-col-30(ng-if-start=rendezvousAff)
-                        +number-required('Partitions', 
`${affModel}.Rendezvous.partitions`, '"RendPartitions"', 'true', 
rendPartitionsRequired, '1024', '1', 'Number of partitions')
+                        +form-field__number({
+                            label: 'Partitions',
+                            model: `${affModel}.Rendezvous.partitions`,
+                            name: '"RendPartitions"',
+                            required: rendPartitionsRequired,
+                            placeholder: '1024',
+                            min: '1',
+                            tip: 'Number of partitions'
+                        })
                     .pc-form-grid-col-30
-                        +java-class('Backup filter', 
`${affModel}.Rendezvous.affinityBackupFilter`, '"RendAffinityBackupFilter"', 
'true', 'false',
-                            'Backups will be selected from all nodes that pass 
this filter')
+                        +form-field__java-class({
+                            label: 'Backup filter',
+                            model: 
`${affModel}.Rendezvous.affinityBackupFilter`,
+                            name: '"RendAffinityBackupFilter"',
+                            tip: 'Backups will be selected from all nodes that 
pass this filter'
+                        })
                     .pc-form-grid-col-60(ng-if-end)
-                        +checkbox('Exclude neighbors', 
`${affModel}.Rendezvous.excludeNeighbors`, '"RendExcludeNeighbors"',
-                            'Exclude same - host - neighbors from being 
backups of each other and specified number of backups')
+                        +form-field__checkbox({
+                            label: 'Exclude neighbors',
+                            model: `${affModel}.Rendezvous.excludeNeighbors`,
+                            name: '"RendExcludeNeighbors"',
+                            tip: 'Exclude same - host - neighbors from being 
backups of each other and specified number of backups'
+                        })
                     .pc-form-grid-col-60(ng-if=customAff)
-                        +java-class('Class name:', 
`${affModel}.Custom.className`, '"AffCustomClassName"', 'true', customAff,
-                            'Custom key affinity function implementation class 
name')
+                        +form-field__java-class({
+                            label: 'Class name:',
+                            model: `${affModel}.Custom.className`,
+                            name: '"AffCustomClassName"',
+                            required: customAff,
+                            tip: 'Custom key affinity function implementation 
class name'
+                        })
         .pca-form-column-6
             +preview-xml-java(model, 'clusterAtomics')

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/binary.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/binary.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/binary.pug
index d138b15..a20a3fd 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/binary.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/binary.pug
@@ -22,18 +22,32 @@ include /app/helpers/jade/mixins
 panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
     panel-title Binary configuration
     panel-description
-        | Configuration of specific binary types. 
+        | Configuration of specific binary types.
         | 
#[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
-                +java-class('ID mapper:', model + '.idMapper', '"idMapper"', 
'true', 'false',
-                    'Maps given from BinaryNameMapper type and filed name to 
ID that will be used by Ignite in internals<br/>\
-                    Ignite never writes full strings for field or type names. 
Instead, for performance reasons, Ignite writes integer hash codes for 
type/class and field names. It has been tested that hash code conflicts for the 
type/class names or the field names within the same type are virtually non - 
existent and, to gain performance, it is safe to work with hash codes. For the 
cases when hash codes for different types or fields actually do collide 
<b>BinaryIdMapper</b> allows to override the automatically generated hash code 
IDs for the type and field names')
+                +form-field__java-class({
+                    label: 'ID mapper:',
+                    model: model + '.idMapper',
+                    name: '"idMapper"',
+                    tip: 'Maps given from BinaryNameMapper type and filed name 
to ID that will be used by Ignite in internals<br/>\
+                          Ignite never writes full strings for field or type 
names. Instead, for performance reasons, Ignite writes integer hash codes for 
type/class and field names. It has been tested that hash code conflicts for the 
type/class names or the field names within the same type are virtually non - 
existent and, to gain performance, it is safe to work with hash codes. For the 
cases when hash codes for different types or fields actually do collide 
<b>BinaryIdMapper</b> allows to override the automatically generated hash code 
IDs for the type and field names'
+                })
             .pc-form-grid-col-60
-                +java-class('Name mapper:', model + '.nameMapper', 
'"nameMapper"', 'true', 'false', 'Maps type/class and field names to different 
names')
+                +form-field__java-class({
+                    label: 'Name mapper:',
+                    model: model + '.nameMapper',
+                    name: '"nameMapper"',
+                    tip: 'Maps type/class and field names to different names'
+                })
             .pc-form-grid-col-60
-                +java-class('Serializer:', model + '.serializer', 
'"serializer"', 'true', 'false', 'Class with custom serialization logic for 
binary objects')
+                +form-field__java-class({
+                    label: 'Serializer:',
+                    model: model + '.serializer',
+                    name: '"serializer"',
+                    tip: 'Class with custom serialization logic for binary 
objects'
+                })
             .pc-form-grid-col-60
                 .ignite-form-field
                     +form-field__label({ label: 'Type configurations:', name: 
'"typeConfigurations"' })
@@ -44,27 +58,52 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                         list-editable-item-edit.pc-form-grid-row
                             - form = '$parent.form'
                             .pc-form-grid-col-60
-                                +java-class-autofocus('Type name:', 
'$item.typeName', '"typeName"', 'true', 'true', 'true', 'Type name')(
+                                +form-field__java-class({
+                                    label: 'Type name:',
+                                    model: '$item.typeName',
+                                    name: '"typeName"',
+                                    required: 'true',
+                                    tip: 'Type name'
+                                })(
+                                    ignite-form-field-input-autofocus='true'
                                     ignite-unique=items
                                     ignite-unique-property='typeName'
                                 )
-                                    +unique-feedback(`$item.typeName`, 'Type 
name should be unique.')
+                                    +form-field__error({ error: 
'igniteUnique', message: 'Type name should be unique.' })
                             .pc-form-grid-col-60
-                                +java-class('ID mapper:', '$item.idMapper', 
'"idMapper"', 'true', 'false',
-                                    'Maps given from BinaryNameMapper type and 
filed name to ID that will be used by Ignite in internals<br/>\
-                                    Ignite never writes full strings for field 
or type/class names.\
-                                    Instead, for performance reasons, Ignite 
writes integer hash codes for type/class and field names.\
-                                    It has been tested that hash code 
conflicts for the type/class names or the field names within the same type are 
virtually non - existent and,\
-                                    to gain performance, it is safe to work 
with hash codes.\
-                                    For the cases when hash codes for 
different types or fields actually do collide <b>BinaryIdMapper</b> allows to 
override the automatically generated hash code IDs for the type and field 
names')
+                                +form-field__java-class({
+                                    label: 'ID mapper:',
+                                    model: '$item.idMapper',
+                                    name: '"idMapper"',
+                                    tip: 'Maps given from BinaryNameMapper 
type and filed name to ID that will be used by Ignite in internals<br/>\
+                                          Ignite never writes full strings for 
field or type/class names.\
+                                          Instead, for performance reasons, 
Ignite writes integer hash codes for type/class and field names.\
+                                          It has been tested that hash code 
conflicts for the type/class names or the field names within the same type are 
virtually non - existent and,\
+                                          to gain performance, it is safe to 
work with hash codes.\
+                                          For the cases when hash codes for 
different types or fields actually do collide <b>BinaryIdMapper</b> allows to 
override the automatically generated hash code IDs for the type and field names'
+                                })
                             .pc-form-grid-col-60
-                                +java-class('Name mapper:', 
'$item.nameMapper', '"nameMapper"', 'true', 'false',
-                                    'Maps type/class and field names to 
different names')
+                                +form-field__java-class({
+                                    label: 'Name mapper:',
+                                    model: '$item.nameMapper',
+                                    name: '"nameMapper"',
+                                    tip: 'Maps type/class and field names to 
different names'
+                                })
+
                             .pc-form-grid-col-60
-                                +java-class('Serializer:', '$item.serializer', 
'"serializer"', 'true', 'false',
-                                    'Class with custom serialization logic for 
binary object')
+                                +form-field__java-class({
+                                    label: 'Serializer:',
+                                    model: '$item.serializer',
+                                    name: '"serializer"',
+                                    tip: 'Class with custom serialization 
logic for binary object'
+                                })
                             .pc-form-grid-col-60
-                                +checkbox('Enum', '$item.enum', 'enum', 'Flag 
indicating that this type is the enum')
+                                +form-field__checkbox({
+                                    label: 'Enum',
+                                    model: '$item.enum',
+                                    name: 'enum',
+                                    tip: 'Flag indicating that this type is 
the enum'
+                                })
 
                         list-editable-no-items
                             list-editable-add-item-button(
@@ -75,6 +114,11 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
 
             - form = 'binary'
             .pc-form-grid-col-60
-                +checkbox('Compact footer', model + '.compactFooter', 
'"compactFooter"', 'When enabled, Ignite will not write fields metadata when 
serializing objects (this will increase serialization performance), because 
internally <b>BinaryMarshaller</b> already distribute metadata inside cluster')
+                +form-field__checkbox({
+                    label: 'Compact footer',
+                    model: model + '.compactFooter',
+                    name: '"compactFooter"',
+                    tip: 'When enabled, Ignite will not write fields metadata 
when serializing objects (this will increase serialization performance), 
because internally <b>BinaryMarshaller</b> already distribute metadata inside 
cluster'
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'clusterBinary')

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/cache-key-cfg.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/cache-key-cfg.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/cache-key-cfg.pug
index 78f42a0..a17e52a 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/cache-key-cfg.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/cache-key-cfg.pug
@@ -32,17 +32,23 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                     list-editable-item-edit.pc-form-grid-row
                         - form = '$parent.form'
                         .pc-form-grid-col-60
-                            +java-class-autofocus('Type name:', 
'$item.typeName', '"cacheKeyTypeName"', 'true', 'true', 'true', 'Type name')(
+                            +form-field__java-class({
+                                label: 'Type name:',
+                                model: '$item.typeName',
+                                name: '"cacheKeyTypeName"',
+                                required: 'true',
+                                tip: 'Type name'
+                            })(
+                                ignite-form-field-input-autofocus='true'
                                 ignite-unique=model
                                 ignite-unique-property='typeName'
                             )
-                                +unique-feedback(`cacheKeyTypeName`, 'Type 
name should be unique.')
+                                +form-field__error({ error: 'igniteUnique', 
message: 'Type name should be unique.' })
                         .pc-form-grid-col-60
                             +form-field__text({
                                 label: 'Affinity key field name:',
                                 model: '$item.affinityKeyFieldName',
                                 name: '"affinityKeyFieldName"',
-                                disabled: 'false',
                                 placeholder: 'Enter field name',
                                 tip: 'Affinity key field name',
                                 required: true

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/checkpoint.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint.pug
index cf2a5dc..760f996 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint.pug
@@ -24,7 +24,7 @@ include /app/helpers/jade/mixins
 panel-collapsible(ng-form=form)
     panel-title Checkpointing
     panel-description
-        | Checkpointing provides an ability to save an intermediate job state. 
+        | Checkpointing provides an ability to save an intermediate job state.
         | 
#[a.link-success(href="https://apacheignite.readme.io/docs/checkpointing"; 
target="_blank") More info]
     panel-content.pca-form-row
         .pca-form-column-6.pc-form-grid-row
@@ -35,41 +35,67 @@ panel-collapsible(ng-form=form)
                     
list-editable.pc-list-editable-with-form-grid(ng-model=model 
name='checkpointSPIConfigurations')
                         
list-editable-item-edit(item-name='$checkpointSPI').pc-form-grid-row
                             .pc-form-grid-col-60
-                                +dropdown-required('Checkpoint SPI:', 
'$checkpointSPI.kind', '"checkpointKind"', 'true', 'true', 'Choose checkpoint 
configuration variant', '[\
-                                        {value: "FS", label: "File System"},\
-                                        {value: "Cache", label: "Cache"},\
-                                        {value: "S3", label: "Amazon S3"},\
-                                        {value: "JDBC", label: "Database"},\
-                                        {value: "Custom", label: "Custom"}\
-                                    ]',
-                                    'Provides an ability to save an 
intermediate job state\
-                                    <ul>\
-                                        <li>File System - Uses a shared file 
system to store checkpoints</li>\
-                                        <li>Cache - Uses a cache to store 
checkpoints</li>\
-                                        <li>Amazon S3 - Uses Amazon S3 to 
store checkpoints</li>\
-                                        <li>Database - Uses a database to 
store checkpoints</li>\
-                                        <li>Custom - Custom checkpoint SPI 
implementation</li>\
-                                    </ul>')
+                                +form-field__dropdown({
+                                    label: 'Checkpoint SPI:',
+                                    model: '$checkpointSPI.kind',
+                                    name: '"checkpointKind"',
+                                    required: 'true',
+                                    placeholder: 'Choose checkpoint 
configuration variant',
+                                    options: '[\
+                                                {value: "FS", label: "File 
System"},\
+                                                {value: "Cache", label: 
"Cache"},\
+                                                {value: "S3", label: "Amazon 
S3"},\
+                                                {value: "JDBC", label: 
"Database"},\
+                                                {value: "Custom", label: 
"Custom"}\
+                                               ]',
+                                    tip: 'Provides an ability to save an 
intermediate job state\
+                                          <ul>\
+                                            <li>File System - Uses a shared 
file system to store checkpoints</li>\
+                                            <li>Cache - Uses a cache to store 
checkpoints</li>\
+                                            <li>Amazon S3 - Uses Amazon S3 to 
store checkpoints</li>\
+                                            <li>Database - Uses a database to 
store checkpoints</li>\
+                                            <li>Custom - Custom checkpoint SPI 
implementation</li>\
+                                          </ul>'
+                                })
 
                             include ./checkpoint/fs
 
                             .pc-form-grid-col-60(ng-if-start=CacheCheckpoint)
-                                +dropdown-required-empty('Cache:', 
'$checkpointSPI.Cache.cache', '"checkpointCacheCache"', 'true', CacheCheckpoint,
-                                    'Choose cache', 'No caches configured for 
current cluster', '$ctrl.cachesMenu', 'Cache to use for storing checkpoints')(
+                                +form-field__dropdown({
+                                    label: 'Cache:',
+                                    model: '$checkpointSPI.Cache.cache',
+                                    name: '"checkpointCacheCache"',
+                                    required: CacheCheckpoint,
+                                    placeholder: 'Choose cache',
+                                    placeholderEmpty: 'No caches configured 
for current cluster',
+                                    options: '$ctrl.cachesMenu',
+                                    tip: 'Cache to use for storing checkpoints'
+                                })(
                                     
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(ng-if-end)
-                                +java-class('Listener:', 
'$checkpointSPI.Cache.checkpointListener', '"checkpointCacheListener"', 'true', 
'false',
-                                    'Checkpoint listener implementation class 
name', CacheCheckpoint)
+                                +form-field__java-class({
+                                    label: 'Listener:',
+                                    model: 
'$checkpointSPI.Cache.checkpointListener',
+                                    name: '"checkpointCacheListener"',
+                                    tip: 'Checkpoint listener implementation 
class name',
+                                    validationActive: CacheCheckpoint
+                                })
 
                             include ./checkpoint/s3
 
                             include ./checkpoint/jdbc
 
                             .pc-form-grid-col-60(ng-if=CustomCheckpoint)
-                                +java-class('Class name:', 
'$checkpointSPI.Custom.className', '"checkpointCustomClassName"', 'true', 
CustomCheckpoint,
-                                'Custom CheckpointSpi implementation class', 
CustomCheckpoint)
+                                +form-field__java-class({
+                                    label: 'Class name:',
+                                    model: '$checkpointSPI.Custom.className',
+                                    name: '"checkpointCustomClassName"',
+                                    required: CustomCheckpoint,
+                                    tip: 'Custom CheckpointSpi implementation 
class',
+                                    validationActive: CustomCheckpoint
+                                })
 
                         list-editable-no-items
                             list-editable-add-item-button(
@@ -77,6 +103,6 @@ panel-collapsible(ng-form=form)
                                 label-single='checkpoint SPI configuration'
                                 label-multiple='checkpoint SPI configurations'
                             )
-    
+
         .pca-form-column-6
             +preview-xml-java('$ctrl.clonedCluster', 'clusterCheckpoint', 
'$ctrl.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/checkpoint/fs.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint/fs.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint/fs.pug
index 0359cf3..0cda6fa 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint/fs.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint/fs.pug
@@ -30,7 +30,13 @@ include /app/helpers/jade/mixins
                 tip: 'Paths to a shared directory where checkpoints will be 
stored'
             }]`
         )
-            +unique-feedback(_, 'Such path already exists!')
+            +form-field__error({ error: 'igniteUnique', message: 'Such path 
already exists!' })
 
 .pc-form-grid-col-60(ng-if-end)
-    +java-class('Listener:', '$checkpointSPI.FS.checkpointListener', 
'"checkpointFsListener"', 'true', 'false', 'Checkpoint listener implementation 
class name', '$checkpointSPI.kind === "FS"')
+    +form-field__java-class({
+        label: 'Listener:',
+        model: '$checkpointSPI.FS.checkpointListener',
+        name: '"checkpointFsListener"',
+        tip: 'Checkpoint listener implementation class name',
+        validationActive: '$checkpointSPI.kind === "FS"'
+    })

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/checkpoint/jdbc.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint/jdbc.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint/jdbc.pug
index 00a8681..be4afc4 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint/jdbc.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cluster-edit-form/templates/checkpoint/jdbc.pug
@@ -19,29 +19,106 @@ include /app/helpers/jade/mixins
 -var jdbcCheckpoint = '$checkpointSPI.kind === "JDBC"'
 
 .pc-form-grid-col-30(ng-if-start='$checkpointSPI.kind === "JDBC"')
-    +text('Data source bean name:', '$checkpointSPI.JDBC.dataSourceBean', 
'"checkpointJdbcDataSourceBean"', jdbcCheckpoint, 'Input bean name',
-    'Name of the data source bean in Spring context')
+    +form-field__text({
+        label: 'Data source bean name:',
+        model: '$checkpointSPI.JDBC.dataSourceBean',
+        name: '"checkpointJdbcDataSourceBean"',
+        required: jdbcCheckpoint,
+        placeholder: 'Input bean name',
+        tip: 'Name of the data source bean in Spring context'
+    })
 .pc-form-grid-col-30
-    +dialect('Dialect:', '$checkpointSPI.JDBC.dialect', 
'"checkpointJdbcDialect"', jdbcCheckpoint,
-    'Dialect of SQL implemented by a particular RDBMS:', 'Generic JDBC 
dialect', 'Choose JDBC dialect')
+    +form-field__dialect({
+        label: 'Dialect:',
+        model: '$checkpointSPI.JDBC.dialect',
+        name: '"checkpointJdbcDialect"',
+        required: jdbcCheckpoint,
+        tip: 'Dialect of SQL implemented by a particular RDBMS:',
+        genericDialectName: 'Generic JDBC dialect',
+        placeholder: 'Choose JDBC dialect'
+    })
+
 .pc-form-grid-col-60
-    +java-class('Listener:', '$checkpointSPI.JDBC.checkpointListener', 
'"checkpointJdbcListener"', 'true', 'false',
-        'Checkpoint listener implementation class name', jdbcCheckpoint)
+    +form-field__java-class({
+        label: 'Listener:',
+        model: '$checkpointSPI.JDBC.checkpointListener',
+        name: '"checkpointJdbcListener"',
+        tip: 'Checkpoint listener implementation class name',
+        validationActive: jdbcCheckpoint
+    })
 .pc-form-grid-col-60
-    +text('User:', '$checkpointSPI.JDBC.user', '"checkpointJdbcUser"', 
'false', 'Input user name', 'Checkpoint jdbc user name')
+    +form-field__text({
+        label: 'User:',
+        model: '$checkpointSPI.JDBC.user',
+        name: '"checkpointJdbcUser"',
+        placeholder: 'Input user name',
+        tip: 'Checkpoint jdbc user name'
+    })
 .pc-form-grid-col-30
-    +text('Table name:', '$checkpointSPI.JDBC.checkpointTableName', 
'"checkpointJdbcCheckpointTableName"', 'false', 'CHECKPOINTS', 'Checkpoint 
table name')
+    +form-field__text({
+        label: 'Table name:',
+        model: '$checkpointSPI.JDBC.checkpointTableName',
+        name: '"checkpointJdbcCheckpointTableName"',
+        placeholder: 'CHECKPOINTS',
+        tip: 'Checkpoint table name'
+    })
 .pc-form-grid-col-30
-    +number('Number of retries:', '$checkpointSPI.JDBC.numberOfRetries', 
'"checkpointJdbcNumberOfRetries"', 'true', '2', '0', 'Number of retries in case 
of DB failure')
+    +form-field__number({
+        label: 'Number of retries:',
+        model: '$checkpointSPI.JDBC.numberOfRetries',
+        name: '"checkpointJdbcNumberOfRetries"',
+        placeholder: '2',
+        min: '0',
+        tip: 'Number of retries in case of DB failure'
+    })
 .pc-form-grid-col-30
-    +text('Key field name:', '$checkpointSPI.JDBC.keyFieldName', 
'"checkpointJdbcKeyFieldName"', 'false', 'NAME', 'Checkpoint key field name')
+    +form-field__text({
+        label: 'Key field name:',
+        model: '$checkpointSPI.JDBC.keyFieldName',
+        name: '"checkpointJdbcKeyFieldName"',
+        placeholder: 'NAME',
+        tip: 'Checkpoint key field name'
+    })
 .pc-form-grid-col-30
-    +dropdown('Key field type:', '$checkpointSPI.JDBC.keyFieldType', 
'"checkpointJdbcKeyFieldType"', 'true', 'VARCHAR', 
'::$ctrl.supportedJdbcTypes', 'Checkpoint key field type')
+    +form-field__dropdown({
+        label: 'Key field type:',
+        model: '$checkpointSPI.JDBC.keyFieldType',
+        name: '"checkpointJdbcKeyFieldType"',
+        placeholder: 'VARCHAR',
+        options: '::$ctrl.supportedJdbcTypes',
+        tip: 'Checkpoint key field type'
+    })
 .pc-form-grid-col-30
-    +text('Value field name:', '$checkpointSPI.JDBC.valueFieldName', 
'"checkpointJdbcValueFieldName"', 'false', 'VALUE', 'Checkpoint value field 
name')
+    +form-field__text({
+        label: 'Value field name:',
+        model: '$checkpointSPI.JDBC.valueFieldName',
+        name: '"checkpointJdbcValueFieldName"',
+        placeholder: 'VALUE',
+        tip: 'Checkpoint value field name'
+    })
 .pc-form-grid-col-30
-    +dropdown('Value field type:', '$checkpointSPI.JDBC.valueFieldType', 
'"checkpointJdbcValueFieldType"', 'true', 'BLOB', '::$ctrl.supportedJdbcTypes', 
'Checkpoint value field type')
+    +form-field__dropdown({
+        label: 'Value field type:',
+        model: '$checkpointSPI.JDBC.valueFieldType',
+        name: '"checkpointJdbcValueFieldType"',
+        placeholder: 'BLOB',
+        options: '::$ctrl.supportedJdbcTypes',
+        tip: 'Checkpoint value field type'
+    })
 .pc-form-grid-col-30
-    +text('Expire date field name:', 
'$checkpointSPI.JDBC.expireDateFieldName', 
'"checkpointJdbcExpireDateFieldName"', 'false', 'EXPIRE_DATE', 'Checkpoint 
expire date field name')
+    +form-field__text({
+        label:'Expire date field name:',
+        model: '$checkpointSPI.JDBC.expireDateFieldName',
+        name: '"checkpointJdbcExpireDateFieldName"',
+        placeholder: 'EXPIRE_DATE',
+        tip: 'Checkpoint expire date field name'
+    })
 .pc-form-grid-col-30(ng-if-end)
-    +dropdown('Expire date field type:', 
'$checkpointSPI.JDBC.expireDateFieldType', 
'"checkpointJdbcExpireDateFieldType"', 'true', 'DATETIME', 
'::$ctrl.supportedJdbcTypes', 'Checkpoint expire date field type')
+    +form-field__dropdown({
+        label: 'Expire date field type:',
+        model: '$checkpointSPI.JDBC.expireDateFieldType',
+        name: '"checkpointJdbcExpireDateFieldType"',
+        placeholder: 'DATETIME',
+        options: '::$ctrl.supportedJdbcTypes',
+        tip: 'Checkpoint expire date field type'
+    })

Reply via email to