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

pluralsh · Mar 28, 2024 · 450cd3e · 450cd3e
2 parents eec2921 + 9178df8
commit 450cd3e
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 47 deletions.
diff --git 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(
     () =>

diff --git 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<ReactNode> {
       css={{
         display: 'flex',
         flexDirection: 'column',
-        flexGrow: 1,
-        flexBasis: flex ? '100%' : '20%',
+        flexGrow: 0,
+        flexShrink: 1,
+        flexBasis: flex ? '100%' : 'auto',
       }}
     >
       <div
@@ -202,7 +203,10 @@ function Entry({ heading, flex, children }: EntryProps): Nullable<ReactNode> {
         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 {
         }}
       >
         <Section>
-          <Entry
-            heading="Image"
-            flex
-          >
-            {container.image}
-          </Entry>
+          <Entry heading="Image">{container.image}</Entry>
           <Entry heading="Container ID">{container.status?.containerID}</Entry>
           <Entry heading="Env">
             {container.env && container.env.map((e) => <div>{e?.name}</div>)}
@@ -243,16 +242,7 @@ function Container({ container }: ContainerProps): ReactElement {
               container.commands.map((c) => <div>{c}</div>)}
           </Entry>
           <Entry heading="Args">
-            {container.args &&
-              container.args.map((arg) => (
-                <div
-                  css={{
-                    whiteSpace: 'nowrap',
-                  }}
-                >
-                  {arg}
-                </div>
-              ))}
+            {container.args && container.args.map((arg) => <div>{arg}</div>)}
           </Entry>
           {/* <Entry heading="Volume mounts">{container.volumeMounts}</Entry> */}
         </Section>

diff --git 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/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 && (
         <section>
           <SubTitle>Init Containers</SubTitle>
           <Containers containers={pod?.initContainers} />

diff --git 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'];
@@ -5617,48 +5625,89 @@ export type NodesQueryHookResult = ReturnType<typeof useNodesQuery>;
 export type NodesLazyQueryHookResult = ReturnType<typeof useNodesLazyQuery>;
 export type NodesSuspenseQueryHookResult = ReturnType<typeof useNodesSuspenseQuery>;
 export type NodesQueryResult = Apollo.QueryResult<NodesQuery, NodesQueryVariables>;
-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
   }
 }
     `;
 
 /**
- * __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'
  *      namespace: // value for 'namespace'
  *   },
  * });
  */
-export function useRawQuery(baseOptions: Apollo.QueryHookOptions<RawQuery, RawQueryVariables>) {
+export function useNamespacedResourceQuery(baseOptions: Apollo.QueryHookOptions<NamespacedResourceQuery, NamespacedResourceQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NamespacedResourceQuery, NamespacedResourceQueryVariables>(NamespacedResourceDocument, options);
+      }
+export function useNamespacedResourceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NamespacedResourceQuery, NamespacedResourceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NamespacedResourceQuery, NamespacedResourceQueryVariables>(NamespacedResourceDocument, options);
+        }
+export function useNamespacedResourceSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<NamespacedResourceQuery, NamespacedResourceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useSuspenseQuery<NamespacedResourceQuery, NamespacedResourceQueryVariables>(NamespacedResourceDocument, options);
+        }
+export type NamespacedResourceQueryHookResult = ReturnType<typeof useNamespacedResourceQuery>;
+export type NamespacedResourceLazyQueryHookResult = ReturnType<typeof useNamespacedResourceLazyQuery>;
+export type NamespacedResourceSuspenseQueryHookResult = ReturnType<typeof useNamespacedResourceSuspenseQuery>;
+export type NamespacedResourceQueryResult = Apollo.QueryResult<NamespacedResourceQuery, NamespacedResourceQueryVariables>;
+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<ResourceQuery, ResourceQueryVariables>) {
         const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<RawQuery, RawQueryVariables>(RawDocument, options);
+        return Apollo.useQuery<ResourceQuery, ResourceQueryVariables>(ResourceDocument, options);
       }
-export function useRawLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<RawQuery, RawQueryVariables>) {
+export function useResourceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ResourceQuery, ResourceQueryVariables>) {
           const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<RawQuery, RawQueryVariables>(RawDocument, options);
+          return Apollo.useLazyQuery<ResourceQuery, ResourceQueryVariables>(ResourceDocument, options);
         }
-export function useRawSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<RawQuery, RawQueryVariables>) {
+export function useResourceSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<ResourceQuery, ResourceQueryVariables>) {
           const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useSuspenseQuery<RawQuery, RawQueryVariables>(RawDocument, options);
+          return Apollo.useSuspenseQuery<ResourceQuery, ResourceQueryVariables>(ResourceDocument, options);
         }
-export type RawQueryHookResult = ReturnType<typeof useRawQuery>;
-export type RawLazyQueryHookResult = ReturnType<typeof useRawLazyQuery>;
-export type RawSuspenseQueryHookResult = ReturnType<typeof useRawSuspenseQuery>;
-export type RawQueryResult = Apollo.QueryResult<RawQuery, RawQueryVariables>;
+export type ResourceQueryHookResult = ReturnType<typeof useResourceQuery>;
+export type ResourceLazyQueryHookResult = ReturnType<typeof useResourceLazyQuery>;
+export type ResourceSuspenseQueryHookResult = ReturnType<typeof useResourceSuspenseQuery>;
+export type ResourceQueryResult = Apollo.QueryResult<ResourceQuery, ResourceQueryVariables>;
 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
@@ -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
+  }
+}