Explore: Memory leak fix due to dedup selector (#20107)

Change custom hashing and lodash.memoize based selector for standard reselect.

packages/grafana-ui/src/components/Logs/LogRows.test.tsx

@@ -10,10 +10,7 @@ describe('LogRows', () => {
     const rows: LogRowModel[] = [makeLog({ uid: '1' }), makeLog({ uid: '2' }), makeLog({ uid: '3' })];
     const wrapper = mount(
       <LogRows
-        data={{
-          rows,
-          hasUniqueLabels: false,
-        }}
+        logRows={rows}
         dedupStrategy={LogsDedupStrategy.none}
         highlighterExpressions={[]}
         showTime={false}
@@ -32,10 +29,7 @@ describe('LogRows', () => {
     jest.useFakeTimers();
     const wrapper = mount(
       <LogRows
-        data={{
-          rows,
-          hasUniqueLabels: false,
-        }}
+        logRows={rows}
         dedupStrategy={LogsDedupStrategy.none}
         highlighterExpressions={[]}
         showTime={false}
@@ -62,14 +56,8 @@ describe('LogRows', () => {
     const dedupedRows: LogRowModel[] = [makeLog({ uid: '4' }), makeLog({ uid: '5' })];
     const wrapper = mount(
       <LogRows
-        data={{
-          rows,
-          hasUniqueLabels: false,
-        }}
-        deduplicatedData={{
-          rows: dedupedRows,
-          hasUniqueLabels: false,
-        }}
+        logRows={rows}
+        deduplicatedRows={dedupedRows}
         dedupStrategy={LogsDedupStrategy.none}
         highlighterExpressions={[]}
         showTime={false}
@@ -87,10 +75,7 @@ describe('LogRows', () => {
     const rows: LogRowModel[] = range(PREVIEW_LIMIT * 2 + 1).map(num => makeLog({ uid: num.toString() }));
     const wrapper = mount(
       <LogRows
-        data={{
-          rows,
-          hasUniqueLabels: false,
-        }}
+        logRows={rows}
         dedupStrategy={LogsDedupStrategy.none}
         highlighterExpressions={[]}
         showTime={false}

packages/grafana-ui/src/components/Logs/LogRows.tsx

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import memoizeOne from 'memoize-one';
-import { LogsModel, TimeZone, LogsDedupStrategy, LogRowModel } from '@grafana/data';
+import { TimeZone, LogsDedupStrategy, LogRowModel } from '@grafana/data';
 
 import { Themeable } from '../../types/theme';
 import { withTheme } from '../../themes/index';
@@ -13,12 +13,12 @@ export const PREVIEW_LIMIT = 100;
 export const RENDER_LIMIT = 500;
 
 export interface Props extends Themeable {
-  data: LogsModel;
+  logRows?: LogRowModel[];
+  deduplicatedRows?: LogRowModel[];
   dedupStrategy: LogsDedupStrategy;
   highlighterExpressions: string[];
   showTime: boolean;
   timeZone: TimeZone;
-  deduplicatedData?: LogsModel;
   rowLimit?: number;
   isLogsPanel?: boolean;
   previewLimit?: number;
@@ -45,8 +45,8 @@ class UnThemedLogRows extends PureComponent<Props, State> {
 
   componentDidMount() {
     // Staged rendering
-    const { data, previewLimit } = this.props;
-    const rowCount = data ? data.rows.length : 0;
+    const { logRows, previewLimit } = this.props;
+    const rowCount = logRows ? logRows.length : 0;
     // Render all right away if not too far over the limit
     const renderAll = rowCount <= previewLimit! * 2;
     if (renderAll) {
@@ -70,8 +70,8 @@ class UnThemedLogRows extends PureComponent<Props, State> {
     const {
       dedupStrategy,
       showTime,
-      data,
-      deduplicatedData,
+      logRows,
+      deduplicatedRows,
       highlighterExpressions,
       timeZone,
       onClickFilterLabel,
@@ -82,15 +82,15 @@ class UnThemedLogRows extends PureComponent<Props, State> {
       previewLimit,
     } = this.props;
     const { renderAll } = this.state;
-    const dedupedData = deduplicatedData ? deduplicatedData : data;
-    const hasData = data && data.rows && data.rows.length > 0;
-    const dedupCount = dedupedData
-      ? dedupedData.rows.reduce((sum, row) => (row.duplicates ? sum + row.duplicates : sum), 0)
+    const dedupedRows = deduplicatedRows ? deduplicatedRows : logRows;
+    const hasData = logRows && logRows.length > 0;
+    const dedupCount = dedupedRows
+      ? dedupedRows.reduce((sum, row) => (row.duplicates ? sum + row.duplicates : sum), 0)
       : 0;
     const showDuplicates = dedupStrategy !== LogsDedupStrategy.none && dedupCount > 0;
 
     // Staged rendering
-    const processedRows = dedupedData ? dedupedData.rows : [];
+    const processedRows = dedupedRows ? dedupedRows : [];
     const firstRows = processedRows.slice(0, previewLimit!);
     const rowCount = Math.min(processedRows.length, rowLimit!);
     const lastRows = processedRows.slice(previewLimit!, rowCount);