Skip to content

Commit

Permalink
node details improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
maciaszczykm committed Apr 2, 2024
1 parent 2a677a3 commit 7de38ed
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 13 deletions.
79 changes: 67 additions & 12 deletions assets/src/components/kubernetes/cluster/Node.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import { ReactElement, useMemo } from 'react'
import { SidecarItem, useSetBreadcrumbs } from '@pluralsh/design-system'
import {
Card,
ChipList,
SidecarItem,
useSetBreadcrumbs,
} from '@pluralsh/design-system'
import { Outlet, useOutletContext, useParams } from 'react-router-dom'

import { useTheme } from 'styled-components'

import {
Common_EventList as EventListT,
Common_Event as EventT,
NodeEventsQuery,
NodeEventsQueryVariables,
NodeQueryVariables,
Node_Node as NodeT,
Node_NodeDetail as NodeT,
useNodeEventsQuery,
useNodeQuery,
} from '../../../generated/graphql-kubernetes'
Expand All @@ -21,9 +28,13 @@ import ResourceDetails, { TabEntry } from '../ResourceDetails'

import { ResourceList } from '../ResourceList'

import { getBreadcrumbs } from './Namespaces'
import { NamespacePhaseChip } from './utils'
import { COLUMNS } from './Events'
import { SubTitle } from '../../cluster/nodes/SubTitle'

import { ResourceInfoCardEntry } from '../common/ResourceInfoCard'

import { getBreadcrumbs } from './Nodes'
import { useEventsColumns } from './Events'
import { NodeReadyChip } from './utils'

const directory: Array<TabEntry> = [
{ path: '', label: 'Info' },
Expand All @@ -43,7 +54,7 @@ export default function Node(): ReactElement {
} as NodeQueryVariables,
})

const namespace = data?.handleGetNodeDetail
const node = data?.handleGetNodeDetail

useSetBreadcrumbs(
useMemo(
Expand All @@ -64,31 +75,75 @@ export default function Node(): ReactElement {
<ResourceDetails
tabs={directory}
sidecar={
<MetadataSidecar resource={namespace}>
<SidecarItem heading="Phase">
<NamespacePhaseChip phase={namespace?.phase} />
<MetadataSidecar resource={node}>
<SidecarItem heading="Ready">
{/* TODO: Fix on the API side? It works in the list view. */}
<NodeReadyChip ready={node?.ready} />
</SidecarItem>
{/* TODO: Fix on the API side? */}
<SidecarItem heading="Phase">{node?.phase}</SidecarItem>
</MetadataSidecar>
}
>
<Outlet context={namespace} />
<Outlet context={node} />
</ResourceDetails>
)
}

export function NodeInfo(): ReactElement {
const theme = useTheme()
const node = useOutletContext() as NodeT

return <section>TODO</section>
return (
<section>
<SubTitle>Info</SubTitle>
<Card
css={{
display: 'flex',
gap: theme.spacing.large,
padding: theme.spacing.medium,
}}
>
<ResourceInfoCardEntry heading="Provider ID">
{node?.providerID}
</ResourceInfoCardEntry>
<ResourceInfoCardEntry heading="Unschedulable">
{node?.unschedulable ? 'True' : 'False'}
</ResourceInfoCardEntry>
<ResourceInfoCardEntry heading="Pod CIDR">
{node?.podCIDR}
</ResourceInfoCardEntry>
<ResourceInfoCardEntry heading="Addresses">
<ChipList
size="small"
limit={5}
values={node.addresses || []}
transformValue={(a) => `${a?.type}: ${a?.address}`}
emptyState={<div>None</div>}
/>
</ResourceInfoCardEntry>
<ResourceInfoCardEntry heading="Taints">
<ChipList
size="small"
limit={5}
values={node.taints || []}
transformValue={(t) => `${t?.key}=${t?.value}:${t?.effect}`}
emptyState={<div>None</div>}
/>
</ResourceInfoCardEntry>
</Card>
</section>
)
}

export function NodeEvents(): ReactElement {
const { name } = useParams()
const columns = useEventsColumns()

return (
<ResourceList<EventListT, EventT, NodeEventsQuery, NodeEventsQueryVariables>
namespaced
columns={COLUMNS}
columns={columns}
query={useNodeEventsQuery}
queryOptions={{
variables: { name } as NodeEventsQueryVariables,
Expand Down
13 changes: 12 additions & 1 deletion assets/src/generated/graphql-kubernetes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4737,7 +4737,7 @@ export type NodeQueryVariables = Exact<{
}>;


export type NodeQuery = { __typename?: 'Query', handleGetNodeDetail?: { __typename?: 'node_NodeDetail', providerID: string, containerImages: Array<string | null>, podCIDR: string, phase: string, errors: Array<any | 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 }, nodeInfo: { __typename?: 'v1_NodeSystemInfo', architecture: string, bootID: string, containerRuntimeVersion: string, kernelVersion: string, kubeletVersion: string, kubeProxyVersion: string, machineID: string, operatingSystem: string, osImage: string, systemUUID: string } } | null };
export type NodeQuery = { __typename?: 'Query', handleGetNodeDetail?: { __typename?: 'node_NodeDetail', providerID: string, containerImages: Array<string | null>, podCIDR: string, phase: string, unschedulable: boolean, ready: string, errors: Array<any | 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 }, nodeInfo: { __typename?: 'v1_NodeSystemInfo', architecture: string, bootID: string, containerRuntimeVersion: string, kernelVersion: string, kubeletVersion: string, kubeProxyVersion: string, machineID: string, operatingSystem: string, osImage: string, systemUUID: string }, addresses?: Array<{ __typename?: 'v1_NodeAddress', type: string, address: string } | null> | null, taints?: Array<{ __typename?: 'v1_Taint', key: string, value?: string | null, effect: string } | null> | null } | null };

export type NodeEventsQueryVariables = Exact<{
name: Scalars['String']['input'];
Expand Down Expand Up @@ -6392,10 +6392,21 @@ export const NodeDocument = gql`
osImage
systemUUID
}
addresses {
type
address
}
taints {
key
value
effect
}
providerID
containerImages
podCIDR
phase
unschedulable
ready
errors
}
}
Expand Down
11 changes: 11 additions & 0 deletions assets/src/graph-kubernetes/cluster/node.graphql
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,21 @@ query Node($name: String!) {
osImage
systemUUID
}
addresses {
type
address
}
taints {
key
value
effect
}
providerID
containerImages
podCIDR
phase
unschedulable
ready
errors
}
}
Expand Down

0 comments on commit 7de38ed

Please sign in to comment.