@10xtechie #1084 - codes for showing Cluster and TransactionalID ACLs…

client/src/containers/Acl/AclDetail/AclClusters/AclClusters.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import Table from '../../../../components/Table/Table';
+import { uriAclsByPrincipal } from '../../../../utils/endpoints';
+import Root from "../../../../components/Root";
+
+class AclClusters extends Root {
+  state = {
+    selectedCluster: this.props.clusterId,
+    principalEncoded: this.props.principalEncoded,
+    tableData: [],
+    loading: true
+  };
+
+  componentDidMount() {
+    this.getAcls();
+  }
+
+  async getAcls() {
+    const { selectedCluster, principalEncoded } = this.state;
+
+    const response = await this.getApi(uriAclsByPrincipal(selectedCluster, principalEncoded, 'CLUSTER'));
+    if (response.data.acls) {
+      const acls = response.data || [];
+      this.handleAcls(acls);
+    } else {
+      this.setState({ tableData: [], loading: false });
+    }
+  }
+
+  handleAcls = data => {
+    const tableData = data.acls.map(acl => {
+      return {
+        topic: acl.resource.name,
+        host: acl.host,
+        permission: acl.operation
+      };
+    });
+
+    this.setState({ tableData, loading: false });
+  };
+
+  handlePermission = permission => {
+    return (
+      <React.Fragment>
+        <span className="badge badge-secondary">{permission.permissionType}</span>{' '}
+        {permission.operation}
+      </React.Fragment>
+    );
+  };
+
+  render() {
+    const { loading } = this.state;
+    return (
+      <Table
+        loading={loading}
+        history={this.props.history}
+        columns={[
+          {
+            id: 'topic',
+            accessor: 'topic',
+            colName: 'Topic',
+            type: 'text',
+            sortable: true
+          },
+          {
+            id: 'host',
+            accessor: 'host',
+            colName: 'Host',
+            type: 'text',
+            sortable: true
+          },
+          {
+            id: 'permission',
+            accessor: 'permission',
+            colName: 'Permission',
+            type: 'text',
+            cell: obj => {
+              if (obj.permission) {
+                return <div>{this.handlePermission(obj.permission)}</div>;
+              }
+            }
+          }
+        ]}
+        data={this.state.tableData}
+        updateData={data => {
+          this.setState({ tableData: data });
+        }}
+        noContent={
+          'No ACLS found, or the "authorizer.class.name" parameter is not configured on the cluster.'
+        }
+      />
+    );
+  }
+}
+
+export default AclClusters;

client/src/containers/Acl/AclDetail/AclClusters/index.js

@@ -0,0 +1,3 @@
+import AclClusters from './AclClusters';
+
+export default AclClusters;

client/src/containers/Acl/AclDetail/AclDetails.jsx

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import Header from '../../Header';
 import AclGroups from './AclGroups/AclGroups';
 import AclTopics from './AclTopics/AclTopics';
+import AclClusters from './AclClusters/AclClusters';
+import AclTransactionalIds from './AclTransactionalIds/AclTransactionalIds';
 import {getSelectedTab} from "../../../utils/functions";
 import { Link } from 'react-router-dom';
 
@@ -12,7 +14,7 @@ class AclDetails extends Component {
     selectedTab: 'topics'
   };
 
-  tabs = ['topics', 'groups'];
+  tabs = ['topics', 'groups', 'clusters', 'transactionalids'];
 
   componentDidMount() {
     const { clusterId, principalEncoded } = this.props.match.params;
@@ -52,6 +54,14 @@ class AclDetails extends Component {
         return (
           <AclTopics clusterId={clusterId} principalEncoded={principalEncoded} history={history} />
         );
+      case 'clusters':
+        return (
+          <AclClusters clusterId={clusterId} principalEncoded={principalEncoded} history={history} />
+        );
+      case 'transactionalids':
+        return (
+          <AclTransactionalIds clusterId={clusterId} principalEncoded={principalEncoded} history={history} />
+        );
       default:
         return (
           <AclTopics clusterId={clusterId} principalEncoded={principalEncoded} history={history} />
@@ -82,6 +92,20 @@ class AclDetails extends Component {
                 Groups
               </Link>
             </li>
+            <li className="nav-item">
+              <Link to={`/ui/${clusterId}/acls/${principalEncoded}/clusters`}
+                className={this.tabClassName('clusters')}
+              >
+                Clusters
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link to={`/ui/${clusterId}/acls/${principalEncoded}/transactionalids`}
+                className={this.tabClassName('transactionalids')}
+              >
+                Transactional Ids
+              </Link>
+            </li>
           </ul>
 
           <div className="tab-content">

client/src/containers/Acl/AclDetail/AclGroups/AclGroups.jsx

@@ -3,7 +3,7 @@ import Table from '../../../../components/Table/Table';
 import { uriAclsByPrincipal } from '../../../../utils/endpoints';
 import Root from "../../../../components/Root";
 
-class AclTopics extends Root {
+class AclGroups extends Root {
   state = {
     selectedCluster: this.props.clusterId,
     principalEncoded: this.props.principalEncoded,
@@ -93,4 +93,4 @@ class AclTopics extends Root {
   }
 }
 
-export default AclTopics;
+export default AclGroups;

client/src/containers/Acl/AclDetail/AclTransactionalIds/AclTransactionalIds.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import Table from '../../../../components/Table/Table';
+import { uriAclsByPrincipal } from '../../../../utils/endpoints';
+import Root from "../../../../components/Root";
+
+class AclTransactionalIds extends Root {
+  state = {
+    selectedCluster: this.props.clusterId,
+    principalEncoded: this.props.principalEncoded,
+    tableData: [],
+    loading: true
+  };
+
+  componentDidMount() {
+    this.getAcls();
+  }
+
+  async getAcls() {
+    const { selectedCluster, principalEncoded } = this.state;
+
+    const response = await this.getApi(uriAclsByPrincipal(selectedCluster, principalEncoded, 'TRANSACTIONAL_ID'));
+    if (response.data.acls) {
+      const acls = response.data || [];
+      this.handleAcls(acls);
+    } else {
+      this.setState({ tableData: [], loading: false });
+    }
+  }
+
+  handleAcls = data => {
+    const tableData = data.acls.map(acl => {
+      return {
+        topic: acl.resource.name,
+        host: acl.host,
+        permission: acl.operation
+      };
+    });
+
+    this.setState({ tableData, loading: false });
+  };
+
+  handlePermission = permission => {
+    return (
+      <React.Fragment>
+        <span className="badge badge-secondary">{permission.permissionType}</span>{' '}
+        {permission.operation}
+      </React.Fragment>
+    );
+  };
+
+  render() {
+    const { loading } = this.state;
+    return (
+      <Table
+        loading={loading}
+        history={this.props.history}
+        columns={[
+          {
+            id: 'topic',
+            accessor: 'topic',
+            colName: 'Topic',
+            type: 'text',
+            sortable: true
+          },
+          {
+            id: 'host',
+            accessor: 'host',
+            colName: 'Host',
+            type: 'text',
+            sortable: true
+          },
+          {
+            id: 'permission',
+            accessor: 'permission',
+            colName: 'Permission',
+            type: 'text',
+            cell: obj => {
+              if (obj.permission) {
+                return <div>{this.handlePermission(obj.permission)}</div>;
+              }
+            }
+          }
+        ]}
+        data={this.state.tableData}
+        updateData={data => {
+          this.setState({ tableData: data });
+        }}
+        noContent={
+          'No ACLS found, or the "authorizer.class.name" parameter is not configured on the cluster.'
+        }
+      />
+    );
+  }
+}
+
+export default AclTransactionalIds;

client/src/containers/Acl/AclDetail/AclTransactionalIds/index.js

@@ -0,0 +1,3 @@
+import AclTransactionalIds from './AclTransactionalIds';
+
+export default AclTransactionalIds;