1616
1717import { DataSourcePluginOptionsEditorProps , SelectableValue } from '@grafana/data' ;
1818import { ConnectionConfig , GoogleAuthType } from '@grafana/google-sdk' ;
19- import { Field , Label , SecretInput , Select } from '@grafana/ui' ;
19+ import { Checkbox , Field , Input , SecretInput , Select } from '@grafana/ui' ;
2020import React , { PureComponent } from 'react' ;
2121import { authTypes , CloudLoggingOptions , DataSourceSecureJsonData } from './types' ;
2222
@@ -97,65 +97,70 @@ export class ConfigEditor extends PureComponent<Props> {
9797 ) : null }
9898 { ! options . jsonData . oauthPassThru ? (
9999 < div >
100- < input type = "checkbox" onChange = { ( ) => handleClick ( ) } checked = { this . state . isChecked } /> To impersonate an
101- existing Google Cloud service account.
102- < div hidden = { ! this . state . isChecked } >
103- < Label > Service Account:</ Label >
104- < input
105- size = { 60 }
106- id = "serviceAccount"
107- value = { this . state . sa }
108- onChange = { ( e ) => {
109- this . setState ( { sa : e . target . value } , ( ) => {
110- this . props . options . jsonData . serviceAccountToImpersonate = this . state . sa ;
111- } ) ;
112- } }
113- />
114- </ div >
115- </ div >
116- ) : null }
117- { options . jsonData . authenticationType === ( 'accessToken' as GoogleAuthType ) ? (
118- < div >
119- < div style = { { marginTop : '10px' } } >
120- < div className = "gf-form-label__desc" >
121- Alternatively, configure a temporary access token and a project ID. This will override other
122- authentication methods.
123- </ div >
124- < div style = { { marginTop : '10px' } } >
125- < Label > Access Token</ Label >
126- < SecretInput
127- autoComplete = "new-password"
128- value = { secureJsonData . accessToken || '' }
100+ < Checkbox
101+ label = "To impersonate an existing Google Cloud service account."
102+ value = { this . state . isChecked }
103+ onChange = { ( ) => handleClick ( ) }
104+ onPointerEnterCapture = { undefined }
105+ onPointerLeaveCapture = { undefined }
106+ />
107+ { this . state . isChecked && (
108+ < Field label = "Service Account" >
109+ < Input
110+ id = "serviceAccount"
111+ width = { 60 }
112+ value = { this . state . sa }
129113 onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) => {
130- onOptionsChange ( {
131- ...options ,
132- secureJsonData : {
133- ...secureJsonData ,
134- accessToken : e . target . value ,
135- } ,
136- } ) ;
137- } }
138- isConfigured = { ! ! options . secureJsonFields ?. accessToken }
139- onReset = { ( ) => {
140- onOptionsChange ( {
141- ...options ,
142- secureJsonData : {
143- ...secureJsonData ,
144- accessToken : '' ,
145- } ,
146- secureJsonFields : {
147- ...options . secureJsonFields ,
148- accessToken : false ,
149- } ,
114+ this . setState ( { sa : e . target . value } , ( ) => {
115+ this . props . options . jsonData . serviceAccountToImpersonate = this . state . sa ;
150116 } ) ;
151117 } }
152118 onPointerEnterCapture = { undefined }
153119 onPointerLeaveCapture = { undefined }
154120 />
155- </ div >
156- </ div >
121+ </ Field >
122+ ) }
157123 </ div >
158124 ) : null }
125+ { options . jsonData . authenticationType === ( 'accessToken' as GoogleAuthType ) ? (
126+ < >
127+ < p >
128+ Alternatively, configure a temporary access token and a project ID. This will override other
129+ authentication methods.
130+ </ p >
131+ < Field label = "Access Token" >
132+ < SecretInput
133+ autoComplete = "new-password"
134+ value = { secureJsonData . accessToken || '' }
135+ onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) => {
136+ onOptionsChange ( {
137+ ...options ,
138+ secureJsonData : {
139+ ...secureJsonData ,
140+ accessToken : e . target . value ,
141+ } ,
142+ } ) ;
143+ } }
144+ isConfigured = { ! ! options . secureJsonFields ?. accessToken }
145+ onReset = { ( ) => {
146+ onOptionsChange ( {
147+ ...options ,
148+ secureJsonData : {
149+ ...secureJsonData ,
150+ accessToken : '' ,
151+ } ,
152+ secureJsonFields : {
153+ ...options . secureJsonFields ,
154+ accessToken : false ,
155+ } ,
156+ } ) ;
157+ } }
158+ onPointerEnterCapture = { undefined }
159+ onPointerLeaveCapture = { undefined }
160+ />
161+ </ Field >
162+ </ >
163+ ) : null }
159164 { defaultProject ( this . props ) }
160165 </ >
161166 ) ;
@@ -166,9 +171,8 @@ const defaultProject = (props: Props) => {
166171 const { options, onOptionsChange } = props ;
167172 return (
168173 < >
169- < div style = { { marginTop : '10px' } } >
170- < Label > Default Project ID (required for OAuth passthrough)</ Label >
171- < input
174+ < Field label = "Default Project ID" description = "Required for OAuth passthrough" >
175+ < Input
172176 autoComplete = "off"
173177 value = { options . jsonData . defaultProject || '' }
174178 onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) => {
@@ -180,11 +184,12 @@ const defaultProject = (props: Props) => {
180184 } ,
181185 } ) ;
182186 } }
187+ onPointerEnterCapture = { undefined }
188+ onPointerLeaveCapture = { undefined }
183189 />
184- </ div >
185- < div style = { { marginTop : '10px' } } >
186- < Label > Universe Domain (optional)</ Label >
187- < input
190+ </ Field >
191+ < Field label = "Universe Domain" description = "Optional" >
192+ < Input
188193 autoComplete = "off"
189194 placeholder = "googleapis.com (default)"
190195 value = { options . jsonData . universeDomain || '' }
@@ -197,8 +202,10 @@ const defaultProject = (props: Props) => {
197202 } ,
198203 } ) ;
199204 } }
205+ onPointerEnterCapture = { undefined }
206+ onPointerLeaveCapture = { undefined }
200207 />
201- </ div >
208+ </ Field >
202209 </ >
203210 ) ;
204211} ;
0 commit comments