IGNITE-9508 Web Console: Refactored legacy pug mixins.

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

Branch: refs/heads/master
Commit: cca10d0c5309541212096cc698eebba0606106cc
Parents: ece827d
Author: Alexander Kalinin <[email protected]>
Authored: Wed Sep 12 15:25:53 2018 +0700
Committer: Alexey Kuznetsov <[email protected]>
Committed: Wed Sep 12 15:25:55 2018 +0700

----------------------------------------------------------------------
 .../directives.js                               |  53 --
 .../components/form-field-size/index.js         |   1 +
 .../components/form-field-size/style.scss       |  20 +
 .../components/form-field-size/template.pug     |   2 +-
 .../cache-edit-form/templates/affinity.pug      | 121 +++--
 .../cache-edit-form/templates/concurrency.pug   |  78 +--
 .../cache-edit-form/templates/general.pug       | 139 ++++--
 .../cache-edit-form/templates/memory.pug        |  87 +++-
 .../templates/near-cache-client.pug             |  40 +-
 .../templates/near-cache-server.pug             |  42 +-
 .../cache-edit-form/templates/node-filter.pug   |  19 +-
 .../cache-edit-form/templates/query.pug         | 103 ++--
 .../cache-edit-form/templates/rebalance.pug     |  85 +++-
 .../cache-edit-form/templates/statistics.pug    |  17 +-
 .../cache-edit-form/templates/store.pug         | 301 ++++++++----
 .../cluster-edit-form/templates/atomic.pug      | 107 ++--
 .../cluster-edit-form/templates/binary.pug      |  86 +++-
 .../templates/cache-key-cfg.pug                 |  12 +-
 .../cluster-edit-form/templates/checkpoint.pug  |  72 ++-
 .../templates/checkpoint/fs.pug                 |  10 +-
 .../templates/checkpoint/jdbc.pug               | 107 +++-
 .../templates/checkpoint/s3.pug                 | 489 ++++++++++++++-----
 .../templates/client-connector.pug              | 163 +++++--
 .../cluster-edit-form/templates/collision.pug   |  27 +-
 .../templates/collision/custom.pug              |   9 +-
 .../templates/collision/fifo-queue.pug          |  20 +-
 .../templates/collision/job-stealing.pug        |  59 ++-
 .../templates/collision/priority-queue.pug      |  66 ++-
 .../templates/communication.pug                 | 190 +++++--
 .../cluster-edit-form/templates/connector.pug   | 230 +++++++--
 .../templates/data-storage.pug                  | 322 +++++++++---
 .../cluster-edit-form/templates/deployment.pug  | 145 ++++--
 .../cluster-edit-form/templates/discovery.pug   | 196 ++++++--
 .../cluster-edit-form/templates/events.pug      |  92 +++-
 .../cluster-edit-form/templates/failover.pug    |  52 +-
 .../cluster-edit-form/templates/general.pug     |  49 +-
 .../templates/general/discovery/cloud.pug       |  48 +-
 .../templates/general/discovery/google.pug      |  45 +-
 .../templates/general/discovery/jdbc.pug        |  21 +-
 .../templates/general/discovery/kubernetes.pug  |  43 +-
 .../templates/general/discovery/multicast.pug   |  55 ++-
 .../templates/general/discovery/s3.pug          |  31 +-
 .../templates/general/discovery/shared.pug      |   8 +-
 .../templates/general/discovery/vm.pug          |   3 +-
 .../templates/general/discovery/zookeeper.pug   | 103 ++--
 .../retrypolicy/bounded-exponential-backoff.pug |  28 +-
 .../discovery/zookeeper/retrypolicy/custom.pug  |  11 +-
 .../retrypolicy/exponential-backoff.pug         |  28 +-
 .../discovery/zookeeper/retrypolicy/forever.pug |   9 +-
 .../discovery/zookeeper/retrypolicy/n-times.pug |  18 +-
 .../zookeeper/retrypolicy/one-time.pug          |  11 +-
 .../zookeeper/retrypolicy/until-elapsed.pug     |  18 +-
 .../cluster-edit-form/templates/hadoop.pug      | 119 +++--
 .../templates/load-balancing.pug                | 113 ++++-
 .../cluster-edit-form/templates/logger.pug      |  31 +-
 .../templates/logger/custom.pug                 |   9 +-
 .../templates/logger/log4j.pug                  |  67 ++-
 .../templates/logger/log4j2.pug                 |  40 +-
 .../cluster-edit-form/templates/marshaller.pug  |  99 ++--
 .../cluster-edit-form/templates/memory.pug      | 117 +++--
 .../cluster-edit-form/templates/metrics.pug     |  52 +-
 .../cluster-edit-form/templates/misc.pug        |  73 ++-
 .../cluster-edit-form/templates/odbc.pug        |  71 ++-
 .../cluster-edit-form/templates/persistence.pug | 191 ++++++--
 .../cluster-edit-form/templates/service.pug     |  54 +-
 .../templates/sql-connector.pug                 |  88 +++-
 .../cluster-edit-form/templates/ssl.pug         |  69 ++-
 .../cluster-edit-form/templates/swap.pug        |  70 ++-
 .../cluster-edit-form/templates/thread.pug      | 103 +++-
 .../cluster-edit-form/templates/time.pug        |  47 +-
 .../templates/transactions.pug                  |  81 ++-
 .../igfs-edit-form/templates/dual.pug           |  26 +-
 .../igfs-edit-form/templates/fragmentizer.pug   |  37 +-
 .../igfs-edit-form/templates/general.pug        |   4 +-
 .../components/igfs-edit-form/templates/ipc.pug |  77 ++-
 .../igfs-edit-form/templates/misc.pug           | 126 ++++-
 .../igfs-edit-form/templates/secondary.pug      |  29 +-
 .../model-edit-form/templates/general.pug       |  53 +-
 .../model-edit-form/templates/query.pug         |  60 ++-
 .../model-edit-form/templates/store.pug         |  40 +-
 .../page-configure-advanced/style.scss          |   6 -
 .../page-configure-basic/template.pug           |   8 +-
 .../components/queries-notebook/style.scss      |  32 ++
 .../queries-notebook/template.tpl.pug           |   8 +-
 .../frontend/app/helpers/jade/mixins.pug        | 423 ++--------------
 .../app/modules/form/panel/chevron.directive.js |  56 ---
 .../app/primitives/datepicker/index.pug         |   3 +-
 .../app/primitives/form-field/dropdown.pug      |   3 +-
 .../app/primitives/form-field/input.pug         |   4 +-
 .../app/primitives/form-field/typeahead.pug     |   3 +-
 .../frontend/app/primitives/index.js            |   1 +
 .../frontend/app/primitives/modal/index.scss    |  10 +-
 .../frontend/app/primitives/panel/index.scss    |  13 +-
 .../app/primitives/spinner-circle/index.scss    |  59 +++
 .../app/primitives/timepicker/index.pug         |   4 +-
 .../frontend/app/primitives/ui-grid/index.scss  |   6 +-
 96 files changed, 4725 insertions(+), 1951 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/expose-ignite-form-field-control/directives.js
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/expose-ignite-form-field-control/directives.js
 
b/modules/web-console/frontend/app/components/expose-ignite-form-field-control/directives.js
deleted file mode 100644
index 5184032..0000000
--- 
a/modules/web-console/frontend/app/components/expose-ignite-form-field-control/directives.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// eslint-disable-next-line
-import {IgniteFormField} from 
'app/components/page-configure/components/pcValidation'
-
-/**
- * Exposes input to .ignite-form-field scope
- */
-class ExposeIgniteFormFieldControl {
-    /** @type {IgniteFormField} */
-    formField;
-    /** @type {ng.INgModelController} */
-    ngModel;
-    /** 
-     * Name used to access control from $scope.
-     * @type {string}
-     */
-    name;
-
-    $onInit() {
-        if (this.formField && this.ngModel) 
this.formField.exposeControl(this.ngModel, this.name);
-    }
-}
-
-export function exposeIgniteFormFieldControl() {
-    return {
-        restrict: 'A',
-        controller: ExposeIgniteFormFieldControl,
-        bindToController: {
-            name: '@exposeIgniteFormFieldControl'
-        },
-        require: {
-            formField: '^^?igniteFormField',
-            ngModel: '?ngModel'
-        },
-        scope: false
-    };
-}

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/form-field/components/form-field-size/index.js
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/form-field/components/form-field-size/index.js
 
b/modules/web-console/frontend/app/components/form-field/components/form-field-size/index.js
index a591d82..5e08df2 100644
--- 
a/modules/web-console/frontend/app/components/form-field/components/form-field-size/index.js
+++ 
b/modules/web-console/frontend/app/components/form-field/components/form-field-size/index.js
@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import './style.scss';
 import template from './template.pug';
 import controller from './controller';
 

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/form-field/components/form-field-size/style.scss
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/form-field/components/form-field-size/style.scss
 
b/modules/web-console/frontend/app/components/form-field/components/form-field-size/style.scss
new file mode 100644
index 0000000..c522200
--- /dev/null
+++ 
b/modules/web-console/frontend/app/components/form-field/components/form-field-size/style.scss
@@ -0,0 +1,20 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+form-field-size {
+       display: block;
+}

http://git-wip-us.apache.org/repos/asf/ignite/blob/cca10d0c/modules/web-console/frontend/app/components/form-field/components/form-field-size/template.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/form-field/components/form-field-size/template.pug
 
b/modules/web-console/frontend/app/components/form-field/components/form-field-size/template.pug
index 10a170e..f587112 100644
--- 
a/modules/web-console/frontend/app/components/form-field/components/form-field-size/template.pug
+++ 
b/modules/web-console/frontend/app/components/form-field/components/form-field-size/template.pug
@@ -72,6 +72,6 @@ include /app/helpers/jade/mixins
         message: 'Only numbers allowed'
     })
     +form-field__error({
-        error: 'required',
+        error: 'step',
         message: 'Invalid step'
     })
\ No newline at end of file

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/affinity.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/affinity.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/affinity.pug
index ce2cad5..68ee4d5 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/affinity.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/affinity.pug
@@ -19,68 +19,123 @@ include /app/helpers/jade/mixins
 -var form = 'affinity'
 -var model = '$ctrl.clonedCache'
 -var affModel = model + '.affinity'
--var affMapModel = model + '.affinityMapper'
 -var rendezvousAff = affModel + '.kind === "Rendezvous"'
 -var fairAff = affModel + '.kind === "Fair"'
 -var customAff = affModel + '.kind === "Custom"'
--var customAffMapper = affMapModel + '.kind === "Custom"'
 -var rendPartitionsRequired = rendezvousAff + ' && ' + affModel + 
'.Rendezvous.affinityBackupFilter'
 -var fairPartitionsRequired = fairAff + ' && ' + affModel + 
'.Fair.affinityBackupFilter'
 
 panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
     panel-title Affinity Collocation
     panel-description
-        | Collocate data with data to improve performance and scalability of 
your application. 
+        | Collocate data with data to improve performance and scalability of 
your application.
         
a.link-success(href="https://apacheignite.readme.io/docs/affinity-collocation"; 
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('Function:', `${affModel}.kind`, '"AffinityKind"', 
'true', 'Default', 'affinityFunction',
-                    'Key topology resolver to provide mapping from keys to 
nodes<br/>\
-                    <ul>\
-                        <li>Rendezvous - Based on Highest Random Weight 
algorithm</li>\
-                        <li>Fair - Tries to ensure that all nodes get equal 
number of partitions with minimum amount of reassignments between existing 
nodes</li>\
-                        <li>Custom - Custom implementation of key affinity 
fynction</li>\
-                        <li>Default - By default rendezvous affinity function  
with 1024 partitions is used</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Function:',
+                    model: `${affModel}.kind`,
+                    name: '"AffinityKind"',
+                    placeholder: 'Default',
+                    options: 'affinityFunction',
+                    tip: 'Key topology resolver to provide mapping from keys 
to nodes<br/>\
+                                        <ul>\
+                                            <li>Rendezvous - Based on Highest 
Random Weight algorithm</li>\
+                                            <li>Fair - Tries to ensure that 
all nodes get equal number of partitions with minimum amount of reassignments 
between existing nodes</li>\
+                                            <li>Custom - Custom implementation 
of key affinity fynction</li>\
+                                            <li>Default - By default 
rendezvous affinity function  with 1024 partitions is used</li>\
+                                        </ul>'
+                })
             .pc-form-grid-col-60(ng-if='$ctrl.available("2.0.0")')
-                +dropdown('Function:', `${affModel}.kind`, '"AffinityKind"', 
'true', 'Default', 'affinityFunction',
-                    'Key topology resolver to provide mapping from keys to 
nodes<br/>\
-                    <ul>\
-                        <li>Rendezvous - Based on Highest Random Weight 
algorithm</li>\
-                        <li>Custom - Custom implementation of key affinity 
fynction</li>\
-                        <li>Default - By default rendezvous affinity function  
with 1024 partitions is used</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Function:',
+                    model: `${affModel}.kind`,
+                    name: '"AffinityKind"',
+                    placeholder: 'Default',
+                    options: 'affinityFunction',
+                    tip: 'Key topology resolver to provide mapping from keys 
to nodes<br/>\
+                                       <ul>\
+                                           <li>Rendezvous - Based on Highest 
Random Weight algorithm</li>\
+                                           <li>Custom - Custom implementation 
of key affinity fynction</li>\
+                                           <li>Default - By default rendezvous 
affinity function  with 1024 partitions is used</li>\
+                                       </ul>'
+                })
             .pc-form-group
                 .pc-form-grid-row(ng-if=rendezvousAff)
                     .pc-form-grid-col-60
-                        +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-60
-                        +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
-                        +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-row(ng-if=fairAff)
                     .pc-form-grid-col-60
-                        +number-required('Partitions', 
`${affModel}.Fair.partitions`, '"FairPartitions"', 'true', 
fairPartitionsRequired, '256', '1', 'Number of partitions')
+                        +form-field__number({
+                            label: 'Partitions',
+                            model: `${affModel}.Fair.partitions`,
+                            name: '"FairPartitions"',
+                            required: fairPartitionsRequired,
+                            placeholder: '256',
+                            min: '1',
+                            tip: 'Number of partitions'
+                        })
                     .pc-form-grid-col-60
-                        +java-class('Backup filter', 
`${affModel}.Fair.affinityBackupFilter`, '"FairAffinityBackupFilter"', 'true', 
'false',
-                            'Backups will be selected from all nodes that pass 
this filter')
+                        +form-field__java-class({
+                            label: 'Backup filter',
+                            model: `${affModel}.Fair.affinityBackupFilter`,
+                            name: '"FairAffinityBackupFilter"',
+                            tip: 'Backups will be selected from all nodes that 
pass this filter'
+                        })
                     .pc-form-grid-col-60
-                        +checkbox('Exclude neighbors', 
`${affModel}.Fair.excludeNeighbors`, '"FairExcludeNeighbors"',
-                            'Exclude same - host - neighbors from being 
backups of each other and specified number of backups')
+                        +form-field__checkbox({
+                            label: 'Exclude neighbors',
+                            model: `${affModel}.Fair.excludeNeighbors`,
+                            name: '"FairExcludeNeighbors"',
+                            tip: 'Exclude same - host - neighbors from being 
backups of each other and specified number of backups'
+                        })
                 .pc-form-grid-row(ng-if=customAff)
                     .pc-form-grid-col-60
-                        +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'
+                        })
             .pc-form-grid-col-60
-                +java-class('Mapper:', model + '.affinityMapper', 
'"AffMapCustomClassName"', 'true', 'false',
-                    'Provide custom affinity key for any given key')
+                +form-field__java-class({
+                    label: 'Mapper:',
+                    model: `${model}.affinityMapper`,
+                    name: '"AffMapCustomClassName"',
+                    tip: 'Provide custom affinity key for any given key'
+                })
 
             //- Since ignite 2.0
             .pc-form-grid-col-60(ng-if='$ctrl.available("2.0.0")')
-                +java-class('Topology validator:', model + 
'.topologyValidator', '"topologyValidator"', 'true', 'false')
+                +form-field__java-class({
+                    label: 'Topology validator:',
+                    model: `${model}.topologyValidator`,
+                    name: '"topologyValidator"'
+                })
 
         .pca-form-column-6
             +preview-xml-java(model, 'cacheAffinity')

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/concurrency.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/concurrency.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/concurrency.pug
index d99f894..bb355f0 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/concurrency.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/concurrency.pug
@@ -26,39 +26,61 @@ 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('Max async operations:', 
`${model}.maxConcurrentAsyncOperations`, '"maxConcurrentAsyncOperations"', 
'true', '500', '0',
-                    'Maximum number of allowed concurrent asynchronous 
operations<br/>\
-                    If <b>0</b> then number of concurrent asynchronous 
operations is unlimited')
+                +form-field__number({
+                    label: 'Max async operations:',
+                    model: `${model}.maxConcurrentAsyncOperations`,
+                    name: '"maxConcurrentAsyncOperations"',
+                    placeholder: '500',
+                    min: '0',
+                    tip: 'Maximum number of allowed concurrent asynchronous 
operations<br/>\
+                         If <b>0</b> then number of concurrent asynchronous 
operations is unlimited'
+                })
             .pc-form-grid-col-30
-                +number('Default lock timeout:', 
`${model}.defaultLockTimeout`, '"defaultLockTimeout"', 'true', '0', '0',
-                    'Default lock acquisition timeout in milliseconds<br/>\
-                    If <b>0</b> then lock acquisition will never timeout')
+                +form-field__number({
+                    label: 'Default lock timeout:',
+                    model: `${model}.defaultLockTimeout`,
+                    name: '"defaultLockTimeout"',
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Default lock acquisition timeout in 
milliseconds<br/>\
+                         If <b>0</b> then lock acquisition will never timeout'
+                })
 
             //- Removed in ignite 2.0
             .pc-form-grid-col-60(ng-if='$ctrl.available(["1.0.0", "2.0.0"])' 
ng-hide=`${model}.atomicityMode === 'TRANSACTIONAL'`)
-                +dropdown('Entry versioning:', 
`${model}.atomicWriteOrderMode`, '"atomicWriteOrderMode"', 'true', 'Choose 
versioning',
-                    '[\
-                        {value: "CLOCK", label: "CLOCK"},\
-                        {value: "PRIMARY", label: "PRIMARY"}\
-                    ]',
-                    'Write ordering mode determines which node assigns the 
write version, sender or the primary node\
-                    <ul>\
-                        <li>CLOCK - in this mode write versions are assigned 
on a sender node which generally leads to better performance</li>\
-                        <li>PRIMARY - in this mode version is assigned only on 
primary node. This means that sender will only send write request to primary 
node, which in turn will assign write version and forward it to backups</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Entry versioning:',
+                    model: `${model}.atomicWriteOrderMode`,
+                    name: '"atomicWriteOrderMode"',
+                    placeholder: 'Choose versioning',
+                    options: '[\
+                                            {value: "CLOCK", label: "CLOCK"},\
+                                            {value: "PRIMARY", label: 
"PRIMARY"}\
+                                        ]',
+                    tip: 'Write ordering mode determines which node assigns 
the write version, sender or the primary node\
+                                        <ul>\
+                                            <li>CLOCK - in this mode write 
versions are assigned on a sender node which generally leads to better 
performance</li>\
+                                            <li>PRIMARY - in this mode version 
is assigned only on primary node. This means that sender will only send write 
request to primary node, which in turn will assign write version and forward it 
to backups</li>\
+                                        </ul>'
+                })
 
             .pc-form-grid-col-60
-                +dropdown('Write synchronization mode:', 
`${model}.writeSynchronizationMode`, '"writeSynchronizationMode"', 'true', 
'PRIMARY_SYNC',
-                    '[\
-                        {value: "FULL_SYNC", label: "FULL_SYNC"},\
-                        {value: "FULL_ASYNC", label: "FULL_ASYNC"},\
-                        {value: "PRIMARY_SYNC", label: "PRIMARY_SYNC"}\
-                    ]',
-                    'Write synchronization mode\
-                    <ul>\
-                        <li>FULL_SYNC - Ignite will wait for write or commit 
replies from all nodes</li>\
-                        <li>FULL_ASYNC - Ignite will not wait for write or 
commit responses from participating nodes</li>\
-                        <li>PRIMARY_SYNC - Makes sense for PARTITIONED mode. 
Ignite will wait for write or commit to complete on primary node</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Write synchronization mode:',
+                    model: `${model}.writeSynchronizationMode`,
+                    name: '"writeSynchronizationMode"',
+                    placeholder: 'PRIMARY_SYNC',
+                    options: '[\
+                                            {value: "FULL_SYNC", label: 
"FULL_SYNC"},\
+                                            {value: "FULL_ASYNC", label: 
"FULL_ASYNC"},\
+                                            {value: "PRIMARY_SYNC", label: 
"PRIMARY_SYNC"}\
+                                        ]',
+                    tip: 'Write synchronization mode\
+                                        <ul>\
+                                            <li>FULL_SYNC - Ignite will wait 
for write or commit replies from all nodes</li>\
+                                            <li>FULL_ASYNC - Ignite will not 
wait for write or commit responses from participating nodes</li>\
+                                            <li>PRIMARY_SYNC - Makes sense for 
PARTITIONED mode. Ignite will wait for write or commit to complete on primary 
node</li>\
+                                        </ul>'
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'cacheConcurrency')

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/general.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/general.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/general.pug
index 2001f70..9552396 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/general.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/general.pug
@@ -22,7 +22,7 @@ include /app/helpers/jade/mixins
 panel-collapsible(opened=`::true` ng-form=form)
     panel-title General
     panel-description
-        | Common cache configuration. 
+        | Common cache configuration.
         a.link-success(href="https://apacheignite.readme.io/docs/data-grid"; 
target="_blank") More info
     panel-content.pca-form-row
         .pca-form-column-6.pc-form-grid-row
@@ -38,7 +38,7 @@ panel-collapsible(opened=`::true` ng-form=form)
                     ignite-unique-property='name'
                     ignite-unique-skip=`["_id", ${model}]`
                 )
-                    +unique-feedback(`${model}.name`, 'Cache name should be 
unique')
+                    +form-field__error({ error: 'igniteUnique', message: 
'Cache name should be unique' })
             .pc-form-grid-col-60
                 +form-field__dropdown({
                     label: 'Domain models:',
@@ -51,63 +51,102 @@ panel-collapsible(opened=`::true` ng-form=form)
                     tip: 'Select domain models to describe types in cache'
                 })
             .pc-form-grid-col-60(ng-if='$ctrl.available("2.1.0")')
-                +text('Group:', `${model}.groupName`, '"groupName"', 'false', 
'Input group name',
-                    'Cache group name.<br/>\
-                    Caches with the same group name share single underlying 
"physical" cache (partition set), but are logically isolated.')
+                +form-field__text({
+                    label: 'Group:',
+                    model: `${model}.groupName`,
+                    name: '"groupName"',
+                    placeholder: 'Input group name',
+                    tip: 'Cache group name.<br/>\
+                          Caches with the same group name share single 
underlying "physical" cache (partition set), but are logically isolated.'
+                })
             .pc-form-grid-col-30
-                +cacheMode('Mode:', `${model}.cacheMode`, '"cacheMode"', 
'PARTITIONED')
+                +form-field__cache-modes({
+                    label: 'Mode:',
+                    model: `${model}.cacheMode`,
+                    name: '"cacheMode"',
+                    placeholder: 'PARTITIONED'
+                })
 
             .pc-form-grid-col-30
-                +dropdown('Atomicity:', `${model}.atomicityMode`, 
'"atomicityMode"', 'true', 'ATOMIC',
-                    '[\
-                        {value: "ATOMIC", label: "ATOMIC"},\
-                        {value: "TRANSACTIONAL", label: "TRANSACTIONAL"}\
-                    ]',
-                    'Atomicity:\
-                    <ul>\
-                        <li>ATOMIC - in this mode distributed transactions and 
distributed locking are not supported</li>\
-                        <li>TRANSACTIONAL - in this mode specified fully 
ACID-compliant transactional cache behavior</li>\
-                    </ul>')
+                +form-field__dropdown({
+                    label: 'Atomicity:',
+                    model: `${model}.atomicityMode`,
+                    name: '"atomicityMode"',
+                    placeholder: 'ATOMIC',
+                    options: '[\
+                                            {value: "ATOMIC", label: 
"ATOMIC"},\
+                                            {value: "TRANSACTIONAL", label: 
"TRANSACTIONAL"}\
+                                        ]',
+                    tip: 'Atomicity:\
+                                        <ul>\
+                                            <li>ATOMIC - in this mode 
distributed transactions and distributed locking are not supported</li>\
+                                            <li>TRANSACTIONAL - in this mode 
specified fully ACID-compliant transactional cache behavior</li>\
+                                        </ul>'
+                })
             .pc-form-grid-col-30(ng-is=`${model}.cacheMode === 'PARTITIONED'`)
-                +number('Backups:', `${model}.backups`, '"backups"', 'true', 
'0', '0', 'Number of nodes used to back up single partition for partitioned 
cache')
+                +form-field__number({
+                    label: 'Backups:',
+                    model: `${model}.backups`,
+                    name: '"checkpointS3ClientExecutionTimeout"',
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Number of nodes used to back up single partition for 
partitioned cache'
+                })
             //- Since ignite 2.0
             .pc-form-grid-col-30(ng-if='$ctrl.available("2.0.0")')
-                +dropdown('Partition loss policy:', 
`${model}.partitionLossPolicy`, '"partitionLossPolicy"', 'true', 'IGNORE',
-                '[\
-                    {value: "READ_ONLY_SAFE", label: "READ_ONLY_SAFE"},\
-                    {value: "READ_ONLY_ALL", label: "READ_ONLY_ALL"},\
-                    {value: "READ_WRITE_SAFE", label: "READ_WRITE_SAFE"},\
-                    {value: "READ_WRITE_ALL", label: "READ_WRITE_ALL"},\
-                    {value: "IGNORE", label: "IGNORE"}\
-                ]',
-                'Partition loss policies:\
-                <ul>\
-                    <li>READ_ONLY_SAFE - in this mode all writes to the cache 
will be failed with an exception,\
-                        reads will only be allowed for keys in  non-lost 
partitions.\
-                        Reads from lost partitions will be failed with an 
exception.</li>\
-                    <li>READ_ONLY_ALL - in this mode all writes to the cache 
will be failed with an exception.\
-                        All reads will proceed as if all partitions were in a 
consistent state.\
-                        The result of reading from a lost partition is 
undefined and may be different on different nodes in the cluster.</li>\
-                    <li>READ_WRITE_SAFE - in this mode all reads and writes 
will be allowed for keys in valid partitions.\
-                        All reads and writes for keys in lost partitions will 
be failed with an exception.</li>\
-                    <li>READ_WRITE_ALL - in this mode all reads and writes 
will proceed as if all partitions were in a consistent state.\
-                        The result of reading from a lost partition is 
undefined and may be different on different nodes in the cluster.</li>\
-                    <li>IGNORE - in this mode if partition is lost, reset it 
state and do not clear intermediate data.\
-                        The result of reading from a previously lost and not 
cleared partition is undefined and may be different\
-                        on different nodes in the cluster.</li>\
-                </ul>')
+                +form-field__dropdown({
+                    label:'Partition loss policy:',
+                    model: `${model}.partitionLossPolicy`,
+                    name: '"partitionLossPolicy"',
+                    placeholder: 'IGNORE',
+                    options: '[\
+                                        {value: "READ_ONLY_SAFE", label: 
"READ_ONLY_SAFE"},\
+                                        {value: "READ_ONLY_ALL", label: 
"READ_ONLY_ALL"},\
+                                        {value: "READ_WRITE_SAFE", label: 
"READ_WRITE_SAFE"},\
+                                        {value: "READ_WRITE_ALL", label: 
"READ_WRITE_ALL"},\
+                                        {value: "IGNORE", label: "IGNORE"}\
+                                    ]',
+                    tip: 'Partition loss policies:\
+                                    <ul>\
+                                        <li>READ_ONLY_SAFE - in this mode all 
writes to the cache will be failed with an exception,\
+                                            reads will only be allowed for 
keys in  non-lost partitions.\
+                                            Reads from lost partitions will be 
failed with an exception.</li>\
+                                        <li>READ_ONLY_ALL - in this mode all 
writes to the cache will be failed with an exception.\
+                                            All reads will proceed as if all 
partitions were in a consistent state.\
+                                            The result of reading from a lost 
partition is undefined and may be different on different nodes in the 
cluster.</li>\
+                                        <li>READ_WRITE_SAFE - in this mode all 
reads and writes will be allowed for keys in valid partitions.\
+                                            All reads and writes for keys in 
lost partitions will be failed with an exception.</li>\
+                                        <li>READ_WRITE_ALL - in this mode all 
reads and writes will proceed as if all partitions were in a consistent state.\
+                                            The result of reading from a lost 
partition is undefined and may be different on different nodes in the 
cluster.</li>\
+                                        <li>IGNORE - in this mode if partition 
is lost, reset it state and do not clear intermediate data.\
+                                            The result of reading from a 
previously lost and not cleared partition is undefined and may be different\
+                                            on different nodes in the 
cluster.</li>\
+                                    </ul>'
+                })
             .pc-form-grid-col-60(ng-show=`${model}.cacheMode === 'PARTITIONED' 
&& ${model}.backups`)
-                +checkbox('Read from backup', `${model}.readFromBackup`, 
'"readFromBackup"',
-                    'Flag indicating whether data can be read from backup<br/>\
-                    If not set then always get data from primary node (never 
from backup)')
+                +form-field__checkbox({
+                    label: 'Read from backup',
+                    model: `${model}.readFromBackup`,
+                    name: '"readFromBackup"',
+                    tip: 'Flag indicating whether data can be read from 
backup<br/>\
+                          If not set then always get data from primary node 
(never from backup)'
+                })
             .pc-form-grid-col-60
-                +checkbox('Copy on read', `${model}.copyOnRead`, 
'"copyOnRead"',
-                    'Flag indicating whether copy of the value stored in cache 
should be created for cache operation implying return value<br/>\
-                    Also if this flag is set copies are created for values 
passed to CacheInterceptor and to CacheEntryProcessor')
+                +form-field__checkbox({
+                    label: 'Copy on read',
+                    model: `${model}.copyOnRead`,
+                    name: '"copyOnRead"',
+                    tip: 'Flag indicating whether copy of the value stored in 
cache should be created for cache operation implying return value<br/>\
+                          Also if this flag is set copies are created for 
values passed to CacheInterceptor and to CacheEntryProcessor'
+                })
             .pc-form-grid-col-60(ng-show=`${model}.cacheMode === 'PARTITIONED' 
&& ${model}.atomicityMode === 'TRANSACTIONAL'`)
-                +checkbox('Invalidate near cache', `${model}.isInvalidate`, 
'"isInvalidate"',
-                    'Invalidation flag for near cache entries in 
transaction<br/>\
-                    If set then values will be invalidated (nullified) upon 
commit in near cache')
+                +form-field__checkbox({
+                    label: 'Invalidate near cache',
+                    model: `${model}.isInvalidate`,
+                    name: '"isInvalidate"',
+                    tip: 'Invalidation flag for near cache entries in 
transaction<br/>\
+                          If set then values will be invalidated (nullified) 
upon commit in near cache'
+                })
 
         .pca-form-column-6
             +preview-xml-java(model, 'cacheGeneral')

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/memory.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/memory.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/memory.pug
index 9308737..571e8ec 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/memory.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/memory.pug
@@ -22,7 +22,7 @@ include /app/helpers/jade/mixins
 panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
     panel-title Memory
     panel-description
-        | Cache memory settings. 
+        | Cache memory settings.
         a.link-success(
             href="https://apacheignite.readme.io/v1.9/docs/off-heap-memory";
             target="_blank"
@@ -37,17 +37,31 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
         .pca-form-column-6.pc-form-grid-row
             //- Since ignite 2.0
             .pc-form-grid-col-60(ng-if='$ctrl.available("2.0.0")')
-                +checkbox('Onheap cache enabled', model + 
'.onheapCacheEnabled', '"OnheapCacheEnabled"', 'Checks if the on-heap cache is 
enabled for the off-heap based page memory')
-
+                +form-field__checkbox({
+                    label: 'Onheap cache enabled',
+                    model: model + '.onheapCacheEnabled',
+                    name: '"OnheapCacheEnabled"',
+                    tip: 'Checks if the on-heap cache is enabled for the 
off-heap based page memory'
+                })
             //- Since ignite 2.0 deprecated in ignite 2.3
             .pc-form-grid-col-60(ng-if='$ctrl.available(["2.0.0", "2.3.0"])')
-                +text('Memory policy name:', model + '.memoryPolicyName', 
'"MemoryPolicyName"', 'false', 'default',
-                    'Name of memory policy configuration for this cache')
+                +form-field__text({
+                    label: 'Memory policy name:',
+                    model: `${model}.memoryPolicyName`,
+                    name: '"MemoryPolicyName"',
+                    placeholder: 'default',
+                    tip: 'Name of memory policy configuration for this cache'
+                })
 
             //- Since ignite 2.3
             .pc-form-grid-col-60(ng-if='$ctrl.available("2.3.0")')
-                +text('Data region name:', model + '.dataRegionName', 
'"DataRegionName"', 'false', 'default',
-                    'Name of data region configuration for this cache')
+                +form-field__text({
+                    label: 'Data region name:',
+                    model: `${model}.dataRegionName`,
+                    name: '"DataRegionName"',
+                    placeholder: 'default',
+                    tip: 'Name of data region configuration for this cache'
+                })
 
             //- Removed in ignite 2.0
             .pc-form-grid-col-60(ng-if-start='$ctrl.available(["1.0.0", 
"2.0.0"])')
@@ -127,32 +141,53 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                     size-type='bytes'
                     required='true'
                 )
-            +evictionPolicy(`${model}.evictionPolicy`, '"evictionPolicy"', 
'true',
-                `$ctrl.Caches.evictionPolicy.required(${model})`,
-                'Optional cache eviction policy<br/>\
-                Must be set for entries to be evicted from on-heap to off-heap 
or swap\
-                <ul>\
-                    <li>Least Recently Used(LRU) - Eviction policy based on 
LRU algorithm and supports batch eviction</li>\
-                    <li>First In First Out (FIFO) - Eviction policy based on 
FIFO algorithm and supports batch eviction</li>\
-                    <li>SORTED - Eviction policy which will select the minimum 
cache entry for eviction</li>\
-                </ul>')
+
+            +form-field__eviction-policy({
+                model: `${model}.evictionPolicy`,
+                name: '"evictionPolicy"',
+                enabled: 'true',
+                required: `$ctrl.Caches.evictionPolicy.required(${model})`,
+                tip: 'Optional cache eviction policy<br/>\
+                      Must be set for entries to be evicted from on-heap to 
off-heap or swap\
+                      <ul>\
+                          <li>Least Recently Used(LRU) - Eviction policy based 
on LRU algorithm and supports batch eviction</li>\
+                          <li>First In First Out (FIFO) - Eviction policy 
based on FIFO algorithm and supports batch eviction</li>\
+                          <li>SORTED - Eviction policy which will select the 
minimum cache entry for eviction</li>\
+                      </ul>'
+            })
 
             //- Since ignite 2.0
             .pc-form-grid-col-60(ng-if='$ctrl.available("2.0.0")')
-                +java-class('Eviction filter:', model + '.evictionFilter', 
'"EvictionFilter"', 'true', 'false', 'Eviction filter to specify which entries 
should not be evicted')
+                +form-field__java-class({
+                    label: 'Eviction filter:',
+                    model: `${model}.evictionFilter`,
+                    name: '"EvictionFilter"',
+                    tip: 'Eviction filter to specify which entries should not 
be evicted'
+                })
 
             //- Removed in ignite 2.0
             .pc-form-grid-col-60(ng-if-start='$ctrl.available(["1.0.0", 
"2.0.0"])')
-                +number('Start size:', `${model}.startSize`, '"startSize"', 
'true', '1500000', '0',
-                    'In terms of size and capacity, Ignite internal cache map 
acts exactly like a normal Java HashMap: it has some initial capacity\
-                    (which is pretty small by default), which doubles as data 
arrives. The process of internal cache map resizing is CPU-intensive\
-                    and time-consuming, and if you load a huge dataset into 
cache (which is a normal use case), the map will have to resize a lot of times.\
-                    To avoid that, you can specify the initial cache map 
capacity, comparable to the expected size of your dataset.\
-                    This will save a lot of CPU resources during the load 
time, because the map would not have to resize.\
-                    For example, if you expect to load 10 million entries into 
cache, you can set this property to 10 000 000.\
-                    This will save you from cache internal map resizes.')
+                +form-field__number({
+                    label: 'Start size:',
+                    model: `${model}.startSize`,
+                    name: '"startSize"',
+                    placeholder: '1500000',
+                    min: '0',
+                    tip: 'In terms of size and capacity, Ignite internal cache 
map acts exactly like a normal Java HashMap: it has some initial capacity\
+                          (which is pretty small by default), which doubles as 
data arrives. The process of internal cache map resizing is CPU-intensive\
+                          and time-consuming, and if you load a huge dataset 
into cache (which is a normal use case), the map will have to resize a lot of 
times.\
+                          To avoid that, you can specify the initial cache map 
capacity, comparable to the expected size of your dataset.\
+                          This will save a lot of CPU resources during the 
load time, because the map would not have to resize.\
+                          For example, if you expect to load 10 million 
entries into cache, you can set this property to 10 000 000.\
+                          This will save you from cache internal map resizes.'
+                })
             .pc-form-grid-col-60(ng-if-end)
-                +checkbox('Swap enabled', `${model}.swapEnabled`, 
'"swapEnabled"', 'Flag indicating whether swap storage is enabled or not for 
this cache')
+                +form-field__checkbox({
+                    label: 'Swap enabled',
+                    model: `${model}.swapEnabled`,
+                    name: '"swapEnabled"',
+                    tip: 'Flag indicating whether swap storage is enabled or 
not for this cache'
+                })
 
         .pca-form-column-6
             +preview-xml-java(model, 'cacheMemory')

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/near-cache-client.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/near-cache-client.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/near-cache-client.pug
index 2b6705d..ed0e38a 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/near-cache-client.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/near-cache-client.pug
@@ -26,8 +26,8 @@ panel-collapsible(
 )
     panel-title Near cache on client node
     panel-description
-        | Near cache settings for client nodes. 
-        | Near cache is a small local cache that stores most recently or most 
frequently accessed data. 
+        | Near cache settings for client nodes.
+        | Near cache is a small local cache that stores most recently or most 
frequently accessed data.
         | Should be used in case when it is impossible to send computations to 
remote nodes.
     panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
@@ -35,16 +35,32 @@ panel-collapsible(
             -var enabled = `${nearCfg}.enabled`
 
             .pc-form-grid-col-60
-                +checkbox('Enabled', enabled, '"clientNearEnabled"', 'Flag 
indicating whether to configure near cache')
+                +form-field__checkbox({
+                    label: 'Enabled',
+                    model: enabled,
+                    name: '"clientNearEnabled"',
+                    tip: 'Flag indicating whether to configure near cache'
+                })
             .pc-form-grid-col-60
-                +number('Start size:', `${nearCfg}.nearStartSize`, 
'"clientNearStartSize"', enabled, '375000', '0',
-                    'Initial cache size for near cache which will be used to 
pre-create internal hash table after start')
-            +evictionPolicy(`${nearCfg}.nearEvictionPolicy`, 
'"clientNearCacheEvictionPolicy"', enabled, 'false',
-                'Near cache eviction policy\
-                <ul>\
-                    <li>Least Recently Used (LRU) - Eviction policy based on 
LRU algorithm and supports batch eviction</li>\
-                    <li>First In First Out (FIFO) - Eviction policy based on 
FIFO algorithm and supports batch eviction</li>\
-                    <li>SORTED - Eviction policy which will select the minimum 
cache entry for eviction</li>\
-                </ul>')
+                +form-field__number({
+                    label: 'Start size:',
+                    model: `${nearCfg}.nearStartSize`,
+                    name: '"clientNearStartSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '375000',
+                    min: '0',
+                    tip: 'Initial cache size for near cache which will be used 
to pre-create internal hash table after start'
+                })
+            +form-field__eviction-policy({
+                model: `${nearCfg}.nearEvictionPolicy`,
+                name: '"clientNearCacheEvictionPolicy"',
+                enabled: enabled,
+                tip: 'Near cache eviction policy\
+                     <ul>\
+                         <li>Least Recently Used (LRU) - Eviction policy based 
on LRU algorithm and supports batch eviction</li>\
+                         <li>First In First Out (FIFO) - Eviction policy based 
on FIFO algorithm and supports batch eviction</li>\
+                         <li>SORTED - Eviction policy which will select the 
minimum cache entry for eviction</li>\
+                     </ul>'
+            })
         .pca-form-column-6
             +preview-xml-java(model, 'cacheNearClient')

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/near-cache-server.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/near-cache-server.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/near-cache-server.pug
index 3a91fd2..3d2043a 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/near-cache-server.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/near-cache-server.pug
@@ -26,9 +26,9 @@ panel-collapsible(
 )
     panel-title Near cache on server node
     panel-description
-        | Near cache settings. 
-        | Near cache is a small local cache that stores most recently or most 
frequently accessed data. 
-        | Should be used in case when it is impossible to send computations to 
remote nodes. 
+        | Near cache settings.
+        | Near cache is a small local cache that stores most recently or most 
frequently accessed data.
+        | Should be used in case when it is impossible to send computations to 
remote nodes.
         a.link-success(href="https://apacheignite.readme.io/docs/near-caches"; 
target="_blank") More info
     panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
         .pca-form-column-6.pc-form-grid-row
@@ -36,16 +36,32 @@ panel-collapsible(
             -var enabled = `${nearCfg}.enabled`
 
             .pc-form-grid-col-60
-                +checkbox('Enabled', enabled, '"nearCacheEnabled"', 'Flag 
indicating whether to configure near cache')
+                +form-field__checkbox({
+                    label: 'Enabled',
+                    model: enabled,
+                    name: '"nearCacheEnabled"',
+                    tip: 'Flag indicating whether to configure near cache'
+                })
             .pc-form-grid-col-60
-                +number('Start size:', `${nearCfg}.nearStartSize`, 
'"nearStartSize"', enabled, '375000', '0',
-                    'Initial cache size for near cache which will be used to 
pre-create internal hash table after start')
-            +evictionPolicy(`${model}.nearConfiguration.nearEvictionPolicy`, 
'"nearCacheEvictionPolicy"', enabled, 'false',
-                'Near cache eviction policy\
-                <ul>\
-                    <li>Least Recently Used (LRU) - Eviction policy based on 
LRU algorithm and supports batch eviction</li>\
-                    <li>First In First Out (FIFO) - Eviction policy based on 
FIFO algorithm and supports batch eviction</li>\
-                    <li>SORTED - Eviction policy which will select the minimum 
cache entry for eviction</li>\
-                </ul>')
+                +form-field__number({
+                    label: 'Start size:',
+                    model: `${nearCfg}.nearStartSize`,
+                    name: '"nearStartSize"',
+                    disabled: `!(${enabled})`,
+                    placeholder: '375000',
+                    min: '0',
+                    tip: 'Initial cache size for near cache which will be used 
to pre-create internal hash table after start'
+                })
+            +form-field__eviction-policy({
+                model: `${model}.nearConfiguration.nearEvictionPolicy`,
+                name: '"nearCacheEvictionPolicy"',
+                enabled: enabled,
+                tip: 'Near cache eviction policy\
+                     <ul>\
+                         <li>Least Recently Used (LRU) - Eviction policy based 
on LRU algorithm and supports batch eviction</li>\
+                         <li>First In First Out (FIFO) - Eviction policy based 
on FIFO algorithm and supports batch eviction</li>\
+                         <li>SORTED - Eviction policy which will select the 
minimum cache entry for eviction</li>\
+                     </ul>'
+            })
         .pca-form-column-6
             +preview-xml-java(model, 'cacheNearServer')

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/node-filter.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/node-filter.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/node-filter.pug
index e8e1875..32afac1 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/node-filter.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/node-filter.pug
@@ -29,7 +29,14 @@ 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
-                +dropdown('Node filter:', nodeFilterKind, '"nodeFilter"', 
'true', 'Not set', '::$ctrl.Caches.nodeFilterKinds', 'Node filter variant')
+                +form-field__dropdown({
+                    label: 'Node filter:',
+                    model: nodeFilterKind,
+                    name: '"nodeFilter"',
+                    placeholder: 'Not set',
+                    options: '::$ctrl.Caches.nodeFilterKinds',
+                    tip: 'Node filter variant'
+                })
             .pc-form-grid-col-60(
                 ng-if=igfsFilter
             )
@@ -47,7 +54,13 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
                 )
                     +form-field__error({ error: 'isInCollection',  message: 
`Cluster doesn't have such an IGFS` })
             .pc-form-grid-col-60(ng-show=customFilter)
-                +java-class('Class name:', `${nodeFilter}.Custom.className`, 
'"customNodeFilter"',
-                    'true', customFilter, 'Class name of custom node filter 
implementation', customFilter)
+                +form-field__java-class({
+                    label: 'Class name:',
+                    model: `${nodeFilter}.Custom.className`,
+                    name: '"customNodeFilter"',
+                    required: customFilter,
+                    tip: 'Class name of custom node filter implementation',
+                    validationActive: customFilter
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'cacheNodeFilter', 'igfss')

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/query.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/query.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/query.pug
index 33cb87a..8fedfc0 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/query.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/query.pug
@@ -21,45 +21,68 @@ include /app/helpers/jade/mixins
 
 panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
     panel-title Queries & Indexing
-    panel-description 
-        | Cache queries settings. 
+    panel-description
+        | Cache queries settings.
         a.link-success(href="https://apacheignite-sql.readme.io/docs/select"; 
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
-                +text('SQL schema name:', `${model}.sqlSchema`, '"sqlSchema"', 
'false', 'Input schema name',
-                    'Specify any custom name to be used as SQL schema for 
current cache. This name will correspond to SQL ANSI-99 standard.\
-                    Nonquoted identifiers are not case sensitive. Quoted 
identifiers are case sensitive.\
-                    When SQL schema is not specified, quoted cache name should 
used instead.<br/>\
-                    For example:\
-                    <ul>\
-                        <li>\
-                            Query without schema names (quoted cache names 
will be used):\
-                            SELECT * FROM "PersonsCache".Person p INNER JOIN 
"OrganizationsCache".Organization o on p.org = o.id\
-                        </li>\
-                        <li>\
-                            The same query using schema names "Persons" and 
"Organizations":\
-                            SELECT * FROM Persons.Person p INNER JOIN 
Organizations.Organization o on p.org = o.id\
-                        </li>\
-                    </ul>')
+                +form-field__text({
+                    label: 'SQL schema name:',
+                    model: `${model}.sqlSchema`,
+                    name: '"sqlSchema"',
+                    placeholder: 'Input schema name',
+                    tip: 'Cache group name.<br/>\
+                          Caches with the same group name share single 
underlying "physical" cache (partition set), but are logically isolated.'
+                })
 
             //- Removed in ignite 2.0
             .pc-form-grid-col-60(ng-if='$ctrl.available(["1.0.0", "2.0.0"])')
-                +number('On-heap cache for off-heap indexes:', 
`${model}.sqlOnheapRowCacheSize`, '"sqlOnheapRowCacheSize"', 'true', '10240', 
'1',
-                    'Number of SQL rows which will be cached onheap to avoid 
deserialization on each SQL index access')
+                +form-field__number({
+                    label: 'On-heap cache for off-heap indexes:',
+                    model: `${model}.sqlOnheapRowCacheSize`,
+                    name: '"sqlOnheapRowCacheSize"',
+                    placeholder: '10240',
+                    min: '1',
+                    tip: 'Specify any custom name to be used as SQL schema for 
current cache. This name will correspond to SQL ANSI-99 standard.\
+                          Nonquoted identifiers are not case sensitive. Quoted 
identifiers are case sensitive.\
+                          When SQL schema is not specified, quoted cache name 
should used instead.<br/>\
+                          For example:\
+                          <ul>\
+                            <li>\
+                            Query without schema names (quoted cache names 
will be used):\
+                            SELECT * FROM "PersonsCache".Person p INNER JOIN 
"OrganizationsCache".Organization o on p.org = o.id\
+                            </li>\
+                            <li>\
+                                The same query using schema names "Persons" 
and "Organizations":\
+                                SELECT * FROM Persons.Person p INNER JOIN 
Organizations.Organization o on p.org = o.id\
+                            </li>\
+                          </ul>'
+                })
 
             //- Deprecated in ignite 2.1
             .pc-form-grid-col-60(ng-if='$ctrl.available(["1.0.0", "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'
+                })
             .pc-form-grid-col-60
-                +number('History size:', `${model}.queryDetailMetricsSize`, 
'"queryDetailMetricsSize"', 'true', '0', '0',
-                    'Size of queries detail metrics that will be stored in 
memory for monitoring purposes')
+                +form-field__number({
+                    label: 'History size:',
+                    model: `${model}.queryDetailMetricsSize`,
+                    name: '"queryDetailMetricsSize"',
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Size of queries detail metrics that will be stored 
in memory for monitoring purposes'
+                })
             .pc-form-grid-col-60
                 mixin caches-query-list-sql-functions()
                     .ignite-form-field
                         -let items = `${model}.sqlFunctionClasses`;
-                        -let uniqueTip = 'SQL function with such class name 
already exists!'
 
                         list-editable(
                             ng-model=items
@@ -72,7 +95,7 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
 
                             list-editable-item-edit
                                 +list-java-class-field('SQL function', 
'$item', '"sqlFunction"', items)
-                                    +unique-feedback('"sqlFunction"', 
uniqueTip)
+                                    +form-field__error({ error: 
'igniteUnique', message: 'SQL function with such class name already exists!' })
 
                             list-editable-no-items
                                 list-editable-add-item-button(
@@ -87,19 +110,33 @@ panel-collapsible(ng-form=form 
on-open=`ui.loadPanel('${form}')`)
 
             //- Removed in ignite 2.0
             .pc-form-grid-col-60(ng-if='$ctrl.available(["1.0.0", "2.0.0"])')
-                +checkbox('Snapshotable index', `${model}.snapshotableIndex`, 
'"snapshotableIndex"',
-                    'Flag indicating whether SQL indexes should support 
snapshots')
+                +form-field__checkbox({
+                    label: 'Snapshotable index',
+                    model: `${model}.snapshotableIndex`,
+                    name: '"snapshotableIndex"',
+                    tip: 'Flag indicating whether SQL indexes should support 
snapshots'
+                })
 
             .pc-form-grid-col-60
-                +checkbox('Escape table and filed names', 
`${model}.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 creation internal 
structures in Ignite SQL engine.')
+                +form-field__checkbox({
+                    label: 'Escape table and filed names',
+                    model: `${model}.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 creation internal 
structures in Ignite SQL engine.'
+                })
 
             //- Since ignite 2.0
             .pc-form-grid-col-30(ng-if-start='$ctrl.available("2.0.0")')
-                +number('Query parallelism', model + '.queryParallelism', 
'"queryParallelism"', 'true', '1', '1',
-                    'A hint to query execution engine on desired degree of 
parallelism within a single node')
+                +form-field__number({
+                    label: 'Query parallelism',
+                    model: `${model}.queryParallelism`,
+                    name: '"queryParallelism"',
+                    placeholder: '1',
+                    min: '1',
+                    tip: 'A hint to query execution engine on desired degree 
of parallelism within a single node'
+                })
             .pc-form-grid-col-30(ng-if-end)
                 +form-field__number({
                     label: 'SQL index max inline size:',

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/rebalance.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/rebalance.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/rebalance.pug
index 7563435..feb7699 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/rebalance.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/rebalance.pug
@@ -26,41 +26,82 @@ panel-collapsible(
 )
     panel-title Rebalance
     panel-description
-        | Cache rebalance settings. 
+        | Cache rebalance settings.
         a.link-success(href="https://apacheignite.readme.io/docs/rebalancing"; 
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('Mode:', `${model}.rebalanceMode`, 
'"rebalanceMode"', 'true', 'ASYNC',
-                    '[\
+                +form-field__dropdown({
+                    label: 'Mode:',
+                    model: `${model}.rebalanceMode`,
+                    name: '"rebalanceMode"',
+                    placeholder: 'ASYNC',
+                    options: '[\
                         {value: "SYNC", label: "SYNC"},\
                         {value: "ASYNC", label: "ASYNC"},\
                         {value: "NONE", label: "NONE"}\
                     ]',
-                    'Rebalance modes\
-                    <ul>\
-                        <li>Synchronous - in this mode distributed caches will 
not start until all necessary data is loaded from other available grid 
nodes</li>\
-                        <li>Asynchronous - in this mode distributed caches 
will start immediately and will load all necessary data from other available 
grid nodes in the background</li>\
-                        <li>None - in this mode no rebalancing will take place 
which means that caches will be either loaded on demand from persistent store 
whenever data is accessed, or will be populated explicitly</li>\
-                    </ul>')
+                    tip: 'Rebalance modes\
+                        <ul>\
+                            <li>Synchronous - in this mode distributed caches 
will not start until all necessary data is loaded from other available grid 
nodes</li>\
+                            <li>Asynchronous - in this mode distributed caches 
will start immediately and will load all necessary data from other available 
grid nodes in the background</li>\
+                            <li>None - in this mode no rebalancing will take 
place which means that caches will be either loaded on demand from persistent 
store whenever data is accessed, or will be populated explicitly</li>\
+                        </ul>'
+                })
             .pc-form-grid-col-30
-                +number('Batch size:', `${model}.rebalanceBatchSize`, 
'"rebalanceBatchSize"', 'true', '512 * 1024', '1',
-                    'Size (in bytes) to be loaded within a single rebalance 
message<br/>\
-                    Rebalancing algorithm will split total data set on every 
node into multiple batches prior to sending data')
+                +form-field__number({
+                    label: 'Batch size:',
+                    model: `${model}.rebalanceBatchSize`,
+                    name: '"rebalanceBatchSize"',
+                    placeholder: '512 * 1024',
+                    min: '1',
+                    tip: 'Size (in bytes) to be loaded within a single 
rebalance message<br/>\
+                          Rebalancing algorithm will split total data set on 
every node into multiple batches prior to sending data'
+                })
             .pc-form-grid-col-30
-                +number('Batches prefetch count:', 
`${model}.rebalanceBatchesPrefetchCount`, '"rebalanceBatchesPrefetchCount"', 
'true', '2', '1',
-                    'Number of batches generated by supply node at rebalancing 
start')
+                +form-field__number({
+                    label: 'Batches prefetch count:',
+                    model: `${model}.rebalanceBatchesPrefetchCount`,
+                    name: '"rebalanceBatchesPrefetchCount"',
+                    placeholder: '2',
+                    min: '1',
+                    tip: 'Number of batches generated by supply node at 
rebalancing start'
+                })
             .pc-form-grid-col-30
-                +number('Order:', `${model}.rebalanceOrder`, 
'"rebalanceOrder"', 'true', '0', Number.MIN_SAFE_INTEGER,
-                    'If cache rebalance order is positive, rebalancing for 
this cache will be started only when rebalancing for all caches with smaller 
rebalance order (except caches with rebalance order 0) will be completed')
+                +form-field__number({
+                    label: 'Order:',
+                    model: `${model}.rebalanceOrder`,
+                    name: '"rebalanceOrder"',
+                    placeholder: '0',
+                    min: 'Number.MIN_SAFE_INTEGER',
+                    tip: 'If cache rebalance order is positive, rebalancing 
for this cache will be started only when rebalancing for all caches with 
smaller rebalance order (except caches with rebalance order 0) will be 
completed'
+                })
             .pc-form-grid-col-20
-                +number('Delay:', `${model}.rebalanceDelay`, 
'"rebalanceDelay"', 'true', '0', '0',
-                    'Delay in milliseconds upon a node joining or leaving 
topology (or crash) after which rebalancing should be started automatically')
+                +form-field__number({
+                    label: 'Delay:',
+                    model: `${model}.rebalanceDelay`,
+                    name: '"rebalanceDelay"',
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Delay in milliseconds upon a node joining or leaving 
topology (or crash) after which rebalancing should be started automatically'
+                })
             .pc-form-grid-col-20
-                +number('Timeout:', `${model}.rebalanceTimeout`, 
'"rebalanceTimeout"', 'true', '10000', '0',
-                    'Rebalance timeout in milliseconds')
+                +form-field__number({
+                    label: 'Timeout:',
+                    model: `${model}.rebalanceTimeout`,
+                    name: '"rebalanceTimeout"',
+                    placeholder: '10000',
+                    min: '0',
+                    tip: 'Rebalance timeout in milliseconds'
+                })
             .pc-form-grid-col-20
-                +number('Throttle:', `${model}.rebalanceThrottle`, 
'"rebalanceThrottle"', 'true', '0', '0',
-                    'Time in milliseconds to wait between rebalance messages 
to avoid overloading of CPU or network')
+                +form-field__number({
+                    label: 'Throttle:',
+                    model: `${model}.rebalanceThrottle`,
+                    name: '"rebalanceThrottle"',
+                    placeholder: '0',
+                    min: '0',
+                    tip: 'Time in milliseconds to wait between rebalance 
messages to avoid overloading of CPU or network'
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'cacheRebalance')

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/statistics.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/statistics.pug
 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/statistics.pug
index bf58354..a6c55ab 100644
--- 
a/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/statistics.pug
+++ 
b/modules/web-console/frontend/app/components/page-configure-advanced/components/cache-edit-form/templates/statistics.pug
@@ -25,10 +25,19 @@ 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
-                +checkbox('Statistics enabled', `${model}.statisticsEnabled`, 
'"statisticsEnabled"', 'Flag indicating whether statistics gathering is enabled 
on this cache')
+                +form-field__checkbox({
+                    label: 'Statistics enabled',
+                    model: `${model}.statisticsEnabled`,
+                    name: '"statisticsEnabled"',
+                    tip: 'Flag indicating whether statistics gathering is 
enabled on this cache'
+                })
             .pc-form-grid-col-60
-                +checkbox('Management enabled', `${model}.managementEnabled`, 
'"managementEnabled"',
-                'Flag indicating whether management is enabled on this 
cache<br/>\
-                If enabled the CacheMXBean for each cache is registered in the 
platform MBean server')
+                +form-field__checkbox({
+                    label: 'Management enabled',
+                    model: `${model}.managementEnabled`,
+                    name: '"managementEnabled"',
+                    tip: 'Flag indicating whether management is enabled on 
this cache<br/>\
+                         If enabled the CacheMXBean for each cache is 
registered in the platform MBean server'
+                })
         .pca-form-column-6
             +preview-xml-java(model, 'cacheStatistics')

Reply via email to