Skip to content

Commit bb12bb7

Browse files
MiniPlayerMiniPlayer
committed
Fixed several bug on query editor.
1 parent fa83171 commit bb12bb7

File tree

6 files changed

+112
-34
lines changed

6 files changed

+112
-34
lines changed

‎dist/module.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/module.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/plugin.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
],
3232
"screenshots": [],
3333
"version": "1.0.0",
34-
"updated": "2020-06-23"
34+
"updated": "2020-06-24"
3535
},
3636
"dependencies": {
3737
"grafanaVersion": "6.5.x",

‎src/DataSource.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,11 +158,11 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
158158
* return all metric name matching metricNameInput
159159
* @param metricNameInput
160160
*/
161-
async getMetricNames(metricNameInput: string): Promise<string[]> {
161+
async getMetricNames(metricNameInput: string, limit?: number): Promise<string[]> {
162162
return this.searchValues({
163163
...{
164164
field: 'name',
165-
limit: 20,
165+
limit: limit || 20,
166166
},
167167
query: metricNameInput,
168168
}).catch(error => {

‎src/query/KeyValueTag.tsx‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,18 @@ type Props = {
1212
getTagNames: (tagNameInput: string) => Promise<Array<SelectableValue<string>>>;
1313
};
1414

15-
export class KeyValueTagEditor extends React.Component<Props, any> {
15+
type State = {
16+
isTagNameLoading: boolean;
17+
isTagValueLoading: boolean;
18+
};
19+
20+
export class KeyValueTagEditor extends React.Component<Props, State> {
1621
constructor(props: Props) {
1722
super(props);
23+
this.state = {
24+
isTagNameLoading: false,
25+
isTagValueLoading: false,
26+
};
1827
}
1928

2029
onTagKeyChange = (selected: SelectableValue<string>) => {
@@ -36,11 +45,39 @@ export class KeyValueTagEditor extends React.Component<Props, any> {
3645
};
3746

3847
loadTagValues = (query: string) => {
39-
return this.props.getTagValues(this.props.tag.tagKey, query);
48+
this.setState(state => {
49+
return {
50+
...state,
51+
isTagValueLoading: true,
52+
};
53+
});
54+
return this.props.getTagValues(this.props.tag.tagKey, query).then(rsp => {
55+
this.setState(state => {
56+
return {
57+
...state,
58+
isTagValueLoading: false,
59+
};
60+
});
61+
return rsp;
62+
});
4063
};
4164

4265
loadTagNames = (query: string) => {
43-
return this.props.getTagNames(query);
66+
this.setState(state => {
67+
return {
68+
...state,
69+
isTagNameLoading: true,
70+
};
71+
});
72+
return this.props.getTagNames(query).then(rsp => {
73+
this.setState(state => {
74+
return {
75+
...state,
76+
isTagNameLoading: false,
77+
};
78+
});
79+
return rsp;
80+
});
4481
};
4582

4683
//label="Tag name" description="The tag you want to filter on"
@@ -54,29 +91,25 @@ export class KeyValueTagEditor extends React.Component<Props, any> {
5491
loadOptions={this.loadTagNames}
5592
value={{ label: this.props.tag.tagKey, value: this.props.tag.tagKey }}
5693
onChange={this.onTagKeyChange}
57-
loadingMessage="Searching metrics..."
94+
loadingMessage="Searching tag names..."
95+
defaultOptions={true}
96+
isSearchable={true}
97+
isLoading={this.state.isTagNameLoading}
98+
cacheOptions={true}
5899
/>
59100
</Field>
60101
<Field label="Value" description="Tag value">
61102
<AsyncSelect
62103
loadOptions={this.loadTagValues}
63104
value={{ label: this.props.tag.tagValue, value: this.props.tag.tagValue }}
64105
onChange={this.onTagValueChange}
65-
loadingMessage="Searching metrics..."
106+
loadingMessage="Searching tag values..."
107+
defaultOptions={true}
108+
isSearchable={true}
109+
isLoading={this.state.isTagValueLoading}
110+
cacheOptions={true}
66111
/>
67112
</Field>
68-
{/* <Input
69-
name="tag-name"
70-
label="tag key"
71-
onChange={this.onTagKeyChange}
72-
value={this.props.tag.tagKey} />
73-
<Input
74-
name="tag-value"
75-
label="tag value"
76-
onChange={this.onTagValueChange}
77-
value={this.props.tag.tagValue}
78-
/> */}
79-
80113
<IconButton
81114
onClick={this.onDeleteTag}
82115
name="trash-alt"

‎src/query/QueryEditor.tsx‎

Lines changed: 57 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const bucketSizeCustomOptions: Array<SelectableValue<number>> = [];
2121
const samplingAlgorithmsOptions = [
2222
{ label: 'default', value: 'NONE' },
2323
{ label: 'average', value: 'AVERAGE' },
24-
{ label: 'first', value: 'FIRST_ITEM' },
24+
{ label: 'first', value: 'FIRST' },
2525
{ label: 'min', value: 'MIN' },
2626
{ label: 'max', value: 'MAX' },
2727
];
@@ -31,7 +31,14 @@ export interface TagKeyElement {
3131
tagValue: string;
3232
}
3333

34-
export class QueryEditor extends PureComponent<Props, { tagList: TagKeyElement[]; isBuketSizeInvalid: boolean }> {
34+
type State = {
35+
tagList: TagKeyElement[];
36+
isBuketSizeInvalid: boolean;
37+
isNameLoading: boolean;
38+
default_metric_name: string;
39+
};
40+
41+
export class QueryEditor extends PureComponent<Props, State> {
3542
constructor(props: Props) {
3643
super(props);
3744
const bucketSize: number | undefined = this.props.query.sampling?.bucket_size;
@@ -43,7 +50,23 @@ export class QueryEditor extends PureComponent<Props, { tagList: TagKeyElement[]
4350
this.state = {
4451
tagList: tagList,
4552
isBuketSizeInvalid: isBuketSizeInvalid,
53+
isNameLoading: false,
54+
default_metric_name: 'default_metric_name',
4655
};
56+
this.props.datasource.getMetricNames('', 1).then(metrics => {
57+
let name = '';
58+
if (metrics.length === 0) {
59+
name = 'no metric found !';
60+
} else {
61+
name = metrics[0];
62+
}
63+
this.setState(state => {
64+
return {
65+
...state,
66+
default_metric_name: name,
67+
};
68+
});
69+
});
4770
}
4871

4972
private buildTagList(tags: { [key: string]: string }): TagKeyElement[] {
@@ -102,6 +125,8 @@ export class QueryEditor extends PureComponent<Props, { tagList: TagKeyElement[]
102125

103126
onBucketSizeAddCustomOptions = (newBucketSize: string) => {
104127
bucketSizeCustomOptions.push({ label: kebabCase(newBucketSize), value: Number(newBucketSize) });
128+
// TODO avoid forceUpdate by setting bucketSizeCustomOptions into state
129+
this.forceUpdate();
105130
};
106131

107132
onClearTags = () => {
@@ -165,12 +190,28 @@ export class QueryEditor extends PureComponent<Props, { tagList: TagKeyElement[]
165190
* @param metricNameInput
166191
*/
167192
async getMetricNames(metricNameInput: string): Promise<Array<SelectableValue<string>>> {
168-
console.error('metricNameInput', metricNameInput);
169-
return this.props.datasource.getMetricNames(metricNameInput).then(metricNames => {
170-
return metricNames.map(name => {
171-
return { label: name, value: name };
172-
});
193+
this.setState(state => {
194+
return {
195+
...state,
196+
isNameLoading: true,
197+
};
173198
});
199+
return this.props.datasource
200+
.getMetricNames(metricNameInput)
201+
.then(metricNames => {
202+
return metricNames.map(name => {
203+
return { label: name, value: name };
204+
});
205+
})
206+
.then(rsp => {
207+
this.setState(state => {
208+
return {
209+
...state,
210+
isNameLoading: false,
211+
};
212+
});
213+
return rsp;
214+
});
174215
}
175216

176217
/**
@@ -210,17 +251,17 @@ export class QueryEditor extends PureComponent<Props, { tagList: TagKeyElement[]
210251
}
211252

212253
private getSamplingAlgoValue(): SelectableValue<string> {
213-
if (this.props.query.sampling?.bucket_size !== undefined) {
254+
if (this.props.query.sampling?.algorithm !== undefined) {
214255
return { label: this.props.query.sampling?.algorithm, value: this.props.query.sampling?.algorithm };
215256
}
216257
return { label: 'default', value: 'NONE' };
217258
}
218259

219260
private getNameValue(): SelectableValue<string> {
220-
if (this.props.query.sampling?.bucket_size !== undefined) {
221-
return { label: this.props.query.name, value: this.props.query.name };
222-
}
223-
return { label: '', value: '' };
261+
return {
262+
label: this.props.query.name || this.state.default_metric_name,
263+
value: this.props.query.name || this.state.default_metric_name,
264+
};
224265
}
225266

226267
render() {
@@ -238,6 +279,10 @@ export class QueryEditor extends PureComponent<Props, { tagList: TagKeyElement[]
238279
value={metricNameValue}
239280
onChange={this.onMetricNameChange}
240281
loadingMessage="Searching metrics..."
282+
defaultOptions={true}
283+
isSearchable={true}
284+
isLoading={this.state.isNameLoading}
285+
cacheOptions={true}
241286
/>
242287
</Field>
243288
</div>

0 commit comments

Comments
 (0)