Merge remote-tracking branch 'origin/kubernetes' into kubernetes

pluralsh · Mar 25, 2024 · 1efd8ae · 1efd8ae
2 parents ec3edf6 + 70e8766
commit 1efd8ae
Show file tree

Hide file tree

Showing 13 changed files with 143 additions and 22 deletions.
diff --git a/assets/src/components/kubernetes/ResourceList.tsx b/assets/src/components/kubernetes/ResourceList.tsx
@@ -1,27 +1,35 @@
 import {
   Dispatch,
-  type MouseEvent,
   ReactElement,
   SetStateAction,
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
 } from 'react'
 import type { OperationVariables } from '@apollo/client/core'
 import type {
   QueryHookOptions,
   QueryResult,
 } from '@apollo/client/react/types/types'
-import { Row } from '@tanstack/react-table'
 import { Table } from '@pluralsh/design-system'
 
 import styled from 'styled-components'
 
+import { useNavigate } from 'react-router-dom'
+
+import { Row } from '@tanstack/react-table'
+
 import { KubernetesClient } from '../../helpers/kubernetes.client'
-import { Types_ListMeta as ListMetaT } from '../../generated/graphql-kubernetes'
+import {
+  Types_ListMeta as ListMetaT,
+  Types_ObjectMeta as ObjectMetaT,
+} from '../../generated/graphql-kubernetes'
 import { FullHeightTableWrap } from '../utils/layout/FullHeightTableWrap'
 
+import { getResourceDetailsRelPath } from '../../routes/kubernetesRoutesConsts'
+
 import {
   DEFAULT_DATA_SELECT,
   ITEMS_PER_PAGE,
@@ -54,6 +62,10 @@ interface ResourceListT {
   listMeta: ListMetaT
 }
 
+interface ResourceT {
+  objectMeta: ObjectMetaT
+}
+
 type QueryName<TQuery> = Exclude<Extract<keyof TQuery, string>, '__typename'>
 type ResourceListItemsKey<TResourceList> = Exclude<
   Extract<keyof TResourceList, string>,
@@ -62,7 +74,6 @@ type ResourceListItemsKey<TResourceList> = Exclude<
 
 interface ResourceListProps<
   TResourceList,
-  TResource,
   TQuery,
   TVariables extends ResourceVariables,
 > {
@@ -73,7 +84,6 @@ interface ResourceListProps<
   queryName: QueryName<TQuery>
   itemsKey: ResourceListItemsKey<TResourceList>
   namespaced?: boolean
-  onRowClick?: (e: MouseEvent<HTMLTableRowElement>, row: Row<TResource>) => void
 }
 
 const Skeleton = styled(SkeletonUnstyled)(({ theme }) => ({
@@ -108,7 +118,7 @@ function SkeletonUnstyled({ ...props }): ReactElement {
 
 export function ResourceList<
   TResourceList extends ResourceListT,
-  TResource,
+  TResource extends ResourceT,
   TQuery,
   TVariables extends ResourceVariables,
 >({
@@ -117,23 +127,12 @@ export function ResourceList<
   namespaced = false,
   queryName,
   itemsKey,
-  onRowClick,
-}: ResourceListProps<
-  TResourceList,
-  TResource,
-  TQuery,
-  TVariables
->): ReactElement {
+}: ResourceListProps<TResourceList, TQuery, TVariables>): ReactElement {
+  const navigate = useNavigate()
   const { cluster, namespace, filter } = useKubernetesContext()
   const { sortBy, reactTableOptions } = useSortedTableOptions()
   const ctx = useContext(ResourceListContext)
 
-  if (!ctx) {
-    throw Error('ResourceList must be used within a ResourceListContext')
-  }
-
-  ctx.setNamespaced(namespaced)
-
   const { data, loading, fetchMore } = query({
     client: KubernetesClient(cluster?.id ?? ''),
     skip: !cluster,
@@ -176,6 +175,12 @@ export function ResourceList<
     })
   }, [fetchMore, hasNextPage, page, queryName, itemsKey])
 
+  useEffect(() => {
+    if (!ctx) return
+
+    ctx.setNamespaced(namespaced)
+  }, [ctx, namespaced])
+
   return (
     <FullHeightTableWrap>
       <Table
@@ -186,7 +191,14 @@ export function ResourceList<
         isFetchingNextPage={loading}
         reactTableOptions={reactTableOptions}
         virtualizeRows
-        onRowClick={onRowClick}
+        onRowClick={(_, row: Row<ResourceT>) => {
+          navigate(
+            getResourceDetailsRelPath(
+              row.original.objectMeta.name!,
+              row.original.objectMeta.namespace
+            )
+          )
+        }}
         css={{
           maxHeight: 'unset',
           height: '100%',

diff --git a/assets/src/components/kubernetes/workloads/CronJob.tsx b/assets/src/components/kubernetes/workloads/CronJob.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react'
+
+export default function CronJob(): ReactElement {
+  return <div>CronJob details</div>
+}
diff --git a/assets/src/components/kubernetes/workloads/DaemonSet.tsx b/assets/src/components/kubernetes/workloads/DaemonSet.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react'
+
+export default function DaemonSet(): ReactElement {
+  return <div>DaemonSet details</div>
+}
diff --git a/assets/src/components/kubernetes/workloads/Deployment.tsx b/assets/src/components/kubernetes/workloads/Deployment.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react'
+
+export default function Deployment(): ReactElement {
+  return <div>Deployment details</div>
+}
diff --git a/assets/src/components/kubernetes/workloads/Job.tsx b/assets/src/components/kubernetes/workloads/Job.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react'
+
+export default function Job(): ReactElement {
+  return <div>Job details</div>
+}
diff --git a/assets/src/components/kubernetes/workloads/Pod.tsx b/assets/src/components/kubernetes/workloads/Pod.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react'
+
+export default function Pod(): ReactElement {
+  return <div>Pod details</div>
+}
diff --git a/assets/src/components/kubernetes/workloads/Pods.tsx b/assets/src/components/kubernetes/workloads/Pods.tsx
@@ -62,7 +62,7 @@ const colRestarts = columnHelper.accessor((pod) => pod?.restartCount, {
   cell: ({ getValue }) => getValue(),
 })
 
-export default function CronPods() {
+export default function Pods() {
   const { colName, colNamespace, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(

diff --git a/assets/src/components/kubernetes/workloads/ReplicaSet.tsx b/assets/src/components/kubernetes/workloads/ReplicaSet.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react'
+
+export default function ReplicaSet(): ReactElement {
+  return <div>ReplicaSet details</div>
+}
diff --git a/assets/src/components/kubernetes/workloads/ReplicationController.tsx b/assets/src/components/kubernetes/workloads/ReplicationController.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react'
+
+export default function ReplicationController(): ReactElement {
+  return <div>ReplicationController details</div>
+}
diff --git a/assets/src/components/kubernetes/workloads/StatefulSet.tsx b/assets/src/components/kubernetes/workloads/StatefulSet.tsx
@@ -0,0 +1,5 @@
+import { ReactElement } from 'react'
+
+export default function StatefulSet(): ReactElement {
+  return <div>StatefulSet details</div>
+}
diff --git a/assets/src/components/kubernetes/workloads/Workloads.tsx b/assets/src/components/kubernetes/workloads/Workloads.tsx
@@ -27,7 +27,6 @@ import {
 } from '../../cd/ContinuousDeployment'
 import LoadingIndicator from '../../utils/LoadingIndicator'
 import { ScrollablePage } from '../../utils/layout/ScrollablePage'
-
 import { useKubernetesContext } from '../Kubernetes'
 
 const directory = [

diff --git a/assets/src/routes/kubernetesRoutes.tsx b/assets/src/routes/kubernetesRoutes.tsx
@@ -1,5 +1,6 @@
 import { Navigate, Route } from 'react-router-dom'
 
+import Pod from '../components/kubernetes/workloads/Pod'
 import Kubernetes from '../components/kubernetes/Kubernetes'
 import Workloads from '../components/kubernetes/workloads/Workloads'
 import Discovery from '../components/kubernetes/discovery/Discovery'
@@ -33,6 +34,17 @@ import RoleBindings from '../components/kubernetes/access/RoleBindings'
 import Roles from '../components/kubernetes/access/Roles'
 import Access from '../components/kubernetes/access/Access'
 
+import Deployment from '../components/kubernetes/workloads/Deployment'
+import ReplicaSet from '../components/kubernetes/workloads/ReplicaSet'
+
+import StatefulSet from '../components/kubernetes/workloads/StatefulSet'
+import DaemonSet from '../components/kubernetes/workloads/DaemonSet'
+
+import Job from '../components/kubernetes/workloads/Job'
+import CronJob from '../components/kubernetes/workloads/CronJob'
+
+import ReplicationController from '../components/kubernetes/workloads/ReplicationController'
+
 import {
   ACCESS_REL_PATH,
   CLUSTER_REL_PATH,
@@ -50,6 +62,7 @@ import {
   INGRESS_CLASSES_REL_PATH,
   JOBS_REL_PATH,
   KUBERNETES_ABS_PATH,
+  NAMESPACED_RESOURCE_DETAILS_REL_PATH,
   NAMESPACES_REL_PATH,
   NETWORK_POLICIES_REL_PATH,
   NODES_REL_PATH,
@@ -99,34 +112,81 @@ export const kubernetesRoutes = [
         path={DEPLOYMENTS_REL_PATH}
         element={<Deployments />}
       />
+      <Route
+        index
+        path={`${DEPLOYMENTS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
+        element={<Deployment />}
+      />
+
       <Route
         path={PODS_REL_PATH}
         element={<Pods />}
       />
+      <Route
+        index
+        path={`${PODS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
+        element={<Pod />}
+      />
+
       <Route
         path={REPLICA_SETS_REL_PATH}
         element={<ReplicaSets />}
       />
+      <Route
+        index
+        path={`${REPLICA_SETS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
+        element={<ReplicaSet />}
+      />
+
       <Route
         path={STATEFUL_SETS_REL_PATH}
         element={<StatefulSets />}
       />
+      <Route
+        index
+        path={`${STATEFUL_SETS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
+        element={<StatefulSet />}
+      />
+
       <Route
         path={DAEMON_SETS_REL_PATH}
         element={<DaemonSets />}
       />
+      <Route
+        index
+        path={`${DAEMON_SETS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
+        element={<DaemonSet />}
+      />
+
       <Route
         path={JOBS_REL_PATH}
         element={<Jobs />}
       />
+      <Route
+        index
+        path={`${JOBS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
+        element={<Job />}
+      />
+
       <Route
         path={CRON_JOBS_REL_PATH}
         element={<CronJobs />}
       />
+      <Route
+        index
+        path={`${CRON_JOBS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
+        element={<CronJob />}
+      />
+
       <Route
         path={REPLICATION_CONTROLLERS_REL_PATH}
         element={<ReplicationControllers />}
       />
+      <Route
+        index
+        path={`${REPLICATION_CONTROLLERS_REL_PATH}/${NAMESPACED_RESOURCE_DETAILS_REL_PATH}`}
+        element={<ReplicationController />}
+      />
     </Route>
     <Route
       path={DISCOVERY_REL_PATH}

diff --git a/assets/src/routes/kubernetesRoutesConsts.tsx b/assets/src/routes/kubernetesRoutesConsts.tsx
@@ -41,6 +41,9 @@ export const NAMESPACES_REL_PATH = 'namespaces'
 
 export const CUSTOM_RESOURCES_REL_PATH = 'customresources'
 
+export const NAMESPACED_RESOURCE_DETAILS_REL_PATH = ':namespace/:name'
+export const RESOURCE_DETAILS_REL_PATH = ':name'
+
 export function getKubernetesAbsPath(clusterId: string | null | undefined) {
   return `/kubernetes/${clusterId}`
 }
@@ -69,6 +72,13 @@ export function getAccessAbsPath(clusterId: string | null | undefined) {
   return `/kubernetes/${clusterId}/${ACCESS_REL_PATH}`
 }
 
+export function getResourceDetailsRelPath(
+  name: string,
+  namespace?: Nullable<string>
+): string {
+  return namespace ? `${namespace}/${name}` : name
+}
+
 export function getCustomResourcesAbsPath(
   clusterId: string | null | undefined
 ) {