Merge pull request #98 from kloudlite/fix/add-repo-create-app

KLO-118 : Add repo name and image tag while creating and updating app
kloudlite · Feb 26, 2024 · e5b190a · e5b190a
2 parents ec814ab + 1300b45
commit e5b190a
Show file tree

Hide file tree

Showing 6 changed files with 310 additions and 36 deletions.
diff --git a/Taskfile.yaml b/Taskfile.yaml
@@ -41,6 +41,10 @@ tasks:
           "vision")
             URL_SUFFIX="-vision"
             ;;
+          
+          "piyush")
+            URL_SUFFIX="-piyush"
+            ;;
 
           *)
             URL_SUFFIX=""

diff --git a/src/apps/console/page-components/app-states.tsx b/src/apps/console/page-components/app-states.tsx
@@ -6,6 +6,8 @@ import {
   AppIn,
   Github__Com___Kloudlite___Operator___Apis___Crds___V1__AppContainerIn as AppSpecContainersIn,
 } from '~/root/src/generated/gql/server';
+import {useMapper} from "~/components/utils";
+import {parseNodes} from "~/console/server/r-utils/common";
 
 const defaultApp: AppIn = {
   metadata: {
@@ -185,6 +187,18 @@ export const useAppState = () => {
     });
   };
 
+  type IparseNodes = {
+    edges: Array<{ node: any }>;
+  };
+
+  const getRepoMapper = (resources: IparseNodes | undefined) => {
+    return useMapper(parseNodes(resources), (val) => ({
+      label: val.name,
+      value: val.name,
+      accName: val.accountName
+    }))
+  }
+
   return {
     resetState,
     completePages,
@@ -203,6 +217,7 @@ export const useAppState = () => {
     activeContIndex: activeContIndex || 0,
     services: app.spec.services || [],
     setServices,
+    getRepoMapper,
   };
 };
 

diff --git a/...le/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx b/...le/routes/_main+/$account+/$project+/$environment+/app+/$app+/settings+/compute/route.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { NumberInput, TextInput } from '~/components/atoms/input';
 import Slider from '~/components/atoms/slider';
 import { useAppState } from '~/console/page-components/app-states';
@@ -13,6 +13,9 @@ import ExtendedFilledTab from '~/console/components/extended-filled-tab';
 import Wrapper from '~/console/components/wrapper';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import { Button } from '~/components/atoms/button';
+import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
+import { useConsoleApi } from '~/console/server/gql/api-provider';
+import { parseNodes } from '~/console/server/r-utils/common';
 import { plans } from '../../../../new-app/datas';
 
 const valueRender = ({
@@ -37,16 +40,34 @@ const valueRender = ({
 };
 
 const SettingCompute = () => {
-  const { app, setApp, getContainer, activeContIndex } = useAppState();
+  const { app, setApp, getContainer, activeContIndex, getRepoMapper } =
+    useAppState();
   const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
 
+  const api = useConsoleApi();
+
+  const [accountName, setAccountName] = useState('');
+
+  const {
+    data,
+    isLoading: repoLoading,
+    error: repoLoadingError,
+  } = useCustomSwr('/repos', async () => {
+    return api.listRepo({});
+  });
+
   const { values, errors, handleChange, submit, resetValues } = useForm({
     initialValues: {
       imageUrl: getContainer(0)?.image || '',
       pullSecret: 'TODO',
       cpuMode: app.metadata?.annotations?.[keyconstants.cpuMode] || 'shared',
       memPerCpu: app.metadata?.annotations?.[keyconstants.memPerCpu] || 1,
 
+      repoName: app.metadata?.annotations?.[keyconstants.repoName] || '',
+      repoImageTag: app.metadata?.annotations?.[keyconstants.imageTag] || '',
+      repoImageUrl: app.metadata?.annotations?.[keyconstants.repoImageUrl] || '',
+      image: app.metadata?.annotations?.[keyconstants.image] || '',
+
       cpu: parseValue(
         app.spec.containers[activeContIndex]?.resourceCpu?.max,
         250
@@ -88,14 +109,19 @@ const SettingCompute = () => {
             ...(s.metadata?.annotations || {}),
             [keyconstants.cpuMode]: val.cpuMode,
             [keyconstants.selectedPlan]: val.selectedPlan,
+            [keyconstants.repoName]: val.repoName,
+            [keyconstants.imageTag]: val.repoImageTag,
+            [keyconstants.image]: val.image,
+            [keyconstants.repoImageUrl]: val.repoImageUrl,
           },
         },
         spec: {
           ...s.spec,
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
-              image: val.imageUrl,
+              // image: val.imageUrl,
+              image: val.repoImageUrl == '' ? val.imageUrl : val.repoImageUrl,
               name: 'container-0',
               resourceCpu:
                 val.selectionMode === 'quick'
@@ -132,6 +158,25 @@ const SettingCompute = () => {
   //   );
   // }, [values.cpuMode, values.selectedPlan]);
 
+  // const repository = useMapper(parseNodes(data), (val) => ({
+  //   label: val.name,
+  //   value: val.name,
+  //   accName: val.accountName
+  // }));
+
+  const repos = getRepoMapper(data);
+
+  const {
+    data: digestData,
+    isLoading: digestLoading,
+    error: digestError,
+  } = useCustomSwr(
+    () => `/digests_${values.repoName}`,
+    async () => {
+      return api.listDigest({ repoName: values.repoName });
+    }
+  );
+
   useEffect(() => {
     submit();
   }, [values]);
@@ -166,16 +211,18 @@ const SettingCompute = () => {
         }}
       >
         <div className="flex flex-col gap-3xl">
-          <TextInput
-            label={
-              <InfoLabel info="some usefull information" label="Image Url" />
-            }
-            size="lg"
-            value={values.imageUrl}
-            onChange={handleChange('imageUrl')}
-            error={!!errors.imageUrl}
-            message={errors.imageUrl}
-          />
+          {!values.repoImageUrl && (
+              <TextInput
+                  label={
+                    <InfoLabel info="some usefull information" label="Image Url" />
+                  }
+                  size="lg"
+                  value={values.imageUrl}
+                  onChange={handleChange('imageUrl')}
+                  error={!!errors.imageUrl}
+                  message={errors.imageUrl}
+              />
+          )}
           {/* <PasswordInput
             label={
               <InfoLabel info="some usefull information" label="Pull Secret" />
@@ -186,6 +233,67 @@ const SettingCompute = () => {
             // message={errors.pullSecret}
             // onChange={handleChange('pullSecret')}
           /> */}
+
+          {values.repoImageUrl && (
+              <Select
+                  label="Repository Name"
+                  size="lg"
+                  placeholder="Select Repo"
+                  value={{ label: '', value: values.repoName }}
+                  searchable
+                  onChange={(val) => {
+                    handleChange('repoName')(dummyEvent(val.value));
+                    handleChange('image')(dummyEvent(''));
+                    setAccountName(val.accName);
+                  }}
+                  options={async () => [...repos]}
+                  error={!!errors.repos || !!repoLoadingError}
+                  message={
+                    repoLoadingError ? 'Error fetching repositories.' : errors.app
+                  }
+                  loading={repoLoading}
+              />
+          )}
+
+          {values.repoImageUrl && (
+              <Select
+                  label="Image Tag"
+                  size="lg"
+                  placeholder="Select Image Tag"
+                  value={{ label: '', value: values.repoImageTag }}
+                  searchable
+                  onChange={(val) => {
+                    handleChange('repoImageTag')(dummyEvent(val.value));
+                    handleChange('repoImageUrl')(
+                        dummyEvent(
+                            `registry.kloudlite.io/${accountName}/${values.repoName}:${val.value}`
+                        )
+                    );
+                  }}
+                  options={async () =>
+                      [
+                        ...new Set(
+                            parseNodes(digestData)
+                                .map((item) => item.tags)
+                                .flat()
+                        ),
+                      ].map((item) => ({
+                        label: item,
+                        value: item,
+                      }))
+                  }
+                  error={!!errors.repoImageTag || !!digestError}
+                  message={
+                    errors.repoImageTag
+                        ? errors.repoImageTag
+                        : digestError
+                            ? 'Failed to load Image tags.'
+                            : ''
+                  }
+                  loading={digestLoading}
+              />
+          )}
+
         </div>
         {/* <div className="flex flex-col border border-border-default bg-surface-basic-default rounded overflow-hidden">
         <div className="p-2xl gap-2xl flex flex-row items-center border-b border-border-disabled bg-surface-basic-subdued">