chore: cost config

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.20.3-alpha-9",
+        "@devtron-labs/devtron-fe-common-lib": "1.20.3-pre-10",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

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

@@ -6,11 +6,12 @@ import { ApplicationMonitoringProps } from './types'
 const ApplicationMonitoring = ({
     prometheusConfig,
     prometheusUrl,
-    prometheusToggleEnabled,
-    setPrometheusToggle,
+    isAppMetricsEnabled,
+    toggleAppMetrics,
     handleOnChange,
     onPrometheusAuthTypeChange,
     isGrafanaModuleInstalled,
+    isCostVisibilityEnabled,
 }: ApplicationMonitoringProps) => (
     <div className="flexbox-col flex-grow-1 dc__gap-20 p-20">
         <div className="flexbox-col">
@@ -29,13 +30,18 @@ const ApplicationMonitoring = ({
             <DTSwitch
                 name="toggle-configure-prometheus"
                 ariaLabel="Toggle configure prometheus"
-                isChecked={prometheusToggleEnabled}
-                onChange={setPrometheusToggle}
-                isDisabled={!isGrafanaModuleInstalled}
+                isChecked={isAppMetricsEnabled}
+                onChange={toggleAppMetrics}
+                isDisabled={!isGrafanaModuleInstalled || (isAppMetricsEnabled && isCostVisibilityEnabled)}
+                tooltipContent={
+                    isAppMetricsEnabled && isCostVisibilityEnabled
+                        ? 'To disable application metrics, first disable cost visibility from cluster cost configuration.'
+                        : ''
+                }
             />
         </div>
-        {!prometheusToggleEnabled && prometheusUrl && <PrometheusWarningInfo />}
-        {prometheusToggleEnabled && (
+        {!isAppMetricsEnabled && prometheusUrl && <PrometheusWarningInfo />}
+        {isAppMetricsEnabled && (
             <PromoetheusConfigCard
                 prometheusConfig={prometheusConfig}
                 handleOnChange={handleOnChange}

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