feat: enhance cost module integration by adding costModuleSchema and updating related components

Author: AbhishekA1509

src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/ClusterForm.tsx

@@ -24,13 +24,15 @@ import {
     ButtonVariantType,
     ClusterCostModuleConfigPayload,
     ClusterDetailListType,
+    ClusterProviderType,
     DEFAULT_SECRET_PLACEHOLDER,
     Icon,
     ModalSidebarPanel,
     ModuleNameMap,
     ModuleStatus,
     noop,
     RemoteConnectionType,
+    SCHEMA_07_VALIDATOR,
     SelectPickerOptionType,
     showError,
     ToastManager,
@@ -83,6 +85,7 @@ const ClusterForm = ({
     category,
     clusterProvider,
     costModuleConfig,
+    costModuleSchema,
 }: ClusterFormProps) => {
     const location = useLocation()
 
@@ -93,12 +96,17 @@ const ClusterForm = ({
     )
 
     const [costModuleState, setCostModuleState] = useState<
-        Pick<ClusterDetailListType['costModuleConfig'], 'enabled'> & { config: string }
+        Pick<ClusterDetailListType['costModuleConfig'], 'enabled'> & {
+            config: ClusterDetailListType['costModuleConfig']['config'] & { provider: ClusterProviderType }
+        }
     >({
         enabled: costModuleConfig?.enabled || false,
-        config: costModuleConfig?.config ? JSON.stringify(costModuleConfig.config) : '',
+        config: {
+            ...costModuleConfig?.config,
+            // Adding provider here to make the form work, it won't be sent to backend
+            provider: clusterProvider,
+        },
     })
-    const [costModuleConfigErrorState, setCostModuleErrorState] = useState<string>('')
 
     const [isAppMetricsEnabled, setIsAppMetricsEnabled] = useState(!!prometheusUrl)
     const [prometheusAuthenticationType, setPrometheusAuthenticationType] = useState({
@@ -181,28 +189,20 @@ const ClusterForm = ({
         setIsConnectedViaSSHTunnelTemp(false)
     }
 
-    const validateCostModuleConfig = (requiredConfig: string = costModuleState.config): string => {
-        try {
-            if (requiredConfig) {
-                JSON.parse(requiredConfig)
-            }
-
-            return ''
-        } catch (e) {
-            return e.message || 'Invalid JSON'
+    const validateCostModuleConfig = (): boolean => {
+        if (!costModuleSchema || !costModuleState.enabled) {
+            return true
         }
-    }
 
-    const getParsedConfigValue = (): ClusterCostModuleConfigPayload['config'] => {
-        if (costModuleState.config) {
-            try {
-                const parsedConfig = JSON.parse(costModuleState.config)
-                return parsedConfig
-            } catch {
-                return {}
-            }
+        try {
+            const validationResult = SCHEMA_07_VALIDATOR.validateFormData(
+                { ...costModuleState.config },
+                costModuleSchema,
+            )
+            return !validationResult?.errors?.length
+        } catch {
+            return true
         }
-        return null
     }
 
     const getCostModulePayload = (): ClusterCostModuleConfigPayload | null => {
@@ -213,9 +213,12 @@ const ClusterForm = ({
         }
 
         if (costModuleState.config) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { provider, ...sanitizedConfig } = costModuleState.config
+
             return {
                 enabled: true,
-                config: getParsedConfigValue(),
+                config: sanitizedConfig,
             }
         }
 
@@ -250,18 +253,14 @@ const ClusterForm = ({
         },
         server_url: '',
         ...(getCategoryPayload ? getCategoryPayload(selectedCategory) : null),
-        ...(clusterProvider ? { costModuleConfig: getCostModulePayload() } : null),
+        ...(costModuleSchema ? { costModuleConfig: getCostModulePayload() } : null),
     })
 
     const additionalValidations = (): boolean => {
         let hasError = false
 
-        if (costModuleState.enabled) {
-            const costConfigError = validateCostModuleConfig()
-            if (costConfigError) {
-                setCostModuleErrorState(costConfigError)
-                hasError = true
-            }
+        if (!validateCostModuleConfig()) {
+            hasError = true
         }
 
         return hasError
@@ -512,14 +511,11 @@ const ClusterForm = ({
         }))
     }
 
-    const handleCostConfigChange = (newConfig: string) => {
+    const handleCostConfigChange = (newConfig: typeof costModuleState.config) => {
         setCostModuleState((prev) => ({
             ...prev,
             config: newConfig,
         }))
-
-        const error = validateCostModuleConfig(newConfig)
-        setCostModuleErrorState(error)
     }
 
     const renderFooter = () => (
@@ -612,10 +608,9 @@ const ClusterForm = ({
                             costModuleEnabled={costModuleState.enabled}
                             toggleCostModule={toggleCostModule}
                             installationStatus={costModuleConfig.installationStatus}
-                            clusterProvider={clusterProvider}
                             handleCostConfigChange={handleCostConfigChange}
-                            config={costModuleState.config || ''}
-                            configError={costModuleConfigErrorState}
+                            config={costModuleState.config}
+                            costModuleSchema={costModuleSchema || {}}
                         />
                     </div>
                 ) : null

src/Pages/GlobalConfigurations/ClustersAndEnvironments/EditClusterDrawerContent.tsx

@@ -55,9 +55,10 @@ const EditClusterDrawerContent = ({
         enabled: !!clusterId,
     })
 
-    const { prometheusAuthResult, clusterProvider } = metadata || {
+    const { prometheusAuthResult, clusterProvider, costModuleSchema } = metadata || {
         prometheusAuthResult: null,
-        cloudProvider: null,
+        clusterProvider: null,
+        costModuleSchema: null,
     }
 
     return (
@@ -89,6 +90,7 @@ const EditClusterDrawerContent = ({
                 installationId={installationId}
                 category={category}
                 clusterProvider={clusterProvider}
+                costModuleSchema={costModuleSchema}
                 costModuleConfig={costModuleConfig}
             />
         </APIResponseHandler>

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.service.ts

@@ -14,18 +14,15 @@
  * limitations under the License.
  */
 
-import { ClusterProviderType, get, post, put, trash } from '@devtron-labs/devtron-fe-common-lib'
+import { ClusterProviderDetailsType, get, post, put, trash } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 import { Routes } from '@Config/constants'
 
 import { DeleteClusterPayload, EditClusterDrawerMetadataType, Environment, EnvironmentDTO } from './cluster.type'
 
-const getCloudProviderForCluster: (clusterId: number) => Promise<ClusterProviderType> = importComponentFromFELibrary(
-    'getCloudProviderForCluster',
-    null,
-    'function',
-)
+const getCloudProviderForCluster: (clusterId: number) => Promise<ClusterProviderDetailsType> =
+    importComponentFromFELibrary('getCloudProviderForCluster', null, 'function')
 
 export const getEnvironmentList = async (): Promise<Environment[]> => {
     const { result } = await get<EnvironmentDTO[]>(Routes.ENVIRONMENT)
@@ -96,12 +93,17 @@ export function deleteEnvironment(request): Promise<any> {
 
 export const getEditClusterDrawerMetadata = async (clusterId: number): Promise<EditClusterDrawerMetadataType> => {
     if (!clusterId) {
-        return { prometheusAuthResult: null, clusterProvider: null }
+        return { prometheusAuthResult: null, clusterProvider: null, costModuleSchema: null }
     }
 
-    const [prometheusAuthResult, clusterProvider] = await Promise.all([
+    const [prometheusAuthResult, clusterProviderDetails] = await Promise.all([
         getCluster(+clusterId),
         getCloudProviderForCluster ? getCloudProviderForCluster(+clusterId) : null,
     ])
-    return { prometheusAuthResult, clusterProvider }
+
+    return {
+        prometheusAuthResult,
+        clusterProvider: clusterProviderDetails.clusterProvider,
+        costModuleSchema: clusterProviderDetails.costModuleSchema,
+    }
 }

src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.type.ts

@@ -25,6 +25,7 @@ import {
     FiltersTypeEnum,
     OptionType,
     ResponseType,
+    RJSFFormSchema,
     SelectPickerOptionType,
     TableProps,
     UseUrlFiltersReturnType,
@@ -213,6 +214,7 @@ export type EditClusterFormProps = {
     isConnectedViaSSHTunnel: boolean
     isTlsConnection: boolean
     clusterProvider: ClusterProviderType
+    costModuleSchema: RJSFFormSchema
 } & Pick<EditClusterDrawerContentProps, 'costModuleConfig'>
 
 export type ClusterFormProps = { reload: () => void; handleModalClose: () => void } & Pick<
@@ -375,4 +377,5 @@ export interface EditDeleteClusterProps {
 export interface EditClusterDrawerMetadataType {
     prometheusAuthResult: ResponseType
     clusterProvider: ClusterProviderType
+    costModuleSchema: RJSFFormSchema
 }