chore: cost config

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

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { ButtonVariantType, ComponentSizeType, Icon, InfoBlock } from '@devtron-labs/devtron-fe-common-lib'
 
 export const ClusterFormNavButton = ({
@@ -8,7 +10,7 @@ export const ClusterFormNavButton = ({
 }: {
     isActive: boolean
     title: string
-    subtitle?: string
+    subtitle?: ReactNode
     onClick: () => void
 }) => (
     <button
@@ -17,7 +19,7 @@ export const ClusterFormNavButton = ({
         onClick={onClick}
     >
         <span className={`fs-13 ${isActive ? 'cb-5 fw-6' : 'cn-9'}`}>{title}</span>
-        {subtitle && <span className="fs-12 cn-7">{subtitle}</span>}
+        {typeof subtitle === 'string' ? <span className="fs-12 cn-7">{subtitle}</span> : subtitle}
     </button>
 )
 

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,
+    ClusterCostModuleConfigPayload,
+    ClusterDetailListType,
     DEFAULT_SECRET_PLACEHOLDER,
     Icon,
     ModalSidebarPanel,
@@ -32,6 +35,8 @@
     showError,
     ToastManager,
     ToastVariantType,
+    Tooltip,
+    URLS,
     useAsync,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -76,10 +81,25 @@
     isTlsConnection: initialIsTlsConnection = false,
     installationId,
     category,
+    clusterProvider,
+    costModuleConfig,
 }: ClusterFormProps) => {
-    const [clusterConfigTab, setClusterConfigTab] = useState<ClusterConfigTabEnum>(ClusterConfigTabEnum.CLUSTER_CONFIG)
+    const location = useLocation()
+
+    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'], 'enabled'> & { config: string }
+    >({
+        enabled: costModuleConfig?.enabled || false,
+        config: costModuleConfig?.config ? JSON.stringify(costModuleConfig.config) : '',
+    })
+    const [costModuleConfigErrorState, setCostModuleErrorState] = useState<string>('')
 
-    const [costModuleEnabled, setCostModuleEnabled] = useState(false)
     const [prometheusToggleEnabled, setPrometheusToggleEnabled] = useState(!!prometheusUrl)
     const [prometheusAuthenticationType, setPrometheusAuthenticationType] = useState({
         type: prometheusAuth?.userName ? AuthenticationType.BASIC : AuthenticationType.ANONYMOUS,
@@ -159,6 +179,49 @@
         setIsConnectedViaSSHTunnelTemp(false)
     }
 
+    const validateCostModuleConfig = (requiredConfig: string = costModuleState.config): string => {
+        try {
+            if (requiredConfig) {
+                JSON.parse(requiredConfig)
+            }
+
+            return ''
+        } catch (e) {
+            return e.message || 'Invalid JSON'
+        }
+    }
+
+    const getParsedConfigValue = (): ClusterCostModuleConfigPayload['config'] => {
+        if (costModuleState.config) {
+            try {
+                const parsedConfig = JSON.parse(costModuleState.config)
+                return parsedConfig
+            } catch {
+                return {}
+            }
+        }
+        return null
+    }
+
+    const getCostModulePayload = (): ClusterCostModuleConfigPayload | null => {
+        if (!costModuleState.enabled) {
+            return {
+                enabled: false,
+            }
+        }
+
+        if (costModuleState.config) {
+            return {
+                enabled: true,
+                config: getParsedConfigValue(),
+            }
+        }
+
+        return {
+            enabled: true,
+        }
+    }
+
     const getClusterPayload = (state) => ({
         id,
         insecureSkipTlsVerify: !isTlsConnection,
@@ -189,6 +252,7 @@
         },
         server_url: '',
         ...(getCategoryPayload ? getCategoryPayload(selectedCategory) : null),
+        ...(clusterProvider ? { costModuleConfig: getCostModulePayload() } : null),
     })
 
     const onValidation = async (state) => {
@@ -199,6 +263,19 @@
         } else {
             payload.server_url = urlValue
         }
+
+        if (costModuleState.enabled) {
+            const costConfigError = validateCostModuleConfig()
+            if (costConfigError) {
+                setCostModuleErrorState(costConfigError)
+                ToastManager.showToast({
+                    variant: ToastVariantType.error,
+                    description: 'Invalid cost visibility configuration',
+                })
+                return
+            }
+        }
+
         if (remoteConnectionMethod === RemoteConnectionType.Proxy) {
             let proxyUrlValue = state.proxyUrl?.value?.trim() ?? ''
             if (proxyUrlValue.endsWith('/')) {
@@ -404,6 +481,23 @@
         setClusterConfigTab(tab)
     }
 
+    const toggleCostModule = () => {
+        setCostModuleState((prev) => ({
+            ...prev,
+            enabled: !prev.enabled,
+        }))
+    }
+
+    const handleCostConfigChange = (newConfig: string) => {
+        setCostModuleState((prev) => ({
+            ...prev,
+            config: newConfig,
+        }))
+
+        const error = validateCostModuleConfig(newConfig)
+        setCostModuleErrorState(error)
+    }
+
     const renderFooter = () => (
         <div className={`border__primary--top flexbox py-12 px-20 ${id ? 'dc__content-space' : 'dc__content-end'}`}>
             {id && (
@@ -490,8 +584,13 @@
                             handleOnChange={handleOnChange}
                             onPrometheusAuthTypeChange={onPrometheusAuthTypeChange}
                             isGrafanaModuleInstalled={isGrafanaModuleInstalled}
-                            costModuleEnabled={costModuleEnabled}
-                            setCostModuleEnabled={setCostModuleEnabled}
+                            costModuleEnabled={costModuleState.enabled}
+                            toggleCostModule={toggleCostModule}
+                            installationStatus={costModuleConfig.installationStatus}
+                            clusterProvider={clusterProvider}
+                            handleCostConfigChange={handleCostConfigChange}
+                            config={costModuleState.config || ''}
+                            configError={costModuleConfigErrorState}
                         />
                     </div>
                 ) : null
@@ -500,6 +599,35 @@
         }
     }
 
+    const getCostNavSubtitle = () => {
+        if (!costModuleState.enabled) {
+            return 'Off'
+        }
+
+        if (costModuleConfig.installationStatus === 'Installing') {
+            return <span className="cy-7 fs-12">Installing...</span>
+        }
+
+        if (costModuleConfig.installationStatus === 'Upgrading') {
+            return <span className="cy-7 fs-12">Upgrading...</span>
+        }
+
+        if (costModuleConfig.installationStatus === 'Failed') {
+            return (
+                <div className="flexbox dc__gap-4 dc__align-items-center">
+                    <Icon name="ic-error" size={14} color="R500" />
+                    <Tooltip content={costModuleConfig.installationError}>
+                        <span className="dc__truncate cr-5 fs-12">
+                            Installation Error: {costModuleConfig.installationError}
+                        </span>
+                    </Tooltip>
+                </div>
+            )
+        }
+
+        return 'Enabled'
+    }
+
     return (
         <>
             <div className="flexbox mh-0 flex-grow-1 dc__overflow-hidden">
@@ -517,7 +645,7 @@
                             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 +654,11 @@
                                 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={getCostNavSubtitle()}
                                     onClick={getTabSwitchHandler(ClusterConfigTabEnum.COST_VISIBILITY)}
                                 />
                             )}

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}
             />
         )
     }

src/Pages/GlobalConfigurations/ClustersAndEnvironments/EditClusterDrawerContent.tsx

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { APIResponseHandler, noop, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import { APIResponseHandler, noop, useQuery } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 import { URLS } from '@Config/routes'
 
 import ClusterForm from './ClusterForm/ClusterForm'
-import { getCluster } from './cluster.service'
-import { EditClusterDrawerContentProps, EditClusterFormProps } from './cluster.type'
+import { getEditClusterDrawerMetadata } from './cluster.service'
+import { EditClusterDrawerContentProps, EditClusterDrawerMetadataType, EditClusterFormProps } from './cluster.type'
 
 const getSSHConfig: (
     ...props
@@ -42,23 +42,35 @@ const EditClusterDrawerContent = ({
     installationId,
     category,
     insecureSkipTlsVerify,
+    costModuleConfig,
 }: EditClusterDrawerContentProps) => {
-    const [isPrometheusAuthLoading, prometheusAuthResult, prometheusAuthError, reloadPrometheusAuth] = useAsync(
-        () => getCluster(+clusterId),
-        [clusterId],
-        !!clusterId,
-    )
+    const {
+        isFetching: isMetadataLoading,
+        data: metadata,
+        error: metadataError,
+        refetch: reloadMetadata,
+    } = useQuery<EditClusterDrawerMetadataType, EditClusterDrawerMetadataType, [string, number], false>({
+        queryKey: ['get-cluster-metadata', clusterId],
+        queryFn: () => getEditClusterDrawerMetadata(clusterId),
+        enabled: !!clusterId,
+    })
+
+    const { prometheusAuthResult, clusterProvider } = metadata || {
+        prometheusAuthResult: null,
+        cloudProvider: null,
+    }
 
     return (
         <APIResponseHandler
-            isLoading={isPrometheusAuthLoading}
+            isLoading={isMetadataLoading}
             progressingProps={{
                 pageLoader: true,
             }}
-            error={prometheusAuthError?.code}
+            error={metadataError}
             errorScreenManagerProps={{
+                code: metadataError?.code,
                 redirectURL: URLS.GLOBAL_CONFIG_CLUSTER,
-                reload: reloadPrometheusAuth,
+                reload: reloadMetadata,
             }}
         >
             <ClusterForm
@@ -76,6 +88,8 @@ const EditClusterDrawerContent = ({
                 isTlsConnection={!insecureSkipTlsVerify}
                 installationId={installationId}
                 category={category}
+                clusterProvider={clusterProvider}
+                costModuleConfig={costModuleConfig}
             />
         </APIResponseHandler>
     )

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

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