HDDS-4030. Remember the selected columns and make the X-axis scrollab…

…le in recon datanodes UI (#1259)
apache · Aug 6, 2020 · dd7eaf1 · dd7eaf1
1 parent 2b78046
commit dd7eaf1
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/...recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/datanodes/datanodes.less b/...recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/datanodes/datanodes.less
@@ -35,5 +35,6 @@
     margin-right: 5px;
     display: inline-block;
     min-width: 200px;
+    z-index: 99;
   }
 }
diff --git a/.../recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/datanodes/datanodes.tsx b/.../recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/datanodes/datanodes.tsx
@@ -107,16 +107,8 @@ const COLUMNS = [
     filters: DatanodeStatusList.map(status => ({text: status, value: status})),
     onFilter: (value: DatanodeStatus, record: IDatanode) => record.state === value,
     render: (text: DatanodeStatus) => renderDatanodeStatus(text),
-    sorter: (a: IDatanode, b: IDatanode) => a.state.localeCompare(b.state)
-  },
-  {
-    title: 'Uuid',
-    dataIndex: 'uuid',
-    key: 'uuid',
-    isVisible: true,
-    isSearchable: true,
-    sorter: (a: IDatanode, b: IDatanode) => a.uuid.localeCompare(b.uuid),
-    defaultSortOrder: 'ascend' as const
+    sorter: (a: IDatanode, b: IDatanode) => a.state.localeCompare(b.state),
+    fixed: 'left'
   },
   {
     title: 'Hostname',
@@ -125,6 +117,16 @@ const COLUMNS = [
     isVisible: true,
     isSearchable: true,
     sorter: (a: IDatanode, b: IDatanode) => a.hostname.localeCompare(b.hostname),
+    defaultSortOrder: 'ascend' as const,
+    fixed: 'left'
+  },
+  {
+    title: 'Uuid',
+    dataIndex: 'uuid',
+    key: 'uuid',
+    isVisible: true,
+    isSearchable: true,
+    sorter: (a: IDatanode, b: IDatanode) => a.uuid.localeCompare(b.uuid),
     defaultSortOrder: 'ascend' as const
   },
   {
@@ -266,10 +268,19 @@ export class Datanodes extends React.Component<Record<string, object>, IDatanode
     });
   };
 
+  _getSelectedColumns = (selected: IOption[]) => {
+    const selectedColumns = selected.length > 0 ? selected : COLUMNS.filter(column => column.isVisible).map(column => ({
+      label: column.key,
+      value: column.key
+    }));
+    return selectedColumns;
+  };
+
   _loadData = () => {
-    this.setState({
-      loading: true
-    });
+    this.setState(prevState => ({
+      loading: true,
+      selectedColumns: this._getSelectedColumns(prevState.selectedColumns)
+    }));
     axios.get('/api/v1/datanodes').then(response => {
       const datanodesResponse: IDatanodesResponse = response.data;
       const totalCount = datanodesResponse.totalCount;
@@ -292,18 +303,12 @@ export class Datanodes extends React.Component<Record<string, object>, IDatanode
           buildDate: datanode.buildDate
         };
       });
-      const selectedColumns: IOption[] = COLUMNS.filter(column => column.isVisible).map(column => ({
-        label: column.key,
-        value: column.key
-      }));
 
       this.setState({
         loading: false,
         dataSource,
         totalCount,
         lastUpdated: Number(moment())
-      }, () => {
-        this._handleColumnChange(selectedColumns, {action: 'select-option'});
       });
     }).catch(error => {
       this.setState({
@@ -381,6 +386,7 @@ export class Datanodes extends React.Component<Record<string, object>, IDatanode
             loading={loading}
             pagination={paginationConfig}
             rowKey='hostname'
+            scroll={{x: true, y: false, scrollToFirstRowOnChange: true}}
           />
         </div>
       </div>