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}
- />
- {/* */}
+
+
)}
@@ -221,7 +221,7 @@ const GetByokClusterMessage = ({
case timeDifference <= 2:
return (
- Attached Cluster
+ Attached Compute
);
default:
@@ -473,18 +473,22 @@ const ListView = ({ items = [], onEdit, onDelete, onShowLogs }: IResource) => {
),
},
provider: {
- render: () =>
- i.type === 'normal' ? (
-
- Managed by kloudlite on{' '}
- {provider}
-
- ) : (
+ render: () => {
+ if (i.type === 'byok' && i.ownedBy !== null) {
+ return (
+
+ Local Device
+
+ );
+ }
+ return (
- ),
+ );
+ },
},
status: {
render: () => (
diff --git a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
index 78353c85a..8173d0674 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/clusters/route.tsx
@@ -1,21 +1,21 @@
-import { Plus } from '~/console/components/icons';
import { defer } from '@remix-run/node';
-import { useLoaderData } from '@remix-run/react';
+import { Link, useLoaderData } from '@remix-run/react';
+import { useState } from 'react';
import { Button } from '~/components/atoms/button.jsx';
+import { EmptyClusterImage } from '~/console/components/empty-resource-images';
+import { Plus } from '~/console/components/icons';
+import { LoadingComp, pWrapper } from '~/console/components/loading-component';
import Wrapper from '~/console/components/wrapper';
+import { IByocClusters } from '~/console/server/gql/queries/byok-cluster-queries';
+import { GQLServerHandler } from '~/console/server/gql/saved-queries';
import { parseNodes } from '~/console/server/r-utils/common';
-import { getPagination, getSearch } from '~/console/server/utils/common';
-import { IRemixCtx } from '~/root/lib/types/common';
-import { LoadingComp, pWrapper } from '~/console/components/loading-component';
import { ensureAccountSet } from '~/console/server/utils/auth-utils';
-import { GQLServerHandler } from '~/console/server/gql/saved-queries';
-import { useState } from 'react';
-import { IByocClusters } from '~/console/server/gql/queries/byok-cluster-queries';
+import { getPagination, getSearch } from '~/console/server/utils/common';
import fake from '~/root/fake-data-generator/fake';
-import { EmptyClusterImage } from '~/console/components/empty-resource-images';
-import Tools from './tools';
-import ClusterResourcesV2 from './cluster-resources-v2';
+import { IRemixCtx } from '~/root/lib/types/common';
import HandleByokCluster from '../byok-cluster/handle-byok-cluster';
+import ClusterResourcesV2 from './cluster-resources-v2';
+import Tools from './tools';
export const loader = async (ctx: IRemixCtx) => {
const promise = pWrapper(async () => {
@@ -44,7 +44,7 @@ const CreateClusterButton = () => {
return (
<>
}
onClick={() => {
@@ -88,9 +88,21 @@ const ClusterComponent = ({
return {
image: ,
is: true,
- title: 'This is where you’ll manage your cluster.',
+ title: 'This is where you’ll attach your compute or local devices.',
content: (
- You can create a new cluster and manage the listed cluster.
+
+ You can attach a new compute and manage the listed compute.
+
+ Follow the instructions to attach your{' '}
+
+
+ local device
+
+ {' '}
+
),
action: ,
};
@@ -100,7 +112,7 @@ const ClusterComponent = ({
is: false,
title: 'This is where you’ll manage your cluster.',
content: (
- You can create a new cluster and manage the listed cluster.
+ You can create a new compute and manage the listed compute.
),
action: ,
};
@@ -112,7 +124,7 @@ const ClusterComponent = ({
return (
0 && ,
}}
empty={getEmptyState({
diff --git a/src/apps/console/routes/_main+/$account+/infra+/vpn-devices/route.tsx b/src/apps/console/routes/_main+/$account+/infra+/vpn-devices/route.tsx
index 2338d7c42..3daa97c44 100644
--- a/src/apps/console/routes/_main+/$account+/infra+/vpn-devices/route.tsx
+++ b/src/apps/console/routes/_main+/$account+/infra+/vpn-devices/route.tsx
@@ -1,19 +1,19 @@
-import { Globe, Plus } from '~/console/components/icons';
import { defer } from '@remix-run/node';
import { Link, useLoaderData } from '@remix-run/react';
+import { useState } from 'react';
import { Button } from '~/components/atoms/button.jsx';
+import { Globe, Plus } from '~/console/components/icons';
+import { LoadingComp, pWrapper } from '~/console/components/loading-component';
import Wrapper from '~/console/components/wrapper';
+import { GQLServerHandler } from '~/console/server/gql/saved-queries';
import { parseNodes } from '~/console/server/r-utils/common';
-import { IRemixCtx } from '~/root/lib/types/common';
-import { LoadingComp, pWrapper } from '~/console/components/loading-component';
import { ensureAccountSet } from '~/console/server/utils/auth-utils';
-import { GQLServerHandler } from '~/console/server/gql/saved-queries';
import { getPagination, getSearch } from '~/console/server/utils/common';
import fake from '~/root/fake-data-generator/fake';
-import { useState } from 'react';
+import { IRemixCtx } from '~/root/lib/types/common';
+import HandleGlobalVpnDevice from './handle-vpn-device';
import Tools from './tools';
import VPNResourcesV2 from './vpn-resources-v2';
-import HandleGlobalVpnDevice from './handle-vpn-device';
export const loader = async (ctx: IRemixCtx) => {
const promise = pWrapper(async () => {
@@ -99,7 +99,7 @@ const Devices = () => {
return (
0 && (