Add unique row key to metadata table

Author: devabhishekpal

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/nuMetadata/nuMetadata.tsx

@@ -116,7 +116,8 @@ type MetadataProps = {
 
 type MetadataState = {
   key: string | React.ReactNode,
-  value: string | number | boolean | null
+  value: string | number | boolean | null,
+  rowKey: string
 }[];
 
 
@@ -168,7 +169,8 @@ const NUMetadata: React.FC<MetadataProps> = ({
         keyName = keyName.charAt(0).toUpperCase() + keyName.slice(1);
         data.push({
           key: keyName as string,
-          value: objectInfo[key as keyof ObjectInfo]
+          value: objectInfo[key as keyof ObjectInfo],
+          rowKey: keyName as string
         });
       }
     });
@@ -178,71 +180,81 @@ const NUMetadata: React.FC<MetadataProps> = ({
     if (objectInfo?.sourceBucket !== undefined && objectInfo?.sourceBucket !== null) {
       data.push({
         key: 'Source Bucket',
-        value: objectInfo.sourceBucket
+        value: objectInfo.sourceBucket,
+        rowKey: 'Source Bucket'
       });
     }
 
     if(objectInfo?.sourceVolume !== undefined && objectInfo?.sourceVolume !== null) {
       data.push({
         key: 'Source Volume',
-        value: objectInfo.sourceVolume
+        value: objectInfo.sourceVolume,
+        rowKey: 'Source Volume'
       });
     }
 
     if (objectInfo?.creationTime !== undefined && objectInfo?.creationTime !== -1) {
       data.push({
         key: 'Creation Time',
-        value: moment(objectInfo.creationTime).format('ll LTS')
+        value: moment(objectInfo.creationTime).format('ll LTS'),
+        rowKey: 'Creation Time'
       });
     }
 
     if (objectInfo?.usedBytes !== undefined && objectInfo?.usedBytes !== -1 && objectInfo!.usedBytes !== null) {
       data.push({
         key: 'Used Bytes',
-        value: byteToSize(objectInfo.usedBytes, 3)
+        value: byteToSize(objectInfo.usedBytes, 3),
+        rowKey: 'Used Bytes'
       });
     }
 
     if (objectInfo?.dataSize !== undefined && objectInfo?.dataSize !== -1) {
       data.push({
         key: 'Data Size',
-        value: byteToSize(objectInfo.dataSize, 3)
+        value: byteToSize(objectInfo.dataSize, 3),
+        rowKey: 'Data Size'
       });
     }
 
     if (objectInfo?.modificationTime !== undefined && objectInfo?.modificationTime !== -1) {
       data.push({
         key: 'Modification Time',
-        value: moment(objectInfo.modificationTime).format('ll LTS')
+        value: moment(objectInfo.modificationTime).format('ll LTS'),
+        rowKey: 'Modification Time'
       });
     }
 
     if (objectInfo?.quotaInNamespace !== undefined && objectInfo?.quotaInNamespace !== -1) {
       data.push({
         key: QuotaInNamespace,
-        value: objectInfo.quotaInNamespace
+        value: objectInfo.quotaInNamespace,
+        rowKey: 'Quota In Namespace'
       });
     }
 
     if (summaryResponse.objectInfo?.replicationConfig?.replicationFactor !== undefined) {
       data.push({
         key: 'Replication Factor',
-        value: summaryResponse.objectInfo.replicationConfig.replicationFactor
+        value: summaryResponse.objectInfo.replicationConfig.replicationFactor,
+        rowKey: 'Replication Factor'
       });
     }
 
     if (summaryResponse.objectInfo?.replicationConfig?.replicationType !== undefined) {
       data.push({
         key: 'Replication Type',
-        value: summaryResponse.objectInfo.replicationConfig.replicationType
+        value: summaryResponse.objectInfo.replicationConfig.replicationType,
+        rowKey: 'Replication Type'
       });
     }
 
     if (summaryResponse.objectInfo?.replicationConfig?.requiredNodes !== undefined
       && summaryResponse.objectInfo?.replicationConfig?.requiredNodes !== -1) {
       data.push({
         key: 'Replication Required Nodes',
-        value: summaryResponse.objectInfo.replicationConfig.requiredNodes
+        value: summaryResponse.objectInfo.replicationConfig.requiredNodes,
+        rowKey: 'Replication Required Nodes'
       });
     }
 
@@ -273,7 +285,8 @@ const NUMetadata: React.FC<MetadataProps> = ({
         // Summary Response data section
         data.push({
           key: 'Entity Type',
-          value: summaryResponse.type
+          value: summaryResponse.type,
+          rowKey: 'Entity Type'
         });
 
         // If the entity is a Key then fetch the Key metadata only
@@ -282,16 +295,20 @@ const NUMetadata: React.FC<MetadataProps> = ({
             const usageResponse: any = await fetchData(`/api/v1/namespace/usage?path=${path}&replica=true`);
             data.push(...[{
               key: 'File Size',
-              value: byteToSize(usageResponse.size, 3)
+              value: byteToSize(usageResponse.size, 3),
+              rowKey: 'File Size'
             }, {
               key: 'File Size With Replication',
-              value: byteToSize(usageResponse.sizeWithReplica, 3)
+              value: byteToSize(usageResponse.sizeWithReplica, 3),
+              rowKey: 'File Size With Replication'
             }, {
               key: 'Creation Time',
-              value: moment(summaryResponse.objectInfo.creationTime).format('ll LTS')
+              value: moment(summaryResponse.objectInfo.creationTime).format('ll LTS'),
+              rowKey: 'Creation Time'
             }, {
               key: 'Modification Time',
-              value: moment(summaryResponse.objectInfo.modificationTime).format('ll LTS')
+              value: moment(summaryResponse.objectInfo.modificationTime).format('ll LTS'),
+              rowKey: 'Modification Time'
             }]);
             setState(data);
             return;
@@ -319,7 +336,8 @@ const NUMetadata: React.FC<MetadataProps> = ({
             && countStats[key as keyof CountStats] !== -1) {
             data.push({
               key: keyToNameMap[key],
-              value: countStats[key as keyof CountStats]
+              value: countStats[key as keyof CountStats],
+              rowKey: keyToNameMap[key]
             });
           }
         });
@@ -341,14 +359,16 @@ const NUMetadata: React.FC<MetadataProps> = ({
         if (quotaResponse.allowed !== undefined && quotaResponse.allowed !== -1) {
           data.push({
             key: QuotaAllowed,
-            value: byteToSize(quotaResponse.allowed, 3)
+            value: byteToSize(quotaResponse.allowed, 3),
+            rowKey: 'Quota Allowed'
           });
         }
 
         if (quotaResponse.used !== undefined && quotaResponse.used !== -1) {
           data.push({
             key: QuotaUsed,
-            value: byteToSize(quotaResponse.used, 3)
+            value: byteToSize(quotaResponse.used, 3),
+            rowKey: 'Quota Used'
           });
         }
       }
@@ -385,6 +405,7 @@ const NUMetadata: React.FC<MetadataProps> = ({
       size='small'
       loading={loading}
       dataSource={state}
+      rowKey='rowKey'
       bordered={true}
       pagination={{
         current: pgNumber