IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Templating: Custom variable edit UI, change text input into textarea (#28312) (#28322)

Browse Source
This commit is contained in:
Darryl 2020-10-26 14:38:39 +07:00 committed by GitHub
parent 3abd9957aa
commit 0f97925c1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/app/features/variables/custom/CustomVariableEditor.tsx
View File

@ -4,6 +4,7 @@ import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
import { OnPropChangeArguments, VariableEditorProps } from '../editor/types'; import { OnPropChangeArguments, VariableEditorProps } from '../editor/types';
import { connectWithStore } from 'app/core/utils/connectWithReduxStore'; import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
import { MapDispatchToProps, MapStateToProps } from 'react-redux'; import { MapDispatchToProps, MapStateToProps } from 'react-redux';
import { Field, TextArea } from '@grafana/ui';
import { StoreState } from 'app/types'; import { StoreState } from 'app/types';
import { changeVariableMultiValue } from '../state/actions'; import { changeVariableMultiValue } from '../state/actions';
@ -18,7 +19,7 @@ interface DispatchProps {
export type Props = OwnProps & ConnectedProps & DispatchProps; export type Props = OwnProps & ConnectedProps & DispatchProps;
class CustomVariableEditorUnconnected extends PureComponent<Props> { class CustomVariableEditorUnconnected extends PureComponent<Props> {
onChange = (event: ChangeEvent<HTMLInputElement>) => { onChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
this.props.onPropChange({ this.props.onPropChange({
propName: 'query', propName: 'query',
propValue: event.target.value, propValue: event.target.value,
@ -29,7 +30,7 @@ class CustomVariableEditorUnconnected extends PureComponent<Props> {
this.props.onPropChange({ propName, propValue, updateOptions: true }); this.props.onPropChange({ propName, propValue, updateOptions: true });
}; };
onBlur = (event: FocusEvent<HTMLInputElement>) => { onBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
this.props.onPropChange({ this.props.onPropChange({
propName: 'query', propName: 'query',
propValue: event.target.value, propValue: event.target.value,
@ -43,17 +44,19 @@ class CustomVariableEditorUnconnected extends PureComponent<Props> {
<div className="gf-form-group"> <div className="gf-form-group">
<h5 className="section-heading">Custom Options</h5> <h5 className="section-heading">Custom Options</h5>
<div className="gf-form"> <div className="gf-form">
<span className="gf-form-label width-14">Values separated by comma</span> <Field label="Values separated by comma">
<input <TextArea
type="text" className="gf-form-input"
className="gf-form-input" value={this.props.variable.query}
value={this.props.variable.query} onChange={this.onChange}
onChange={this.onChange} onBlur={this.onBlur}
onBlur={this.onBlur} rows={5}
placeholder="1, 10, mykey : myvalue, myvalue, escaped\,value" cols={81}
required placeholder="1, 10, mykey : myvalue, myvalue, escaped\,value"
aria-label="Variable editor Form Custom Query field" required
/> aria-label="Variable editor Form Custom Query field"
/>
</Field>
</div> </div>
</div> </div>
<SelectionOptionsEditor <SelectionOptionsEditor