IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 13:39:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

MySql Datasource: Improve Tooltips and Documentation (#64122)

Browse Source 
* Add tooltips to Skip TLS and TLS Auth

* Update docs with provisioning examples
This commit is contained in:
Kyle Cunningham 2023-03-09 19:50:07 +07:00 committed by GitHub
parent 9f551400c3
commit 09f71a6901
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 77 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
docs/sources/datasources/mysql/_index.md
View File

@ -82,7 +82,9 @@ You can use wildcards (`*`) in place of database or table if you want to grant a
You can define and configure the data source in YAML files as part of Grafana's provisioning system.
For more information about provisioning, and for available configuration options, refer to [Provisioning Grafana]({{< relref "../../administration/provisioning/#data-sources" >}}).
#### Provisioning example
#### Provisioning examples
##### Basic Provisioning
```yaml
apiVersion: 1
@ -101,6 +103,51 @@ datasources:
password: ${GRAFANA_MYSQL_PASSWORD}
```
##### Using TLS Verificaiton
```yaml
apiVersion: 1
datasources:
- name: MySQL
type: mysql
url: localhost:3306
user: grafana
jsonData:
tlsAuth: true
database: grafana
maxOpenConns: 0 # Grafana v5.4+
maxIdleConns: 2 # Grafana v5.4+
connMaxLifetime: 14400 # Grafana v5.4+
secureJsonData:
password: ${GRAFANA_MYSQL_PASSWORD}
tlsClientCert: ${GRAFANA_TLS_CLIENT_CERT}
tlsCACert: ${GRAFANA_TLS_CA_CERT}
```
##### Use TLS and Skip Certificate Verification
```yaml
apiVersion: 1
datasources:
- name: MySQL
type: mysql
url: localhost:3306
user: grafana
jsonData:
tlsAuth: true
skipTLSVerify: true
database: grafana
maxOpenConns: 0 # Grafana v5.4+
maxIdleConns: 2 # Grafana v5.4+
connMaxLifetime: 14400 # Grafana v5.4+
secureJsonData:
password: ${GRAFANA_MYSQL_PASSWORD}
tlsClientCert: ${GRAFANA_TLS_CLIENT_CERT}
tlsCACert: ${GRAFANA_TLS_CA_CERT}
```
## Query builder
{{< figure src="/static/img/docs/v92/mysql_query_builder.png" class="docs-image--no-shadow" >}}

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

@ -36,16 +36,16 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
};
};
const mediumWidth = 20;
const shortWidth = 15;
const longWidth = 40;
const WIDTH_SHORT = 15;
const WIDTH_MEDIUM = 22;
const WIDTH_LONG = 40;
return (
<>
<FieldSet label="MySQL Connection" width={400}>
<InlineField labelWidth={shortWidth} label="Host">
<InlineField labelWidth={WIDTH_SHORT} label="Host">
<Input
width={longWidth}
width={WIDTH_LONG}
name="host"
type="text"
value={options.url || ''}
@ -53,9 +53,9 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
onChange={onDSOptionChanged('url')}
></Input>
</InlineField>
<InlineField labelWidth={shortWidth} label="Database">
<InlineField labelWidth={WIDTH_SHORT} label="Database">
<Input
width={longWidth}
width={WIDTH_LONG}
name="database"
value={jsonData.database || ''}
placeholder="database name"
@ -63,17 +63,17 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
></Input>
</InlineField>
<InlineFieldRow>
<InlineField labelWidth={shortWidth} label="User">
<InlineField labelWidth={WIDTH_SHORT} label="User">
<Input
width={shortWidth}
width={WIDTH_SHORT}
value={options.user || ''}
placeholder="user"
onChange={onDSOptionChanged('user')}
></Input>
</InlineField>
<InlineField labelWidth={shortWidth - 5} label="Password">
<InlineField labelWidth={WIDTH_SHORT - 5} label="Password">
<SecretInput
width={shortWidth}
width={WIDTH_SHORT}
placeholder="Password"
isConfigured={options.secureJsonFields && options.secureJsonFields.password}
onReset={onResetPassword}
@ -92,17 +92,22 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
</span>
}
label="Session timezone"
labelWidth={mediumWidth}
labelWidth={WIDTH_MEDIUM}
>
<Input
width={longWidth - 5}
width={WIDTH_LONG - 5}
value={jsonData.timezone || ''}
onChange={onUpdateDatasourceJsonDataOption(props, 'timezone')}
placeholder="(default)"
></Input>
</InlineField>
<InlineFieldRow>
<InlineField labelWidth={mediumWidth} htmlFor="tlsAuth" label="TLS Client Auth">
<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')}
@ -110,8 +115,8 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
></InlineSwitch>
</InlineField>
<InlineField
labelWidth={mediumWidth}
tooltip="Needed for verifing self-signed TLS Certs"
labelWidth={WIDTH_MEDIUM}
tooltip="Needed for verifing self-signed TLS Certs."
htmlFor="tlsCaCert"
label="With CA Cert"
>
@ -122,7 +127,12 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
></InlineSwitch>
</InlineField>
</InlineFieldRow>
<InlineField labelWidth={mediumWidth} htmlFor="skipTLSVerify" label="Skip TLS Verify">
<InlineField
labelWidth={WIDTH_MEDIUM}
tooltip="When enabled, skips verification of the MySql server's TLS certificate chain and host name."
htmlFor="skipTLSVerify"
label="Skip TLS Verification"
>
<InlineSwitch
id="skipTLSVerify"
onChange={onSwitchChanged('tlsSkipVerify')}
@ -143,7 +153,7 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
) : null}
<ConnectionLimits
labelWidth={shortWidth}
labelWidth={WIDTH_SHORT}
jsonData={jsonData}
onPropertyChanged={(property, value) => {
updateDatasourcePluginJsonDataOption(props, property, value);
@ -158,7 +168,7 @@ export const ConfigurationEditor = (props: DataSourcePluginOptionsEditorProps<My
<code>1m</code> if your data is written every minute.
</span>
}
labelWidth={mediumWidth}
labelWidth={WIDTH_MEDIUM}
label="Min time interval"
>
<Input