http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/checkpoint/s3.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/checkpoint/s3.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/checkpoint/s3.pug
index 88df1a8..8e284fc 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/checkpoint/s3.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/checkpoint/s3.pug
@@ -16,19 +16,19 @@
 
 include /app/helpers/jade/mixins
 
--var credentialsModel = 'model.S3.awsCredentials'
--var clientCfgModel = 'model.S3.clientConfiguration'
--var checkpointS3 = 'model.kind === "S3"'
--var checkpointS3Path = checkpointS3 + ' && model.S3.awsCredentials.kind === 
"Properties"'
--var checkpointS3Custom = checkpointS3 + ' && model.S3.awsCredentials.kind === 
"Custom"'
+-var credentialsModel = '$checkpointSPI.S3.awsCredentials'
+-var clientCfgModel = '$checkpointSPI.S3.clientConfiguration'
+-var checkpointS3 = '$checkpointSPI.kind === "S3"'
+-var checkpointS3Path = checkpointS3 + ' && 
$checkpointSPI.S3.awsCredentials.kind === "Properties"'
+-var checkpointS3Custom = checkpointS3 + ' && 
$checkpointSPI.S3.awsCredentials.kind === "Custom"'
 
 -var clientRetryModel = clientCfgModel + '.retryPolicy'
 -var checkpointS3DefaultMaxRetry = checkpointS3 + ' && ' + clientRetryModel + 
'.kind === "DefaultMaxRetries"'
 -var checkpointS3DynamoDbMaxRetry = checkpointS3 + ' && ' + clientRetryModel + 
'.kind === "DynamoDBMaxRetries"'
 -var checkpointS3CustomRetry = checkpointS3 + ' && ' + clientRetryModel + 
'.kind === "Custom"'
 
-.settings-row
-    +dropdown-required('AWS credentials:', 'model.S3.awsCredentials.kind', 
'"checkpointS3AwsCredentials"', 'true', checkpointS3, 'Custom', '[\
+.pc-form-grid-col-60(ng-if-start='$checkpointSPI.kind === "S3"')
+    +dropdown-required('AWS credentials:', 
'$checkpointSPI.S3.awsCredentials.kind', '"checkpointS3AwsCredentials"', 
'true', checkpointS3, 'Custom', '[\
         {value: "Basic", label: "Basic"},\
         {value: "Properties", label: "Properties"},\
         {value: "Anonymous", label: "Anonymous"},\
@@ -43,31 +43,33 @@ include /app/helpers/jade/mixins
         <li>Database - Session credentials with keys and session token</li>\
         <li>Custom - Custom AWS credentials provider</li>\
     </ul>')
-.settings-row
-    label Note, AWS credentials will be generated as stub
-.panel-details(ng-show=checkpointS3Path)
-    .details-row
+.pc-form-group.pc-form-grid-row(ng-if=checkpointS3Path)
+    .pc-form-grid-col-60
         +text('Path:', credentialsModel + '.Properties.path', 
'"checkpointS3PropertiesPath"', checkpointS3Path, 'Input properties file path',
         'The file from which to read the AWS credentials properties')
-.panel-details(ng-show=checkpointS3Custom)
-    .details-row
-        +java-class('Class name:', credentialsModel + '.Custom.className', 
'"checkpointS3CustomClassName" + $index', 'true', checkpointS3Custom,
+.pc-form-group.pc-form-grid-row(ng-if=checkpointS3Custom)
+    .pc-form-grid-col-60
+        +java-class('Class name:', credentialsModel + '.Custom.className', 
'"checkpointS3CustomClassName"', 'true', checkpointS3Custom,
         'Custom AWS credentials provider implementation class', 
checkpointS3Custom)
-.settings-row
-    +text('Bucket name suffix:', 'model.S3.bucketNameSuffix', 
'"checkpointS3BucketNameSuffix"', 'false', 'default-bucket', 'Bucket name 
suffix')
-.settings-row(ng-if-start=`$ctrl.available("2.4.0")`)
-    +text('Bucket endpoint:', `model.S3.bucketEndpoint`, 
'"checkpointS3BucketEndpoint"', false, 'Input bucket endpoint',
+.pc-form-grid-col-60
+    label Note, AWS credentials will be generated as stub
+.pc-form-grid-col-60
+    +text('Bucket name suffix:', '$checkpointSPI.S3.bucketNameSuffix', 
'"checkpointS3BucketNameSuffix"', 'false', 'default-bucket')
+.pc-form-grid-col-60(ng-if-start=`$ctrl.available("2.4.0")`)
+    +text('Bucket endpoint:', `$checkpointSPI.S3.bucketEndpoint`, 
'"checkpointS3BucketEndpoint"', false, 'Input bucket endpoint',
     'Bucket endpoint for IP finder<br/> \
     For information about possible endpoint names visit <a 
href="http://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region";>docs.aws.amazon.com</a>')
-.settings-row(ng-if-end)
-    +text('SSE algorithm:', `model.S3.SSEAlgorithm`, 
'"checkpointS3SseAlgorithm"', false, 'Input SSE algorithm',
+.pc-form-grid-col-60(ng-if-end)
+    +text('SSE algorithm:', `$checkpointSPI.S3.SSEAlgorithm`, 
'"checkpointS3SseAlgorithm"', false, 'Input SSE algorithm',
     'Server-side encryption algorithm for Amazon S3-managed encryption 
keys<br/> \
     For information about possible S3-managed encryption keys visit <a 
href="http://docs.aws.amazon.com/AmazonS3/latest/dev/UsingServerSideEncryption.html";>docs.aws.amazon.com</a>')
-.settings-row
-    +java-class('Listener:', 'model.S3.checkpointListener', 
'"checkpointS3Listener" + $index', 'true', 'false',
+.pc-form-grid-col-60
+    +java-class('Listener:', '$checkpointSPI.S3.checkpointListener', 
'"checkpointS3Listener"', 'true', 'false',
         'Checkpoint listener implementation class name', checkpointS3)
-+showHideLink('s3Expanded', 'client configuration')
-    .details-row
+.pc-form-grid-col-60.pc-form-group__text-title
+    span Client configuration
+.pc-form-group.pc-form-grid-row(ng-if-end)
+    .pc-form-grid-col-30
         +dropdown('Protocol:', clientCfgModel + '.protocol', 
'"checkpointS3Protocol"', 'true', 'HTTPS', '[\
                 {value: "HTTP", label: "HTTP"},\
                 {value: "HTTPS", label: "HTTPS"}\
@@ -79,37 +81,37 @@ include /app/helpers/jade/mixins
             <li>HTTPS - Using the HTTPS protocol is more secure than using the 
HTTP protocol, but\
                 may use slightly more system resources. AWS recommends using 
HTTPS for maximize security</li>\
         </ul>')
-    .details-row
+    .pc-form-grid-col-30
         +number('Maximum connections:', clientCfgModel + '.maxConnections', 
'"checkpointS3MaxConnections"',
         'true', '50', '1', 'Maximum number of allowed open HTTP connections')
-    .details-row
+    .pc-form-grid-col-60
         +text('User agent prefix:', clientCfgModel + '.userAgentPrefix', 
'"checkpointS3UserAgentPrefix"', 'false', 'System specific header',
         'HTTP user agent prefix to send with all requests')
-    .details-row
+    .pc-form-grid-col-60
         +text('User agent suffix:', clientCfgModel + '.userAgentSuffix', 
'"checkpointS3UserAgentSuffix"', 'false', 'System specific header',
         'HTTP user agent suffix to send with all requests')
-    .details-row
+    .pc-form-grid-col-60
         +text-ip-address('Local address:', clientCfgModel + '.localAddress', 
'"checkpointS3LocalAddress"', 'true', 'Not specified',
         'Optionally specifies the local address to bind to')
-    .details-row
+    .pc-form-grid-col-40
         +text('Proxy host:', clientCfgModel + '.proxyHost', 
'"checkpointS3ProxyHost"', 'false', 'Not specified',
         'Optional proxy host the client will connect through')
-    .details-row
+    .pc-form-grid-col-20
         +number('Proxy port:', clientCfgModel + '.proxyPort', 
'"checkpointS3ProxyPort"', 'true', 'Not specified', '0',
         'Optional proxy port the client will connect through')
-    .details-row
+    .pc-form-grid-col-30
         +text('Proxy user:', clientCfgModel + '.proxyUsername', 
'"checkpointS3ProxyUsername"', 'false', 'Not specified',
         'Optional proxy user name to use if connecting through a proxy')
-    .details-row
+    .pc-form-grid-col-30
         +text('Proxy domain:', clientCfgModel + '.proxyDomain', 
'"checkpointS3ProxyDomain"', 'false', 'Not specified',
         'Optional Windows domain name for configuring an NTLM proxy')
-    .details-row
+    .pc-form-grid-col-60
         +text('Proxy workstation:', clientCfgModel + '.proxyWorkstation', 
'"checkpointS3ProxyWorkstation"', 'false', 'Not specified',
         'Optional Windows workstation name for configuring NTLM proxy support')
-    .details-row
+    .pc-form-grid-col-60
         +text('Non proxy hosts:', clientCfgModel + '.nonProxyHosts', 
'"checkpointS3NonProxyHosts"', 'false', 'Not specified',
         'Optional hosts the client will access without going through the 
proxy')
-    .details-row
+    .pc-form-grid-col-60
         +dropdown('Retry policy:', clientRetryModel + '.kind', 
'"checkpointS3RetryPolicy"', 'true', 'Default', '[\
                                             {value: "Default", label: "Default 
SDK retry policy"},\
                                             {value: "DefaultMaxRetries", 
label: "Default with the specified max retry count"},\
@@ -125,78 +127,78 @@ include /app/helpers/jade/mixins
             <li>DynamoDB with the specified max retry count - This policy will 
honor the maxErrorRetry set in ClientConfiguration with the specified max retry 
count</li>\
             <li>Custom configured - Custom configured SDK retry policy</li>\
         </ul>')
-    .panel-details(ng-show=checkpointS3DefaultMaxRetry)
-        .details-row
+    .pc-form-group.pc-form-grid-row(ng-if=checkpointS3DefaultMaxRetry)
+        .pc-form-grid-col-60
             +number-required('Maximum retry attempts:', clientRetryModel + 
'.DefaultMaxRetries.maxErrorRetry', '"checkpointS3DefaultMaxErrorRetry"', 
'true', checkpointS3DefaultMaxRetry, '-1', '1',
             'Maximum number of retry attempts for failed requests')
-    .panel-details(ng-show=checkpointS3DynamoDbMaxRetry)
-        .details-row
+    .pc-form-group.pc-form-grid-row(ng-if=checkpointS3DynamoDbMaxRetry)
+        .pc-form-grid-col-60
             +number-required('Maximum retry attempts:', clientRetryModel + 
'.DynamoDBMaxRetries.maxErrorRetry', '"checkpointS3DynamoDBMaxErrorRetry"', 
'true', checkpointS3DynamoDbMaxRetry, '-1', '1',
             'Maximum number of retry attempts for failed requests')
-    .panel-details(ng-show=checkpointS3CustomRetry)
-        .details-row
-            +java-class('Retry condition:', clientRetryModel + 
'.Custom.retryCondition', '"checkpointS3CustomRetryPolicy" + $index', 'true', 
checkpointS3CustomRetry,
+    .pc-form-group.pc-form-grid-row(ng-if=checkpointS3CustomRetry)
+        .pc-form-grid-col-60
+            +java-class('Retry condition:', clientRetryModel + 
'.Custom.retryCondition', '"checkpointS3CustomRetryPolicy"', 'true', 
checkpointS3CustomRetry,
             'Retry condition on whether a specific request and exception 
should be retried', checkpointS3CustomRetry)
-        .details-row
-            +java-class('Backoff strategy:', clientRetryModel + 
'.Custom.backoffStrategy', '"checkpointS3CustomBackoffStrategy" + $index', 
'true', checkpointS3CustomRetry,
+        .pc-form-grid-col-60
+            +java-class('Backoff strategy:', clientRetryModel + 
'.Custom.backoffStrategy', '"checkpointS3CustomBackoffStrategy"', 'true', 
checkpointS3CustomRetry,
             'Back-off strategy for controlling how long the next retry should 
wait', checkpointS3CustomRetry)
-        .details-row
+        .pc-form-grid-col-60
             +number-required('Maximum retry attempts:', clientRetryModel + 
'.Custom.maxErrorRetry', '"checkpointS3CustomMaxErrorRetry"', 'true', 
checkpointS3CustomRetry, '-1', '1',
             'Maximum number of retry attempts for failed requests')
-        .details-row
+        .pc-form-grid-col-60
             +checkbox('Honor the max error retry set', clientRetryModel + 
'.Custom.honorMaxErrorRetryInClientConfig', 
'"checkpointS3CustomHonorMaxErrorRetryInClientConfig"',
             'Whether this retry policy should honor the max error retry set by 
ClientConfiguration#setMaxErrorRetry(int)')
-    .details-row
+    .pc-form-grid-col-60
         +number('Maximum retry attempts:', clientCfgModel + '.maxErrorRetry', 
'"checkpointS3MaxErrorRetry"', 'true', '-1', '0',
         'Maximum number of retry attempts for failed retryable requests<br/>\
         If -1 the configured RetryPolicy will be used to control the retry 
count')
-    .details-row
+    .pc-form-grid-col-30
         +number('Socket timeout:', clientCfgModel + '.socketTimeout', 
'"checkpointS3SocketTimeout"', 'true', '50000', '0',
         'Amount of time in milliseconds to wait for data to be transfered over 
an established, open connection before the connection times out and is 
closed<br/>\
         A value of <b>0</b> means infinity')
-    .details-row
+    .pc-form-grid-col-30
         +number('Connection timeout:', clientCfgModel + '.connectionTimeout', 
'"checkpointS3ConnectionTimeout"', 'true', '50000', '0',
         'Amount of time in milliseconds to wait when initially establishing a 
connection before giving up and timing out<br/>\
         A value of <b>0</b> means infinity')
-    .details-row
+    .pc-form-grid-col-30
         +number('Request timeout:', clientCfgModel + '.requestTimeout', 
'"checkpointS3RequestTimeout"', 'true', '0', '-1',
         'Amount of time in milliseconds to wait for the request to complete 
before giving up and timing out<br/>\
         A non - positive value means infinity')
-    .details-row
+    .pc-form-grid-col-30
+        +number('Idle timeout:', clientCfgModel + '.connectionMaxIdleMillis', 
'"checkpointS3ConnectionMaxIdleMillis"', 'true', '60000', '0',
+        'Maximum amount of time that an idle connection may sit in the 
connection pool and still be eligible for reuse')
+    .pc-form-grid-col-30
         +text('Signature algorithm:', clientCfgModel + '.signerOverride', 
'"checkpointS3SignerOverride"', 'false', 'Not specified',
         'Name of the signature algorithm to use for signing requests made by 
this client')
-    .details-row
+    .pc-form-grid-col-30
         +number('Connection TTL:', clientCfgModel + '.connectionTTL', 
'"checkpointS3ConnectionTTL"', 'true', '-1', '-1',
         'Expiration time in milliseconds for a connection in the connection 
pool<br/>\
         By default, it is set to <b>-1</b>, i.e. connections do not expire')
-    .details-row
-        +number('Idle timeout:', clientCfgModel + '.connectionMaxIdleMillis', 
'"checkpointS3ConnectionMaxIdleMillis"', 'true', '60000', '0',
-        'Maximum amount of time that an idle connection may sit in the 
connection pool and still be eligible for reuse')
-    .details-row
-        +java-class('DNS resolver:', clientCfgModel + '.dnsResolver', 
'"checkpointS3DnsResolver" + $index', 'true', 'false',
+    .pc-form-grid-col-60
+        +java-class('DNS resolver:', clientCfgModel + '.dnsResolver', 
'"checkpointS3DnsResolver"', 'true', 'false',
         'DNS Resolver that should be used to for resolving AWS IP addresses', 
checkpointS3)
-    .details-row
+    .pc-form-grid-col-60
         +number('Response metadata cache size:', clientCfgModel + 
'.responseMetadataCacheSize', '"checkpointS3ResponseMetadataCacheSize"', 
'true', '50', '0',
         'Response metadata cache size')
-    .details-row
-        +java-class('SecureRandom class name:', clientCfgModel + 
'.secureRandom', '"checkpointS3SecureRandom" + $index', 'true', 'false',
+    .pc-form-grid-col-60
+        +java-class('SecureRandom class name:', clientCfgModel + 
'.secureRandom', '"checkpointS3SecureRandom"', 'true', 'false',
         'SecureRandom to be used by the SDK class name', checkpointS3)
-    .details-row
+    .pc-form-grid-col-60
         +number('Client execution timeout:', clientCfgModel + 
'.clientExecutionTimeout', '"checkpointS3ClientExecutionTimeout"', 'true', '0', 
'0',
         'Amount of time in milliseconds to allow the client to complete the 
execution of an API call<br/>\
         <b>0</b> value disables that feature')
-    .details-row
+    .pc-form-grid-col-60
         +checkbox('Cache response metadata', clientCfgModel + 
'.cacheResponseMetadata', '"checkpointS3CacheResponseMetadata"', 'Cache 
response metadata')
-    .details-row
+    .pc-form-grid-col-60
         +checkbox('Use expect continue', clientCfgModel + 
'.useExpectContinue', '"checkpointS3UseExpectContinue"', 'Optional override to 
enable/disable support for HTTP/1.1 handshake utilizing EXPECT: 100-Continue')
-    .details-row
+    .pc-form-grid-col-60
         +checkbox('Use throttle retries', clientCfgModel + 
'.useThrottleRetries', '"checkpointS3UseThrottleRetries"', 'Retry throttling 
will be used')
-    .details-row
+    .pc-form-grid-col-60
         +checkbox('Use reaper', clientCfgModel + '.useReaper', 
'"checkpointS3UseReaper"', 'Checks if the IdleConnectionReaper is to be 
started')
-    .details-row
+    .pc-form-grid-col-60
         +checkbox('Use GZIP', clientCfgModel + '.useGzip', 
'"checkpointS3UseGzip"', 'Checks if gzip compression is used')
-    .details-row
+    .pc-form-grid-col-60
         +checkbox('Preemptively basic authentication', clientCfgModel + 
'.preemptiveBasicProxyAuth', '"checkpointS3PreemptiveBasicProxyAuth"',
         'Attempt to authenticate preemptively against proxy servers using 
basic authentication')
-    .details-row
+    .pc-form-grid-col-60
         +checkbox('TCP KeepAlive', clientCfgModel + '.useTcpKeepAlive', 
'"checkpointS3UseTcpKeepAlive"', 'TCP KeepAlive support is enabled')

http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/client-connector.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/client-connector.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/client-connector.pug
index c90cc45..5421255 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/client-connector.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/client-connector.pug
@@ -17,68 +17,63 @@
 include /app/helpers/jade/mixins
 
 -var form = 'clientConnector'
--var model = 'backupItem'
+-var model = '$ctrl.clonedCluster'
 -var connectionModel = `${model}.clientConnectorConfiguration`
 -var connectionEnabled = `${connectionModel}.enabled`
 -var sslEnabled = `${connectionEnabled} && ${connectionModel}.sslEnabled`
 -var sslFactoryEnabled = `${sslEnabled} && 
!${connectionModel}.useIgniteSslContextFactory`
 
-.panel.panel-default(ng-show='$ctrl.available("2.3.0")' ng-form=form 
novalidate)
-    .panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
+.pca-panel.pca-panel-default(ng-show='$ctrl.available("2.3.0")' ng-form=form 
novalidate)
+    .pca-panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
         ignite-form-panel-chevron
-        label Client connector configuration
-        ignite-form-field-tooltip.tipLabel
-            | Client connector configuration
-        ignite-form-revert
-    .panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .panel-body(ng-if=`$ctrl.available("2.3.0") && 
ui.isPanelLoaded('${form}')`)
-            .col-sm-6
-                .settings-row
+        .pca-panel-heading-title Client connector configuration
+    .pca-panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
+        .pca-panel-body(ng-if=`$ctrl.available("2.3.0") && 
ui.isPanelLoaded('${form}')`).pca-form-row
+            .pca-form-column-6.pc-form-grid-row
+                .pc-form-grid-col-60
                     +checkbox('Enabled', connectionEnabled, 
'"ClientConnectorEnabled"', 'Flag indicating whether to configure client 
connector configuration')
-                .settings-row
-                    +text-enabled('Host:', `${connectionModel}.host`, 
'"ClientConnectorHost"', connectionEnabled, 'false', 'localhost', 'Host')
-                .settings-row
-                    +number('Port:', `${connectionModel}.port`, 
'"ClientConnectorPort"', connectionEnabled, '10800', '1025', 'Port')
-                .settings-row
-                    +number('Port range:', `${connectionModel}.portRange`, 
'"ClientConnectorPortRange"', connectionEnabled, '100', '0', 'Port range')
-                .settings-row
+                .pc-form-grid-col-40
+                    +text-enabled('Host:', `${connectionModel}.host`, 
'"ClientConnectorHost"', connectionEnabled, 'false', 'localhost')
+                .pc-form-grid-col-20
+                    +number('Port:', `${connectionModel}.port`, 
'"ClientConnectorPort"', connectionEnabled, '10800', '1025')
+                .pc-form-grid-col-20
+                    +number('Port range:', `${connectionModel}.portRange`, 
'"ClientConnectorPortRange"', connectionEnabled, '100', '0')
+                .pc-form-grid-col-20
                     +number('Socket send buffer size:', 
`${connectionModel}.socketSendBufferSize`, 
'"ClientConnectorSocketSendBufferSize"', connectionEnabled, '0', '0',
                         'Socket send buffer size<br/>\
                         When set to <b>0</b>, operation system default will be 
used')
-                .settings-row
+                .pc-form-grid-col-20
                     +number('Socket receive buffer size:', 
`${connectionModel}.socketReceiveBufferSize`, 
'"ClientConnectorSocketReceiveBufferSize"', connectionEnabled, '0', '0',
                         'Socket receive buffer size<br/>\
                         When set to <b>0</b>, operation system default will be 
used')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Max connection cursors:', 
`${connectionModel}.maxOpenCursorsPerConnection`, 
'"ClientConnectorMaxOpenCursorsPerConnection"', connectionEnabled, '128', '0',
                         'Max number of opened cursors per connection')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Pool size:', `${connectionModel}.threadPoolSize`, 
'"ClientConnectorThreadPoolSize"', connectionEnabled, 'max(8, 
availableProcessors)', '1',
                         'Size of thread pool that is in charge of processing 
SQL requests')
-                .settings-row(ng-if='$ctrl.available("2.4.0")')
+                .pc-form-grid-col-60
+                    +checkbox-enabled('TCP_NODELAY option', 
`${connectionModel}.tcpNoDelay`, '"ClientConnectorTcpNoDelay"', 
connectionEnabled)
+                .pc-form-grid-col-60(ng-if='$ctrl.available("2.4.0")')
                     +number('Idle timeout:', `${connectionModel}.idleTimeout`, 
'"ClientConnectorIdleTimeout"', connectionEnabled, '0', '-1',
                         'Idle timeout for client connections<br/>\
                         Zero or negative means no timeout')
-                div(ng-if='$ctrl.available("2.5.0")')
-                    .settings-row
-                        +checkbox-enabled('Enable SSL', 
`${connectionModel}.sslEnabled`, '"ClientConnectorSslEnabled"', 
connectionEnabled, 'Enable secure socket layer on client connector')
-                    .settings-row
-                        +checkbox-enabled('Enable SSL client auth', 
`${connectionModel}.sslClientAuth`, '"ClientConnectorSslClientAuth"', 
sslEnabled, 'Flag indicating whether or not SSL client authentication is 
required')
-                    .settings-row
-                        +checkbox-enabled('Use Ignite SSL', 
`${connectionModel}.useIgniteSslContextFactory`, 
'"ClientConnectorUseIgniteSslContextFactory"', sslEnabled, 'Use SSL factory 
Ignite configuration')
-                    .settings-row
-                        +java-class('SSL factory:', 
`${connectionModel}.sslContextFactory`, '"ClientConnectorSslContextFactory"', 
sslFactoryEnabled, sslFactoryEnabled,
-                        'If SSL factory specified then replication will be 
performed through secure SSL channel created with this factory<br/>\
-                        If not present <b>isUseIgniteSslContextFactory()</b> 
flag will be evaluated<br/>\
-                        If set to <b>true</b> and 
<b>IgniteConfiguration#getSslContextFactory()</b> exists, then Ignite SSL 
context factory will be used to establish secure connection')
-                .settings-row
-                    +checkbox-enabled('TCP_NODELAY option', 
`${connectionModel}.tcpNoDelay`, '"ClientConnectorTcpNoDelay"', 
connectionEnabled, 'Value for TCP_NODELAY socket option')
-                div(ng-if='$ctrl.available("2.4.0")')
-                    .settings-row
-                        +checkbox-enabled('JDBC Enabled', 
`${connectionModel}.jdbcEnabled`, '"ClientConnectorJdbcEnabled"', 
connectionEnabled, 'Access through JDBC is enabled')
-                    .settings-row
-                        +checkbox-enabled('ODBC Enabled', 
`${connectionModel}.odbcEnabled`, '"ClientConnectorOdbcEnabled"', 
connectionEnabled, 'Access through ODBC is enabled')
-                    .settings-row
-                        +checkbox-enabled('Thin client enabled', 
`${connectionModel}.thinClientEnabled`, '"ClientConnectorThinCliEnabled"', 
connectionEnabled, 'Access through thin client is enabled')
-            .col-sm-6
+                .pc-form-grid-col-60(ng-if-start='$ctrl.available("2.5.0")')
+                    +checkbox-enabled('Enable SSL', 
`${connectionModel}.sslEnabled`, '"ClientConnectorSslEnabled"', 
connectionEnabled, 'Enable secure socket layer on client connector')
+                .pc-form-grid-col-60
+                    +checkbox-enabled('Enable SSL client auth', 
`${connectionModel}.sslClientAuth`, '"ClientConnectorSslClientAuth"', 
sslEnabled, 'Flag indicating whether or not SSL client authentication is 
required')
+                .pc-form-grid-col-60
+                    +checkbox-enabled('Use Ignite SSL', 
`${connectionModel}.useIgniteSslContextFactory`, 
'"ClientConnectorUseIgniteSslContextFactory"', sslEnabled, 'Use SSL factory 
Ignite configuration')
+                .pc-form-grid-col-60(ng-if-end)
+                    +java-class('SSL factory:', 
`${connectionModel}.sslContextFactory`, '"ClientConnectorSslContextFactory"', 
sslFactoryEnabled, sslFactoryEnabled,
+                    'If SSL factory specified then replication will be 
performed through secure SSL channel created with this factory<br/>\
+                    If not present <b>isUseIgniteSslContextFactory()</b> flag 
will be evaluated<br/>\
+                    If set to <b>true</b> and 
<b>IgniteConfiguration#getSslContextFactory()</b> exists, then Ignite SSL 
context factory will be used to establish secure connection')
+                .pc-form-grid-col-60(ng-if-start='$ctrl.available("2.4.0")')
+                    +checkbox-enabled('JDBC Enabled', 
`${connectionModel}.jdbcEnabled`, '"ClientConnectorJdbcEnabled"', 
connectionEnabled, 'Access through JDBC is enabled')
+                .pc-form-grid-col-60
+                    +checkbox-enabled('ODBC Enabled', 
`${connectionModel}.odbcEnabled`, '"ClientConnectorOdbcEnabled"', 
connectionEnabled, 'Access through ODBC is enabled')
+                .pc-form-grid-col-60(ng-if-end)
+                    +checkbox-enabled('Thin client enabled', 
`${connectionModel}.thinClientEnabled`, '"ClientConnectorThinCliEnabled"', 
connectionEnabled, 'Access through thin client is enabled')
+            .pca-form-column-6
                 +preview-xml-java(model, 'clusterClientConnector')

http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/collision.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision.pug
index 2f58e0a..be07cfd 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision.pug
@@ -17,21 +17,20 @@
 include /app/helpers/jade/mixins
 
 -var form = 'collision'
--var model = 'backupItem.collision'
+-var model = '$ctrl.clonedCluster.collision'
 -var modelCollisionKind = model + '.kind';
 
-.panel.panel-default(ng-form=form novalidate)
-    .panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
+.pca-panel.pca-panel-default(ng-form=form novalidate)
+    .pca-panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
         ignite-form-panel-chevron
-        label Collision configuration
-        ignite-form-field-tooltip.tipLabel
-            | Configuration Collision SPI allows to regulate how grid jobs get 
executed when they arrive on a destination node for execution#[br]
-            | #[a(href="https://apacheignite.readme.io/docs/job-scheduling"; 
target="_blank") More info]
-        ignite-form-revert
-    .panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .panel-body(ng-if=`ui.isPanelLoaded('${form}')`)
-            .col-sm-6
-                .settings-row
+        .pca-panel-heading-title Collision configuration
+        .pca-panel-heading-description
+            | Configuration Collision SPI allows to regulate how grid jobs get 
executed when they arrive on a destination node for execution. 
+            | 
#[a.link-success(href="https://apacheignite.readme.io/docs/job-scheduling"; 
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-60
                     +dropdown('CollisionSpi:', modelCollisionKind, 
'"collisionKind"', 'true', '',
                         '[\
                             {value: "JobStealing", label: "Job stealing"},\
@@ -48,16 +47,15 @@ include /app/helpers/jade/mixins
                             <li>Custom - custom CollisionSpi 
implementation</li>\
                             <li>Default - jobs are activated immediately on 
arrival to mapped node</li>\
                         </ul>')
-                .settings-row(ng-show=`${modelCollisionKind} !== 'Noop'`)
-                    .panel-details
-                        div(ng-show=`${modelCollisionKind} === 'JobStealing'`)
-                            include ./collision/job-stealing
-                        div(ng-show=`${modelCollisionKind} === 'FifoQueue'`)
-                            include ./collision/fifo-queue
-                        div(ng-show=`${modelCollisionKind} === 
'PriorityQueue'`)
-                            include ./collision/priority-queue
-                        div(ng-show=`${modelCollisionKind} === 'Custom'`)
-                            include ./collision/custom
-            .col-sm-6
-                -var model = 'backupItem.collision'
+                .pc-form-group(ng-show=`${modelCollisionKind} !== 'Noop'`)
+                    .pc-form-grid-row(ng-show=`${modelCollisionKind} === 
'JobStealing'`)
+                        include ./collision/job-stealing
+                    .pc-form-grid-row(ng-show=`${modelCollisionKind} === 
'FifoQueue'`)
+                        include ./collision/fifo-queue
+                    .pc-form-grid-row(ng-show=`${modelCollisionKind} === 
'PriorityQueue'`)
+                        include ./collision/priority-queue
+                    .pc-form-grid-row(ng-show=`${modelCollisionKind} === 
'Custom'`)
+                        include ./collision/custom
+            .pca-form-column-6
+                -var model = '$ctrl.clonedCluster.collision'
                 +preview-xml-java(model, 'clusterCollision')

http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/custom.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/custom.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/custom.pug
index dc5dee0..c1d11d5 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/custom.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/custom.pug
@@ -16,9 +16,8 @@
 
 include /app/helpers/jade/mixins
 
--var model = 'backupItem.collision.Custom'
--var required = 'backupItem.collision.kind === "Custom"'
+-var model = '$ctrl.clonedCluster.collision.Custom'
+-var required = '$ctrl.clonedCluster.collision.kind === "Custom"'
 
-div
-    .details-row
-        +java-class('Class:', `${model}.class`, '"collisionCustom"', 'true', 
required, 'CollisionSpi implementation class', required)
+.pc-form-grid-col-60
+    +java-class('Class:', `${model}.class`, '"collisionCustom"', 'true', 
required, 'CollisionSpi implementation class', required)

http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/fifo-queue.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/fifo-queue.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/fifo-queue.pug
index 159b463..c009386 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/fifo-queue.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/fifo-queue.pug
@@ -16,12 +16,11 @@
 
 include /app/helpers/jade/mixins
 
--var model = 'backupItem.collision.FifoQueue'
+-var model = '$ctrl.clonedCluster.collision.FifoQueue'
 
-div
-    .details-row
-        +number('Parallel jobs number:', `${model}.parallelJobsNumber`, 
'"fifoParallelJobsNumber"', 'true', 'availableProcessors * 2', '1',
-            'Number of jobs that can be executed in parallel')
-    .details-row
-        +number('Wait jobs number:', `${model}.waitingJobsNumber`, 
'"fifoWaitingJobsNumber"', 'true', 'Integer.MAX_VALUE', '0',
-            'Maximum number of jobs that are allowed to wait in waiting queue')
+.pc-form-grid-col-30
+    +number('Parallel jobs number:', `${model}.parallelJobsNumber`, 
'"fifoParallelJobsNumber"', 'true', 'availableProcessors * 2', '1',
+        'Number of jobs that can be executed in parallel')
+.pc-form-grid-col-30
+    +number('Wait jobs number:', `${model}.waitingJobsNumber`, 
'"fifoWaitingJobsNumber"', 'true', 'Integer.MAX_VALUE', '0',
+        'Maximum number of jobs that are allowed to wait in waiting queue')

http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/job-stealing.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/job-stealing.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/job-stealing.pug
index eeb6114..f1b0a56 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/job-stealing.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/job-stealing.pug
@@ -16,48 +16,36 @@
 
 include /app/helpers/jade/mixins
 
--var model = 'backupItem.collision.JobStealing'
+-var model = '$ctrl.clonedCluster.collision.JobStealing'
 -var stealingAttributes = `${model}.stealingAttributes`
 
-div
-    .details-row
-        +number('Active jobs threshold:', `${model}.activeJobsThreshold`, 
'"jsActiveJobsThreshold"', 'true', '95', '0',
-            'Number of jobs that can be executed in parallel')
-    .details-row
-        +number('Wait jobs threshold:', `${model}.waitJobsThreshold`, 
'"jsWaitJobsThreshold"', 'true', '0', '0',
-            'Job count threshold at which this node will start stealing jobs 
from other nodes')
-    .details-row
-        +number('Message expire time:', `${model}.messageExpireTime`, 
'"jsMessageExpireTime"', 'true', '1000', '1',
-            'Message expire time in ms')
-    .details-row
-        +number('Maximum stealing attempts:', 
`${model}.maximumStealingAttempts`, '"jsMaximumStealingAttempts"', 'true', '5', 
'1',
-            'Maximum number of attempts to steal job by another node')
-    .details-row
-        +checkbox('Stealing enabled', `${model}.stealingEnabled`, 
'"jsStealingEnabled"',
-            'Node should attempt to steal jobs from other nodes')
-    .details-row
-        +java-class('External listener:', 
`${model}.externalCollisionListener`, '"jsExternalCollisionListener"', 'true', 
'false',
-            'Listener to be set for notification of external collision 
events', 'backupItem.collision.kind === "JobStealing"')
-    .details-row
-        +ignite-form-group
-            ignite-form-field-label
-                | Stealing attributes
-            ignite-form-group-tooltip
-                | Configuration parameter to enable stealing to/from only 
nodes that have these attributes set
-            
ignite-form-group-add(ng-click='tableNewItem(stealingAttributesTbl)')
-                | Add stealing attribute
-            .group-content-empty(ng-if=`!((${stealingAttributes} && 
${stealingAttributes}.length > 0) || 
tableNewItemActive(stealingAttributesTbl))`)
-                | Not defined
-            .group-content(ng-show=`(${stealingAttributes} && 
${stealingAttributes}.length > 0) || tableNewItemActive(stealingAttributesTbl)`)
-                table.links-edit(id='attributes' st-table=stealingAttributes)
-                    tbody
-                        tr(ng-repeat=`item in ${stealingAttributes} track by 
$index`)
-                            
td.col-sm-12(ng-show='!tableEditing(stealingAttributesTbl, $index)')
-                                
a.labelFormField(ng-click='tableStartEdit(backupItem, stealingAttributesTbl, 
$index)') {{item.name}} = {{item.value}}
-                                +btn-remove('tableRemove(backupItem, 
stealingAttributesTbl, $index)', '"Remove attribute"')
-                            
td.col-sm-12(ng-show='tableEditing(stealingAttributesTbl, $index)')
-                                +table-pair-edit('stealingAttributesTbl', 
'cur', 'Attribute name', 'Attribute value', false, 
'{{::stealingAttributesTbl.focusId + $index}}', '$index', '=')
-                    tfoot(ng-show='tableNewItemActive(stealingAttributesTbl)')
-                        tr
-                            td.col-sm-12
-                                +table-pair-edit('stealingAttributesTbl', 
'new', 'Attribute name', 'Attribute value', false, 
'{{::stealingAttributesTbl.focusId + $index}}', '-1', '=')
+.pc-form-grid-col-30
+    +number('Active jobs threshold:', `${model}.activeJobsThreshold`, 
'"jsActiveJobsThreshold"', 'true', '95', '0',
+        'Number of jobs that can be executed in parallel')
+.pc-form-grid-col-30
+    +number('Wait jobs threshold:', `${model}.waitJobsThreshold`, 
'"jsWaitJobsThreshold"', 'true', '0', '0',
+        'Job count threshold at which this node will start stealing jobs from 
other nodes')
+.pc-form-grid-col-30
+    +number('Message expire time:', `${model}.messageExpireTime`, 
'"jsMessageExpireTime"', 'true', '1000', '1',
+        'Message expire time in ms')
+.pc-form-grid-col-30
+    +number('Maximum stealing attempts:', `${model}.maximumStealingAttempts`, 
'"jsMaximumStealingAttempts"', 'true', '5', '1',
+        'Maximum number of attempts to steal job by another node')
+.pc-form-grid-col-60
+    +checkbox('Stealing enabled', `${model}.stealingEnabled`, 
'"jsStealingEnabled"',
+        'Node should attempt to steal jobs from other nodes')
+.pc-form-grid-col-60
+    +java-class('External listener:', `${model}.externalCollisionListener`, 
'"jsExternalCollisionListener"', 'true', 'false',
+        'Listener to be set for notification of external collision events', 
'$ctrl.clonedCluster.collision.kind === "JobStealing"')
+.pc-form-grid-col-60
+    .ignite-form-field
+        +ignite-form-field__label('Stealing attributes:', 
'"stealingAttributes"')
+            +tooltip(`Configuration parameter to enable stealing to/from only 
nodes that have these attributes set`)
+        .ignite-form-field__control
+            +list-pair-edit({
+                items: stealingAttributes,
+                keyLbl: 'Attribute name', 
+                valLbl: 'Attribute value',
+                itemName: 'stealing attribute',
+                itemsName: 'stealing attributes'
+            })

http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/priority-queue.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/priority-queue.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/priority-queue.pug
index 04056df..fd198ce 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/priority-queue.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/collision/priority-queue.pug
@@ -16,27 +16,26 @@
 
 include /app/helpers/jade/mixins
 
--var model = 'backupItem.collision.PriorityQueue'
+-var model = '$ctrl.clonedCluster.collision.PriorityQueue'
 
-div
-    .details-row
-        +number('Parallel jobs number:', `${model}.parallelJobsNumber`, 
'"priorityParallelJobsNumber"', 'true', 'availableProcessors * 2', '1',
-            'Number of jobs that can be executed in parallel')
-    .details-row
-        +number('Waiting jobs number:', `${model}.waitingJobsNumber`, 
'"priorityWaitingJobsNumber"', 'true', 'Integer.MAX_VALUE', '0',
-            'Maximum number of jobs that are allowed to wait in waiting queue')
-    .details-row
-        +text('Priority attribute key:', `${model}.priorityAttributeKey`, 
'"priorityPriorityAttributeKey"', 'false', 'grid.task.priority',
-            'Task priority attribute key')
-    .details-row
-        +text('Job priority attribute key:', 
`${model}.jobPriorityAttributeKey`, '"priorityJobPriorityAttributeKey"', 
'false', 'grid.job.priority',
-            'Job priority attribute key')
-    .details-row
-        +number('Default priority:', `${model}.defaultPriority`, 
'"priorityDefaultPriority"', 'true', '0', '0',
-            'Default priority to use if a job does not have priority attribute 
set')
-    .details-row
-        +number('Starvation increment:', `${model}.starvationIncrement`, 
'"priorityStarvationIncrement"', 'true', '1', '0',
-            'Value to increment job priority by every time a lower priority 
job gets behind a higher priority job')
-    .details-row
-        +checkbox('Starvation prevention enabled', 
`${model}.starvationPreventionEnabled`, '"priorityStarvationPreventionEnabled"',
-            'Job starvation prevention is enabled')
+.pc-form-grid-col-30
+    +number('Parallel jobs number:', `${model}.parallelJobsNumber`, 
'"priorityParallelJobsNumber"', 'true', 'availableProcessors * 2', '1',
+        'Number of jobs that can be executed in parallel')
+.pc-form-grid-col-30
+    +number('Waiting jobs number:', `${model}.waitingJobsNumber`, 
'"priorityWaitingJobsNumber"', 'true', 'Integer.MAX_VALUE', '0',
+        'Maximum number of jobs that are allowed to wait in waiting queue')
+.pc-form-grid-col-30
+    +text('Priority attribute key:', `${model}.priorityAttributeKey`, 
'"priorityPriorityAttributeKey"', 'false', 'grid.task.priority',
+        'Task priority attribute key')
+.pc-form-grid-col-30
+    +text('Job priority attribute key:', `${model}.jobPriorityAttributeKey`, 
'"priorityJobPriorityAttributeKey"', 'false', 'grid.job.priority',
+        'Job priority attribute key')
+.pc-form-grid-col-30
+    +number('Default priority:', `${model}.defaultPriority`, 
'"priorityDefaultPriority"', 'true', '0', '0',
+        'Default priority to use if a job does not have priority attribute 
set')
+.pc-form-grid-col-30
+    +number('Starvation increment:', `${model}.starvationIncrement`, 
'"priorityStarvationIncrement"', 'true', '1', '0',
+        'Value to increment job priority by every time a lower priority job 
gets behind a higher priority job')
+.pc-form-grid-col-60
+    +checkbox('Starvation prevention enabled', 
`${model}.starvationPreventionEnabled`, '"priorityStarvationPreventionEnabled"',
+        'Job starvation prevention is enabled')

http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/communication.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/communication.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/communication.pug
index 2294723..7fa92e1 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/communication.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/communication.pug
@@ -17,84 +17,121 @@
 include /app/helpers/jade/mixins
 
 -var form = 'communication'
--var model = 'backupItem'
+-var model = '$ctrl.clonedCluster'
 -var communication = model + '.communication'
 
-.panel.panel-default(ng-form=form novalidate)
-    .panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
+.pca-panel.pca-panel-default(ng-form=form novalidate)
+    .pca-panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
         ignite-form-panel-chevron
-        label Communication
-        ignite-form-field-tooltip.tipLabel
-            | Configuration of communication with other nodes by TCP/IP
-            | Provide basic plumbing to send and receive grid messages and is 
utilized for all distributed grid operations#[br]
-            | #[a(href="https://apacheignite.readme.io/docs/network-config"; 
target="_blank") More info]
-        ignite-form-revert
-    .panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .panel-body(ng-if=`ui.isPanelLoaded('${form}')`)
-            .col-sm-6
-                .settings-row
+        .pca-panel-heading-title Communication
+        .pca-panel-heading-description
+            | Configuration of communication with other nodes by TCP/IP.
+            | Provide basic plumbing to send and receive grid messages and is 
utilized for all distributed grid operations. 
+            | 
#[a.link-success(href="https://apacheignite.readme.io/docs/network-config"; 
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
                     +number('Timeout:', `${model}.networkTimeout`, 
'"commNetworkTimeout"', 'true', '5000', '1', 'Maximum timeout in milliseconds 
for network requests')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Send retry delay:', 
`${model}.networkSendRetryDelay`, '"networkSendRetryDelay"', 'true', '1000', 
'1', 'Interval in milliseconds between message send retries')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Send retry count:', 
`${model}.networkSendRetryCount`, '"networkSendRetryCount"', 'true', '3', '1', 
'Message send retries count')
-                .settings-row(ng-if='$ctrl.available(["1.0.0", "2.3.0"])')
+                .pc-form-grid-col-30(ng-if='$ctrl.available(["1.0.0", 
"2.3.0"])')
                     +number('Discovery startup delay:', 
`${model}.discoveryStartupDelay`, '"discoveryStartupDelay"', 'true', '60000', 
'1', 'This value is used to expire messages from waiting list whenever node 
discovery discrepancies happen')
-                .settings-row
+                .pc-form-grid-col-60
                     +java-class('Communication listener:', 
`${communication}.listener`, '"comListener"', 'true', 'false', 'Listener of 
communication events')
-                .settings-row
+                .pc-form-grid-col-30
                     +text-ip-address('Local IP address:', 
`${communication}.localAddress`, '"comLocalAddress"', 'true', '0.0.0.0',
                         'Local host address for socket binding<br/>\
                         If not specified use all available addres on local 
host')
-                .settings-row
+                .pc-form-grid-col-30
                     +number-min-max('Local port:', 
`${communication}.localPort`, '"comLocalPort"', 'true', '47100', '1024', 
'65535', 'Local port for socket binding')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Local port range:', 
`${communication}.localPortRange`, '"comLocalPortRange"', 'true', '100', '1', 
'Local port range for local host ports')
-                .settings-row
-                    +number-min-max('Shared memory port:', 
`${communication}.sharedMemoryPort`, '"sharedMemoryPort"', 'true', '48100', 
'-1', '65535',
-                        'Local port to accept shared memory connections<br/>\
-                        If set to <b>-1</b> shared memory communication will 
be disabled')
-                .settings-row
+                .pc-form-grid-col-30
+                    +sane-ignite-form-field-number({
+                        label: 'Shared memory port:',
+                        model: `${communication}.sharedMemoryPort`,
+                        name: '"sharedMemoryPort"',
+                        placeholder: '{{ 
::$ctrl.Clusters.sharedMemoryPort.default }}',
+                        min: '{{ ::$ctrl.Clusters.sharedMemoryPort.min }}',
+                        max: '{{ ::$ctrl.Clusters.sharedMemoryPort.max }}',
+                        tip: `Local port to accept shared memory 
connections<br/>If set to <b>-1</b> shared memory communication will be 
disabled`
+                    })(
+                        
pc-not-in-collection='::$ctrl.Clusters.sharedMemoryPort.invalidValues'
+                    )
+                        +form-field-feedback('"sharedMemoryPort"', 
'notInCollection', 'Shared memory port should be more than "{{ 
::$ctrl.Clusters.sharedMemoryPort.invalidValues[0] }}" or equal to "{{ 
::$ctrl.Clusters.sharedMemoryPort.min }}"')
+                .pc-form-grid-col-30
                     +number('Idle connection timeout:', 
`${communication}.idleConnectionTimeout`, '"idleConnectionTimeout"', 'true', 
'30000', '1',
                         'Maximum idle connection timeout upon which a 
connection to client will be closed')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Connect timeout:', 
`${communication}.connectTimeout`, '"connectTimeout"', 'true', '5000', '0', 
'Connect timeout used when establishing connection with remote nodes')
-                .settings-row
-                    +number('Maximum connect timeout:', 
`${communication}.maxConnectTimeout`, '"maxConnectTimeout"', 'true', '600000', 
'0', 'Maximum connect timeout')
-                .settings-row
+                .pc-form-grid-col-30
+                    +number('Max. connect timeout:', 
`${communication}.maxConnectTimeout`, '"maxConnectTimeout"', 'true', '600000', 
'0', 'Maximum connect timeout')
+                .pc-form-grid-col-30
                     +number('Reconnect count:', 
`${communication}.reconnectCount`, '"comReconnectCount"', 'true', '10', '1',
                         'Maximum number of reconnect attempts used when 
establishing connection with remote nodes')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Socket send buffer:', 
`${communication}.socketSendBuffer`, '"socketSendBuffer"', 'true', '32768', 
'0', 'Send buffer size for sockets created or accepted by this SPI')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Socket receive buffer:', 
`${communication}.socketReceiveBuffer`, '"socketReceiveBuffer"', 'true', 
'32768', '0', 'Receive buffer size for sockets created or accepted by this SPI')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Slow client queue limit:', 
`${communication}.slowClientQueueLimit`, '"slowClientQueueLimit"', 'true', '0', 
'0', 'Slow client queue limit')
-                .settings-row
-                    +number('Ack send threshold:', 
`${communication}.ackSendThreshold`, '"ackSendThreshold"', 'true', '16', '1', 
'Number of received messages per connection to node after which acknowledgment 
message is sent')
-                .settings-row
-                    +number('Message queue limit:', 
`${communication}.messageQueueLimit`, '"messageQueueLimit"', 'true', '1024', 
'0', 'Message queue limit for incoming and outgoing messages')
-                .settings-row
-                    +number('Unacknowledged messages:', 
`${communication}.unacknowledgedMessagesBufferSize`, 
'"unacknowledgedMessagesBufferSize"', 'true', '0', '0',
-                        'Maximum number of stored unacknowledged messages per 
connection to node<br/>\
-                        If specified non zero value it should be\
-                        <ul>\
-                            <li>At least ack send threshold * 5</li>\
-                            <li>At least message queue limit * 5</li>\
-                        </ul>')
-                .settings-row
+                .pc-form-grid-col-30
+                    +sane-ignite-form-field-number({
+                        label: 'Ack send threshold:',
+                        model: `${communication}.ackSendThreshold`,
+                        name: '"ackSendThreshold"',
+                        placeholder: '{{ 
::$ctrl.Clusters.ackSendThreshold.default }}',
+                        min: '{{ ::$ctrl.Clusters.ackSendThreshold.min }}',
+                        tip: 'Number of received messages per connection to 
node after which acknowledgment message is sent'
+                    })
+                .pc-form-grid-col-30
+                    +sane-ignite-form-field-number({
+                        label: 'Message queue limit:',
+                        model: `${communication}.messageQueueLimit`,
+                        name: '"messageQueueLimit"',
+                        placeholder: '{{ 
::$ctrl.Clusters.messageQueueLimit.default }}',
+                        min: '{{ ::$ctrl.Clusters.messageQueueLimit.min }}',
+                        tip: 'Message queue limit for incoming and outgoing 
messages'
+                    })
+                .pc-form-grid-col-30
+                    +sane-ignite-form-field-number({
+                        label: 'Unacknowledged messages:',
+                        model: 
`${communication}.unacknowledgedMessagesBufferSize`,
+                        name: '"unacknowledgedMessagesBufferSize"',
+                        placeholder: '{{ 
::$ctrl.Clusters.unacknowledgedMessagesBufferSize.default }}',
+                        min: `{{ 
$ctrl.Clusters.unacknowledgedMessagesBufferSize.min(
+                            ${communication}.unacknowledgedMessagesBufferSize,
+                            ${communication}.messageQueueLimit,
+                            ${communication}.ackSendThreshold
+                        ) }}`,
+                        tip: `Maximum number of stored unacknowledged messages 
per connection to node<br/>
+                        If specified non zero value it should be
+                        <ul>
+                            <li>At least ack send threshold * {{ 
::$ctrl.Clusters.unacknowledgedMessagesBufferSize.validRatio }}</li>
+                            <li>At least message queue limit * {{ 
::$ctrl.Clusters.unacknowledgedMessagesBufferSize.validRatio }}</li>
+                        </ul>`
+                    })(
+                        //- allowInvalid: true prevents from infinite digest 
loop when old value was 0 and becomes less than allowed minimum
+                        ng-model-options=`{
+                            allowInvalid: true
+                        }`
+                    )
+                .pc-form-grid-col-30
                     +number('Socket write timeout:', 
`${communication}.socketWriteTimeout`, '"socketWriteTimeout"', 'true', '2000', 
'0', 'Socket write timeout')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Selectors count:', 
`${communication}.selectorsCount`, '"selectorsCount"', 'true', 'min(4, 
availableProcessors)', '1', 'Count of selectors te be used in TCP server')
-                .settings-row
+                .pc-form-grid-col-60
                     +java-class('Address resolver:', 
`${communication}.addressResolver`, '"comAddressResolver"', 'true', 'false', 
'Provides resolution between external and internal addresses')
-                .settings-row
+                .pc-form-grid-col-60
                     +checkbox('Direct buffer', 
`${communication}.directBuffer`, '"directBuffer"',
                     'If value is true, then SPI will use 
ByteBuffer.allocateDirect(int) call<br/>\
                     Otherwise, SPI will use ByteBuffer.allocate(int) call')
-                .settings-row
+                .pc-form-grid-col-60
                     +checkbox('Direct send buffer', 
`${communication}.directSendBuffer`, '"directSendBuffer"', 'Flag defining 
whether direct send buffer should be used')
-                .settings-row
+                .pc-form-grid-col-60
                     +checkbox('TCP_NODELAY option', 
`${communication}.tcpNoDelay`, '"tcpNoDelay"', 'Value for TCP_NODELAY socket 
option')
-            .col-sm-6
+            .pca-form-column-6
                 +preview-xml-java(model, 'clusterCommunication')

http://git-wip-us.apache.org/repos/asf/ignite/blob/7ee1683e/modules/web-console/frontend/app/modules/states/configuration/clusters/connector.pug
----------------------------------------------------------------------
diff --git 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/connector.pug
 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/connector.pug
index 6b14816..50975b7 100644
--- 
a/modules/web-console/frontend/app/modules/states/configuration/clusters/connector.pug
+++ 
b/modules/web-console/frontend/app/modules/states/configuration/clusters/connector.pug
@@ -17,88 +17,87 @@
 include /app/helpers/jade/mixins
 
 -var form = 'connector'
--var model = 'backupItem.connector'
+-var model = '$ctrl.clonedCluster.connector'
 -var enabled = model + '.enabled'
 -var sslEnabled = enabled + ' && ' + model + '.sslEnabled'
 
-.panel.panel-default(ng-form=form novalidate)
-    .panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
+.pca-panel.pca-panel-default(ng-form=form novalidate)
+    .pca-panel-heading(bs-collapse-toggle ng-click=`ui.loadPanel('${form}')`)
         ignite-form-panel-chevron
-        label Connector configuration
-        ignite-form-field-tooltip.tipLabel
-            | Configure HTTP REST configuration to enable HTTP server 
features#[br]
-            | 
#[a(href="https://apacheignite.readme.io/docs/rest-api#general-configuration"; 
target="_blank") More info]
-        ignite-form-revert
-    .panel-collapse(role='tabpanel' bs-collapse-target id=`${form}`)
-        .panel-body(ng-if=`ui.isPanelLoaded('${form}')`)
-            .col-sm-6
-                .settings-row
+        .pca-panel-heading-title Connector configuration
+        .pca-panel-heading-description
+            | Configure HTTP REST configuration to enable HTTP server 
features. 
+            | 
#[a.link-success(href="https://apacheignite.readme.io/docs/rest-api#general-configuration";
 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-60
                     +checkbox('Enabled', enabled, '"restEnabled"', 'Flag 
indicating whether to configure connector configuration')
-                .settings-row
+                .pc-form-grid-col-60
                     +text-enabled('Jetty configuration path:', 
`${model}.jettyPath`, '"connectorJettyPath"', enabled, 'false', 'Input path to 
Jetty configuration',
                         'Path, either absolute or relative to IGNITE_HOME, to 
Jetty XML configuration file<br/>\
                         Jetty is used to support REST over HTTP protocol for 
accessing Ignite APIs remotely<br/>\
                         If not provided, Jetty instance with default 
configuration will be started picking IgniteSystemProperties.IGNITE_JETTY_HOST 
and IgniteSystemProperties.IGNITE_JETTY_PORT as host and port respectively')
-                .settings-row
+                .pc-form-grid-col-20
                     +text-ip-address('TCP host:', `${model}.host`, 
'"connectorHost"', enabled, 'IgniteConfiguration#getLocalHost()',
                         'Host for TCP binary protocol server<br/>\
                         This can be either an IP address or a domain name<br/>\
                         If not defined, system - wide local address will be 
used IgniteConfiguration#getLocalHost()<br/>\
                         You can also use "0.0.0.0" value to bind to all 
locally - available IP addresses')
-                .settings-row
+                .pc-form-grid-col-20
                     +number-min-max('TCP port:', `${model}.port`, 
'"connectorPort"', enabled, '11211', '1024', '65535', 'Port for TCP binary 
protocol server')
-                .settings-row
+                .pc-form-grid-col-20
                     +number('TCP port range:', `${model}.portRange`, 
'"connectorPortRange"', enabled, '100', '1', 'Number of ports for TCP binary 
protocol server to try if configured port is already in use')
-                .settings-row
+                .pc-form-grid-col-60
                     +number('Idle query cursor timeout:', 
`${model}.idleQueryCursorTimeout`, '"connectorIdleQueryCursorTimeout"', 
enabled, '600000', '0',
                         'Reject open query cursors that is not used 
timeout<br/>\
                         If no fetch query request come within idle timeout, it 
will be removed on next check for old query cursors')
-                .settings-row
+                .pc-form-grid-col-60
                     +number('Idle query cursor check frequency:', 
`${model}.idleQueryCursorCheckFrequency`, 
'"connectorIdleQueryCursorCheckFrequency"', enabled, '60000', '0',
                         'Idle query cursors check frequency<br/>\
                         This setting is used to reject open query cursors that 
is not used')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Idle timeout:', `${model}.idleTimeout`, 
'"connectorIdleTimeout"', enabled, '7000', '0',
                         'Idle timeout for REST server<br/>\
                         This setting is used to reject half - opened 
sockets<br/>\
                         If no packets come within idle timeout, the connection 
is closed')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Receive buffer size:', 
`${model}.receiveBufferSize`, '"connectorReceiveBufferSize"', enabled, '32768', 
'0', 'REST TCP server receive buffer size')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Send buffer size:', `${model}.sendBufferSize`, 
'"connectorSendBufferSize"', enabled, '32768', '0', 'REST TCP server send 
buffer size')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Send queue limit:', `${model}.sendQueueLimit`, 
'"connectorSendQueueLimit"', enabled, 'unlimited', '0',
                         'REST TCP server send queue limit<br/>\
                         If the limit exceeds, all successive writes will block 
until the queue has enough capacity')
-                .settings-row
+                .pc-form-grid-col-60
                     +checkbox-enabled('Direct buffer', 
`${model}.directBuffer`, '"connectorDirectBuffer"', enabled,
                         'Flag indicating whether REST TCP server should use 
direct buffers<br/>\
                         A direct buffer is a buffer that is allocated and 
accessed using native system calls, without using JVM heap<br/>\
                         Enabling direct buffer may improve performance and 
avoid memory issues(long GC pauses due to huge buffer size)')
-                .settings-row
+                .pc-form-grid-col-60
                     +checkbox-enabled('TCP_NODELAY option', 
`${model}.noDelay`, '"connectorNoDelay"', enabled,
                         'Flag indicating whether TCP_NODELAY option should be 
set for accepted client connections<br/>\
                         Setting this option reduces network latency and should 
be enabled in majority of cases<br/>\
                         For more information, see 
Socket#setTcpNoDelay(boolean)')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Selector count:', `${model}.selectorCount`, 
'"connectorSelectorCount"', enabled, 'min(4, availableProcessors)', '1',
                         'Number of selector threads in REST TCP server<br/>\
                         Higher value for this parameter may increase 
throughput, but also increases context switching')
-                .settings-row
+                .pc-form-grid-col-30
                     +number('Thread pool size:', `${model}.threadPoolSize`, 
'"connectorThreadPoolSize"', enabled, 'max(8, availableProcessors) * 2', '1',
                         'Thread pool size to use for processing of client 
messages (REST requests)')
-                .settings-row
+                .pc-form-grid-col-60
                     +java-class('Message interceptor:', 
`${model}.messageInterceptor`, '"connectorMessageInterceptor"', enabled, 
'false',
                         'Interceptor allows to transform all objects exchanged 
via REST protocol<br/>\
                         For example if you use custom serialisation on client 
you can write interceptor to transform binary representations received from 
client to Java objects and later access them from java code directly')
-                .settings-row
+                .pc-form-grid-col-60
                     +text-enabled('Secret key:', `${model}.secretKey`, 
'"connectorSecretKey"', enabled, 'false', 'Specify to enable authentication', 
'Secret key to authenticate REST requests')
-                .settings-row
+                .pc-form-grid-col-60
                     +checkbox-enabled('Enable SSL', `${model}.sslEnabled`, 
'"connectorSslEnabled"', enabled, 'Enables/disables SSL for REST TCP binary 
protocol')
-                .settings-row
+                .pc-form-grid-col-60
                     +checkbox-enabled('Enable SSL client auth', 
`${model}.sslClientAuth`, '"connectorSslClientAuth"', sslEnabled, 'Flag 
indicating whether or not SSL client authentication is required')
-                .settings-row
+                .pc-form-grid-col-60
                     +java-class('SSL factory:', `${model}.sslFactory`, 
'"connectorSslFactory"', sslEnabled, sslEnabled,
                         'Instance of Factory that will be used to create an 
instance of SSLContext for Secure Socket Layer on TCP binary protocol')
-            .col-sm-6
+            .pca-form-column-6
                 +preview-xml-java(model, 'clusterConnector')

Reply via email to