You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by ak...@apache.org on 2018/04/05 07:09:41 UTC

[7/8] ignite git commit: IGNITE-7894 Web Console: Refactored panel-collapsible to component.

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/caches/general.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/caches/general.pug b/modules/web-console/frontend/app/modules/states/configuration/caches/general.pug
index df4d3f8..29977be 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/caches/general.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/caches/general.pug
@@ -19,99 +19,95 @@ include /app/helpers/jade/mixins
 -var form = 'general'
 -var model = '$ctrl.clonedCache'
 
-.pca-panel(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title General
-        .pca-panel-heading-description
-            | Common cache configuration. 
-            a.link-success(href="https://apacheignite.readme.io/docs/data-grid" target="_blank") More info
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id='general')
-        .pca-panel-body.pca-form-row
-            .pca-form-column-6.pc-form-grid-row
-                
-                .pc-form-grid-col-60
-                    +sane-ignite-form-field-text({
-                        label: 'Name:',
-                        model: `${model}.name`,
-                        name: '"cacheName"',
-                        placeholder: 'Input name',
-                        required: true
-                    })(
-                        ignite-unique='$ctrl.caches'
-                        ignite-unique-property='name'
-                        ignite-unique-skip=`["_id", ${model}]`
-                    )
-                        +unique-feedback(`${model}.name`, 'Cache name should be unique')
-                .pc-form-grid-col-60
-                    +sane-ignite-form-field-dropdown({
-                        label: 'Domain models:',
-                        model: `${model}.domains`,
-                        name: '"domains"',
-                        multiple: true,
-                        placeholder: 'Choose domain models',
-                        placeholderEmpty: 'No valid domain models configured',
-                        options: '$ctrl.modelsMenu',
-                        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.')
-                .pc-form-grid-col-30
-                    +cacheMode('Mode:', `${model}.cacheMode`, '"cacheMode"', 'PARTITIONED')
+panel-collapsible(opened=`::true` ng-form=form)
+    panel-title General
+    panel-description
+        | 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
+            .pc-form-grid-col-60
+                +sane-ignite-form-field-text({
+                    label: 'Name:',
+                    model: `${model}.name`,
+                    name: '"cacheName"',
+                    placeholder: 'Input name',
+                    required: true
+                })(
+                    ignite-unique='$ctrl.caches'
+                    ignite-unique-property='name'
+                    ignite-unique-skip=`["_id", ${model}]`
+                )
+                    +unique-feedback(`${model}.name`, 'Cache name should be unique')
+            .pc-form-grid-col-60
+                +sane-ignite-form-field-dropdown({
+                    label: 'Domain models:',
+                    model: `${model}.domains`,
+                    name: '"domains"',
+                    multiple: true,
+                    placeholder: 'Choose domain models',
+                    placeholderEmpty: 'No valid domain models configured',
+                    options: '$ctrl.modelsMenu',
+                    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.')
+            .pc-form-grid-col-30
+                +cacheMode('Mode:', `${model}.cacheMode`, '"cacheMode"', '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>')
-                .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')
-                //- 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',
+            .pc-form-grid-col-30
+                +dropdown('Atomicity:', `${model}.atomicityMode`, '"atomicityMode"', 'true', 'ATOMIC',
                     '[\
-                        {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"}\
+                        {value: "ATOMIC", label: "ATOMIC"},\
+                        {value: "TRANSACTIONAL", label: "TRANSACTIONAL"}\
                     ]',
-                    'Partition loss policies:\
+                    'Atomicity:\
                     <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>\
+                        <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-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)')
-                .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')
-                .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')
+            .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')
+            //- 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>')
+            .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)')
+            .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')
+            .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')
 
-            .pca-form-column-6
-                +preview-xml-java(model, 'cacheGeneral')
+        .pca-form-column-6
+            +preview-xml-java(model, 'cacheGeneral')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/caches/memory.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/caches/memory.pug b/modules/web-console/frontend/app/modules/states/configuration/caches/memory.pug
index bcb8cda..10eb488 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/caches/memory.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/caches/memory.pug
@@ -19,143 +19,140 @@ include /app/helpers/jade/mixins
 -var form = 'memory'
 -var model = '$ctrl.clonedCache'
 
-.pca-panel(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Memory
-        .pca-panel-heading-description
-            | Cache memory settings. 
-            a.link-success(
-                href="https://apacheignite.readme.io/v1.9/docs/off-heap-memory"
-                target="_blank"
-                ng-show='$ctrl.available(["1.0.0", "2.0.0"])'
-            ) More info
-            a.link-success(
-                href="https://apacheignite.readme.io/docs/evictions"
-                target="_blank"
-                ng-show='$ctrl.available("2.0.0")'
-            ) More info
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.pca-form-row(ng-if=`ui.isPanelLoaded('${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')
+panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
+    panel-title Memory
+    panel-description
+        | Cache memory settings. 
+        a.link-success(
+            href="https://apacheignite.readme.io/v1.9/docs/off-heap-memory"
+            target="_blank"
+            ng-show='$ctrl.available(["1.0.0", "2.0.0"])'
+        ) More info
+        a.link-success(
+            href="https://apacheignite.readme.io/docs/evictions"
+            target="_blank"
+            ng-show='$ctrl.available("2.0.0")'
+        ) More info
+    panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${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')
 
-                //- 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')
+            //- 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')
 
-                //- 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')
+            //- 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')
 
-                //- Removed in ignite 2.0
-                .pc-form-grid-col-60(ng-if-start='$ctrl.available(["1.0.0", "2.0.0"])')
-                    +sane-ignite-form-field-dropdown({
-                        label: 'Mode:',
-                        model: `${model}.memoryMode`,
-                        name: '"memoryMode"',
-                        placeholder: '{{ ::$ctrl.Caches.memoryMode.default }}',
-                        options: '::$ctrl.Caches.memoryModes',
-                        tip: `Memory modes control whether value is stored in on-heap memory, off-heap memory, or swap space
-                        <ul>
-                            <li>
-                                ONHEAP_TIERED - entries are cached on heap memory first<br/>
-                                <ul>
-                                    <li>
-                                        If offheap memory is enabled and eviction policy evicts an entry from heap memory, entry will be moved to offheap memory<br/>
-                                        If offheap memory is disabled, then entry is simply discarded
-                                    </li>
-                                    <li>
-                                        If swap space is enabled and offheap memory fills up, then entry will be evicted into swap space<br/>
-                                        If swap space is disabled, then entry will be discarded. If swap is enabled and offheap memory is disabled, then entry will be evicted directly from heap memory into swap
-                                    </li>
-                                </ul>
-                            </li>
-                            <li>
-                                OFFHEAP_TIERED - works the same as ONHEAP_TIERED, except that entries never end up in heap memory and get stored in offheap memory right away<br/>
-                                Entries get cached in offheap memory first and then get evicted to swap, if one is configured
-                            </li>
-                            <li>
-                                OFFHEAP_VALUES - entry keys will be stored on heap memory, and values will be stored in offheap memory<br/>
-                                Note that in this mode entries can be evicted only to swap
-                            </li>
-                        </ul>`
-                    })(
-                        ui-validate=`{
-                            offheapAndDomains: '$ctrl.Caches.memoryMode.offheapAndDomains(${model})'
-                        }`
-                        ui-validate-watch=`"${model}.domains.length"`
-                        ng-model-options='{allowInvalid: true}'
-                    )
-                        +form-field-feedback(null, 'offheapAndDomains', 'Query indexing could not be enabled while values are stored off-heap')
-                .pc-form-grid-col-60(ng-if=`${model}.memoryMode !== 'OFFHEAP_VALUES'`)
-                    +sane-ignite-form-field-dropdown({
-                        label: 'Off-heap memory:',
-                        model: `${model}.offHeapMode`,
-                        name: '"offHeapMode"',
-                        required: `$ctrl.Caches.offHeapMode.required(${model})`,
-                        placeholder: '{{::$ctrl.Caches.offHeapMode.default}}',
-                        options: '{{::$ctrl.Caches.offHeapModes}}',
-                        tip: `Off-heap storage mode
-                        <ul>
-                            <li>Disabled - Off-heap storage is disabled</li>
-                            <li>Limited - Off-heap storage has limited size</li>
-                            <li>Unlimited - Off-heap storage grow infinitely (it is up to user to properly add and remove entries from cache to ensure that off-heap storage does not grow infinitely)</li>
-                        </ul>`
-                    })(
-                        ng-change=`$ctrl.Caches.offHeapMode.onChange(${model})`
-                        ui-validate=`{
-                            offheapDisabled: '$ctrl.Caches.offHeapMode.offheapDisabled(${model})'
-                        }`
-                        ui-validate-watch=`'${model}.memoryMode'`
-                        ng-model-options='{allowInvalid: true}'
-                    )
-                        +form-field-feedback(null, 'offheapDisabled', 'Off-heap storage can\'t be disabled when memory mode is OFFHEAP_TIERED')
-                .pc-form-grid-col-60(
-                    ng-if=`${model}.offHeapMode === 1 && ${model}.memoryMode !== 'OFFHEAP_VALUES'`
-                    ng-if-end
+            //- Removed in ignite 2.0
+            .pc-form-grid-col-60(ng-if-start='$ctrl.available(["1.0.0", "2.0.0"])')
+                +sane-ignite-form-field-dropdown({
+                    label: 'Mode:',
+                    model: `${model}.memoryMode`,
+                    name: '"memoryMode"',
+                    placeholder: '{{ ::$ctrl.Caches.memoryMode.default }}',
+                    options: '::$ctrl.Caches.memoryModes',
+                    tip: `Memory modes control whether value is stored in on-heap memory, off-heap memory, or swap space
+                    <ul>
+                        <li>
+                            ONHEAP_TIERED - entries are cached on heap memory first<br/>
+                            <ul>
+                                <li>
+                                    If offheap memory is enabled and eviction policy evicts an entry from heap memory, entry will be moved to offheap memory<br/>
+                                    If offheap memory is disabled, then entry is simply discarded
+                                </li>
+                                <li>
+                                    If swap space is enabled and offheap memory fills up, then entry will be evicted into swap space<br/>
+                                    If swap space is disabled, then entry will be discarded. If swap is enabled and offheap memory is disabled, then entry will be evicted directly from heap memory into swap
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            OFFHEAP_TIERED - works the same as ONHEAP_TIERED, except that entries never end up in heap memory and get stored in offheap memory right away<br/>
+                            Entries get cached in offheap memory first and then get evicted to swap, if one is configured
+                        </li>
+                        <li>
+                            OFFHEAP_VALUES - entry keys will be stored on heap memory, and values will be stored in offheap memory<br/>
+                            Note that in this mode entries can be evicted only to swap
+                        </li>
+                    </ul>`
+                })(
+                    ui-validate=`{
+                        offheapAndDomains: '$ctrl.Caches.memoryMode.offheapAndDomains(${model})'
+                    }`
+                    ui-validate-watch=`"${model}.domains.length"`
+                    ng-model-options='{allowInvalid: true}'
                 )
-                    pc-form-field-size(
-                        label='Off-heap memory max size:'
-                        ng-model=`${model}.offHeapMaxMemory`
-                        name='offHeapMaxMemory'
-                        placeholder='Enter off-heap memory size'
-                        min='{{ ::$ctrl.Caches.offHeapMaxMemory.min }}'
-                        tip='Maximum amount of memory available to off-heap storage'
-                        size-scale-label='mb'
-                        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-feedback(null, 'offheapAndDomains', 'Query indexing could not be enabled while values are stored off-heap')
+            .pc-form-grid-col-60(ng-if=`${model}.memoryMode !== 'OFFHEAP_VALUES'`)
+                +sane-ignite-form-field-dropdown({
+                    label: 'Off-heap memory:',
+                    model: `${model}.offHeapMode`,
+                    name: '"offHeapMode"',
+                    required: `$ctrl.Caches.offHeapMode.required(${model})`,
+                    placeholder: '{{::$ctrl.Caches.offHeapMode.default}}',
+                    options: '{{::$ctrl.Caches.offHeapModes}}',
+                    tip: `Off-heap storage mode
+                    <ul>
+                        <li>Disabled - Off-heap storage is disabled</li>
+                        <li>Limited - Off-heap storage has limited size</li>
+                        <li>Unlimited - Off-heap storage grow infinitely (it is up to user to properly add and remove entries from cache to ensure that off-heap storage does not grow infinitely)</li>
+                    </ul>`
+                })(
+                    ng-change=`$ctrl.Caches.offHeapMode.onChange(${model})`
+                    ui-validate=`{
+                        offheapDisabled: '$ctrl.Caches.offHeapMode.offheapDisabled(${model})'
+                    }`
+                    ui-validate-watch=`'${model}.memoryMode'`
+                    ng-model-options='{allowInvalid: true}'
+                )
+                    +form-field-feedback(null, 'offheapDisabled', 'Off-heap storage can\'t be disabled when memory mode is OFFHEAP_TIERED')
+            .pc-form-grid-col-60(
+                ng-if=`${model}.offHeapMode === 1 && ${model}.memoryMode !== 'OFFHEAP_VALUES'`
+                ng-if-end
+            )
+                pc-form-field-size(
+                    label='Off-heap memory max size:'
+                    ng-model=`${model}.offHeapMaxMemory`
+                    name='offHeapMaxMemory'
+                    placeholder='Enter off-heap memory size'
+                    min='{{ ::$ctrl.Caches.offHeapMaxMemory.min }}'
+                    tip='Maximum amount of memory available to off-heap storage'
+                    size-scale-label='mb'
+                    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>')
 
-                //- 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')
+            //- 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')
 
-                //- 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.')
-                .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')
+            //- 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.')
+            .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')
 
-            .pca-form-column-6
-                +preview-xml-java(model, 'cacheMemory')
+        .pca-form-column-6
+            +preview-xml-java(model, 'cacheMemory')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-client.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-client.pug b/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-client.pug
index ff51361..2b6705d 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-client.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-client.pug
@@ -19,31 +19,32 @@ include /app/helpers/jade/mixins
 -var form = 'clientNearCache'
 -var model = '$ctrl.clonedCache'
 
-.pca-panel(ng-form=form novalidate ng-show=`${model}.cacheMode === 'PARTITIONED'`)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Near cache on client node
-        .pca-panel-heading-description
-            | 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.
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
-            .pca-form-column-6.pc-form-grid-row
-                -var nearCfg = `${model}.clientNearConfiguration`
-                -var enabled = `${nearCfg}.enabled`
+panel-collapsible(
+    ng-form=form
+    on-open=`ui.loadPanel('${form}')`
+    ng-show=`${model}.cacheMode === 'PARTITIONED'`
+)
+    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. 
+        | 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
+            -var nearCfg = `${model}.clientNearConfiguration`
+            -var enabled = `${nearCfg}.enabled`
 
-                .pc-form-grid-col-60
-                    +checkbox('Enabled', enabled, '"clientNearEnabled"', '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>')
-            .pca-form-column-6
-                +preview-xml-java(model, 'cacheNearClient')
+            .pc-form-grid-col-60
+                +checkbox('Enabled', enabled, '"clientNearEnabled"', '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>')
+        .pca-form-column-6
+            +preview-xml-java(model, 'cacheNearClient')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-server.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-server.pug b/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-server.pug
index 40f7024..3a91fd2 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-server.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/caches/near-cache-server.pug
@@ -19,32 +19,33 @@ include /app/helpers/jade/mixins
 -var form = 'serverNearCache'
 -var model = '$ctrl.clonedCache'
 
-.pca-panel(ng-form=form novalidate ng-show=`${model}.cacheMode === 'PARTITIONED'`)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Near cache on server node
-        .pca-panel-heading-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. 
-            a.link-success(href="https://apacheignite.readme.io/docs/near-caches" target="_blank") More info
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
-            .pca-form-column-6.pc-form-grid-row
-                -var nearCfg = `${model}.nearConfiguration`
-                -var enabled = `${nearCfg}.enabled`
+panel-collapsible(
+    ng-form=form
+    on-open=`ui.loadPanel('${form}')`
+    ng-show=`${model}.cacheMode === 'PARTITIONED'`
+)
+    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. 
+        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
+            -var nearCfg = `${model}.nearConfiguration`
+            -var enabled = `${nearCfg}.enabled`
 
-                .pc-form-grid-col-60
-                    +checkbox('Enabled', enabled, '"nearCacheEnabled"', '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>')
-            .pca-form-column-6
-                +preview-xml-java(model, 'cacheNearServer')
+            .pc-form-grid-col-60
+                +checkbox('Enabled', enabled, '"nearCacheEnabled"', '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>')
+        .pca-form-column-6
+            +preview-xml-java(model, 'cacheNearServer')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/caches/node-filter.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/caches/node-filter.pug b/modules/web-console/frontend/app/modules/states/configuration/caches/node-filter.pug
index c40ea59..11938f9 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/caches/node-filter.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/caches/node-filter.pug
@@ -23,35 +23,31 @@ include /app/helpers/jade/mixins
 -var igfsFilter = nodeFilterKind + ' === "IGFS"'
 -var customFilter = nodeFilterKind + ' === "Custom"'
 
-.pca-panel(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title(id='nodeFilter-title') Node filter
-        .pca-panel-heading-description
-            | Determines on what nodes the cache should be started.
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.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')
-                .pc-form-grid-col-60(
-                    ng-if=igfsFilter
+panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
+    panel-title Node filter
+    panel-description Determines on what nodes the cache should be started.
+    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')
+            .pc-form-grid-col-60(
+                ng-if=igfsFilter
+            )
+                +sane-ignite-form-field-dropdown({
+                    label: 'IGFS:',
+                    model: `${nodeFilter}.IGFS.igfs`,
+                    name: '"igfsNodeFilter"',
+                    required: true,
+                    placeholder: 'Choose IGFS',
+                    placeholderEmpty: 'No IGFS configured',
+                    options: '$ctrl.igfssMenu',
+                    tip: 'Select IGFS to filter nodes'
+                })(
+                    pc-is-in-collection='$ctrl.igfsIDs'
                 )
-                    +sane-ignite-form-field-dropdown({
-                        label: 'IGFS:',
-                        model: `${nodeFilter}.IGFS.igfs`,
-                        name: '"igfsNodeFilter"',
-                        required: true,
-                        placeholder: 'Choose IGFS',
-                        placeholderEmpty: 'No IGFS configured',
-                        options: '$ctrl.igfssMenu',
-                        tip: 'Select IGFS to filter nodes'
-                    })(
-                        pc-is-in-collection='$ctrl.igfsIDs'
-                    )
-                        +form-field-feedback(_, 'isInCollection', `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)
-            .pca-form-column-6
-                +preview-xml-java(model, 'cacheNodeFilter', 'igfss')
+                    +form-field-feedback(_, 'isInCollection', `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)
+        .pca-form-column-6
+            +preview-xml-java(model, 'cacheNodeFilter', 'igfss')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/caches/query.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/caches/query.pug b/modules/web-console/frontend/app/modules/states/configuration/caches/query.pug
index 471b011..20869f5 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/caches/query.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/caches/query.pug
@@ -19,99 +19,96 @@ include /app/helpers/jade/mixins
 -var form = 'query'
 -var model = '$ctrl.clonedCache'
 
-.pca-panel(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Queries & Indexing
-        .pca-panel-heading-description
-            | Cache queries settings. 
-            a.link-success(href="https://apacheignite-sql.readme.io/docs/select" target="_blank") More info
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.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>')
+panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
+    panel-title Queries & Indexing
+    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>')
 
-                //- 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')
+            //- 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')
 
-                //- 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')
-                .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')
-                .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!'
+            //- 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')
+            .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')
+            .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
-                                list-editable-cols=`::[{
-                                    name: 'SQL functions:',
-                                    tip: 'Collections of classes with user-defined functions for SQL queries'
-                                }]`
-                            )
-                                list-editable-item-view {{ $item }}
+                        list-editable(
+                            ng-model=items
+                            list-editable-cols=`::[{
+                                name: 'SQL functions:',
+                                tip: 'Collections of classes with user-defined functions for SQL queries'
+                            }]`
+                        )
+                            list-editable-item-view {{ $item }}
 
-                                list-editable-item-edit
-                                    +list-java-class-field('SQL function', '$item', '"sqlFunction"', items)
-                                        +unique-feedback('"sqlFunction"', uniqueTip)
+                            list-editable-item-edit
+                                +list-java-class-field('SQL function', '$item', '"sqlFunction"', items)
+                                    +unique-feedback('"sqlFunction"', uniqueTip)
 
-                                list-editable-no-items
-                                    list-editable-add-item-button(
-                                        add-item=`$editLast((${items} = ${items} || []).push(""))`
-                                        label-single='SQL function'
-                                        label-multiple='SQL functions'
-                                    )
+                            list-editable-no-items
+                                list-editable-add-item-button(
+                                    add-item=`$editLast((${items} = ${items} || []).push(""))`
+                                    label-single='SQL function'
+                                    label-multiple='SQL functions'
+                                )
 
-                    - var form = '$parent.form'
-                    +caches-query-list-sql-functions
-                    - var form = 'query'
+                - var form = '$parent.form'
+                +caches-query-list-sql-functions
+                - var form = 'query'
 
-                //- 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')
+            //- 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')
 
-                .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.')
+            .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.')
 
-                //- 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')
-                .pc-form-grid-col-30(ng-if-end)
-                    +sane-ignite-form-field-number({
-                        label: 'SQL index max inline size:',
-                        model: `${model}.sqlIndexMaxInlineSize`,
-                        name: '"sqlIndexMaxInlineSize"',
-                        placeholder: '-1',
-                        min: '-1',
-                        tip: 'Maximum inline size for sql indexes'
-                    })
+            //- 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')
+            .pc-form-grid-col-30(ng-if-end)
+                +sane-ignite-form-field-number({
+                    label: 'SQL index max inline size:',
+                    model: `${model}.sqlIndexMaxInlineSize`,
+                    name: '"sqlIndexMaxInlineSize"',
+                    placeholder: '-1',
+                    min: '-1',
+                    tip: 'Maximum inline size for sql indexes'
+                })
 
-            .pca-form-column-6
-                +preview-xml-java(model, 'cacheQuery', 'domains')
+        .pca-form-column-6
+            +preview-xml-java(model, 'cacheQuery', 'domains')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/caches/rebalance.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/caches/rebalance.pug b/modules/web-console/frontend/app/modules/states/configuration/caches/rebalance.pug
index 79ed803e..7563435 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/caches/rebalance.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/caches/rebalance.pug
@@ -19,47 +19,48 @@ include /app/helpers/jade/mixins
 -var form = 'rebalance'
 -var model = '$ctrl.clonedCache'
 
-.pca-panel(ng-form=form novalidate ng-hide=`${model}.cacheMode === "LOCAL"`)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Rebalance
-        .pca-panel-heading-description
-            | Cache rebalance settings. 
-            a.link-success(href="https://apacheignite.readme.io/docs/rebalancing" target="_blank") More info
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.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',
-                        '[\
-                            {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>')
-                .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')
-                .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')
-                .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')
-                .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')
-                .pc-form-grid-col-20
-                    +number('Timeout:', `${model}.rebalanceTimeout`, '"rebalanceTimeout"', 'true', '10000', '0',
-                        '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')
-            .pca-form-column-6
-                +preview-xml-java(model, 'cacheRebalance')
+panel-collapsible(
+    ng-form=form
+    on-open=`ui.loadPanel('${form}')`
+    ng-hide=`${model}.cacheMode === "LOCAL"`
+)
+    panel-title Rebalance
+    panel-description
+        | 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',
+                    '[\
+                        {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>')
+            .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')
+            .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')
+            .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')
+            .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')
+            .pc-form-grid-col-20
+                +number('Timeout:', `${model}.rebalanceTimeout`, '"rebalanceTimeout"', 'true', '10000', '0',
+                    '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')
+        .pca-form-column-6
+            +preview-xml-java(model, 'cacheRebalance')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/caches/statistics.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/caches/statistics.pug b/modules/web-console/frontend/app/modules/states/configuration/caches/statistics.pug
index 676234f..bf58354 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/caches/statistics.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/caches/statistics.pug
@@ -19,20 +19,16 @@ include /app/helpers/jade/mixins
 -var form = 'statistics'
 -var model = '$ctrl.clonedCache'
 
-.pca-panel(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Statistics
-        .pca-panel-heading-description
-            | Cache statistics and management settings.
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.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')
-                .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')
-            .pca-form-column-6
-                +preview-xml-java(model, 'cacheStatistics')
+panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
+    panel-title Statistics
+    panel-description Cache statistics and management settings.
+    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')
+            .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')
+        .pca-form-column-6
+            +preview-xml-java(model, 'cacheStatistics')