From 95b1fd2fe9f564ff4c33665ca97b592b0f7777a6 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Mon, 23 Sep 2024 18:28:35 +0530 Subject: [PATCH 1/2] update discovery images query --- gql-queries-generator/doc/queries.graphql | 4 +-- .../infra+/clusters/cluster-resources-v2.tsx | 5 +-- .../images/handle-image-discovery.tsx | 4 +-- .../gql/queries/registry-image-queries.ts | 4 +-- .../src/app/components/join-webinar.tsx | 31 +++++++++---------- src/apps/webinar/src/app/page.tsx | 5 ++- .../webinar/src/app/pages/meeting/page.tsx | 13 +++++--- src/generated/codegen-sdl.yml | 2 +- src/generated/codegen.yml | 2 +- src/generated/gql/sdl.graphql | 7 ++++- src/generated/gql/server.ts | 3 +- 11 files changed, 43 insertions(+), 37 deletions(-) diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql index 6cca06b27..2492cf8b8 100644 --- a/gql-queries-generator/doc/queries.graphql +++ b/gql-queries-generator/doc/queries.graphql @@ -4482,8 +4482,8 @@ query consoleGetRegistryImage($image: String!) { } } -query consoleGetRegistryImageUrl($image: String!, $meta: Map!) { - core_getRegistryImageURL(image: $image, meta: $meta) { +query consoleGetRegistryImageUrl { + core_getRegistryImageURL { scriptUrl url } 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 bdbb6caac..530ed21d5 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 @@ -192,7 +192,7 @@ const ByokButton = ({ item }: { item: CombinedBaseType }) => { }} size="sm" variant="outline" - // prefix={} + // prefix={} /> )} @@ -481,7 +481,8 @@ const ListView = ({ items = [], onEdit, onDelete, onShowLogs }: IResource) => { ) : ( ), 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 62992487d..1ab14a473 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 @@ -22,8 +22,8 @@ export const RegistryImageInstruction = ({ 'registry-image-instructions', async () => { return api.getRegistryImageUrl({ - image: '', - meta: {}, + // image: '', + // meta: {}, }); } ); 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 569d11363..408a66ecb 100644 --- a/src/apps/console/server/gql/queries/registry-image-queries.ts +++ b/src/apps/console/server/gql/queries/registry-image-queries.ts @@ -56,8 +56,8 @@ export const registryImagesQueries = (executor: IExecutor) => ({ ), getRegistryImageUrl: executor( gql` - query Core_getRegistryImageURL($image: String!, $meta: Map!) { - core_getRegistryImageURL(image: $image, meta: $meta) { + query Core_getRegistryImageURL { + core_getRegistryImageURL { scriptUrl url } diff --git a/src/apps/webinar/src/app/components/join-webinar.tsx b/src/apps/webinar/src/app/components/join-webinar.tsx index c332a14f3..4bf4aa3b2 100644 --- a/src/apps/webinar/src/app/components/join-webinar.tsx +++ b/src/apps/webinar/src/app/components/join-webinar.tsx @@ -2,7 +2,6 @@ import { ArrowRightLg } from '@jengaicons/react'; //@ts-ignore import { Button } from 'kl-design-system/atoms/button'; -import Link from 'next/link'; import { useRouter } from "next/navigation"; @@ -23,21 +22,21 @@ export const JoinWebinar = ({ userData, meetingStatus, meetingId }: { userData: return (
- -
) } diff --git a/src/apps/webinar/src/app/page.tsx b/src/apps/webinar/src/app/page.tsx index 23dc5190d..f5100762f 100644 --- a/src/apps/webinar/src/app/page.tsx +++ b/src/apps/webinar/src/app/page.tsx @@ -5,14 +5,13 @@ import { redirect } from 'next/navigation'; import { WebinarUI } from './orgs/webinar-ui'; -export default async function Home(props: any) { +export default async function Home() { const cookie = cookies().get("hotspot-session") - const callbackUrl = props.searchParams.eventHashUrl || process.env.CALLBACK_URL; + const callbackUrl = process.env.CALLBACK_URL; const redirectUrl = `${process.env.REDIRECT_URL}?callback=${callbackUrl}`; const token = btoa(`${process.env.DYTE_ORG_ID}:${process.env.DYTE_API_KEY}`); - console.log("props", props.searchParams.eventHashUrl) try { const res = await axios({ diff --git a/src/apps/webinar/src/app/pages/meeting/page.tsx b/src/apps/webinar/src/app/pages/meeting/page.tsx index a91856bd4..cddf37190 100644 --- a/src/apps/webinar/src/app/pages/meeting/page.tsx +++ b/src/apps/webinar/src/app/pages/meeting/page.tsx @@ -1,15 +1,18 @@ +//@ts-ignore +import { cookies } from 'next/headers'; import { Suspense } from 'react'; import { Meeting } from "./components/meeting"; export default async function App() { - - const dyteOrgId = process.env.DYTE_ORG_ID || ""; - const dyteApiKey = process.env.DYTE_API_KEY || ""; - + // NOTE: cookie is defining here just because to get environment variables, + // as next js is not allowing to access environment variables in server side if we will not make server call. + const cookie = cookies().get("hotspot-session") return ( - + ); + } + diff --git a/src/generated/codegen-sdl.yml b/src/generated/codegen-sdl.yml index f8de57b98..abfed7f3a 100644 --- a/src/generated/codegen-sdl.yml +++ b/src/generated/codegen-sdl.yml @@ -1,5 +1,5 @@ overwrite: true -schema: "http://gateway.kloudlite.svc.cluster.local:3000" +schema: "http://gateway-api.kloudlite.svc.cluster.local:3000" generates: gql/sdl.graphql: plugins: diff --git a/src/generated/codegen.yml b/src/generated/codegen.yml index 5288f88d4..684ed9663 100644 --- a/src/generated/codegen.yml +++ b/src/generated/codegen.yml @@ -1,5 +1,5 @@ overwrite: true -schema: "http://gateway.kloudlite.svc.cluster.local:3000" +schema: "http://gateway-api.kloudlite.svc.cluster.local:3000" generates: gql/server.ts: documents: diff --git a/src/generated/gql/sdl.graphql b/src/generated/gql/sdl.graphql index cba9001f5..5e339025b 100644 --- a/src/generated/gql/sdl.graphql +++ b/src/generated/gql/sdl.graphql @@ -1,3 +1,8 @@ +""" +Indicates exactly one field must be supplied and this field must not be `null`. +""" +directive @oneOf on INPUT_OBJECT + """Exposes a URL that specifies the behavior of this scalar.""" directive @specifiedBy( """The URL that specifies the behavior of this scalar.""" @@ -3951,7 +3956,7 @@ type Query { core_getManagedResouceOutputKeyValues(envName: String, keyrefs: [ManagedResourceKeyRefIn], msvcName: String): [ManagedResourceKeyValueRef!]! core_getManagedResource(envName: String, msvcName: String, name: String!): ManagedResource core_getRegistryImage(image: String!): RegistryImage - core_getRegistryImageURL(image: String!, meta: Map!): RegistryImageURL! + core_getRegistryImageURL: RegistryImageURL! core_getRouter(envName: String!, name: String!): Router core_getSecret(envName: String!, name: String!): Secret core_getSecretValues(envName: String!, queries: [SecretKeyRefIn!]): [SecretKeyValueRef!] diff --git a/src/generated/gql/server.ts b/src/generated/gql/server.ts index d732b6784..7dc659db8 100644 --- a/src/generated/gql/server.ts +++ b/src/generated/gql/server.ts @@ -6114,8 +6114,7 @@ export type ConsoleGetRegistryImageQuery = { }; export type ConsoleGetRegistryImageUrlQueryVariables = Exact<{ - image: Scalars['String']['input']; - meta: Scalars['Map']['input']; + [key: string]: never; }>; export type ConsoleGetRegistryImageUrlQuery = { From b833504f8bc3e7fe9eee10dce19fb049880e0d48 Mon Sep 17 00:00:00 2001 From: Piyush Kumar Date: Fri, 27 Sep 2024 12:45:35 +0530 Subject: [PATCH 2/2] console and webinar changes --- gql-queries-generator/doc/queries.graphql | 23 ++- .../console/page-components/app/general.tsx | 108 ++++++------- .../env+/$environment+/new-app/app-detail.tsx | 151 +++++++++++------- .../_main+/$account+/environments/route.tsx | 67 +++++++- .../_main+/$account+/infra+/_layout.tsx | 4 +- .../byok-cluster/handle-byok-cluster.tsx | 53 +++--- .../$account+/infra+/byok-cluster/route.tsx | 27 ++-- .../infra+/clusters/cluster-resources-v2.tsx | 21 +-- .../$account+/infra+/clusters/route.tsx | 44 +++-- .../$account+/infra+/vpn-devices/route.tsx | 16 +- .../_main+/$account+/settings+/_layout.tsx | 2 +- .../images/handle-image-discovery.tsx | 13 +- .../gql/queries/byok-cluster-queries.ts | 14 +- .../server/gql/queries/cluster-queries.ts | 51 +++--- .../console/server/gql/queries/pvc-queries.ts | 10 +- .../gql/queries/registry-image-queries.ts | 33 +++- src/apps/webinar/src/app/around/join/page.tsx | 48 ++++++ .../src/app/components/join-webinar.tsx | 2 - src/apps/webinar/src/app/page.tsx | 59 ++++--- src/generated/gql/sdl.graphql | 77 ++++++--- src/generated/gql/server.ts | 60 +++++-- 21 files changed, 590 insertions(+), 293 deletions(-) create mode 100644 src/apps/webinar/src/app/around/join/page.tsx diff --git a/gql-queries-generator/doc/queries.graphql b/gql-queries-generator/doc/queries.graphql index 80f53a71e..58c1cb9b1 100644 --- a/gql-queries-generator/doc/queries.graphql +++ b/gql-queries-generator/doc/queries.graphql @@ -135,6 +135,7 @@ query consoleListAllClusters($search: SearchCluster, $pagination: CursorPaginati cursor node { accountName + ownedBy clusterSvcCIDR lastOnlineAt createdBy { @@ -2438,9 +2439,6 @@ query consoleGetPvc($clusterName: String!, $name: String!) { namespace } resources { - claims { - name - } limits requests } @@ -2505,9 +2503,6 @@ query consoleListPvcs($clusterName: String!, $search: SearchPersistentVolumeClai namespace } resources { - claims { - name - } limits requests } @@ -3386,6 +3381,7 @@ query consoleGetBYOKClusterInstructions($name: String!, $onlyHelmValues: Boolean query consoleGetByokCluster($name: String!) { infra_getBYOKCluster(name: $name) { accountName + ownedBy createdBy { userEmail userId @@ -3430,6 +3426,7 @@ query consoleListByokClusters($search: SearchCluster, $pagination: CursorPaginat cursor node { accountName + ownedBy clusterSvcCIDR lastOnlineAt createdBy { @@ -4489,6 +4486,20 @@ query consoleGetRegistryImageUrl { } } +query consoleSearchRegistryImages($query: String!) { + core_searchRegistryImages(query: $query) { + accountName + creationTime + id + imageName + imageTag + markedForDeletion + meta + recordVersion + updateTime + } +} + query consoleListRegistryImages($pq: CursorPaginationIn) { core_listRegistryImages(pq: $pq) { edges { diff --git a/src/apps/console/page-components/app/general.tsx b/src/apps/console/page-components/app/general.tsx index 0957b335c..0c2a58e7d 100644 --- a/src/apps/console/page-components/app/general.tsx +++ b/src/apps/console/page-components/app/general.tsx @@ -2,16 +2,19 @@ import { useParams } from '@remix-run/react'; import { useCallback, useEffect, useState } from 'react'; import { Checkbox } from '~/components/atoms/checkbox'; import { TextInput } from '~/components/atoms/input'; +import Select from '~/components/atoms/select'; import { BottomNavigation } from '~/console/components/commons'; import { NameIdView } from '~/console/components/name-id-view'; import { useAppState } from '~/console/page-components/app-states'; import { FadeIn } from '~/console/page-components/util'; +import { AppSelectItem } from '~/console/routes/_main+/$account+/env+/$environment+/new-app/app-detail'; import HandleBuild from '~/console/routes/_main+/$account+/repo+/$repo+/builds/handle-builds'; import { useConsoleApi } from '~/console/server/gql/api-provider'; -import { parseName, parseNodes } from '~/console/server/r-utils/common'; +import { parseName } from '~/console/server/r-utils/common'; import { keyconstants } from '~/console/server/r-utils/key-constants'; import { ensureAccountClientSide } from '~/console/server/utils/auth-utils'; import { constants } from '~/console/server/utils/constants'; +import useDebounce from '~/root/lib/client/hooks/use-debounce'; import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form'; import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes'; import Yup from '~/root/lib/server/helpers/yup'; @@ -63,28 +66,8 @@ import { handleError } from '~/root/lib/utils/common'; // return ; // }; -const AppSelectItem = ({ - label, - value, - registry, - repository, -}: { - label: string; - value: string; - registry: string; - repository: string; -}) => { - return ( -
-
-
{label}
- {registry !== '' && repository !== '' && ( -
{`${registry}/${repository}`}
- )} - {/*
{value}
*/} -
-
- ); +const valueRenderer = ({ value }: { value: string }) => { + return
{value}
; }; const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => { @@ -109,38 +92,49 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => { const [imageList, setImageList] = useState([]); const [imageLoaded, setImageLoaded] = useState(false); + const [imageSearchText, setImageSearchText] = useState(''); - const getRegistryImages = useCallback(async () => { - ensureAccountClientSide(params); - setImageLoaded(true); - try { - const registrayImages = await api.listRegistryImages({}); - const data = parseNodes(registrayImages.data).map((i) => ({ - label: `${i.imageName}:${i.imageTag}`, - value: `${i.imageName}:${i.imageTag}`, - ready: true, - render: () => ( - - ), - })); - setImageList(data); - } catch (err) { - handleError(err); - } finally { - setImageLoaded(false); - } - }, []); + const getRegistryImages = useCallback( + async ({ query }: { query: string }) => { + ensureAccountClientSide(params); + setImageLoaded(true); + try { + const registrayImages = await api.searchRegistryImages({ query }); + const data = registrayImages.data.map((i) => ({ + label: `${i.imageName}:${i.imageTag}/${i.meta.author}/${i.meta.registry}:${i.meta.repository}`, + value: `${i.imageName}:${i.imageTag}`, + ready: true, + render: () => ( + + ), + })); + setImageList(data); + } catch (err) { + handleError(err); + } finally { + setImageLoaded(false); + } + }, + [] + ); useEffect(() => { - getRegistryImages(); + getRegistryImages({ query: '' }); }, []); - // const api = useConsoleApi(); + useDebounce( + () => { + if (imageSearchText) { + getRegistryImages({ query: imageSearchText }); + } + }, + 300, + [imageSearchText] + ); const { values, @@ -317,7 +311,7 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => { /> )}
- { onChange={handleChange('imageUrl')} error={!!errors.imageUrl} message={errors.imageUrl} - /> - {/* imageList} onChange={({ value }) => { handleChange('imageUrl')(dummyEvent(value)); }} + onSearch={(text) => { + setImageSearchText(text); + }} showclear noOptionMessage={
@@ -346,7 +345,8 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => { message={errors.imageUrl} loading={imageLoaded} createLabel="Select" - /> */} + valueRender={valueRenderer} + />
{ + return
{value}
; +}; + +export const AppSelectItem = ({ label, - value, - registry, - repository, + meta, + imageSearchText, }: { label: string; - value: string; - registry: string; - repository: string; + meta: any; + imageSearchText: string; }) => { + const getHighlightedText = (text: string, highlight: string) => { + if (!highlight) return text; + + const regex = new RegExp(`(${highlight})`, 'gi'); + const parts = text.split(regex); + + return parts.map((part, index) => + part.toLowerCase() === highlight.toLowerCase() ? ( + // eslint-disable-next-line react/no-array-index-key + + {part} + + ) : ( + part + ) + ); + }; + return (
-
-
{label}
- {registry !== '' && repository !== '' && ( -
{`${registry}/${repository}`}
- )} +
+
{label}
+
+ {meta && + Object.keys(meta).length > 0 && + Object.keys(meta).map((key) => ( +
+ {`${key}: `} + {getHighlightedText(meta[key], imageSearchText)} + {' |'} +
+ ))} +
); @@ -104,47 +133,51 @@ const AppDetail = () => { const [imageList, setImageList] = useState([]); const [imageLoaded, setImageLoaded] = useState(false); - // const [imageSearchText, setImageSearchText] = useState(''); + const [imageSearchText, setImageSearchText] = useState(''); - const getRegistryImages = useCallback(async () => { - ensureAccountClientSide(params); - setImageLoaded(true); - try { - const registrayImages = await api.listRegistryImages({}); - const data = parseNodes(registrayImages.data).map((i) => ({ - label: `${i.imageName}:${i.imageTag}`, - value: `${i.imageName}:${i.imageTag}`, - ready: true, - render: () => ( - - ), - })); - setImageList(data); - } catch (err) { - handleError(err); - } finally { - setImageLoaded(false); - } - }, []); + const getRegistryImages = useCallback( + async ({ query }: { query: string }) => { + ensureAccountClientSide(params); + setImageLoaded(true); + try { + const registrayImages = await api.searchRegistryImages({ + query, + }); + const data = registrayImages.data.map((i) => ({ + label: `${i.imageName}:${i.imageTag}/${i.meta.author}/${i.meta.registry}:${i.meta.repository}`, + value: `${i.imageName}:${i.imageTag}`, + ready: true, + render: () => ( + + ), + })); + setImageList(data); + } catch (err) { + handleError(err); + } finally { + setImageLoaded(false); + } + }, + [] + ); useEffect(() => { - getRegistryImages(); + getRegistryImages({ query: '' }); }, []); - // useDebounce( - // () => { - // if (imageSearchText) { - // getRegistryImages(); - // } - // }, - // 300, - // [imageSearchText] - // ); + useDebounce( + () => { + if (imageSearchText) { + getRegistryImages({ query: imageSearchText }); + } + }, + 300, + [imageSearchText] + ); const { values, errors, handleChange, handleSubmit, isLoading, setValues } = useForm({ @@ -332,7 +365,7 @@ const AppDetail = () => { size="sm" /> */} - { onChange={handleChange('imageUrl')} error={!!errors.imageUrl} message={errors.imageUrl} - /> + /> */} - {/*