start adding pv

pluralsh · Mar 27, 2024 · 134a769 · 134a769
1 parent b8a023b
commit 134a769
Show file tree

Hide file tree

Showing 8 changed files with 213 additions and 15 deletions.
diff --git a/assets/src/components/kubernetes/storage/PersistentVolume.tsx b/assets/src/components/kubernetes/storage/PersistentVolume.tsx
@@ -1,5 +1,77 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
+import { useSetBreadcrumbs } from '@pluralsh/design-system'
+import { Outlet, useOutletContext, useParams } from 'react-router-dom'
+
+import {
+  ConfigMapQueryVariables,
+  Persistentvolume_PersistentVolumeDetail as PersistentVolumeT,
+  usePersistentVolumeQuery,
+} from '../../../generated/graphql-kubernetes'
+import { KubernetesClient } from '../../../helpers/kubernetes.client'
+import LoadingIndicator from '../../utils/LoadingIndicator'
+import { SubTitle } from '../../cluster/nodes/SubTitle'
+import { MetadataSidecar, useKubernetesCluster } from '../utils'
+import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
+
+import ResourceDetails, { TabEntry } from '../ResourceDetails'
+
+import { getBreadcrumbs } from './PersistentVolumes'
+
+const directory: Array<TabEntry> = [
+  { path: '', label: 'Info' },
+  { path: 'raw', label: 'Raw' },
+] as const
 
 export default function PersistentVolume(): ReactElement {
-  return <div>PersistentVolume details</div>
+  const cluster = useKubernetesCluster()
+  const { clusterId, name = '' } = useParams()
+  const { data, loading } = usePersistentVolumeQuery({
+    client: KubernetesClient(clusterId ?? ''),
+    skip: !clusterId,
+    pollInterval: 30_000,
+    variables: {
+      name,
+    } as ConfigMapQueryVariables,
+  })
+
+  const pv = data?.handleGetPersistentVolumeDetail
+
+  useSetBreadcrumbs(
+    useMemo(
+      () => [
+        ...getBreadcrumbs(cluster),
+        {
+          label: name ?? '',
+          url: getResourceDetailsAbsPath(clusterId, 'persistentvolume', name),
+        },
+      ],
+      [cluster, clusterId, name]
+    )
+  )
+
+  if (loading) return <LoadingIndicator />
+
+  return (
+    <ResourceDetails
+      tabs={directory}
+      sidecar={<MetadataSidecar objectMeta={pv?.objectMeta} />}
+    >
+      <Outlet context={pv} />
+    </ResourceDetails>
+  )
+}
+
+export function PersistentVolumeInfo(): ReactElement {
+  const pv = useOutletContext() as PersistentVolumeT
+
+  return (
+    <section>
+      <SubTitle>Info</SubTitle>
+      {pv.status}
+    </section>
+  )
+}
+
+export function PersistentVolumeRaw(): ReactElement {
+  return <>raw</>
 }
diff --git a/assets/src/components/kubernetes/storage/PersistentVolumes.tsx b/assets/src/components/kubernetes/storage/PersistentVolumes.tsx
@@ -1,9 +1,10 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
-import { ChipList } from '@pluralsh/design-system'
+import { ChipList, useSetBreadcrumbs } from '@pluralsh/design-system'
 import { Link } from 'react-router-dom'
 
 import {
+  Maybe,
   Persistentvolume_PersistentVolumeList as PersistentVolumeListT,
   Persistentvolume_PersistentVolume as PersistentVolumeT,
   PersistentVolumesQuery,
@@ -15,10 +16,36 @@ import { ResourceList } from '../ResourceList'
 
 import { ClusterTinyFragment } from '../../../generated/graphql'
 import { InlineLink } from '../../utils/typography/InlineLink'
-import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
+import {
+  PERSISTENT_VOLUMES_REL_PATH,
+  getKubernetesAbsPath,
+  getResourceDetailsAbsPath,
+  getStorageAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
+
+import { useKubernetesContext } from '../Kubernetes'
 
 import { PVStatusChip } from './utils'
 
+export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
+  {
+    label: 'kubernetes',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: cluster?.name ?? '',
+    url: getKubernetesAbsPath(cluster?.id),
+  },
+  {
+    label: 'storage',
+    url: getStorageAbsPath(cluster?.id),
+  },
+  {
+    label: 'persistent volumes',
+    url: `${getStorageAbsPath(cluster?.id)}/${PERSISTENT_VOLUMES_REL_PATH}`,
+  },
+]
+
 const columnHelper = createColumnHelper<PersistentVolumeT>()
 
 const colStatus = columnHelper.accessor((pv) => pv.status, {
@@ -102,6 +129,10 @@ const colAccessModes = columnHelper.accessor((pv) => pv.accessModes, {
 })
 
 export default function PersistentVolumes() {
+  const { cluster } = useKubernetesContext()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
+
   const { colName, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(

diff --git a/assets/src/components/kubernetes/storage/Storage.tsx b/assets/src/components/kubernetes/storage/Storage.tsx
@@ -8,8 +8,8 @@ import {
 import { Suspense, useMemo, useRef, useState } from 'react'
 
 import {
+  PERSISTENT_VOLUMES_REL_PATH,
   PERSISTENT_VOLUME_CLAIMS_REL_PATH,
-  PERSISTENT_VOLUME_REL_PATH,
   STORAGE_CLASSES_REL_PATH,
   getKubernetesAbsPath,
   getStorageAbsPath,
@@ -31,7 +31,7 @@ const directory = [
     path: PERSISTENT_VOLUME_CLAIMS_REL_PATH,
     label: 'Persistent volume claims',
   },
-  { path: PERSISTENT_VOLUME_REL_PATH, label: 'Persistent volumes' },
+  { path: PERSISTENT_VOLUMES_REL_PATH, label: 'Persistent volumes' },
   { path: STORAGE_CLASSES_REL_PATH, label: 'Storage classes' },
 ] as const
 

diff --git a/assets/src/components/kubernetes/utils.tsx b/assets/src/components/kubernetes/utils.tsx
@@ -190,7 +190,11 @@ export function MetadataSidecar({
       {objectMeta && (
         <>
           <SidecarItem heading="Name">{objectMeta.name}</SidecarItem>
-          <SidecarItem heading="Namespace">{objectMeta.namespace}</SidecarItem>
+          {objectMeta.namespace && (
+            <SidecarItem heading="Namespace">
+              {objectMeta.namespace}
+            </SidecarItem>
+          )}
           <SidecarItem heading="UID">{objectMeta.uid}</SidecarItem>
           <SidecarItem heading="Creation date">
             {moment(objectMeta.creationTimestamp).format('lll')}

diff --git a/assets/src/generated/graphql-kubernetes.ts b/assets/src/generated/graphql-kubernetes.ts
@@ -4780,6 +4780,13 @@ export type PersistentVolumesQueryVariables = Exact<{
 
 export type PersistentVolumesQuery = { __typename?: 'Query', handleGetPersistentVolumeList?: { __typename?: 'persistentvolume_PersistentVolumeList', listMeta: { __typename?: 'types_ListMeta', totalItems: number }, items: Array<{ __typename?: 'persistentvolume_PersistentVolume', status: string, claim: string, storageClass: string, reason: string, reclaimPolicy: 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 PersistentVolumeQueryVariables = Exact<{
+  name: Scalars['String']['input'];
+}>;
+
+
+export type PersistentVolumeQuery = { __typename?: 'Query', handleGetPersistentVolumeDetail?: { __typename?: 'persistentvolume_PersistentVolumeDetail', status: string, claim: string, storageClass: string, reason: string, reclaimPolicy: 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 PersistentVolumeClaimsQueryVariables = Exact<{
   namespace: Scalars['String']['input'];
   filterBy?: InputMaybe<Scalars['String']['input']>;
@@ -6127,6 +6134,58 @@ export type PersistentVolumesQueryHookResult = ReturnType<typeof usePersistentVo
 export type PersistentVolumesLazyQueryHookResult = ReturnType<typeof usePersistentVolumesLazyQuery>;
 export type PersistentVolumesSuspenseQueryHookResult = ReturnType<typeof usePersistentVolumesSuspenseQuery>;
 export type PersistentVolumesQueryResult = Apollo.QueryResult<PersistentVolumesQuery, PersistentVolumesQueryVariables>;
+export const PersistentVolumeDocument = gql`
+    query PersistentVolume($name: String!) {
+  handleGetPersistentVolumeDetail(persistentvolume: $name) @rest(path: "persistentvolume/{args.persistentvolume}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    status
+    claim
+    storageClass
+    reason
+    reclaimPolicy
+    accessModes
+  }
+}
+    ${TypeMetaFragmentDoc}
+${ObjectMetaFragmentDoc}`;
+
+/**
+ * __usePersistentVolumeQuery__
+ *
+ * To run a query within a React component, call `usePersistentVolumeQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePersistentVolumeQuery` 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 } = usePersistentVolumeQuery({
+ *   variables: {
+ *      name: // value for 'name'
+ *   },
+ * });
+ */
+export function usePersistentVolumeQuery(baseOptions: Apollo.QueryHookOptions<PersistentVolumeQuery, PersistentVolumeQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PersistentVolumeQuery, PersistentVolumeQueryVariables>(PersistentVolumeDocument, options);
+      }
+export function usePersistentVolumeLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PersistentVolumeQuery, PersistentVolumeQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PersistentVolumeQuery, PersistentVolumeQueryVariables>(PersistentVolumeDocument, options);
+        }
+export function usePersistentVolumeSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<PersistentVolumeQuery, PersistentVolumeQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<PersistentVolumeQuery, PersistentVolumeQueryVariables>(PersistentVolumeDocument, options);
+        }
+export type PersistentVolumeQueryHookResult = ReturnType<typeof usePersistentVolumeQuery>;
+export type PersistentVolumeLazyQueryHookResult = ReturnType<typeof usePersistentVolumeLazyQuery>;
+export type PersistentVolumeSuspenseQueryHookResult = ReturnType<typeof usePersistentVolumeSuspenseQuery>;
+export type PersistentVolumeQueryResult = Apollo.QueryResult<PersistentVolumeQuery, PersistentVolumeQueryVariables>;
 export const PersistentVolumeClaimsDocument = gql`
     query PersistentVolumeClaims($namespace: String!, $filterBy: String, $sortBy: String, $itemsPerPage: String, $page: String) {
   handleGetPersistentVolumeClaimList(

diff --git a/assets/src/graph-kubernetes/storage/persistentvolume.graphql b/assets/src/graph-kubernetes/storage/persistentvolume.graphql
@@ -32,3 +32,22 @@ query PersistentVolumes(
     }
   }
 }
+
+query PersistentVolume($name: String!) {
+  handleGetPersistentVolumeDetail(persistentvolume: $name)
+  @rest(path: "persistentvolume/{args.persistentvolume}") {
+    typeMeta @type(name: "types_TypeMeta") {
+      ...TypeMeta
+    }
+    objectMeta @type(name: "types_ObjectMeta") {
+      ...ObjectMeta
+    }
+    status
+    claim
+    storageClass
+    reason
+    reclaimPolicy
+    accessModes
+  }
+}
+
diff --git a/assets/src/routes/kubernetesRoutes.tsx b/assets/src/routes/kubernetesRoutes.tsx
@@ -1,7 +1,10 @@
 import { Navigate, Route } from 'react-router-dom'
 
 import Service from 'components/kubernetes/discovery/Service'
-import PersistentVolume from 'components/kubernetes/storage/PersistentVolume'
+import PersistentVolume, {
+  PersistentVolumeInfo,
+  PersistentVolumeRaw,
+} from 'components/kubernetes/storage/PersistentVolume'
 import Secret, {
   SecretInfo,
   SecretRaw,
@@ -66,6 +69,7 @@ import PersistentVolumeClaim from '../components/kubernetes/storage/PersistentVo
 import StorageClass from '../components/kubernetes/storage/StorageClass'
 import ConfigMap, {
   ConfigMapInfo,
+  ConfigMapRaw,
 } from '../components/kubernetes/configuration/ConfigMap'
 import Namespace from '../components/kubernetes/cluster/Namespace'
 
@@ -90,8 +94,8 @@ import {
   NAMESPACES_REL_PATH,
   NETWORK_POLICIES_REL_PATH,
   NODES_REL_PATH,
+  PERSISTENT_VOLUMES_REL_PATH,
   PERSISTENT_VOLUME_CLAIMS_REL_PATH,
-  PERSISTENT_VOLUME_REL_PATH,
   PODS_REL_PATH,
   REPLICATION_CONTROLLERS_REL_PATH,
   REPLICA_SETS_REL_PATH,
@@ -214,7 +218,7 @@ export const kubernetesRoutes = [
         element={<PersistentVolumeClaims />}
       />
       <Route
-        path={PERSISTENT_VOLUME_REL_PATH}
+        path={PERSISTENT_VOLUMES_REL_PATH}
         element={<PersistentVolumes />}
       />
       <Route
@@ -391,10 +395,19 @@ export const kubernetesRoutes = [
     element={<PersistentVolumeClaim />}
   />,
   <Route
-    index
-    path={`${KUBERNETES_ABS_PATH}/${PERSISTENT_VOLUME_REL_PATH}/${RESOURCE_DETAILS_REL_PATH}`}
+    path={`${KUBERNETES_ABS_PATH}/${PERSISTENT_VOLUMES_REL_PATH}/${RESOURCE_DETAILS_REL_PATH}`}
     element={<PersistentVolume />}
-  />,
+  >
+    <Route
+      index
+      path=""
+      element={<PersistentVolumeInfo />}
+    />
+    <Route
+      path="raw"
+      element={<PersistentVolumeRaw />}
+    />
+  </Route>,
   <Route
     index
     path={`${KUBERNETES_ABS_PATH}/${STORAGE_CLASSES_REL_PATH}/${RESOURCE_DETAILS_REL_PATH}`}
@@ -412,7 +425,7 @@ export const kubernetesRoutes = [
     />
     <Route
       path="raw"
-      element={<SecretRaw />}
+      element={<ConfigMapRaw />}
     />
   </Route>,
   <Route

diff --git a/assets/src/routes/kubernetesRoutesConsts.tsx b/assets/src/routes/kubernetesRoutesConsts.tsx
@@ -23,7 +23,7 @@ export const NETWORK_POLICIES_REL_PATH = 'networkpolicies'
 
 export const STORAGE_REL_PATH = 'storage'
 export const PERSISTENT_VOLUME_CLAIMS_REL_PATH = 'persistentvolumeclaims'
-export const PERSISTENT_VOLUME_REL_PATH = 'persistentvolumes'
+export const PERSISTENT_VOLUMES_REL_PATH = 'persistentvolumes'
 export const STORAGE_CLASSES_REL_PATH = 'storageclasses'
 
 export const CONFIGURATION_REL_PATH = 'configuration'