RANGER-4668: Need to have new local storage item for column show hide functionality in plugin status table
diff --git a/security-admin/src/main/webapp/react-webapp/src/components/XATableLayout.jsx b/security-admin/src/main/webapp/react-webapp/src/components/XATableLayout.jsx
index d75315e..e0b7dc5 100644
--- a/security-admin/src/main/webapp/react-webapp/src/components/XATableLayout.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/components/XATableLayout.jsx
@@ -28,7 +28,7 @@
} from "react-table";
import { Table, ButtonGroup } from "react-bootstrap";
import DropdownButton from "react-bootstrap/DropdownButton";
-import { groupBy, isEmpty, uniq, uniqBy } from "lodash";
+import { groupBy, isEmpty, uniqBy } from "lodash";
const IndeterminateCheckbox = forwardRef(
({ indeterminate, chkType, ...rest }, ref) => {
@@ -74,16 +74,19 @@
}) {
const getLocalStorageVal = () => {
let localStorageVal = [];
+
if (localStorage.getItem("showHideTableCol") != null) {
localStorageVal =
!isEmpty(localStorage.getItem("showHideTableCol")) &&
- JSON.parse(localStorage.getItem("showHideTableCol")).bigData;
+ JSON.parse(localStorage.getItem("showHideTableCol"));
}
- let filterColVal = !isEmpty(localStorageVal)
- ? localStorageVal
- .filter((obj) => obj.renderable == false)
- .map((r) => r.name)
+
+ let filterColVal = !isEmpty(localStorageVal[columnHide?.tableName])
+ ? localStorageVal[columnHide?.tableName]
+ ?.filter((obj) => obj.renderable == false)
+ ?.map((r) => r.name)
: [];
+
return filterColVal;
};
@@ -195,6 +198,7 @@
</span>
);
};
+
/* For Column Visibility */
const groupedColumnsData = groupBy(allColumns, "parent[id]");
delete groupedColumnsData.undefined;
@@ -213,10 +217,11 @@
});
let columnShowHide = [];
+
return (
// apply the table props
<>
- {columnHide && (
+ {columnHide?.isVisible && (
<div className="text-right mb-2 mt-n5">
<DropdownButton
className="p-0 column-dropdown"
@@ -230,15 +235,35 @@
<div className="column-dropdown-maxheight">
<ul className="list-group fnt-14">
{filterAllColumns.map((column, index) => {
- columnShowHide.push({
- name: column.columnData.id,
- renderable: column.columnData.isVisible
- });
+ if (
+ column.columnName == `Non-Group(${column.columnData.id})`
+ ) {
+ columnShowHide.push({
+ name: column.columnData.id,
+ renderable: column.columnData.isVisible
+ });
+ } else {
+ column.columnData.forEach((col) => {
+ columnShowHide.push({
+ name: col.id,
+ renderable: col.isVisible
+ });
+ });
+ }
+
+ let localStorageColumnData =
+ JSON.parse(localStorage.getItem("showHideTableCol")) || {};
+
+ let columnData = {
+ ...localStorageColumnData,
+ [columnHide.tableName]: columnShowHide
+ };
localStorage.setItem(
"showHideTableCol",
- JSON.stringify({ bigData: columnShowHide })
+ JSON.stringify(columnData)
);
+
return column.columnName ==
`Non-Group(${column.columnData.id})` ? (
<li
@@ -363,7 +388,7 @@
<td colSpan={columns.length + 1}>
<center>
<span className="text-muted" data-cy="tbleDataMsg">
- "No data to show!!"
+ "No data to show!!"
</span>
</center>
</td>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogs.jsx
index 3106853..8e12ec6 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/AccessLogs.jsx
@@ -1040,7 +1040,7 @@
rowModal(row);
}
})}
- columnHide={true}
+ columnHide={{ tableName: "bigData", isVisible: true }}
columnResizable={true}
columnSort={true}
defaultSort={getDefaultSort}
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginStatusLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginStatusLogs.jsx
index 32db072..d798a5f 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginStatusLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/PluginStatusLogs.jsx
@@ -564,7 +564,7 @@
columnSort={true}
clientSideSorting={true}
showPagination={false}
- columnHide={true}
+ columnHide={{ tableName: "pluginStatus", isVisible: true }}
/>
</React.Fragment>
</div>
