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

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

Browse Source 
* add back properties

* use spread to not define all props
This commit is contained in:
Sven Grossmann 2023-06-28 15:45:22 +02:00 committed by GitHub
parent f1529997f2
commit 48db23b32f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
public/app/features/logs/components/LogRows.tsx
View File

@ -1,5 +1,5 @@
import memoizeOne from 'memoize-one'; import memoizeOne from 'memoize-one';
import React, { ComponentProps, PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { import {
TimeZone, TimeZone,
@ -104,30 +104,7 @@ class UnThemedLogRows extends PureComponent<Props, State> {
); );
render() { render() {
const { const { deduplicatedRows, logRows, dedupStrategy, theme, logsSortOrder, previewLimit, ...rest } = this.props;
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 { renderAll } = this.state; const { renderAll } = this.state;
const styles = getLogRowStyles(theme); const styles = getLogRowStyles(theme);
const dedupedRows = deduplicatedRows ? deduplicatedRows : logRows; 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 // React profiler becomes unusable if we pass all rows to all rows and their labels, using getter instead
const getRows = this.makeGetRows(orderedRows); 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 ( return (
<table className={styles.logsRowsTable}> <table className={styles.logsRowsTable}>
<tbody> <tbody>
{hasData && firstRows.map((row) => <LogRow key={row.uid} {...getLogRowProperties(row)} />)} {hasData &&
{hasData && renderAll && lastRows.map((row) => <LogRow key={row.uid} {...getLogRowProperties(row)} />)} 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 && ( {hasData && !renderAll && (
<tr> <tr>
<td colSpan={5}>Rendering {orderedRows.length - previewLimit!} rows...</td> <td colSpan={5}>Rendering {orderedRows.length - previewLimit!} rows...</td>