IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

More datasource funcs poc (#21047)

Browse Source 
* remove anon funcs, removed options from state, removed update method, static selects as constants

* cancellable promise

* cancel promise on unmount

* use new datasource funcs for dryer component

* event handler funcs

* updated funcs and moved to utils, updating config editors

* S has no keys. never will never work

* remove report json

* update azure snapshot

* DataSourceSettings keyof

* rename reset funcs
This commit is contained in:
Shavonn Brown 2020-01-10 14:26:33 -05:00 committed by GitHub
parent aada45a4cb
commit a7509d2ca0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 178 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/grafana-data/src/types/datasource.ts
View File

@ -279,64 +279,6 @@ export abstract class DataSourceApi<
interpolateVariablesInQueries?(queries: TQuery[]): TQuery[];
}
export function updateDatasourcePluginOption(props: DataSourcePluginOptionsEditorProps, key: string, val: any) {
let config = props.options;
config = {
...config,
[key]: val,
};
props.onOptionsChange(config);
}
export function updateDatasourcePluginJsonDataOption(
props: DataSourcePluginOptionsEditorProps,
key: string,
val: any,
secure: boolean
) {
let config = props.options;
if (secure) {
config = {
...config,
secureJsonData: {
...config.secureJsonData,
[key]: val,
},
};
} else {
config = {
...config,
jsonData: {
...config.jsonData,
[key]: val,
},
};
}
props.onOptionsChange(config);
}
export function updateDatasourcePluginResetKeyOption(props: DataSourcePluginOptionsEditorProps, key: string) {
let config = props.options;
config = {
...config,
secureJsonData: {
...config.secureJsonData,
[key]: '',
},
secureJsonFields: {
...config.secureJsonFields,
[key]: false,
},
};
props.onOptionsChange(config);
}
export interface MetadataInspectorProps<
DSType extends DataSourceApi<TQuery, TOptions>,
TQuery extends DataQuery = DataQuery,

102
packages/grafana-data/src/utils/datasource.ts Normal file
View File

@ -0,0 +1,102 @@
import { DataSourcePluginOptionsEditorProps, SelectableValue, KeyValue, DataSourceSettings } from '../types';
export const onUpdateDatasourceOption = (props: DataSourcePluginOptionsEditorProps, key: keyof DataSourceSettings) => (
event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>
) => {
updateDatasourcePluginOption(props, key, event.currentTarget.value);
};
export const onUpdateDatasourceJsonDataOption = <J, S, K extends keyof J>(
props: DataSourcePluginOptionsEditorProps<J, S>,
key: K
) => (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
updateDatasourcePluginJsonDataOption(props, key, event.currentTarget.value);
};
export const onUpdateDatasourceSecureJsonDataOption = <J, S extends {} = KeyValue>(
props: DataSourcePluginOptionsEditorProps<J, S>,
key: string
) => (event: React.SyntheticEvent<HTMLInputElement | HTMLSelectElement>) => {
updateDatasourcePluginSecureJsonDataOption(props, key, event.currentTarget.value);
};
export const onUpdateDatasourceJsonDataOptionSelect = <J, S, K extends keyof J>(
props: DataSourcePluginOptionsEditorProps<J, S>,
key: K
) => (selected: SelectableValue) => {
updateDatasourcePluginJsonDataOption(props, key, selected.value);
};
export const onUpdateDatasourceSecureJsonDataOptionSelect = <J, S extends {} = KeyValue>(
props: DataSourcePluginOptionsEditorProps<J, S>,
key: string
) => (selected: SelectableValue) => {
updateDatasourcePluginSecureJsonDataOption(props, key, selected.value);
};
export const onUpdateDatasourceResetOption = (props: DataSourcePluginOptionsEditorProps, key: string) => (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
) => {
updateDatasourcePluginResetOption(props, key);
};
export function updateDatasourcePluginOption(
props: DataSourcePluginOptionsEditorProps,
key: keyof DataSourceSettings,
val: any
) {
const config = props.options;
props.onOptionsChange({
...config,
[key]: val,
});
}
export const updateDatasourcePluginJsonDataOption = <J, S, K extends keyof J>(
props: DataSourcePluginOptionsEditorProps<J, S>,
key: K,
val: any
) => {
const config = props.options;
props.onOptionsChange({
...config,
jsonData: {
...config.jsonData,
[key]: val,
},
});
};
export const updateDatasourcePluginSecureJsonDataOption = <J, S extends {} = KeyValue>(
props: DataSourcePluginOptionsEditorProps<J, S>,
key: string,
val: any
) => {
const config = props.options;
props.onOptionsChange({
...config,
secureJsonData: {
...config.secureJsonData!,
[key]: val,
},
});
};
export function updateDatasourcePluginResetOption(props: DataSourcePluginOptionsEditorProps, key: string) {
const config = props.options;
props.onOptionsChange({
...config,
secureJsonData: {
...config.secureJsonData,
[key]: '',
},
secureJsonFields: {
...config.secureJsonFields,
[key]: false,
},
});
}

1
packages/grafana-data/src/utils/index.ts
View File

@ -1,4 +1,5 @@
export * from './Registry';
export * from './datasource';
export * from './deprecationWarning';
export * from './csv';
export * from './logs';

80
public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx
View File

@ -1,10 +1,12 @@
import React, { PureComponent, ChangeEvent } from 'react';
import React, { PureComponent } from 'react';
import { FormLabel, Select, Input, Button } from '@grafana/ui';
import {
DataSourcePluginOptionsEditorProps,
updateDatasourcePluginJsonDataOption,
updateDatasourcePluginResetKeyOption,
updateDatasourcePluginOption,
onUpdateDatasourceJsonDataOptionSelect,
onUpdateDatasourceOption,
onUpdateDatasourceResetOption,
onUpdateDatasourceJsonDataOption,
onUpdateDatasourceSecureJsonDataOption,
} from '@grafana/data';
import { SelectableValue } from '@grafana/data';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@ -50,14 +52,6 @@ export class ConfigEditor extends PureComponent<Props, State> {
}
}
onUpdateOption = (key: string, val: any, secure: boolean) => {
updateDatasourcePluginJsonDataOption(this.props, key, val, secure);
};
onResetKey = (key: string) => {
updateDatasourcePluginResetKeyOption(this.props, key);
};
async loadRegions() {
await getDatasourceSrv()
.loadDatasource(this.props.options.name)
@ -119,42 +113,6 @@ export class ConfigEditor extends PureComponent<Props, State> {
);
}
onAuthProviderChange = (authType: SelectableValue<string>) => {
this.onUpdateOption('authType', authType.value, false);
};
onRegionChange = (defaultRegion: SelectableValue<string>) => {
this.onUpdateOption('defaultRegion', defaultRegion.value, false);
};
onResetAccessKey = () => {
this.onResetKey('accessKey');
};
onAccessKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
this.onUpdateOption('accessKey', event.target.value, true);
};
onResetSecretKey = () => {
this.onResetKey('secretKey');
};
onSecretKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
this.onUpdateOption('secretKey', event.target.value, true);
};
onCredentialProfileNameChange = (event: ChangeEvent<HTMLInputElement>) => {
updateDatasourcePluginOption(this.props, 'database', event.target.value);
};
onArnAssumeRoleChange = (event: ChangeEvent<HTMLInputElement>) => {
this.onUpdateOption('assumeRoleArn', event.target.value, false);
};
onCustomMetricsNamespacesChange = (event: ChangeEvent<HTMLInputElement>) => {
this.onUpdateOption('customMetricsNamespaces', event.target.value, false);
};
render() {
const { regions } = this.state;
const { options } = this.props;
@ -172,7 +130,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
value={authProviderOptions.find(authProvider => authProvider.value === options.jsonData.authType)}
options={authProviderOptions}
defaultValue={options.jsonData.authType}
onChange={this.onAuthProviderChange}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'authType')}
/>
</div>
</div>
@ -190,7 +148,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
className="width-30"
placeholder="default"
value={options.jsonData.database}
onChange={this.onCredentialProfileNameChange}
onChange={onUpdateDatasourceOption(this.props, 'database')}
/>
</div>
</div>
@ -206,7 +164,11 @@ export class ConfigEditor extends PureComponent<Props, State> {
</div>
<div className="gf-form">
<div className="max-width-30 gf-form-inline">
<Button variant="secondary" type="button" onClick={this.onResetAccessKey}>
<Button
variant="secondary"
type="button"
onClick={onUpdateDatasourceResetOption(this.props, 'accessKey')}
>
Reset
</Button>
</div>
@ -220,7 +182,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
<Input
className="width-30"
value={secureJsonData.accessKey || ''}
onChange={this.onAccessKeyChange}
onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'accessKey')}
/>
</div>
</div>
@ -234,7 +196,11 @@ export class ConfigEditor extends PureComponent<Props, State> {
</div>
<div className="gf-form">
<div className="max-width-30 gf-form-inline">
<Button variant="secondary" type="button" onClick={this.onResetSecretKey}>
<Button
variant="secondary"
type="button"
onClick={onUpdateDatasourceResetOption(this.props, 'secretKey')}
>
Reset
</Button>
</div>
@ -248,7 +214,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
<Input
className="width-30"
value={secureJsonData.secretKey || ''}
onChange={this.onSecretKeyChange}
onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'secretKey')}
/>
</div>
</div>
@ -267,7 +233,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
className="width-30"
placeholder="arn:aws:iam:*"
value={options.jsonData.assumeRoleArn || ''}
onChange={this.onArnAssumeRoleChange}
onChange={onUpdateDatasourceJsonDataOption(this.props, 'assumeRoleArn')}
/>
</div>
</div>
@ -286,7 +252,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
value={regions.find(region => region.value === options.jsonData.defaultRegion)}
options={regions}
defaultValue={options.jsonData.defaultRegion}
onChange={this.onRegionChange}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'defaultRegion')}
/>
</div>
</div>
@ -299,7 +265,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
className="width-30"
placeholder="Namespace1,Namespace2"
value={options.jsonData.customMetricsNamespaces || ''}
onChange={this.onCustomMetricsNamespacesChange}
onChange={onUpdateDatasourceJsonDataOption(this.props, 'customMetricsNamespaces')}
/>
</div>
</div>

1
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx
View File

@ -41,6 +41,7 @@ const setup = (propOverrides?: object) => {
makeSameAs: jest.fn(),
onUpdateOptions: jest.fn(),
onUpdateOption: jest.fn(),
onUpdateSecureOption: jest.fn(),
onResetOptionKey: jest.fn(),
onLoadSubscriptions: jest.fn(),
onLoadWorkspaces: jest.fn(),

15
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx
View File

@ -10,30 +10,31 @@ export interface Props {
workspaces: SelectableValue[];
makeSameAs: () => void;
onUpdateOptions: (options: AzureDataSourceSettings) => void;
onUpdateOption: (key: string, val: any, secure: boolean) => void;
onUpdateOption: (key: string, val: any) => void;
onUpdateSecureOption: (key: string, val: any) => void;
onResetOptionKey: (key: string) => void;
onLoadSubscriptions: (type?: string) => void;
onLoadWorkspaces: (type?: string) => void;
}
export class AnalyticsConfig extends PureComponent<Props> {
onLogAnalyticsTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('logAnalyticsTenantId', event.target.value, false);
this.props.onUpdateOption('logAnalyticsTenantId', event.target.value);
};
onLogAnalyticsClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('logAnalyticsClientId', event.target.value, false);
this.props.onUpdateOption('logAnalyticsClientId', event.target.value);
};
onLogAnalyticsClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('logAnalyticsClientSecret', event.target.value, true);
this.props.onUpdateSecureOption('logAnalyticsClientSecret', event.target.value);
};
onLogAnalyticsSubscriptionSelect = (logAnalyticsSubscription: SelectableValue<string>) => {
this.props.onUpdateOption('logAnalyticsSubscriptionId', logAnalyticsSubscription.value, false);
this.props.onUpdateOption('logAnalyticsSubscriptionId', logAnalyticsSubscription.value);
};
onWorkspaceSelectChange = (logAnalyticsDefaultWorkspace: SelectableValue<string>) => {
this.props.onUpdateOption('logAnalyticsDefaultWorkspace', logAnalyticsDefaultWorkspace.value, false);
this.props.onUpdateOption('logAnalyticsDefaultWorkspace', logAnalyticsDefaultWorkspace.value);
};
onAzureLogAnalyticsSameAsChange = () => {
@ -58,7 +59,7 @@ export class AnalyticsConfig extends PureComponent<Props> {
},
});
} else {
this.props.onUpdateOption('azureLogAnalyticsSameAs', !options.jsonData.azureLogAnalyticsSameAs, false);
this.props.onUpdateOption('azureLogAnalyticsSameAs', !options.jsonData.azureLogAnalyticsSameAs);
}
// init popover to warn secret needs to be re-entered

23
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx
View File

@ -3,8 +3,9 @@ import {
SelectableValue,
DataSourcePluginOptionsEditorProps,
updateDatasourcePluginOption,
updateDatasourcePluginResetKeyOption,
updateDatasourcePluginResetOption,
updateDatasourcePluginJsonDataOption,
updateDatasourcePluginSecureJsonDataOption,
} from '@grafana/data';
import { MonitorConfig } from './MonitorConfig';
import { AnalyticsConfig } from './AnalyticsConfig';
@ -69,12 +70,16 @@ export class ConfigEditor extends PureComponent<Props, State> {
}
};
updateOption = (key: string, val: any, secure: boolean) => {
updateDatasourcePluginJsonDataOption(this.props, key, val, secure);
updateOption = (key: keyof AzureDataSourceJsonData, val: any) => {
updateDatasourcePluginJsonDataOption(this.props, key, val);
};
updateSecureOption = (key: keyof AzureDataSourceSecureJsonData, val: any) => {
updateDatasourcePluginSecureJsonDataOption(this.props, key, val);
};
resetKey = (key: string) => {
updateDatasourcePluginResetKeyOption(this.props, key);
updateDatasourcePluginResetOption(this.props, key);
};
makeSameAs = (updatedClientSecret?: string) => {
@ -211,7 +216,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
if (subscriptions && subscriptions.length > 0) {
this.setState({ subscriptions });
this.updateOption('subscriptionId', this.props.options.jsonData.subscriptionId || subscriptions[0].value, false);
this.updateOption('subscriptionId', this.props.options.jsonData.subscriptionId || subscriptions[0].value);
}
if (this.props.options.jsonData.subscriptionId && this.props.options.jsonData.azureLogAnalyticsSameAs) {
@ -232,8 +237,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
this.updateOption(
'logAnalyticsSubscriptionId',
this.props.options.jsonData.logAnalyticsSubscriptionId || logAnalyticsSubscriptions[0].value,
false
this.props.options.jsonData.logAnalyticsSubscriptionId || logAnalyticsSubscriptions[0].value
);
}
@ -257,8 +261,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
this.updateOption(
'logAnalyticsDefaultWorkspace',
this.props.options.jsonData.logAnalyticsDefaultWorkspace || logAnalyticsWorkspaces[0].value,
false
this.props.options.jsonData.logAnalyticsDefaultWorkspace || logAnalyticsWorkspaces[0].value
);
}
};
@ -278,6 +281,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
makeSameAs={this.makeSameAs}
onLoadSubscriptions={this.onLoadSubscriptions}
onUpdateOption={this.updateOption}
onUpdateSecureOption={this.updateSecureOption}
onResetOptionKey={this.resetKey}
/>
@ -288,6 +292,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
makeSameAs={this.makeSameAs}
onUpdateOptions={this.updateOptions}
onUpdateOption={this.updateOption}
onUpdateSecureOption={this.updateSecureOption}
onResetOptionKey={this.resetKey}
onLoadSubscriptions={this.onLoadSubscriptions}
onLoadWorkspaces={this.getWorkspaces}

13
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MonitorConfig.tsx
View File

@ -14,22 +14,23 @@ export interface Props {
options: AzureDataSourceSettings;
subscriptions: SelectableValue[];
makeSameAs: (updatedClientSecret?: string) => void;
onUpdateOption: (key: string, val: any, secure: boolean) => void;
onUpdateOption: (key: string, val: any) => void;
onUpdateSecureOption: (key: string, val: any) => void;
onResetOptionKey: (key: string) => void;
onLoadSubscriptions: () => void;
}
export class MonitorConfig extends PureComponent<Props> {
onAzureCloudSelect = (cloudName: SelectableValue<string>) => {
this.props.onUpdateOption('cloudName', cloudName.value, false);
this.props.onUpdateOption('cloudName', cloudName.value);
};
onTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('tenantId', event.target.value, false);
this.props.onUpdateOption('tenantId', event.target.value);
};
onClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('clientId', event.target.value, false);
this.props.onUpdateOption('clientId', event.target.value);
};
onClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
@ -38,7 +39,7 @@ export class MonitorConfig extends PureComponent<Props> {
if (options.jsonData.azureLogAnalyticsSameAs && event.target.value) {
makeSameAs(event.target.value);
} else {
this.props.onUpdateOption('clientSecret', event.target.value, true);
this.props.onUpdateSecureOption('clientSecret', event.target.value);
}
};
@ -47,7 +48,7 @@ export class MonitorConfig extends PureComponent<Props> {
};
onSubscriptionSelect = (subscription: SelectableValue<string>) => {
this.props.onUpdateOption('subscriptionId', subscription.value, false);
this.props.onUpdateOption('subscriptionId', subscription.value);
};
render() {

2
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/ConfigEditor.test.tsx.snap
View File

@ -7,6 +7,7 @@ exports[`Render should render component 1`] = `
onLoadSubscriptions={[Function]}
onResetOptionKey={[Function]}
onUpdateOption={[Function]}
onUpdateSecureOption={[Function]}
options={
Object {
"access": "proxy",
@ -44,6 +45,7 @@ exports[`Render should render component 1`] = `
onResetOptionKey={[Function]}
onUpdateOption={[Function]}
onUpdateOptions={[Function]}
onUpdateSecureOption={[Function]}
options={
Object {
"access": "proxy",

62
public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
View File

@ -1,10 +1,12 @@
import React, { PureComponent, ChangeEvent } from 'react';
import React, { PureComponent } from 'react';
import {
DataSourcePluginOptionsEditorProps,
SelectableValue,
updateDatasourcePluginJsonDataOption,
updateDatasourcePluginResetKeyOption,
updateDatasourcePluginOption,
onUpdateDatasourceOption,
updateDatasourcePluginResetOption,
onUpdateDatasourceJsonDataOption,
onUpdateDatasourceJsonDataOptionSelect,
onUpdateDatasourceSecureJsonDataOption,
} from '@grafana/data';
import { DataSourceHttpSettings, FormLabel, Input, SecretFormField, Select } from '@grafana/ui';
import { InfluxOptions, InfluxSecureJsonData } from '../types';
@ -17,40 +19,8 @@ const httpModes = [
export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions>;
export class ConfigEditor extends PureComponent<Props> {
onUpdateOption = (key: string, val: any) => {
updateDatasourcePluginOption(this.props, key, val);
};
onUpdateJsonDataOption = (key: string, val: any, secure: boolean) => {
updateDatasourcePluginJsonDataOption(this.props, key, val, secure);
};
onResetKey = (key: string) => {
updateDatasourcePluginResetKeyOption(this.props, key);
};
onDatabaseChange = (event: ChangeEvent<HTMLInputElement>) => {
this.onUpdateOption('database', event.target.value);
};
onUserChange = (event: ChangeEvent<HTMLInputElement>) => {
this.onUpdateOption('user', event.target.value);
};
onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
this.onUpdateJsonDataOption('password', event.target.value, true);
};
onTimeIntervalChange = (event: ChangeEvent<HTMLInputElement>) => {
this.onUpdateJsonDataOption('timeInterval', event.target.value, false);
};
onResetPassword = () => {
this.onResetKey('password');
};
onHttpModeSelect = (httpMode: SelectableValue) => {
this.onUpdateJsonDataOption('httpMode', httpMode.value, false);
updateDatasourcePluginResetOption(this.props, 'password');
};
render() {
@ -72,7 +42,11 @@ export class ConfigEditor extends PureComponent<Props> {
<div className="gf-form">
<FormLabel className="width-10">Database</FormLabel>
<div className="width-20">
<Input className="width-20" value={options.database || ''} onChange={this.onDatabaseChange} />
<Input
className="width-20"
value={options.database || ''}
onChange={onUpdateDatasourceOption(this.props, 'database')}
/>
</div>
</div>
</div>
@ -80,7 +54,11 @@ export class ConfigEditor extends PureComponent<Props> {
<div className="gf-form">
<FormLabel className="width-10">User</FormLabel>
<div className="width-10">
<Input className="width-20" value={options.user || ''} onChange={this.onUserChange} />
<Input
className="width-20"
value={options.user || ''}
onChange={onUpdateDatasourceOption(this.props, 'user')}
/>
</div>
</div>
</div>
@ -93,7 +71,7 @@ export class ConfigEditor extends PureComponent<Props> {
labelWidth={10}
inputWidth={20}
onReset={this.onResetPassword}
onChange={this.onPasswordChange}
onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'password')}
/>
</div>
</div>
@ -112,7 +90,7 @@ export class ConfigEditor extends PureComponent<Props> {
value={httpModes.find(httpMode => httpMode.value === options.jsonData.httpMode)}
options={httpModes}
defaultValue={options.jsonData.httpMode}
onChange={this.onHttpModeSelect}
onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'httpMode')}
/>
</div>
</div>
@ -145,7 +123,7 @@ export class ConfigEditor extends PureComponent<Props> {
className="width-10"
placeholder="10s"
value={options.jsonData.timeInterval || ''}
onChange={this.onTimeIntervalChange}
onChange={onUpdateDatasourceJsonDataOption(this.props, 'timeInterval')}
/>
</div>
</div>