feat: Kubernetes improvements (#847)

Co-authored-by: Sebastian Florek <[email protected]>
pluralsh · Apr 18, 2024 · 50de100 · 50de100
1 parent 7758122
commit 50de100
Show file tree

Hide file tree

Showing 123 changed files with 3,578 additions and 1,777 deletions.
diff --git a/assets/src/components/cd/globalServices/GlobalServiceDetailTable.tsx b/assets/src/components/cd/globalServices/GlobalServiceDetailTable.tsx
@@ -172,7 +172,7 @@ export function GlobalServiceDetailTable({
               hasNextPage={pageInfo?.hasNextPage}
               fetchNextPage={fetchNextPage}
               isFetchingNextPage={loading}
-              reactTableOptions={{ meta: { refetch: () => null } }}
+              reactTableOptions={{ meta: { refetch: () => undefined } }}
               reactVirtualOptions={SERVICES_REACT_VIRTUAL_OPTIONS}
             />
           </FullHeightTableWrap>

diff --git a/assets/src/components/cd/namespaces/NamespacesDetailTable.tsx b/assets/src/components/cd/namespaces/NamespacesDetailTable.tsx
@@ -148,7 +148,7 @@ export function NamespacesDetailTable({
               hasNextPage={pageInfo?.hasNextPage}
               fetchNextPage={fetchNextPage}
               isFetchingNextPage={loading}
-              reactTableOptions={{ meta: { refetch: () => null } }}
+              reactTableOptions={{ meta: { refetch: () => undefined } }}
               reactVirtualOptions={SERVICES_REACT_VIRTUAL_OPTIONS}
             />
           </FullHeightTableWrap>

diff --git a/assets/src/components/cluster/ContainerStatuses.tsx b/assets/src/components/cluster/ContainerStatuses.tsx
@@ -61,7 +61,10 @@ export function ContainerStatuses({
   return (
     <Flex gap="xxxsmall">
       {statuses.map(({ name, readiness }) => (
-        <ContainerStatus status={{ name, readiness }} />
+        <ContainerStatus
+          key={name}
+          status={{ name, readiness }}
+        />
       ))}
     </Flex>
   )

diff --git a/assets/src/components/cluster/pods/PodsList.tsx b/assets/src/components/cluster/pods/PodsList.tsx
@@ -234,9 +234,7 @@ export const ColImages = columnHelper.accessor((row) => row?.images || [], {
         label={image}
         placement="left-start"
       >
-        <TruncateStart>
-          <span>{image}</span>
-        </TruncateStart>
+        <TruncateStart>{image}</TruncateStart>
       </Tooltip>
     ))
   },

diff --git a/assets/src/components/kubernetes/Cluster.tsx b/assets/src/components/kubernetes/Cluster.tsx
@@ -3,18 +3,20 @@ import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
 import { isEmpty } from 'lodash'
 
 import {
-  ClusterTinyFragment,
-  useClustersTinyQuery,
+  KubernetesClusterFragment,
+  Maybe,
+  PinnedCustomResourceFragment,
+  useKubernetesClustersQuery,
 } from '../../generated/graphql'
 import { mapExistingNodes } from '../../utils/graphql'
-
 import { getWorkloadsAbsPath } from '../../routes/kubernetesRoutesConsts'
 import { useNamespacesQuery } from '../../generated/graphql-kubernetes'
 import { KubernetesClient } from '../../helpers/kubernetes.client'
 
 type ClusterContextT = {
-  clusters: ClusterTinyFragment[]
-  cluster?: ClusterTinyFragment
+  clusters: KubernetesClusterFragment[]
+  refetch?: Nullable<() => void>
+  cluster?: KubernetesClusterFragment
   namespaces: string[]
 }
 
@@ -36,12 +38,36 @@ export const useClusters = () => {
   return clusters
 }
 
+export const useRefetch = () => {
+  const { refetch } = useClusterContext()
+
+  return refetch
+}
+
 export const useCluster = () => {
   const { cluster } = useClusterContext()
 
   return cluster
 }
 
+export const usePinnedResources = (): Maybe<PinnedCustomResourceFragment>[] => {
+  const cluster = useCluster()
+
+  return cluster?.pinnedCustomResources ?? []
+}
+
+export const useIsPinnedResource = (
+  kind: string,
+  version: string,
+  group: string
+) => {
+  const pinnedResources = usePinnedResources()
+
+  return !!pinnedResources.find(
+    (pr) => pr?.group === group && pr?.version === version && pr?.kind === kind
+  )
+}
+
 export const useNamespaces = () => {
   const { namespaces } = useClusterContext()
 
@@ -53,7 +79,7 @@ export default function Cluster() {
   const { search } = useLocation()
   const navigate = useNavigate()
 
-  const { data } = useClustersTinyQuery({
+  const { data, refetch } = useKubernetesClustersQuery({
     pollInterval: 120_000,
     fetchPolicy: 'cache-and-network',
   })
@@ -82,8 +108,8 @@ export default function Cluster() {
   )
 
   const context = useMemo(
-    () => ({ clusters, cluster, namespaces }) as ClusterContextT,
-    [clusters, cluster, namespaces]
+    () => ({ clusters, refetch, cluster, namespaces }) as ClusterContextT,
+    [clusters, refetch, cluster, namespaces]
   )
 
   useEffect(() => {

diff --git a/assets/src/components/kubernetes/access/Access.tsx b/assets/src/components/kubernetes/access/Access.tsx
@@ -1,6 +1,6 @@
 import { Outlet, useLocation, useMatch } from 'react-router-dom'
 import { SubTab, TabList, TabPanel } from '@pluralsh/design-system'
-import { Suspense, useMemo, useRef, useState } from 'react'
+import { Suspense, useMemo, useRef } from 'react'
 
 import {
   CLUSTER_ROLES_REL_PATH,
@@ -13,12 +13,22 @@ import {
 import { ScrollablePage } from '../../utils/layout/ScrollablePage'
 import { LinkTabWrap } from '../../utils/Tabs'
 import { PluralErrorBoundary } from '../../cd/PluralErrorBoundary'
-import {
-  PageScrollableContext,
-  useSetPageHeaderContent,
-} from '../../cd/ContinuousDeployment'
+import { useSetPageHeaderContent } from '../../cd/ContinuousDeployment'
 import LoadingIndicator from '../../utils/LoadingIndicator'
 import { useCluster } from '../Cluster'
+import { Maybe } from '../../../generated/graphql-kubernetes'
+import { KubernetesClusterFragment } from '../../../generated/graphql'
+import { getBaseBreadcrumbs } from '../common/utils'
+
+export const getAccessBreadcrumbs = (
+  cluster?: Maybe<KubernetesClusterFragment>
+) => [
+  ...getBaseBreadcrumbs(cluster),
+  {
+    label: 'access',
+    url: getAccessAbsPath(cluster?.id),
+  },
+]
 
 const directory = [
   { path: ROLES_REL_PATH, label: 'Roles' },
@@ -30,15 +40,6 @@ const directory = [
 
 export default function Access() {
   const cluster = useCluster()
-  const [scrollable, setScrollable] = useState(false)
-
-  const pageScrollableContext = useMemo(
-    () => ({
-      setScrollable,
-    }),
-    []
-  )
-
   const tabStateRef = useRef<any>(null)
   const pathMatch = useMatch(`${getAccessAbsPath(cluster?.id)}/:tab/*`)
   const tab = pathMatch?.params?.tab || ''
@@ -83,18 +84,16 @@ export default function Access() {
   return (
     <ScrollablePage
       fullWidth
-      scrollable={scrollable}
+      scrollable={false}
     >
       <PluralErrorBoundary>
         <TabPanel
           css={{ height: '100%' }}
           stateRef={tabStateRef}
         >
-          <PageScrollableContext.Provider value={pageScrollableContext}>
-            <Suspense fallback={<LoadingIndicator />}>
-              <Outlet />
-            </Suspense>
-          </PageScrollableContext.Provider>
+          <Suspense fallback={<LoadingIndicator />}>
+            <Outlet />
+          </Suspense>
         </TabPanel>
       </PluralErrorBoundary>
     </ScrollablePage>

diff --git a/assets/src/components/kubernetes/access/ClusterRole.tsx b/assets/src/components/kubernetes/access/ClusterRole.tsx
@@ -9,15 +9,13 @@ import {
   useClusterRoleQuery,
 } from '../../../generated/graphql-kubernetes'
 import { MetadataSidecar } from '../common/utils'
-
 import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
 import LoadingIndicator from '../../utils/LoadingIndicator'
 import ResourceDetails, { TabEntry } from '../common/ResourceDetails'
 import PolicyRules from '../common/PolicyRules'
-
 import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap'
-
 import { useCluster } from '../Cluster'
+import { Kind } from '../common/types'
 
 import { getBreadcrumbs } from './ClusterRoles'
 
@@ -47,7 +45,7 @@ export default function ClusterRole(): ReactElement {
 
         {
           label: name ?? '',
-          url: getResourceDetailsAbsPath(clusterId, 'clusterrole', name),
+          url: getResourceDetailsAbsPath(clusterId, Kind.ClusterRole, name),
         },
       ],
       [cluster, clusterId, name]

diff --git a/assets/src/components/kubernetes/access/ClusterRoleBinding.tsx b/assets/src/components/kubernetes/access/ClusterRoleBinding.tsx
@@ -16,6 +16,7 @@ import LoadingIndicator from '../../utils/LoadingIndicator'
 import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap'
 import Subjects from '../common/Subjects'
 import { useCluster } from '../Cluster'
+import { Kind } from '../common/types'
 
 import { getBreadcrumbs } from './ClusterRoleBindings'
 
@@ -44,7 +45,11 @@ export default function ClusterRoleBinding(): ReactElement {
         ...getBreadcrumbs(cluster),
         {
           label: name ?? '',
-          url: getResourceDetailsAbsPath(clusterId, 'clusterrolebinding', name),
+          url: getResourceDetailsAbsPath(
+            clusterId,
+            Kind.ClusterRoleBinding,
+            name
+          ),
         },
       ],
       [cluster, clusterId, name]
@@ -63,7 +68,7 @@ export default function ClusterRoleBinding(): ReactElement {
               as={Link}
               to={getResourceDetailsAbsPath(
                 clusterId,
-                'clusterrole',
+                Kind.ClusterRole,
                 crb?.roleRef.name ?? ''
               )}
               inline

diff --git a/assets/src/components/kubernetes/access/ClusterRoleBindings.tsx b/assets/src/components/kubernetes/access/ClusterRoleBindings.tsx
@@ -11,21 +11,19 @@ import {
   Maybe,
   useClusterRoleBindingsQuery,
 } from '../../../generated/graphql-kubernetes'
-import { getBaseBreadcrumbs, useDefaultColumns } from '../common/utils'
+import { useDefaultColumns } from '../common/utils'
 import { ResourceList } from '../common/ResourceList'
-import { ClusterTinyFragment } from '../../../generated/graphql'
+import { KubernetesClusterFragment } from '../../../generated/graphql'
 import {
   CLUSTER_ROLE_BINDINGS_REL_PATH,
   getAccessAbsPath,
 } from '../../../routes/kubernetesRoutesConsts'
 import { useCluster } from '../Cluster'
 
-export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
-  ...getBaseBreadcrumbs(cluster),
-  {
-    label: 'access',
-    url: getAccessAbsPath(cluster?.id),
-  },
+import { getAccessBreadcrumbs } from './Access'
+
+export const getBreadcrumbs = (cluster?: Maybe<KubernetesClusterFragment>) => [
+  ...getAccessBreadcrumbs(cluster),
   {
     label: 'cluster role bindings',
     url: `${getAccessAbsPath(cluster?.id)}/${CLUSTER_ROLE_BINDINGS_REL_PATH}`,
@@ -39,11 +37,11 @@ export default function ClusterRoleBindings() {
 
   useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
 
-  const { colName, colLabels, colCreationTimestamp } =
+  const { colAction, colName, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(
-    () => [colName, colLabels, colCreationTimestamp],
-    [colName, colLabels, colCreationTimestamp]
+    () => [colName, colLabels, colCreationTimestamp, colAction],
+    [colName, colLabels, colCreationTimestamp, colAction]
   )
 
   return (

diff --git a/assets/src/components/kubernetes/access/ClusterRoles.tsx b/assets/src/components/kubernetes/access/ClusterRoles.tsx
@@ -11,21 +11,19 @@ import {
   Maybe,
   useClusterRolesQuery,
 } from '../../../generated/graphql-kubernetes'
-import { getBaseBreadcrumbs, useDefaultColumns } from '../common/utils'
+import { useDefaultColumns } from '../common/utils'
 import { ResourceList } from '../common/ResourceList'
-import { ClusterTinyFragment } from '../../../generated/graphql'
+import { KubernetesClusterFragment } from '../../../generated/graphql'
 import {
   CLUSTER_ROLES_REL_PATH,
   getAccessAbsPath,
 } from '../../../routes/kubernetesRoutesConsts'
 import { useCluster } from '../Cluster'
 
-export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
-  ...getBaseBreadcrumbs(cluster),
-  {
-    label: 'access',
-    url: getAccessAbsPath(cluster?.id),
-  },
+import { getAccessBreadcrumbs } from './Access'
+
+export const getBreadcrumbs = (cluster?: Maybe<KubernetesClusterFragment>) => [
+  ...getAccessBreadcrumbs(cluster),
   {
     label: 'cluster roles',
     url: `${getAccessAbsPath(cluster?.id)}/${CLUSTER_ROLES_REL_PATH}`,
@@ -39,11 +37,11 @@ export default function ClusterRoles() {
 
   useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
 
-  const { colName, colLabels, colCreationTimestamp } =
+  const { colAction, colName, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
   const columns = useMemo(
-    () => [colName, colLabels, colCreationTimestamp],
-    [colName, colLabels, colCreationTimestamp]
+    () => [colName, colLabels, colCreationTimestamp, colAction],
+    [colName, colLabels, colCreationTimestamp, colAction]
   )
 
   return (

diff --git a/assets/src/components/kubernetes/access/Role.tsx b/assets/src/components/kubernetes/access/Role.tsx
@@ -9,7 +9,6 @@ import {
   useRoleQuery,
 } from '../../../generated/graphql-kubernetes'
 import { KubernetesClient } from '../../../helpers/kubernetes.client'
-
 import {
   ROLES_REL_PATH,
   getAccessAbsPath,
@@ -18,12 +17,10 @@ import {
 import { NAMESPACE_PARAM } from '../Navigation'
 import LoadingIndicator from '../../utils/LoadingIndicator'
 import ResourceDetails, { TabEntry } from '../common/ResourceDetails'
-
 import PolicyRules from '../common/PolicyRules'
-
 import { FullHeightTableWrap } from '../../utils/layout/FullHeightTableWrap'
-
 import { useCluster } from '../Cluster'
+import { Kind } from '../common/types'
 
 import { getBreadcrumbs } from './Roles'
 
@@ -56,7 +53,7 @@ export default function Role(): ReactElement {
         },
         {
           label: name ?? '',
-          url: getResourceDetailsAbsPath(clusterId, 'role', name, namespace),
+          url: getResourceDetailsAbsPath(clusterId, Kind.Role, name, namespace),
         },
       ],
       [cluster, clusterId, name, namespace]

diff --git a/assets/src/components/kubernetes/access/RoleBinding.tsx b/assets/src/components/kubernetes/access/RoleBinding.tsx
@@ -23,6 +23,8 @@ import Subjects from '../common/Subjects'
 
 import { useCluster } from '../Cluster'
 
+import { Kind } from '../common/types'
+
 import { getBreadcrumbs } from './RoleBindings'
 
 const directory: Array<TabEntry> = [
@@ -59,7 +61,7 @@ export default function RoleBinding(): ReactElement {
           label: name ?? '',
           url: getResourceDetailsAbsPath(
             clusterId,
-            'rolebinding',
+            Kind.RoleBinding,
             name,
             namespace
           ),
@@ -81,7 +83,7 @@ export default function RoleBinding(): ReactElement {
               as={Link}
               to={getResourceDetailsAbsPath(
                 clusterId,
-                'role',
+                Kind.Role,
                 rb?.roleRef.name ?? '',
                 namespace
               )}