fix(pci-kubernetes): calculate multiple node price

ref: #TAPC-3341

Signed-off-by: Pierre-Philippe <[email protected]>

Author: ppprevost

packages/manager/apps/pci-kubernetes/src/helpers/index.spec.ts

@@ -12,8 +12,11 @@ import {
   isBase64,
   parseCommaSeparated,
   generateUniqueName,
+  getPrice,
 } from '@/helpers/index';
-import { NodePool } from '@/api/data/kubernetes';
+import { NodePoolPrice } from '@/api/data/kubernetes';
+import { AutoscalingState } from '@/components/Autoscaling.component';
+import { KubeFlavor } from '@/components/flavor-selector/FlavorSelector.component';
 
 describe('helper', () => {
   it('compares two objects based on a key', () => {
@@ -159,7 +162,7 @@ describe('parseCommaSeparated', () => {
   });
 
   it('returns an empty array for undefined input', () => {
-    expect(parseCommaSeparated(undefined)).toEqual([]);
+    expect(parseCommaSeparated(undefined!)).toEqual([]);
   });
 });
 
@@ -200,9 +203,77 @@ describe('generateUniqueName', () => {
     (baseName, existingNodePools, expectedResult) => {
       const result = generateUniqueName(
         baseName,
-        existingNodePools as NodePool[],
+        existingNodePools as NodePoolPrice[],
       );
       expect(result).toBe(expectedResult);
     },
   );
 });
+
+describe('getPrice', () => {
+  const testCases = [
+    {
+      description: 'flavor et scaling with monthly',
+      flavor: {
+        pricingsHourly: { price: 0.1 },
+        pricingsMonthly: { price: 50 },
+      },
+      scaling: {
+        quantity: { desired: 2 },
+      },
+      expected: {
+        hour: 0.2,
+        month: 100,
+      },
+    },
+    {
+      description: 'flavor et scaling without monthly',
+      flavor: {
+        pricingsHourly: { price: 0.01 },
+        pricingsMonthly: null,
+      },
+      scaling: {
+        quantity: { desired: 3 },
+      },
+      expected: {
+        hour: 0.03,
+        month: null,
+      },
+    },
+    {
+      description: 'scaling null',
+      flavor: {
+        pricingsHourly: { price: 0.1 },
+        pricingsMonthly: { price: 50 },
+      },
+      scaling: null,
+      expected: {
+        hour: 0,
+        month: 0,
+      },
+    },
+    {
+      description: 'flavor null',
+      flavor: null,
+      scaling: {
+        quantity: { desired: 2 },
+      },
+      expected: {
+        hour: 0,
+        month: 0,
+      },
+    },
+  ];
+
+  (testCases as {
+    description: string;
+    flavor: KubeFlavor | null;
+    scaling: AutoscalingState | null;
+    expected: { hour: number; month: number };
+  }[]).forEach(({ description, flavor, scaling, expected }) => {
+    it(`should return correct pricing when ${description}`, () => {
+      const result = getPrice(flavor!, scaling);
+      expect(result).toEqual(expected);
+    });
+  });
+});

packages/manager/apps/pci-kubernetes/src/helpers/index.ts

@@ -4,7 +4,10 @@ import { ZodObject, ZodRawShape } from 'zod';
 import { ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { DeploymentMode, SigningAlgorithms, TOidcProvider } from '@/types';
-import { NodePool } from '@/api/data/kubernetes';
+import { NodePool, NodePoolPrice } from '@/api/data/kubernetes';
+
+import { KubeFlavor } from '@/components/flavor-selector/FlavorSelector.component';
+import { AutoscalingState } from '@/components/Autoscaling.component';
 
 export const REFETCH_INTERVAL_DURATION = 15_000;
 export const QUOTA_ERROR_URL =
@@ -191,7 +194,7 @@ export const getValidOptionalKeys = (oidcProvider: TOidcProvider) =>
  */
 export function generateUniqueName(
   baseName: string,
-  existingNodePools: NodePool[],
+  existingNodePools: NodePoolPrice[],
 ) {
   let newName = baseName;
   let copyNumber = 1;
@@ -216,3 +219,18 @@ export const isMultiDeploymentZones = (type: DeploymentMode) =>
   type === DeploymentMode.MULTI_ZONES;
 export const isLocalDeploymentZone = (type: DeploymentMode) =>
   type === DeploymentMode.LOCAL_ZONE;
+
+export const getPrice = (
+  flavor: KubeFlavor | null,
+  scaling: AutoscalingState | null,
+) => {
+  if (flavor && scaling) {
+    return {
+      hour: (flavor.pricingsHourly?.price ?? 0) * scaling.quantity.desired,
+      month: flavor.pricingsMonthly
+        ? flavor.pricingsMonthly.price * scaling.quantity.desired
+        : null,
+    };
+  }
+  return { hour: 0, month: 0 };
+};

packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/new/New.page.tsx

@@ -39,7 +39,7 @@ import NodePoolAntiAffinity from '@/pages/new/steps/node-pool/NodePoolAntiAffini
 import { FlavorSelector } from '@/components/flavor-selector/FlavorSelector.component';
 import NodePoolSize from '@/pages/new/steps/node-pool/NodePoolSize.component';
 import DeploymentZone from '@/pages/new/steps/node-pool/DeploymentZone.component';
-import { isMultiDeploymentZones } from '@/helpers';
+import { getPrice, isMultiDeploymentZones } from '@/helpers';
 import { useRegionInformations } from '@/api/hooks/useRegionInformations';
 
 export default function NewPage(): JSX.Element {
@@ -434,8 +434,8 @@ export default function NewPage(): JSX.Element {
         order={4}
       >
         <BillingStep
-          price={billingState.price}
-          monthlyPrice={billingState.monthlyPrice}
+          price={getPrice(store.flavor, store.autoScaling).hour}
+          monthlyPrice={getPrice(store.flavor, store.autoScaling).month}
           monthlyBilling={billingState.monthlyBilling}
           warn={billingState.warn}
         />

packages/manager/apps/pci-kubernetes/src/pages/detail/nodepools/new/store.ts

@@ -4,6 +4,7 @@ import { createRef, MutableRefObject } from 'react';
 import { StepsEnum } from '@/pages/detail/nodepools/new/steps.enum';
 import { AutoscalingState } from '@/components/Autoscaling.component';
 import { NAME_INPUT_CONSTRAINTS } from '@/constants';
+import { KubeFlavor } from '@/components/flavor-selector/FlavorSelector.component';
 
 type TStep = {
   isOpen: boolean;
@@ -18,7 +19,7 @@ export type TFormStore = {
     isTouched: boolean;
     hasError: boolean;
   };
-  flavor: TFlavor;
+  flavor?: KubeFlavor;
   selectedAvailibilityZone: string;
   autoScaling: AutoscalingState;
   antiAffinity: boolean;
@@ -120,8 +121,8 @@ export const useNewPoolStore = create<TFormStore>()((set, get) => ({
       }
     },
 
-    flavor: (val: TFlavor) => set({ flavor: val }),
-    autoScaling: (val: AutoscalingState) => set({ autoScaling: val }),
+    flavor: (val?: KubeFlavor) => set({ flavor: val }),
+    autoScaling: (val: AutoscalingState | null) => set({ autoScaling: val }),
     antiAffinity: (val: boolean) => set({ antiAffinity: val }),
     isMonthlyBilling: (val: boolean) => set({ isMonthlyBilling: val }),
   },

packages/manager/apps/pci-kubernetes/src/pages/new/steps/ClusterNameStep.component.tsx

@@ -60,17 +60,19 @@ export function ClusterNameStep({
         >
           {t('kubernetes_add_name')}
         </OsdsText>
-        <OsdsInput
-          placeholder={t('kubernetes_add_name_placeholder')}
-          value={name}
-          color={ODS_THEME_COLOR_INTENT.primary}
-          type={ODS_INPUT_TYPE.text}
-          onOdsValueChange={(e) => {
-            setName(e.detail.value ?? '');
-          }}
-          onOdsInputBlur={() => setIsTouched(true)}
-          error={hasError}
-        />
+        <div className="w-fit">
+          <OsdsInput
+            placeholder={t('kubernetes_add_name_placeholder')}
+            value={name}
+            color={ODS_THEME_COLOR_INTENT.primary}
+            type={ODS_INPUT_TYPE.text}
+            onOdsValueChange={(e) => {
+              setName(e.detail.value ?? '');
+            }}
+            onOdsInputBlur={() => setIsTouched(true)}
+            error={hasError}
+          />
+        </div>
       </OsdsFormField>
       <OsdsButton
         className="mt-8 w-fit"

packages/manager/apps/pci-kubernetes/src/pages/new/steps/NodePoolStep.component.tsx

@@ -30,29 +30,18 @@ import NodePoolType from './node-pool/NodePoolType.component';
 import NodePoolSize from './node-pool/NodePoolSize.component';
 import NodePoolAntiAffinity from './node-pool/NodePoolAntiAffinity.component';
 
-import { NodePool, NodePoolPrice } from '@/api/data/kubernetes';
+import { NodePoolPrice } from '@/api/data/kubernetes';
 import {
   generateUniqueName,
   isMonoDeploymentZone,
   isMultiDeploymentZones,
+  getPrice,
 } from '@/helpers';
 import { useRegionInformations } from '@/api/hooks/useRegionInformations';
 import DeploymentZone from './node-pool/DeploymentZone.component';
 import { KubeFlavor } from '@/components/flavor-selector/FlavorSelector.component';
 import use3AZPlanAvailable from '@/hooks/use3azPlanAvaible';
 
-const getPrice = (flavor: KubeFlavor, scaling: AutoscalingState | null) => {
-  if (flavor && scaling) {
-    return {
-      hour: flavor.pricingsHourly.price * scaling.quantity.desired,
-      month: flavor.pricingsMonthly
-        ? flavor.pricingsMonthly.price * scaling.quantity.desired
-        : null,
-    };
-  }
-  return { hour: 0, month: 0 };
-};
-
 export type NodePoolState = {
   antiAffinity: boolean;
   name: string;
@@ -172,9 +161,9 @@ const NodePoolStep = ({
   }, [nodePoolEnabled]);
 
   const setNewNodePool = useCallback(() => {
-    if (nodes || nodePoolState.scaling || flavor) {
+    if (nodes && nodePoolState.scaling && flavor) {
       const newNodePool: NodePoolPrice = {
-        name: generateUniqueName(nodePoolState.name, nodes as NodePool[]),
+        name: generateUniqueName(nodePoolState.name, nodes),
         antiAffinity: nodePoolState.antiAffinity,
         autoscale: nodePoolState.scaling.isAutoscale,
         ...(isMultiDeploymentZones(regionInformations?.type) && {
@@ -233,19 +222,7 @@ const NodePoolStep = ({
               : 'invisible w-0 h-0 overflow-hidden'
           }
         >
-          <div className="mb-8">
-            <NodePoolName
-              onTouched={(isTouched: boolean) =>
-                setNodePoolState((state) => ({ ...state, isTouched }))
-              }
-              hasError={hasError}
-              onNameChange={(name: string) =>
-                setNodePoolState((state) => ({ ...state, name }))
-              }
-              name={nodePoolState.name}
-            />
-          </div>
-          <div className="mb-8">
+          <div className="mb-8 mt-4">
             <NodePoolType
               projectId={projectId as string}
               region={stepper.form.region.name}
@@ -303,6 +280,18 @@ const NodePoolStep = ({
               }
             />
           </div>
+          <div className="mb-8">
+            <NodePoolName
+              onTouched={(isTouched: boolean) =>
+                setNodePoolState((state) => ({ ...state, isTouched }))
+              }
+              hasError={hasError}
+              onNameChange={(name: string) =>
+                setNodePoolState((state) => ({ ...state, name }))
+              }
+              name={nodePoolState.name}
+            />
+          </div>
         </div>
 
         {!stepper.node.step.isLocked && nodePoolEnabled && (

packages/manager/apps/pci-kubernetes/src/pages/new/steps/node-pool/NodePoolName.component.tsx

@@ -58,17 +58,19 @@ const NodePoolName = ({
         >
           {t('kubernetes_add_name')}
         </OsdsText>
-        <OsdsInput
-          placeholder={t('kube_add_node_pool_name_label')}
-          value={name}
-          color={ODS_THEME_COLOR_INTENT.primary}
-          type={ODS_INPUT_TYPE.text}
-          onOdsValueChange={(e) => {
-            onNameChange(e.detail.value);
-          }}
-          onOdsInputBlur={() => onTouched(true)}
-          error={hasError}
-        />
+        <div className="w-fit">
+          <OsdsInput
+            placeholder={t('kube_add_node_pool_name_label')}
+            value={name}
+            color={ODS_THEME_COLOR_INTENT.primary}
+            type={ODS_INPUT_TYPE.text}
+            onOdsValueChange={(e) => {
+              onNameChange(e.detail.value ?? '');
+            }}
+            onOdsInputBlur={() => onTouched(true)}
+            error={hasError}
+          />
+        </div>
       </OsdsFormField>
     </>
   );