mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Avoid new metrics options being passed selector, made PromField pure
This commit is contained in:
parent
538ea1127e
commit
dc4b0cf2ca
@ -156,6 +156,7 @@ interface PromQueryFieldState {
|
|||||||
labelValues: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
|
labelValues: { [index: string]: { [index: string]: string[] } }; // metric -> labelKey -> [labelValue,...]
|
||||||
logLabelOptions: any[];
|
logLabelOptions: any[];
|
||||||
metrics: string[];
|
metrics: string[];
|
||||||
|
metricsOptions: any[];
|
||||||
metricsByPrefix: CascaderOption[];
|
metricsByPrefix: CascaderOption[];
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -167,7 +168,7 @@ interface PromTypeaheadInput {
|
|||||||
value?: Value;
|
value?: Value;
|
||||||
}
|
}
|
||||||
|
|
||||||
class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryFieldState> {
|
class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryFieldState> {
|
||||||
plugins: any[];
|
plugins: any[];
|
||||||
|
|
||||||
constructor(props: PromQueryFieldProps, context) {
|
constructor(props: PromQueryFieldProps, context) {
|
||||||
@ -189,6 +190,7 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|||||||
logLabelOptions: [],
|
logLabelOptions: [],
|
||||||
metrics: props.metrics || [],
|
metrics: props.metrics || [],
|
||||||
metricsByPrefix: props.metricsByPrefix || [],
|
metricsByPrefix: props.metricsByPrefix || [],
|
||||||
|
metricsOptions: [],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -258,10 +260,22 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|||||||
};
|
};
|
||||||
|
|
||||||
onReceiveMetrics = () => {
|
onReceiveMetrics = () => {
|
||||||
if (!this.state.metrics) {
|
const { histogramMetrics, metrics, metricsByPrefix } = this.state;
|
||||||
|
if (!metrics) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Update global prism config
|
||||||
setPrismTokens(PRISM_SYNTAX, METRIC_MARK, this.state.metrics);
|
setPrismTokens(PRISM_SYNTAX, METRIC_MARK, this.state.metrics);
|
||||||
|
|
||||||
|
// Build metrics tree
|
||||||
|
const histogramOptions = histogramMetrics.map(hm => ({ label: hm, value: hm }));
|
||||||
|
const metricsOptions = [
|
||||||
|
{ label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions },
|
||||||
|
...metricsByPrefix,
|
||||||
|
];
|
||||||
|
|
||||||
|
this.setState({ metricsOptions });
|
||||||
};
|
};
|
||||||
|
|
||||||
onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => {
|
onTypeahead = (typeahead: TypeaheadInput): TypeaheadOutput => {
|
||||||
@ -453,7 +467,7 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|||||||
const histogramSeries = this.state.labelValues[HISTOGRAM_SELECTOR];
|
const histogramSeries = this.state.labelValues[HISTOGRAM_SELECTOR];
|
||||||
if (histogramSeries && histogramSeries['__name__']) {
|
if (histogramSeries && histogramSeries['__name__']) {
|
||||||
const histogramMetrics = histogramSeries['__name__'].slice().sort();
|
const histogramMetrics = histogramSeries['__name__'].slice().sort();
|
||||||
this.setState({ histogramMetrics });
|
this.setState({ histogramMetrics }, this.onReceiveMetrics);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -545,12 +559,7 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { error, hint, supportsLogs } = this.props;
|
const { error, hint, supportsLogs } = this.props;
|
||||||
const { histogramMetrics, logLabelOptions, metricsByPrefix } = this.state;
|
const { logLabelOptions, metricsOptions } = this.state;
|
||||||
const histogramOptions = histogramMetrics.map(hm => ({ label: hm, value: hm }));
|
|
||||||
const metricsOptions = [
|
|
||||||
{ label: 'Histograms', value: HISTOGRAM_GROUP, children: histogramOptions },
|
|
||||||
...metricsByPrefix,
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="prom-query-field">
|
<div className="prom-query-field">
|
||||||
|
@ -132,7 +132,7 @@ export interface TypeaheadOutput {
|
|||||||
suggestions: SuggestionGroup[];
|
suggestions: SuggestionGroup[];
|
||||||
}
|
}
|
||||||
|
|
||||||
class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldState> {
|
class QueryField extends React.PureComponent<TypeaheadFieldProps, TypeaheadFieldState> {
|
||||||
menuEl: HTMLElement | null;
|
menuEl: HTMLElement | null;
|
||||||
plugins: any[];
|
plugins: any[];
|
||||||
resetTimer: any;
|
resetTimer: any;
|
||||||
|
Loading…
Reference in New Issue
Block a user