Avoid new metrics options being passed selector, made PromField pure

This commit is contained in:
David Kaltschmidt 2018-10-02 12:25:45 +02:00
parent 538ea1127e
commit dc4b0cf2ca
2 changed files with 19 additions and 10 deletions

View File

@ -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">

View File

@ -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;