@devtron-labs/devtron-fe-common-lib 0.0.58-beta-5 → 0.0.58-beta-7

package/dist/Pages/GlobalConfigurations/BuildInfra/constants.d.ts

@@ -19,8 +19,7 @@ export declare const BUILD_INFRA_TEXT: {
         NEGATIVE_REQUEST: string;
         NEGATIVE_LIMIT: string;
         REQUEST_LESS_THAN_LIMIT: string;
-        REQUEST_TOO_BIG: string;
-        LIMIT_TOO_BIG: string;
+        CAN_NOT_COMPUTE: string;
         REQUEST_DECIMAL_PLACES: string;
         LIMIT_DECIMAL_PLACES: string;
     };

package/dist/Pages/GlobalConfigurations/BuildInfra/types.d.ts

@@ -246,6 +246,7 @@ export interface CreateBuildInfraServiceConfigurationType {
     id?: number;
 }
 export interface CreateBuildInfraServicePayloadType {
+    id: number;
     name: string;
     description: string;
     type: BuildInfraProfileVariants;

package/dist/index.js

@@ -28905,8 +28905,7 @@ var BUILD_INFRA_TEXT = {
         NEGATIVE_REQUEST: 'Request should be a positive number.',
         NEGATIVE_LIMIT: 'Limit should be a positive number.',
         REQUEST_LESS_THAN_LIMIT: 'Request should be less than or equal to limit.',
-        REQUEST_TOO_BIG: 'Request is too big to compute.',
-        LIMIT_TOO_BIG: 'Limit is too big to compute.',
+        CAN_NOT_COMPUTE: 'Request and limit value diff are too high to validate.',
         REQUEST_DECIMAL_PLACES: 'Request should be upto 2 decimal places.',
         LIMIT_DECIMAL_PLACES: 'Limit should be upto 2 decimal places.',
     },
@@ -29126,6 +29125,7 @@ var getBuildInfraProfilePayload = function (profileInput) {
     }, []);
     var payload = {
         name: profileInput.name,
+        id: profileInput.id,
         description: profileInput.description,
         type: profileInput.type,
         configurations: configurations,
@@ -29280,7 +29280,7 @@ var validateRequiredPositiveNumber = function (value) {
             message: 'This field should be a valid positive number',
         };
     }
-    if (Number(value) < 0) {
+    if (Number(value) <= 0) {
         return {
             isValid: false,
             message: 'Only positive numbers are allowed',
@@ -29329,22 +29329,6 @@ var validateRequestLimit = function (_a) {
     if (!isRequestValidNumber || !isLimitValidNumber) {
         return requestLimitValidationResponse;
     }
-    var isSafeRequestNumber = requestNumber * requestUnit < Number.MAX_SAFE_INTEGER;
-    var isSafeLimitNumber = limitNumber * limitUnit < Number.MAX_SAFE_INTEGER;
-    if (!isSafeRequestNumber) {
-        requestLimitValidationResponse.request = {
-            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_TOO_BIG,
-            isValid: false,
-        };
-        return requestLimitValidationResponse;
-    }
-    if (!isSafeLimitNumber) {
-        requestLimitValidationResponse.limit = {
-            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.LIMIT_TOO_BIG,
-            isValid: false,
-        };
-        return requestLimitValidationResponse;
-    }
     // only two decimal places are allowed
     var requestDecimalPlaces = (_c = (_b = String(request.value).split('.')[1]) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
     var limitDecimalPlaces = (_e = (_d = String(limit.value).split('.')[1]) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0;
@@ -29362,11 +29346,22 @@ var validateRequestLimit = function (_a) {
         };
         return requestLimitValidationResponse;
     }
-    if (requestNumber * requestUnit > limitNumber * limitUnit) {
+    var limitRequestUnitFactor = limitUnit / requestUnit;
+    var limitRequestFactor = limitNumber / requestNumber;
+    var isProductSafe = limitRequestUnitFactor * limitRequestFactor <= Number.MAX_SAFE_INTEGER;
+    if (!isProductSafe) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.CAN_NOT_COMPUTE,
+            isValid: false,
+        };
+        return requestLimitValidationResponse;
+    }
+    if (limitRequestUnitFactor * limitRequestFactor < 1) {
         requestLimitValidationResponse.request = {
             message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_LESS_THAN_LIMIT,
             isValid: false,
         };
+        return requestLimitValidationResponse;
     }
     return requestLimitValidationResponse;
 };
@@ -29589,7 +29584,7 @@ var getOptionBackgroundColor = function (isFocused, isSelected) {
 };
 var unitSelectorStyles = function () {
     return getCommonSelectStyle({
-        control: function (base, state) { return (__assign(__assign({}, base), { borderRadius: 0, backgroundColor: 'var(--N0)', border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)', alignItems: 'center', cursor: 'pointer', borderTopRightRadius: '4px', borderBottomRightRadius: '4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', outline: 'none', boxShadow: 'none', '&:hover': {
+        control: function (base, state) { return (__assign(__assign({}, base), { borderRadius: 0, backgroundColor: 'var(--N0)', border: state.isFocused ? '1px solid var(--B500) !important' : '1px solid var(--N200)', alignItems: 'center', cursor: 'pointer', borderTopRightRadius: '4px', borderBottomRightRadius: '4px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', outline: 'none', boxShadow: 'none', '&:hover': {
                 border: '1px solid var(--N400)',
             } })); },
         indicatorContainer: function (base) { return (__assign(__assign({}, base), { padding: '0px' })); },
@@ -29604,7 +29599,6 @@ var unitSelectorStyles = function () {
  * In case need arise for variants break this CustomInput and Select as a separate component
  */
 var BuildInfraFormAction = function (_a) {
-    var _b, _c;
     var actionType = _a.actionType, label = _a.label, placeholder = _a.placeholder, error = _a.error, isRequired = _a.isRequired, profileUnitsMap = _a.profileUnitsMap, handleProfileInputChange = _a.handleProfileInputChange, currentUnitName = _a.currentUnitName, currentValue = _a.currentValue;
     var handleUnitChange = function (selectedUnit) {
         var data = {
@@ -29620,11 +29614,16 @@ var BuildInfraFormAction = function (_a) {
         };
         handleProfileInputChange({ action: actionType, data: data });
     };
-    var unitOptions = (_c = (_b = Object.values(profileUnitsMap)) === null || _b === void 0 ? void 0 : _b.map(function (unit) { return ({
-        label: unit.name,
-        value: unit.name,
-    }); })) !== null && _c !== void 0 ? _c : [];
-    var currentUnit = unitOptions.find(function (unit) { return unit.value === currentUnitName; });
+    // would also sort the units in order of conversionFactor
+    var _b = React.useMemo(function () {
+        var _a, _b;
+        var units = (_b = (_a = Object.values(profileUnitsMap)) === null || _a === void 0 ? void 0 : _a.map(function (unit) { return ({
+            label: unit.name,
+            value: String(unit.conversionFactor),
+        }); })) !== null && _b !== void 0 ? _b : [];
+        var _currentUnit = units.find(function (unit) { return unit.label === currentUnitName; });
+        return { unitOptions: units.sort(function (a, b) { return Number(a.value) - Number(b.value); }), currentUnit: _currentUnit };
+    }, [profileUnitsMap]), unitOptions = _b.unitOptions, currentUnit = _b.currentUnit;
     return (jsxRuntime.jsxs("div", __assign({ className: "flexbox-col dc__gap-4 dc__mxw-420 w-100 dc__align-start" }, { children: [jsxRuntime.jsx("label", __assign({ htmlFor: "".concat(actionType, "-input"), className: "fs-13 fw-4 lh-20 cn-7 ".concat(isRequired ? 'dc__required-field' : '') }, { children: label })), jsxRuntime.jsxs("div", __assign({ className: "w-100 flexbox dc__align-items-center" }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex-grow-1" }, { children: jsxRuntime.jsx("input", { "data-testid": actionType, name: actionType, type: "number", step: BUILD_INFRA_INPUT_CONSTRAINTS.STEP, min: BUILD_INFRA_INPUT_CONSTRAINTS.MIN, className: "form__input dc__no-right-border dc__no-right-radius", placeholder: placeholder, value: currentValue, onChange: handleInputChange, required: isRequired, autoComplete: "off", id: "".concat(actionType, "-input") }) })), profileUnitsMap && (jsxRuntime.jsx(ReactSelect, { name: "".concat(actionType, "-unit"), className: "bcn-0 dc__mxw-120", options: unitOptions, value: currentUnit, onChange: handleUnitChange, isSearchable: false, components: {
                             IndicatorSeparator: null,
                             ClearIndicator: null,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.0.58-beta-5",
+    "version": "0.0.58-beta-7",
     "description": "Supporting common component library",
     "main": "dist/index.js",
     "scripts": {

package/src/Pages/GlobalConfigurations/BuildInfra/BuildInfraFormAction.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, FunctionComponent } from 'react'
+import { FormEvent, FunctionComponent, useMemo } from 'react'
 import ReactSelect from 'react-select'
 import { BuildInfraFormActionProps } from './types'
 import { OptionType } from '../../../Common'
@@ -36,12 +36,17 @@ const BuildInfraFormAction: FunctionComponent<BuildInfraFormActionProps> = ({
         handleProfileInputChange({ action: actionType, data })
     }
 
-    const unitOptions: OptionType[] =
-        Object.values(profileUnitsMap)?.map((unit) => ({
-            label: unit.name,
-            value: unit.name,
-        })) ?? []
-    const currentUnit = unitOptions.find((unit) => unit.value === currentUnitName)
+    // would also sort the units in order of conversionFactor
+    const { unitOptions, currentUnit } = useMemo(() => {
+        const units =
+            Object.values(profileUnitsMap)?.map((unit) => ({
+                label: unit.name,
+                value: String(unit.conversionFactor),
+            })) ?? []
+
+        const _currentUnit = units.find((unit) => unit.label === currentUnitName)
+        return { unitOptions: units.sort((a, b) => Number(a.value) - Number(b.value)), currentUnit: _currentUnit }
+    }, [profileUnitsMap])
 
     return (
         <div className="flexbox-col dc__gap-4 dc__mxw-420 w-100 dc__align-start">

package/src/Pages/GlobalConfigurations/BuildInfra/constants.tsx

@@ -33,8 +33,7 @@ export const BUILD_INFRA_TEXT = {
         NEGATIVE_REQUEST: 'Request should be a positive number.',
         NEGATIVE_LIMIT: 'Limit should be a positive number.',
         REQUEST_LESS_THAN_LIMIT: 'Request should be less than or equal to limit.',
-        REQUEST_TOO_BIG: 'Request is too big to compute.',
-        LIMIT_TOO_BIG: 'Limit is too big to compute.',
+        CAN_NOT_COMPUTE: 'Request and limit value diff are too high to validate.',
         REQUEST_DECIMAL_PLACES: 'Request should be upto 2 decimal places.',
         LIMIT_DECIMAL_PLACES: 'Limit should be upto 2 decimal places.',
     },

package/src/Pages/GlobalConfigurations/BuildInfra/services.tsx

@@ -143,6 +143,7 @@ const getBuildInfraProfilePayload = (
 
     const payload: CreateBuildInfraServicePayloadType = {
         name: profileInput.name,
+        id: profileInput.id,
         description: profileInput.description,
         type: profileInput.type,
         configurations,

package/src/Pages/GlobalConfigurations/BuildInfra/types.tsx

@@ -292,6 +292,7 @@ export interface CreateBuildInfraServiceConfigurationType {
 }
 
 export interface CreateBuildInfraServicePayloadType {
+    id: number
     name: string
     description: string
     type: BuildInfraProfileVariants

package/src/Pages/GlobalConfigurations/BuildInfra/utils.tsx

@@ -74,53 +74,48 @@ export const validateRequestLimit = ({
         return requestLimitValidationResponse
     }
 
-    const isSafeRequestNumber = requestNumber * requestUnit < Number.MAX_SAFE_INTEGER
-    const isSafeLimitNumber = limitNumber * limitUnit < Number.MAX_SAFE_INTEGER
+    // only two decimal places are allowed
+    const requestDecimalPlaces = String(request.value).split('.')[1]?.length ?? 0
+    const limitDecimalPlaces = String(limit.value).split('.')[1]?.length ?? 0
 
-    if (!isSafeRequestNumber) {
+    if (requestDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
         requestLimitValidationResponse.request = {
-            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_TOO_BIG,
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_DECIMAL_PLACES,
             isValid: false,
         }
 
         return requestLimitValidationResponse
     }
-
-    if (!isSafeLimitNumber) {
+    if (limitDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
         requestLimitValidationResponse.limit = {
-            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.LIMIT_TOO_BIG,
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.LIMIT_DECIMAL_PLACES,
             isValid: false,
         }
 
         return requestLimitValidationResponse
     }
 
-    // only two decimal places are allowed
-    const requestDecimalPlaces = String(request.value).split('.')[1]?.length ?? 0
-    const limitDecimalPlaces = String(limit.value).split('.')[1]?.length ?? 0
+    const limitRequestUnitFactor = limitUnit / requestUnit
+    const limitRequestFactor = limitNumber / requestNumber
 
-    if (requestDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
-        requestLimitValidationResponse.request = {
-            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_DECIMAL_PLACES,
-            isValid: false,
-        }
+    const isProductSafe = limitRequestUnitFactor * limitRequestFactor <= Number.MAX_SAFE_INTEGER
 
-        return requestLimitValidationResponse
-    }
-    if (limitDecimalPlaces > BUILD_INFRA_INPUT_CONSTRAINTS.DECIMAL_PLACES) {
-        requestLimitValidationResponse.limit = {
-            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.LIMIT_DECIMAL_PLACES,
+    if (!isProductSafe) {
+        requestLimitValidationResponse.request = {
+            message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.CAN_NOT_COMPUTE,
             isValid: false,
         }
 
         return requestLimitValidationResponse
     }
 
-    if (requestNumber * requestUnit > limitNumber * limitUnit) {
+    if (limitRequestUnitFactor * limitRequestFactor < 1) {
         requestLimitValidationResponse.request = {
             message: BUILD_INFRA_TEXT.VALIDATE_REQUEST_LIMIT.REQUEST_LESS_THAN_LIMIT,
             isValid: false,
         }
+
+        return requestLimitValidationResponse
     }
 
     return requestLimitValidationResponse
@@ -208,6 +203,7 @@ export const useBuildInfraForm = ({
                     },
                     unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.CPU_LIMIT],
                 })
+
                 currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = limit.message
                 currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = request.message
                 break
@@ -229,6 +225,7 @@ export const useBuildInfraForm = ({
                     },
                     unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.CPU_LIMIT],
                 })
+
                 currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = limit.message
                 currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = request.message
                 break
@@ -251,6 +248,7 @@ export const useBuildInfraForm = ({
                     },
                     unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.MEMORY_LIMIT],
                 })
+
                 currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = limit.message
                 currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = request.message
                 break
@@ -273,6 +271,7 @@ export const useBuildInfraForm = ({
                     },
                     unitsMap: profileResponse.configurationUnits[BuildInfraConfigTypes.MEMORY_LIMIT],
                 })
+
                 currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = limit.message
                 currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = request.message
                 break
@@ -320,6 +319,7 @@ export const useBuildInfraForm = ({
                     unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].unit,
                     active: true,
                 }
+
                 currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = null
                 currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = null
                 break
@@ -331,6 +331,7 @@ export const useBuildInfraForm = ({
                     unit: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].unit,
                     active: true,
                 }
+
                 currentInputErrors[BuildInfraConfigTypes.BUILD_TIMEOUT] = null
                 break
 
@@ -342,6 +343,7 @@ export const useBuildInfraForm = ({
                     unit: lastSavedConfiguration[BuildInfraConfigTypes.BUILD_TIMEOUT].defaultValue.unit,
                     active: false,
                 }
+
                 currentInputErrors[BuildInfraConfigTypes.BUILD_TIMEOUT] = null
                 break
 
@@ -358,6 +360,7 @@ export const useBuildInfraForm = ({
                     unit: lastSavedConfiguration[BuildInfraConfigTypes.CPU_REQUEST].defaultValue.unit,
                     active: false,
                 }
+
                 currentInputErrors[BuildInfraConfigTypes.CPU_LIMIT] = null
                 currentInputErrors[BuildInfraConfigTypes.CPU_REQUEST] = null
                 break
@@ -375,6 +378,7 @@ export const useBuildInfraForm = ({
                     unit: lastSavedConfiguration[BuildInfraConfigTypes.MEMORY_REQUEST].defaultValue.unit,
                     active: false,
                 }
+
                 currentInputErrors[BuildInfraConfigTypes.MEMORY_LIMIT] = null
                 currentInputErrors[BuildInfraConfigTypes.MEMORY_REQUEST] = null
                 break
@@ -440,7 +444,7 @@ export const unitSelectorStyles = () =>
             ...base,
             borderRadius: 0,
             backgroundColor: 'var(--N0)',
-            border: state.isFocused ? '1px solid var(--B500)' : '1px solid var(--N200)',
+            border: state.isFocused ? '1px solid var(--B500) !important' : '1px solid var(--N200)',
             alignItems: 'center',
             cursor: 'pointer',
             borderTopRightRadius: '4px',

package/src/Shared/validations.tsx

@@ -59,7 +59,7 @@ export const validateRequiredPositiveNumber = (value: string | Number): Validati
         }
     }
 
-    if (Number(value) < 0) {
+    if (Number(value) <= 0) {
         return {
             isValid: false,
             message: 'Only positive numbers are allowed',