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

CustomVariable: Be able to edit them using scenes (#80193)

Browse Source 
---------
Co-authored-by: Alexandra Vargas <alexa1866@gmail.com>
This commit is contained in:
Ivan Ortega Alba
2024-01-17 18:14:01 +01:00
committed by GitHub
parent c9211fbd69
commit 3b401d0d4d
18 changed files with 474 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,10 @@
import React, { FormEvent, PureComponent } from 'react';
import { MapDispatchToProps, MapStateToProps } from 'react-redux';
import { selectors } from '@grafana/e2e-selectors';
import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
import { CustomVariableForm } from 'app/features/dashboard-scene/settings/variables/components/CustomVariableForm';
import { StoreState } from 'app/types';
import { VariableLegend } from '../../dashboard-scene/settings/variables/components/VariableLegend';
import { VariableTextAreaField } from '../../dashboard-scene/settings/variables/components/VariableTextAreaField';
import { SelectionOptionsEditor } from '../editor/SelectionOptionsEditor';
import { OnPropChangeArguments, VariableEditorProps } from '../editor/types';
import { changeVariableMultiValue } from '../state/actions';
import { CustomVariableModel, VariableWithMultiSupport } from '../types';
@@ -23,18 +20,11 @@ interface DispatchProps {
export type Props = OwnProps & ConnectedProps & DispatchProps;
class CustomVariableEditorUnconnected extends PureComponent<Props> {
onChange = (event: FormEvent<HTMLTextAreaElement>) => {
this.props.onPropChange({
propName: 'query',
propValue: event.currentTarget.value,
});
};
onSelectionOptionsChange = async ({ propName, propValue }: OnPropChangeArguments<VariableWithMultiSupport>) => {
this.props.onPropChange({ propName, propValue, updateOptions: true });
};
onBlur = (event: FormEvent<HTMLTextAreaElement>) => {
onQueryChange = (event: FormEvent<HTMLTextAreaElement>) => {
this.props.onPropChange({
propName: 'query',
propValue: event.currentTarget.value,
@@ -44,26 +34,22 @@ class CustomVariableEditorUnconnected extends PureComponent<Props> {
render() {
return (
<>
<VariableLegend>Custom options</VariableLegend>
<VariableTextAreaField
name="Values separated by comma"
value={this.props.variable.query}
placeholder="1, 10, mykey : myvalue, myvalue, escaped\,value"
onChange={this.onChange}
onBlur={this.onBlur}
required
width={52}
testId={selectors.pages.Dashboard.Settings.Variables.Edit.CustomVariable.customValueInput}
/>
<VariableLegend>Selection options</VariableLegend>
<SelectionOptionsEditor
variable={this.props.variable}
onPropChange={this.onSelectionOptionsChange}
onMultiChanged={this.props.changeVariableMultiValue}
/>
</>
<CustomVariableForm
query={this.props.variable.query}
multi={this.props.variable.multi}
allValue={this.props.variable.allValue}
includeAll={this.props.variable.includeAll}
onQueryChange={this.onQueryChange}
onMultiChange={(event) =>
this.onSelectionOptionsChange({ propName: 'multi', propValue: event.currentTarget.checked })
}
onIncludeAllChange={(event) =>
this.onSelectionOptionsChange({ propName: 'includeAll', propValue: event.currentTarget.checked })
}
onAllValueChange={(event) =>
this.onSelectionOptionsChange({ propName: 'allValue', propValue: event.currentTarget.value })
}
/>
);
}
}