import { DataSourcePluginOptionsEditorProps } from '@grafana/data' ; import { LegacyForms } from '@grafana/ui' ; import React , { ChangeEvent , PureComponent } from 'react' ; import { MyDataSourceOptions } from './types' ; const { FormField } = LegacyForms ; interface Props extends DataSourcePluginOptionsEditorProps < MyDataSourceOptions > { } interface State { } export class ConfigEditor extends PureComponent < Props , State > { onURLChange = ( event ) => { const { onOptionsChange , options } = this . props ; const jsonData = { ... options . jsonData , url : event . target . value , } ; onOptionsChange ( { ... options , jsonData } ) ; } ; render ( ) { const { options } = this . props ; const { jsonData } = options ; return ( < div className = "gf-form-group" > < div className = "gf-form" > < FormField label = "WebSocket server URL" labelWidth = { 10 } inputWidth = { 20 } onChange = { this . onURLChange } value = { jsonData . url || '' } / > < /div> < /div>); } }