Skip to content

Commit eb4e93b

Browse files
NeedleInAJayStackNeedleInAJayStack
committed
refactor: Reverts VariableQueryEditor to func component
1 parent 78a3d17 commit eb4e93b

File tree

1 file changed

+74
-88
lines changed

1 file changed

+74
-88
lines changed

‎src/components/VariableQueryEditor.tsx‎

Lines changed: 74 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,99 @@
1-
import React, { PureComponent } from 'react';
2-
import { HaystackDataSourceOptions, HaystackQuery, HaystackVariableQuery } from '../types';
1+
import React, { useState } from 'react';
2+
import { HaystackVariableQuery } from '../types';
33
import { HaystackQueryTypeSelector } from './HaystackQueryTypeSelector';
44
import { HaystackQueryInput } from './HaystackQueryInput';
55
import { InlineField, Input } from '@grafana/ui';
6-
import { DataSource } from 'datasource';
7-
import { QueryEditorProps } from '@grafana/data';
86

9-
type VariableQueryProps = QueryEditorProps<DataSource, HaystackQuery, HaystackDataSourceOptions, HaystackVariableQuery>;
10-
11-
interface VariableState {
7+
interface VariableQueryProps {
128
query: HaystackVariableQuery;
13-
refId?: string;
9+
onChange: (query: HaystackVariableQuery, definition: string) => void;
1410
}
1511

1612
export const VARIABLE_REF_ID = "variable";
1713

18-
export class VariableQueryEditor extends PureComponent<VariableQueryProps, VariableState> {
19-
constructor(props: VariableQueryProps) {
20-
super(props);
21-
this.state = {
22-
query: props.query
23-
};
24-
}
25-
26-
variableInputWidth = 30;
14+
export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, query: variableQuery }) => {
15+
let variableInputWidth = 30;
16+
const [query, setState] = useState(variableQuery);
2717

28-
saveQuery() {
18+
const saveQuery = () => {
2919
// refId must match but doesn't get set originally so set should set it on every change
30-
this.setState({ ...this.state, refId: VARIABLE_REF_ID});
20+
setState({ ...query, refId: VARIABLE_REF_ID});
3121

32-
// Returning a display string in `onChange` no longer seems to be used by Grafana?
33-
34-
// let type = this.state.query.type;
35-
// let queryCmd = "";
36-
// if (this.state.query.type === "eval") {
37-
// queryCmd = this.state.query.eval
38-
// } else if (this.state.query.type === "hisRead") {
39-
// queryCmd = this.state.query.hisRead
40-
// } else if (this.state.query.type === "hisReadFilter") {
41-
// queryCmd = this.state.query.hisReadFilter
42-
// } else if (this.state.query.type === "read") {
43-
// queryCmd = this.state.query.read
44-
// }
45-
// let column = "none";
46-
// if (this.state.query.column !== undefined && this.state.query.column !== '') {
47-
// column = `'${this.state.query.column}'`;
48-
// }
49-
// let displayColumn = "none";
50-
// if (this.state.query.displayColumn !== undefined && this.state.query.displayColumn !== '') {
51-
// displayColumn = `'${this.state.query.displayColumn}'`;
52-
// }
53-
// let displayString = `${type}: '${queryCmd}', Column: ${column}, Display: ${displayColumn}`
54-
this.props.onChange(this.state.query);
22+
let type = query.type;
23+
let queryCmd = "";
24+
if (query.type === "eval") {
25+
queryCmd = query.eval
26+
} else if (query.type === "hisRead") {
27+
queryCmd = query.hisRead
28+
} else if (query.type === "hisReadFilter") {
29+
queryCmd = query.hisReadFilter
30+
} else if (query.type === "read") {
31+
queryCmd = query.read
32+
}
33+
let column = "none";
34+
if (query.column !== undefined && query.column !== '') {
35+
column = `'${query.column}'`;
36+
}
37+
let displayColumn = "none";
38+
if (query.displayColumn !== undefined && query.displayColumn !== '') {
39+
displayColumn = `'${query.displayColumn}'`;
40+
}
41+
let displayString = `${type}: '${queryCmd}', Column: ${column}, Display: ${displayColumn}`
42+
onChange(query, displayString);
5543
};
5644

57-
onTypeChange(newType: string) {
58-
this.setState({ ...this.state, query: {...this.state.query, type: newType}});
45+
const onTypeChange = (newType: string) => {
46+
setState({ ...query, type: newType});
5947
};
6048

61-
onQueryChange(newQuery: string) {
62-
if (this.props.query.type === "eval") {
63-
this.setState({ ...this.state, query: { ...this.props.query, eval: newQuery }});
64-
} else if (this.props.query.type === "hisRead") {
65-
this.setState({ ...this.state, query: { ...this.props.query, hisRead: newQuery }});
66-
} else if (this.props.query.type === "hisReadFilter") {
67-
this.setState({ ...this.state, query: { ...this.props.query, hisReadFilter: newQuery }});
68-
} else if (this.props.query.type === "read") {
69-
this.setState({ ...this.state, query: { ...this.props.query, read: newQuery }});
49+
const onQueryChange = (newQuery: string) => {
50+
if (query.type === "eval") {
51+
setState({ ...query, eval: newQuery });
52+
} else if (query.type === "hisRead") {
53+
setState({ ...query, hisRead: newQuery });
54+
} else if (query.type === "hisReadFilter") {
55+
setState({ ...query, hisReadFilter: newQuery });
56+
} else if (query.type === "read") {
57+
setState({ ...query, read: newQuery });
7058
}
7159
};
7260

73-
onColumnChange(event: React.FormEvent<HTMLInputElement>) {
74-
this.setState({ ...this.state, query: {...this.props.query, column: event.currentTarget.value,}});
61+
const onColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
62+
setState({...query, column: event.currentTarget.value,});
7563
};
7664

77-
onDisplayColumnChange(event: React.FormEvent<HTMLInputElement>) {
78-
this.setState({ ...this.state, query: {...this.props.query, displayColumn: event.currentTarget.value,}});
65+
const onDisplayColumnChange = (event: React.FormEvent<HTMLInputElement>) => {
66+
setState({...query, displayColumn: event.currentTarget.value,});
7967
};
8068

81-
render() {
82-
return (
83-
<div onBlur={() => this.saveQuery()}>
84-
<HaystackQueryTypeSelector
85-
datasource={null}
86-
type={this.state.query.type}
87-
refId={this.state.query.refId ?? VARIABLE_REF_ID}
88-
onChange={(e) => this.onTypeChange(e)}
69+
return (
70+
<div onBlur={saveQuery}>
71+
<HaystackQueryTypeSelector
72+
datasource={null}
73+
type={query.type}
74+
refId={query.refId ?? VARIABLE_REF_ID}
75+
onChange={onTypeChange}
76+
/>
77+
<HaystackQueryInput
78+
query={query}
79+
onChange={onQueryChange}
80+
/>
81+
<InlineField label="Column">
82+
<Input
83+
width={variableInputWidth}
84+
onChange={onColumnChange}
85+
value={query.column}
86+
placeholder="Defaults to 'id' or first column"
8987
/>
90-
<HaystackQueryInput
91-
query={this.state.query}
92-
onChange={(e) => this.onQueryChange(e)}
88+
</InlineField>
89+
<InlineField label="Display Column">
90+
<Input
91+
width={variableInputWidth}
92+
onChange={onDisplayColumnChange}
93+
value={query.displayColumn}
94+
placeholder="Defaults to 'Column'"
9395
/>
94-
<InlineField label="Column">
95-
<Input
96-
width={this.variableInputWidth}
97-
onChange={(e) => this.onColumnChange(e)}
98-
value={this.state.query.column}
99-
placeholder="Defaults to 'id' or first column"
100-
/>
101-
</InlineField>
102-
<InlineField label="Display Column">
103-
<Input
104-
width={this.variableInputWidth}
105-
onChange={(e) => this.onDisplayColumnChange(e)}
106-
value={this.state.query.displayColumn}
107-
placeholder="Defaults to 'Column'"
108-
/>
109-
</InlineField>
110-
</div>
111-
);
112-
}
113-
}
96+
</InlineField>
97+
</div>
98+
);
99+
};

0 commit comments

Comments
 (0)