ACM 22860

frontend/src/NavigationPath.tsx

@@ -205,6 +205,9 @@ export enum NavigationPath {
   identitiesServiceAccountsRoleAssignments = '/multicloud/user-management/identities/service-accounts/:id/role-assignments',
   identitiesServiceAccountsGroups = '/multicloud/user-management/identities/service-accounts/:id/groups',
 
+  // TODO: Move Permissions to proper location when ready
+  identitiesPermissions = '/multicloud/user-management/identities/permissions',
+
   // RBAC Roles
   roles = '/multicloud/user-management/roles',
   rolesDetails = '/multicloud/user-management/roles/:id',

frontend/src/resources/kubernetes-client.ts

@@ -1,6 +1,6 @@
 /* Copyright Contributors to the Open Cluster Management project */
 import { GroupKindType, ServiceAccountKindType, UserKindType } from './rbac'
-export interface PolicyRule {
+export interface Rule {
   verbs: string[]
   apiGroups: string[]
   resources: string[]

frontend/src/resources/rbac.ts

@@ -2,7 +2,7 @@
 import { Metadata } from './metadata'
 import { IResourceDefinition } from './resource'
 import { listResources } from './utils/resource-request'
-import { PolicyRule, LocalObjectReference, Subject, RoleRef } from './kubernetes-client'
+import { Rule, LocalObjectReference, Subject, RoleRef } from './kubernetes-client'
 import { ObjectReference } from '@openshift-console/dynamic-plugin-sdk'
 
 export const UserApiVersion = 'user.openshift.io/v1'
@@ -89,7 +89,7 @@ export interface ClusterRole {
   apiVersion: RbacApiVersionType
   kind: ClusterRoleKindType
   metadata: Metadata
-  rules: PolicyRule[]
+  rules: Rule[]
 }
 
 export interface ClusterRoleBinding {
@@ -104,7 +104,7 @@ export interface Role {
   apiVersion: RbacApiVersionType
   kind: RoleKindType
   metadata: Metadata
-  rules: PolicyRule[]
+  rules: Rule[]
 }
 
 export interface RoleBinding {

frontend/src/routes/UserManagement/Identities/IdentitiesManagement.tsx

@@ -5,6 +5,7 @@ import IdentitiesPage from './IdentitiesPage'
 import { Users } from './Users/Users'
 import { Groups } from './Groups/Groups'
 import { ServiceAccounts } from './ServiceAccounts/ServiceAccounts'
+import { Permissions } from './Permissions/Permissions'
 import { UserDetail } from './Users/UserDetail'
 import { UserYaml } from './Users/UserYaml'
 import { UserRoleAssignments } from './Users/UserRoleAssignments'
@@ -64,6 +65,7 @@ export default function IdentitiesManagement() {
         <Route path={identitiesChildPath(NavigationPath.identitiesUsers)} element={<Users />} />
         <Route path={identitiesChildPath(NavigationPath.identitiesGroups)} element={<Groups />} />
         <Route path={identitiesChildPath(NavigationPath.identitiesServiceAccounts)} element={<ServiceAccounts />} />
+        <Route path={identitiesChildPath(NavigationPath.identitiesPermissions)} element={<Permissions />} />
       </Route>
 
       {/* Default redirect to users */}

frontend/src/routes/UserManagement/Identities/IdentitiesPage.tsx

@@ -11,6 +11,7 @@ export default function IdentitiesPage() {
   const isUsersActive = location.pathname.startsWith(NavigationPath.identitiesUsers)
   const isGroupsActive = location.pathname.startsWith(NavigationPath.identitiesGroups)
   const isServiceAccountsActive = location.pathname.startsWith(NavigationPath.identitiesServiceAccounts)
+  const isPermissionsActive = location.pathname.startsWith(NavigationPath.identitiesPermissions)
 
   return (
     <AcmPage
@@ -30,6 +31,9 @@ export default function IdentitiesPage() {
               <AcmSecondaryNavItem isActive={isServiceAccountsActive}>
                 <Link to={NavigationPath.identitiesServiceAccounts}>{t('Service Accounts')}</Link>
               </AcmSecondaryNavItem>
+              <AcmSecondaryNavItem isActive={isPermissionsActive}>
+                <Link to={NavigationPath.identitiesPermissions}>{t('Permissions')}</Link>
+              </AcmSecondaryNavItem>
             </AcmSecondaryNav>
           }
         />

frontend/src/routes/UserManagement/Identities/Permissions/Permissions.tsx

@@ -0,0 +1,96 @@
+/* Copyright Contributors to the Open Cluster Management project */
+
+import { PageSection, Label, Flex, FlexItem } from '@patternfly/react-core'
+import { cellWidth } from '@patternfly/react-table'
+import { useMemo } from 'react'
+import { useTranslation } from '../../../../lib/acm-i18next'
+import { AcmTable, IAcmTableColumn, compareStrings } from '../../../../ui-components'
+import { ClusterRole } from '../../../../resources/rbac'
+import { Rule } from '../../../../resources/kubernetes-client'
+import clusterRoleData from './mock-data/kubevirt.io:admin.json'
+
+const clusterRole = clusterRoleData as ClusterRole
+const rules: Rule[] = clusterRole.rules
+
+const blacklist = ['ASS', 'FART']
+export const kindToAbbreviation = (kind: string) => {
+  const abbreviatedKind = (kind.replace(/[^A-Z]/g, '') || kind.toUpperCase()).slice(0, 4)
+  return blacklist.includes(abbreviatedKind) ? abbreviatedKind.slice(0, -1) : abbreviatedKind
+}
+
+export function Permissions() {
+  const { t } = useTranslation()
+
+  const columns = useMemo<IAcmTableColumn<Rule>[]>(
+    () => [
+      {
+        id: 'actions',
+        header: t('Actions'),
+        sort: (a: Rule, b: Rule) => compareStrings(a.verbs.join(', '), b.verbs.join(', ')),
+        search: 'verbs',
+        cell: (item) => {
+          return (
+            <div>
+              {item.verbs.map((verb, index) => (
+                <div key={index}>
+                  <strong>{verb}</strong>
+                </div>
+              ))}
+            </div>
+          )
+        },
+        transforms: [cellWidth(15)],
+      },
+      {
+        id: 'apiGroups',
+        header: t('API groups'),
+        sort: (a: Rule, b: Rule) => compareStrings(a.apiGroups.join(', '), b.apiGroups.join(', ')),
+        search: 'apiGroups',
+        cell: (item) => {
+          return item.apiGroups.length > 0 ? item.apiGroups.join(', ') : ''
+        },
+        transforms: [cellWidth(25)],
+      },
+      {
+        id: 'resources',
+        header: t('Resources'),
+        sort: (a: Rule, b: Rule) => compareStrings(a.resources.join(', '), b.resources.join(', ')),
+        search: 'resources',
+        cell: (item) => {
+          return (
+            <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+              {item.resources.map((resource, index) => (
+                <FlexItem key={index}>
+                  <Label isCompact color="blue">
+                    {kindToAbbreviation(resource)}
+                  </Label>{' '}
+                  {resource}
+                </FlexItem>
+              ))}
+            </Flex>
+          )
+        },
+        transforms: [cellWidth(60)],
+      },
+    ],
+    [t]
+  )
+
+  const keyFn = (rule: Rule) => `rule-${rules.indexOf(rule)}`
+
+  return (
+    <PageSection>
+      <AcmTable<Rule>
+        id="permissions-table"
+        key="permissions-table"
+        columns={columns}
+        keyFn={keyFn}
+        items={rules}
+        emptyState={<div>{t('No permissions found')}</div>}
+        autoHidePagination={true}
+        initialPerPage={100}
+        fuseThreshold={0.1}
+      />
+    </PageSection>
+  )
+}