RANGER-4698: Audit UI improvements with respect to values overflowing into other columns
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 5844165..23236ff 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
@@ -511,7 +511,10 @@
Header: "Service (Name / Type)",
accessor: (s) => (
<div>
- <div className="text-left lht-2 mb-1" title={s.repoDisplayName}>
+ <div
+ className="text-left lht-2 mb-1 text-truncate"
+ title={s.repoDisplayName}
+ >
{s.repoDisplayName}
</div>
<div
@@ -625,7 +628,7 @@
Header: "Agent Host Name",
accessor: "agentHost",
Cell: (rawValue) => {
- if (!isUndefined(rawValue.value) || !isEmpty(rawValue.value)) {
+ if (!isEmpty(rawValue?.value)) {
return (
<div className="text-truncate" title={rawValue.value}>
{rawValue.value}
@@ -651,13 +654,20 @@
width: 100,
disableResizing: true,
disableSortBy: true,
+ Cell: (rawValue) => {
+ if (!isEmpty(rawValue?.value)) {
+ return <div className="text-truncate">{rawValue.value}</div>;
+ } else {
+ return <div className="text-center">--</div>;
+ }
+ },
getResizerProps: () => {}
},
{
Header: "Zone Name",
accessor: "zoneName",
Cell: (rawValue) => {
- if (!isUndefined(rawValue.value) || !isEmpty(rawValue.value)) {
+ if (!isEmpty(rawValue?.value)) {
return (
<h6>
<Badge variant="dark" className="text-truncate mw-100">
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/LoginSessionsLogs.jsx b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/LoginSessionsLogs.jsx
index b49f239..01a5fbd 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/LoginSessionsLogs.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/AuditEvent/LoginSessionsLogs.jsx
@@ -177,7 +177,7 @@
Cell: (rawValue) => {
if (rawValue.value) {
return (
- <span className="text-center d-block">{rawValue.value}</span>
+ <span className="text-center d-block text-truncate">{rawValue.value}</span>
);
} else {
return <span className="text-center d-block">--</span>;
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 16e235f..d900ecb 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
@@ -252,6 +252,13 @@
return a > b ? 1 : -1;
}
return a.length > b.length ? 1 : -1;
+ },
+ Cell: (rawValue) => {
+ return (
+ <div className="text-truncate">
+ <span title={rawValue.value}>{rawValue.value}</span>
+ </div>
+ );
}
},
{
