diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx b/public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx new file mode 100644 index 00000000000..942dd142563 --- /dev/null +++ b/public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import ConfigEditor, { Props } from './ConfigEditor'; + +const setup = (propOverrides?: object) => { + const props: Props = { + options: { + id: 21, + orgId: 1, + name: 'InfluxDB-3', + type: 'influxdb', + typeLogoUrl: '', + access: 'proxy', + url: '', + password: '', + user: '', + database: '', + basicAuth: false, + basicAuthUser: '', + basicAuthPassword: '', + withCredentials: false, + isDefault: false, + jsonData: { + httpMode: 'POST', + timeInterval: '4', + }, + secureJsonFields: {}, + version: 1, + readOnly: false, + }, + onOptionsChange: jest.fn(), + }; + + Object.assign(props, propOverrides); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should disable basic auth password input', () => { + const wrapper = setup({ + secureJsonFields: { + basicAuthPassword: true, + }, + }); + expect(wrapper).toMatchSnapshot(); + }); + + it('should hide white listed cookies input when browser access chosen', () => { + const wrapper = setup({ + access: 'direct', + }); + expect(wrapper).toMatchSnapshot(); + }); + + it('should hide basic auth fields when switch off', () => { + const wrapper = setup({ + basicAuth: false, + }); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx new file mode 100644 index 00000000000..f5769e68d11 --- /dev/null +++ b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx @@ -0,0 +1,178 @@ +import React, { PureComponent, ChangeEvent } from 'react'; +import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data'; +import { DataSourceHttpSettings, FormLabel, Input, SecretFormField, Select } from '@grafana/ui'; +import { InfluxOptions, InfluxSecureJsonData } from '../types'; + +const httpModes = [{ label: 'GET', value: 'GET' }, { label: 'POST', value: 'POST' }] as SelectableValue[]; + +export type Props = DataSourcePluginOptionsEditorProps; + +export class ConfigEditor extends PureComponent { + onDatabaseChange = (event: ChangeEvent) => { + const { onOptionsChange, options } = this.props; + onOptionsChange({ + ...options, + database: event.target.value, + }); + }; + + onUserChange = (event: ChangeEvent) => { + const { onOptionsChange, options } = this.props; + onOptionsChange({ + ...options, + user: event.target.value, + }); + }; + + onPasswordChange = (event: ChangeEvent) => { + const { onOptionsChange, options } = this.props; + onOptionsChange({ + ...options, + secureJsonData: { + ...options.secureJsonData, + password: event.target.value, + }, + }); + }; + + onTimeIntervalChange = (event: ChangeEvent) => { + const { onOptionsChange, options } = this.props; + onOptionsChange({ + ...options, + jsonData: { + ...options.jsonData, + timeInterval: event.target.value, + }, + }); + }; + + onResetPassword = () => { + const { onOptionsChange, options } = this.props; + onOptionsChange({ + ...options, + secureJsonFields: { + ...options.secureJsonFields, + password: false, + }, + secureJsonData: { + ...options.secureJsonData, + password: '', + }, + }); + }; + + onHttpModeSelect = (httpMode: SelectableValue) => { + const { onOptionsChange, options } = this.props; + onOptionsChange({ + ...options, + jsonData: { + ...options.jsonData, + httpMode: httpMode.value, + }, + }); + }; + + render() { + const { options, onOptionsChange } = this.props; + const { secureJsonFields } = options; + const secureJsonData = (options.secureJsonData || {}) as InfluxSecureJsonData; + return ( + <> + + +

InfluxDB Details

+
+
+
+ Database +
+ +
+
+
+
+
+ User +
+ +
+
+
+
+
+ +
+
+
+
+ + HTTP Method + + +
+
+
+ + + ); + } +} + +export default ConfigEditor; diff --git a/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap b/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap new file mode 100644 index 00000000000..3a27357ae72 --- /dev/null +++ b/public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap @@ -0,0 +1,873 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should disable basic auth password input 1`] = ` + + +

+ InfluxDB Details +

+
+
+
+ + Database + +
+ +
+
+
+
+
+ + User + +
+ +
+
+
+
+
+ +
+
+
+
+ + HTTP Method + + +
+
+
+ + +`; + +exports[`Render should hide basic auth fields when switch off 1`] = ` + + +

+ InfluxDB Details +

+
+
+
+ + Database + +
+ +
+
+
+
+
+ + User + +
+ +
+
+
+
+
+ +
+
+
+
+ + HTTP Method + + +
+
+
+ + +`; + +exports[`Render should hide white listed cookies input when browser access chosen 1`] = ` + + +

+ InfluxDB Details +

+
+
+
+ + Database + +
+ +
+
+
+
+
+ + User + +
+ +
+
+
+
+
+ +
+
+
+
+ + HTTP Method + + +
+
+
+ + +`; + +exports[`Render should render component 1`] = ` + + +

+ InfluxDB Details +

+
+
+
+ + Database + +
+ +
+
+
+
+
+ + User + +
+ +
+
+
+
+
+ +
+
+
+
+ + HTTP Method + + +
+
+
+ + +`; diff --git a/public/app/plugins/datasource/influxdb/module.ts b/public/app/plugins/datasource/influxdb/module.ts index 9f12ba94f57..379d66c0987 100644 --- a/public/app/plugins/datasource/influxdb/module.ts +++ b/public/app/plugins/datasource/influxdb/module.ts @@ -2,35 +2,15 @@ import InfluxDatasource from './datasource'; import { InfluxQueryCtrl } from './query_ctrl'; import { InfluxLogsQueryField } from './components/InfluxLogsQueryField'; import InfluxStartPage from './components/InfluxStartPage'; - -import { - createChangeHandler, - createResetHandler, - PasswordFieldEnum, -} from '../../../features/datasources/utils/passwordHandlers'; import { DataSourcePlugin } from '@grafana/data'; - -class InfluxConfigCtrl { - static templateUrl = 'partials/config.html'; - current: any; - onPasswordReset: ReturnType; - onPasswordChange: ReturnType; - - constructor() { - this.onPasswordReset = createResetHandler(this, PasswordFieldEnum.Password); - this.onPasswordChange = createChangeHandler(this, PasswordFieldEnum.Password); - this.current.jsonData.httpMode = this.current.jsonData.httpMode || 'GET'; - } - - httpMode = [{ name: 'GET', value: 'GET' }, { name: 'POST', value: 'POST' }]; -} +import ConfigEditor from './components/ConfigEditor'; class InfluxAnnotationsQueryCtrl { static templateUrl = 'partials/annotations.editor.html'; } export const plugin = new DataSourcePlugin(InfluxDatasource) - .setConfigCtrl(InfluxConfigCtrl) + .setConfigEditor(ConfigEditor) .setQueryCtrl(InfluxQueryCtrl) .setAnnotationQueryCtrl(InfluxAnnotationsQueryCtrl) .setExploreLogsQueryField(InfluxLogsQueryField) diff --git a/public/app/plugins/datasource/influxdb/partials/config.html b/public/app/plugins/datasource/influxdb/partials/config.html deleted file mode 100644 index 977b0a0fddc..00000000000 --- a/public/app/plugins/datasource/influxdb/partials/config.html +++ /dev/null @@ -1,69 +0,0 @@ - - - -

InfluxDB Details

- -
-
-
- Database - -
-
- -
-
- User - -
-
- -
-
- -
- -
- - - 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. - -
-
- -
- - -
-
-
Database Access
-

- 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: - SHOW MEASUREMENTS ON _internal or SELECT * FROM "_internal".."database" LIMIT 10 -

- To support data isolation and security, make sure appropriate permissions are configured in InfluxDB. -

-
-
- -
-
-
- Min time interval - - - 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. - -
-
-
diff --git a/public/app/plugins/datasource/influxdb/types.ts b/public/app/plugins/datasource/influxdb/types.ts index 858af5efb64..dc99ce93e74 100644 --- a/public/app/plugins/datasource/influxdb/types.ts +++ b/public/app/plugins/datasource/influxdb/types.ts @@ -5,6 +5,10 @@ export interface InfluxOptions extends DataSourceJsonData { httpMode: string; } +export interface InfluxSecureJsonData { + password?: string; +} + export interface InfluxQueryPart { type: string; params?: string[];