GUI Issue (#3794): nodes table styling (highlight cloud nodes)

epam · Dec 20, 2024 · 9e0b40c · 9e0b40c
1 parent 621f085
commit 9e0b40c
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 46 deletions.
diff --git a/client/src/components/cluster/Cluster.css b/client/src/components/cluster/Cluster.css
@@ -55,10 +55,6 @@
   color: #666;
 }
 
-.cloud-node-row {
-  /* background: #ecf6fd; */
-}
-
 .cluster-node-row,
 .cluster-node-row-name,
 .cluster-node-row-pipeline,

diff --git a/client/src/components/cluster/Cluster.js b/client/src/components/cluster/Cluster.js
@@ -673,11 +673,11 @@ export default class Cluster extends localization.LocalizedReactComponent {
         render: (item, record) => {
           return (
             <span className={classNames({
-              'cp-primary': highlightCloudNodes && record.isCloudNode
+              // 'cp-primary': highlightCloudNodes && record.isCloudNode
             })}>
               {item}
               {highlightCloudNodes && record.isCloudNode ? (
-                <Icon style={{marginLeft: 5, fontSize: 14}} type="global" />
+                <Icon style={{marginLeft: 5, fontSize: 14}} type="cloud-o" />
               ) : null}
             </span>
           );
@@ -749,7 +749,9 @@ export default class Cluster extends localization.LocalizedReactComponent {
         rowKey="uid"
         loading={isLoading}
         pagination={{pageSize: 25}}
-        rowClassName={(item) => classNames(`cluster-row-${item.name}`)}
+        rowClassName={(item) => classNames({
+          'cp-background-not-important': item.isCloudNode
+        }, `cluster-row-${item.name}`)}
         size="small"
       />
     );

diff --git a/client/src/components/settings/AWSRegionsForm.js b/client/src/components/settings/AWSRegionsForm.js
@@ -2157,45 +2157,6 @@ class AWSRegionForm extends React.Component {
                 </Checkbox>
               )}
             </Form.Item>
-            <Form.Item
-              className={this.getFieldClassName(
-                'clusterInclude',
-                'edit-region-clusterInclude-container'
-              )}
-              {...this.defaultCheckBoxFormItemLayout}>
-              {getFieldDecorator('clusterInclude', {
-                valuePropName: 'checked',
-                initialValue: this.props.region.clusterInclude
-              })(
-                <Checkbox>
-                  Cluster include
-                </Checkbox>
-              )}
-            </Form.Item>
-            <Form.Item
-              label="Cluster state region properties"
-              hasFeedback
-              {...this.formItemLayout}
-              className={
-                this.getFieldClassName(
-                  'clusterStateRegionProperties',
-                  'edit-clusterStateRegionProperties-container'
-                )
-              }
-            >
-              {getFieldDecorator('clusterStateRegionProperties', {
-                initialValue: this.props.region.clusterStateRegionProperties,
-                rules: [{
-                  validator: this.jsonValidation
-                }]
-              })(
-                <CodeEditorFormItem
-                  ref={this.initializeClusterStateRegionPropertiesEditor}
-                  editorClassName={styles.codeEditor}
-                  editorLanguage="application/json"
-                  disabled={this.props.pending} />
-              )}
-            </Form.Item>
             <Form.Item
               label="Backup Duration"
               required={this.providerSupportsField('backupDuration')}
@@ -2398,6 +2359,45 @@ class AWSRegionForm extends React.Component {
                   disabled={this.props.pending} />
               )}
             </Form.Item>
+            <Form.Item
+              className={this.getFieldClassName(
+                'clusterInclude',
+                'edit-region-clusterInclude-container'
+              )}
+              {...this.defaultCheckBoxFormItemLayout}>
+              {getFieldDecorator('clusterInclude', {
+                valuePropName: 'checked',
+                initialValue: this.props.region.clusterInclude
+              })(
+                <Checkbox>
+                  Show standalone nodes in Cluster State
+                </Checkbox>
+              )}
+            </Form.Item>
+            <Form.Item
+              label="Standalone nodes filter"
+              hasFeedback
+              {...this.formItemLayout}
+              className={
+                this.getFieldClassName(
+                  'clusterStateRegionProperties',
+                  'edit-clusterStateRegionProperties-container'
+                )
+              }
+            >
+              {getFieldDecorator('clusterStateRegionProperties', {
+                initialValue: this.props.region.clusterStateRegionProperties,
+                rules: [{
+                  validator: this.jsonValidation
+                }]
+              })(
+                <CodeEditorFormItem
+                  ref={this.initializeClusterStateRegionPropertiesEditor}
+                  editorClassName={styles.codeEditor}
+                  editorLanguage="application/json"
+                  disabled={this.props.pending} />
+              )}
+            </Form.Item>
             <Row type="flex">
               <Col
                 xs={this.formItemLayout.labelCol.xs.span}

diff --git a/client/src/themes/styles/layout.less b/client/src/themes/styles/layout.less
@@ -476,6 +476,10 @@ h6 {
   line-height: 24px;
 }
 
+.cp-background-not-important {
+  background-color: @color-grey-semi-transparent;
+}
+
 .cp-text-not-important {
   color: @application-color-faded;
 }

diff --git a/client/src/themes/utilities/theme.less.template.js b/client/src/themes/utilities/theme.less.template.js
@@ -494,6 +494,9 @@ export default `
 @THEME .launch-form-pipeline-name-form-item .ant-form-item-title {
   line-height: 24px;
 }
+@THEME .cp-background-not-important {
+  background-color: @color-grey-semi-transparent;
+}
 @THEME .cp-text-not-important {
   color: @application-color-faded;
 }