From 0a5ebdfeec526d4e6fbca8877a55fd6ef6142829 Mon Sep 17 00:00:00 2001 From: Sebastian Florek Date: Thu, 28 Mar 2024 14:01:10 +0100 Subject: [PATCH 1/3] update containers component --- .../kubernetes/common/Containers.tsx | 28 ++++++------------- .../components/kubernetes/workloads/Pod.tsx | 2 +- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/assets/src/components/kubernetes/common/Containers.tsx b/assets/src/components/kubernetes/common/Containers.tsx index b9b1b059fa..b95fe2b0f9 100644 --- a/assets/src/components/kubernetes/common/Containers.tsx +++ b/assets/src/components/kubernetes/common/Containers.tsx @@ -185,8 +185,9 @@ function Entry({ heading, flex, children }: EntryProps): Nullable { css={{ display: 'flex', flexDirection: 'column', - flexGrow: 1, - flexBasis: flex ? '100%' : '20%', + flexGrow: 0, + flexShrink: 1, + flexBasis: flex ? '100%' : 'auto', }} >
{ css={{ ...theme.partials.text.body2, color: theme.colors.text, - wordBreak: 'break-word', + + '*': { + wordBreak: 'break-all', + }, }} > {isBoolean && (children ? 'true' : 'false')} @@ -228,12 +232,7 @@ function Container({ container }: ContainerProps): ReactElement { }} >
- - {container.image} - + {container.image} {container.status?.containerID} {container.env && container.env.map((e) =>
{e?.name}
)} @@ -243,16 +242,7 @@ function Container({ container }: ContainerProps): ReactElement { container.commands.map((c) =>
{c}
)} - {container.args && - container.args.map((arg) => ( -
- {arg} -
- ))} + {container.args && container.args.map((arg) =>
{arg}
)} {/* {container.volumeMounts} */}
diff --git a/assets/src/components/kubernetes/workloads/Pod.tsx b/assets/src/components/kubernetes/workloads/Pod.tsx index ecfd3e53a0..d5f3ca4919 100644 --- a/assets/src/components/kubernetes/workloads/Pod.tsx +++ b/assets/src/components/kubernetes/workloads/Pod.tsx @@ -96,7 +96,7 @@ export function PodContainers(): ReactElement { return ( <> - {pod?.initContainers && ( + {pod?.initContainers?.length > 0 && (
Init Containers From aefd8954ffee03b6035f05498ec879f51945c1ad Mon Sep 17 00:00:00 2001 From: Sebastian Florek Date: Thu, 28 Mar 2024 14:12:41 +0100 Subject: [PATCH 2/3] allow raw query for non-namespaced resources --- .../src/components/kubernetes/common/Raw.tsx | 21 +++-- assets/src/generated/graphql-kubernetes.ts | 85 +++++++++++++++---- .../src/graph-kubernetes/common/raw.graphql | 9 +- 3 files changed, 90 insertions(+), 25 deletions(-) diff --git a/assets/src/components/kubernetes/common/Raw.tsx b/assets/src/components/kubernetes/common/Raw.tsx index 5bafab992c..1fae0bdfbc 100644 --- a/assets/src/components/kubernetes/common/Raw.tsx +++ b/assets/src/components/kubernetes/common/Raw.tsx @@ -5,8 +5,10 @@ import { Code } from '@pluralsh/design-system' import * as pluralize from 'pluralize' import { - RawQueryVariables, - useRawQuery, + NamespacedResourceQueryVariables, + ResourceQueryVariables, + useNamespacedResourceQuery, + useResourceQuery, } from '../../../generated/graphql-kubernetes' import { KubernetesClient } from '../../../helpers/kubernetes.client' import LoadingIndicator from '../../utils/LoadingIndicator' @@ -16,16 +18,23 @@ import { GqlError } from '../../utils/Alert' export default function Raw(): ReactElement { const { clusterId, name, namespace } = useParams() const pathMatch = useMatch(`${getKubernetesAbsPath(clusterId)}/:kind/*`) - const kind = pathMatch?.params?.kind || '' - const { data, loading } = useRawQuery({ + const kind = useMemo( + () => pluralize(pathMatch?.params?.kind || '', 1), + [pathMatch?.params?.kind] + ) + const resourceQuery = useMemo( + () => (namespace ? useNamespacedResourceQuery : useResourceQuery), + [namespace] + ) + const { data, loading } = resourceQuery({ client: KubernetesClient(clusterId ?? ''), skip: !clusterId, pollInterval: 30_000, variables: { - kind: pluralize(kind, 1), + kind, name, namespace, - } as RawQueryVariables, + } as ResourceQueryVariables & NamespacedResourceQueryVariables, }) const object = data?.handleGetResource?.Object diff --git a/assets/src/generated/graphql-kubernetes.ts b/assets/src/generated/graphql-kubernetes.ts index bd7600910e..ed8ce778aa 100644 --- a/assets/src/generated/graphql-kubernetes.ts +++ b/assets/src/generated/graphql-kubernetes.ts @@ -4665,14 +4665,22 @@ export type NodesQueryVariables = Exact<{ export type NodesQuery = { __typename?: 'Query', handleGetNodeList?: { __typename?: 'node_NodeList', listMeta: { __typename?: 'types_ListMeta', totalItems: number }, nodes: Array<{ __typename?: 'node_Node', ready: string, 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 }, allocatedResources: { __typename?: 'node_NodeAllocatedResources', cpuRequests: any, cpuRequestsFraction: number, cpuCapacity: any, memoryRequests: any, memoryRequestsFraction: number, memoryCapacity: any, allocatedPods: number, podFraction: number, podCapacity: any } } | null> } | null }; -export type RawQueryVariables = Exact<{ +export type NamespacedResourceQueryVariables = Exact<{ kind: Scalars['String']['input']; name: Scalars['String']['input']; namespace: Scalars['String']['input']; }>; -export type RawQuery = { __typename?: 'Query', handleGetResource?: { __typename?: 'unstructured_Unstructured', Object: any } | null }; +export type NamespacedResourceQuery = { __typename?: 'Query', handleGetResource?: { __typename?: 'unstructured_Unstructured', Object: any } | null }; + +export type ResourceQueryVariables = Exact<{ + kind: Scalars['String']['input']; + name: Scalars['String']['input']; +}>; + + +export type ResourceQuery = { __typename?: 'Query', handleGetResource?: { __typename?: 'unstructured_Unstructured', Object: any } | null }; export type ConfigMapsQueryVariables = Exact<{ namespace: Scalars['String']['input']; @@ -5609,8 +5617,8 @@ export type NodesQueryHookResult = ReturnType; export type NodesLazyQueryHookResult = ReturnType; export type NodesSuspenseQueryHookResult = ReturnType; export type NodesQueryResult = Apollo.QueryResult; -export const RawDocument = gql` - query Raw($kind: String!, $name: String!, $namespace: String!) { +export const NamespacedResourceDocument = gql` + query NamespacedResource($kind: String!, $name: String!, $namespace: String!) { handleGetResource(kind: $kind, name: $name, namespace: $namespace) @rest(path: "_raw/{args.kind}/namespace/{args.namespace}/name/{args.name}") { Object } @@ -5618,16 +5626,16 @@ export const RawDocument = gql` `; /** - * __useRawQuery__ + * __useNamespacedResourceQuery__ * - * To run a query within a React component, call `useRawQuery` and pass it any options that fit your needs. - * When your component renders, `useRawQuery` returns an object from Apollo Client that contains loading, error, and data properties + * To run a query within a React component, call `useNamespacedResourceQuery` and pass it any options that fit your needs. + * When your component renders, `useNamespacedResourceQuery` 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 } = useRawQuery({ + * const { data, loading, error } = useNamespacedResourceQuery({ * variables: { * kind: // value for 'kind' * name: // value for 'name' @@ -5635,22 +5643,63 @@ export const RawDocument = gql` * }, * }); */ -export function useRawQuery(baseOptions: Apollo.QueryHookOptions) { +export function useNamespacedResourceQuery(baseOptions: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(NamespacedResourceDocument, options); + } +export function useNamespacedResourceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(NamespacedResourceDocument, options); + } +export function useNamespacedResourceSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(NamespacedResourceDocument, options); + } +export type NamespacedResourceQueryHookResult = ReturnType; +export type NamespacedResourceLazyQueryHookResult = ReturnType; +export type NamespacedResourceSuspenseQueryHookResult = ReturnType; +export type NamespacedResourceQueryResult = Apollo.QueryResult; +export const ResourceDocument = gql` + query Resource($kind: String!, $name: String!) { + handleGetResource(kind: $kind, name: $name, namespace: "") @rest(path: "_raw/{args.kind}/name/{args.name}") { + Object + } +} + `; + +/** + * __useResourceQuery__ + * + * To run a query within a React component, call `useResourceQuery` and pass it any options that fit your needs. + * When your component renders, `useResourceQuery` 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 } = useResourceQuery({ + * variables: { + * kind: // value for 'kind' + * name: // value for 'name' + * }, + * }); + */ +export function useResourceQuery(baseOptions: Apollo.QueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(RawDocument, options); + return Apollo.useQuery(ResourceDocument, options); } -export function useRawLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { +export function useResourceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(RawDocument, options); + return Apollo.useLazyQuery(ResourceDocument, options); } -export function useRawSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions) { +export function useResourceSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useSuspenseQuery(RawDocument, options); + return Apollo.useSuspenseQuery(ResourceDocument, options); } -export type RawQueryHookResult = ReturnType; -export type RawLazyQueryHookResult = ReturnType; -export type RawSuspenseQueryHookResult = ReturnType; -export type RawQueryResult = Apollo.QueryResult; +export type ResourceQueryHookResult = ReturnType; +export type ResourceLazyQueryHookResult = ReturnType; +export type ResourceSuspenseQueryHookResult = ReturnType; +export type ResourceQueryResult = Apollo.QueryResult; export const ConfigMapsDocument = gql` query ConfigMaps($namespace: String!, $filterBy: String, $sortBy: String, $itemsPerPage: String, $page: String) { handleGetConfigMapList( diff --git a/assets/src/graph-kubernetes/common/raw.graphql b/assets/src/graph-kubernetes/common/raw.graphql index cb9308c0f3..8044e7483a 100644 --- a/assets/src/graph-kubernetes/common/raw.graphql +++ b/assets/src/graph-kubernetes/common/raw.graphql @@ -1,6 +1,13 @@ -query Raw($kind: String!, $name: String!, $namespace: String!) { +query NamespacedResource($kind: String!, $name: String!, $namespace: String!) { handleGetResource(kind: $kind, name: $name, namespace: $namespace) @rest(path: "_raw/{args.kind}/namespace/{args.namespace}/name/{args.name}") { Object } } + +query Resource($kind: String!, $name: String!) { + handleGetResource(kind: $kind, name: $name, namespace: "") + @rest(path: "_raw/{args.kind}/name/{args.name}") { + Object + } +} From 9178df8de1da333ca8128db693b1307293da9bfb Mon Sep 17 00:00:00 2001 From: Sebastian Florek Date: Thu, 28 Mar 2024 14:13:05 +0100 Subject: [PATCH 3/3] remove console.log --- assets/src/components/kubernetes/ResourceList.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/src/components/kubernetes/ResourceList.tsx b/assets/src/components/kubernetes/ResourceList.tsx index 3a0e2675c6..2b0d7ff496 100644 --- a/assets/src/components/kubernetes/ResourceList.tsx +++ b/assets/src/components/kubernetes/ResourceList.tsx @@ -154,8 +154,6 @@ export function ResourceList< } as TVariables, }) - console.log(data) - const resourceList = data?.[queryName] as TResourceList const items = useMemo( () =>