Sql: Fix an issue with connection limits not updating when jsonData is updated (#83175)

This commit is contained in:
Jára Benc 2024-02-28 15:24:34 +01:00 committed by GitHub
parent ed3c36bb46
commit 393b12f49f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 53 additions and 40 deletions

View File

@ -3,25 +3,17 @@ import React from 'react';
import { DataSourceSettings } from '@grafana/data';
import { ConfigSubSection, Stack } from '@grafana/experimental';
import { config } from '@grafana/runtime';
import { Field, Icon, InlineLabel, Input, Label, Switch, Tooltip } from '@grafana/ui';
import { Field, Icon, InlineLabel, Label, Switch, Tooltip } from '@grafana/ui';
import { SQLConnectionLimits, SQLOptions } from '../../types';
import { NumberInput } from './NumberInput';
interface Props<T> {
onOptionsChange: Function;
options: DataSourceSettings<SQLOptions>;
}
function toNumber(text: string): number {
if (text.trim() === '') {
// calling `Number('')` returns zero,
// so we have to handle this case
return NaN;
}
return Number(text);
}
export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>) => {
const { onOptionsChange, options } = props;
const jsonData = options.jsonData;
@ -115,15 +107,11 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
</Label>
}
>
<Input
type="number"
placeholder="unlimited"
defaultValue={jsonData.maxOpenConns}
onChange={(e) => {
const newVal = toNumber(e.currentTarget.value);
if (!Number.isNaN(newVal)) {
onMaxConnectionsChanged(newVal);
}
<NumberInput
value={jsonData.maxOpenConns}
defaultValue={config.sqlConnectionLimits.maxOpenConns}
onChange={(value) => {
onMaxConnectionsChanged(value);
}}
width={labelWidth}
/>
@ -133,7 +121,7 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
label={
<Label>
<Stack gap={0.5}>
<span>Auto Max Idle</span>
<span>Auto max idle</span>
<Tooltip
content={
<span>
@ -176,18 +164,13 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
{autoIdle ? (
<InlineLabel width={labelWidth}>{options.jsonData.maxIdleConns}</InlineLabel>
) : (
<Input
type="number"
placeholder="2"
defaultValue={jsonData.maxIdleConns}
onChange={(e) => {
const newVal = toNumber(e.currentTarget.value);
if (!Number.isNaN(newVal)) {
onJSONDataNumberChanged('maxIdleConns')(newVal);
}
<NumberInput
value={jsonData.maxIdleConns}
defaultValue={config.sqlConnectionLimits.maxIdleConns}
onChange={(value) => {
onJSONDataNumberChanged('maxIdleConns')(value);
}}
width={labelWidth}
disabled={autoIdle}
/>
)}
</Field>
@ -211,15 +194,11 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
</Label>
}
>
<Input
type="number"
placeholder="14400"
defaultValue={jsonData.connMaxLifetime}
onChange={(e) => {
const newVal = toNumber(e.currentTarget.value);
if (!Number.isNaN(newVal)) {
onJSONDataNumberChanged('connMaxLifetime')(newVal);
}
<NumberInput
value={jsonData.connMaxLifetime}
defaultValue={config.sqlConnectionLimits.connMaxLifetime}
onChange={(value) => {
onJSONDataNumberChanged('connMaxLifetime')(value);
}}
width={labelWidth}
/>

View File

@ -0,0 +1,34 @@
import React from 'react';
import { Input } from '@grafana/ui/src/components/Input/Input';
type NumberInputProps = {
value: number;
defaultValue: number;
onChange: (value: number) => void;
width: number;
};
export function NumberInput({ value, defaultValue, onChange, width }: NumberInputProps) {
const [isEmpty, setIsEmpty] = React.useState(false);
return (
<Input
type="number"
placeholder={String(defaultValue)}
value={isEmpty ? '' : value}
onChange={(e) => {
if (e.currentTarget.value?.trim() === '') {
setIsEmpty(true);
onChange(defaultValue);
} else {
setIsEmpty(false);
const newVal = Number(e.currentTarget.value);
if (!Number.isNaN(newVal)) {
onChange(newVal);
}
}
}}
width={width}
/>
);
}