feat: add cost module configuration to ClusterForm, EditClusterDrawerContent, and NavigationRoutes

AbhishekA1509 · AbhishekA1509 · commit d18a61a7cd15 · 2025-09-25T00:13:32.000+05:30
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/ClusterForm.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/ClusterForm.tsx
@@ -15,12 +15,15 @@
  */
 
 import { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
 
 import {
     AuthenticationType,
     Button,
     ButtonStyleType,
     ButtonVariantType,
+    ClusterCostModuleConfigDTO,
+    ClusterDetailListType,
     DEFAULT_SECRET_PLACEHOLDER,
     Icon,
     ModalSidebarPanel,
@@ -32,6 +35,7 @@ import {
     showError,
     ToastManager,
     ToastVariantType,
+    URLS,
     useAsync,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -76,10 +80,29 @@ const ClusterForm = ({
     isTlsConnection: initialIsTlsConnection = false,
     installationId,
     category,
+    clusterProvider,
+    costModuleConfig,
 }: ClusterFormProps) => {
-    const [clusterConfigTab, setClusterConfigTab] = useState<ClusterConfigTabEnum>(ClusterConfigTabEnum.CLUSTER_CONFIG)
+    const location = useLocation()
 
-    const [costModuleEnabled, setCostModuleEnabled] = useState(false)
+    const [clusterConfigTab, setClusterConfigTab] = useState<ClusterConfigTabEnum>(
+        id && location.pathname.includes(URLS.COST_VISIBILITY)
+            ? ClusterConfigTabEnum.COST_VISIBILITY
+            : ClusterConfigTabEnum.CLUSTER_CONFIG,
+    )
+
+    const [costModuleState, setCostModuleState] = useState<
+        Pick<ClusterDetailListType['costModuleConfig'], 'config' | 'enabled'>
+    >({
+        enabled: costModuleConfig?.enabled || false,
+        config: {
+            cloudProviderApiKey: costModuleConfig?.config?.cloudProviderApiKey || '',
+        },
+    })
+
+    const [costModuleErrorState, setCostModuleErrorState] = useState<{ cloudProviderApiKey: string }>({
+        cloudProviderApiKey: '',
+    })
     const [prometheusToggleEnabled, setPrometheusToggleEnabled] = useState(!!prometheusUrl)
     const [prometheusAuthenticationType, setPrometheusAuthenticationType] = useState({
         type: prometheusAuth?.userName ? AuthenticationType.BASIC : AuthenticationType.ANONYMOUS,
@@ -159,6 +182,27 @@ const ClusterForm = ({
         setIsConnectedViaSSHTunnelTemp(false)
     }
 
+    const getCostModulePayload = (): ClusterCostModuleConfigDTO | null => {
+        if (!costModuleState.enabled) {
+            return {
+                enabled: false,
+            }
+        }
+
+        if (clusterProvider === 'GCP' && costModuleState.config.cloudProviderApiKey) {
+            return {
+                enabled: true,
+                config: {
+                    cloudProviderApiKey: costModuleState.config.cloudProviderApiKey,
+                },
+            }
+        }
+
+        return {
+            enabled: true,
+        }
+    }
+
     const getClusterPayload = (state) => ({
         id,
         insecureSkipTlsVerify: !isTlsConnection,
@@ -189,6 +233,7 @@ const ClusterForm = ({
         },
         server_url: '',
         ...(getCategoryPayload ? getCategoryPayload(selectedCategory) : null),
+        ...(clusterProvider ? { costModuleConfig: getCostModulePayload() } : null),
     })
 
     const onValidation = async (state) => {
@@ -199,6 +244,19 @@ const ClusterForm = ({
         } else {
             payload.server_url = urlValue
         }
+
+        if (clusterProvider === 'GCP' && costModuleState.enabled && !costModuleState.config.cloudProviderApiKey) {
+            setCostModuleErrorState((prev) => ({
+                ...prev,
+                cloudProviderApiKey: 'Cloud Provider API Key is required',
+            }))
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: 'Please provide Cloud Provider API Key to enable cost tracking',
+            })
+            return
+        }
+
         if (remoteConnectionMethod === RemoteConnectionType.Proxy) {
             let proxyUrlValue = state.proxyUrl?.value?.trim() ?? ''
             if (proxyUrlValue.endsWith('/')) {
@@ -404,6 +462,27 @@ const ClusterForm = ({
         setClusterConfigTab(tab)
     }
 
+    const toggleCostModule = () => {
+        setCostModuleState((prev) => ({
+            ...prev,
+            enabled: !prev.enabled,
+        }))
+    }
+
+    const handleProviderAPIKeyChange = (apiKey: string) => {
+        setCostModuleState((prev) => ({
+            ...prev,
+            config: {
+                cloudProviderApiKey: apiKey,
+            },
+        }))
+
+        setCostModuleErrorState((prev) => ({
+            ...prev,
+            cloudProviderApiKey: apiKey ? '' : 'Cloud Provider API Key is required',
+        }))
+    }
+
     const renderFooter = () => (
         <div className={`border__primary--top flexbox py-12 px-20 ${id ? 'dc__content-space' : 'dc__content-end'}`}>
             {id && (
@@ -490,8 +569,14 @@ const ClusterForm = ({
                             handleOnChange={handleOnChange}
                             onPrometheusAuthTypeChange={onPrometheusAuthTypeChange}
                             isGrafanaModuleInstalled={isGrafanaModuleInstalled}
-                            costModuleEnabled={costModuleEnabled}
-                            setCostModuleEnabled={setCostModuleEnabled}
+                            costModuleEnabled={costModuleState.enabled}
+                            toggleCostModule={toggleCostModule}
+                            installationStatus={costModuleConfig.installationStatus}
+                            installationError={costModuleConfig.installationError}
+                            clusterProvider={clusterProvider}
+                            handleProviderAPIKeyChange={handleProviderAPIKeyChange}
+                            providerAPIKey={costModuleState.config.cloudProviderApiKey || ''}
+                            providerAPIKeyError={costModuleErrorState.cloudProviderApiKey}
                         />
                     </div>
                 ) : null
@@ -517,7 +602,7 @@ const ClusterForm = ({
                             title="Cluster Configurations"
                             onClick={getTabSwitchHandler(ClusterConfigTabEnum.CLUSTER_CONFIG)}
                         />
-                        <div className="divder__secondary--horizontal" />
+                        <div className="divider__secondary--horizontal" />
                         <div className="flexbox-col">
                             <div className="px-8 py-4 fs-12 fw-6 lh-20 cn-7">INTEGRATIONS</div>
                             <ClusterFormNavButton
@@ -526,11 +611,11 @@ const ClusterForm = ({
                                 subtitle={prometheusToggleEnabled ? 'Enabled' : 'Off'}
                                 onClick={getTabSwitchHandler(ClusterConfigTabEnum.APPLICATION_MONITORING)}
                             />
-                            {ClusterCostConfig && (
+                            {ClusterCostConfig && id && (
                                 <ClusterFormNavButton
                                     isActive={clusterConfigTab === ClusterConfigTabEnum.COST_VISIBILITY}
                                     title="Cost Visibility"
-                                    subtitle={costModuleEnabled ? 'Enabled' : 'Off'}
+                                    subtitle={costModuleState.enabled ? 'Enabled' : 'Off'}
                                     onClick={getTabSwitchHandler(ClusterConfigTabEnum.COST_VISIBILITY)}
                                 />
                             )}
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterList.components.tsx
@@ -348,6 +348,7 @@ export const EditCluster = ({ clusterList, reloadClusterList, handleClose }: Edi
                 installationId={cluster.installationId}
                 category={cluster.category}
                 insecureSkipTlsVerify={cluster.insecureSkipTlsVerify}
+                costModuleConfig={cluster.costModuleConfig}
             />
         )
     }
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/EditClusterDrawerContent.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/EditClusterDrawerContent.tsx
@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import { APIResponseHandler, noop, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    APIResponseHandler,
+    ClusterProviderType,
+    noop,
+    ResponseType,
+    useAsync,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 import { URLS } from '@Config/routes'
@@ -28,6 +34,12 @@ const getSSHConfig: (
 ) => Pick<EditClusterFormProps, 'sshUsername' | 'sshPassword' | 'sshAuthKey' | 'sshServerAddress'> =
     importComponentFromFELibrary('getSSHConfig', noop, 'function')
 
+const getCloudProviderForCluster: (clusterId: number) => Promise<ClusterProviderType> = importComponentFromFELibrary(
+    'getCloudProviderForCluster',
+    null,
+    'function',
+)
+
 const EditClusterDrawerContent = ({
     handleModalClose,
     sshTunnelConfig,
@@ -42,23 +54,44 @@ const EditClusterDrawerContent = ({
     installationId,
     category,
     insecureSkipTlsVerify,
+    costModuleConfig,
 }: EditClusterDrawerContentProps) => {
-    const [isPrometheusAuthLoading, prometheusAuthResult, prometheusAuthError, reloadPrometheusAuth] = useAsync(
-        () => getCluster(+clusterId),
+    const getClusterMetadata = async (): Promise<{
+        prometheusAuthResult: ResponseType
+        clusterProvider: ClusterProviderType
+    }> => {
+        if (!clusterId) {
+            return { prometheusAuthResult: null, clusterProvider: null }
+        }
+
+        const [prometheusAuthResult, clusterProvider] = await Promise.all([
+            getCluster(+clusterId),
+            getCloudProviderForCluster ? getCloudProviderForCluster(+clusterId) : null,
+        ])
+        return { prometheusAuthResult, clusterProvider }
+    }
+
+    const [isMetadataLoading, metadata, metadataError, reloadMetadata] = useAsync(
+        () => getClusterMetadata(),
         [clusterId],
         !!clusterId,
     )
 
+    const { prometheusAuthResult, clusterProvider } = metadata || {
+        prometheusAuthResult: null,
+        cloudProvider: null,
+    }
+
     return (
         <APIResponseHandler
-            isLoading={isPrometheusAuthLoading}
+            isLoading={isMetadataLoading}
             progressingProps={{
                 pageLoader: true,
             }}
-            error={prometheusAuthError?.code}
+            error={metadataError?.code}
             errorScreenManagerProps={{
                 redirectURL: URLS.GLOBAL_CONFIG_CLUSTER,
-                reload: reloadPrometheusAuth,
+                reload: reloadMetadata,
             }}
         >
             <ClusterForm
@@ -76,6 +109,8 @@ const EditClusterDrawerContent = ({
                 isTlsConnection={!insecureSkipTlsVerify}
                 installationId={installationId}
                 category={category}
+                clusterProvider={clusterProvider}
+                costModuleConfig={costModuleConfig}
             />
         </APIResponseHandler>
     )
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.type.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/cluster.type.ts
@@ -20,6 +20,7 @@ import { RouteComponentProps } from 'react-router-dom'
 import {
     ClusterDetailListType,
     ClusterEnvironmentCategoryType,
+    ClusterProviderType,
     EnvListMinDTO,
     FiltersTypeEnum,
     OptionType,
@@ -176,6 +177,26 @@ export interface ClusterTerminalParamsType {
 
 export const RemoteConnectionTypeCluster = 'cluster'
 
+export interface EditClusterDrawerContentProps
+    extends Pick<
+        ClusterDetailListType,
+        | 'sshTunnelConfig'
+        | 'insecureSkipTlsVerify'
+        | 'category'
+        | 'isProd'
+        | 'installationId'
+        | 'toConnectWithSSHTunnel'
+        | 'proxyUrl'
+        | 'prometheusUrl'
+        | 'serverUrl'
+        | 'clusterName'
+        | 'clusterId'
+        | 'costModuleConfig'
+    > {
+    reload: () => void
+    handleModalClose: () => void
+}
+
 export type EditClusterFormProps = {
     id: number
     isProd?: boolean
@@ -190,7 +211,8 @@ export type EditClusterFormProps = {
     sshServerAddress: string
     isConnectedViaSSHTunnel: boolean
     isTlsConnection: boolean
-}
+    clusterProvider: ClusterProviderType
+} & Pick<EditClusterDrawerContentProps, 'costModuleConfig'>
 
 export type ClusterFormProps = { reload: () => void; handleModalClose: () => void } & Pick<
     ClusterMetadataTypes,
@@ -234,25 +256,6 @@ export interface UserNameDropDownListProps {
     onChangeUserName: (selectedOption: any, clusterDetail: DataListType) => void
 }
 
-export interface EditClusterDrawerContentProps
-    extends Pick<
-        ClusterDetailListType,
-        | 'sshTunnelConfig'
-        | 'insecureSkipTlsVerify'
-        | 'category'
-        | 'isProd'
-        | 'installationId'
-        | 'toConnectWithSSHTunnel'
-        | 'proxyUrl'
-        | 'prometheusUrl'
-        | 'serverUrl'
-        | 'clusterName'
-        | 'clusterId'
-    > {
-    reload: () => void
-    handleModalClose: () => void
-}
-
 export interface EnvironmentDTO {
     id: number
     environment_name: string
diff --git a/src/components/common/navigation/NavigationRoutes.tsx b/src/components/common/navigation/NavigationRoutes.tsx
@@ -526,6 +526,7 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
             installationId={clusterDetails.installationId}
             category={clusterDetails.category}
             insecureSkipTlsVerify={clusterDetails.insecureSkipTlsVerify}
+            costModuleConfig={clusterDetails.costModuleConfig}
         />
     )
 

Original file line number	Diff line number	Diff line change
`@@ -348,6 +348,7 @@ export const EditCluster = ({ clusterList, reloadClusterList, handleClose }: Edi`
`348`	`348`	`installationId={cluster.installationId}`
`349`	`349`	`category={cluster.category}`
`350`	`350`	`insecureSkipTlsVerify={cluster.insecureSkipTlsVerify}`
	`351`	`+ costModuleConfig={cluster.costModuleConfig}`
`351`	`352`	`/>`
`352`	`353`	`)`
`353`	`354`	`}`
Original file line number	Diff line number	Diff line change
`@@ -526,6 +526,7 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType`
`526`	`526`	`installationId={clusterDetails.installationId}`
`527`	`527`	`category={clusterDetails.category}`
`528`	`528`	`insecureSkipTlsVerify={clusterDetails.insecureSkipTlsVerify}`
	`529`	`+ costModuleConfig={clusterDetails.costModuleConfig}`
`529`	`530`	`/>`
`530`	`531`	`)`
`531`	`532`