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

[2/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/clusters/swap.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/clusters/swap.pug b/modules/web-console/frontend/app/modules/states/configuration/clusters/swap.pug
index e44e6a1..ef73ab9 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/clusters/swap.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/clusters/swap.pug
@@ -21,53 +21,54 @@ include /app/helpers/jade/mixins
 -var swapModel = model + '.swapSpaceSpi'
 -var fileSwapModel = swapModel + '.FileSwapSpaceSpi'
 
-.pca-panel.pca-panel-default(ng-show='$ctrl.available(["1.0.0", "2.0.0"])' ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Swap
-        .pca-panel-heading-description
-            | Settings for overflow data to disk if it cannot fit in memory. 
-            | #[a.link-success(href="https://apacheignite.readme.io/v1.9/docs/off-heap-memory#swap-space" target="_blank") More info]
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body(ng-if=`$ctrl.available(["1.0.0", "2.0.0"]) && ui.isPanelLoaded('${form}')`).pca-form-row
-            .pca-form-column-6.pc-form-grid-row
+panel-collapsible(
+    ng-form=form
+    on-open=`ui.loadPanel('${form}')`
+    ng-show='$ctrl.available(["1.0.0", "2.0.0"])'
+)
+    panel-title Swap
+    panel-description
+        | Settings for overflow data to disk if it cannot fit in memory. 
+        | #[a.link-success(href="https://apacheignite.readme.io/v1.9/docs/off-heap-memory#swap-space" target="_blank") More info]
+    panel-content.pca-form-row(ng-if=`$ctrl.available(["1.0.0", "2.0.0"]) && ui.isPanelLoaded('${form}')`)
+        .pca-form-column-6.pc-form-grid-row
+            .pc-form-grid-col-60
+                +dropdown('Swap space SPI:', `${swapModel}.kind`, '"swapSpaceSpi"', 'true', 'Choose swap SPI',
+                    '::$ctrl.Clusters.swapSpaceSpis',
+                    'Provides a mechanism in grid for storing data on disk<br/>\
+                    Ignite cache uses swap space to overflow data to disk if it cannot fit in memory\
+                    <ul>\
+                        <li>File-based swap - File-based swap space SPI implementation which holds keys in memory</li>\
+                        <li>Not set - File-based swap space SPI with default configuration when it needed</li>\
+                    </ul>')
+            .pc-form-group.pc-form-grid-row(ng-show=`${swapModel}.kind`)
                 .pc-form-grid-col-60
-                    +dropdown('Swap space SPI:', `${swapModel}.kind`, '"swapSpaceSpi"', 'true', 'Choose swap SPI',
-                        '::$ctrl.Clusters.swapSpaceSpis',
-                        'Provides a mechanism in grid for storing data on disk<br/>\
-                        Ignite cache uses swap space to overflow data to disk if it cannot fit in memory\
-                        <ul>\
-                            <li>File-based swap - File-based swap space SPI implementation which holds keys in memory</li>\
-                            <li>Not set - File-based swap space SPI with default configuration when it needed</li>\
-                        </ul>')
-                .pc-form-group.pc-form-grid-row(ng-show=`${swapModel}.kind`)
-                    .pc-form-grid-col-60
-                        +text('Base directory:', `${fileSwapModel}.baseDirectory`, '"baseDirectory"', 'false', 'swapspace',
-                            'Base directory where to write files')
-                    .pc-form-grid-col-30
-                        +sane-ignite-form-field-number({
-                            label: 'Read stripe size:',
-                            model: `${fileSwapModel}.readStripesNumber`,
-                            name: '"readStripesNumber"',
-                            placeholder: '{{ ::$ctrl.Clusters.swapSpaceSpi.readStripesNumber.default }}',
-                            tip: 'Read stripe size defines number of file channels to be used concurrently'
-                        })(
-                            ui-validate=`{
-                                powerOfTwo: '$ctrl.Clusters.swapSpaceSpi.readStripesNumber.customValidators.powerOfTwo($value)'
-                            }`
-                        )
-                            +form-field-feedback('"readStripesNumber"', 'powerOfTwo', 'Read stripe size must be positive and power of two')
-                    .pc-form-grid-col-30
-                        +number-min-max-step('Maximum sparsity:', `${fileSwapModel}.maximumSparsity`, '"maximumSparsity"', 'true', '0.5', '0', '0.999', '0.05',
-                            'This property defines maximum acceptable wasted file space to whole file size ratio<br/>\
-                            When this ratio becomes higher than specified number compacting thread starts working')
-                    .pc-form-grid-col-30
-                        +number('Max write queue size:', `${fileSwapModel}.maxWriteQueueSize`, '"maxWriteQueueSize"', 'true', '1024 * 1024', '0',
-                            'Max write queue size in bytes<br/>\
-                            If there are more values are waiting for being written to disk then specified size, SPI will block on store operation')
-                    .pc-form-grid-col-30
-                        +number('Write buffer size:', `${fileSwapModel}.writeBufferSize`, '"writeBufferSize"', 'true', '64 * 1024', '0',
-                            'Write buffer size in bytes<br/>\
-                            Write to disk occurs only when this buffer is full')
-            .pca-form-column-6
-                +preview-xml-java(model, 'clusterSwap')
+                    +text('Base directory:', `${fileSwapModel}.baseDirectory`, '"baseDirectory"', 'false', 'swapspace',
+                        'Base directory where to write files')
+                .pc-form-grid-col-30
+                    +sane-ignite-form-field-number({
+                        label: 'Read stripe size:',
+                        model: `${fileSwapModel}.readStripesNumber`,
+                        name: '"readStripesNumber"',
+                        placeholder: '{{ ::$ctrl.Clusters.swapSpaceSpi.readStripesNumber.default }}',
+                        tip: 'Read stripe size defines number of file channels to be used concurrently'
+                    })(
+                        ui-validate=`{
+                            powerOfTwo: '$ctrl.Clusters.swapSpaceSpi.readStripesNumber.customValidators.powerOfTwo($value)'
+                        }`
+                    )
+                        +form-field-feedback('"readStripesNumber"', 'powerOfTwo', 'Read stripe size must be positive and power of two')
+                .pc-form-grid-col-30
+                    +number-min-max-step('Maximum sparsity:', `${fileSwapModel}.maximumSparsity`, '"maximumSparsity"', 'true', '0.5', '0', '0.999', '0.05',
+                        'This property defines maximum acceptable wasted file space to whole file size ratio<br/>\
+                        When this ratio becomes higher than specified number compacting thread starts working')
+                .pc-form-grid-col-30
+                    +number('Max write queue size:', `${fileSwapModel}.maxWriteQueueSize`, '"maxWriteQueueSize"', 'true', '1024 * 1024', '0',
+                        'Max write queue size in bytes<br/>\
+                        If there are more values are waiting for being written to disk then specified size, SPI will block on store operation')
+                .pc-form-grid-col-30
+                    +number('Write buffer size:', `${fileSwapModel}.writeBufferSize`, '"writeBufferSize"', 'true', '64 * 1024', '0',
+                        'Write buffer size in bytes<br/>\
+                        Write to disk occurs only when this buffer is full')
+        .pca-form-column-6
+            +preview-xml-java(model, 'clusterSwap')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/clusters/thread.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/clusters/thread.pug b/modules/web-console/frontend/app/modules/states/configuration/clusters/thread.pug
index 4efa987..ebe3bcd 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/clusters/thread.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/clusters/thread.pug
@@ -20,129 +20,125 @@ include /app/helpers/jade/mixins
 -var model = '$ctrl.clonedCluster'
 -var executors = model + '.executorConfiguration'
 
-.pca-panel.pca-panel-default(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Thread pools size
-        .pca-panel-heading-description
-            | Settings for node thread pools.
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body(ng-if=`ui.isPanelLoaded('${form}')`).pca-form-row
-            .pca-form-column-6.pc-form-grid-row
-                .pc-form-grid-col-30
-                    +number('Public:', model + '.publicThreadPoolSize', '"publicThreadPoolSize"', 'true', 'max(8, availableProcessors) * 2', '1',
-                        'Thread pool that is in charge of processing ComputeJob, GridJobs and user messages sent to node')
-                .pc-form-grid-col-30
-                    +sane-ignite-form-field-number({
-                        label: 'System:',
-                        model: `${model}.systemThreadPoolSize`,
-                        name: '"systemThreadPoolSize"',
-                        placeholder: '{{ ::$ctrl.Clusters.systemThreadPoolSize.default }}',
-                        min: '{{ ::$ctrl.Clusters.systemThreadPoolSize.min }}',
-                        tip: 'Thread pool that is in charge of processing internal system messages'
-                    })
-                .pc-form-grid-col-30
-                    +number('Service:', model + '.serviceThreadPoolSize', '"serviceThreadPoolSize"', 'true', 'max(8, availableProcessors) * 2', '1',
-                        'Thread pool that is in charge of processing proxy invocation')
-                .pc-form-grid-col-30
-                    +number('Management:', model + '.managementThreadPoolSize', '"managementThreadPoolSize"', 'true', '4', '1',
-                        'Thread pool that is in charge of processing internal and Visor ComputeJob, GridJobs')
-                .pc-form-grid-col-30
-                    +number('IGFS:', model + '.igfsThreadPoolSize', '"igfsThreadPoolSize"', 'true', 'availableProcessors', '1',
-                        'Thread pool that is in charge of processing outgoing IGFS messages')
-                .pc-form-grid-col-30
-                    +sane-ignite-form-field-number({
-                        label: 'Rebalance:',
-                        model: `${model}.rebalanceThreadPoolSize`,
-                        name: '"rebalanceThreadPoolSize"',
-                        placeholder: '{{ ::$ctrl.Clusters.rebalanceThreadPoolSize.default }}',
-                        min: '{{ ::$ctrl.Clusters.rebalanceThreadPoolSize.min }}',
-                        max: `{{ $ctrl.Clusters.rebalanceThreadPoolSize.max(${model}) }}`,
-                        tip: 'Max count of threads can be used at rebalancing'
-                    })
-                        +form-field-feedback('max', 'Rebalance thread pool size should not exceed or be equal to System thread pool size')
-                .pc-form-grid-col-30
-                    +number('Utility cache:', model + '.utilityCacheThreadPoolSize', '"utilityCacheThreadPoolSize"', 'true', 'max(8, availableProcessors)', '1',
-                        'Default thread pool size that will be used to process utility cache messages')
-                .pc-form-grid-col-30
-                    pc-form-field-size(
-                        label='Utility cache keep alive time:'
-                        ng-model=`${model}.utilityCacheKeepAliveTime`
-                        name='utilityCacheKeepAliveTime'
-                        size-type='seconds'
-                        size-scale-label='s'
-                        tip='Keep alive time of thread pool size that will be used to process utility cache messages'
-                        min='0'
-                        placeholder='{{ 60000 / _s1.value }}'
-                        on-scale-change='_s1 = $event'
-                    )
-                .pc-form-grid-col-30
-                    +number('Async callback:', model + '.asyncCallbackPoolSize', '"asyncCallbackPoolSize"', 'true', 'max(8, availableProcessors)', '1',
-                        'Size of thread pool that is in charge of processing asynchronous callbacks')
-                .pc-form-grid-col-30
-                    +number('Striped:', model + '.stripedPoolSize', '"stripedPoolSize"', 'true', 'max(8, availableProcessors)', '1',
-                        'Striped pool size that should be used for cache requests processing')
+panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
+    panel-title Thread pools size
+    panel-description Settings for node thread pools.
+    panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
+        .pca-form-column-6.pc-form-grid-row
+            .pc-form-grid-col-30
+                +number('Public:', model + '.publicThreadPoolSize', '"publicThreadPoolSize"', 'true', 'max(8, availableProcessors) * 2', '1',
+                    'Thread pool that is in charge of processing ComputeJob, GridJobs and user messages sent to node')
+            .pc-form-grid-col-30
+                +sane-ignite-form-field-number({
+                    label: 'System:',
+                    model: `${model}.systemThreadPoolSize`,
+                    name: '"systemThreadPoolSize"',
+                    placeholder: '{{ ::$ctrl.Clusters.systemThreadPoolSize.default }}',
+                    min: '{{ ::$ctrl.Clusters.systemThreadPoolSize.min }}',
+                    tip: 'Thread pool that is in charge of processing internal system messages'
+                })
+            .pc-form-grid-col-30
+                +number('Service:', model + '.serviceThreadPoolSize', '"serviceThreadPoolSize"', 'true', 'max(8, availableProcessors) * 2', '1',
+                    'Thread pool that is in charge of processing proxy invocation')
+            .pc-form-grid-col-30
+                +number('Management:', model + '.managementThreadPoolSize', '"managementThreadPoolSize"', 'true', '4', '1',
+                    'Thread pool that is in charge of processing internal and Visor ComputeJob, GridJobs')
+            .pc-form-grid-col-30
+                +number('IGFS:', model + '.igfsThreadPoolSize', '"igfsThreadPoolSize"', 'true', 'availableProcessors', '1',
+                    'Thread pool that is in charge of processing outgoing IGFS messages')
+            .pc-form-grid-col-30
+                +sane-ignite-form-field-number({
+                    label: 'Rebalance:',
+                    model: `${model}.rebalanceThreadPoolSize`,
+                    name: '"rebalanceThreadPoolSize"',
+                    placeholder: '{{ ::$ctrl.Clusters.rebalanceThreadPoolSize.default }}',
+                    min: '{{ ::$ctrl.Clusters.rebalanceThreadPoolSize.min }}',
+                    max: `{{ $ctrl.Clusters.rebalanceThreadPoolSize.max(${model}) }}`,
+                    tip: 'Max count of threads can be used at rebalancing'
+                })
+                    +form-field-feedback('max', 'Rebalance thread pool size should not exceed or be equal to System thread pool size')
+            .pc-form-grid-col-30
+                +number('Utility cache:', model + '.utilityCacheThreadPoolSize', '"utilityCacheThreadPoolSize"', 'true', 'max(8, availableProcessors)', '1',
+                    'Default thread pool size that will be used to process utility cache messages')
+            .pc-form-grid-col-30
+                pc-form-field-size(
+                    label='Utility cache keep alive time:'
+                    ng-model=`${model}.utilityCacheKeepAliveTime`
+                    name='utilityCacheKeepAliveTime'
+                    size-type='seconds'
+                    size-scale-label='s'
+                    tip='Keep alive time of thread pool size that will be used to process utility cache messages'
+                    min='0'
+                    placeholder='{{ 60000 / _s1.value }}'
+                    on-scale-change='_s1 = $event'
+                )
+            .pc-form-grid-col-30
+                +number('Async callback:', model + '.asyncCallbackPoolSize', '"asyncCallbackPoolSize"', 'true', 'max(8, availableProcessors)', '1',
+                    'Size of thread pool that is in charge of processing asynchronous callbacks')
+            .pc-form-grid-col-30
+                +number('Striped:', model + '.stripedPoolSize', '"stripedPoolSize"', 'true', 'max(8, availableProcessors)', '1',
+                    'Striped pool size that should be used for cache requests processing')
 
-                //- Since ignite 2.0
-                .pc-form-grid-col-30(ng-if-start='$ctrl.available("2.0.0")')
-                    +number('Data streamer:', model + '.dataStreamerThreadPoolSize', '"dataStreamerThreadPoolSize"', 'true', 'max(8, availableProcessors)', '1',
-                        'Size of thread pool that is in charge of processing data stream messages')
-                .pc-form-grid-col-30
-                    +number('Query:', model + '.queryThreadPoolSize', '"queryThreadPoolSize"', 'true', 'max(8, availableProcessors)', '1',
-                        'Size of thread pool that is in charge of processing query messages')
-                .pc-form-grid-col-60(ng-if-end)
-                    .ignite-form-field
-                        +ignite-form-field__label('Executor configurations:', '"executorConfigurations"')
-                            +tooltip(`Custom thread pool configurations for compute tasks`)
-                        .ignite-form-field__control
-                            list-editable(
-                                ng-model=executors
-                                ng-model-options='{allowInvalid: true}'
-                                name='executorConfigurations'
-                                ui-validate=`{
-                                    allNamesExist: '$ctrl.Clusters.executorConfigurations.allNamesExist($value)',
-                                    allNamesUnique: '$ctrl.Clusters.executorConfigurations.allNamesUnique($value)'
-                                }`
-                            )
-                                list-editable-item-view
-                                    | {{ $item.name }} / 
-                                    | {{ $item.size || 'max(8, availableProcessors)'}}
+            //- Since ignite 2.0
+            .pc-form-grid-col-30(ng-if-start='$ctrl.available("2.0.0")')
+                +number('Data streamer:', model + '.dataStreamerThreadPoolSize', '"dataStreamerThreadPoolSize"', 'true', 'max(8, availableProcessors)', '1',
+                    'Size of thread pool that is in charge of processing data stream messages')
+            .pc-form-grid-col-30
+                +number('Query:', model + '.queryThreadPoolSize', '"queryThreadPoolSize"', 'true', 'max(8, availableProcessors)', '1',
+                    'Size of thread pool that is in charge of processing query messages')
+            .pc-form-grid-col-60(ng-if-end)
+                .ignite-form-field
+                    +ignite-form-field__label('Executor configurations:', '"executorConfigurations"')
+                        +tooltip(`Custom thread pool configurations for compute tasks`)
+                    .ignite-form-field__control
+                        list-editable(
+                            ng-model=executors
+                            ng-model-options='{allowInvalid: true}'
+                            name='executorConfigurations'
+                            ui-validate=`{
+                                allNamesExist: '$ctrl.Clusters.executorConfigurations.allNamesExist($value)',
+                                allNamesUnique: '$ctrl.Clusters.executorConfigurations.allNamesUnique($value)'
+                            }`
+                        )
+                            list-editable-item-view
+                                | {{ $item.name }} / 
+                                | {{ $item.size || 'max(8, availableProcessors)'}}
 
-                                list-editable-item-edit
-                                    .pc-form-grid-row
-                                        .pc-form-grid-col-30
-                                            +sane-ignite-form-field-text({
-                                                label: 'Name:',
-                                                model: '$item.name',
-                                                name: '"ExecutorName"',
-                                                required: true,
-                                                placeholder: 'Input executor name',
-                                                tip: 'Thread pool name'
-                                            })(
-                                                ui-validate=`{
-                                                    uniqueName: '$ctrl.Clusters.executorConfiguration.name.customValidators.uniqueName($item, ${executors})'
-                                                }`
-                                                ui-validate-watch=`"${executors}"`
-                                                ui-validate-watch-object-equality='true'
-                                                ng-model-options='{allowInvalid: true}'
-                                                data-ignite-form-field-input-autofocus='true'
-                                            )
-                                                +form-field-feedback(null, 'uniqueName', 'Service with that name is already configured')
-                                        .pc-form-grid-col-30
-                                            +number('Pool size:', '$item.size', '"ExecutorPoolSize"', 'true', 'max(8, availableProcessors)', '1', 'Thread pool size')
+                            list-editable-item-edit
+                                .pc-form-grid-row
+                                    .pc-form-grid-col-30
+                                        +sane-ignite-form-field-text({
+                                            label: 'Name:',
+                                            model: '$item.name',
+                                            name: '"ExecutorName"',
+                                            required: true,
+                                            placeholder: 'Input executor name',
+                                            tip: 'Thread pool name'
+                                        })(
+                                            ui-validate=`{
+                                                uniqueName: '$ctrl.Clusters.executorConfiguration.name.customValidators.uniqueName($item, ${executors})'
+                                            }`
+                                            ui-validate-watch=`"${executors}"`
+                                            ui-validate-watch-object-equality='true'
+                                            ng-model-options='{allowInvalid: true}'
+                                            data-ignite-form-field-input-autofocus='true'
+                                        )
+                                            +form-field-feedback(null, 'uniqueName', 'Service with that name is already configured')
+                                    .pc-form-grid-col-30
+                                        +number('Pool size:', '$item.size', '"ExecutorPoolSize"', 'true', 'max(8, availableProcessors)', '1', 'Thread pool size')
 
-                                list-editable-no-items
-                                    list-editable-add-item-button(
-                                        add-item=`$edit($ctrl.Clusters.addExecutorConfiguration(${model}))`
-                                        label-single='executor configuration'
-                                        label-multiple='executor configurations'
-                                    )
-                        .ignite-form-field__errors(
-                            ng-messages=`pools.executorConfigurations.$error`
-                            ng-show=`pools.executorConfigurations.$invalid`
-                        )
-                            +form-field-feedback(_, 'allNamesExist', 'All executor configurations should have a name')
-                            +form-field-feedback(_, 'allNamesUnique', 'All executor configurations should have a unique name')
+                            list-editable-no-items
+                                list-editable-add-item-button(
+                                    add-item=`$edit($ctrl.Clusters.addExecutorConfiguration(${model}))`
+                                    label-single='executor configuration'
+                                    label-multiple='executor configurations'
+                                )
+                    .ignite-form-field__errors(
+                        ng-messages=`pools.executorConfigurations.$error`
+                        ng-show=`pools.executorConfigurations.$invalid`
+                    )
+                        +form-field-feedback(_, 'allNamesExist', 'All executor configurations should have a name')
+                        +form-field-feedback(_, 'allNamesUnique', 'All executor configurations should have a unique name')
 
-            .pca-form-column-6
-                +preview-xml-java(model, 'clusterPools')
+        .pca-form-column-6
+            +preview-xml-java(model, 'clusterPools')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/clusters/time.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/clusters/time.pug b/modules/web-console/frontend/app/modules/states/configuration/clusters/time.pug
index 61c9155..fa85a5d 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/clusters/time.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/clusters/time.pug
@@ -19,30 +19,26 @@ include /app/helpers/jade/mixins
 -var form = 'time'
 -var model = '$ctrl.clonedCluster'
 
-.pca-panel.pca-panel-default(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Time configuration
-        .pca-panel-heading-description
-            | Time settings for CLOCK write ordering mode.
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body(ng-if=`ui.isPanelLoaded('${form}')`).pca-form-row
-            .pca-form-column-6.pc-form-grid-row
-                //- Removed in ignite 2.0
-                .pc-form-grid-col-30(ng-if-start='$ctrl.available(["1.0.0", "2.0.0"])')
-                    +number('Samples size:', `${model}.clockSyncSamples`, '"clockSyncSamples"', 'true', '8', '0',
-                        'Number of samples used to synchronize clocks between different nodes<br/>\
-                        Clock synchronization is used for cache version assignment in CLOCK order mode')
-                .pc-form-grid-col-30(ng-if-end)
-                    +number('Frequency:', `${model}.clockSyncFrequency`, '"clockSyncFrequency"', 'true', '120000', '0',
-                        'Frequency at which clock is synchronized between nodes, in milliseconds<br/>\
-                        Clock synchronization is used for cache version assignment in CLOCK order mode')
+panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
+    panel-title Time configuration
+    panel-description Time settings for CLOCK write ordering mode.
+    panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
+        .pca-form-column-6.pc-form-grid-row
+            //- Removed in ignite 2.0
+            .pc-form-grid-col-30(ng-if-start='$ctrl.available(["1.0.0", "2.0.0"])')
+                +number('Samples size:', `${model}.clockSyncSamples`, '"clockSyncSamples"', 'true', '8', '0',
+                    'Number of samples used to synchronize clocks between different nodes<br/>\
+                    Clock synchronization is used for cache version assignment in CLOCK order mode')
+            .pc-form-grid-col-30(ng-if-end)
+                +number('Frequency:', `${model}.clockSyncFrequency`, '"clockSyncFrequency"', 'true', '120000', '0',
+                    'Frequency at which clock is synchronized between nodes, in milliseconds<br/>\
+                    Clock synchronization is used for cache version assignment in CLOCK order mode')
 
-                .pc-form-grid-col-30
-                    +number-min-max('Port base:', `${model}.timeServerPortBase`, '"timeServerPortBase"', 'true', '31100', '0', '65535',
-                        'Time server provides clock synchronization between nodes<br/>\
-                        Base UPD port number for grid time server. Time server will be started on one of free ports in range')
-                .pc-form-grid-col-30
-                    +number('Port range:', `${model}.timeServerPortRange`, '"timeServerPortRange"', 'true', '100', '1', 'Time server port range')
-            .pca-form-column-6
-                +preview-xml-java(model, 'clusterTime')
+            .pc-form-grid-col-30
+                +number-min-max('Port base:', `${model}.timeServerPortBase`, '"timeServerPortBase"', 'true', '31100', '0', '65535',
+                    'Time server provides clock synchronization between nodes<br/>\
+                    Base UPD port number for grid time server. Time server will be started on one of free ports in range')
+            .pc-form-grid-col-30
+                +number('Port range:', `${model}.timeServerPortRange`, '"timeServerPortRange"', 'true', '100', '1', 'Time server port range')
+        .pca-form-column-6
+            +preview-xml-java(model, 'clusterTime')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/clusters/transactions.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/clusters/transactions.pug b/modules/web-console/frontend/app/modules/states/configuration/clusters/transactions.pug
index c888174..b5f80df 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/clusters/transactions.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/clusters/transactions.pug
@@ -19,50 +19,47 @@ include /app/helpers/jade/mixins
 -var form = 'transactions'
 -var model = '$ctrl.clonedCluster.transactionConfiguration'
 
-.pca-panel.pca-panel-default(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Transactions
-        .pca-panel-heading-description
-            | Settings for transactions. 
-            | #[a.link-success(href="https://apacheignite.readme.io/docs/transactions" target="_blank") More info]
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body(ng-if=`ui.isPanelLoaded('${form}')`).pca-form-row
-            .pca-form-column-6.pc-form-grid-row
-                .pc-form-grid-col-30
-                    +dropdown('Concurrency:', `${model}.defaultTxConcurrency`, '"defaultTxConcurrency"', 'true', 'PESSIMISTIC',
-                        '[\
-                            {value: "OPTIMISTIC", label: "OPTIMISTIC"},\
-                            {value: "PESSIMISTIC", label: "PESSIMISTIC"}\
-                        ]',
-                        'Cache transaction concurrency to use when one is not explicitly specified\
-                        <ul>\
-                            <li>OPTIMISTIC - All cache operations are not distributed to other nodes until commit is called</li>\
-                            <li>PESSIMISTIC - A lock is acquired on all cache operations with exception of read operations in READ_COMMITTED mode</li>\
-                        </ul>')
-                .pc-form-grid-col-30
-                    +dropdown('Isolation:', `${model}.defaultTxIsolation`, '"defaultTxIsolation"', 'true', 'REPEATABLE_READ',
-                        '[\
-                            {value: "READ_COMMITTED", label: "READ_COMMITTED"},\
-                            {value: "REPEATABLE_READ", label: "REPEATABLE_READ"},\
-                            {value: "SERIALIZABLE", label: "SERIALIZABLE"}\
-                        ]',
-                        'Default transaction isolation\
-                        <ul>\
-                            <li>READ_COMMITTED - Always a committed value will be provided for read operations</li>\
-                            <li>REPEATABLE_READ - If a value was read once within transaction, then all consecutive reads will provide the same in-transaction value</li>\
-                            <li>SERIALIZABLE - All transactions occur in a completely isolated fashion, as if all transactions in the system had executed serially, one after the other.</li>\
-                        </ul>')
-                .pc-form-grid-col-60
-                    +number('Default timeout:', `${model}.defaultTxTimeout`, '"defaultTxTimeout"', 'true', '0', '0', 'Default transaction timeout')
-                .pc-form-grid-col-30
-                    +number('Pessimistic log cleanup delay:', `${model}.pessimisticTxLogLinger`, '"pessimisticTxLogLinger"', 'true', '10000', '0',
-                        'Delay, in milliseconds, after which pessimistic recovery entries will be cleaned up for failed node')
-                .pc-form-grid-col-30
-                    +number('Pessimistic log size:', `${model}.pessimisticTxLogSize`, '"pessimisticTxLogSize"', 'true', '0', '0',
-                        'Size of pessimistic transactions log stored on node in order to recover transaction commit if originating node has left grid before it has sent all messages to transaction nodes')
-                .pc-form-grid-col-60
-                    +java-class('Manager factory:', `${model}.txManagerFactory`, '"txManagerFactory"', 'true', 'false',
-                        'Class name of transaction manager factory for integration with JEE app servers')
-            .pca-form-column-6
-                +preview-xml-java(model, 'clusterTransactions')
+panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
+    panel-title Transactions
+    panel-description 
+        | Settings for transactions. 
+        | #[a.link-success(href="https://apacheignite.readme.io/docs/transactions" 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('Concurrency:', `${model}.defaultTxConcurrency`, '"defaultTxConcurrency"', 'true', 'PESSIMISTIC',
+                    '[\
+                        {value: "OPTIMISTIC", label: "OPTIMISTIC"},\
+                        {value: "PESSIMISTIC", label: "PESSIMISTIC"}\
+                    ]',
+                    'Cache transaction concurrency to use when one is not explicitly specified\
+                    <ul>\
+                        <li>OPTIMISTIC - All cache operations are not distributed to other nodes until commit is called</li>\
+                        <li>PESSIMISTIC - A lock is acquired on all cache operations with exception of read operations in READ_COMMITTED mode</li>\
+                    </ul>')
+            .pc-form-grid-col-30
+                +dropdown('Isolation:', `${model}.defaultTxIsolation`, '"defaultTxIsolation"', 'true', 'REPEATABLE_READ',
+                    '[\
+                        {value: "READ_COMMITTED", label: "READ_COMMITTED"},\
+                        {value: "REPEATABLE_READ", label: "REPEATABLE_READ"},\
+                        {value: "SERIALIZABLE", label: "SERIALIZABLE"}\
+                    ]',
+                    'Default transaction isolation\
+                    <ul>\
+                        <li>READ_COMMITTED - Always a committed value will be provided for read operations</li>\
+                        <li>REPEATABLE_READ - If a value was read once within transaction, then all consecutive reads will provide the same in-transaction value</li>\
+                        <li>SERIALIZABLE - All transactions occur in a completely isolated fashion, as if all transactions in the system had executed serially, one after the other.</li>\
+                    </ul>')
+            .pc-form-grid-col-60
+                +number('Default timeout:', `${model}.defaultTxTimeout`, '"defaultTxTimeout"', 'true', '0', '0', 'Default transaction timeout')
+            .pc-form-grid-col-30
+                +number('Pessimistic log cleanup delay:', `${model}.pessimisticTxLogLinger`, '"pessimisticTxLogLinger"', 'true', '10000', '0',
+                    'Delay, in milliseconds, after which pessimistic recovery entries will be cleaned up for failed node')
+            .pc-form-grid-col-30
+                +number('Pessimistic log size:', `${model}.pessimisticTxLogSize`, '"pessimisticTxLogSize"', 'true', '0', '0',
+                    'Size of pessimistic transactions log stored on node in order to recover transaction commit if originating node has left grid before it has sent all messages to transaction nodes')
+            .pc-form-grid-col-60
+                +java-class('Manager factory:', `${model}.txManagerFactory`, '"txManagerFactory"', 'true', 'false',
+                    'Class name of transaction manager factory for integration with JEE app servers')
+        .pca-form-column-6
+            +preview-xml-java(model, 'clusterTransactions')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/domains/general.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/domains/general.pug b/modules/web-console/frontend/app/modules/states/configuration/domains/general.pug
index 0238972..a6c8194 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/domains/general.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/domains/general.pug
@@ -20,41 +20,38 @@ include /app/helpers/jade/mixins
 -var model = 'backupItem'
 -var generatePojo = `${model}.generatePojo`
 
-.pca-panel.pca-panel-default(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title General
-        .pca-panel-heading-description
-            | Domain model properties common for Query and Store. 
-            a.link-success(href="https://apacheignite.readme.io/docs/cache-queries" target="_blank") More info about query configuration. 
-            a.link-success(href="https://apacheignite.readme.io/docs/3rd-party-store" target="_blank") More info about store.
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.pca-form-row
-            .pca-form-column-6.pc-form-grid-row
-                .pc-form-grid-col-60
-                    +checkbox('Generate POJO classes', generatePojo, '"generatePojo"', 'If selected then POJO classes will be generated from database tables')
-                .pc-form-grid-col-30
-                    +sane-ignite-form-field-dropdown({
-                        label: 'Caches:',
-                        model: `${model}.caches`,
-                        name: '"caches"',
-                        multiple: true,
-                        placeholder: 'Choose caches',
-                        placeholderEmpty: 'No valid caches configured',
-                        options: '$ctrl.cachesMenu',
-                        tip: 'Select caches to describe types in cache'
-                    })
-                .pc-form-grid-col-30
-                    +dropdown-required('Query metadata:', `${model}.queryMetadata`, '"queryMetadata"', 'true', 'true', '', '::$ctrl.Models.queryMetadata.values',
-                        'Query metadata configured with:\
-                        <ul>\
-                            <li>Java annotations like @QuerySqlField</li>\
-                            <li>Configuration via QueryEntity class</li>\
-                        </ul>')
-                .pc-form-grid-col-60
-                    +java-class-typeahead('Key type:', `${model}.keyType`, '"keyType"', '$ctrl.javaBuiltInClassesBase', 'true', 'true', '{{ ' + generatePojo + ' ? "Full class name for Key" : "Key type name" }}', 'Key class used to store key in cache', generatePojo)
-                .pc-form-grid-col-60
-                    +java-class-autofocus-placholder('Value type:', `${model}.valueType`, '"valueType"', 'true', 'true', 'false', '{{ ' + generatePojo +' ? "Enter fully qualified class name" : "Value type name" }}', 'Value class used to store value in cache', generatePojo)
+panel-collapsible(opened=`::true` ng-form=form)
+    panel-title General
+    panel-description
+        | Domain model properties common for Query and Store. 
+        a.link-success(href="https://apacheignite.readme.io/docs/cache-queries" target="_blank") More info about query configuration. 
+        a.link-success(href="https://apacheignite.readme.io/docs/3rd-party-store" target="_blank") More info about store.
+    panel-content.pca-form-row
+        .pca-form-column-6.pc-form-grid-row
+            .pc-form-grid-col-60
+                +checkbox('Generate POJO classes', generatePojo, '"generatePojo"', 'If selected then POJO classes will be generated from database tables')
+            .pc-form-grid-col-30
+                +sane-ignite-form-field-dropdown({
+                    label: 'Caches:',
+                    model: `${model}.caches`,
+                    name: '"caches"',
+                    multiple: true,
+                    placeholder: 'Choose caches',
+                    placeholderEmpty: 'No valid caches configured',
+                    options: '$ctrl.cachesMenu',
+                    tip: 'Select caches to describe types in cache'
+                })
+            .pc-form-grid-col-30
+                +dropdown-required('Query metadata:', `${model}.queryMetadata`, '"queryMetadata"', 'true', 'true', '', '::$ctrl.Models.queryMetadata.values',
+                    'Query metadata configured with:\
+                    <ul>\
+                        <li>Java annotations like @QuerySqlField</li>\
+                        <li>Configuration via QueryEntity class</li>\
+                    </ul>')
+            .pc-form-grid-col-60
+                +java-class-typeahead('Key type:', `${model}.keyType`, '"keyType"', '$ctrl.javaBuiltInClassesBase', 'true', 'true', '{{ ' + generatePojo + ' ? "Full class name for Key" : "Key type name" }}', 'Key class used to store key in cache', generatePojo)
+            .pc-form-grid-col-60
+                +java-class-autofocus-placholder('Value type:', `${model}.valueType`, '"valueType"', 'true', 'true', 'false', '{{ ' + generatePojo +' ? "Enter fully qualified class name" : "Value type name" }}', 'Value class used to store value in cache', generatePojo)
 
-            .pca-form-column-6
-                +preview-xml-java(model, 'domainModelGeneral')
+        .pca-form-column-6
+            +preview-xml-java(model, 'domainModelGeneral')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/domains/query.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/domains/query.pug b/modules/web-console/frontend/app/modules/states/configuration/domains/query.pug
index 9dc513a..ed91ec4 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/domains/query.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/domains/query.pug
@@ -23,236 +23,233 @@ include /app/helpers/jade/mixins
 -var queryAliases = `${model}.aliases`
 -var queryIndexes = `${model}.indexes`
 
-.pca-panel.pca-panel-default(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title(id='query-title') Domain model for SQL query
-        .pca-panel-heading-description
-            | Domain model properties for fields queries. 
-            a.link-success(href='https://apacheignite.readme.io/docs/cache-queries' target='_blank') More info
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id='query')
-        .pca-panel-body.pca-form-row
-            .pca-form-column-6.pc-form-grid-row
-                .content-not-available(
-                    ng-if=`${model}.queryMetadata === 'Annotations'`
-                    style='margin-top: 10px'
-                )
-                    label Not available for annotated types
-
-                .pc-form-grid-col-60(ng-if-start=`${model}.queryMetadata === 'Configuration'`)
-                    +text('Table name:', `${model}.tableName`, '"tableName"', 'false', 'Enter table name')
-
-                .pc-form-grid-col-30(ng-if-start='$ctrl.available("2.0.0")')
-                    +text('Key field name:', `${model}.keyFieldName`, '"keyFieldName"', 'false', 'Enter key field name',
-                        'Key name.<br/>' +
-                        'Can be used in field list to denote the key as a whole')
-                .pc-form-grid-col-30(ng-if-end)
-                    +text('Value field name:', `${model}.valueFieldName`, '"valueFieldName"', 'false', 'Enter value field name',
-                        'Value name.<br/>' +
-                        'Can be used in field list to denote the entire value')
-
-                .pc-form-grid-col-60
-                    mixin domains-query-fields
-                        .ignite-form-field
-                            +ignite-form-field__label('Fields:', '"fields"')
-                                +tooltip(`Collection of name-to-type mappings to be queried, in addition to indexed fields`)
-                            .ignite-form-field__control
-                                -let items = queryFields
-                                list-editable(
-                                    ng-model=items
-                                    name='queryFields'
-                                    ng-change=`$ctrl.onQueryFieldsChange(${model})`
-                                )
-                                    list-editable-item-view
-                                        | {{ $item.name}} / {{ $item.className}}
-
-                                    list-editable-item-edit
-                                        - form = '$parent.form'
-                                        .pc-form-grid-row
-                                            .pc-form-grid-col-30(divider='/')
-                                                +ignite-form-field-text('Field name:', '$item.name', '"name"', false, true, 'Enter field name')(
-                                                    data-ignite-unique=items
-                                                    data-ignite-unique-property='name'
-                                                    ignite-auto-focus
-                                                )
-                                                    +unique-feedback('"name"', 'Property with such name already exists!')
-                                            .pc-form-grid-col-30
-                                                +java-class-typeahead('Field full class name:', `$item.className`, '"className"', '$ctrl.queryFieldTypes', true, true, 'Enter field full class name')(
-                                                    ng-model-options='{allowInvalid: true}'
-                                                    extra-valid-java-identifiers='$ctrl.queryFieldTypes'
-                                                )
-
-                                    list-editable-no-items
-                                        list-editable-add-item-button(
-                                            add-item=`$editLast((${items} = ${items} || []).push({}))`
-                                            label-single='field to query'
-                                            label-multiple='fields'
-                                        )
-
-                    +domains-query-fields
-
-                .pc-form-grid-col-60
-                    +sane-ignite-form-field-dropdown({
-                        label: 'Key fields:',
-                        model: queryKeyFields,
-                        name: '"queryKeyFields"',
-                        multiple: true,
-                        placeholder: 'Select key fields',
-                        placeholderEmpty: 'Configure available fields',
-                        options: `$ctrl.fields('cur', ${queryKeyFields})`,
-                        tip: 'Query fields that belongs to the key.<br/>\
-                         Used to build / modify keys and values during SQL DML operations when no key - value classes are present on cluster nodes.'
-                    })
-                .pc-form-grid-col-60
-                    mixin domains-query-aliases
-                        .ignite-form-field
-                            +ignite-form-field__label('Aliases:', '"aliases"')
-                                +tooltip(`Mapping from full property name in dot notation to an alias that will be used as SQL column name<br />
-                                    For example: "parent.name" as "parentName"`)
-                            .ignite-form-field__control
-                                -let items = queryAliases
-
-                                list-editable(ng-model=items name='queryAliases')
-                                    list-editable-item-view
-                                        | {{ $item.field }} &rarr; {{ $item.alias }}
-
-                                    list-editable-item-edit
-                                        - form = '$parent.form'
-                                        .pc-form-grid-row
-                                            .pc-form-grid-col-30(divider='/')
-                                                +ignite-form-field-text('Field name', '$item.field', '"field"', false, true, 'Enter field name')(
-                                                    data-ignite-unique=items
-                                                    data-ignite-unique-property='field'
-                                                    ignite-auto-focus
-                                                )
-                                                    +unique-feedback('"field"', 'Such field already exists!')
-                                            .pc-form-grid-col-30
-                                                +ignite-form-field-text('Field alias', '$item.alias', '"alias"', false, true, 'Enter field alias')
-
-                                    list-editable-no-items
-                                        list-editable-add-item-button(
-                                            add-item=`$editLast((${items} = ${items} || []).push({}))`
-                                            label-single='alias to query'
-                                            label-multiple='aliases'
-                                        )
-
-                    +domains-query-aliases
-
-                .pc-form-grid-col-60(ng-if-end)
+panel-collapsible(ng-form=form opened=`!!${model}.queryMetadata`)
+    panel-title#query-title Domain model for SQL query
+    panel-description
+        | Domain model properties for fields queries. 
+        a.link-success(href='https://apacheignite.readme.io/docs/cache-queries' target='_blank') More info
+    panel-content.pca-form-row
+        .pca-form-column-6.pc-form-grid-row
+            .content-not-available(
+                ng-if=`${model}.queryMetadata === 'Annotations'`
+                style='margin-top: 10px'
+            )
+                label Not available for annotated types
+
+            .pc-form-grid-col-60(ng-if-start=`${model}.queryMetadata === 'Configuration'`)
+                +text('Table name:', `${model}.tableName`, '"tableName"', 'false', 'Enter table name')
+
+            .pc-form-grid-col-30(ng-if-start='$ctrl.available("2.0.0")')
+                +text('Key field name:', `${model}.keyFieldName`, '"keyFieldName"', 'false', 'Enter key field name',
+                    'Key name.<br/>' +
+                    'Can be used in field list to denote the key as a whole')
+            .pc-form-grid-col-30(ng-if-end)
+                +text('Value field name:', `${model}.valueFieldName`, '"valueFieldName"', 'false', 'Enter value field name',
+                    'Value name.<br/>' +
+                    'Can be used in field list to denote the entire value')
+
+            .pc-form-grid-col-60
+                mixin domains-query-fields
                     .ignite-form-field
-                        +ignite-form-field__label('Indexes:', '"indexes"')
+                        +ignite-form-field__label('Fields:', '"fields"')
+                            +tooltip(`Collection of name-to-type mappings to be queried, in addition to indexed fields`)
                         .ignite-form-field__control
+                            -let items = queryFields
                             list-editable(
-                                ng-model=queryIndexes
-                                ng-model-options='{allowInvalid: true}'
-                                name='queryIndexes'
-                                ui-validate=`{
-                                    complete: '$ctrl.Models.queryIndexes.complete($value)',
-                                    fieldsExist: '$ctrl.Models.queryIndexes.fieldsExist($value, ${queryFields})',
-                                    indexFieldsHaveUniqueNames: '$ctrl.Models.queryIndexes.indexFieldsHaveUniqueNames($value)'
-                                }`
-                                ui-validate-watch=`"[${queryIndexes}, ${queryFields}]"`
-                                ui-validate-watch-object-equality='true'
+                                ng-model=items
+                                name='queryFields'
+                                ng-change=`$ctrl.onQueryFieldsChange(${model})`
                             )
-                                list-editable-item-view(item-name='queryIndex')
-                                    div {{ queryIndex.name }} [{{ queryIndex.indexType }}]
-                                    div(ng-repeat='field in queryIndex.fields track by field._id')
-                                        span {{ field.name }}
-                                        span(ng-if='queryIndex.indexType == "SORTED"')
-                                            |  / {{ field.direction ? 'ASC' : 'DESC'}}
+                                list-editable-item-view
+                                    | {{ $item.name}} / {{ $item.className}}
 
-                                list-editable-item-edit(item-name='queryIndex')
+                                list-editable-item-edit
+                                    - form = '$parent.form'
                                     .pc-form-grid-row
                                         .pc-form-grid-col-30(divider='/')
-                                            +sane-ignite-form-field-text({
-                                                label: 'Index name:',
-                                                model: 'queryIndex.name',
-                                                name: '"name"',
-                                                required: true,
-                                                placeholder: 'Enter index name'
-                                            })(
-                                                ignite-unique=queryIndexes
-                                                ignite-unique-property='name'
-                                                ignite-form-field-input-autofocus='true'
+                                            +ignite-form-field-text('Field name:', '$item.name', '"name"', false, true, 'Enter field name')(
+                                                data-ignite-unique=items
+                                                data-ignite-unique-property='name'
+                                                ignite-auto-focus
                                             )
-                                                +unique-feedback(_, 'Such index already exists!')
+                                                +unique-feedback('"name"', 'Property with such name already exists!')
                                         .pc-form-grid-col-30
-                                            +sane-ignite-form-field-dropdown({
-                                                label: 'Index type:',
-                                                model: `queryIndex.indexType`,
-                                                name: '"indexType"',
-                                                required: true,
-                                                placeholder: 'Select index type',
-                                                options: '::$ctrl.Models.indexType.values'
-                                            })
-                                        .pc-form-grid-col-60
-                                            .ignite-form-field
-                                                +ignite-form-field__label('Index fields:', '"indexFields"', true)
-                                                .ignite-form-field__control
-                                                    list-editable(
-                                                        ng-model='queryIndex.fields'
-                                                        ng-model-options='{allowInvalid: true}'
-                                                        name='indexFields'
-                                                        ng-required='true'
-                                                    )
-                                                        list-editable-item-view(item-name='indexField')
-                                                            | {{ indexField.name }} 
-                                                            span(ng-if='queryIndex.indexType === "SORTED"')
-                                                                |  / {{ indexField.direction ? "ASC" : "DESC" }}
-
-                                                        list-editable-item-edit(item-name='indexField')
-                                                            .pc-form-grid-row
-                                                                .pc-form-grid-col-60
-                                                                    +sane-ignite-form-field-dropdown({
-                                                                        label: 'Index field:',
-                                                                        model: 'indexField.name',
-                                                                        name: '"indexName"',
-                                                                        placeholder: `{{ ${queryFields}.length > 0 ? 'Choose index field' : 'No fields configured' }}`,
-                                                                        options: queryFields
-                                                                    })(
-                                                                        bs-options=`queryField.name as queryField.name for queryField in ${queryFields}`
-                                                                        ng-disabled=`${queryFields}.length === 0`
-                                                                        ng-model-options='{allowInvalid: true}'
-                                                                        ignite-unique='queryIndex.fields'
-                                                                        ignite-unique-property='name'
-                                                                        ignite-auto-focus
-                                                                    )
-                                                                        +unique-feedback(_, 'Such field already exists!')
-                                                                .pc-form-grid-col-60(
-                                                                    ng-if='queryIndex.indexType === "SORTED"'
-                                                                )
-                                                                    +sane-ignite-form-field-dropdown({
-                                                                        label: 'Sort direction:',
-                                                                        model: 'indexField.direction',
-                                                                        name: '"indexDirection"',
-                                                                        required: true,
-                                                                        options: '::$ctrl.Models.indexSortDirection.values'
-                                                                    })
-                                                        list-editable-no-items
-                                                            list-editable-add-item-button(
-                                                                add-item=`$edit($ctrl.Models.addIndexField(queryIndex.fields))`
-                                                                label-single='field to index'
-                                                                label-multiple='fields in index'
-                                                            )
-                                                .ignite-form-field__errors(
-                                                    ng-messages=`$form.indexFields.$error`
-                                                    ng-show=`$form.indexFields.$invalid`
-                                                )
-                                                    +form-field-feedback(_, 'required', 'Index fields should be configured')
+                                            +java-class-typeahead('Field full class name:', `$item.className`, '"className"', '$ctrl.queryFieldTypes', true, true, 'Enter field full class name')(
+                                                ng-model-options='{allowInvalid: true}'
+                                                extra-valid-java-identifiers='$ctrl.queryFieldTypes'
+                                            )
 
                                 list-editable-no-items
                                     list-editable-add-item-button(
-                                        add-item=`$edit($ctrl.Models.addIndex(${model}))`
-                                        label-single='index'
+                                        add-item=`$editLast((${items} = ${items} || []).push({}))`
+                                        label-single='field to query'
                                         label-multiple='fields'
                                     )
-                        .ignite-form-field__errors(
-                            ng-messages=`query.queryIndexes.$error`
-                            ng-show=`query.queryIndexes.$invalid`
+
+                +domains-query-fields
+
+            .pc-form-grid-col-60
+                +sane-ignite-form-field-dropdown({
+                    label: 'Key fields:',
+                    model: queryKeyFields,
+                    name: '"queryKeyFields"',
+                    multiple: true,
+                    placeholder: 'Select key fields',
+                    placeholderEmpty: 'Configure available fields',
+                    options: `$ctrl.fields('cur', ${queryKeyFields})`,
+                    tip: 'Query fields that belongs to the key.<br/>\
+                     Used to build / modify keys and values during SQL DML operations when no key - value classes are present on cluster nodes.'
+                })
+            .pc-form-grid-col-60
+                mixin domains-query-aliases
+                    .ignite-form-field
+                        +ignite-form-field__label('Aliases:', '"aliases"')
+                            +tooltip(`Mapping from full property name in dot notation to an alias that will be used as SQL column name<br />
+                                For example: "parent.name" as "parentName"`)
+                        .ignite-form-field__control
+                            -let items = queryAliases
+
+                            list-editable(ng-model=items name='queryAliases')
+                                list-editable-item-view
+                                    | {{ $item.field }} &rarr; {{ $item.alias }}
+
+                                list-editable-item-edit
+                                    - form = '$parent.form'
+                                    .pc-form-grid-row
+                                        .pc-form-grid-col-30(divider='/')
+                                            +ignite-form-field-text('Field name', '$item.field', '"field"', false, true, 'Enter field name')(
+                                                data-ignite-unique=items
+                                                data-ignite-unique-property='field'
+                                                ignite-auto-focus
+                                            )
+                                                +unique-feedback('"field"', 'Such field already exists!')
+                                        .pc-form-grid-col-30
+                                            +ignite-form-field-text('Field alias', '$item.alias', '"alias"', false, true, 'Enter field alias')
+
+                                list-editable-no-items
+                                    list-editable-add-item-button(
+                                        add-item=`$editLast((${items} = ${items} || []).push({}))`
+                                        label-single='alias to query'
+                                        label-multiple='aliases'
+                                    )
+
+                +domains-query-aliases
+
+            .pc-form-grid-col-60(ng-if-end)
+                .ignite-form-field
+                    +ignite-form-field__label('Indexes:', '"indexes"')
+                    .ignite-form-field__control
+                        list-editable(
+                            ng-model=queryIndexes
+                            ng-model-options='{allowInvalid: true}'
+                            name='queryIndexes'
+                            ui-validate=`{
+                                complete: '$ctrl.Models.queryIndexes.complete($value)',
+                                fieldsExist: '$ctrl.Models.queryIndexes.fieldsExist($value, ${queryFields})',
+                                indexFieldsHaveUniqueNames: '$ctrl.Models.queryIndexes.indexFieldsHaveUniqueNames($value)'
+                            }`
+                            ui-validate-watch=`"[${queryIndexes}, ${queryFields}]"`
+                            ui-validate-watch-object-equality='true'
                         )
-                            +form-field-feedback(_, 'complete', 'Some indexes are incomplete')
-                            +form-field-feedback(_, 'fieldsExist', 'Some indexes use unknown fields')
-                            +form-field-feedback(_, 'indexFieldsHaveUniqueNames', 'Each query index field name should be unique')
+                            list-editable-item-view(item-name='queryIndex')
+                                div {{ queryIndex.name }} [{{ queryIndex.indexType }}]
+                                div(ng-repeat='field in queryIndex.fields track by field._id')
+                                    span {{ field.name }}
+                                    span(ng-if='queryIndex.indexType == "SORTED"')
+                                        |  / {{ field.direction ? 'ASC' : 'DESC'}}
+
+                            list-editable-item-edit(item-name='queryIndex')
+                                .pc-form-grid-row
+                                    .pc-form-grid-col-30(divider='/')
+                                        +sane-ignite-form-field-text({
+                                            label: 'Index name:',
+                                            model: 'queryIndex.name',
+                                            name: '"name"',
+                                            required: true,
+                                            placeholder: 'Enter index name'
+                                        })(
+                                            ignite-unique=queryIndexes
+                                            ignite-unique-property='name'
+                                            ignite-form-field-input-autofocus='true'
+                                        )
+                                            +unique-feedback(_, 'Such index already exists!')
+                                    .pc-form-grid-col-30
+                                        +sane-ignite-form-field-dropdown({
+                                            label: 'Index type:',
+                                            model: `queryIndex.indexType`,
+                                            name: '"indexType"',
+                                            required: true,
+                                            placeholder: 'Select index type',
+                                            options: '::$ctrl.Models.indexType.values'
+                                        })
+                                    .pc-form-grid-col-60
+                                        .ignite-form-field
+                                            +ignite-form-field__label('Index fields:', '"indexFields"', true)
+                                            .ignite-form-field__control
+                                                list-editable(
+                                                    ng-model='queryIndex.fields'
+                                                    ng-model-options='{allowInvalid: true}'
+                                                    name='indexFields'
+                                                    ng-required='true'
+                                                )
+                                                    list-editable-item-view(item-name='indexField')
+                                                        | {{ indexField.name }} 
+                                                        span(ng-if='queryIndex.indexType === "SORTED"')
+                                                            |  / {{ indexField.direction ? "ASC" : "DESC" }}
+
+                                                    list-editable-item-edit(item-name='indexField')
+                                                        .pc-form-grid-row
+                                                            .pc-form-grid-col-60
+                                                                +sane-ignite-form-field-dropdown({
+                                                                    label: 'Index field:',
+                                                                    model: 'indexField.name',
+                                                                    name: '"indexName"',
+                                                                    placeholder: `{{ ${queryFields}.length > 0 ? 'Choose index field' : 'No fields configured' }}`,
+                                                                    options: queryFields
+                                                                })(
+                                                                    bs-options=`queryField.name as queryField.name for queryField in ${queryFields}`
+                                                                    ng-disabled=`${queryFields}.length === 0`
+                                                                    ng-model-options='{allowInvalid: true}'
+                                                                    ignite-unique='queryIndex.fields'
+                                                                    ignite-unique-property='name'
+                                                                    ignite-auto-focus
+                                                                )
+                                                                    +unique-feedback(_, 'Such field already exists!')
+                                                            .pc-form-grid-col-60(
+                                                                ng-if='queryIndex.indexType === "SORTED"'
+                                                            )
+                                                                +sane-ignite-form-field-dropdown({
+                                                                    label: 'Sort direction:',
+                                                                    model: 'indexField.direction',
+                                                                    name: '"indexDirection"',
+                                                                    required: true,
+                                                                    options: '::$ctrl.Models.indexSortDirection.values'
+                                                                })
+                                                    list-editable-no-items
+                                                        list-editable-add-item-button(
+                                                            add-item=`$edit($ctrl.Models.addIndexField(queryIndex.fields))`
+                                                            label-single='field to index'
+                                                            label-multiple='fields in index'
+                                                        )
+                                            .ignite-form-field__errors(
+                                                ng-messages=`$form.indexFields.$error`
+                                                ng-show=`$form.indexFields.$invalid`
+                                            )
+                                                +form-field-feedback(_, 'required', 'Index fields should be configured')
 
-            .pca-form-column-6
-                +preview-xml-java(model, 'domainModelQuery')
+                            list-editable-no-items
+                                list-editable-add-item-button(
+                                    add-item=`$edit($ctrl.Models.addIndex(${model}))`
+                                    label-single='index'
+                                    label-multiple='fields'
+                                )
+                    .ignite-form-field__errors(
+                        ng-messages=`query.queryIndexes.$error`
+                        ng-show=`query.queryIndexes.$invalid`
+                    )
+                        +form-field-feedback(_, 'complete', 'Some indexes are incomplete')
+                        +form-field-feedback(_, 'fieldsExist', 'Some indexes use unknown fields')
+                        +form-field-feedback(_, 'indexFieldsHaveUniqueNames', 'Each query index field name should be unique')
+
+        .pca-form-column-6
+            +preview-xml-java(model, 'domainModelQuery')

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/domains/store.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/domains/store.pug b/modules/web-console/frontend/app/modules/states/configuration/domains/store.pug
index eb0f9b7..811c0d7 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/domains/store.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/domains/store.pug
@@ -75,52 +75,49 @@ mixin list-db-field-edit({ items, itemName, itemsName })
                 label-multiple=itemsName
             )
 
-.pca-panel.pca-panel-default(ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title(id='store-title') Domain model for cache store
-        .pca-panel-heading-description
-            | Domain model properties for binding database with cache via POJO cache store. 
-            a.link-success(href="https://apacheignite.readme.io/docs/3rd-party-store" 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
-                    +text('Database schema:', model + '.databaseSchema', '"databaseSchema"', 'false', 'Input DB schema name', 'Schema name in database')
-                .pc-form-grid-col-30
-                    +text('Database table:', model + '.databaseTable', '"databaseTable"', 'false', 'Input DB table name', 'Table name in database')
-                .pc-form-grid-col-60
-                    .ignite-form-field
-                        +ignite-form-field__label('Key fields:', '"keyFields"')
-                            +tooltip(`Collection of key fields descriptions for CacheJdbcPojoStore`)
-                        .ignite-form-field__control
-                            +list-db-field-edit({
-                                items: keyFields,
-                                itemName: 'key field',
-                                itemsName: 'key fields'
-                            })(name='keyFields')
-                        .ignite-form-field__errors(
-                            ng-messages=`store.keyFields.$error`
-                            ng-show=`store.keyFields.$invalid`
-                        )
-                            +form-field-feedback(_, 'dbFieldUnique', 'Each key field DB name and Java name should be unique')
+panel-collapsible(ng-form=form on-open=`ui.loadPanel('${form}')`)
+    panel-title#store-title Domain model for cache store
+    panel-description
+        | Domain model properties for binding database with cache via POJO cache store. 
+        a.link-success(href="https://apacheignite.readme.io/docs/3rd-party-store" target="_blank") More info
+    panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
+        .pca-form-column-6.pc-form-grid-row
+            .pc-form-grid-col-30
+                +text('Database schema:', model + '.databaseSchema', '"databaseSchema"', 'false', 'Input DB schema name', 'Schema name in database')
+            .pc-form-grid-col-30
+                +text('Database table:', model + '.databaseTable', '"databaseTable"', 'false', 'Input DB table name', 'Table name in database')
+            .pc-form-grid-col-60
+                .ignite-form-field
+                    +ignite-form-field__label('Key fields:', '"keyFields"')
+                        +tooltip(`Collection of key fields descriptions for CacheJdbcPojoStore`)
+                    .ignite-form-field__control
+                        +list-db-field-edit({
+                            items: keyFields,
+                            itemName: 'key field',
+                            itemsName: 'key fields'
+                        })(name='keyFields')
+                    .ignite-form-field__errors(
+                        ng-messages=`store.keyFields.$error`
+                        ng-show=`store.keyFields.$invalid`
+                    )
+                        +form-field-feedback(_, 'dbFieldUnique', 'Each key field DB name and Java name should be unique')
 
-                .pc-form-grid-col-60
-                    .ignite-form-field
-                        +ignite-form-field__label('Value fields:', '"valueFields"')
-                            +tooltip(`Collection of value fields descriptions for CacheJdbcPojoStore`)
-                        .ignite-form-field__control
-                            +list-db-field-edit({
-                                items: valueFields,
-                                itemName: 'value field',
-                                itemsName: 'value fields'
-                            })(name='valueFields')
-                        .ignite-form-field__errors(
-                            ng-messages=`store.valueFields.$error`
-                            ng-show=`store.valueFields.$invalid`
-                        )
-                            +form-field-feedback(_, 'dbFieldUnique', 'Each value field DB name and Java name should be unique')
+            .pc-form-grid-col-60
+                .ignite-form-field
+                    +ignite-form-field__label('Value fields:', '"valueFields"')
+                        +tooltip(`Collection of value fields descriptions for CacheJdbcPojoStore`)
+                    .ignite-form-field__control
+                        +list-db-field-edit({
+                            items: valueFields,
+                            itemName: 'value field',
+                            itemsName: 'value fields'
+                        })(name='valueFields')
+                    .ignite-form-field__errors(
+                        ng-messages=`store.valueFields.$error`
+                        ng-show=`store.valueFields.$invalid`
+                    )
+                        +form-field-feedback(_, 'dbFieldUnique', 'Each value field DB name and Java name should be unique')
 
-            .pca-form-column-6
-                +preview-xml-java(model, 'domainStore')
+        .pca-form-column-6
+            +preview-xml-java(model, 'domainStore')
 

http://git-wip-us.apache.org/repos/asf/ignite/blob/d24dab81/modules/web-console/frontend/app/modules/states/configuration/igfs/dual.pug
----------------------------------------------------------------------
diff --git a/modules/web-console/frontend/app/modules/states/configuration/igfs/dual.pug b/modules/web-console/frontend/app/modules/states/configuration/igfs/dual.pug
index b05caab..67a37ad 100644
--- a/modules/web-console/frontend/app/modules/states/configuration/igfs/dual.pug
+++ b/modules/web-console/frontend/app/modules/states/configuration/igfs/dual.pug
@@ -19,23 +19,24 @@ include /app/helpers/jade/mixins
 -var form = 'dualMode'
 -var model = 'backupItem'
 
-.pca-panel.pca-panel-default(ng-show='$ctrl.available(["1.0.0", "2.0.0"])' ng-form=form novalidate)
-    .pca-panel-heading(bs-collapse-toggle='' ng-click=`ui.loadPanel('${form}')`)
-        ignite-form-panel-chevron
-        .pca-panel-heading-title Dual mode
-        .pca-panel-heading-description
-            | IGFS supports dual-mode that allows it to work as either a standalone file system in Hadoop cluster, or work in tandem with HDFS, providing a primary caching layer for the secondary HDFS.
-            | As a caching layer it provides highly configurable read-through and write-through behaviour.
-    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .pca-panel-body.pca-form-row(ng-if=`$ctrl.available(["1.0.0", "2.0.0"]) && ui.isPanelLoaded('${form}')`)
-            .pca-form-column-6
-                .settings-row
-                    +number('Maximum pending puts size:', `${model}.dualModeMaxPendingPutsSize`, '"dualModeMaxPendingPutsSize"', 'true', '0', 'Number.MIN_SAFE_INTEGER',
-                        'Maximum amount of pending data read from the secondary file system and waiting to be written to data cache<br/>\
-                        Zero or negative value stands for unlimited size')
-                .settings-row
-                    +java-class('Put executor service:', `${model}.dualModePutExecutorService`, '"dualModePutExecutorService"', 'true', 'false', 'DUAL mode put operation executor service')
-                .settings-row
-                    +checkbox('Put executor service shutdown', `${model}.dualModePutExecutorServiceShutdown`, '"dualModePutExecutorServiceShutdown"', 'DUAL mode put operation executor service shutdown flag')
-            .pca-form-column-6
-                +preview-xml-java(model, 'igfsDualMode')
+panel-collapsible(
+    ng-form=form
+    on-open=`ui.loadPanel('${form}')`
+    ng-if='$ctrl.available(["1.0.0", "2.0.0"])'
+)
+    panel-title Dual mode
+    panel-description
+        | IGFS supports dual-mode that allows it to work as either a standalone file system in Hadoop cluster, or work in tandem with HDFS, providing a primary caching layer for the secondary HDFS.
+        | As a caching layer it provides highly configurable read-through and write-through behaviour.
+    panel-content.pca-form-row(ng-if=`ui.isPanelLoaded('${form}')`)
+        .pca-form-column-6
+            .settings-row
+                +number('Maximum pending puts size:', `${model}.dualModeMaxPendingPutsSize`, '"dualModeMaxPendingPutsSize"', 'true', '0', 'Number.MIN_SAFE_INTEGER',
+                    'Maximum amount of pending data read from the secondary file system and waiting to be written to data cache<br/>\
+                    Zero or negative value stands for unlimited size')
+            .settings-row
+                +java-class('Put executor service:', `${model}.dualModePutExecutorService`, '"dualModePutExecutorService"', 'true', 'false', 'DUAL mode put operation executor service')
+            .settings-row
+                +checkbox('Put executor service shutdown', `${model}.dualModePutExecutorServiceShutdown`, '"dualModePutExecutorServiceShutdown"', 'DUAL mode put operation executor service shutdown flag')
+        .pca-form-column-6
+            +preview-xml-java(model, 'igfsDualMode')