Skip to content

N
nexpie-grafana-theme
Commit 406b6144 by David Committed by GitHub
Options

Merge pull request #13491 from grafana/davkal/explore-perf 

Explore: typeahead and render performance improvements
parents 9ae6f685 bdae3993
Showing with 150 additions and 88 deletions
public/app/core/utils/explore.test.ts
...@@ -7,6 +7,7 @@ const DEFAULT_EXPLORE_STATE: ExploreState = { ...@@ -7,6 +7,7 @@ const DEFAULT_EXPLORE_STATE: ExploreState = {
datasourceLoading: null, datasourceLoading: null,
datasourceMissing: false, datasourceMissing: false,
datasourceName: '', datasourceName: '',
exploreDatasources: [],
graphResult: null, graphResult: null,
history: [], history: [],
latency: 0, latency: 0,
......
public/app/features/explore/PromQueryField.tsx
...@@ -156,6 +156,7 @@ interface PromQueryFieldState { ...@@ -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 { ...@@ -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 ...@@ -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 ...@@ -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 ...@@ -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 ...@@ -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">
...@@ -575,6 +584,7 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField ...@@ -575,6 +584,7 @@ class PromQueryField extends React.Component<PromQueryFieldProps, PromQueryField
onWillApplySuggestion={willApplySuggestion} onWillApplySuggestion={willApplySuggestion}
onValueChanged={this.onChangeQuery} onValueChanged={this.onChangeQuery}
placeholder="Enter a PromQL query" placeholder="Enter a PromQL query"
portalPrefix="prometheus"
/> />
</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}
......
public/app/features/explore/QueryField.tsx
...@@ -11,10 +11,17 @@ import NewlinePlugin from './slate-plugins/newline'; ...@@ -11,10 +11,17 @@ import NewlinePlugin from './slate-plugins/newline';
import Typeahead from './Typeahead'; import Typeahead from './Typeahead';
import { makeFragment, makeValue } from './Value'; import { makeFragment, makeValue } from './Value';
export const TYPEAHEAD_DEBOUNCE = 300; export const TYPEAHEAD_DEBOUNCE = 100;
function flattenSuggestions(s: any[]): any[] { function getSuggestionByIndex(suggestions: SuggestionGroup[], index: number): Suggestion {
return s ? s.reduce((acc, g) => acc.concat(g.items), []) : []; // Flatten suggestion groups
const flattenedSuggestions = suggestions.reduce((acc, g) => acc.concat(g.items), []);
const correctedIndex = Math.max(index, 0) % flattenedSuggestions.length;
return flattenedSuggestions[correctedIndex];
}
function hasSuggestions(suggestions: SuggestionGroup[]): boolean {
return suggestions && suggestions.length > 0;
} }
export interface Suggestion { export interface Suggestion {
...@@ -125,7 +132,7 @@ export interface TypeaheadOutput { ...@@ -125,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;
...@@ -154,9 +161,15 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat ...@@ -154,9 +161,15 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat
clearTimeout(this.resetTimer); clearTimeout(this.resetTimer);
} }
componentDidUpdate() { componentDidUpdate(prevProps, prevState) {
// Only update menu location when suggestion existence or text/selection changed
if (
this.state.value !== prevState.value ||
hasSuggestions(this.state.suggestions) !== hasSuggestions(prevState.suggestions)
) {
this.updateMenu(); this.updateMenu();
} }
}
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
// initialValue is null in case the user typed // initialValue is null in case the user typed
...@@ -216,7 +229,7 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat ...@@ -216,7 +229,7 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat
wrapperNode, wrapperNode,
}); });
const filteredSuggestions = suggestions let filteredSuggestions = suggestions
.map(group => { .map(group => {
if (group.items) { if (group.items) {
if (prefix) { if (prefix) {
...@@ -241,6 +254,11 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat ...@@ -241,6 +254,11 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat
}) })
.filter(group => group.items && group.items.length > 0); // Filter out empty groups .filter(group => group.items && group.items.length > 0); // Filter out empty groups
// Keep same object for equality checking later
if (_.isEqual(filteredSuggestions, this.state.suggestions)) {
filteredSuggestions = this.state.suggestions;
}
this.setState( this.setState(
{ {
suggestions: filteredSuggestions, suggestions: filteredSuggestions,
...@@ -326,12 +344,7 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat ...@@ -326,12 +344,7 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat
return undefined; return undefined;
} }
// Get the currently selected suggestion const suggestion = getSuggestionByIndex(suggestions, typeaheadIndex);
const flattenedSuggestions = flattenSuggestions(suggestions);
const selected = Math.abs(typeaheadIndex);
const selectedIndex = selected % flattenedSuggestions.length || 0;
const suggestion = flattenedSuggestions[selectedIndex];
this.applyTypeahead(change, suggestion); this.applyTypeahead(change, suggestion);
return true; return true;
} }
...@@ -408,8 +421,7 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat ...@@ -408,8 +421,7 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat
} }
// No suggestions or blur, remove menu // No suggestions or blur, remove menu
const hasSuggesstions = suggestions && suggestions.length > 0; if (!hasSuggestions(suggestions)) {
if (!hasSuggesstions) {
menu.removeAttribute('style'); menu.removeAttribute('style');
return; return;
} }
...@@ -436,18 +448,12 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat ...@@ -436,18 +448,12 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat
renderMenu = () => { renderMenu = () => {
const { portalPrefix } = this.props; const { portalPrefix } = this.props;
const { suggestions } = this.state; const { suggestions, typeaheadIndex } = this.state;
const hasSuggesstions = suggestions && suggestions.length > 0; if (!hasSuggestions(suggestions)) {
if (!hasSuggesstions) {
return null; return null;
} }
// Guard selectedIndex to be within the length of the suggestions const selectedItem = getSuggestionByIndex(suggestions, typeaheadIndex);
let selectedIndex = Math.max(this.state.typeaheadIndex, 0);
const flattenedSuggestions = flattenSuggestions(suggestions);
selectedIndex = selectedIndex % flattenedSuggestions.length || 0;
const selectedItem: Suggestion | null =
flattenedSuggestions.length > 0 ? flattenedSuggestions[selectedIndex] : null;
// Create typeahead in DOM root so we can later position it absolutely // Create typeahead in DOM root so we can later position it absolutely
return ( return (
...@@ -482,7 +488,7 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat ...@@ -482,7 +488,7 @@ class QueryField extends React.Component<TypeaheadFieldProps, TypeaheadFieldStat
} }
} }
class Portal extends React.Component<{ index?: number; prefix: string }, {}> { class Portal extends React.PureComponent<{ index?: number; prefix: string }, {}> {
node: HTMLElement; node: HTMLElement;
constructor(props) { constructor(props) {
......
public/app/features/explore/QueryRows.tsx
...@@ -44,14 +44,14 @@ class QueryRow extends PureComponent<any, {}> { ...@@ -44,14 +44,14 @@ class QueryRow extends PureComponent<any, {}> {
}; };
render() { render() {
const { edited, history, query, queryError, queryHint, request, supportsLogs } = this.props; const { history, query, queryError, queryHint, request, supportsLogs } = this.props;
return ( return (
<div className="query-row"> <div className="query-row">
<div className="query-row-field"> <div className="query-row-field">
<QueryField <QueryField
error={queryError} error={queryError}
hint={queryHint} hint={queryHint}
initialQuery={edited ? null : query} initialQuery={query}
history={history} history={history}
portalPrefix="explore" portalPrefix="explore"
onClickHintFix={this.onClickHintFix} onClickHintFix={this.onClickHintFix}
...@@ -79,7 +79,7 @@ class QueryRow extends PureComponent<any, {}> { ...@@ -79,7 +79,7 @@ class QueryRow extends PureComponent<any, {}> {
export default class QueryRows extends PureComponent<any, {}> { export default class QueryRows extends PureComponent<any, {}> {
render() { render() {
const { className = '', queries, queryErrors = [], queryHints = [], ...handlers } = this.props; const { className = '', queries, queryErrors, queryHints, ...handlers } = this.props;
return ( return (
<div className={className}> <div className={className}>
{queries.map((q, index) => ( {queries.map((q, index) => (
...@@ -89,7 +89,6 @@ export default class QueryRows extends PureComponent<any, {}> { ...@@ -89,7 +89,6 @@ export default class QueryRows extends PureComponent<any, {}> {
query={q.query} query={q.query}
queryError={queryErrors[index]} queryError={queryErrors[index]}
queryHint={queryHints[index]} queryHint={queryHints[index]}
edited={q.edited}
{...handlers} {...handlers}
/> />
))} ))}
......
public/app/features/explore/Typeahead.tsx
...@@ -23,7 +23,9 @@ class TypeaheadItem extends React.PureComponent<TypeaheadItemProps, {}> { ...@@ -23,7 +23,9 @@ class TypeaheadItem extends React.PureComponent<TypeaheadItemProps, {}> {
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
if (this.props.isSelected && !prevProps.isSelected) { if (this.props.isSelected && !prevProps.isSelected) {
requestAnimationFrame(() => {
scrollIntoView(this.el); scrollIntoView(this.el);
});
} }
} }
......
public/app/features/explore/utils/query.ts
export function generateQueryKey(index = 0) { import { Query } from 'app/types/explore';
export function generateQueryKey(index = 0): string {
return `Q-${Date.now()}-${Math.random()}-${index}`; return `Q-${Date.now()}-${Math.random()}-${index}`;
} }
export function ensureQueries(queries?) { export function ensureQueries(queries?: Query[]): Query[] {
if (queries && typeof queries === 'object' && queries.length > 0 && typeof queries[0].query === 'string') { if (queries && typeof queries === 'object' && queries.length > 0 && typeof queries[0].query === 'string') {
return queries.map(({ query }, i) => ({ key: generateQueryKey(i), query })); return queries.map(({ query }, i) => ({ key: generateQueryKey(i), query }));
} }
return [{ key: generateQueryKey(), query: '' }]; return [{ key: generateQueryKey(), query: '' }];
} }
export function hasQuery(queries) { export function hasQuery(queries: string[]): boolean {
return queries.some(q => q.query); return queries.some(q => Boolean(q));
} }
public/app/types/explore.ts
interface ExploreDatasource {
value: string;
label: string;
}
export interface Range { export interface Range {
from: string; from: string;
to: string; to: string;
...@@ -5,7 +10,6 @@ export interface Range { ...@@ -5,7 +10,6 @@ export interface Range {
export interface Query { export interface Query {
query: string; query: string;
edited?: boolean;
key?: string; key?: string;
} }
...@@ -15,13 +19,25 @@ export interface ExploreState { ...@@ -15,13 +19,25 @@ export interface ExploreState {
datasourceLoading: boolean | null; datasourceLoading: boolean | null;
datasourceMissing: boolean; datasourceMissing: boolean;
datasourceName?: string; datasourceName?: string;
exploreDatasources: ExploreDatasource[];
graphResult: any; graphResult: any;
history: any[]; history: any[];
latency: number; latency: number;
loading: any; loading: any;
logsResult: any; logsResult: any;
/**
* Initial rows of queries to push down the tree.
* Modifications do not end up here, but in `this.queryExpressions`.
* The only way to reset a query is to change its `key`.
*/
queries: Query[]; queries: Query[];
/**
* Errors caused by the running the query row.
*/
queryErrors: any[]; queryErrors: any[];
/**
* Hints gathered for the query row.
*/
queryHints: any[]; queryHints: any[];
range: Range; range: Range;
requestOptions: any; requestOptions: any;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment