Merge pull request #321 from kloudlite/update/console-changes

Update changes in image discovery and infra cluster listing
kloudlite · Oct 10, 2024 · d298df8 · d298df8
2 parents 41ad773 + 6b3eabb
commit d298df8
Show file tree

Hide file tree

Showing 10 changed files with 284 additions and 109 deletions.
diff --git a/Taskfile.yaml b/Taskfile.yaml
@@ -228,6 +228,6 @@ tasks:
         msg: "var tag must have a value"
     silent: true
     vars:
-      IMAGE: ghcr.io/kloudlite/web/{{.app}}:{{.tag}}
+      IMAGE: ghcr.io/kloudlite/kloudlite/web/{{.app}}:{{.tag}}
     cmds:
       - docker buildx build --build-arg APP={{.app}} . -t {{.IMAGE}} --platform linux/amd64 --output=type=image,compression=zstd,force-compression=true,compression-level=12,push=true
diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql
@@ -4945,6 +4945,59 @@ query authCli_listClusters($pagination: CursorPaginationIn) {
   }
 }
 
+query authCli_listVPNDevices($gvpn: String!, $pagination: CursorPaginationIn) {
+  infra_listGlobalVPNDevices(gvpn: $gvpn, pagination: $pagination) {
+    edges {
+      cursor
+      node {
+        accountName
+        createdBy {
+          userEmail
+          userId
+          userName
+        }
+        creationMethod
+        creationTime
+        displayName
+        globalVPNName
+        id
+        ipAddr
+        lastUpdatedBy {
+          userEmail
+          userId
+          userName
+        }
+        markedForDeletion
+        metadata {
+          annotations
+          creationTimestamp
+          deletionTimestamp
+          generation
+          labels
+          name
+          namespace
+        }
+        privateKey
+        publicEndpoint
+        publicKey
+        recordVersion
+        updateTime
+        wireguardConfig {
+          value
+          encoding
+        }
+      }
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPrevPage
+      startCursor
+    }
+    totalCount
+  }
+}
+
 query authCli_listAccounts {
   accounts_listAccounts {
     metadata {

diff --git a/src/apps/auth/server/gql/cli-queries.ts b/src/apps/auth/server/gql/cli-queries.ts
@@ -698,6 +698,69 @@ export const cliQueries = (executor: IExecutor) => ({
       vars: (_: any) => {},
     }
   ),
+  cli_listVPNDevices: executor(
+    gql`
+      query Infra_listGlobalVPNDevices(
+        $gvpn: String!
+        $pagination: CursorPaginationIn
+      ) {
+        infra_listGlobalVPNDevices(gvpn: $gvpn, pagination: $pagination) {
+          edges {
+            cursor
+            node {
+              accountName
+              createdBy {
+                userEmail
+                userId
+                userName
+              }
+              creationMethod
+              creationTime
+              displayName
+              globalVPNName
+              id
+              ipAddr
+              lastUpdatedBy {
+                userEmail
+                userId
+                userName
+              }
+              markedForDeletion
+              metadata {
+                annotations
+                creationTimestamp
+                deletionTimestamp
+                generation
+                labels
+                name
+                namespace
+              }
+              privateKey
+              publicEndpoint
+              publicKey
+              recordVersion
+              updateTime
+              wireguardConfig {
+                value
+                encoding
+              }
+            }
+          }
+          pageInfo {
+            endCursor
+            hasNextPage
+            hasPrevPage
+            startCursor
+          }
+          totalCount
+        }
+      }
+    `,
+    {
+      transformer: (data: any) => data.infra_listGlobalVPNDevices,
+      vars: (_: any) => {},
+    }
+  ),
   cli_listAccounts: executor(
     gql`
       query Accounts_listAccounts {

diff --git a/src/apps/console/components/code-view.tsx b/src/apps/console/components/code-view.tsx
@@ -1,9 +1,9 @@
-import { CopySimple } from '~/console/components/icons';
 import hljs from 'highlight.js';
 import { useEffect, useRef } from 'react';
 import { toast } from '~/components/molecule/toast';
-import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 import { cn } from '~/components/utils';
+import { CopySimple } from '~/console/components/icons';
+import useClipboard from '~/root/lib/client/hooks/use-clipboard';
 
 interface ICodeView {
   data: string;
@@ -83,9 +83,11 @@ const CodeView = ({
             <pre className={cn('flex-1 overflow-auto', preClassName)}>
               <code ref={ref}>{data}</code>
             </pre>
-            <span className="invisible group-hover/sha:visible">
-              <CopySimple size={14} />
-            </span>
+            {copy && (
+              <span className="invisible group-hover/sha:visible">
+                <CopySimple size={14} />
+              </span>
+            )}
           </div>
         )}
       </div>

diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
@@ -293,29 +293,37 @@ const ExtraButton = ({
   onShowLogs: () => void;
   item: CombinedBaseType;
 }) => {
-  let options: IResourceExtraItem[] = [
+  const options: IResourceExtraItem[] = [
     {
       key: '1',
       label: 'Edit',
       icon: <PencilLine size={16} />,
       type: 'item',
       onClick: onEdit,
     },
+    {
+      label: 'Delete',
+      icon: <Trash size={16} />,
+      type: 'item',
+      onClick: onDelete,
+      key: 'delete',
+      className: '!text-text-critical',
+    },
   ];
 
-  if (item.type === 'byok' && item.ownedBy === null) {
-    options = [
-      ...options,
-      {
-        label: 'Delete',
-        icon: <Trash size={16} />,
-        type: 'item',
-        onClick: onDelete,
-        key: 'delete',
-        className: '!text-text-critical',
-      },
-    ];
-  }
+  // if (item.type === 'byok' && item.ownedBy === null) {
+  //   options = [
+  //     ...options,
+  //     {
+  //       label: 'Delete',
+  //       icon: <Trash size={16} />,
+  //       type: 'item',
+  //       onClick: onDelete,
+  //       key: 'delete',
+  //       className: '!text-text-critical',
+  //     },
+  //   ];
+  // }
 
   return <ResourceExtraAction options={options} />;
 };

diff --git a/src/apps/console/routes/_main+/$account+/settings+/images/handle-image-discovery.tsx b/src/apps/console/routes/_main+/$account+/settings+/images/handle-image-discovery.tsx
@@ -1,11 +1,14 @@
 import { useParams } from '@remix-run/react';
+import { useState } from 'react';
 import { Button } from '~/components/atoms/button';
 import Popup from '~/components/molecule/popup';
 import CodeView from '~/console/components/code-view';
+import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import { LoadingPlaceHolder } from '~/console/components/loading';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { ensureAccountClientSide } from '~/console/server/utils/auth-utils';
 import useCustomSwr from '~/root/lib/client/hooks/use-custom-swr';
+import { NonNullableString } from '~/root/lib/types/common';
 
 export const RegistryImageInstruction = ({
   show,
@@ -25,9 +28,20 @@ export const RegistryImageInstruction = ({
     }
   );
 
+  const [active, setActive] = useState<
+    'url' | 'script-url' | NonNullableString
+  >('url');
+
+  // const formatUrl = (url: string) => {
+  //   return url
+  //     .replace(/ -H /g, ' \\\n-H ')
+  //     .replace(/ -d /g, ' \\\n-d ')
+  //     .replace(/ curl /, 'curl \\');
+  // };
+
   return (
     <Popup.Root onOpenChange={onClose} show={show} className="!w-[800px]">
-      <Popup.Header>Instructions to Add Image on registry</Popup.Header>
+      <Popup.Header>Add an Image to the Registry</Popup.Header>
       <Popup.Content>
         <form className="flex flex-col gap-2xl">
           {error && (
@@ -39,26 +53,47 @@ export const RegistryImageInstruction = ({
             <LoadingPlaceHolder />
           ) : (
             data && (
-              <div className="flex flex-col gap-sm text-start ">
-                <span className="flex flex-wrap items-center gap-md py-lg">
-                  1. Using URL:
-                </span>
-                <CodeView
-                  preClassName="!overflow-none text-wrap break-words"
-                  copy
-                  data={data.url || ''}
+              <div className="flex flex-col gap-xl">
+                <ExtendedFilledTab
+                  value={active}
+                  onChange={setActive}
+                  items={[
+                    {
+                      label: 'Script',
+                      to: 'script-url',
+                      value: 'script-url',
+                    },
+                    { label: 'cURL Command', to: 'url', value: 'url' },
+                  ]}
                 />
-
-                <span className="flex flex-wrap items-center gap-md py-lg">
-                  2. Using Script URL:
-                </span>
-                <CodeView
-                  preClassName="!overflow-none text-wrap break-words"
-                  copy
-                  data={data.scriptUrl || ''}
-                />
-
-                {/* {data.url} */}
+                {active === 'url' && (
+                  <div className="flex flex-col gap-3xl">
+                    {data.url &&
+                      data.url.map((u) => (
+                        <CodeView
+                          key={u}
+                          preClassName="!overflow-none text-wrap break-words"
+                          copy={false}
+                          data={u}
+                          language="sh"
+                        />
+                      ))}
+                  </div>
+                )}
+                {active === 'script-url' && (
+                  <div className="flex flex-col gap-3xl">
+                    {data.scriptUrl &&
+                      data.scriptUrl.map((u) => (
+                        <CodeView
+                          key={u}
+                          preClassName="!overflow-none text-wrap break-words"
+                          copy={false}
+                          data={u}
+                          language="sh"
+                        />
+                      ))}
+                  </div>
+                )}
               </div>
             )
           )}

diff --git a/src/apps/console/routes/_main+/$account+/settings+/user-management/route.tsx b/src/apps/console/routes/_main+/$account+/settings+/user-management/route.tsx
@@ -281,20 +281,6 @@ const SettingUserManagement = () => {
     return owner?.user?.email === currentUser?.email;
   }, [teamMembers, currentUser]);
 
-  // const { data: teamMembers, isLoading } = useCustomSwr(
-  //   `${parseName(account)}-owners`,
-  //   async () => {
-  //     return api.listMembershipsForAccount({
-  //       accountName: parseName(account),
-  //     });
-  //   }
-  // );
-
-  // const owners = useCallback(
-  //   () => teamMembers?.filter((i) => i.role === 'account_owner') || [],
-  //   [teamMembers]
-  // )();
-
   const accountOwner = teamMembers?.find((i) => i.role === 'account_owner');
 
   return (
@@ -325,31 +311,6 @@ const SettingUserManagement = () => {
               />
             </div>
           </Pulsable>
-
-          {/* <Pulsable isLoading={isLoading}>
-            <div className="flex flex-col gap-3xl">
-              {[
-                ...(isLoading
-                  ? [
-                      {
-                        user: {
-                          email: '[email protected]',
-                          name: 'sample user',
-                        },
-                      },
-                    ]
-                  : owners),
-              ].map((t) => {
-                return (
-                  <Profile
-                    key={t.user.email}
-                    name={t.user.name}
-                    subtitle={t.user.email}
-                  />
-                );
-              })}
-            </div>
-          </Pulsable> */}
         </div>
       </div>
       <div className="flex flex-col">