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

pluralsh · Apr 2, 2024 · d3095e1 · d3095e1
2 parents 0562a3b + d44de26
commit d3095e1
Show file tree

Hide file tree

Showing 20 changed files with 996 additions and 174 deletions.
diff --git a/assets/schema/kubernetes-schema.graphql b/assets/schema/kubernetes-schema.graphql
@@ -1380,7 +1380,7 @@ type Query {
     metricNames: String
     """Aggregations to be performed for each metric (default: sum)"""
     aggregations: String
-  ): pod_PodList @httpOperation(subgraph: "api", path: "/api/v1/replicaset/{args.namespace}/{args.replicaSet}/service", operationSpecificHeaders: "{\"Content-Type\":\"application/json\",\"Accept\":\"application/json\"}", httpMethod: GET, queryParamArgMap: "{\"filterBy\":\"filterBy\",\"sortBy\":\"sortBy\",\"itemsPerPage\":\"itemsPerPage\",\"page\":\"page\",\"metricNames\":\"metricNames\",\"aggregations\":\"aggregations\"}")
+  ): service_ServiceList @httpOperation(subgraph: "api", path: "/api/v1/replicaset/{args.namespace}/{args.replicaSet}/service", operationSpecificHeaders: "{\"Content-Type\":\"application/json\",\"Accept\":\"application/json\"}", httpMethod: GET, queryParamArgMap: "{\"filterBy\":\"filterBy\",\"sortBy\":\"sortBy\",\"itemsPerPage\":\"itemsPerPage\",\"page\":\"page\",\"metricNames\":\"metricNames\",\"aggregations\":\"aggregations\"}")
   """returns a list of ReplicationController in a namespace"""
   handleGetReplicationControllerList(
     """

diff --git a/assets/src/components/kubernetes/cluster/Events.tsx b/assets/src/components/kubernetes/cluster/Events.tsx
@@ -123,27 +123,33 @@ const colLastSeen = columnHelper.accessor((event) => event.lastSeen, {
   cell: ({ getValue }) => <DateTimeCol date={getValue()} />,
 })
 
-export const COLUMNS = [
-  colObjectName,
-  colObjectNamespace,
-  colReason,
-  colType,
-  colMessage,
-  colSource,
-  colCount,
-  colFirstSeen,
-  colLastSeen,
-]
+export function useEventsColumns(): Array<object> {
+  return useMemo(
+    () => [
+      colObjectName,
+      colObjectNamespace,
+      colReason,
+      colType,
+      colMessage,
+      colSource,
+      colCount,
+      colFirstSeen,
+      colLastSeen,
+    ],
+    []
+  )
+}
 
 export default function Events() {
   const { cluster } = useKubernetesContext()
+  const columns = useEventsColumns()
 
   useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
 
   return (
     <ResourceList<EventListT, EventT, EventsQuery, EventsQueryVariables>
       namespaced
-      columns={COLUMNS}
+      columns={columns}
       query={useEventsQuery}
       queryName="handleGetEventList"
       itemsKey="events"

diff --git a/assets/src/components/kubernetes/common/HorizontalPodAutoscalers.tsx b/assets/src/components/kubernetes/common/HorizontalPodAutoscalers.tsx
@@ -0,0 +1,86 @@
+import { ReactElement } from 'react'
+import { Table } from '@pluralsh/design-system'
+import { createColumnHelper } from '@tanstack/react-table'
+import { Link } from 'react-router-dom'
+
+import {
+  Horizontalpodautoscaler_HorizontalPodAutoscaler as HorizontalPodAutoscalerT,
+  Maybe,
+} from '../../../generated/graphql-kubernetes'
+import { DateTimeCol } from '../../utils/table/DateTimeCol'
+import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
+import { InlineLink } from '../../utils/typography/InlineLink'
+import { useKubernetesCluster } from '../utils'
+import { ClusterTinyFragment } from '../../../generated/graphql'
+
+const columnHelper = createColumnHelper<HorizontalPodAutoscalerT>()
+
+const COLUMNS = [
+  columnHelper.accessor((hpa) => hpa?.objectMeta?.name, {
+    id: 'name',
+    header: 'Name',
+    cell: ({ getValue }) => getValue(),
+  }),
+  columnHelper.accessor((hpa) => hpa?.minReplicas, {
+    id: 'minreplicas',
+    header: 'Min Replicas',
+    cell: ({ getValue }) => getValue(),
+  }),
+  columnHelper.accessor((hpa) => hpa?.maxReplicas, {
+    id: 'maxreplicas',
+    header: 'Max Replicas',
+    cell: ({ getValue }) => getValue(),
+  }),
+  columnHelper.accessor((hpa) => hpa, {
+    id: 'reference',
+    header: 'Reference',
+    cell: ({ getValue, table }) => {
+      const { cluster } = table.options.meta as {
+        cluster?: ClusterTinyFragment
+      }
+      const hpa = getValue()
+      const ref = hpa?.scaleTargetRef
+
+      return (
+        <Link
+          to={getResourceDetailsAbsPath(
+            cluster?.id,
+            ref?.kind?.toLowerCase(),
+            ref?.name,
+            hpa?.objectMeta?.namespace
+          )}
+        >
+          <InlineLink>{ref?.name}</InlineLink>
+        </Link>
+      )
+    },
+  }),
+  columnHelper.accessor((hpa) => hpa?.objectMeta?.creationTimestamp, {
+    id: 'creationTimestamp',
+    header: 'Creation',
+    enableSorting: true,
+    cell: ({ getValue }) => <DateTimeCol date={getValue()} />,
+  }),
+]
+
+interface HorizontalPodAutoscalersProps {
+  hpas: Array<Maybe<HorizontalPodAutoscalerT>>
+}
+
+export default function HorizontalPodAutoscalers({
+  hpas,
+}: HorizontalPodAutoscalersProps): ReactElement {
+  const cluster = useKubernetesCluster()
+
+  return (
+    <Table
+      data={hpas}
+      columns={COLUMNS}
+      reactTableOptions={{ meta: { cluster } }}
+      css={{
+        maxHeight: '500px',
+        height: '100%',
+      }}
+    />
+  )
+}
diff --git a/assets/src/components/kubernetes/common/LabelSelector.tsx b/assets/src/components/kubernetes/common/LabelSelector.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+
+import { ChipList } from '@pluralsh/design-system'
+
+import { V1_LabelSelector as LabelSelectorT } from '../../../generated/graphql-kubernetes'
+
+interface LabelSelectorProps {
+  selector: LabelSelectorT
+}
+
+export function LabelSelector({ selector }: LabelSelectorProps): ReactNode {
+  return (
+    <ChipList
+      size="small"
+      values={Object.entries(selector.matchLabels)}
+      limit={3}
+    />
+  )
+}
diff --git a/assets/src/components/kubernetes/common/PodInfo.tsx b/assets/src/components/kubernetes/common/PodInfo.tsx
@@ -0,0 +1,41 @@
+import { ReactNode, useMemo } from 'react'
+
+import { Common_PodInfo as PodInfoT } from '../../../generated/graphql-kubernetes'
+
+interface PodInfoProps {
+  info: PodInfoT
+}
+
+export function PodInfo({ info }: PodInfoProps): ReactNode {
+  return useMemo(() => {
+    const running = info?.running ?? 0
+    const current = info?.current ?? 0
+    const succeeded = info?.succeeded ?? 0
+    const pending = info?.pending ?? 0
+    const failed = info?.failed ?? 0
+    const desired = info?.desired ?? 0
+
+    let result = ''
+
+    if (running > 0) {
+      result += `${running} Running /`
+    }
+
+    if (succeeded > 0) {
+      result += `${succeeded} Succeeded / `
+    }
+
+    if (pending > 0) {
+      result += `${pending} Pending / `
+    }
+
+    if (failed > 0) {
+      result += `${failed} Failed / `
+    }
+
+    result += ` ${current} Current / `
+    result += ` ${desired} Desired`
+
+    return result
+  }, [info])
+}
diff --git a/assets/src/components/kubernetes/common/ResourceOwner.tsx b/assets/src/components/kubernetes/common/ResourceOwner.tsx
@@ -1,15 +1,10 @@
 import { ReactElement } from 'react'
-
 import moment from 'moment'
-
 import { ChipList } from '@pluralsh/design-system'
-
 import { Link } from 'react-router-dom'
 
 import { Controller_ResourceOwner as ResourceOwnerT } from '../../../generated/graphql-kubernetes'
-
 import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
-
 import { InlineLink } from '../../utils/typography/InlineLink'
 
 import ResourceInfoCard, {

diff --git a/assets/src/components/kubernetes/discovery/Services.tsx b/assets/src/components/kubernetes/discovery/Services.tsx
@@ -69,14 +69,11 @@ const colExternalEndpoints = columnHelper.accessor(
   }
 )
 
-export default function Services() {
-  const { cluster } = useKubernetesContext()
-
-  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
-
+export function useServicesColumns(): Array<object> {
   const { colName, colNamespace, colLabels, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
-  const columns = useMemo(
+
+  return useMemo(
     () => [
       colName,
       colNamespace,
@@ -89,6 +86,13 @@ export default function Services() {
     ],
     [colName, colNamespace, colLabels, colCreationTimestamp]
   )
+}
+
+export default function Services() {
+  const { cluster } = useKubernetesContext()
+  const columns = useServicesColumns()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
 
   return (
     <ResourceList<ServiceListT, ServiceT, ServicesQuery, ServicesQueryVariables>

diff --git a/assets/src/components/kubernetes/workloads/Pod.tsx b/assets/src/components/kubernetes/workloads/Pod.tsx
@@ -1,6 +1,6 @@
-import { ReactElement } from 'react'
+import { ReactElement, useMemo } from 'react'
 import { Link, Outlet, useOutletContext, useParams } from 'react-router-dom'
-import { SidecarItem, Table } from '@pluralsh/design-system'
+import { SidecarItem, Table, useSetBreadcrumbs } from '@pluralsh/design-system'
 
 import { KubernetesClient } from '../../../helpers/kubernetes.client'
 import {
@@ -22,11 +22,18 @@ import { MetadataSidecar, useKubernetesCluster } from '../utils'
 import { StatusChip } from '../../cluster/TableElements'
 import { ReadinessT } from '../../../utils/status'
 import { ResourceList } from '../ResourceList'
-import { COLUMNS } from '../cluster/Events'
+import { useEventsColumns } from '../cluster/Events'
 import { usePersistentVolumeClaimListColumns } from '../storage/PersistentVolumeClaims'
-import { getResourceDetailsAbsPath } from '../../../routes/kubernetesRoutesConsts'
+import {
+  PODS_REL_PATH,
+  getResourceDetailsAbsPath,
+  getWorkloadsAbsPath,
+} from '../../../routes/kubernetesRoutesConsts'
 import { InlineLink } from '../../utils/typography/InlineLink'
 import ResourceOwner from '../common/ResourceOwner'
+import { NAMESPACE_PARAM } from '../Kubernetes'
+
+import { getBreadcrumbs } from './Pods'
 
 const directory: Array<TabEntry> = [
   { path: '', label: 'Info' },
@@ -36,6 +43,7 @@ const directory: Array<TabEntry> = [
 ] as const
 
 export function Pod(): ReactElement {
+  const cluster = useKubernetesCluster()
   const { clusterId, name, namespace } = useParams()
   const { data, loading } = usePodQuery({
     client: KubernetesClient(clusterId ?? ''),
@@ -47,6 +55,25 @@ export function Pod(): ReactElement {
     } as PodQueryVariables,
   })
 
+  useSetBreadcrumbs(
+    useMemo(
+      () => [
+        ...getBreadcrumbs(cluster),
+        {
+          label: namespace ?? '',
+          url: `${getWorkloadsAbsPath(
+            clusterId
+          )}/${PODS_REL_PATH}?${NAMESPACE_PARAM}=${namespace}`,
+        },
+        {
+          label: name ?? '',
+          url: getResourceDetailsAbsPath(clusterId, 'pod', name, namespace),
+        },
+      ],
+      [cluster, clusterId, name, namespace]
+    )
+  )
+
   const pod = data?.handleGetPodDetail as PodT
 
   if (loading) {
@@ -147,11 +174,12 @@ export function PodContainers(): ReactElement {
 
 export function PodEvents(): ReactElement {
   const { name, namespace } = useParams()
+  const columns = useEventsColumns()
 
   return (
     <ResourceList<EventListT, EventT, PodEventsQuery, PodEventsQueryVariables>
       namespaced
-      columns={COLUMNS}
+      columns={columns}
       query={usePodEventsQuery}
       queryOptions={{
         variables: {

diff --git a/assets/src/components/kubernetes/workloads/Pods.tsx b/assets/src/components/kubernetes/workloads/Pods.tsx
@@ -1,8 +1,6 @@
 import { createColumnHelper } from '@tanstack/react-table'
 import { useMemo } from 'react'
-
 import { Link } from 'react-router-dom'
-
 import { useSetBreadcrumbs } from '@pluralsh/design-system'
 
 import {
@@ -17,14 +15,11 @@ import { getBaseBreadcrumbs, useDefaultColumns } from '../utils'
 import { ResourceList } from '../ResourceList'
 import { InlineLink } from '../../utils/typography/InlineLink'
 import { ClusterTinyFragment } from '../../../generated/graphql'
-
 import {
   PODS_REL_PATH,
-  getConfigurationAbsPath,
   getResourceDetailsAbsPath,
   getWorkloadsAbsPath,
 } from '../../../routes/kubernetesRoutesConsts'
-
 import { useKubernetesContext } from '../Kubernetes'
 
 import { PodStatusChip, WorkloadImages } from './utils'
@@ -37,7 +32,7 @@ export const getBreadcrumbs = (cluster?: Maybe<ClusterTinyFragment>) => [
   },
   {
     label: 'pods',
-    url: `${getConfigurationAbsPath(cluster?.id)}/${PODS_REL_PATH}`,
+    url: `${getWorkloadsAbsPath(cluster?.id)}/${PODS_REL_PATH}`,
   },
 ]
 
@@ -89,14 +84,11 @@ const colRestarts = columnHelper.accessor((pod) => pod?.restartCount, {
   cell: ({ getValue }) => getValue(),
 })
 
-export default function Pods() {
-  const { cluster } = useKubernetesContext()
-
-  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
-
+export function usePodColumns(): Array<object> {
   const { colName, colNamespace, colCreationTimestamp } =
     useDefaultColumns(columnHelper)
-  const columns = useMemo(
+
+  return useMemo(
     () => [
       colName,
       colNamespace,
@@ -109,6 +101,13 @@ export default function Pods() {
     ],
     [colName, colNamespace, colCreationTimestamp]
   )
+}
+
+export default function Pods() {
+  const { cluster } = useKubernetesContext()
+  const columns = usePodColumns()
+
+  useSetBreadcrumbs(useMemo(() => getBreadcrumbs(cluster), [cluster]))
 
   return (
     <ResourceList<PodListT, PodT, PodsQuery, PodsQueryVariables>