1
- import { DataSourcePluginOptionsEditorProps } from '@grafana/data' ;
2
- import { DataSourceHttpSettings , InlineField , InlineFieldRow , Input } from '@grafana/ui' ;
1
+ import { DataSourcePluginOptionsEditorProps , GrafanaTheme2 } from '@grafana/data' ;
2
+ import { Field , Input , useStyles2 } from '@grafana/ui' ;
3
3
import React , { ChangeEvent } from 'react' ;
4
4
import { JsonApiDataSourceOptions } from '../types' ;
5
+ import {
6
+ AdvancedHttpSettings ,
7
+ Auth ,
8
+ ConfigSection ,
9
+ ConnectionSettings ,
10
+ DataSourceDescription ,
11
+ convertLegacyAuthProps ,
12
+ } from '@grafana/experimental' ;
13
+ import { css } from '@emotion/css' ;
14
+ import { Divider } from './Divider' ;
5
15
6
16
type Props = DataSourcePluginOptionsEditorProps < JsonApiDataSourceOptions > ;
7
17
@@ -10,6 +20,8 @@ type Props = DataSourcePluginOptionsEditorProps<JsonApiDataSourceOptions>;
10
20
* authentication.
11
21
*/
12
22
export const ConfigEditor : React . FC < Props > = ( { options, onOptionsChange } ) => {
23
+ const styles = useStyles2 ( getStyles ) ;
24
+
13
25
const onParamsChange = ( e : ChangeEvent < HTMLInputElement > ) => {
14
26
onOptionsChange ( {
15
27
...options ,
@@ -22,29 +34,51 @@ export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
22
34
23
35
return (
24
36
< >
25
- { /* DataSourceHttpSettings handles most the settings for connecting over
26
- HTTP. */ }
27
- < DataSourceHttpSettings
28
- defaultUrl = "http://localhost:8080"
29
- dataSourceConfig = { options }
30
- onChange = { onOptionsChange }
37
+ < DataSourceDescription
38
+ dataSourceName = "JSON API"
39
+ docsLink = "https://grafana.github.io/grafana-json-datasource/"
40
+ hasRequiredFields = { false }
41
+ />
42
+
43
+ < Divider />
44
+
45
+ < ConnectionSettings config = { options } onChange = { onOptionsChange } urlPlaceholder = "http://localhost:8080" />
46
+
47
+ < Divider />
48
+
49
+ < Auth
50
+ { ...convertLegacyAuthProps ( {
51
+ config : options ,
52
+ onChange : onOptionsChange ,
53
+ } ) }
31
54
/>
32
55
33
- { /* The Grafana proxy strips query parameters from the URL set in
34
- DataSourceHttpSettings. To support custom query parameters, the user need
35
- to set them explicitly. */ }
36
- < h3 className = "page-heading" > Misc</ h3 >
37
- < InlineFieldRow >
38
- < InlineField label = "Query string" tooltip = "Add a custom query string to your queries." >
56
+ < Divider />
57
+
58
+ < ConfigSection title = "Additional settings" isCollapsible >
59
+ < AdvancedHttpSettings config = { options } onChange = { onOptionsChange } />
60
+
61
+ < div className = { styles . space } />
62
+
63
+ < Field label = "Query string" description = "Add a custom query string to your queries." >
39
64
< Input
40
- width = { 50 }
65
+ width = { 40 }
41
66
value = { options . jsonData . queryParams }
42
67
onChange = { onParamsChange }
43
68
spellCheck = { false }
44
- placeholder = "page=1 & limit = 100 "
69
+ placeholder = "limit=100"
45
70
/>
46
- </ InlineField >
47
- </ InlineFieldRow >
71
+ </ Field >
72
+ </ ConfigSection >
48
73
</ >
49
74
) ;
50
75
} ;
76
+
77
+ const getStyles = ( theme : GrafanaTheme2 ) => {
78
+ return {
79
+ space : css ( {
80
+ width : '100%' ,
81
+ height : theme . spacing ( 2 ) ,
82
+ } ) ,
83
+ } ;
84
+ } ;
0 commit comments