apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

InfluxDB: convert config editor to react (#20282)

Browse Source 
* convert config editor to react

* tests and some cleanup

* test

* snaps

* updating per comments

* remove anonymous funcs, remove config from state

* remove unecessaries
pull/20441/head
Shavonn Brown 6 years ago committed by Torkel Ödegaard
parent de9ea829a4
commit eadf324062
6 changed files with 1125 additions and 91 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 68
      public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx
  2. 178
      public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
  3. 873
      public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
  4. 24
      public/app/plugins/datasource/influxdb/module.ts
  5. 69
      public/app/plugins/datasource/influxdb/partials/config.html
  6. 4
      public/app/plugins/datasource/influxdb/types.ts

68
public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx
Unescape View File

@ -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(<ConfigEditor {...props} />);
};
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();
});
});

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

@ -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<InfluxOptions>;
export class ConfigEditor extends PureComponent<Props> {
onDatabaseChange = (event: ChangeEvent<HTMLInputElement>) => {
const { onOptionsChange, options } = this.props;
onOptionsChange({
...options,
database: event.target.value,
});
};
onUserChange = (event: ChangeEvent<HTMLInputElement>) => {
const { onOptionsChange, options } = this.props;
onOptionsChange({
...options,
user: event.target.value,
});
};
onPasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
const { onOptionsChange, options } = this.props;
onOptionsChange({
...options,
secureJsonData: {
...options.secureJsonData,
password: event.target.value,
},
});
};
onTimeIntervalChange = (event: ChangeEvent<HTMLInputElement>) => {
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 (
<>
<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={this.onDatabaseChange} />
</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={this.onUserChange} />
</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={this.onPasswordChange}
/>
</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={this.onHttpModeSelect}
/>
</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={this.onTimeIntervalChange}
/>
</div>
</div>
</div>
</div>
</>
);
}
}
export default ConfigEditor;

873
public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap
Unescape View File

@ -0,0 +1,873 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should disable basic auth password input 1`] = `
<Fragment>
<Component
dataSourceConfig={
Object {
"access": "proxy",
"basicAuth": false,
"basicAuthPassword": "",
"basicAuthUser": "",
"database": "",
"id": 21,
"isDefault": false,
"jsonData": Object {
"httpMode": "POST",
"timeInterval": "4",
},
"name": "InfluxDB-3",
"orgId": 1,
"password": "",
"readOnly": false,
"secureJsonFields": Object {},
"type": "influxdb",
"typeLogoUrl": "",
"url": "",
"user": "",
"version": 1,
"withCredentials": false,
}
}
defaultUrl="http://localhost:8086"
onChange={[MockFunction]}
showAccessOptions={true}
/>
<h3
className="page-heading"
>
InfluxDB Details
</h3>
<div
className="gf-form-group"
>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
className="width-10"
>
Database
</Component>
<div
className="width-20"
>
<Input
className="width-20"
onChange={[Function]}
value=""
/>
</div>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
className="width-10"
>
User
</Component>
<div
className="width-10"
>
<Input
className="width-20"
onChange={[Function]}
value=""
/>
</div>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<SecretFormField
inputWidth={20}
label="Password"
labelWidth={10}
onChange={[Function]}
onReset={[Function]}
placeholder="Password"
value=""
/>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
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
</Component>
<Select
allowCustomValue={false}
autoFocus={false}
backspaceRemovesValue={true}
className="width-10"
components={
Object {
"Group": [Function],
"IndicatorsContainer": [Function],
"MenuList": [Function],
"Option": [Function],
"SingleValue": [Function],
}
}
defaultValue="POST"
isClearable={false}
isDisabled={false}
isLoading={false}
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"label": "GET",
"value": "GET",
},
Object {
"label": "POST",
"value": "POST",
},
]
}
tabSelectsValue={true}
value={
Object {
"label": "POST",
"value": "POST",
}
}
/>
</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"
>
<Component
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
</Component>
<div
className="width-10"
>
<Input
className="width-10"
onChange={[Function]}
placeholder="10s"
value="4"
/>
</div>
</div>
</div>
</div>
</Fragment>
`;
exports[`Render should hide basic auth fields when switch off 1`] = `
<Fragment>
<Component
dataSourceConfig={
Object {
"access": "proxy",
"basicAuth": false,
"basicAuthPassword": "",
"basicAuthUser": "",
"database": "",
"id": 21,
"isDefault": false,
"jsonData": Object {
"httpMode": "POST",
"timeInterval": "4",
},
"name": "InfluxDB-3",
"orgId": 1,
"password": "",
"readOnly": false,
"secureJsonFields": Object {},
"type": "influxdb",
"typeLogoUrl": "",
"url": "",
"user": "",
"version": 1,
"withCredentials": false,
}
}
defaultUrl="http://localhost:8086"
onChange={[MockFunction]}
showAccessOptions={true}
/>
<h3
className="page-heading"
>
InfluxDB Details
</h3>
<div
className="gf-form-group"
>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
className="width-10"
>
Database
</Component>
<div
className="width-20"
>
<Input
className="width-20"
onChange={[Function]}
value=""
/>
</div>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
className="width-10"
>
User
</Component>
<div
className="width-10"
>
<Input
className="width-20"
onChange={[Function]}
value=""
/>
</div>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<SecretFormField
inputWidth={20}
label="Password"
labelWidth={10}
onChange={[Function]}
onReset={[Function]}
placeholder="Password"
value=""
/>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
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
</Component>
<Select
allowCustomValue={false}
autoFocus={false}
backspaceRemovesValue={true}
className="width-10"
components={
Object {
"Group": [Function],
"IndicatorsContainer": [Function],
"MenuList": [Function],
"Option": [Function],
"SingleValue": [Function],
}
}
defaultValue="POST"
isClearable={false}
isDisabled={false}
isLoading={false}
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"label": "GET",
"value": "GET",
},
Object {
"label": "POST",
"value": "POST",
},
]
}
tabSelectsValue={true}
value={
Object {
"label": "POST",
"value": "POST",
}
}
/>
</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"
>
<Component
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
</Component>
<div
className="width-10"
>
<Input
className="width-10"
onChange={[Function]}
placeholder="10s"
value="4"
/>
</div>
</div>
</div>
</div>
</Fragment>
`;
exports[`Render should hide white listed cookies input when browser access chosen 1`] = `
<Fragment>
<Component
dataSourceConfig={
Object {
"access": "proxy",
"basicAuth": false,
"basicAuthPassword": "",
"basicAuthUser": "",
"database": "",
"id": 21,
"isDefault": false,
"jsonData": Object {
"httpMode": "POST",
"timeInterval": "4",
},
"name": "InfluxDB-3",
"orgId": 1,
"password": "",
"readOnly": false,
"secureJsonFields": Object {},
"type": "influxdb",
"typeLogoUrl": "",
"url": "",
"user": "",
"version": 1,
"withCredentials": false,
}
}
defaultUrl="http://localhost:8086"
onChange={[MockFunction]}
showAccessOptions={true}
/>
<h3
className="page-heading"
>
InfluxDB Details
</h3>
<div
className="gf-form-group"
>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
className="width-10"
>
Database
</Component>
<div
className="width-20"
>
<Input
className="width-20"
onChange={[Function]}
value=""
/>
</div>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
className="width-10"
>
User
</Component>
<div
className="width-10"
>
<Input
className="width-20"
onChange={[Function]}
value=""
/>
</div>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<SecretFormField
inputWidth={20}
label="Password"
labelWidth={10}
onChange={[Function]}
onReset={[Function]}
placeholder="Password"
value=""
/>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
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
</Component>
<Select
allowCustomValue={false}
autoFocus={false}
backspaceRemovesValue={true}
className="width-10"
components={
Object {
"Group": [Function],
"IndicatorsContainer": [Function],
"MenuList": [Function],
"Option": [Function],
"SingleValue": [Function],
}
}
defaultValue="POST"
isClearable={false}
isDisabled={false}
isLoading={false}
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"label": "GET",
"value": "GET",
},
Object {
"label": "POST",
"value": "POST",
},
]
}
tabSelectsValue={true}
value={
Object {
"label": "POST",
"value": "POST",
}
}
/>
</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"
>
<Component
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
</Component>
<div
className="width-10"
>
<Input
className="width-10"
onChange={[Function]}
placeholder="10s"
value="4"
/>
</div>
</div>
</div>
</div>
</Fragment>
`;
exports[`Render should render component 1`] = `
<Fragment>
<Component
dataSourceConfig={
Object {
"access": "proxy",
"basicAuth": false,
"basicAuthPassword": "",
"basicAuthUser": "",
"database": "",
"id": 21,
"isDefault": false,
"jsonData": Object {
"httpMode": "POST",
"timeInterval": "4",
},
"name": "InfluxDB-3",
"orgId": 1,
"password": "",
"readOnly": false,
"secureJsonFields": Object {},
"type": "influxdb",
"typeLogoUrl": "",
"url": "",
"user": "",
"version": 1,
"withCredentials": false,
}
}
defaultUrl="http://localhost:8086"
onChange={[MockFunction]}
showAccessOptions={true}
/>
<h3
className="page-heading"
>
InfluxDB Details
</h3>
<div
className="gf-form-group"
>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
className="width-10"
>
Database
</Component>
<div
className="width-20"
>
<Input
className="width-20"
onChange={[Function]}
value=""
/>
</div>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
className="width-10"
>
User
</Component>
<div
className="width-10"
>
<Input
className="width-20"
onChange={[Function]}
value=""
/>
</div>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<SecretFormField
inputWidth={20}
label="Password"
labelWidth={10}
onChange={[Function]}
onReset={[Function]}
placeholder="Password"
value=""
/>
</div>
</div>
<div
className="gf-form-inline"
>
<div
className="gf-form"
>
<Component
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
</Component>
<Select
allowCustomValue={false}
autoFocus={false}
backspaceRemovesValue={true}
className="width-10"
components={
Object {
"Group": [Function],
"IndicatorsContainer": [Function],
"MenuList": [Function],
"Option": [Function],
"SingleValue": [Function],
}
}
defaultValue="POST"
isClearable={false}
isDisabled={false}
isLoading={false}
isMulti={false}
isSearchable={true}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
"label": "GET",
"value": "GET",
},
Object {
"label": "POST",
"value": "POST",
},
]
}
tabSelectsValue={true}
value={
Object {
"label": "POST",
"value": "POST",
}
}
/>
</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"
>
<Component
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
</Component>
<div
className="width-10"
>
<Input
className="width-10"
onChange={[Function]}
placeholder="10s"
value="4"
/>
</div>
</div>
</div>
</div>
</Fragment>
`;

24
public/app/plugins/datasource/influxdb/module.ts
Unescape View File

@ -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<typeof createResetHandler>;
onPasswordChange: ReturnType<typeof createChangeHandler>;
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)

69
public/app/plugins/datasource/influxdb/partials/config.html
Unescape View File

@ -1,69 +0,0 @@
<datasource-http-settings current="ctrl.current" suggest-url="http://localhost:8086">
</datasource-http-settings>
<h3 class="page-heading">InfluxDB Details</h3>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form max-width-30">
<span class="gf-form-label width-10">Database</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.database' placeholder="" required></input>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-15">
<span class="gf-form-label width-10">User</span>
<input type="text" class="gf-form-input" ng-model='ctrl.current.user' placeholder=""></input>
</div>
<div class="gf-form">
<secret-form-field
isConfigured="ctrl.current.password || ctrl.current.secureJsonFields.password"
value="ctrl.current.secureJsonData.password || ''"
on-reset="ctrl.onPasswordReset"
on-change="ctrl.onPasswordChange"
inputWidth="9"
/>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-8">HTTP Method</label>
<div class="gf-form-select-wrapper width-8 gf-form-select-wrapper--has-help-icon">
<select class="gf-form-input" ng-model="ctrl.current.jsonData.httpMode" ng-options="f.value as f.name for f in ctrl.httpMode"></select>
<info-popover mode="right-absolute">
You can use either <code>GET</code> or <code>POST</code> HTTP method to query your InfluxDB database. The <code>POST</code>
method allows you to perform heavy requests (with a lots of <code>WHERE</code> clause) while the <code>GET</code> method
will restrict you and return an error if the query is too large.
</info-popover>
</div>
</div>
</div>
<div class="gf-form-group">
<div class="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 class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label">Min time interval</span>
<input type="text" class="gf-form-input width-6 gf-form-input--has-help-icon" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="10s"></input>
<info-popover mode="right-absolute">
A lower limit for the auto group by time interval. Recommended to be set to write frequency,
for example <code>1m</code> if your data is written every minute.
</info-popover>
</div>
</div>
</div>

4
public/app/plugins/datasource/influxdb/types.ts
Unescape View File

@ -5,6 +5,10 @@ export interface InfluxOptions extends DataSourceJsonData {
httpMode: string;
}
export interface InfluxSecureJsonData {
password?: string;
}
export interface InfluxQueryPart {
type: string;
params?: string[];

Write Preview
Loading…
Cancel
Save