move step cost calculation logic away from single input

kyma-project · Nov 25, 2024 · 771ba01 · 771ba01
1 parent c5de5b0
commit 771ba01
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 140 deletions.
diff --git a/src/components/CostWizard/UserInputs/baseConfig/MachineTypeSelect.tsx b/src/components/CostWizard/UserInputs/baseConfig/MachineTypeSelect.tsx
@@ -1,40 +1,22 @@
 import React from 'react';
 import config from '../../../../config.json';
 import { Option, Select, Title } from '@ui5/webcomponents-react';
-import { VMSize, VMsizeState } from '../../../../state/baseConfig/VMsizeState';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { minAutoscalerState } from '../../../../state/baseConfig/minAutoscalerState';
-import { timeConsumptionBaseConfigState } from '../../../../state/baseConfig/timeConsumptionState';
 import {
   MachineType,
   machineTypeState,
 } from '../../../../state/baseConfig/machineTypeState';
-import { useCostCalculator } from '../../../../context/CostCalculatorContext';
+import { useSetRecoilState } from 'recoil';
 
 export default function VMsizeSelect() {
-  const minAutoscaler: number = useRecoilValue<number>(minAutoscalerState);
-  const vmMultiplier: number = useRecoilValue<VMSize>(VMsizeState).multiple;
-  const timeConsumption: number = useRecoilValue<number>(
-    timeConsumptionBaseConfigState,
-  );
-  const setValue = useSetRecoilState<MachineType>(machineTypeState);
   const baseConfigOptions = config.baseConfig.machineTypeFactor.MachineTypes;
-
-  const { updateBaseConfigCosts } = useCostCalculator();
+  const setMachineType = useSetRecoilState<MachineType>(machineTypeState);
 
   const onChange = (event: any) => {
     const selection = event.detail.selectedOption.dataset;
-    setValue({
+    setMachineType({
       value: selection.value,
       multiple: selection.multiple,
     });
-
-    updateBaseConfigCosts({
-      timeConsumption,
-      vmMultiplier,
-      minAutoscaler,
-      machineTypeFactor: selection.multiple,
-    });
   };
 
   return (

diff --git a/src/components/CostWizard/UserInputs/baseConfig/MinAutoscalerInputField.tsx b/src/components/CostWizard/UserInputs/baseConfig/MinAutoscalerInputField.tsx
@@ -1,39 +1,22 @@
 import React from 'react';
 import config from '../../../../config.json';
-import { useRecoilState, useRecoilValue } from 'recoil';
 import { Slider, StepInput } from '@ui5/webcomponents-react';
-import { minAutoscalerState } from '../../../../state/baseConfig/minAutoscalerState';
-import { VMSize, VMsizeState } from '../../../../state/baseConfig/VMsizeState';
-import { timeConsumptionBaseConfigState } from '../../../../state/baseConfig/timeConsumptionState';
-import { machineTypeState } from '../../../../state/baseConfig/machineTypeState';
 import HeaderWithInfo from '../../common/HeaderWithInfo';
-import { useCostCalculator } from '../../../../context/CostCalculatorContext';
+import { useRecoilState } from 'recoil';
+import { minAutoscalerState } from '../../../../state/baseConfig/minAutoscalerState';
 
 export default function MinAutoscalerInputField() {
-  const timeConsumption: number = useRecoilValue<number>(
-    timeConsumptionBaseConfigState,
-  );
-  const vmMultiplier: number = useRecoilValue<VMSize>(VMsizeState).multiple;
-  const [value, setValue] = useRecoilState<number>(minAutoscalerState);
-
-  const machineTypeFactor: number = useRecoilValue(machineTypeState).multiple;
-
   const configuration = config.baseConfig.AutoScalerMin;
   const min = configuration.Min;
   const max = configuration.Max;
   const step = configuration.Step;
 
-  const { updateBaseConfigCosts } = useCostCalculator();
+  const [minAutoScaler, setMinAutoScaler] =
+    useRecoilState<number>(minAutoscalerState);
 
   function handleChange(event: any): void {
     const newValue: number = parseInt(event.target.value);
-    setValue(newValue);
-    updateBaseConfigCosts({
-      timeConsumption,
-      vmMultiplier,
-      minAutoscaler: newValue,
-      machineTypeFactor,
-    });
+    setMinAutoScaler(newValue);
   }
 
   return (
@@ -43,14 +26,14 @@ export default function MinAutoscalerInputField() {
         info="minimum number of available Virtual Machines"
       />
       <StepInput
-        value={value}
+        value={minAutoScaler}
         onChange={handleChange}
         min={min}
         max={max}
         step={step}
       />
       <Slider
-        value={value}
+        value={minAutoScaler}
         onInput={handleChange}
         min={min}
         max={max}

diff --git a/src/components/CostWizard/UserInputs/baseConfig/VMsizeSelect.tsx b/src/components/CostWizard/UserInputs/baseConfig/VMsizeSelect.tsx
@@ -2,40 +2,19 @@ import React from 'react';
 import config from '../../../../config.json';
 import { Option, Select, Title } from '@ui5/webcomponents-react';
 import { VMSize, VMsizeState } from '../../../../state/baseConfig/VMsizeState';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { minAutoscalerState } from '../../../../state/baseConfig/minAutoscalerState';
-import { timeConsumptionBaseConfigState } from '../../../../state/baseConfig/timeConsumptionState';
-import {
-  MachineType,
-  machineTypeState,
-} from '../../../../state/baseConfig/machineTypeState';
-import { useCostCalculator } from '../../../../context/CostCalculatorContext';
+import { useSetRecoilState } from 'recoil';
 
 export default function VMsizeSelect() {
-  const minAutoscaler: number = useRecoilValue<number>(minAutoscalerState);
-  const machineTypeFactor =
-    useRecoilValue<MachineType>(machineTypeState).multiple;
-  const timeConsumption: number = useRecoilValue<number>(
-    timeConsumptionBaseConfigState,
-  );
-  const setValue = useSetRecoilState<VMSize>(VMsizeState);
   const baseConfigOptions = config.baseConfig.VirtualMachineSize.Options;
-
-  const { updateBaseConfigCosts } = useCostCalculator();
+  const setVmSize = useSetRecoilState<VMSize>(VMsizeState);
 
   const onChange = (event: any) => {
     const selection = event.detail.selectedOption.dataset;
-    setValue({
+    setVmSize({
       value: selection.value,
       multiple: selection.multiple,
       nodes: parseInt(selection.nodes),
     });
-    updateBaseConfigCosts({
-      timeConsumption,
-      vmMultiplier: selection.multiple,
-      minAutoscaler,
-      machineTypeFactor,
-    });
   };
 
   return (

diff --git a/src/components/CostWizard/UserInputs/storage/GBQuantityInputField.tsx b/src/components/CostWizard/UserInputs/storage/GBQuantityInputField.tsx
@@ -1,37 +1,20 @@
 import React from 'react';
 import config from '../../../../config.json';
-import { useRecoilState, useRecoilValue } from 'recoil';
 import { Slider, StepInput, Title } from '@ui5/webcomponents-react';
+import { useRecoilState } from 'recoil';
 import { GBQuantityState } from '../../../../state/storage/GBQuantityState';
-import { timeConsumptionStorageState } from '../../../../state/storage/timeConsumptionState';
-import { premiumGBQuantityState } from '../../../../state/storage/premiumGBQuantityState';
-import { useCostCalculator } from '../../../../context/CostCalculatorContext';
 
 export default function GBQuantityInputField() {
-  const timeConsumption: number = useRecoilValue<number>(
-    timeConsumptionStorageState,
-  );
-  const [value, setValue] = useRecoilState<number>(GBQuantityState);
-  const premiumGBQuantity: number = useRecoilValue<number>(
-    premiumGBQuantityState,
-  );
-
   const configuration = config.Storage;
   const min = configuration.Min;
   const max = configuration.Max;
   const step = configuration.Step;
 
-  const { updateStorageCosts } = useCostCalculator();
+  const [GBQuantity, setGBQuantity] = useRecoilState<number>(GBQuantityState);
 
   function handleChange(event: any): void {
     const newValue: number = parseInt(event.target.value);
-    setValue(newValue);
-
-    updateStorageCosts({
-      GBQuantity: newValue,
-      premiumGBQuantity,
-      timeConsumption,
-    });
+    setGBQuantity(newValue);
   }
 
   return (
@@ -40,14 +23,14 @@ export default function GBQuantityInputField() {
         Standard Storage: number of GB
       </Title>
       <StepInput
-        value={value}
+        value={GBQuantity}
         onChange={handleChange}
         min={min}
         max={max}
         step={step}
       />
       <Slider
-        value={value}
+        value={GBQuantity}
         onInput={handleChange}
         min={min}
         max={max}

diff --git a/src/components/CostWizard/UserInputs/storage/PremiumGBQuantyInputField.tsx b/src/components/CostWizard/UserInputs/storage/PremiumGBQuantyInputField.tsx
@@ -1,34 +1,22 @@
 import React from 'react';
 import config from '../../../../config.json';
-import { useRecoilState, useRecoilValue } from 'recoil';
 import { Slider, StepInput, Title } from '@ui5/webcomponents-react';
-import { timeConsumptionStorageState } from '../../../../state/storage/timeConsumptionState';
-import { GBQuantityState } from '../../../../state/storage/GBQuantityState';
+import { useRecoilState } from 'recoil';
 import { premiumGBQuantityState } from '../../../../state/storage/premiumGBQuantityState';
-import { useCostCalculator } from '../../../../context/CostCalculatorContext';
-
-export default function TimeConStorageInput() {
-  const timeConsumption: number = useRecoilValue<number>(
-    timeConsumptionStorageState,
-  );
-  const GBQuantity: number = useRecoilValue<number>(GBQuantityState);
-  const [value, setValue] = useRecoilState<number>(premiumGBQuantityState);
 
+export default function PremiumGBQuantityInputField() {
   const configuration = config.PremiumStorage;
   const min = configuration.Min;
   const max = configuration.Max;
   const step = configuration.Step;
 
-  const { updateStorageCosts } = useCostCalculator();
+  const [premiumGBQuantity, setPremiumGBQuantity] = useRecoilState<number>(
+    premiumGBQuantityState,
+  );
 
   function handleChange(event: any): void {
     const newValue: number = parseInt(event.target.value);
-    setValue(newValue);
-    updateStorageCosts({
-      GBQuantity,
-      premiumGBQuantity: newValue,
-      timeConsumption,
-    });
+    setPremiumGBQuantity(newValue);
   }
 
   return (
@@ -37,14 +25,14 @@ export default function TimeConStorageInput() {
         Premium Storage: number of GB
       </Title>
       <StepInput
-        value={value}
+        value={premiumGBQuantity}
         onChange={handleChange}
         min={min}
         max={max}
         step={step}
       />
       <Slider
-        value={value}
+        value={premiumGBQuantity}
         onInput={handleChange}
         min={min}
         max={max}

diff --git a/src/components/CostWizard/WizardSteps/AdditionalConfig.tsx b/src/components/CostWizard/WizardSteps/AdditionalConfig.tsx
@@ -1,12 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Title, WizardStep } from '@ui5/webcomponents-react';
 import InfoField from '../common/InfoField';
 import PreviousStepButton from '../Buttons/PreviousStepButton';
 import XlsxDownloadButton from '../Buttons/XlsxDownloadButton';
 import CSVDownloadButton from '../Buttons/CSVDownloadButton';
 import ApplyConversionRate from '../UserInputs/additionalConfig/applyConversionRate';
+import { useCostCalculator } from '../../../context/CostCalculatorContext';
+import { useRecoilValue } from 'recoil';
+import { applyConversionRateState } from '../../../state/additionalConfig/applyConversionRateState';
 
 export default function NodeStep() {
+  const conversionRatio = useRecoilValue<number>(applyConversionRateState);
+
+  const { setConversionRatio } = useCostCalculator();
+
+  useEffect(() => {
+    setConversionRatio(conversionRatio);
+  }, [setConversionRatio, conversionRatio]);
+
   return (
     <WizardStep disabled titleText="Additional Configuration">
       <Title wrappingType="Normal" level="H2" size="H2">

diff --git a/src/components/CostWizard/WizardSteps/BaseConfigStep.tsx b/src/components/CostWizard/WizardSteps/BaseConfigStep.tsx
@@ -1,12 +1,42 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import VMsizeSelect from '../UserInputs/baseConfig/VMsizeSelect';
 import MinAutoscalerInputField from '../UserInputs/baseConfig/MinAutoscalerInputField';
 import { Title, WizardStep } from '@ui5/webcomponents-react';
 import NextStepButton from '../Buttons/NextStepButton';
 import InfoField from '../common/InfoField';
 import MachineTypeSelect from '../UserInputs/baseConfig/MachineTypeSelect';
+import { VMSize, VMsizeState } from '../../../state/baseConfig/VMsizeState';
+import {
+  MachineType,
+  machineTypeState,
+} from '../../../state/baseConfig/machineTypeState';
+import calculateBaseConfigCosts from '../../../calculatorFunctions/baseConfigCosts/calculateBaseConfigCosts';
+import { useCostCalculator } from '../../../context/CostCalculatorContext';
+import { useRecoilValue } from 'recoil';
+import { minAutoscalerState } from '../../../state/baseConfig/minAutoscalerState';
+import { timeConsumptionBaseConfigState } from '../../../state/baseConfig/timeConsumptionState';
 
 export default function BaseConfigStep() {
+  const minAutoscaler = useRecoilValue<number>(minAutoscalerState);
+  const vmSize = useRecoilValue<VMSize>(VMsizeState);
+  const timeConsumption = useRecoilValue<number>(
+    timeConsumptionBaseConfigState,
+  );
+  const machineType = useRecoilValue<MachineType>(machineTypeState);
+
+  const { setBaseConfigCosts } = useCostCalculator();
+
+  useEffect(() => {
+    const baseConfigCosts = calculateBaseConfigCosts({
+      timeConsumption,
+      vmMultiplier: vmSize.multiple,
+      minAutoscaler,
+      machineTypeFactor: machineType.multiple,
+    });
+
+    setBaseConfigCosts(baseConfigCosts);
+  }, [setBaseConfigCosts, minAutoscaler, vmSize, timeConsumption, machineType]);
+
   return (
     <WizardStep selected titleText="Base Configuration">
       <Title wrappingType="Normal" level="H2" size="H2">

diff --git a/src/components/CostWizard/WizardSteps/StorageStep.tsx b/src/components/CostWizard/WizardSteps/StorageStep.tsx
@@ -1,11 +1,33 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import GBQuantityInputField from '../UserInputs/storage/GBQuantityInputField';
 import { Title, WizardStep } from '@ui5/webcomponents-react';
 import PreviousStepButton from '../Buttons/PreviousStepButton';
 import NextStepButton from '../Buttons/NextStepButton';
 import PremiumGBQuantyInputField from '../UserInputs/storage/PremiumGBQuantyInputField';
+import { useCostCalculator } from '../../../context/CostCalculatorContext';
+import calculateStorageCosts from '../../../calculatorFunctions/storageCosts/calculateStorageCosts';
+import { useRecoilValue } from 'recoil';
+import { GBQuantityState } from '../../../state/storage/GBQuantityState';
+import { premiumGBQuantityState } from '../../../state/storage/premiumGBQuantityState';
+import { timeConsumptionStorageState } from '../../../state/storage/timeConsumptionState';
 
 export default function StorageStep() {
+  const GBQuantity = useRecoilValue<number>(GBQuantityState);
+  const premiumGBQuantity = useRecoilValue<number>(premiumGBQuantityState);
+  const timeConsumption = useRecoilValue<number>(timeConsumptionStorageState);
+
+  const { setStorageCosts } = useCostCalculator();
+
+  useEffect(() => {
+    const storageCosts = calculateStorageCosts({
+      GBQuantity,
+      premiumGBQuantity,
+      timeConsumption,
+    });
+
+    setStorageCosts(storageCosts);
+  }, [setStorageCosts, GBQuantity, premiumGBQuantity, timeConsumption]);
+
   return (
     <WizardStep disabled titleText="Additional Storage">
       <Title wrappingType="Normal" level="H2" size="H2">