Merge branch 'release-v1.0.5' into impl/app-image-pull

kloudlite · Mar 15, 2024 · 6bbe52d · 6bbe52d
2 parents bcc481a + 94293fd
commit 6bbe52d
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 373 deletions.
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
@@ -13,9 +13,12 @@ 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 { parseName, parseNodes } from '~/console/server/r-utils/common';
 import { registryHost } from '~/lib/configs/base-url.cjs';
 import { Checkbox } from '~/components/atoms/checkbox';
+import { useMapper } from '~/components/utils';
+import { IProjectContext } from '~/console/routes/_main+/$account+/$project+/_layout';
+import { useOutletContext } from '@remix-run/react';
 import { plans } from '../../../../new-app/datas';
 
 const valueRender = ({
@@ -50,6 +53,7 @@ const SettingCompute = () => {
     getImageTag,
   } = useAppState();
   const { setPerformAction, hasChanges, loading } = useUnsavedChanges();
+  const { cluster } = useOutletContext<IProjectContext>();
 
   const api = useConsoleApi();
 
@@ -61,6 +65,21 @@ const SettingCompute = () => {
     return api.listRepo({});
   });
 
+  const {
+    data: nodepoolData,
+    isLoading: nodepoolLoading,
+    error: nodepoolLoadingError,
+  } = useCustomSwr('/nodepools', async () => {
+    return api.listNodePools({
+      clusterName: parseName(cluster),
+      pagination: {
+        first: 100,
+        orderBy: 'updateTime',
+        sortDirection: 'DESC',
+      },
+    });
+  });
+
   const { values, errors, handleChange, submit, resetValues } = useForm({
     initialValues: {
       imageUrl: getContainer(0)?.image || '',
@@ -104,6 +123,8 @@ const SettingCompute = () => {
         app.spec.containers[activeContIndex].resourceMemory?.max,
         0
       ),
+
+      nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || '',
     },
     validationSchema: Yup.object({
       imageUrl: Yup.string().required(),
@@ -125,6 +146,10 @@ const SettingCompute = () => {
         },
         spec: {
           ...s.spec,
+          nodeSelector: {
+            ...(s.spec.nodeSelector || {}),
+            [keyconstants.nodepoolName]: val.nodepoolName,
+          },
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
@@ -166,6 +191,11 @@ const SettingCompute = () => {
 
   const repos = getRepoMapper(data);
 
+  const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({
+    label: val.metadata?.name || '',
+    value: val.metadata?.name || '',
+  }));
+
   const {
     data: digestData,
     isLoading: digestLoading,
@@ -265,6 +295,23 @@ const SettingCompute = () => {
             loading={digestLoading}
           />
 
+          <Select
+            label="Nodepool Name"
+            size="lg"
+            placeholder="Select Nodepool"
+            value={values.nodepoolName}
+            creatable
+            onChange={(val) => {
+              handleChange('nodepoolName')(dummyEvent(val.value));
+            }}
+            options={async () => [...nodepools]}
+            error={!!errors.repos || !!nodepoolLoadingError}
+            message={
+              nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
+            }
+            loading={nodepoolLoading}
+          />
+
           <Checkbox
             label="Always pull image on restart"
             checked={values.imagePullPolicy === 'Always'}

diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-compute.tsx
@@ -16,6 +16,8 @@ import { BottomNavigation } from '~/console/components/commons';
 import { useOutletContext } from '@remix-run/react';
 import { useLog } from '~/root/lib/client/hooks/use-log';
 import { Checkbox } from '~/components/atoms/checkbox';
+import { useState } from 'react';
+import { Button } from '~/components/atoms/button';
 import { plans } from './datas';
 import { IProjectContext } from '../../_layout';
 
@@ -52,6 +54,7 @@ const AppCompute = () => {
   } = useAppState();
   const api = useConsoleApi();
   const { cluster } = useOutletContext<IProjectContext>();
+  const [advancedOptions, setAdvancedOptions] = useState(false);
 
   const {
     data,
@@ -247,23 +250,6 @@ const AppCompute = () => {
         manipulation and calculations in a system.
       </div>
       <div className="flex flex-col gap-3xl">
-        <Select
-          label="Nodepool Name"
-          size="lg"
-          placeholder="Select Nodepool"
-          value={values.nodepoolName}
-          creatable
-          onChange={(val) => {
-            handleChange('nodepoolName')(dummyEvent(val.value));
-          }}
-          options={async () => [...nodepools]}
-          error={!!errors.repos || !!nodepoolLoadingError}
-          message={
-            nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
-          }
-          loading={nodepoolLoading}
-        />
-
         <Select
           label="Repo Name"
           size="lg"
@@ -319,6 +305,35 @@ const AppCompute = () => {
           loading={digestLoading}
         />
 
+        <Button
+          size="sm"
+          content={<span className="truncate text-left">Advanced options</span>}
+          variant="primary-plain"
+          className="truncate"
+          onClick={() => {
+            setAdvancedOptions(!advancedOptions);
+          }}
+        />
+
+        {advancedOptions && (
+          <Select
+            label="Nodepool Name"
+            size="lg"
+            placeholder="Select Nodepool"
+            value={values.nodepoolName}
+            creatable
+            onChange={(val) => {
+              handleChange('nodepoolName')(dummyEvent(val.value));
+            }}
+            options={async () => [...nodepools]}
+            error={!!errors.repos || !!nodepoolLoadingError}
+            message={
+              nodepoolLoadingError ? 'Error fetching nodepools.' : errors.app
+            }
+            loading={nodepoolLoading}
+          />
+        )}
+
         <Checkbox
           label="Always pull image on restart"
           checked={values.imagePullPolicy === 'Always'}

diff --git a/...s/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx b/...s/console/routes/_main+/$account+/$project+/$environment+/routers/router-resources-V2.tsx
@@ -176,8 +176,10 @@ const GridView = ({ items, onAction }: IResource) => {
 };
 
 const ListView = ({ items, onAction }: IResource) => {
+  const { account, project, environment } = useParams();
   return (
     <ListV2.Root
+      linkComponent={Link}
       data={{
         headers: [
           {
@@ -209,9 +211,10 @@ const ListView = ({ items, onAction }: IResource) => {
           },
         ],
         rows: items.map((i) => {
-          const { name, updateInfo } = parseItem(i);
+          const { name, id, updateInfo } = parseItem(i);
           const firstDomain = i.spec.domains?.[0];
           return {
+            to: `/${account}/${project}/${environment}/router/${id}/routes`,
             columns: {
               name: {
                 render: () => <ListTitle title={name} />,