adds tag and repo in create app

kloudlite · Feb 23, 2024 · dddb0cb · dddb0cb
1 parent ec814ab
commit dddb0cb
Show file tree

Hide file tree

Showing 4 changed files with 555 additions and 302 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';
@@ -14,6 +14,10 @@ import Wrapper from '~/console/components/wrapper';
 import { useUnsavedChanges } from '~/root/lib/client/hooks/use-unsaved-changes';
 import { Button } from '~/components/atoms/button';
 import { plans } from '../../../../new-app/datas';
+import useCustomSwr from "~/lib/client/hooks/use-custom-swr";
+import {useConsoleApi} from "~/console/server/gql/api-provider";
+import {useMapper} from "~/components/utils";
+import {parseNodes} from "~/console/server/r-utils/common";
 
 const valueRender = ({
   label,
@@ -37,16 +41,35 @@ 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 [selectedRepo, setSelectedRepo] = useState("");
+  const [imageDigests, setImageDigests] = useState<{ tags: string[], digest: string }[]>([])
+  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: '',
+      repoImageTag: '',
+      repoImageUrl: '',
+
       cpu: parseValue(
         app.spec.containers[activeContIndex]?.resourceCpu?.max,
         250
@@ -132,6 +155,29 @@ 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)
+
+
+  useEffect(() => {
+    (async () => {
+      const {data} = await api.listDigest({repoName: selectedRepo})
+
+      const digests = data.edges.map(item => ({
+        digest: item.node.digest,
+        tags: item.node.tags,
+      }))
+
+      setImageDigests(digests);
+    })()
+
+  }, [selectedRepo])
+
   useEffect(() => {
     submit();
   }, [values]);
@@ -167,14 +213,14 @@ 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}
+              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={
@@ -186,6 +232,50 @@ const SettingCompute = () => {
             // message={errors.pullSecret}
             // onChange={handleChange('pullSecret')}
           /> */}
+
+          <div>
+            OR
+          </div>
+
+          <Select
+              label="Repository Name"
+              size="lg"
+              placeholder="Select Repo"
+              value={
+                {label: '', value: values.repoName}
+              }
+              searchable
+              onChange={(val) => {
+                handleChange('repoName')(dummyEvent(val.value));
+                setSelectedRepo(val.value)
+                setAccountName(val.accName)
+              }}
+              options={async () => [...repos]}
+              error={!!errors.repos || !!repoLoadingError}
+              message={repoLoadingError ? 'Error fetching repos.' : errors.app}
+              loading={repoLoading}
+          />
+
+          <Select
+              label="Repo 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(imageDigests.map(item => item.tags).flat())].map(item => ({
+                label: item,
+                value: item,
+              }))}
+              error={!!errors.repoImageTag}
+              message={errors.repoImageTag}
+          />
+
         </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">