Fixing initial scroll-to-bottom in pod logs (#3281)

* Fixing scroll to bottom in pod logs

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing invalidDate error if no timestamp provided

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/__test__/to-bottom.test.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import React from "react";
+import "@testing-library/jest-dom/extend-expect";
+import { fireEvent, render } from "@testing-library/react";
+import { ToBottom } from "../to-bottom";
+import { noop } from "../../../utils";
+
+describe("<ToBottom/>", () => {
+  it("renders w/o errors", () => {
+    const { container } = render(<ToBottom onClick={noop}/>);
+
+    expect(container).toBeInstanceOf(HTMLElement);
+  });
+
+  it("has 'To bottom' label", () => {
+    const { getByText } = render(<ToBottom onClick={noop}/>);
+
+    expect(getByText("To bottom")).toBeInTheDocument();
+  });
+
+  it("has a arrow down icon", () => {
+    const { getByText } = render(<ToBottom onClick={noop}/>);
+
+    expect(getByText("expand_more")).toBeInTheDocument();
+  });
+
+  it("fires an onclick event", () => {
+    const callback = jest.fn();
+    const { getByText } = render(<ToBottom onClick={callback}/>);
+
+    fireEvent.click(getByText("To bottom"));
+    expect(callback).toBeCalled();
+  });
+});

src/renderer/components/dock/log-list.scss

@@ -84,17 +84,4 @@
       overflow-x: hidden!important; // fixing scroll to bottom issues in PodLogs
     }
   }
-
-  .JumpToBottom {
-    position: absolute;
-    right: 30px;
-    padding: 4px 9px;
-    border-radius: 20px;
-    z-index: 2;
-    top: 20px;
-
-    .Icon {
-      --size: calc(var(--unit) * 2);
-    }
-  }
 }

src/renderer/components/dock/log-list.tsx

@@ -25,20 +25,19 @@ import React from "react";
 import AnsiUp from "ansi_up";
 import DOMPurify from "dompurify";
 import debounce from "lodash/debounce";
-import { action, computed, observable, makeObservable } from "mobx";
+import { action, computed, observable, makeObservable, reaction } from "mobx";
-import { observer } from "mobx-react";
+import { disposeOnUnmount, observer } from "mobx-react";
 import moment from "moment-timezone";
 import type { Align, ListOnScrollProps } from "react-window";
 
 import { SearchStore, searchStore } from "../../../common/search-store";
 import { UserStore } from "../../../common/user-store";
-import { cssNames } from "../../utils";
+import { boundMethod, cssNames } from "../../utils";
-import { Button } from "../button";
-import { Icon } from "../icon";
 import { Spinner } from "../spinner";
 import { VirtualList } from "../virtual-list";
 import { logStore } from "./log.store";
 import { logTabStore } from "./log-tab.store";
+import { ToBottom } from "./to-bottom";
 
 interface Props {
   logs: string[]
@@ -64,41 +63,44 @@ export class LogList extends React.Component<Props> {
   }
 
   componentDidMount() {
-    this.scrollToBottom();
+    disposeOnUnmount(this, [
+      reaction(() => this.props.logs, this.onLogsInitialLoad),
+      reaction(() => this.props.logs, this.onLogsUpdate),
+      reaction(() => this.props.logs, this.onUserScrolledUp)
+    ]);
   }
 
-  componentDidUpdate(prevProps: Props) {
+  @boundMethod
-    const { logs, id } = this.props;
+  onLogsInitialLoad(logs: string[], prevLogs: string[]) {
-
+    if (!prevLogs.length && logs.length) {
-    if (id != prevProps.id) {
       this.isLastLineVisible = true;
-
-      return;
     }
+  }
 
-    if (logs == prevProps.logs || !this.virtualListDiv.current) return;
+  @boundMethod
+  onLogsUpdate() {
+    if (this.isLastLineVisible) {
+      setTimeout(() => {
+        this.scrollToBottom();
+      }, 500);  // Giving some time to VirtualList to prepare its outerRef (this.virtualListDiv) element
+    }
+  }
 
-    const newLogsLoaded = prevProps.logs.length < logs.length;
+  @boundMethod
+  onUserScrolledUp(logs: string[], prevLogs: string[]) {
+    if (!this.virtualListDiv.current) return;
+
+    const newLogsAdded = prevLogs.length < logs.length;
     const scrolledToBeginning = this.virtualListDiv.current.scrollTop === 0;
 
-    if (this.isLastLineVisible || prevProps.logs.length == 0) {
+    if (newLogsAdded && scrolledToBeginning) {
-      this.scrollToBottom(); // Scroll down to keep user watching/reading experience
+      const firstLineContents = prevLogs[0];
-
-      return;
-    }
-
-    if (scrolledToBeginning && newLogsLoaded) {
-      const firstLineContents = prevProps.logs[0];
       const lineToScroll = this.props.logs.findIndex((value) => value == firstLineContents);
 
       if (lineToScroll !== -1) {
         this.scrollToItem(lineToScroll, "start");
       }
     }
-
-    if (!logs.length) {
-      this.isLastLineVisible = false;
-    }
   }
 
   /**
@@ -114,7 +116,7 @@ export class LogList extends React.Component<Props> {
 
     return this.props.logs
       .map(log => logStore.splitOutTimestamp(log))
-      .map(([logTimestamp, log]) => (`${moment.tz(logTimestamp, UserStore.getInstance().localeTimezone).format()}${log}`));
+      .map(([logTimestamp, log]) => (`${logTimestamp && moment.tz(logTimestamp, UserStore.getInstance().localeTimezone).format()}${log}`));
   }
 
   /**
@@ -158,7 +160,6 @@ export class LogList extends React.Component<Props> {
     }
   };
 
-  @action
   scrollToBottom = () => {
     if (!this.virtualListDiv.current) return;
     this.virtualListDiv.current.scrollTop = this.virtualListDiv.current.scrollHeight;
@@ -169,7 +170,6 @@ export class LogList extends React.Component<Props> {
   };
 
   onScroll = (props: ListOnScrollProps) => {
-    if (!this.virtualListDiv.current) return;
     this.isLastLineVisible = false;
     this.onScrollDebounced(props);
   };
@@ -264,29 +264,9 @@ export class LogList extends React.Component<Props> {
           className="box grow"
         />
         {this.isJumpButtonVisible && (
-          <JumpToBottom onClick={this.scrollToBottom} />
+          <ToBottom onClick={this.scrollToBottom} />
         )}
       </div>
     );
   }
 }
-
-interface JumpToBottomProps {
-  onClick: () => void
-}
-
-const JumpToBottom = ({ onClick }: JumpToBottomProps) => {
-  return (
-    <Button
-      primary
-      className="JumpToBottom flex gaps"
-      onClick={evt => {
-        evt.currentTarget.blur();
-        onClick();
-      }}
-    >
-      Jump to bottom
-      <Icon material="expand_more" />
-    </Button>
-  );
-};

src/renderer/components/dock/log.store.ts

@@ -183,7 +183,7 @@ export class LogStore {
     const extraction = /^(\d+\S+)(.*)/m.exec(logs);
 
     if (!extraction || extraction.length < 3) {
-      return ["", ""];
+      return ["", logs];
     }
 
     return [extraction[1], extraction[2]];

src/renderer/components/dock/to-bottom.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+import React from "react";
+import { Icon } from "../icon";
+
+export function ToBottom({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      className="absolute top-3 right-3 z-10 rounded-md flex align-center px-1.5 py-1.5 pl-3.5"
+      style={{ backgroundColor: "var(--blue)" }}
+      onClick={evt => {
+        evt.currentTarget.blur();
+        onClick();
+      }}
+    >
+      To bottom
+      <Icon small material="expand_more" />
+    </button>
+  );
+}