From 0ba9c3e97284f95e74a9ef969aa85a0e31f29711 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 8 Jan 2025 20:47:55 +0530
Subject: [PATCH 1/3] HDDS-12043. Mark fixed column with disabled checkbox

---
 .../src/v2/components/select/multiSelect.tsx  |  7 ++--
 .../src/v2/pages/datanodes/datanodes.tsx      | 38 +++++++++----------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
index 3dfe19f9b45..10e0c1c5bdc 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
@@ -28,6 +28,7 @@ import {
 } from 'react-select';
 
 import { selectStyles } from "@/v2/constants/select.constants";
+import { optionCSS } from "react-select/src/components/Option";
 
 
 // ------------- Types -------------- //
@@ -61,7 +62,8 @@ const Option: React.FC<OptionProps<Option, true>> = (props) => {
             marginRight: '8px',
             accentColor: '#1AA57A'
           }}
-          onChange={() => null} />
+          onChange={() => null}
+          disabled={props.isDisabled} />
         <label>{props.label}</label>
       </components.Option>
     </div>
@@ -114,14 +116,13 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
       isSearchable={false}
       controlShouldRenderValue={false}
       classNamePrefix='multi-select'
-      options={options}
+      options={options.map((opt) => ({...opt, isDisabled: (opt.value === fixedColumn)}))}
       components={{
         ValueContainer,
         Option
       }}
       placeholder={placeholder}
       value={selected}
-      isOptionDisabled={(option) => option.value === fixedColumn}
       isDisabled={isDisabled}
       onChange={(selected: ValueType<Option, true>) => {
         if (selected?.length === options.length) return onChange!(options);
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
index 33dd661d97b..e1ca6cf4160 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
@@ -273,7 +273,7 @@ const Datanodes: React.FC<{}> = () => {
               onChange={(value) => {
                 setSearchTerm('');
                 setSearchColumn(value as 'hostname' | 'uuid' | 'version' | 'revision')
-              }}/>
+              }} />
           </div>
           <DatanodesTable
             loading={loading}
@@ -283,28 +283,28 @@ const Datanodes: React.FC<{}> = () => {
             searchColumn={searchColumn}
             searchTerm={debouncedSearch}
             handleSelectionChange={handleSelectionChange}
-            decommissionUuids={decommissionUuids}/>
+            decommissionUuids={decommissionUuids} />
         </div>
       </div>
       <Modal
-          title=''
-          centered={true}
-          visible={modalOpen}
-          onOk={handleModalOk}
-          onCancel={handleModalCancel}
-          closable={false}
-          width={400} >
-            <div style={{
-              margin: '0px 0px 5px 0px',
-              fontSize: '16px',
-              fontWeight: 'bold'
-            }}
+        title=''
+        centered={true}
+        visible={modalOpen}
+        onOk={handleModalOk}
+        onCancel={handleModalCancel}
+        closable={false}
+        width={400} >
+        <div style={{
+          margin: '0px 0px 5px 0px',
+          fontSize: '16px',
+          fontWeight: 'bold'
+        }}
           data-testid='dn-remove-modal'>
-              <WarningFilled className='icon-warning' style={{paddingRight: '8px'}}/>
-              Stop Tracking Datanode
-            </div>
-            Are you sure, you want recon to stop tracking the selected <strong>{selectedRows.length}</strong> datanode(s)?
-        </Modal>
+          <WarningFilled className='icon-warning' style={{ paddingRight: '8px' }} />
+          Stop Tracking Datanode
+        </div>
+        Are you sure, you want recon to stop tracking the selected <strong>{selectedRows.length}</strong> datanode(s)?
+      </Modal>
     </>
   );
 }

From fe2ae3be59339bc18a52db7a2140c8353222b2ce Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Wed, 8 Jan 2025 20:57:36 +0530
Subject: [PATCH 2/3] Removed unused import and reindent code

---
 .../src/v2/components/select/multiSelect.tsx  |  1 -
 .../src/v2/pages/datanodes/datanodes.tsx      | 22 +++++++++----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
index 10e0c1c5bdc..03dd12b5698 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/select/multiSelect.tsx
@@ -28,7 +28,6 @@ import {
 } from 'react-select';
 
 import { selectStyles } from "@/v2/constants/select.constants";
-import { optionCSS } from "react-select/src/components/Option";
 
 
 // ------------- Types -------------- //
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
index e1ca6cf4160..32c32b14a54 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
@@ -287,23 +287,23 @@ const Datanodes: React.FC<{}> = () => {
         </div>
       </div>
       <Modal
-        title=''
-        centered={true}
-        visible={modalOpen}
-        onOk={handleModalOk}
-        onCancel={handleModalCancel}
-        closable={false}
-        width={400} >
+          title=''
+          centered={true}
+          visible={modalOpen}
+          onOk={handleModalOk}
+          onCancel={handleModalCancel}
+          closable={false}
+          width={400} >
         <div style={{
           margin: '0px 0px 5px 0px',
           fontSize: '16px',
           fontWeight: 'bold'
         }}
           data-testid='dn-remove-modal'>
-          <WarningFilled className='icon-warning' style={{ paddingRight: '8px' }} />
-          Stop Tracking Datanode
-        </div>
-        Are you sure, you want recon to stop tracking the selected <strong>{selectedRows.length}</strong> datanode(s)?
+            <WarningFilled className='icon-warning' style={{paddingRight: '8px'}}/>
+            Stop Tracking Datanode
+            </div>
+            Are you sure, you want recon to stop tracking the selected <strong>{selectedRows.length}</strong> datanode(s)?
       </Modal>
     </>
   );

From 1143d3ce9555ef070435437b5d236527292fad71 Mon Sep 17 00:00:00 2001
From: Abhishek Pal <pal.abhishek03012001@gmail.com>
Date: Fri, 10 Jan 2025 11:34:58 +0530
Subject: [PATCH 3/3] Fixed datanode extra formatting

---
 .../src/v2/pages/datanodes/datanodes.tsx      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
index 32c32b14a54..33dd661d97b 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/datanodes/datanodes.tsx
@@ -273,7 +273,7 @@ const Datanodes: React.FC<{}> = () => {
               onChange={(value) => {
                 setSearchTerm('');
                 setSearchColumn(value as 'hostname' | 'uuid' | 'version' | 'revision')
-              }} />
+              }}/>
           </div>
           <DatanodesTable
             loading={loading}
@@ -283,7 +283,7 @@ const Datanodes: React.FC<{}> = () => {
             searchColumn={searchColumn}
             searchTerm={debouncedSearch}
             handleSelectionChange={handleSelectionChange}
-            decommissionUuids={decommissionUuids} />
+            decommissionUuids={decommissionUuids}/>
         </div>
       </div>
       <Modal
@@ -294,17 +294,17 @@ const Datanodes: React.FC<{}> = () => {
           onCancel={handleModalCancel}
           closable={false}
           width={400} >
-        <div style={{
-          margin: '0px 0px 5px 0px',
-          fontSize: '16px',
-          fontWeight: 'bold'
-        }}
+            <div style={{
+              margin: '0px 0px 5px 0px',
+              fontSize: '16px',
+              fontWeight: 'bold'
+            }}
           data-testid='dn-remove-modal'>
-            <WarningFilled className='icon-warning' style={{paddingRight: '8px'}}/>
-            Stop Tracking Datanode
+              <WarningFilled className='icon-warning' style={{paddingRight: '8px'}}/>
+              Stop Tracking Datanode
             </div>
             Are you sure, you want recon to stop tracking the selected <strong>{selectedRows.length}</strong> datanode(s)?
-      </Modal>
+        </Modal>
     </>
   );
 }