Skip to content

N
nexpie-grafana-theme
Commit a7509d2c by Shavonn Brown Committed by GitHub
Options

More datasource funcs poc (#21047) 

* 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
parent aada45a4
Showing with 178 additions and 179 deletions
packages/grafana-data/src/types/datasource.ts
...@@ -279,64 +279,6 @@ export abstract class DataSourceApi< ...@@ -279,64 +279,6 @@ export abstract class DataSourceApi<
interpolateVariablesInQueries?(queries: TQuery[]): TQuery[]; 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< export interface MetadataInspectorProps<
DSType extends DataSourceApi<TQuery, TOptions>, DSType extends DataSourceApi<TQuery, TOptions>,
TQuery extends DataQuery = DataQuery, TQuery extends DataQuery = DataQuery,
......
packages/grafana-data/src/utils/datasource.ts 0 → 100644
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,
},
});
}
packages/grafana-data/src/utils/index.ts
export * from './Registry'; export * from './Registry';
export * from './datasource';
export * from './deprecationWarning'; export * from './deprecationWarning';
export * from './csv'; export * from './csv';
export * from './logs'; export * from './logs';
......
public/app/plugins/datasource/cloudwatch/components/ConfigEditor.tsx
import React, { PureComponent, ChangeEvent } from 'react'; import React, { PureComponent } from 'react';
import { FormLabel, Select, Input, Button } from '@grafana/ui'; import { FormLabel, Select, Input, Button } from '@grafana/ui';
import { import {
DataSourcePluginOptionsEditorProps, DataSourcePluginOptionsEditorProps,
updateDatasourcePluginJsonDataOption, onUpdateDatasourceJsonDataOptionSelect,
updateDatasourcePluginResetKeyOption, onUpdateDatasourceOption,
updateDatasourcePluginOption, onUpdateDatasourceResetOption,
onUpdateDatasourceJsonDataOption,
onUpdateDatasourceSecureJsonDataOption,
} from '@grafana/data'; } from '@grafana/data';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
...@@ -50,14 +52,6 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -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() { async loadRegions() {
await getDatasourceSrv() await getDatasourceSrv()
.loadDatasource(this.props.options.name) .loadDatasource(this.props.options.name)
...@@ -119,42 +113,6 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -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() { render() {
const { regions } = this.state; const { regions } = this.state;
const { options } = this.props; const { options } = this.props;
...@@ -172,7 +130,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -172,7 +130,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
value={authProviderOptions.find(authProvider => authProvider.value === options.jsonData.authType)} value={authProviderOptions.find(authProvider => authProvider.value === options.jsonData.authType)}
options={authProviderOptions} options={authProviderOptions}
defaultValue={options.jsonData.authType} defaultValue={options.jsonData.authType}
onChange={this.onAuthProviderChange} onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'authType')}
/> />
</div> </div>
</div> </div>
...@@ -190,7 +148,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -190,7 +148,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
className="width-30" className="width-30"
placeholder="default" placeholder="default"
value={options.jsonData.database} value={options.jsonData.database}
onChange={this.onCredentialProfileNameChange} onChange={onUpdateDatasourceOption(this.props, 'database')}
/> />
</div> </div>
</div> </div>
...@@ -206,7 +164,11 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -206,7 +164,11 @@ export class ConfigEditor extends PureComponent<Props, State> {
</div> </div>
<div className="gf-form"> <div className="gf-form">
<div className="max-width-30 gf-form-inline"> <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 Reset
</Button> </Button>
</div> </div>
...@@ -220,7 +182,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -220,7 +182,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
<Input <Input
className="width-30" className="width-30"
value={secureJsonData.accessKey || ''} value={secureJsonData.accessKey || ''}
onChange={this.onAccessKeyChange} onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'accessKey')}
/> />
</div> </div>
</div> </div>
...@@ -234,7 +196,11 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -234,7 +196,11 @@ export class ConfigEditor extends PureComponent<Props, State> {
</div> </div>
<div className="gf-form"> <div className="gf-form">
<div className="max-width-30 gf-form-inline"> <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 Reset
</Button> </Button>
</div> </div>
...@@ -248,7 +214,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -248,7 +214,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
<Input <Input
className="width-30" className="width-30"
value={secureJsonData.secretKey || ''} value={secureJsonData.secretKey || ''}
onChange={this.onSecretKeyChange} onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'secretKey')}
/> />
</div> </div>
</div> </div>
...@@ -267,7 +233,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -267,7 +233,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
className="width-30" className="width-30"
placeholder="arn:aws:iam:*" placeholder="arn:aws:iam:*"
value={options.jsonData.assumeRoleArn || ''} value={options.jsonData.assumeRoleArn || ''}
onChange={this.onArnAssumeRoleChange} onChange={onUpdateDatasourceJsonDataOption(this.props, 'assumeRoleArn')}
/> />
</div> </div>
</div> </div>
...@@ -286,7 +252,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -286,7 +252,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
value={regions.find(region => region.value === options.jsonData.defaultRegion)} value={regions.find(region => region.value === options.jsonData.defaultRegion)}
options={regions} options={regions}
defaultValue={options.jsonData.defaultRegion} defaultValue={options.jsonData.defaultRegion}
onChange={this.onRegionChange} onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'defaultRegion')}
/> />
</div> </div>
</div> </div>
...@@ -299,7 +265,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -299,7 +265,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
className="width-30" className="width-30"
placeholder="Namespace1,Namespace2" placeholder="Namespace1,Namespace2"
value={options.jsonData.customMetricsNamespaces || ''} value={options.jsonData.customMetricsNamespaces || ''}
onChange={this.onCustomMetricsNamespacesChange} onChange={onUpdateDatasourceJsonDataOption(this.props, 'customMetricsNamespaces')}
/> />
</div> </div>
</div> </div>
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.test.tsx
...@@ -41,6 +41,7 @@ const setup = (propOverrides?: object) => { ...@@ -41,6 +41,7 @@ const setup = (propOverrides?: object) => {
makeSameAs: jest.fn(), makeSameAs: jest.fn(),
onUpdateOptions: jest.fn(), onUpdateOptions: jest.fn(),
onUpdateOption: jest.fn(), onUpdateOption: jest.fn(),
onUpdateSecureOption: jest.fn(),
onResetOptionKey: jest.fn(), onResetOptionKey: jest.fn(),
onLoadSubscriptions: jest.fn(), onLoadSubscriptions: jest.fn(),
onLoadWorkspaces: jest.fn(), onLoadWorkspaces: jest.fn(),
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/AnalyticsConfig.tsx
...@@ -10,30 +10,31 @@ export interface Props { ...@@ -10,30 +10,31 @@ export interface Props {
workspaces: SelectableValue[]; workspaces: SelectableValue[];
makeSameAs: () => void; makeSameAs: () => void;
onUpdateOptions: (options: AzureDataSourceSettings) => 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; onResetOptionKey: (key: string) => void;
onLoadSubscriptions: (type?: string) => void; onLoadSubscriptions: (type?: string) => void;
onLoadWorkspaces: (type?: string) => void; onLoadWorkspaces: (type?: string) => void;
} }
export class AnalyticsConfig extends PureComponent<Props> { export class AnalyticsConfig extends PureComponent<Props> {
onLogAnalyticsTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => { onLogAnalyticsTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('logAnalyticsTenantId', event.target.value, false); this.props.onUpdateOption('logAnalyticsTenantId', event.target.value);
}; };
onLogAnalyticsClientIdChange = (event: ChangeEvent<HTMLInputElement>) => { onLogAnalyticsClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('logAnalyticsClientId', event.target.value, false); this.props.onUpdateOption('logAnalyticsClientId', event.target.value);
}; };
onLogAnalyticsClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => { onLogAnalyticsClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('logAnalyticsClientSecret', event.target.value, true); this.props.onUpdateSecureOption('logAnalyticsClientSecret', event.target.value);
}; };
onLogAnalyticsSubscriptionSelect = (logAnalyticsSubscription: SelectableValue<string>) => { onLogAnalyticsSubscriptionSelect = (logAnalyticsSubscription: SelectableValue<string>) => {
this.props.onUpdateOption('logAnalyticsSubscriptionId', logAnalyticsSubscription.value, false); this.props.onUpdateOption('logAnalyticsSubscriptionId', logAnalyticsSubscription.value);
}; };
onWorkspaceSelectChange = (logAnalyticsDefaultWorkspace: SelectableValue<string>) => { onWorkspaceSelectChange = (logAnalyticsDefaultWorkspace: SelectableValue<string>) => {
this.props.onUpdateOption('logAnalyticsDefaultWorkspace', logAnalyticsDefaultWorkspace.value, false); this.props.onUpdateOption('logAnalyticsDefaultWorkspace', logAnalyticsDefaultWorkspace.value);
}; };
onAzureLogAnalyticsSameAsChange = () => { onAzureLogAnalyticsSameAsChange = () => {
...@@ -58,7 +59,7 @@ export class AnalyticsConfig extends PureComponent<Props> { ...@@ -58,7 +59,7 @@ export class AnalyticsConfig extends PureComponent<Props> {
}, },
}); });
} else { } 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 // init popover to warn secret needs to be re-entered
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ConfigEditor.tsx
...@@ -3,8 +3,9 @@ import { ...@@ -3,8 +3,9 @@ import {
SelectableValue, SelectableValue,
DataSourcePluginOptionsEditorProps, DataSourcePluginOptionsEditorProps,
updateDatasourcePluginOption, updateDatasourcePluginOption,
updateDatasourcePluginResetKeyOption, updateDatasourcePluginResetOption,
updateDatasourcePluginJsonDataOption, updateDatasourcePluginJsonDataOption,
updateDatasourcePluginSecureJsonDataOption,
} from '@grafana/data'; } from '@grafana/data';
import { MonitorConfig } from './MonitorConfig'; import { MonitorConfig } from './MonitorConfig';
import { AnalyticsConfig } from './AnalyticsConfig'; import { AnalyticsConfig } from './AnalyticsConfig';
...@@ -69,12 +70,16 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -69,12 +70,16 @@ export class ConfigEditor extends PureComponent<Props, State> {
} }
}; };
updateOption = (key: string, val: any, secure: boolean) => { updateOption = (key: keyof AzureDataSourceJsonData, val: any) => {
updateDatasourcePluginJsonDataOption(this.props, key, val, secure); updateDatasourcePluginJsonDataOption(this.props, key, val);
};
updateSecureOption = (key: keyof AzureDataSourceSecureJsonData, val: any) => {
updateDatasourcePluginSecureJsonDataOption(this.props, key, val);
}; };
resetKey = (key: string) => { resetKey = (key: string) => {
updateDatasourcePluginResetKeyOption(this.props, key); updateDatasourcePluginResetOption(this.props, key);
}; };
makeSameAs = (updatedClientSecret?: string) => { makeSameAs = (updatedClientSecret?: string) => {
...@@ -211,7 +216,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -211,7 +216,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
if (subscriptions && subscriptions.length > 0) { if (subscriptions && subscriptions.length > 0) {
this.setState({ subscriptions }); 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) { if (this.props.options.jsonData.subscriptionId && this.props.options.jsonData.azureLogAnalyticsSameAs) {
...@@ -232,8 +237,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -232,8 +237,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
this.updateOption( this.updateOption(
'logAnalyticsSubscriptionId', 'logAnalyticsSubscriptionId',
this.props.options.jsonData.logAnalyticsSubscriptionId || logAnalyticsSubscriptions[0].value, this.props.options.jsonData.logAnalyticsSubscriptionId || logAnalyticsSubscriptions[0].value
false
); );
} }
...@@ -257,8 +261,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -257,8 +261,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
this.updateOption( this.updateOption(
'logAnalyticsDefaultWorkspace', 'logAnalyticsDefaultWorkspace',
this.props.options.jsonData.logAnalyticsDefaultWorkspace || logAnalyticsWorkspaces[0].value, this.props.options.jsonData.logAnalyticsDefaultWorkspace || logAnalyticsWorkspaces[0].value
false
); );
} }
}; };
...@@ -278,6 +281,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -278,6 +281,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
makeSameAs={this.makeSameAs} makeSameAs={this.makeSameAs}
onLoadSubscriptions={this.onLoadSubscriptions} onLoadSubscriptions={this.onLoadSubscriptions}
onUpdateOption={this.updateOption} onUpdateOption={this.updateOption}
onUpdateSecureOption={this.updateSecureOption}
onResetOptionKey={this.resetKey} onResetOptionKey={this.resetKey}
/> />
...@@ -288,6 +292,7 @@ export class ConfigEditor extends PureComponent<Props, State> { ...@@ -288,6 +292,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
makeSameAs={this.makeSameAs} makeSameAs={this.makeSameAs}
onUpdateOptions={this.updateOptions} onUpdateOptions={this.updateOptions}
onUpdateOption={this.updateOption} onUpdateOption={this.updateOption}
onUpdateSecureOption={this.updateSecureOption}
onResetOptionKey={this.resetKey} onResetOptionKey={this.resetKey}
onLoadSubscriptions={this.onLoadSubscriptions} onLoadSubscriptions={this.onLoadSubscriptions}
onLoadWorkspaces={this.getWorkspaces} onLoadWorkspaces={this.getWorkspaces}
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MonitorConfig.tsx
...@@ -14,22 +14,23 @@ export interface Props { ...@@ -14,22 +14,23 @@ export interface Props {
options: AzureDataSourceSettings; options: AzureDataSourceSettings;
subscriptions: SelectableValue[]; subscriptions: SelectableValue[];
makeSameAs: (updatedClientSecret?: string) => void; 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; onResetOptionKey: (key: string) => void;
onLoadSubscriptions: () => void; onLoadSubscriptions: () => void;
} }
export class MonitorConfig extends PureComponent<Props> { export class MonitorConfig extends PureComponent<Props> {
onAzureCloudSelect = (cloudName: SelectableValue<string>) => { onAzureCloudSelect = (cloudName: SelectableValue<string>) => {
this.props.onUpdateOption('cloudName', cloudName.value, false); this.props.onUpdateOption('cloudName', cloudName.value);
}; };
onTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => { onTenantIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('tenantId', event.target.value, false); this.props.onUpdateOption('tenantId', event.target.value);
}; };
onClientIdChange = (event: ChangeEvent<HTMLInputElement>) => { onClientIdChange = (event: ChangeEvent<HTMLInputElement>) => {
this.props.onUpdateOption('clientId', event.target.value, false); this.props.onUpdateOption('clientId', event.target.value);
}; };
onClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => { onClientSecretChange = (event: ChangeEvent<HTMLInputElement>) => {
...@@ -38,7 +39,7 @@ export class MonitorConfig extends PureComponent<Props> { ...@@ -38,7 +39,7 @@ export class MonitorConfig extends PureComponent<Props> {
if (options.jsonData.azureLogAnalyticsSameAs && event.target.value) { if (options.jsonData.azureLogAnalyticsSameAs && event.target.value) {
makeSameAs(event.target.value); makeSameAs(event.target.value);
} else { } 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> { ...@@ -47,7 +48,7 @@ export class MonitorConfig extends PureComponent<Props> {
}; };
onSubscriptionSelect = (subscription: SelectableValue<string>) => { onSubscriptionSelect = (subscription: SelectableValue<string>) => {
this.props.onUpdateOption('subscriptionId', subscription.value, false); this.props.onUpdateOption('subscriptionId', subscription.value);
}; };
render() { render() {
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/ConfigEditor.test.tsx.snap
...@@ -7,6 +7,7 @@ exports[`Render should render component 1`] = ` ...@@ -7,6 +7,7 @@ exports[`Render should render component 1`] = `
onLoadSubscriptions={[Function]} onLoadSubscriptions={[Function]}
onResetOptionKey={[Function]} onResetOptionKey={[Function]}
onUpdateOption={[Function]} onUpdateOption={[Function]}
onUpdateSecureOption={[Function]}
options={ options={
Object { Object {
"access": "proxy", "access": "proxy",
...@@ -44,6 +45,7 @@ exports[`Render should render component 1`] = ` ...@@ -44,6 +45,7 @@ exports[`Render should render component 1`] = `
onResetOptionKey={[Function]} onResetOptionKey={[Function]}
onUpdateOption={[Function]} onUpdateOption={[Function]}
onUpdateOptions={[Function]} onUpdateOptions={[Function]}
onUpdateSecureOption={[Function]}
options={ options={
Object { Object {
"access": "proxy", "access": "proxy",
......
public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
import React, { PureComponent, ChangeEvent } from 'react'; import React, { PureComponent } from 'react';
import { import {
DataSourcePluginOptionsEditorProps, DataSourcePluginOptionsEditorProps,
SelectableValue, SelectableValue,
updateDatasourcePluginJsonDataOption, onUpdateDatasourceOption,
updateDatasourcePluginResetKeyOption, updateDatasourcePluginResetOption,
updateDatasourcePluginOption, onUpdateDatasourceJsonDataOption,
onUpdateDatasourceJsonDataOptionSelect,
onUpdateDatasourceSecureJsonDataOption,
} from '@grafana/data'; } from '@grafana/data';
import { DataSourceHttpSettings, FormLabel, Input, SecretFormField, Select } from '@grafana/ui'; import { DataSourceHttpSettings, FormLabel, Input, SecretFormField, Select } from '@grafana/ui';
import { InfluxOptions, InfluxSecureJsonData } from '../types'; import { InfluxOptions, InfluxSecureJsonData } from '../types';
...@@ -17,40 +19,8 @@ const httpModes = [ ...@@ -17,40 +19,8 @@ const httpModes = [
export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions>; export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions>;
export class ConfigEditor extends PureComponent<Props> { 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 = () => { onResetPassword = () => {
this.onResetKey('password'); updateDatasourcePluginResetOption(this.props, 'password');
};
onHttpModeSelect = (httpMode: SelectableValue) => {
this.onUpdateJsonDataOption('httpMode', httpMode.value, false);
}; };
render() { render() {
...@@ -72,7 +42,11 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -72,7 +42,11 @@ export class ConfigEditor extends PureComponent<Props> {
<div className="gf-form"> <div className="gf-form">
<FormLabel className="width-10">Database</FormLabel> <FormLabel className="width-10">Database</FormLabel>
<div className="width-20"> <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> </div>
</div> </div>
...@@ -80,7 +54,11 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -80,7 +54,11 @@ export class ConfigEditor extends PureComponent<Props> {
<div className="gf-form"> <div className="gf-form">
<FormLabel className="width-10">User</FormLabel> <FormLabel className="width-10">User</FormLabel>
<div className="width-10"> <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> </div>
</div> </div>
...@@ -93,7 +71,7 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -93,7 +71,7 @@ export class ConfigEditor extends PureComponent<Props> {
labelWidth={10} labelWidth={10}
inputWidth={20} inputWidth={20}
onReset={this.onResetPassword} onReset={this.onResetPassword}
onChange={this.onPasswordChange} onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'password')}
/> />
</div> </div>
</div> </div>
...@@ -112,7 +90,7 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -112,7 +90,7 @@ export class ConfigEditor extends PureComponent<Props> {
value={httpModes.find(httpMode => httpMode.value === options.jsonData.httpMode)} value={httpModes.find(httpMode => httpMode.value === options.jsonData.httpMode)}
options={httpModes} options={httpModes}
defaultValue={options.jsonData.httpMode} defaultValue={options.jsonData.httpMode}
onChange={this.onHttpModeSelect} onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'httpMode')}
/> />
</div> </div>
</div> </div>
...@@ -145,7 +123,7 @@ export class ConfigEditor extends PureComponent<Props> { ...@@ -145,7 +123,7 @@ export class ConfigEditor extends PureComponent<Props> {
className="width-10" className="width-10"
placeholder="10s" placeholder="10s"
value={options.jsonData.timeInterval || ''} value={options.jsonData.timeInterval || ''}
onChange={this.onTimeIntervalChange} onChange={onUpdateDatasourceJsonDataOption(this.props, 'timeInterval')}
/> />
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment