Merge pull request #118 from kloudlite/update/app-msvc

KLO-128 : user should be able to select nodespool while creating application and project managed services
kloudlite · Mar 4, 2024 · 165ed40 · 165ed40
2 parents d749ee6 + 1372468
commit 165ed40
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 17 deletions.
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
@@ -7,13 +7,15 @@ import Yup from '~/root/lib/server/helpers/yup';
 import { FadeIn, parseValue } from '~/console/page-components/util';
 import Select from '~/components/atoms/select';
 import ExtendedFilledTab from '~/console/components/extended-filled-tab';
-import { parseNodes } from '~/console/server/r-utils/common';
+import {parseName, parseNodes} from '~/console/server/r-utils/common';
 import useCustomSwr from '~/lib/client/hooks/use-custom-swr';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
 import { useMapper } from '~/components/utils';
 import { registryHost } from '~/lib/configs/base-url.cjs';
 import { BottomNavigation } from '~/console/components/commons';
 import { plans } from './datas';
+import {useOutletContext } from '@remix-run/react';
+import {IAppContext} from "~/console/routes/_main+/$account+/$project+/$environment+/app+/$app+/_layout";
 
 const valueRender = ({
   label,
@@ -47,6 +49,8 @@ const AppCompute = () => {
     getImageTag,
   } = useAppState();
   const api = useConsoleApi();
+  const {cluster} = useOutletContext<IAppContext>()
+
 
   const {
     data,
@@ -56,6 +60,14 @@ const AppCompute = () => {
     return api.listRepo({});
   });
 
+  const {
+    data: nodepoolData,
+    isLoading: nodepoolLoading,
+    error: nodepoolLoadingError,
+  } = useCustomSwr('/nodepools', async () => {
+    return api.listNodePools({clusterName: parseName(cluster)})
+  })
+
   const { values, errors, handleChange, isLoading, submit } = useForm({
     initialValues: {
       imageUrl: app.spec.containers[activeContIndex]?.image || '',
@@ -97,6 +109,8 @@ const AppCompute = () => {
         app.spec.containers[activeContIndex].resourceMemory?.max,
         0
       ),
+
+      nodepoolName: app.spec.nodeSelector?.[keyconstants.nodepoolName] || ''
     },
     validationSchema: Yup.object({
       pullSecret: Yup.string(),
@@ -121,6 +135,10 @@ const AppCompute = () => {
         },
         spec: {
           ...s.spec,
+          nodeSelector: {
+            ...(s.spec.nodeSelector || {}),
+            [keyconstants.nodepoolName]: val.nodepoolName
+          },
           containers: [
             {
               ...(s.spec.containers?.[0] || {}),
@@ -166,6 +184,11 @@ const AppCompute = () => {
     accName: val.accountName,
   }));
 
+  const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({
+    label: val.metadata?.name || '',
+    value: val.metadata?.name || '',
+  }))
+
   const {
     data: digestData,
     isLoading: digestLoading,
@@ -196,6 +219,24 @@ 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"

diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/new-app/app-review.tsx
@@ -13,6 +13,7 @@ import {
   BottomNavigation,
   ReviewComponent,
 } from '~/console/components/commons';
+import {keyconstants} from "~/console/server/r-utils/key-constants";
 
 const AppReview = () => {
   const { app, setPage, resetState } = useAppState();
@@ -114,12 +115,19 @@ const AppReview = () => {
             </div>
           </div>
         </ReviewComponent>
-        <ReviewComponent
-          title="Environment"
+        <ReviewComponent title="Nodepool Details" onEdit={() => {}}>
+          <div className="flex flex-col p-xl gap-md rounded border border-border-default">
+            <div className="bodyMd-semibold text-text-default">
+              Nodepool Selector
+            </div>
+            <div className="bodySm text-text-soft">{app.spec.nodeSelector[keyconstants.nodepoolName]}</div>
+          </div>
+        </ReviewComponent>
+        <ReviewComponent 
+          title="Environment" 
           onEdit={() => {
             setPage(3);
-          }}
-        >
+        }}>
           <div className="flex flex-col gap-xl p-xl rounded border border-border-default">
             <div className="flex flex-row items-center gap-lg pb-xl border-b border-border-default">
               <div className="flex-1 bodyMd-medium text-text-default">

diff --git a/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx b/src/apps/console/routes/_main+/$account+/$project+/new-managed-service/_index.tsx
@@ -14,7 +14,7 @@ import {
 import { Switch } from '~/components/atoms/switch';
 import { NumberInput, TextInput } from '~/components/atoms/input';
 import { handleError } from '~/root/lib/utils/common';
-import { titleCase } from '~/components/utils';
+import {titleCase, useMapper} from '~/components/utils';
 import { flatMapValidations, flatM } from '~/console/utils/commons';
 import MultiStepProgress, {
   useMultiStepProgress,
@@ -25,6 +25,10 @@ import {
   ReviewComponent,
 } from '~/console/components/commons';
 import { IProjectContext } from '../_layout';
+import {parseName, parseNodes} from "~/console/server/r-utils/common";
+import useCustomSwr from "~/lib/client/hooks/use-custom-swr";
+import {INodepools} from "~/console/server/gql/queries/nodepool-queries";
+import {keyconstants} from "~/console/server/r-utils/key-constants";
 
 const valueRender = ({ label, icon }: { label: string; icon: string }) => {
   return (
@@ -239,6 +243,7 @@ const TemplateView = ({
 
 const FieldView = ({
   selectedTemplate,
+  nodepools,
   values,
   handleSubmit,
   handleChange,
@@ -249,6 +254,7 @@ const FieldView = ({
   values: Record<string, any>;
   errors: Record<string, any>;
   selectedTemplate: ISelectedTemplate | null;
+  nodepools: {label: string, value: string}[]
 }) => {
   const nameRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
@@ -276,6 +282,21 @@ const FieldView = ({
         handleChange={handleChange}
         nameErrorLabel="isNameError"
       />
+
+      <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.nodepoolName}
+          message={errors.nodepoolName}
+      />
+
       {selectedTemplate?.template.fields?.map((field) => {
         const k = field.name;
         const x = k.split('.').reduce((acc, curr) => {
@@ -368,21 +389,32 @@ const ReviewView = ({
             </div>
           </div>
         </ReviewComponent>
+
         <ReviewComponent
-          title="Service detail"
-          onEdit={() => {
-            onEdit(1);
-          }}
-        >
-          <div className="flex flex-col p-xl gap-md rounded border border-border-default">
-            <div className="bodyMd-semibold text-text-default">
-              {values?.selectedTemplate?.categoryDisplayName}
+            title="Service details"
+            onEdit={() => {
+              onEdit(1);
+            }}>
+          <div className="flex flex-col gap-xl p-xl rounded border border-border-default">
+            <div className="flex flex-col gap-lg pb-xl border-b border-border-default">
+              <div className="flex-1 bodyMd-medium text-text-default">
+                {values?.selectedTemplate?.categoryDisplayName}
+              </div>
+              <div className="text-text-soft bodyMd">
+                {values?.selectedTemplate?.template?.displayName}
+              </div>
             </div>
-            <div className="bodySm text-text-soft">
-              {values?.selectedTemplate?.template?.displayName}
+            <div className="flex flex-col gap-lg">
+              <div className="flex-1 bodyMd-medium text-text-default">
+                Node Selector
+              </div>
+              <div className="text-text-soft bodyMd">
+                {values.nodepoolName}
+              </div>
             </div>
           </div>
         </ReviewComponent>
+
         {renderFieldView()}
         {values?.res?.resources && (
           <ReviewComponent
@@ -436,6 +468,17 @@ const ManagedServiceLayout = () => {
   const { project, account } = useParams();
   const rootUrl = `/${account}/${project}/managed-services`;
 
+  const { cluster } = useOutletContext<IProjectContext>();
+  console.log("cluster", parseName(cluster))
+
+  const {
+    data: nodepoolData,
+    isLoading: nodepoolLoading,
+    error: nodepoolLoadingError,
+  } = useCustomSwr('/nodepools', async () => {
+    return api.listNodePools({clusterName: parseName(cluster)})
+  })
+
   const { currentStep, jumpStep, nextStep } = useMultiStepProgress({
     defaultStep: 1,
     totalSteps: 3,
@@ -449,6 +492,7 @@ const ManagedServiceLayout = () => {
         res: {},
         selectedTemplate: null,
         isNameError: false,
+        nodepoolName: ''
       },
       validationSchema: Yup.object().shape({
         name: Yup.string().test('required', 'Name is required', (v) => {
@@ -513,6 +557,9 @@ const ManagedServiceLayout = () => {
 
                 spec: {
                   msvcSpec: {
+                    nodeSelector: {
+                      [keyconstants.nodepoolName]: val.nodepoolName
+                    },
                     serviceTemplate: {
                       apiVersion: selectedTemplate.template.apiVersion,
                       kind: selectedTemplate.template.kind,
@@ -550,6 +597,14 @@ const ManagedServiceLayout = () => {
       },
     });
 
+  const nodepools = useMapper(parseNodes(nodepoolData), (val) => ({
+    label: val.metadata?.name || '',
+    value: val.metadata?.name || '',
+    nodepoolStateType: val.spec.nodeLabels[keyconstants.nodepoolStateType]
+  }))
+
+  const statefulNodepools = nodepools.filter((np) => np.nodepoolStateType == 'stateful')
+
   useEffect(() => {
     const selectedTemplate =
       values.selectedTemplate as unknown as ISelectedTemplate;
@@ -594,6 +649,7 @@ const ManagedServiceLayout = () => {
             errors={errors}
             handleChange={handleChange}
             handleSubmit={handleSubmit}
+            nodepools={statefulNodepools}
           />
         </MultiStepProgress.Step>
         <MultiStepProgress.Step label="Review" step={3}>

diff --git a/src/apps/console/server/r-utils/key-constants.js b/src/apps/console/server/r-utils/key-constants.js
@@ -11,6 +11,7 @@ export const keyconstants = {
   repoName: 'kloudlite.io/ui-repoName',
   imageTag: 'kloudlite.io/ui-imageTag',
   repoAccountName: 'kloudlite.io/ui-repoAccountName',
+  nodepoolName: 'kloudlite.io/nodepool.name',
 
-  nodepoolStateType: 'kloudlite.io/ui/pool.app-state-type'
+  nodepoolStateType: 'kloudlite.io/ui-pool.app-state-type'
 };