From 61924e9130aaac2a0f7e4cce98d3354ec3cf21c2 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Sun, 9 Dec 2018 13:23:44 +0100
Subject: [PATCH] Explore: dont pass all rows to all rows, fixes profiler

- react profiler seems to evaluate all props of all components down the tree
- this becomes slow when 1000 rows are passed to 1000 rows and their labels
- use getter function instead to ask for rows on demand
---
 public/app/features/explore/LogLabels.tsx | 17 +++++++++--------
 public/app/features/explore/Logs.tsx      | 16 ++++++++++------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/public/app/features/explore/LogLabels.tsx b/public/app/features/explore/LogLabels.tsx
index eb9c39050f6..8aa1789017e 100644
--- a/public/app/features/explore/LogLabels.tsx
+++ b/public/app/features/explore/LogLabels.tsx
@@ -69,7 +69,7 @@ export class Stats extends PureComponent<{
 
 class Label extends PureComponent<
   {
-    allRows?: LogRow[];
+    getRows?: () => LogRow[];
     label: string;
     plain?: boolean;
     value: string;
@@ -98,13 +98,14 @@ class Label extends PureComponent<
       if (state.showStats) {
         return { showStats: false, stats: null };
       }
-      const stats = calculateLogsLabelStats(this.props.allRows, this.props.label);
+      const allRows = this.props.getRows();
+      const stats = calculateLogsLabelStats(allRows, this.props.label);
       return { showStats: true, stats };
     });
   };
 
   render() {
-    const { allRows, label, plain, value } = this.props;
+    const { getRows, label, plain, value } = this.props;
     const { showStats, stats } = this.state;
     const tooltip = `${label}: ${value}`;
     return (
@@ -115,12 +116,12 @@ class Label extends PureComponent<
         {!plain && (
           <span title="Filter for label" onClick={this.onClickLabel} className="logs-label__icon fa fa-search-plus" />
         )}
-        {!plain && allRows && <span onClick={this.onClickStats} className="logs-label__icon fa fa-signal" />}
+        {!plain && getRows && <span onClick={this.onClickStats} className="logs-label__icon fa fa-signal" />}
         {showStats && (
           <span className="logs-label__stats">
             <Stats
               stats={stats}
-              rowCount={allRows.length}
+              rowCount={getRows().length}
               label={label}
               value={value}
               onClickClose={this.onClickClose}
@@ -133,15 +134,15 @@ class Label extends PureComponent<
 }
 
 export default class LogLabels extends PureComponent<{
-  allRows?: LogRow[];
+  getRows?: () => LogRow[];
   labels: LogsStreamLabels;
   plain?: boolean;
   onClickLabel?: (label: string, value: string) => void;
 }> {
   render() {
-    const { allRows, labels, onClickLabel, plain } = this.props;
+    const { getRows, labels, onClickLabel, plain } = this.props;
     return Object.keys(labels).map(key => (
-      <Label key={key} allRows={allRows} label={key} value={labels[key]} plain={plain} onClickLabel={onClickLabel} />
+      <Label key={key} getRows={getRows} label={key} value={labels[key]} plain={plain} onClickLabel={onClickLabel} />
     ));
   }
 }
diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 108d4f37a6e..e53b265851e 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/public/app/features/explore/Logs.tsx
@@ -56,13 +56,13 @@ const FieldHighlight = onClick => props => {
 };
 
 interface RowProps {
-  allRows: LogRow[];
   highlighterExpressions?: string[];
   row: LogRow;
   showDuplicates: boolean;
   showLabels: boolean | null; // Tristate: null means auto
   showLocalTime: boolean;
   showUtc: boolean;
+  getRows: () => LogRow[];
   onClickLabel?: (label: string, value: string) => void;
 }
 
@@ -107,11 +107,12 @@ class Row extends PureComponent<RowProps, RowState> {
   };
 
   onClickHighlight = (fieldText: string) => {
-    const { allRows } = this.props;
+    const { getRows } = this.props;
     const { parser } = this.state;
 
     const fieldMatch = fieldText.match(parser.fieldRegex);
     if (fieldMatch) {
+      const allRows = getRows();
       // Build value-agnostic row matcher based on the field label
       const fieldLabel = fieldMatch[1];
       const fieldValue = fieldMatch[2];
@@ -151,7 +152,7 @@ class Row extends PureComponent<RowProps, RowState> {
 
   render() {
     const {
-      allRows,
+      getRows,
       highlighterExpressions,
       onClickLabel,
       row,
@@ -193,7 +194,7 @@ class Row extends PureComponent<RowProps, RowState> {
         )}
         {showLabels && (
           <div className="logs-row__labels">
-            <LogLabels allRows={allRows} labels={row.uniqueLabels} onClickLabel={onClickLabel} />
+            <LogLabels getRows={getRows} labels={row.uniqueLabels} onClickLabel={onClickLabel} />
           </div>
         )}
         <div className="logs-row__message" onMouseEnter={this.onMouseOverMessage} onMouseLeave={this.onMouseOutMessage}>
@@ -416,6 +417,9 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
 
     const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
 
+    // React profiler becomes unusable if we pass all rows to all rows and their labels, using getter instead
+    const getRows = () => processedRows;
+
     return (
       <div className="logs-panel">
         <div className="logs-panel-graph">
@@ -473,7 +477,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             firstRows.map(row => (
               <Row
                 key={row.key + row.duplicates}
-                allRows={processedRows}
+                getRows={getRows}
                 highlighterExpressions={highlighterExpressions}
                 row={row}
                 showDuplicates={showDuplicates}
@@ -489,7 +493,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
             lastRows.map(row => (
               <Row
                 key={row.key + row.duplicates}
-                allRows={processedRows}
+                getRows={getRows}
                 row={row}
                 showDuplicates={showDuplicates}
                 showLabels={showLabels}