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: Log highlights only update when user stops typing (#17845)

Browse Source 
Reverts performance enhancements made to LogsContainer as they are no
longer needed, and complicated things.
Closes #17818
This commit is contained in:
kay delaney
2019-07-02 09:06:21 +01:00
committed by GitHub
parent 0a1bb97a2f
commit 364f1f2e55
2 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/explore/LogsContainer.tsx
View File

@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import {
@@ -52,7 +52,7 @@ interface LogsContainerProps {
absoluteRange: AbsoluteTimeRange;
}
export class LogsContainer extends Component<LogsContainerProps> {
export class LogsContainer extends PureComponent<LogsContainerProps> {
onChangeTime = (absoluteRange: AbsoluteTimeRange) => {
const { exploreId, updateTimeRange } = this.props;
@@ -86,19 +86,6 @@ export class LogsContainer extends Component<LogsContainerProps> {
return [];
};
// Limit re-rendering to when a query is finished executing or when the deduplication strategy changes
// for performance reasons.
shouldComponentUpdate(nextProps: LogsContainerProps): boolean {
return (
nextProps.loading !== this.props.loading ||
nextProps.dedupStrategy !== this.props.dedupStrategy ||
nextProps.logsHighlighterExpressions !== this.props.logsHighlighterExpressions ||
nextProps.hiddenLogLevels !== this.props.hiddenLogLevels ||
nextProps.scanning !== this.props.scanning ||
nextProps.isLive !== this.props.isLive
);
}
render() {
const {
exploreId,

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

@@ -19,6 +19,7 @@ import { makeFragment, makeValue } from '@grafana/ui';
import PlaceholdersBuffer from './PlaceholdersBuffer';
export const TYPEAHEAD_DEBOUNCE = 100;
export const HIGHLIGHT_WAIT = 500;
function getSuggestionByIndex(suggestions: CompletionItemGroup[], index: number): CompletionItem {
// Flatten suggestion groups
@@ -77,11 +78,13 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
plugins: any[];
resetTimer: any;
mounted: boolean;
updateHighlightsTimer: any;
constructor(props: QueryFieldProps, context: Context<any>) {
super(props, context);
this.placeholdersBuffer = new PlaceholdersBuffer(props.initialQuery || '');
this.updateHighlightsTimer = _.debounce(this.updateLogsHighlights, HIGHLIGHT_WAIT);
// Base plugins
this.plugins = [ClearPlugin(), NewlinePlugin(), ...(props.additionalPlugins || [])].filter(p => p);
@@ -152,7 +155,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
this.executeOnChangeAndRunQueries();
}
if (textChanged && !invokeParentOnValueChanged) {
this.updateLogsHighlights();
this.updateHighlightsTimer();
}
}
});
@@ -168,6 +171,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
updateLogsHighlights = () => {
const { onChange } = this.props;
if (onChange) {
onChange(Plain.serialize(this.state.value));
}