mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
sql: numeric inputs: use it's own simple implementation (#74904)
* sql: numeric inputs: use it's own simple implementation * simpler approach * Update connection limit styles (#75226) * lint fixes * replace ConfigSection with ConfigSubSection --------- Co-authored-by: Gareth Dawson <email@garethdawson.xyz> Co-authored-by: Gareth Dawson <gwdawson.work@gmail.com>
This commit is contained in:
Gábor Farkas
GitHub
parent
30584dbd8b
commit
523d1b46d4
@ -1,20 +1,29 @@
|
||||
import React from 'react';
|
||||
|
||||
import { DataSourceSettings } from '@grafana/data';
|
||||
import { ConfigSubSection, Stack } from '@grafana/experimental';
|
||||
import { config } from '@grafana/runtime';
|
||||
import { FieldSet, InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
|
||||
import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
|
||||
import { Field, Icon, InlineLabel, Input, Label, Switch, Tooltip } from '@grafana/ui';
|
||||
|
||||
import { SQLConnectionLimits, SQLOptions } from '../../types';
|
||||
|
||||
interface Props<T> {
|
||||
onOptionsChange: Function;
|
||||
options: DataSourceSettings<SQLOptions>;
|
||||
labelWidth: number;
|
||||
}
|
||||
|
||||
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, labelWidth } = props;
|
||||
const { onOptionsChange, options } = props;
|
||||
const jsonData = options.jsonData;
|
||||
const autoIdle = jsonData.maxIdleConnsAuto !== undefined ? jsonData.maxIdleConnsAuto : false;
|
||||
|
||||
@ -81,67 +90,140 @@ export const ConnectionLimits = <T extends SQLConnectionLimits>(props: Props<T>)
|
||||
});
|
||||
};
|
||||
|
||||
const labelWidth = 40;
|
||||
|
||||
return (
|
||||
<FieldSet label="Connection limits">
|
||||
<InlineField
|
||||
tooltip={
|
||||
<span>
|
||||
The maximum number of open connections to the database.If <i>Max idle connections</i> is greater than 0 and
|
||||
the <i>Max open connections</i> is less than <i>Max idle connections</i>, then
|
||||
<i>Max idle connections</i> will be reduced to match the <i>Max open connections</i> limit. If set to 0,
|
||||
there is no limit on the number of open connections.
|
||||
</span>
|
||||
<ConfigSubSection title="Connection limits">
|
||||
<Field
|
||||
label={
|
||||
<Label>
|
||||
<Stack gap={0.5}>
|
||||
<span>Max open</span>
|
||||
<Tooltip
|
||||
content={
|
||||
<span>
|
||||
The maximum number of open connections to the database. If <i>Max idle connections</i> is greater
|
||||
than 0 and the <i>Max open connections</i> is less than <i>Max idle connections</i>, then
|
||||
<i>Max idle connections</i> will be reduced to match the <i>Max open connections</i> limit. If set
|
||||
to 0, there is no limit on the number of open connections.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Icon name="info-circle" size="sm" />
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Label>
|
||||
}
|
||||
labelWidth={labelWidth}
|
||||
label="Max open"
|
||||
>
|
||||
<NumberInput placeholder="unlimited" value={jsonData.maxOpenConns} onChange={onMaxConnectionsChanged} />
|
||||
</InlineField>
|
||||
<InlineFieldRow>
|
||||
<InlineField
|
||||
tooltip={
|
||||
<span>
|
||||
The maximum number of connections in the idle connection pool.If <i>Max open connections</i> is greater
|
||||
than 0 but less than the <i>Max idle connections</i>, then the <i>Max idle connections</i> will be reduced
|
||||
to match the <i>Max open connections</i> limit. If set to 0, no idle connections are retained.
|
||||
</span>
|
||||
}
|
||||
labelWidth={labelWidth}
|
||||
label="Max idle"
|
||||
>
|
||||
<NumberInput
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="unlimited"
|
||||
defaultValue={jsonData.maxOpenConns}
|
||||
onChange={(e) => {
|
||||
const newVal = toNumber(e.currentTarget.value);
|
||||
if (!Number.isNaN(newVal)) {
|
||||
onMaxConnectionsChanged(newVal);
|
||||
}
|
||||
}}
|
||||
width={labelWidth}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={
|
||||
<Label>
|
||||
<Stack gap={0.5}>
|
||||
<span>Auto Max Idle</span>
|
||||
<Tooltip
|
||||
content={
|
||||
<span>
|
||||
If enabled, automatically set the number of <i>Maximum idle connections</i> to the same value as
|
||||
<i> Max open connections</i>. If the number of maximum open connections is not set it will be set to
|
||||
the default ({config.sqlConnectionLimits.maxIdleConns}).
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Icon name="info-circle" size="sm" />
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Label>
|
||||
}
|
||||
>
|
||||
<Switch value={autoIdle} onChange={onConnectionIdleAutoChanged} />
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={
|
||||
<Label>
|
||||
<Stack gap={0.5}>
|
||||
<span>Max idle</span>
|
||||
<Tooltip
|
||||
content={
|
||||
<span>
|
||||
The maximum number of connections in the idle connection pool.If <i>Max open connections</i> is
|
||||
greater than 0 but less than the <i>Max idle connections</i>, then the <i>Max idle connections</i>{' '}
|
||||
will be reduced to match the <i>Max open connections</i> limit. If set to 0, no idle connections are
|
||||
retained.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Icon name="info-circle" size="sm" />
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Label>
|
||||
}
|
||||
>
|
||||
{autoIdle ? (
|
||||
<InlineLabel width={labelWidth}>{options.jsonData.maxIdleConns}</InlineLabel>
|
||||
) : (
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="2"
|
||||
value={jsonData.maxIdleConns}
|
||||
onChange={onJSONDataNumberChanged('maxIdleConns')}
|
||||
width={8}
|
||||
fieldDisabled={autoIdle}
|
||||
defaultValue={jsonData.maxIdleConns}
|
||||
onChange={(e) => {
|
||||
const newVal = toNumber(e.currentTarget.value);
|
||||
if (!Number.isNaN(newVal)) {
|
||||
onJSONDataNumberChanged('maxIdleConns')(newVal);
|
||||
}
|
||||
}}
|
||||
width={labelWidth}
|
||||
disabled={autoIdle}
|
||||
/>
|
||||
</InlineField>
|
||||
<InlineField
|
||||
label="Auto"
|
||||
labelWidth={8}
|
||||
tooltip={
|
||||
<span>
|
||||
If enabled, automatically set the number of <i>Maximum idle connections</i> to the same value as
|
||||
<i> Max open connections</i>. If the number of maximum open connections is not set it will be set to the
|
||||
default ({config.sqlConnectionLimits.maxIdleConns}).
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<InlineSwitch value={autoIdle} onChange={onConnectionIdleAutoChanged} />
|
||||
</InlineField>
|
||||
</InlineFieldRow>
|
||||
<InlineField
|
||||
tooltip="The maximum amount of time in seconds a connection may be reused. If set to 0, connections are reused forever."
|
||||
labelWidth={labelWidth}
|
||||
label="Max lifetime"
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field
|
||||
label={
|
||||
<Label>
|
||||
<Stack gap={0.5}>
|
||||
<span>Max lifetime</span>
|
||||
<Tooltip
|
||||
content={
|
||||
<span>
|
||||
The maximum amount of time in seconds a connection may be reused. If set to 0, connections are
|
||||
reused forever.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<Icon name="info-circle" size="sm" />
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Label>
|
||||
}
|
||||
>
|
||||
<NumberInput
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="14400"
|
||||
value={jsonData.connMaxLifetime}
|
||||
onChange={onJSONDataNumberChanged('connMaxLifetime')}
|
||||
></NumberInput>
|
||||
</InlineField>
|
||||
</FieldSet>
|
||||
defaultValue={jsonData.connMaxLifetime}
|
||||
onChange={(e) => {
|
||||
const newVal = toNumber(e.currentTarget.value);
|
||||
if (!Number.isNaN(newVal)) {
|
||||
onJSONDataNumberChanged('connMaxLifetime')(newVal);
|
||||
}
|
||||
}}
|
||||
width={labelWidth}
|
||||
/>
|
||||
</Field>
|
||||
</ConfigSubSection>
|
||||
);
|
||||
};
|
||||
|
||||
@ -38,7 +38,6 @@ import {
|
||||
MssqlSecureOptions,
|
||||
} from '../types';
|
||||
|
||||
const SHORT_WIDTH = 15;
|
||||
const LONG_WIDTH = 40;
|
||||
|
||||
export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<MssqlOptions, MssqlSecureOptions>) => {
|
||||
@ -297,7 +296,7 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<Ms
|
||||
isCollapsible={true}
|
||||
isInitiallyOpen={true}
|
||||
>
|
||||
<ConnectionLimits labelWidth={SHORT_WIDTH} options={dsSettings} onOptionsChange={onOptionsChange} />
|
||||
<ConnectionLimits options={dsSettings} onOptionsChange={onOptionsChange} />
|
||||
|
||||
<ConfigSubSection title="Connection details">
|
||||
<Field
|
||||
|
||||
@ -50,7 +50,6 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
|
||||
};
|
||||
};
|
||||
|
||||
const WIDTH_SHORT = 15;
|
||||
const WIDTH_LONG = 40;
|
||||
|
||||
return (
|
||||
@ -228,7 +227,7 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
|
||||
|
||||
<Divider />
|
||||
|
||||
<ConnectionLimits labelWidth={WIDTH_SHORT} options={options} onOptionsChange={onOptionsChange} />
|
||||
<ConnectionLimits options={options} onOptionsChange={onOptionsChange} />
|
||||
|
||||
<Divider />
|
||||
|
||||
|
||||
@ -246,7 +246,7 @@ export const PostgresConfigEditor = (props: DataSourcePluginOptionsEditorProps<P
|
||||
</FieldSet>
|
||||
) : null}
|
||||
|
||||
<ConnectionLimits labelWidth={labelWidthShort} options={options} onOptionsChange={onOptionsChange} />
|
||||
<ConnectionLimits options={options} onOptionsChange={onOptionsChange} />
|
||||
|
||||
<FieldSet label="PostgreSQL details">
|
||||
<InlineField
|
||||
|
||||
Loading…
Reference in New Issue
Block a user