diff --git a/console/src/components/Common/LabeledInput/index.tsx b/console/src/components/Common/LabeledInput/index.tsx index f87a652f3c0..4ba9306d3b9 100644 --- a/console/src/components/Common/LabeledInput/index.tsx +++ b/console/src/components/Common/LabeledInput/index.tsx @@ -1,11 +1,13 @@ import React, { InputHTMLAttributes } from 'react'; import { IconTooltip } from '@/new-components/Tooltip'; +import { FaExclamationTriangle } from 'react-icons/fa'; interface LabeledInputProps extends InputHTMLAttributes { label: string; boldlabel?: boolean; tooltipText?: string; type?: string; + icon?: boolean; } export const LabeledInput: React.FC = props => ( @@ -17,6 +19,7 @@ export const LabeledInput: React.FC = props => ( > {props?.boldlabel ? {props.label} : props.label} {props.tooltipText && } + {props.icon && } { connectionTypeState, isReadReplica = false, title, + isEditState, } = props; const isDBSupported = (driver: Driver, connectionType: string) => { @@ -385,6 +386,7 @@ const ConnectDatabaseForm = (props: ConnectDatabaseFormProps) => { {/* TODO: remove the edit state condition when the BE issue is solved diff --git a/console/src/components/Services/Data/DataSources/ConnectionSettings/ConnectionSettingsForm.tsx b/console/src/components/Services/Data/DataSources/ConnectionSettings/ConnectionSettingsForm.tsx index 46977c35d28..0b2cca7d179 100644 --- a/console/src/components/Services/Data/DataSources/ConnectionSettings/ConnectionSettingsForm.tsx +++ b/console/src/components/Services/Data/DataSources/ConnectionSettings/ConnectionSettingsForm.tsx @@ -1,3 +1,6 @@ +/* eslint-disable no-underscore-dangle */ +import { useMetadata } from '@/features/MetadataAPI'; +import { isProConsole } from '@/utils/proConsole'; import React, { Dispatch } from 'react'; import { ConnectDBActions, ConnectDBState } from '../state'; import { buildFormSettings } from './buildFormSettings'; @@ -11,15 +14,26 @@ import { PreparedStatements, Retries, SSLCertificates, + CumulativeMaxConnections, } from './parts'; export interface ConnectionSettingsFormProps { connectionDBState: ConnectDBState; connectionDBStateDispatch: Dispatch; + isEditState?: boolean; } const ConnectionSettingsForm: React.FC = props => { - const { connectionDBState } = props; + const { connectionDBState, isEditState } = props; + + const { data: metadata } = useMetadata(); + + const currentDBState = metadata?.metadata?.sources.find( + d => d.name === connectionDBState?.displayName + ); + const isMaxConnectionSet = + currentDBState?.configuration?.connection_info?.pool_settings + ?.max_connections; const formSettings = React.useMemo( () => buildFormSettings(connectionDBState.dbType), @@ -28,12 +42,29 @@ const ConnectionSettingsForm: React.FC = props => { if (!formSettings.connectionSettings) return null; + if (!isEditState) { + return ( + + {!isProConsole(window.__env) && } + {formSettings.cumulativeMaxConnections && ( + + )} + + {formSettings.retries && } + {formSettings.pool_timeout && } + {formSettings.connection_lifetime && } + {formSettings.isolation_level && } + {formSettings.prepared_statements && } + {formSettings.ssl_certificates && } + + ); + } return ( - - {/* {formSettings.cumulativeMaxConnections && ( + {isMaxConnectionSet && } + {formSettings.cumulativeMaxConnections && ( - )} */} + )} {formSettings.retries && } {formSettings.pool_timeout && } diff --git a/console/src/components/Services/Data/DataSources/ConnectionSettings/parts/CumulativeMaxConnections.tsx b/console/src/components/Services/Data/DataSources/ConnectionSettings/parts/CumulativeMaxConnections.tsx index 4acbf6eaa17..f8b2ffc4311 100644 --- a/console/src/components/Services/Data/DataSources/ConnectionSettings/parts/CumulativeMaxConnections.tsx +++ b/console/src/components/Services/Data/DataSources/ConnectionSettings/parts/CumulativeMaxConnections.tsx @@ -1,30 +1,50 @@ +import React from 'react'; import { LabeledInput } from '@/components/Common/LabeledInput'; import { ConnectionSettingsFormProps } from '@/components/Services/Data/DataSources/ConnectionSettings/ConnectionSettingsForm'; -import React from 'react'; +import { IndicatorCard } from '@/new-components/IndicatorCard'; +import { FaExclamationTriangle } from 'react-icons/fa'; import styles from '../../DataSources.module.scss'; export const CumulativeMaxConnections: React.VFC = ({ connectionDBState, connectionDBStateDispatch }) => ( -
- - connectionDBStateDispatch({ - type: 'UPDATE_CUMULATIVE_MAX_CONNECTIONS', - data: e.target.value, - }) - } - min="0" - boldlabel - data-test="max-connections" - /> -
+ <> +
+ + connectionDBStateDispatch({ + type: 'UPDATE_TOTAL_MAX_CONNECTIONS', + data: e.target.value, + }) + } + min="0" + boldlabel + data-test="max-connections" + icon={ + connectionDBState?.connectionSettings?.max_connections !== undefined + } + /> +
+ {connectionDBState?.connectionSettings?.max_connections && ( + +

+ + Set Total Max Connections +

+

+ You have set Max Connections Per Instance which is not + recommended for Hasura Cloud. Use Total Max Connections{' '} + instead. +

+
+ )} + ); diff --git a/console/src/components/Services/Data/DataSources/ConnectionSettings/parts/MaxConnections.tsx b/console/src/components/Services/Data/DataSources/ConnectionSettings/parts/MaxConnections.tsx index 3e9dcbb170a..6a1748b19df 100644 --- a/console/src/components/Services/Data/DataSources/ConnectionSettings/parts/MaxConnections.tsx +++ b/console/src/components/Services/Data/DataSources/ConnectionSettings/parts/MaxConnections.tsx @@ -9,7 +9,7 @@ export const MaxConnections: React.VFC = ({ }) => (
{ draft.connectionSettings = state.connectionSettings ?? {}; - draft.connectionSettings.cumulative_max_connections = - setNumberFromString(action.data); + draft.connectionSettings.total_max_connections = setNumberFromString( + action.data + ); }); case 'UPDATE_RETRIES': return { @@ -670,9 +671,9 @@ export const makeReadReplicaConnectionObject = ( if (stateVal.connectionSettings?.max_connections) { pool_settings.max_connections = stateVal.connectionSettings.max_connections; } - if (stateVal.connectionSettings?.cumulative_max_connections) { - pool_settings.cumulative_max_connections = - stateVal.connectionSettings.cumulative_max_connections; + if (stateVal.connectionSettings?.total_max_connections) { + pool_settings.total_max_connections = + stateVal.connectionSettings.total_max_connections; } if (stateVal.connectionSettings?.idle_timeout) { pool_settings.idle_timeout = stateVal.connectionSettings.idle_timeout; diff --git a/console/src/components/Services/Data/Schema/ManageDatabase.tsx b/console/src/components/Services/Data/Schema/ManageDatabase.tsx index 8f1a5c019a1..fa7db99456d 100644 --- a/console/src/components/Services/Data/Schema/ManageDatabase.tsx +++ b/console/src/components/Services/Data/Schema/ManageDatabase.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ import React, { useState, useEffect } from 'react'; import Helmet from 'react-helmet'; import { connect, ConnectedProps } from 'react-redux'; @@ -9,6 +10,7 @@ import { useIsFeatureFlagEnabled, } from '@/features/FeatureFlags'; import { nativeDrivers } from '@/features/DataSource'; +import { isProConsole } from '@/utils/proConsole'; import styles from './styles.module.scss'; import { Dispatch, ReduxState } from '../../../../types'; import BreadCrumb from '../../../Common/Layout/BreadCrumb/BreadCrumb'; @@ -61,7 +63,6 @@ const DatabaseListItem: React.FC = ({ const [removing, setRemoving] = useState(false); const [showUrl, setShowUrl] = useState(false); const [dbVersion, setDbVersion] = useState(''); - const fetchDBVersion = () => { const query = services[dataSource.driver].getDatabaseVersionSql ?? ''; @@ -103,6 +104,7 @@ const DatabaseListItem: React.FC = ({ dataSource.name, inconsistentObjects ); + return ( @@ -128,29 +130,14 @@ const DatabaseListItem: React.FC = ({ > Reload - - + {isProConsole(window.__env) + ? !dataSource?.connection_pool_settings?.total_max_connections && ( + + + Set Total Max Connections + + ) + : null} @@ -180,7 +167,30 @@ const DatabaseListItem: React.FC = ({ onClick={() => setShowUrl(true)} >