@grafana/data#onUpdateDatasourceJsonDataOptionSelect TypeScript Examples
The following examples show how to use
@grafana/data#onUpdateDatasourceJsonDataOptionSelect.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ConfigEditor.tsx From grafana-chinese with Apache License 2.0 | 5 votes |
|
render() {
const { options, onOptionsChange } = this.props;
const { showMetricTankHelp } = this.state;
const currentVersion =
graphiteVersions.find(item => item.value === options.jsonData.graphiteVersion) ?? graphiteVersions[2];
return (
<>
<DataSourceHttpSettings
defaultUrl="http://localhost:8080"
dataSourceConfig={options}
onChange={onOptionsChange}
/>
<h3 className="page-heading">Graphite details</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel tooltip="This option controls what functions are available in the Graphite query editor.">
Version
</FormLabel>
<Select
value={currentVersion}
options={graphiteVersions}
width={8}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteVersion')}
/>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel>Type</FormLabel>
<Select
options={graphiteTypes}
value={graphiteTypes.find(type => type.value === options.jsonData.graphiteType)}
width={8}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteType')}
/>
<div className={styles.helpbtn}>
<Button
variant="secondary"
size="sm"
onClick={() =>
this.setState((prevState: State) => ({ showMetricTankHelp: !prevState.showMetricTankHelp }))
}
>
Help <i className={showMetricTankHelp ? 'fa fa-caret-down' : 'fa fa-caret-right'} />
</Button>
</div>
</div>
</div>
{showMetricTankHelp && (
<div className="grafana-info-box m-t-2">
<div className="alert-body">
<p>
There are different types of Graphite compatible backends. Here you can specify the type you are
using. If you are using{' '}
<a href="https://github.com/grafana/metrictank" className="pointer" target="_blank">
Metrictank
</a>{' '}
then select that here. This will enable Metrictank specific features like query processing meta data.
Metrictank is a multi-tenant timeseries engine for Graphite and friends.
</p>
</div>
</div>
)}
</div>
</>
);
}
Example #2
| Source File: ConfigEditor.tsx From grafana-chinese with Apache License 2.0 | 4 votes |
|
render() {
const { regions } = this.state;
const { options } = this.props;
const secureJsonData = (options.secureJsonData || {}) as CloudWatchSecureJsonData;
return (
<>
<h3 className="page-heading">CloudWatch Details</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-14">Auth Provider</FormLabel>
<Select
className="width-30"
value={authProviderOptions.find(authProvider => authProvider.value === options.jsonData.authType)}
options={authProviderOptions}
defaultValue={options.jsonData.authType}
onChange={option => {
if (options.jsonData.authType === 'arn' && option.value !== 'arn') {
delete this.props.options.jsonData.assumeRoleArn;
}
onUpdateDatasourceJsonDataOptionSelect(this.props, 'authType')(option);
}}
/>
</div>
</div>
{options.jsonData.authType === 'credentials' && (
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel
className="width-14"
tooltip="Credentials profile name, as specified in ~/.aws/credentials, leave blank for default."
>
Credentials Profile Name
</FormLabel>
<div className="width-30">
<Input
className="width-30"
placeholder="default"
value={options.jsonData.database}
onChange={onUpdateDatasourceOption(this.props, 'database')}
/>
</div>
</div>
</div>
)}
{options.jsonData.authType === 'keys' && (
<div>
{options.secureJsonFields.accessKey ? (
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-14">Access Key ID</FormLabel>
<Input className="width-25" placeholder="Configured" disabled={true} />
</div>
<div className="gf-form">
<div className="max-width-30 gf-form-inline">
<Button
variant="secondary"
type="button"
onClick={onUpdateDatasourceResetOption(this.props, 'accessKey')}
>
Reset
</Button>
</div>
</div>
</div>
) : (
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-14">Access Key ID</FormLabel>
<div className="width-30">
<Input
className="width-30"
value={secureJsonData.accessKey || ''}
onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'accessKey')}
/>
</div>
</div>
</div>
)}
{options.secureJsonFields.secretKey ? (
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-14">Secret Access Key</FormLabel>
<Input className="width-25" placeholder="Configured" disabled={true} />
</div>
<div className="gf-form">
<div className="max-width-30 gf-form-inline">
<Button
variant="secondary"
type="button"
onClick={onUpdateDatasourceResetOption(this.props, 'secretKey')}
>
Reset
</Button>
</div>
</div>
</div>
) : (
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-14">Secret Access Key</FormLabel>
<div className="width-30">
<Input
className="width-30"
value={secureJsonData.secretKey || ''}
onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'secretKey')}
/>
</div>
</div>
</div>
)}
</div>
)}
{options.jsonData.authType === 'arn' && (
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-14" tooltip="ARN of Assume Role">
Assume Role ARN
</FormLabel>
<div className="width-30">
<Input
className="width-30"
placeholder="arn:aws:iam:*"
value={options.jsonData.assumeRoleArn || ''}
onChange={onUpdateDatasourceJsonDataOption(this.props, 'assumeRoleArn')}
/>
</div>
</div>
</div>
)}
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel
className="width-14"
tooltip="Specify the region, such as for US West (Oregon) use ` us-west-2 ` as the region."
>
Default Region
</FormLabel>
<Select
className="width-30"
value={regions.find(region => region.value === options.jsonData.defaultRegion)}
options={regions}
defaultValue={options.jsonData.defaultRegion}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'defaultRegion')}
/>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-14" tooltip="Namespaces of Custom Metrics.">
Custom Metrics
</FormLabel>
<Input
className="width-30"
placeholder="Namespace1,Namespace2"
value={options.jsonData.customMetricsNamespaces || ''}
onChange={onUpdateDatasourceJsonDataOption(this.props, 'customMetricsNamespaces')}
/>
</div>
</div>
</div>
</>
);
}
Example #3
| Source File: ConfigEditor.tsx From grafana-chinese with Apache License 2.0 | 4 votes |
|
render() {
const { options, onOptionsChange } = this.props;
const { secureJsonFields } = options;
const secureJsonData = (options.secureJsonData || {}) as InfluxSecureJsonData;
return (
<>
<DataSourceHttpSettings
showAccessOptions={true}
dataSourceConfig={options}
defaultUrl="http://localhost:8086"
onChange={onOptionsChange}
/>
<h3 className="page-heading">InfluxDB Details</h3>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-10">Database</FormLabel>
<div className="width-20">
<Input
className="width-20"
value={options.database || ''}
onChange={onUpdateDatasourceOption(this.props, 'database')}
/>
</div>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel className="width-10">User</FormLabel>
<div className="width-10">
<Input
className="width-20"
value={options.user || ''}
onChange={onUpdateDatasourceOption(this.props, 'user')}
/>
</div>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<SecretFormField
isConfigured={(secureJsonFields && secureJsonFields.password) as boolean}
value={secureJsonData.password || ''}
label="Password"
labelWidth={10}
inputWidth={20}
onReset={this.onResetPassword}
onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'password')}
/>
</div>
</div>
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel
className="width-10"
tooltip="You can use either GET or POST HTTP method to query your InfluxDB database. The POST
method allows you to perform heavy requests (with a lots of WHERE clause) while the GET method
will restrict you and return an error if the query is too large."
>
HTTP Method
</FormLabel>
<Select
className="width-10"
value={httpModes.find(httpMode => httpMode.value === options.jsonData.httpMode)}
options={httpModes}
defaultValue={options.jsonData.httpMode}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'httpMode')}
/>
</div>
</div>
</div>
<div className="gf-form-group">
<div className="grafana-info-box">
<h5>Database Access</h5>
<p>
Setting the database for this datasource does not deny access to other databases. The InfluxDB query
syntax allows switching the database in the query. For example:
<code>SHOW MEASUREMENTS ON _internal</code> or <code>SELECT * FROM "_internal".."database" LIMIT 10</code>
<br />
<br />
To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
</p>
</div>
</div>
<div className="gf-form-group">
<div className="gf-form-inline">
<div className="gf-form">
<FormLabel
className="width-10"
tooltip="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."
>
Min time interval
</FormLabel>
<div className="width-10">
<Input
className="width-10"
placeholder="10s"
value={options.jsonData.timeInterval || ''}
onChange={onUpdateDatasourceJsonDataOption(this.props, 'timeInterval')}
/>
</div>
</div>
</div>
</div>
</>
);
}
