Merge branch 'kubernetes' of github.com:pluralsh/console into kubernetes

assets/src/components/kubernetes/storage/PersistentVolumeClaim.tsx

@@ -1,5 +1,120 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
+
+import { Link, Outlet, useParams } from 'react-router-dom'
+
+import {
+  ChipList,
+  SidecarItem,
+  useSetBreadcrumbs,
+} from '@pluralsh/design-system'
+
+import ResourceDetails, { TabEntry } from '../ResourceDetails'
+import { MetadataSidecar, useKubernetesCluster } from '../utils'
+import {
+  SecretQueryVariables,
+  usePersistentVolumeClaimQuery,
+} from '../../../generated/graphql-kubernetes'
+import { KubernetesClient } from '../../../helpers/kubernetes.client'
+
+import {
+  PERSISTENT_VOLUME_CLAIMS_REL_PATH,
+  getResourceDetailsAbsPath,
+  getStorageAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+import { NAMESPACE_PARAM } from '../Kubernetes'
+import LoadingIndicator from '../../utils/LoadingIndicator'
+
+import { InlineLink } from '../../utils/typography/InlineLink'
+
+import { getBreadcrumbs } from './PersistentVolumeClaims'
+import { PVCStatusChip } from './utils'
+
+const directory: Array<TabEntry> = [{ path: '', label: 'Raw' }] as const
 
 export default function PersistentVolumeClaim(): ReactElement {
-  return <div>PersistentVolumeClaim details</div>
+  const cluster = useKubernetesCluster()
+  const { clusterId, name = '', namespace = '' } = useParams()
+  const { data, loading } = usePersistentVolumeClaimQuery({
+    client: KubernetesClient(clusterId ?? ''),
+    skip: !clusterId,
+    pollInterval: 30_000,
+    variables: {
+      name,
+      namespace,
+    } as SecretQueryVariables,
+  })
+
+  const pvc = data?.handleGetPersistentVolumeClaimDetail
+
+  useSetBreadcrumbs(
+    useMemo(
+      () => [
+        ...getBreadcrumbs(cluster),
+        {
+          label: namespace ?? '',
+          url: `${getStorageAbsPath(
+            cluster?.id
+          )}/${PERSISTENT_VOLUME_CLAIMS_REL_PATH}?${NAMESPACE_PARAM}=${namespace}`,
+        },
+        {
+          label: name ?? '',
+          url: getResourceDetailsAbsPath(
+            clusterId,
+            'persistentvolumeclaim',
+            name,
+            namespace
+          ),
+        },
+      ],
+      [cluster, clusterId, name, namespace]
+    )
+  )
+
+  if (loading) return <LoadingIndicator />
+
+  return (
+    <ResourceDetails
+      tabs={directory}
+      sidecar={
+        <MetadataSidecar objectMeta={pvc?.objectMeta}>
+          <SidecarItem heading="Volume">
+            <Link
+              to={getResourceDetailsAbsPath(
+                cluster?.id,
+                'persistentvolume',
+                pvc?.volume ?? ''
+              )}
+            >
+              <InlineLink>{pvc?.volume}</InlineLink>
+            </Link>
+          </SidecarItem>
+          <SidecarItem heading="Storage class">
+            <Link
+              to={getResourceDetailsAbsPath(
+                cluster?.id,
+                'storageclass',
+                pvc?.storageClass ?? ''
+              )}
+            >
+              <InlineLink>{pvc?.storageClass}</InlineLink>
+            </Link>
+          </SidecarItem>
+          <SidecarItem heading="Status">
+            <PVCStatusChip status={pvc?.status} />
+          </SidecarItem>
+          <SidecarItem heading="Access modes">
+            <ChipList
+              size="small"
+              limit={1}
+              values={Object.entries(pvc?.accessModes || {})}
+              transformValue={(accessModes) => accessModes.join(': ')}
+              emptyState={null}
+            />
+          </SidecarItem>
+        </MetadataSidecar>
+      }
+    >
+      <Outlet context={pvc} />
+    </ResourceDetails>
+  )
 }

assets/src/generated/graphql-kubernetes.ts

@@ -4813,7 +4813,15 @@ export type PersistentVolumeClaimsQueryVariables = Exact<{
 }>;
 
 
-export type PersistentVolumeClaimsQuery = { __typename?: 'Query', handleGetPersistentVolumeClaimList?: { __typename?: 'persistentvolumeclaim_PersistentVolumeClaimList', listMeta: { __typename?: 'types_ListMeta', totalItems: number }, items: Array<{ __typename?: 'persistentvolumeclaim_PersistentVolumeClaim', status: string, volume: string, storageClass: string, 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 PersistentVolumeClaimsQuery = { __typename?: 'Query', handleGetPersistentVolumeClaimList?: { __typename?: 'persistentvolumeclaim_PersistentVolumeClaimList', listMeta: { __typename?: 'types_ListMeta', totalItems: number }, items: Array<{ __typename?: 'persistentvolumeclaim_PersistentVolumeClaim', status: string, volume: string, storageClass: string, accessModes: Array<string | 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 } } | null> } | null };
+
+export type PersistentVolumeClaimQueryVariables = Exact<{
+  name: Scalars['String']['input'];
+  namespace: Scalars['String']['input'];
+}>;
+
+
+export type PersistentVolumeClaimQuery = { __typename?: 'Query', handleGetPersistentVolumeClaimDetail?: { __typename?: 'persistentvolumeclaim_PersistentVolumeClaimDetail', status: string, volume: string, storageClass: string, accessModes: Array<string | 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 } } | null };
 
 export type PersistentVolumeClaimFragment = { __typename?: 'persistentvolumeclaim_PersistentVolumeClaim', status: string, volume: string, storageClass: string, 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 } };
 
@@ -6464,6 +6472,57 @@ export type PersistentVolumeClaimsQueryHookResult = ReturnType<typeof usePersist
 export type PersistentVolumeClaimsLazyQueryHookResult = ReturnType<typeof usePersistentVolumeClaimsLazyQuery>;
 export type PersistentVolumeClaimsSuspenseQueryHookResult = ReturnType<typeof usePersistentVolumeClaimsSuspenseQuery>;
 export type PersistentVolumeClaimsQueryResult = Apollo.QueryResult<PersistentVolumeClaimsQuery, PersistentVolumeClaimsQueryVariables>;
+export const PersistentVolumeClaimDocument = gql`
+    query PersistentVolumeClaim($name: String!, $namespace: String!) {
+  handleGetPersistentVolumeClaimDetail(namespace: $namespace, name: $name) @rest(path: "persistentvolumeclaim/{args.namespace}/{args.name}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    status
+    volume
+    storageClass
+    accessModes
+  }
+}
+    ${TypeMetaFragmentDoc}
+${ObjectMetaFragmentDoc}`;
+
+/**
+ * __usePersistentVolumeClaimQuery__
+ *
+ * To run a query within a React component, call `usePersistentVolumeClaimQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePersistentVolumeClaimQuery` 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 } = usePersistentVolumeClaimQuery({
+ *   variables: {
+ *      name: // value for 'name'
+ *      namespace: // value for 'namespace'
+ *   },
+ * });
+ */
+export function usePersistentVolumeClaimQuery(baseOptions: Apollo.QueryHookOptions<PersistentVolumeClaimQuery, PersistentVolumeClaimQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PersistentVolumeClaimQuery, PersistentVolumeClaimQueryVariables>(PersistentVolumeClaimDocument, options);
+      }
+export function usePersistentVolumeClaimLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PersistentVolumeClaimQuery, PersistentVolumeClaimQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PersistentVolumeClaimQuery, PersistentVolumeClaimQueryVariables>(PersistentVolumeClaimDocument, options);
+        }
+export function usePersistentVolumeClaimSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<PersistentVolumeClaimQuery, PersistentVolumeClaimQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<PersistentVolumeClaimQuery, PersistentVolumeClaimQueryVariables>(PersistentVolumeClaimDocument, options);
+        }
+export type PersistentVolumeClaimQueryHookResult = ReturnType<typeof usePersistentVolumeClaimQuery>;
+export type PersistentVolumeClaimLazyQueryHookResult = ReturnType<typeof usePersistentVolumeClaimLazyQuery>;
+export type PersistentVolumeClaimSuspenseQueryHookResult = ReturnType<typeof usePersistentVolumeClaimSuspenseQuery>;
+export type PersistentVolumeClaimQueryResult = Apollo.QueryResult<PersistentVolumeClaimQuery, PersistentVolumeClaimQueryVariables>;
 export const StorageClassesDocument = gql`
     query StorageClasses($filterBy: String, $sortBy: String, $itemsPerPage: String, $page: String) {
   handleGetStorageClassList(
@@ -7311,4 +7370,4 @@ export function useStatefulSetsSuspenseQuery(baseOptions?: Apollo.SuspenseQueryH
 export type StatefulSetsQueryHookResult = ReturnType<typeof useStatefulSetsQuery>;
 export type StatefulSetsLazyQueryHookResult = ReturnType<typeof useStatefulSetsLazyQuery>;
 export type StatefulSetsSuspenseQueryHookResult = ReturnType<typeof useStatefulSetsSuspenseQuery>;
-export type StatefulSetsQueryResult = Apollo.QueryResult<StatefulSetsQuery, StatefulSetsQueryVariables>;
+export type StatefulSetsQueryResult = Apollo.QueryResult<StatefulSetsQuery, StatefulSetsQueryVariables>;

assets/src/graph-kubernetes/storage/persistentvolumeclaim.graphql

@@ -20,6 +20,13 @@ query PersistentVolumeClaims(
   }
 }
 
+query PersistentVolumeClaim($name: String!, $namespace: String!) {
+  handleGetPersistentVolumeClaimDetail(namespace: $namespace, name: $name)
+  @rest(type: "persistentvolumeclaim_PersistentVolumeClaim" path: "persistentvolumeclaim/{args.namespace}/{args.name}") {
+    ...PersistentVolumeClaim
+  }
+}
+
 fragment PersistentVolumeClaim on persistentvolumeclaim_PersistentVolumeClaim {
   typeMeta @type(name: "types_TypeMeta") {
     ...TypeMeta
@@ -30,6 +37,7 @@ fragment PersistentVolumeClaim on persistentvolumeclaim_PersistentVolumeClaim {
   status
   volume
   storageClass
+  accessModes
 }
 
 fragment PersistentVolumeClaimList on persistentvolumeclaim_PersistentVolumeClaimList {

assets/src/routes/kubernetesRoutes.tsx

@@ -388,10 +388,15 @@ export const kubernetesRoutes = [
   />,
   // Storage
   <Route
-    index
     path={`${KUBERNETES_ABS_PATH}/${PERSISTENT_VOLUME_CLAIMS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
     element={<PersistentVolumeClaim />}
-  />,
+  >
+    <Route
+      index
+      path=""
+      element={<Raw />}
+    />
+  </Route>,
   <Route
     path={`${KUBERNETES_ABS_PATH}/${PERSISTENT_VOLUMES_REL_PATH}/${RESOURCE_DETAILS_REL_PATH}`}
     element={<PersistentVolume />}