Logs: Add back properties to prevent unnecessary re-renders (#70839)

* add back properties

* use spread to not define all props

public/app/features/logs/components/LogRows.tsx

@@ -1,5 +1,5 @@
 import memoizeOne from 'memoize-one';
-import React, { ComponentProps, PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 
 import {
   TimeZone,
@@ -104,30 +104,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
   );
 
   render() {
-    const {
-      dedupStrategy,
-      showContextToggle,
-      showLabels,
-      showTime,
-      wrapLogMessage,
-      prettifyLogMessage,
-      logRows,
-      deduplicatedRows,
-      timeZone,
-      onClickFilterLabel,
-      onClickFilterOutLabel,
-      theme,
-      enableLogDetails,
-      previewLimit,
-      getFieldLinks,
-      logsSortOrder,
-      displayedFields,
-      onClickShowField,
-      onClickHideField,
-      forceEscape,
-      onLogRowHover,
-      app,
-    } = this.props;
+    const { deduplicatedRows, logRows, dedupStrategy, theme, logsSortOrder, previewLimit, ...rest } = this.props;
     const { renderAll } = this.state;
     const styles = getLogRowStyles(theme);
     const dedupedRows = deduplicatedRows ? deduplicatedRows : logRows;
@@ -145,43 +122,48 @@ class UnThemedLogRows extends PureComponent<Props, State> {
     // React profiler becomes unusable if we pass all rows to all rows and their labels, using getter instead
     const getRows = this.makeGetRows(orderedRows);
 
-    const getLogRowProperties = (row: LogRowModel): ComponentProps<typeof LogRow> => {
-      return {
-        getRows: getRows,
-        row: row,
-        showContextToggle: showContextToggle,
-        showDuplicates: showDuplicates,
-        showLabels: showLabels,
-        showTime: showTime,
-        displayedFields: displayedFields,
-        wrapLogMessage: wrapLogMessage,
-        prettifyLogMessage: prettifyLogMessage,
-        timeZone: timeZone,
-        enableLogDetails: enableLogDetails,
-        onClickFilterLabel: onClickFilterLabel,
-        onClickFilterOutLabel: onClickFilterOutLabel,
-        onClickShowField: onClickShowField,
-        onClickHideField: onClickHideField,
-        getFieldLinks: getFieldLinks,
-        logsSortOrder: logsSortOrder,
-        forceEscape: forceEscape,
-        onOpenContext: this.openContext,
-        onLogRowHover: onLogRowHover,
-        app: app,
-        styles: styles,
-        onPermalinkClick: this.props.onPermalinkClick,
-        scrollIntoView: this.props.scrollIntoView,
-        permalinkedRowId: this.props.permalinkedRowId,
-        onPinLine: this.props.onPinLine,
-        onUnpinLine: this.props.onUnpinLine,
-        pinned: this.props.pinnedRowId === row.uid,
-      };
-    };
     return (
       <table className={styles.logsRowsTable}>
         <tbody>
-          {hasData && firstRows.map((row) => <LogRow key={row.uid} {...getLogRowProperties(row)} />)}
-          {hasData && renderAll && lastRows.map((row) => <LogRow key={row.uid} {...getLogRowProperties(row)} />)}
+          {hasData &&
+            firstRows.map((row) => (
+              <LogRow
+                key={row.uid}
+                getRows={getRows}
+                row={row}
+                showDuplicates={showDuplicates}
+                logsSortOrder={logsSortOrder}
+                onOpenContext={this.openContext}
+                styles={styles}
+                onPermalinkClick={this.props.onPermalinkClick}
+                scrollIntoView={this.props.scrollIntoView}
+                permalinkedRowId={this.props.permalinkedRowId}
+                onPinLine={this.props.onPinLine}
+                onUnpinLine={this.props.onUnpinLine}
+                pinned={this.props.pinnedRowId === row.uid}
+                {...rest}
+              />
+            ))}
+          {hasData &&
+            renderAll &&
+            lastRows.map((row) => (
+              <LogRow
+                key={row.uid}
+                getRows={getRows}
+                row={row}
+                showDuplicates={showDuplicates}
+                logsSortOrder={logsSortOrder}
+                onOpenContext={this.openContext}
+                styles={styles}
+                onPermalinkClick={this.props.onPermalinkClick}
+                scrollIntoView={this.props.scrollIntoView}
+                permalinkedRowId={this.props.permalinkedRowId}
+                onPinLine={this.props.onPinLine}
+                onUnpinLine={this.props.onUnpinLine}
+                pinned={this.props.pinnedRowId === row.uid}
+                {...rest}
+              />
+            ))}
           {hasData && !renderAll && (
             <tr>
               <td colSpan={5}>Rendering {orderedRows.length - previewLimit!} rows...</td>