From eec29212e56df19ca2c01b1131d26f4bd068cb3d Mon Sep 17 00:00:00 2001 From: Marcin Maciaszczyk Date: Thu, 28 Mar 2024 15:24:50 +0100 Subject: [PATCH] finish pvc --- .../storage/PersistentVolumeClaim.tsx | 119 +++++++++++++++++- assets/src/generated/graphql-kubernetes.ts | 62 ++++++++- .../storage/persistentvolumeclaim.graphql | 18 +++ assets/src/routes/kubernetesRoutes.tsx | 9 +- 4 files changed, 203 insertions(+), 5 deletions(-) diff --git a/assets/src/components/kubernetes/storage/PersistentVolumeClaim.tsx b/assets/src/components/kubernetes/storage/PersistentVolumeClaim.tsx index abe3671f42..c51b7e9799 100644 --- a/assets/src/components/kubernetes/storage/PersistentVolumeClaim.tsx +++ b/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 = [{ path: '', label: 'Raw' }] as const export default function PersistentVolumeClaim(): ReactElement { - return
PersistentVolumeClaim details
+ 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 + + return ( + + + + {pvc?.volume} + + + + + {pvc?.storageClass} + + + + + + + accessModes.join(': ')} + emptyState={null} + /> + + + } + > + + + ) } diff --git a/assets/src/generated/graphql-kubernetes.ts b/assets/src/generated/graphql-kubernetes.ts index c163bd93e7..550f423c8b 100644 --- a/assets/src/generated/graphql-kubernetes.ts +++ b/assets/src/generated/graphql-kubernetes.ts @@ -4805,7 +4805,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, 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, 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 StorageClassesQueryVariables = Exact<{ filterBy?: InputMaybe; @@ -6358,6 +6366,7 @@ export const PersistentVolumeClaimsDocument = gql` status volume storageClass + accessModes } } } @@ -6401,6 +6410,57 @@ export type PersistentVolumeClaimsQueryHookResult = ReturnType; export type PersistentVolumeClaimsSuspenseQueryHookResult = ReturnType; export type PersistentVolumeClaimsQueryResult = Apollo.QueryResult; +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) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(PersistentVolumeClaimDocument, options); + } +export function usePersistentVolumeClaimLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(PersistentVolumeClaimDocument, options); + } +export function usePersistentVolumeClaimSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(PersistentVolumeClaimDocument, options); + } +export type PersistentVolumeClaimQueryHookResult = ReturnType; +export type PersistentVolumeClaimLazyQueryHookResult = ReturnType; +export type PersistentVolumeClaimSuspenseQueryHookResult = ReturnType; +export type PersistentVolumeClaimQueryResult = Apollo.QueryResult; export const StorageClassesDocument = gql` query StorageClasses($filterBy: String, $sortBy: String, $itemsPerPage: String, $page: String) { handleGetStorageClassList( diff --git a/assets/src/graph-kubernetes/storage/persistentvolumeclaim.graphql b/assets/src/graph-kubernetes/storage/persistentvolumeclaim.graphql index 294d1bdfb8..c38bd1bce9 100644 --- a/assets/src/graph-kubernetes/storage/persistentvolumeclaim.graphql +++ b/assets/src/graph-kubernetes/storage/persistentvolumeclaim.graphql @@ -28,6 +28,24 @@ query PersistentVolumeClaims( status volume storageClass + accessModes } } } + +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 + } +} + diff --git a/assets/src/routes/kubernetesRoutes.tsx b/assets/src/routes/kubernetesRoutes.tsx index 2c9625f055..5204a05ea7 100644 --- a/assets/src/routes/kubernetesRoutes.tsx +++ b/assets/src/routes/kubernetesRoutes.tsx @@ -388,10 +388,15 @@ export const kubernetesRoutes = [ />, // Storage } - />, + > + } + /> + , }