diff --git a/src/renderer/components/dock/pod-logs.scss b/src/renderer/components/dock/pod-logs.scss index 73c6f523fb..18ef6bc716 100644 --- a/src/renderer/components/dock/pod-logs.scss +++ b/src/renderer/components/dock/pod-logs.scss @@ -40,4 +40,23 @@ border-radius: $radius; } } + + .jump-to-bottom { + position: absolute; + font-size: small; + left: 50%; + padding: $unit / 2 $unit * 1.5; + border-radius: $unit * 2; + opacity: 0; + transform: translateX(-50%); + transition: opacity 0.2s; + + &.active { + opacity: 1; + } + + .Icon { + --size: $unit * 2; + } + } } \ No newline at end of file diff --git a/src/renderer/components/dock/pod-logs.tsx b/src/renderer/components/dock/pod-logs.tsx index 27cca1ecee..9237f0d96d 100644 --- a/src/renderer/components/dock/pod-logs.tsx +++ b/src/renderer/components/dock/pod-logs.tsx @@ -13,6 +13,7 @@ import { Spinner } from "../spinner"; import { IDockTab } from "./dock.store"; import { InfoPanel } from "./info-panel"; import { IPodLogsData, logRange, podLogsStore } from "./pod-logs.store"; +import { Button } from "../button"; interface Props { className?: string @@ -23,6 +24,7 @@ interface Props { export class PodLogs extends React.Component { @observable ready = false; @observable preloading = false; // Indicator for setting Spinner (loader) at the top of the logs + @observable showJumpToBottom = false; private logsElement: HTMLDivElement; private lastLineIsShown = true; // used for proper auto-scroll content after refresh @@ -114,10 +116,16 @@ export class PodLogs extends React.Component { onScroll = (evt: React.UIEvent) => { const logsArea = evt.currentTarget; + const toBottomOffset = 100 * 16; // 100 lines * 16px (height of each line) const { scrollHeight, clientHeight, scrollTop } = logsArea; if (scrollTop === 0) { this.preload(scrollHeight); } + if (scrollHeight - scrollTop > toBottomOffset) { + this.showJumpToBottom = true; + } else { + this.showJumpToBottom = false; + } this.lastLineIsShown = clientHeight + scrollTop === scrollHeight; }; @@ -160,6 +168,26 @@ export class PodLogs extends React.Component { return label || <> {value}; } + renderJumpToBottom() { + if (!this.logsElement) return null; + return ( + + ); + } + renderControls() { if (!this.ready) return null; const { selectedContainer, showTimestamps, previous } = this.tabData; @@ -246,6 +274,7 @@ export class PodLogs extends React.Component { showButtons={false} />
this.logsElement = e}> + {this.renderJumpToBottom()} {this.renderLogs()}