Merge pull request #300 from kloudlite/console/changes

WEB: Add console and webinar related changes
kloudlite · Sep 27, 2024 · d57aa50 · d57aa50
2 parents 50094a4 + b833504
commit d57aa50
Show file tree

Hide file tree

Showing 22 changed files with 614 additions and 315 deletions.
diff --git 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
@@ -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 <ResourceExtraAction options={options} />;
 // };
 
-const AppSelectItem = ({
-  label,
-  value,
-  registry,
-  repository,
-}: {
-  label: string;
-  value: string;
-  registry: string;
-  repository: string;
-}) => {
-  return (
-    <div>
-      <div className="flex flex-col">
-        <div>{label}</div>
-        {registry !== '' && repository !== '' && (
-          <div className="bodySm text-text-soft">{`${registry}/${repository}`}</div>
-        )}
-        {/* <div className="bodySm text-text-soft">{value}</div> */}
-      </div>
-    </div>
-  );
+const valueRenderer = ({ value }: { value: string }) => {
+  return <div>{value}</div>;
 };
 
 const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
@@ -109,38 +92,49 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
 
   const [imageList, setImageList] = useState<any[]>([]);
   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: () => (
-          <AppSelectItem
-            label={`${i.imageName}:${i.imageTag}`}
-            value={`${i.imageName}:${i.imageTag}`}
-            registry={i.meta.registry || ''}
-            repository={i.meta.repository || ''}
-          />
-        ),
-      }));
-      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: () => (
+            <AppSelectItem
+              label={`${i.imageName}:${i.imageTag}`}
+              meta={i.meta}
+              imageSearchText={query}
+            />
+          ),
+        }));
+        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,25 +311,30 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
           />
         )}
         <div className="flex flex-col gap-xl">
-          <TextInput
+          {/* <TextInput
             size="lg"
             label="Image name"
             placeholder="Enter Image name"
             value={values.imageUrl}
             onChange={handleChange('imageUrl')}
             error={!!errors.imageUrl}
             message={errors.imageUrl}
-          />
-          {/* <Select
+          /> */}
+
+          <Select
             label="Select Images"
             size="lg"
             value={values.imageUrl}
             placeholder="Select a image"
             creatable
+            searchable
             options={async () => imageList}
             onChange={({ value }) => {
               handleChange('imageUrl')(dummyEvent(value));
             }}
+            onSearch={(text) => {
+              setImageSearchText(text);
+            }}
             showclear
             noOptionMessage={
               <div className="p-2xl bodyMd text-center">
@@ -346,7 +345,8 @@ const AppGeneral = ({ mode = 'new' }: { mode: 'edit' | 'new' }) => {
             message={errors.imageUrl}
             loading={imageLoaded}
             createLabel="Select"
-          /> */}
+            valueRender={valueRenderer}
+          />
         </div>
 
         <Checkbox