feat: refactor ApplicationMonitoring and ClusterForm to use isAppMetricsEnabled and toggleAppMetrics for better state management

AbhishekA1509 · AbhishekA1509 · commit abac0ad17fb7 · 2025-09-26T15:36:34.000+05:30
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/ApplicationMonitoring.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/ApplicationMonitoring.tsx
@@ -6,8 +6,8 @@ import { ApplicationMonitoringProps } from './types'
 const ApplicationMonitoring = ({
     prometheusConfig,
     prometheusUrl,
-    prometheusToggleEnabled,
-    setPrometheusToggle,
+    isAppMetricsEnabled,
+    toggleAppMetrics,
     handleOnChange,
     onPrometheusAuthTypeChange,
     isGrafanaModuleInstalled,
@@ -29,13 +29,13 @@ const ApplicationMonitoring = ({
             <DTSwitch
                 name="toggle-configure-prometheus"
                 ariaLabel="Toggle configure prometheus"
-                isChecked={prometheusToggleEnabled}
-                onChange={setPrometheusToggle}
+                isChecked={isAppMetricsEnabled}
+                onChange={toggleAppMetrics}
                 isDisabled={!isGrafanaModuleInstalled}
             />
         </div>
-        {!prometheusToggleEnabled && prometheusUrl && <PrometheusWarningInfo />}
-        {prometheusToggleEnabled && (
+        {!isAppMetricsEnabled && prometheusUrl && <PrometheusWarningInfo />}
+        {isAppMetricsEnabled && (
             <PromoetheusConfigCard
                 prometheusConfig={prometheusConfig}
                 handleOnChange={handleOnChange}
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/ClusterForm.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/ClusterForm.tsx
@@ -100,7 +100,7 @@ const ClusterForm = ({
     })
     const [costModuleConfigErrorState, setCostModuleErrorState] = useState<string>('')
 
-    const [prometheusToggleEnabled, setPrometheusToggleEnabled] = useState(!!prometheusUrl)
+    const [isAppMetricsEnabled, setIsAppMetricsEnabled] = useState(!!prometheusUrl)
     const [prometheusAuthenticationType, setPrometheusAuthenticationType] = useState({
         type: prometheusAuth?.userName ? AuthenticationType.BASIC : AuthenticationType.ANONYMOUS,
     })
@@ -111,6 +111,8 @@ const ClusterForm = ({
     const [isConnectedViaProxyTemp, setIsConnectedViaProxyTemp] = useState(!!proxyUrl)
     const [isConnectedViaSSHTunnelTemp, setIsConnectedViaSSHTunnelTemp] = useState(isConnectedViaSSHTunnel)
 
+    const isPrometheusEnabled = costModuleState.enabled || isAppMetricsEnabled
+
     const getRemoteConnectionConfigType = () => {
         if (isConnectedViaProxyTemp) {
             return RemoteConnectionType.Proxy
@@ -236,25 +238,35 @@ const ClusterForm = ({
         isProd: state.isProd.value === 'true',
         active: true,
         remoteConnectionConfig: getRemoteConnectionConfig(state, remoteConnectionMethod, SSHConnectionType),
-        prometheus_url: prometheusToggleEnabled ? state.endpoint.value : '',
+        prometheus_url: isPrometheusEnabled ? state.endpoint.value : '',
         prometheusAuth: {
             userName:
-                prometheusToggleEnabled && state.authType.value === AuthenticationType.BASIC
-                    ? state.userName.value
-                    : '',
+                isPrometheusEnabled && state.authType.value === AuthenticationType.BASIC ? state.userName.value : '',
             password:
-                prometheusToggleEnabled && state.authType.value === AuthenticationType.BASIC
-                    ? state.password.value
-                    : '',
-            tlsClientKey: prometheusToggleEnabled ? state.prometheusTlsClientKey.value : '',
-            tlsClientCert: prometheusToggleEnabled ? state.prometheusTlsClientCert.value : '',
+                isPrometheusEnabled && state.authType.value === AuthenticationType.BASIC ? state.password.value : '',
+            tlsClientKey: isPrometheusEnabled ? state.prometheusTlsClientKey.value : '',
+            tlsClientCert: isPrometheusEnabled ? state.prometheusTlsClientCert.value : '',
             isAnonymous: state.authType.value === AuthenticationType.ANONYMOUS,
         },
         server_url: '',
         ...(getCategoryPayload ? getCategoryPayload(selectedCategory) : null),
         ...(clusterProvider ? { costModuleConfig: getCostModulePayload() } : null),
     })
 
+    const additionalValidations = (): boolean => {
+        let hasError = false
+
+        if (costModuleState.enabled) {
+            const costConfigError = validateCostModuleConfig()
+            if (costConfigError) {
+                setCostModuleErrorState(costConfigError)
+                hasError = true
+            }
+        }
+
+        return hasError
+    }
+
     const onValidation = async (state) => {
         const payload = getClusterPayload(state)
         const urlValue = state.url.value?.trim() ?? ''
@@ -264,16 +276,15 @@ const ClusterForm = ({
             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
-            }
+        const hasAdditionalError = additionalValidations()
+
+        if (hasAdditionalError) {
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: 'Some fields are invalid. Please correct them and try again.',
+            })
+
+            return
         }
 
         if (remoteConnectionMethod === RemoteConnectionType.Proxy) {
@@ -286,7 +297,9 @@ const ClusterForm = ({
             }
         }
 
-        if (state.authType.value === AuthenticationType.BASIC && prometheusToggleEnabled) {
+        // Not adding this block in additionalValidations since there seems to be no state its error
+        // They are both required in useForm so don't know why we have checked it here
+        if (state.authType.value === AuthenticationType.BASIC && isPrometheusEnabled) {
             const isValid = state.userName?.value && state.password?.value
             if (!isValid) {
                 ToastManager.showToast({
@@ -328,7 +341,7 @@ const ClusterForm = ({
         }
     }
 
-    const { state, handleOnChange, handleOnSubmit } = useForm(
+    const { state, handleOnChange, handleOnSubmit, validateAllAndSetErrors } = useForm(
         {
             cluster_name: { value: clusterName, error: '' },
             url: { value: !id ? getServerURLFromLocalStorage(serverUrl) : serverUrl, error: '' },
@@ -368,11 +381,11 @@ const ClusterForm = ({
                 validator: { error: 'Authentication Type is required', regex: /^(?!\s*$).+/ },
             },
             userName: {
-                required: !!(prometheusToggleEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
+                required: !!(isPrometheusEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
                 validator: { error: 'username is required', regex: /^(?!\s*$).+/ },
             },
             password: {
-                required: !!(prometheusToggleEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
+                required: !!(isPrometheusEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
                 validator: { error: 'password is required', regex: /^(?!\s*$).+/ },
             },
             prometheusTlsClientKey: {
@@ -438,15 +451,16 @@ const ClusterForm = ({
                           validator: { error: 'token is required', regex: /[^]+/ },
                       },
             endpoint: {
-                required: !!prometheusToggleEnabled,
+                required: !!isPrometheusEnabled,
                 validator: { error: 'endpoint is required', regex: /^.*$/ },
             },
         },
         onValidation,
+        'Please resolve all the errors before submitting.',
     )
 
-    const setPrometheusToggle = () => {
-        setPrometheusToggleEnabled(!prometheusToggleEnabled)
+    const toggleAppMetrics = () => {
+        setIsAppMetricsEnabled((prev) => !prev)
     }
 
     const onPrometheusAuthTypeChange = (e) => {
@@ -478,6 +492,16 @@ const ClusterForm = ({
     const hideConfirmationModal = () => setConfirmation(false)
 
     const getTabSwitchHandler = (tab: ClusterConfigTabEnum) => () => {
+        // This works since there is no required field in any other tab except Cluster config tab, which on creation is the default tab
+        const hasError = validateAllAndSetErrors() || additionalValidations()
+        if (hasError) {
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: 'Some fields are invalid. Please correct them and try again.',
+            })
+            return
+        }
+
         setClusterConfigTab(tab)
     }
 
@@ -568,8 +592,8 @@ const ClusterForm = ({
                         <ApplicationMonitoring
                             prometheusConfig={prometheusConfig}
                             prometheusUrl={prometheusUrl}
-                            prometheusToggleEnabled={prometheusToggleEnabled}
-                            setPrometheusToggle={setPrometheusToggle}
+                            isAppMetricsEnabled={isAppMetricsEnabled}
+                            toggleAppMetrics={toggleAppMetrics}
                             handleOnChange={handleOnChange}
                             onPrometheusAuthTypeChange={onPrometheusAuthTypeChange}
                             isGrafanaModuleInstalled={isGrafanaModuleInstalled}
@@ -651,7 +675,7 @@ const ClusterForm = ({
                             <ClusterFormNavButton
                                 isActive={clusterConfigTab === ClusterConfigTabEnum.APPLICATION_MONITORING}
                                 title="Application Monitoring"
-                                subtitle={prometheusToggleEnabled ? 'Enabled' : 'Off'}
+                                subtitle={isAppMetricsEnabled ? 'Enabled' : 'Off'}
                                 onClick={getTabSwitchHandler(ClusterConfigTabEnum.APPLICATION_MONITORING)}
                             />
                             {ClusterCostConfig && id && (
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/types.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterForm/types.ts
@@ -35,8 +35,8 @@ export interface KubeConfigEditorProps {
 export interface ApplicationMonitoringProps {
     prometheusConfig: PromoetheusConfig
     prometheusUrl: string
-    prometheusToggleEnabled: boolean
-    setPrometheusToggle: () => void
+    isAppMetricsEnabled: boolean
+    toggleAppMetrics: () => void
     handleOnChange: (event: SyntheticEvent) => void
     onPrometheusAuthTypeChange: (event: SyntheticEvent) => void
     isGrafanaModuleInstalled: boolean
diff --git a/src/components/common/helpers/Helpers.tsx b/src/components/common/helpers/Helpers.tsx
@@ -26,12 +26,11 @@ import {
     ApiResourceGroupType,
     PluginDetailServiceParamsType,
     PipelineBuildStageType,
-    SeverityCount,
     useMainContext,
     SelectPickerOptionType,
     InfoBlock,
-    Badge,
-    SeveritiesDTO,
+    ToastManager,
+    ToastVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
 import { Link } from 'react-router-dom'
@@ -74,7 +73,7 @@ export function validateEmail(email) {
 /**
  * @deprecated use `useForm` from fe-common-lib.
  */
-export function useForm(stateSchema, validationSchema = {}, callback) {
+export function useForm(stateSchema, validationSchema = {}, callback, errorMessageOnSubmit = null) {
     const [state, setState] = useState(stateSchema)
     const [disable, setDisable] = useState(true)
     const [isDirty, setIsDirty] = useState(false)
@@ -163,6 +162,16 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
         [validationSchema],
     )
 
+    const validateAllAndSetErrors = (): boolean => {
+        const newState = Object.keys(validationSchema).reduce((agg, curr) => {
+            agg[curr] = { ...state[curr], error: validateField(curr, state[curr].value) }
+            return agg
+        }, state)
+
+        setState({ ...newState })
+        return validateState(newState)
+    }
+
     const handleOnSubmit = (event) => {
         event.preventDefault()
         const newState = Object.keys(validationSchema).reduce((agg, curr) => {
@@ -172,10 +181,17 @@ export function useForm(stateSchema, validationSchema = {}, callback) {
         if (!validateState(newState)) {
             callback(state)
         } else {
+            if (errorMessageOnSubmit) {
+                ToastManager.showToast({
+                    variant: ToastVariantType.error,
+                    description: errorMessageOnSubmit,
+                })
+            }
+            
             setState({ ...newState })
         }
     }
-    return { state, disable, handleOnChange, handleOnSubmit }
+    return { state, disable, handleOnChange, handleOnSubmit, validateAllAndSetErrors }
 }
 
 /**
