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

PanelEdit: made the transformers tab re-render on changes (#23384)

Browse Source 
* fixed so the transformers UI is less buggy.

* changed so we don't mutate state.
This commit is contained in:
Marcus Andersson 2020-04-07 19:54:06 +02:00 committed by GitHub
parent 20246a31f3
commit 1496da036b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
View File

@ -1,7 +1,7 @@
import { css } from 'emotion'; import { css } from 'emotion';
import React from 'react'; import React from 'react';
import { transformersUIRegistry } from '@grafana/ui/src/components/TransformersUI/transformers'; import { transformersUIRegistry } from '@grafana/ui/src/components/TransformersUI/transformers';
import { DataTransformerID, DataTransformerConfig, DataFrame, transformDataFrame } from '@grafana/data'; import { DataTransformerConfig, DataFrame, transformDataFrame, SelectableValue } from '@grafana/data';
import { Button, Select } from '@grafana/ui'; import { Button, Select } from '@grafana/ui';
import { TransformationRow } from './TransformationRow'; import { TransformationRow } from './TransformationRow';
@ -12,45 +12,41 @@ interface Props {
} }
interface State { interface State {
updateCounter: number; addingTransformation: boolean;
} }
export class TransformationsEditor extends React.PureComponent<Props, State> { export class TransformationsEditor extends React.PureComponent<Props, State> {
state = { updateCounter: 0 }; state = { addingTransformation: false };
onTransformationAdd = () => { onTransformationAdd = (selectable: SelectableValue<string>) => {
const { transformations, onChange } = this.props; const { transformations, onChange } = this.props;
onChange([ onChange([
...transformations, ...transformations,
{ {
id: DataTransformerID.noop, id: selectable.value as string,
options: {}, options: {},
}, },
]); ]);
this.setState({ updateCounter: this.state.updateCounter + 1 }); this.setState({ addingTransformation: false });
}; };
onTransformationChange = (idx: number, config: DataTransformerConfig) => { onTransformationChange = (idx: number, config: DataTransformerConfig) => {
const { transformations, onChange } = this.props; const { transformations, onChange } = this.props;
transformations[idx] = config; const next = Array.from(transformations);
onChange(transformations); next[idx] = config;
this.setState({ updateCounter: this.state.updateCounter + 1 }); onChange(next);
}; };
onTransformationRemove = (idx: number) => { onTransformationRemove = (idx: number) => {
const { transformations, onChange } = this.props; const { transformations, onChange } = this.props;
transformations.splice(idx, 1); const next = Array.from(transformations);
onChange(transformations); next.splice(idx, 1);
this.setState({ updateCounter: this.state.updateCounter + 1 }); onChange(next);
}; };
renderTransformationEditors = () => { renderTransformationSelector = () => {
const { transformations, dataFrames } = this.props; if (!this.state.addingTransformation) {
const hasTransformations = transformations.length > 0; return null;
const preTransformData = dataFrames;
if (!hasTransformations) {
return undefined;
} }
const availableTransformers = transformersUIRegistry.list().map(t => { const availableTransformers = transformersUIRegistry.list().map(t => {
@ -61,29 +57,31 @@ export class TransformationsEditor extends React.PureComponent<Props, State> {
}); });
return ( return (
<> <div
{transformations.map((t, i) => {
let editor, input;
if (t.id === DataTransformerID.noop) {
return (
<Select
className={css` className={css`
margin-bottom: 10px; margin-bottom: 10px;
`} `}
key={`${t.id}-${i}`} >
<Select
options={availableTransformers} options={availableTransformers}
placeholder="Select transformation" placeholder="Select transformation"
onChange={v => { onChange={this.onTransformationAdd}
this.onTransformationChange(i, {
id: v.value as string,
options: {},
});
}}
/> />
</div>
); );
} };
renderTransformationEditors = () => {
const { transformations, dataFrames } = this.props;
const preTransformData = dataFrames;
return (
<>
{transformations.map((t, i) => {
let editor;
const transformationUI = transformersUIRegistry.getIfExists(t.id); const transformationUI = transformersUIRegistry.getIfExists(t.id);
input = transformDataFrame(transformations.slice(0, i), preTransformData); const input = transformDataFrame(transformations.slice(0, i), preTransformData);
if (transformationUI) { if (transformationUI) {
editor = React.createElement(transformationUI.component, { editor = React.createElement(transformationUI.component, {
@ -121,7 +119,8 @@ export class TransformationsEditor extends React.PureComponent<Props, State> {
visualized. visualized.
</p> </p>
{this.renderTransformationEditors()} {this.renderTransformationEditors()}
<Button variant="secondary" icon="fa fa-plus" onClick={this.onTransformationAdd}> {this.renderTransformationSelector()}
<Button variant="secondary" icon="fa fa-plus" onClick={() => this.setState({ addingTransformation: true })}>
Add transformation Add transformation
</Button> </Button>
</div> </div>

1
public/app/features/dashboard/state/PanelModel.ts
View File

@ -448,6 +448,7 @@ export class PanelModel implements DataConfigSource {
setTransformations(transformations: DataTransformerConfig[]) { setTransformations(transformations: DataTransformerConfig[]) {
this.transformations = transformations; this.transformations = transformations;
this.resendLastResult();
} }
replaceVariables(value: string, extraVars?: ScopedVars, format?: string) { replaceVariables(value: string, extraVars?: ScopedVars, format?: string) {