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

Explore: trigger a query field render to fix highlighting

Browse Source 
- some syntax rules are loaded asynchronously
- when they have been received, the query field needs to re-render
- trigger re-render via bogus edit (tried other methods but could not
  find any)
This commit is contained in:
David Kaltschmidt
2018-10-05 18:27:33 +02:00
parent f6d332562a
commit e0b8b1b7af
2 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
public/app/features/explore/PromQueryField.tsx
View File

@@ -158,6 +158,7 @@ interface PromQueryFieldState {
metrics: string[]; metrics: string[];
metricsOptions: any[]; metricsOptions: any[];
metricsByPrefix: CascaderOption[]; metricsByPrefix: CascaderOption[];
syntaxLoaded: boolean;
} }
interface PromTypeaheadInput { interface PromTypeaheadInput {
@@ -191,6 +192,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
metrics: props.metrics || [], metrics: props.metrics || [],
metricsByPrefix: props.metricsByPrefix || [], metricsByPrefix: props.metricsByPrefix || [],
metricsOptions: [], metricsOptions: [],
syntaxLoaded: false,
}; };
} }
@@ -266,7 +268,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
} }
// Update global prism config // Update global prism config
setPrismTokens(PRISM_SYNTAX, METRIC_MARK, this.state.metrics); setPrismTokens(PRISM_SYNTAX, METRIC_MARK, metrics);
// Build metrics tree // Build metrics tree
const histogramOptions = histogramMetrics.map(hm => ({ label: hm, value: hm })); const histogramOptions = histogramMetrics.map(hm => ({ label: hm, value: hm }));
@@ -275,7 +277,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
...metricsByPrefix, ...metricsByPrefix,
]; ];
this.setState({ metricsOptions }); this.setState({ metricsOptions, syntaxLoaded: true });
}; };
onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => { onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => {
@@ -558,8 +560,8 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
} }
render() { render() {
const { error, hint, supportsLogs } = this.props; const { error, hint, initialQuery, supportsLogs } = this.props;
const { logLabelOptions, metricsOptions } = this.state; const { logLabelOptions, metricsOptions, syntaxLoaded } = this.state;
return ( return (
<div className="prom-query-field"> <div className="prom-query-field">
@@ -579,12 +581,13 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
<TypeaheadField <TypeaheadField
additionalPlugins={this.plugins} additionalPlugins={this.plugins}
cleanText={cleanText} cleanText={cleanText}
initialValue={this.props.initialQuery} initialValue={initialQuery}
onTypeahead={this.onTypeahead} onTypeahead={this.onTypeahead}
onWillApplySuggestion={willApplySuggestion} onWillApplySuggestion={willApplySuggestion}
onValueChanged={this.onChangeQuery} onValueChanged={this.onChangeQuery}
placeholder="Enter a PromQL query" placeholder="Enter a PromQL query"
portalPrefix="prometheus" portalPrefix="prometheus"
syntaxLoaded={syntaxLoaded}
/> />
</div> </div>
{error ? <div className="prom-query-field-info text-error">{error}</div> : null} {error ? <div className="prom-query-field-info text-error">{error}</div> : null}

14
public/app/features/explore/QueryField.tsx
View File

@@ -106,6 +106,7 @@ interface TypeaheadFieldProps {
placeholder?: string; placeholder?: string;
portalPrefix?: string; portalPrefix?: string;
syntax?: string; syntax?: string;
syntaxLoaded?: boolean;
} }
export interface TypeaheadFieldState { export interface TypeaheadFieldState {
@@ -171,10 +172,15 @@ class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadField
} }
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps: TypeaheadFieldProps) {
// initialValue is null in case the user typed if (nextProps.syntaxLoaded && !this.props.syntaxLoaded) {
if (nextProps.initialValue !== null && nextProps.initialValue !== this.props.initialValue) { // Need a bogus edit to re-render the editor after syntax has fully loaded
this.setState({ value: makeValue(nextProps.initialValue, nextProps.syntax) }); this.onChange(
this.state.value
.change()
.insertText(' ')
.deleteBackward()
);
} }
} }