add cluster role bindings

pluralsh · Mar 29, 2024 · bd886a6 · bd886a6
1 parent 019abc1
commit bd886a6
Show file tree

Hide file tree

Showing 5 changed files with 195 additions and 8 deletions.
diff --git a/assets/src/components/kubernetes/access/ClusterRoleBinding.tsx b/assets/src/components/kubernetes/access/ClusterRoleBinding.tsx
@@ -1,5 +1,96 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
+
+import { Link, Outlet, useOutletContext, useParams } from 'react-router-dom'
+
+import { SidecarItem, useSetBreadcrumbs } from '@pluralsh/design-system'
+
+import { A } from 'honorable'
+
+import ResourceDetails, { TabEntry } from '../ResourceDetails'
+import { MetadataSidecar, useKubernetesCluster } from '../utils'
+import {
+  ClusterRoleBindingQueryVariables,
+  Clusterrolebinding_ClusterRoleBindingDetail as ClusterRoleBindingT,
+  useClusterRoleBindingQuery,
+} from '../../../generated/graphql-kubernetes'
+import { KubernetesClient } from '../../../helpers/kubernetes.client'
+
+import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
+
+import LoadingIndicator from '../../utils/LoadingIndicator'
+
+import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap'
+import Subjects from '../common/Subjects'
+
+import { getBreadcrumbs } from './ClusterRoleBindings'
+
+const directory: Array<TabEntry> = [
+  { path: '', label: 'Subjects' },
+  { path: 'raw', label: 'Raw' },
+] as const
 
 export default function ClusterRoleBinding(): ReactElement {
-  return <div>ClusterRoleBinding details</div>
+  const cluster = useKubernetesCluster()
+  const { clusterId, name = '' } = useParams()
+  const { data, loading } = useClusterRoleBindingQuery({
+    client: KubernetesClient(clusterId ?? ''),
+    skip: !clusterId,
+    pollInterval: 30_000,
+    variables: {
+      name,
+    } as ClusterRoleBindingQueryVariables,
+  })
+
+  const crb = data?.handleGetClusterRoleBindingDetail
+
+  useSetBreadcrumbs(
+    useMemo(
+      () => [
+        ...getBreadcrumbs(cluster),
+        {
+          label: name ?? '',
+          url: getResourceDetailsAbsPath(clusterId, 'clusterrolebinding', name),
+        },
+      ],
+      [cluster, clusterId, name]
+    )
+  )
+
+  if (loading) return <LoadingIndicator />
+
+  return (
+    <ResourceDetails
+      tabs={directory}
+      sidecar={
+        <MetadataSidecar objectMeta={crb?.objectMeta}>
+          <SidecarItem heading="Role">
+            <A
+              as={Link}
+              to={getResourceDetailsAbsPath(
+                clusterId,
+                'clusterrole',
+                crb?.roleRef.name ?? ''
+              )}
+              inline
+            >
+              {crb?.roleRef.name}
+            </A>
+          </SidecarItem>
+        </MetadataSidecar>
+      }
+    >
+      <Outlet context={crb} />
+    </ResourceDetails>
+  )
+}
+
+// TODO: Add links.
+export function ClusterRoleBindingSubjects(): ReactElement {
+  const crb = useOutletContext() as ClusterRoleBindingT
+
+  return (
+    <FullHeightTableWrap>
+      <Subjects subjects={crb?.subjects} />
+    </FullHeightTableWrap>
+  )
 }
diff --git a/assets/src/components/kubernetes/access/RoleBinding.tsx b/assets/src/components/kubernetes/access/RoleBinding.tsx
@@ -12,7 +12,7 @@ import { KubernetesClient } from '../../../helpers/kubernetes.client'
 import { MetadataSidecar, useKubernetesCluster } from '../utils'
 import ResourceDetails, { TabEntry } from '../ResourceDetails'
 import {
-  ROLES_REL_PATH,
+  ROLE_BINDINGS_REL_PATH,
   getAccessAbsPath,
   getResourceDetailsAbsPath,
 } from '../../../routes/kubernetesRoutesConsts'
@@ -21,7 +21,7 @@ import LoadingIndicator from '../../utils/LoadingIndicator'
 import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap'
 import Subjects from '../common/Subjects'
 
-import { getBreadcrumbs } from './Roles'
+import { getBreadcrumbs } from './RoleBindings'
 
 const directory: Array<TabEntry> = [
   { path: '', label: 'Subjects' },
@@ -51,7 +51,7 @@ export default function RoleBinding(): ReactElement {
           label: namespace ?? '',
           url: `${getAccessAbsPath(
             cluster?.id
-          )}/${ROLES_REL_PATH}?${NAMESPACE_PARAM}=${namespace}`,
+          )}/${ROLE_BINDINGS_REL_PATH}?${NAMESPACE_PARAM}=${namespace}`,
         },
         {
           label: name ?? '',

diff --git a/assets/src/generated/graphql-kubernetes.ts b/assets/src/generated/graphql-kubernetes.ts
@@ -4613,6 +4613,13 @@ export type ClusterRoleBindingsQueryVariables = Exact<{
 
 export type ClusterRoleBindingsQuery = { __typename?: 'Query', handleGetClusterRoleBindingList?: { __typename?: 'clusterrolebinding_ClusterRoleBindingList', listMeta: { __typename?: 'types_ListMeta', totalItems: number }, items: Array<{ __typename?: 'clusterrolebinding_ClusterRoleBinding', typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null } } | null> } | null };
 
+export type ClusterRoleBindingQueryVariables = Exact<{
+  name: Scalars['String']['input'];
+}>;
+
+
+export type ClusterRoleBindingQuery = { __typename?: 'Query', handleGetClusterRoleBindingDetail?: { __typename?: 'clusterrolebinding_ClusterRoleBindingDetail', errors: Array<any | null>, typeMeta: { __typename?: 'types_TypeMeta', kind?: string | null, restartable?: boolean | null, scalable?: boolean | null }, objectMeta: { __typename?: 'types_ObjectMeta', uid?: string | null, name?: string | null, namespace?: string | null, labels?: any | null, annotations?: any | null, creationTimestamp?: string | null }, subjects?: Array<{ __typename?: 'v1_Subject', apiGroup?: string | null, kind: string, name: string, namespace?: string | null } | null> | null, roleRef: { __typename?: 'v1_RoleRef', name: string, kind: string, apiGroup: string } } | null };
+
 export type RolesQueryVariables = Exact<{
   namespace: Scalars['String']['input'];
   filterBy?: InputMaybe<Scalars['String']['input']>;
@@ -5458,6 +5465,62 @@ export type ClusterRoleBindingsQueryHookResult = ReturnType<typeof useClusterRol
 export type ClusterRoleBindingsLazyQueryHookResult = ReturnType<typeof useClusterRoleBindingsLazyQuery>;
 export type ClusterRoleBindingsSuspenseQueryHookResult = ReturnType<typeof useClusterRoleBindingsSuspenseQuery>;
 export type ClusterRoleBindingsQueryResult = Apollo.QueryResult<ClusterRoleBindingsQuery, ClusterRoleBindingsQueryVariables>;
+export const ClusterRoleBindingDocument = gql`
+    query ClusterRoleBinding($name: String!) {
+  handleGetClusterRoleBindingDetail(name: $name) @rest(path: "clusterrolebinding/{args.name}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    subjects @type(name: "v1_Subject") {
+      ...Subject
+    }
+    roleRef {
+      name
+      kind
+      apiGroup
+    }
+    errors
+  }
+}
+    ${TypeMetaFragmentDoc}
+${ObjectMetaFragmentDoc}
+${SubjectFragmentDoc}`;
+
+/**
+ * __useClusterRoleBindingQuery__
+ *
+ * To run a query within a React component, call `useClusterRoleBindingQuery` and pass it any options that fit your needs.
+ * When your component renders, `useClusterRoleBindingQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useClusterRoleBindingQuery({
+ *   variables: {
+ *      name: // value for 'name'
+ *   },
+ * });
+ */
+export function useClusterRoleBindingQuery(baseOptions: Apollo.QueryHookOptions<ClusterRoleBindingQuery, ClusterRoleBindingQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ClusterRoleBindingQuery, ClusterRoleBindingQueryVariables>(ClusterRoleBindingDocument, options);
+      }
+export function useClusterRoleBindingLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ClusterRoleBindingQuery, ClusterRoleBindingQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ClusterRoleBindingQuery, ClusterRoleBindingQueryVariables>(ClusterRoleBindingDocument, options);
+        }
+export function useClusterRoleBindingSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ClusterRoleBindingQuery, ClusterRoleBindingQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<ClusterRoleBindingQuery, ClusterRoleBindingQueryVariables>(ClusterRoleBindingDocument, options);
+        }
+export type ClusterRoleBindingQueryHookResult = ReturnType<typeof useClusterRoleBindingQuery>;
+export type ClusterRoleBindingLazyQueryHookResult = ReturnType<typeof useClusterRoleBindingLazyQuery>;
+export type ClusterRoleBindingSuspenseQueryHookResult = ReturnType<typeof useClusterRoleBindingSuspenseQuery>;
+export type ClusterRoleBindingQueryResult = Apollo.QueryResult<ClusterRoleBindingQuery, ClusterRoleBindingQueryVariables>;
 export const RolesDocument = gql`
     query Roles($namespace: String!, $filterBy: String, $sortBy: String, $itemsPerPage: String, $page: String) {
   handleGetRoleList(

diff --git a/assets/src/graph-kubernetes/access/clusterrolebinding.graphql b/assets/src/graph-kubernetes/access/clusterrolebinding.graphql
@@ -27,3 +27,25 @@ query ClusterRoleBindings(
     }
   }
 }
+
+query ClusterRoleBinding($name: String!) {
+  handleGetClusterRoleBindingDetail(name: $name)
+  @rest(path: "clusterrolebinding/{args.name}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    subjects @type(name: "v1_Subject") {
+      ...Subject
+    }
+    roleRef {
+      name
+      kind
+      apiGroup
+    }
+    errors
+  }
+}
+
diff --git a/assets/src/routes/kubernetesRoutes.tsx b/assets/src/routes/kubernetesRoutes.tsx
@@ -10,7 +10,9 @@ import RoleBinding, {
 } from 'components/kubernetes/access/RoleBinding'
 import Role, { RolePolicyRules } from 'components/kubernetes/access/Role'
 import ClusterRole from 'components/kubernetes/access/ClusterRole'
-import ClusterRoleBinding from 'components/kubernetes/access/ClusterRoleBinding'
+import ClusterRoleBinding, {
+  ClusterRoleBindingSubjects,
+} from 'components/kubernetes/access/ClusterRoleBinding'
 import CustomResourceDefinition from 'components/kubernetes/customresources/CustomResourceDefinition'
 
 import {
@@ -511,10 +513,19 @@ export const kubernetesRoutes = [
     />
   </Route>,
   <Route
-    index
     path={`${KUBERNETES_ABS_PATH}/${CLUSTER_ROLE_BINDINGS_REL_PATH}/${RESOURCE_DETAILS_REL_PATH}`}
     element={<ClusterRoleBinding />}
-  />,
+  >
+    <Route
+      index
+      path=""
+      element={<ClusterRoleBindingSubjects />}
+    />
+    <Route
+      path="raw"
+      element={<Raw />}
+    />
+  </Route>,
   // Custom Resource Definition
   <Route
     path={`${KUBERNETES_ABS_PATH}/${CUSTOM_RESOURCES_REL_PATH}/${RESOURCE_DETAILS_REL_PATH}`}