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: Refactor log rows (#21066)

Browse Source
This commit is contained in:
Ivana Huckova
2019-12-16 16:07:36 +01:00
committed by GitHub
parent 71382ae7ed
commit 842dde3dc9
9 changed files with 300 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
public/app/features/explore/LiveLogs.tsx
View File

@@ -64,7 +64,7 @@ interface State {
class LiveLogs extends PureComponent<Props, State> {
private liveEndDiv: HTMLDivElement | null = null;
private scrollContainerRef = React.createRef<HTMLDivElement>();
private scrollContainerRef = React.createRef<HTMLTableSectionElement>();
private lastScrollPos: number | null = null;
constructor(props: Props) {
@@ -139,39 +139,41 @@ class LiveLogs extends PureComponent<Props, State> {
return (
<div>
<div
onScroll={isPaused ? undefined : this.onScroll}
className={cx(['logs-rows', styles.logsRowsLive])}
ref={this.scrollContainerRef}
>
{this.rowsToRender().map((row: LogRowModel) => {
return (
<div className={cx(logsRow, styles.logsRowFade)} key={row.uid}>
{showUtc && (
<div className={cx(logsRowLocalTime)} title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>
{row.timeUtc}
</div>
)}
{!showUtc && (
<div className={cx(logsRowLocalTime)} title={`${row.timeUtc} (${row.timeFromNow})`}>
{row.timeLocal}
</div>
)}
<div className={cx(logsRowMessage)}>{row.entry}</div>
</div>
);
})}
<div
ref={element => {
this.liveEndDiv = element;
// This is triggered on every update so on every new row. It keeps the view scrolled at the bottom by
// default.
if (this.liveEndDiv && !isPaused) {
this.liveEndDiv.scrollIntoView(false);
}
}}
/>
</div>
<table>
<tbody
onScroll={isPaused ? undefined : this.onScroll}
className={cx(['logs-rows', styles.logsRowsLive])}
ref={this.scrollContainerRef}
>
{this.rowsToRender().map((row: LogRowModel) => {
return (
<tr className={cx(logsRow, styles.logsRowFade)} key={row.uid}>
{showUtc && (
<td className={cx(logsRowLocalTime)} title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>
{row.timeUtc}
</td>
)}
{!showUtc && (
<td className={cx(logsRowLocalTime)} title={`${row.timeUtc} (${row.timeFromNow})`}>
{row.timeLocal}
</td>
)}
<td className={cx(logsRowMessage)}>{row.entry}</td>
</tr>
);
})}
<tr
ref={element => {
this.liveEndDiv = element;
// This is triggered on every update so on every new row. It keeps the view scrolled at the bottom by
// default.
if (this.liveEndDiv && !isPaused) {
this.liveEndDiv.scrollIntoView(false);
}
}}
/>
</tbody>
</table>
<div className={cx([styles.logsRowsIndicator])}>
<button onClick={isPaused ? onResume : onPause} className={cx('btn btn-secondary', styles.button)}>
<i className={cx('fa', isPaused ? 'fa-play' : 'fa-pause')} />