apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

MySQL: Update configuration page styling (#74902)

Browse Source 
* config page update

* move SecureSocksProxySettings out of tls/ssl
pull/75019/head
Gareth Dawson 2 years ago committed by GitHub
parent a54846e75c
commit a2e1a7e2f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 151 additions and 126 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 277
      public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx

277
public/app/plugins/datasource/mysql/configuration/ConfigurationEditor.tsx
Unescape View File

@ -7,16 +7,19 @@ import {
updateDatasourcePluginJsonDataOption,
updateDatasourcePluginResetOption,
} from '@grafana/data';
import { ConfigSection, DataSourceDescription, Stack } from '@grafana/experimental';
import {
Alert,
FieldSet,
InlineField,
InlineFieldRow,
InlineSwitch,
Divider,
Field,
Icon,
Input,
Label,
Link,
SecretInput,
SecureSocksProxySettings,
Switch,
Tooltip,
} from '@grafana/ui';
import { config } from 'app/core/config';
import { ConnectionLimits } from 'app/features/plugins/sql/components/configuration/ConnectionLimits';
@ -48,13 +51,20 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
};
const WIDTH_SHORT = 15;
const WIDTH_MEDIUM = 25;
const WIDTH_LONG = 40;
return (
<>
<FieldSet label="MySQL Connection" width={400}>
<InlineField labelWidth={WIDTH_SHORT} label="Host">
<DataSourceDescription
dataSourceName="MySQL"
docsLink="https://grafana.com/docs/grafana/latest/datasources/mysql/"
hasRequiredFields={false}
/>
<Divider />
<ConfigSection title="Connection">
<Field label="Host URL" required>
<Input
width={WIDTH_LONG}
name="host"
@ -62,150 +72,165 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
value={options.url || ''}
placeholder="localhost:3306"
onChange={onDSOptionChanged('url')}
></Input>
</InlineField>
<InlineField labelWidth={WIDTH_SHORT} label="Database">
/>
</Field>
</ConfigSection>
<Divider />
<ConfigSection title="Authentication">
<Field label="Database name">
<Input
width={WIDTH_LONG}
name="database"
value={jsonData.database || ''}
placeholder="database name"
placeholder="Database"
onChange={onUpdateDatasourceJsonDataOption(props, 'database')}
></Input>
</InlineField>
<InlineFieldRow>
<InlineField labelWidth={WIDTH_SHORT} label="User">
<Input
width={WIDTH_SHORT}
value={options.user || ''}
placeholder="user"
onChange={onDSOptionChanged('user')}
></Input>
</InlineField>
<InlineField labelWidth={WIDTH_SHORT - 5} label="Password">
<SecretInput
width={WIDTH_SHORT}
placeholder="Password"
isConfigured={options.secureJsonFields && options.secureJsonFields.password}
onReset={onResetPassword}
onBlur={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
></SecretInput>
</InlineField>
</InlineFieldRow>
<InlineField
tooltip={
<span>
Specify the time zone used in the database session, e.g. <code>Europe/Berlin</code> or
<code>+02:00</code>. This is necessary, if the timezone of the database (or the host of the database) is
set to something other than UTC. The value is set in the session with
<code>SET time_zone=&apos;...&apos;</code>. If you leave this field empty, the timezone is not updated.
You can find more information in the MySQL documentation.
</span>
}
label="Session timezone"
labelWidth={WIDTH_MEDIUM}
>
/>
</Field>
<Field label="Username">
<Input
width={WIDTH_LONG - 5}
value={jsonData.timezone || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'timezone')}
placeholder="(default)"
></Input>
</InlineField>
<InlineFieldRow>
<InlineField
labelWidth={WIDTH_MEDIUM}
tooltip="Enables TLS authentication using client cert configured in secure json data."
htmlFor="tlsAuth"
label="Use TLS Client Auth"
>
<InlineSwitch
id="tlsAuth"
onChange={onSwitchChanged('tlsAuth')}
value={jsonData.tlsAuth || false}
></InlineSwitch>
</InlineField>
<InlineField
labelWidth={WIDTH_MEDIUM}
tooltip="Needed for verifing self-signed TLS Certs."
htmlFor="tlsCaCert"
label="With CA Cert"
>
<InlineSwitch
id="tlsCaCert"
onChange={onSwitchChanged('tlsAuthWithCACert')}
value={jsonData.tlsAuthWithCACert || false}
></InlineSwitch>
</InlineField>
</InlineFieldRow>
<InlineField
labelWidth={WIDTH_MEDIUM}
tooltip="When enabled, skips verification of the MySql server's TLS certificate chain and host name."
htmlFor="skipTLSVerify"
width={WIDTH_LONG}
value={options.user || ''}
placeholder="Username"
onChange={onDSOptionChanged('user')}
/>
</Field>
<Field label="Password">
<SecretInput
width={WIDTH_LONG}
placeholder="Password"
isConfigured={options.secureJsonFields && options.secureJsonFields.password}
onReset={onResetPassword}
onBlur={onUpdateDatasourceSecureJsonDataOption(props, 'password')}
/>
</Field>
<Field
label="Use TLS Client Auth"
description="Enables TLS authentication using client cert configured in secure json data."
>
<Switch onChange={onSwitchChanged('tlsAuth')} value={jsonData.tlsAuth || false} />
</Field>
<Field label="With CA Cert" description="Needed for verifying self-signed TLS Certs.">
<Switch onChange={onSwitchChanged('tlsAuthWithCACert')} value={jsonData.tlsAuthWithCACert || false} />
</Field>
<Field
label="Skip TLS Verification"
description="When enabled, skips verification of the MySQL server's TLS certificate chain and host name."
>
<InlineSwitch
id="skipTLSVerify"
onChange={onSwitchChanged('tlsSkipVerify')}
value={jsonData.tlsSkipVerify || false}
></InlineSwitch>
</InlineField>
<InlineField
labelWidth={WIDTH_MEDIUM}
tooltip={
<span>
Allows using the cleartext client side plugin if required by an account, such as one defined with the PAM
authentication plugin. Sending passwords in clear text may be a security problem in some configurations.
To avoid problems if there is any possibility that the password would be intercepted, clients should
connect to MySQL Server using a method that protects the password. Possibilities include TLS / SSL, IPsec,
or a private network.
</span>
}
htmlFor="allowCleartextPasswords"
<Switch onChange={onSwitchChanged('tlsSkipVerify')} value={jsonData.tlsSkipVerify || false} />
</Field>
<Field
label="Allow Cleartext Passwords"
description="Allows using the cleartext client side plugin if required by an account."
>
<InlineSwitch
id="allowCleartextPasswords"
<Switch
onChange={onSwitchChanged('allowCleartextPasswords')}
value={jsonData.allowCleartextPasswords || false}
></InlineSwitch>
</InlineField>
</FieldSet>
/>
</Field>
</ConfigSection>
{config.secureSocksDSProxyEnabled && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
<>
<Divider />
{config.secureSocksDSProxyEnabled && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)}
</>
)}
{jsonData.tlsAuth || jsonData.tlsAuthWithCACert ? (
<FieldSet label="TLS/SSL Auth Details">
<TLSSecretsConfig
showCACert={jsonData.tlsAuthWithCACert}
showKeyPair={jsonData.tlsAuth}
editorProps={props}
labelWidth={25}
></TLSSecretsConfig>
</FieldSet>
<>
<Divider />
<ConfigSection title="TLS/SSL Auth Details">
{jsonData.tlsAuth || jsonData.tlsAuthWithCACert ? (
<TLSSecretsConfig
showCACert={jsonData.tlsAuthWithCACert}
showKeyPair={jsonData.tlsAuth}
editorProps={props}
labelWidth={25}
/>
) : null}
</ConfigSection>
</>
) : null}
<ConnectionLimits labelWidth={WIDTH_SHORT} options={options} onOptionsChange={onOptionsChange} />
<Divider />
<ConfigSection title="Additional settings">
<Field
label={
<Label>
<Stack gap={0.5}>
<span>Session timezone</span>
<Tooltip
content={
<span>
Specify the time zone used in the database session, e.g. <code>Europe/Berlin</code> or
<code>+02:00</code>. This is necessary, if the timezone of the database (or the host of the
database) is set to something other than UTC. The value is set in the session with
<code>SET time_zone=&apos;...&apos;</code>. If you leave this field empty, the timezone is not
updated. You can find more information in the MySQL documentation.
</span>
}
>
<Icon name="info-circle" size="sm" />
</Tooltip>
</Stack>
</Label>
}
>
<Input
width={WIDTH_LONG}
value={jsonData.timezone || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'timezone')}
placeholder="Europe/Berlin or +02:00"
/>
</Field>
<FieldSet label="MySQL details">
<InlineField
tooltip={
<span>
A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example
<code>1m</code> if your data is written every minute.
</span>
<Field
label={
<Label>
<Stack gap={0.5}>
<span>Min time interval</span>
<Tooltip
content={
<span>
A lower limit for the auto group by time interval. Recommended to be set to write frequency, for
example
<code>1m</code> if your data is written every minute.
</span>
}
>
<Icon name="info-circle" size="sm" />
</Tooltip>
</Stack>
</Label>
}
labelWidth={WIDTH_MEDIUM}
label="Min time interval"
description="A lower limit for the auto group by time interval. Recommended to be set to write frequency, for example 1m if your data is written every minute."
>
<Input
width={WIDTH_LONG}
placeholder="1m"
value={jsonData.timeInterval || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'timeInterval')}
></Input>
</InlineField>
</FieldSet>
/>
</Field>
</ConfigSection>
<Divider />
<ConnectionLimits labelWidth={WIDTH_SHORT} options={options} onOptionsChange={onOptionsChange} />
<Divider />
<Alert title="User Permission" severity="info">
The database user should only be granted SELECT permissions on the specified database &amp; tables you want to

Write Preview
Loading…
Cancel
Save