From 6b3eabbef95d99d0b05b088c720227596da63908 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Thu, 10 Oct 2024 13:49:26 +0530 Subject: [PATCH] console changes --- Taskfile.yaml | 2 +- gql-queries-generator/doc/queries.graphql | 53 ++++++++++++ src/apps/auth/server/gql/cli-queries.ts | 63 ++++++++++++++ src/apps/console/components/code-view.tsx | 12 +-- .../infra+/clusters/cluster-resources-v2.tsx | 36 ++++---- .../images/handle-image-discovery.tsx | 75 ++++++++++++----- .../settings+/user-management/route.tsx | 39 --------- .../gql/queries/registry-image-queries.ts | 10 +-- src/generated/gql/sdl.graphql | 20 +++-- src/generated/gql/server.ts | 83 +++++++++++++++---- 10 files changed, 284 insertions(+), 109 deletions(-) diff --git a/Taskfile.yaml b/Taskfile.yaml index 1e3ea9eca..8dfdcfc0c 100644 --- 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 index 3f23261cf..fdd3c3e12 100644 --- 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 index 6d5717a83..bff2a1f82 100644 --- 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 index 4089ae9fe..50801977d 100644 --- 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 = ({ 
               {data}
- - - + {copy && ( + + + + )} )} 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 index abfeca0ea..4aff0d29d 100644 --- 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,7 +293,7 @@ const ExtraButton = ({ onShowLogs: () => void; item: CombinedBaseType; }) => { - let options: IResourceExtraItem[] = [ + const options: IResourceExtraItem[] = [ { key: '1', label: 'Edit', @@ -301,21 +301,29 @@ const ExtraButton = ({ type: 'item', onClick: onEdit, }, + { + label: 'Delete', + icon: , + type: 'item', + onClick: onDelete, + key: 'delete', + className: '!text-text-critical', + }, ]; - if (item.type === 'byok' && item.ownedBy === null) { - options = [ - ...options, - { - label: 'Delete', - icon: , - type: 'item', - onClick: onDelete, - key: 'delete', - className: '!text-text-critical', - }, - ]; - } + // if (item.type === 'byok' && item.ownedBy === null) { + // options = [ + // ...options, + // { + // label: 'Delete', + // icon: , + // type: 'item', + // onClick: onDelete, + // key: 'delete', + // className: '!text-text-critical', + // }, + // ]; + // } return ; }; 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 index f5f369f1e..e28ca02d7 100644 --- 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 ( - Instructions to Add Image on registry + Add an Image to the Registry
{error && ( @@ -39,26 +53,47 @@ export const RegistryImageInstruction = ({ ) : ( data && ( -
- - 1. Using URL: - - + - - - 2. Using Script URL: - - - - {/* {data.url} */} + {active === 'url' && ( +
+ {data.url && + data.url.map((u) => ( + + ))} +
+ )} + {active === 'script-url' && ( +
+ {data.scriptUrl && + data.scriptUrl.map((u) => ( + + ))} +
+ )}
) )} 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 index 61aea9395..8df8d623e 100644 --- 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 = () => { /> - - {/* -
- {[ - ...(isLoading - ? [ - { - user: { - email: 'sampleuser@gmail.com', - name: 'sample user', - }, - }, - ] - : owners), - ].map((t) => { - return ( - - ); - })} -
- */}
diff --git a/src/apps/console/server/gql/queries/registry-image-queries.ts b/src/apps/console/server/gql/queries/registry-image-queries.ts index 39004f5cd..bc4d6e2ed 100644 --- a/src/apps/console/server/gql/queries/registry-image-queries.ts +++ b/src/apps/console/server/gql/queries/registry-image-queries.ts @@ -31,7 +31,7 @@ export const registryImagesQueries = (executor: IExecutor) => ({ { transformer: (data: ConsoleDeleteRegistryImageMutation) => data.core_deleteRegistryImage, - vars(_: ConsoleDeleteRegistryImageMutationVariables) { }, + vars(_: ConsoleDeleteRegistryImageMutationVariables) {}, } ), getRegistryImage: executor( @@ -53,7 +53,7 @@ export const registryImagesQueries = (executor: IExecutor) => ({ { transformer: (data: ConsoleGetRegistryImageQuery) => data.core_getRegistryImage, - vars(_: ConsoleGetRegistryImageQueryVariables) { }, + vars(_: ConsoleGetRegistryImageQueryVariables) {}, } ), getRegistryImageUrl: executor( @@ -68,7 +68,7 @@ export const registryImagesQueries = (executor: IExecutor) => ({ { transformer: (data: ConsoleGetRegistryImageUrlQuery) => data.core_getRegistryImageURL, - vars(_: ConsoleGetRegistryImageUrlQueryVariables) { }, + vars(_: ConsoleGetRegistryImageUrlQueryVariables) {}, } ), searchRegistryImages: executor( @@ -91,7 +91,7 @@ export const registryImagesQueries = (executor: IExecutor) => ({ transformer: (data: ConsoleSearchRegistryImagesQuery) => { return data.core_searchRegistryImages; }, - vars(_: ConsoleSearchRegistryImagesQueryVariables) { }, + vars(_: ConsoleSearchRegistryImagesQueryVariables) {}, } ), listRegistryImages: executor( @@ -126,7 +126,7 @@ export const registryImagesQueries = (executor: IExecutor) => ({ transformer: (data: ConsoleListRegistryImagesQuery) => { return data.core_listRegistryImages; }, - vars(_: ConsoleListRegistryImagesQueryVariables) { }, + vars(_: ConsoleListRegistryImagesQueryVariables) {}, } ), }); diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql index beaccaba7..106581928 100644 --- a/src/generated/gql/sdl.graphql +++ b/src/generated/gql/sdl.graphql @@ -1647,16 +1647,16 @@ input Github__com___kloudlite___operator___apis___crds___v1__HttpsIn { } type Github__com___kloudlite___operator___apis___crds___v1__Intercept { - enabled: Boolean! + enabled: Boolean portMappings: [Github__com___kloudlite___operator___apis___crds___v1__AppInterceptPortMappings!] - toDevice: String! + toDevice: String toIPAddr: String } input Github__com___kloudlite___operator___apis___crds___v1__InterceptIn { - enabled: Boolean! + enabled: Boolean portMappings: [Github__com___kloudlite___operator___apis___crds___v1__AppInterceptPortMappingsIn!] - toDevice: String! + toDevice: String toIPAddr: String } @@ -3886,13 +3886,17 @@ type RegistryImagePaginatedRecords { } type RegistryImageURL { - scriptUrl: String! - url: String! + scriptUrl: [String!]! + scriptUrlExample: String! + url: [String!]! + urlExample: String! } input RegistryImageURLIn { - scriptUrl: String! - url: String! + scriptUrl: [String!]! + scriptUrlExample: String! + url: [String!]! + urlExample: String! } type RemoteLogin { diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts index 08a869683..967ce97fb 100644 --- a/src/generated/gql/server.ts +++ b/src/generated/gql/server.ts @@ -568,11 +568,11 @@ export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__HpaIn = { export type Github__Com___Kloudlite___Operator___Apis___Crds___V1__InterceptIn = { - enabled: Scalars['Boolean']['input']; + enabled?: InputMaybe; portMappings?: InputMaybe< Array >; - toDevice: Scalars['String']['input']; + toDevice?: InputMaybe; toIPAddr?: InputMaybe; }; @@ -1701,8 +1701,10 @@ export type RegistryImageIn = { }; export type RegistryImageUrlIn = { - scriptUrl: Scalars['String']['input']; - url: Scalars['String']['input']; + scriptUrl: Array; + scriptUrlExample: Scalars['String']['input']; + url: Array; + urlExample: Scalars['String']['input']; }; export type SearchProjectManagedService = { @@ -2715,8 +2717,8 @@ export type ConsoleGetAppQuery = { thresholdMemory?: number; }; intercept?: { - enabled: boolean; - toDevice: string; + enabled?: boolean; + toDevice?: string; portMappings?: Array<{ devicePort: number; appPort: number }>; }; services?: Array<{ port: number }>; @@ -2865,8 +2867,8 @@ export type ConsoleListAppsQuery = { thresholdMemory?: number; }; intercept?: { - enabled: boolean; - toDevice: string; + enabled?: boolean; + toDevice?: string; portMappings?: Array<{ appPort: number; devicePort: number }>; }; router?: { @@ -3086,8 +3088,8 @@ export type ConsoleGetExternalAppQuery = { record: string; recordType: Github__Com___Kloudlite___Operator___Apis___Crds___V1__ExternalAppRecordType; intercept?: { - enabled: boolean; - toDevice: string; + enabled?: boolean; + toDevice?: string; portMappings?: Array<{ appPort: number; devicePort: number }>; }; }; @@ -3159,8 +3161,8 @@ export type ConsoleListExternalAppsQuery = { record: string; recordType: Github__Com___Kloudlite___Operator___Apis___Crds___V1__ExternalAppRecordType; intercept?: { - enabled: boolean; - toDevice: string; + enabled?: boolean; + toDevice?: string; portMappings?: Array<{ appPort: number; devicePort: number }>; }; }; @@ -6069,7 +6071,7 @@ export type ConsoleGetRegistryImageUrlQueryVariables = Exact<{ }>; export type ConsoleGetRegistryImageUrlQuery = { - core_getRegistryImageURL: { scriptUrl: string; url: string }; + core_getRegistryImageURL: { scriptUrl: Array; url: Array }; }; export type ConsoleSearchRegistryImagesQueryVariables = Exact<{ @@ -6396,8 +6398,8 @@ export type AuthCli_ListAppsQuery = { markedForDeletion?: boolean; spec?: { intercept?: { - enabled: boolean; - toDevice: string; + enabled?: boolean; + toDevice?: string; portMappings?: Array<{ devicePort: number; appPort: number }>; }; }; @@ -6420,8 +6422,8 @@ export type AuthCli_ListAppsQuery = { spec: { displayName?: string; intercept?: { - enabled: boolean; - toDevice: string; + enabled?: boolean; + toDevice?: string; portMappings?: Array<{ devicePort: number; appPort: number }>; }; services?: Array<{ port: number }>; @@ -6528,6 +6530,53 @@ export type AuthCli_ListClustersQuery = { }; }; +export type AuthCli_ListVpnDevicesQueryVariables = Exact<{ + gvpn: Scalars['String']['input']; + pagination?: InputMaybe; +}>; + +export type AuthCli_ListVpnDevicesQuery = { + infra_listGlobalVPNDevices?: { + totalCount: number; + edges: Array<{ + cursor: string; + node: { + accountName: string; + creationMethod?: string; + creationTime: any; + displayName: string; + globalVPNName: string; + id: string; + ipAddr: string; + markedForDeletion?: boolean; + privateKey: string; + publicEndpoint?: string; + publicKey: string; + recordVersion: number; + updateTime: any; + createdBy: { userEmail: string; userId: string; userName: string }; + lastUpdatedBy: { userEmail: string; userId: string; userName: string }; + metadata: { + annotations?: any; + creationTimestamp: any; + deletionTimestamp?: any; + generation: number; + labels?: any; + name: string; + namespace?: string; + }; + wireguardConfig?: { value: string; encoding: string }; + }; + }>; + pageInfo: { + endCursor?: string; + hasNextPage?: boolean; + hasPrevPage?: boolean; + startCursor?: string; + }; + }; +}; + export type AuthCli_ListAccountsQueryVariables = Exact<{ [key: string]: never; }>;