Log search (#1114)

* Moving logs to virtual list Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Introducing log search Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Setting ref for VirtualList to access its methods Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Introducing search store Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Centering overlay when scroll to it Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using SearchInput in PodLogSearch Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using Prev/Next icons for search Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * No trigger logs load when scrolled by method Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * SearchInput refactoring Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding find counters Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Clean search query on dock tab change Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Refresh search when logs get changed Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Case-insensitive search Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Improve logs scrolling experience Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Catching empty logs in various places Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing downloading logs Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Clean up some duplicated styles Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing jump-to-bottom animation Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing since label Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Reducing container selector size Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Scroll down to bottom after each reload Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix search within timestamps if they not provided Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Use log row hover color from theme Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add search bindings for 'Esc' & 'Enter' hits Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Focus input fields on CmdOrCtrl+F Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Move search.store.ts in to /common folder Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * search.store.ts -> search-store.ts Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding test for search store Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding integration tests for logs Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing scroll jumping bug Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing download icon check for testing purpose Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing clicking on nginx-create-pod-test Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Moving log tests before cluster operations Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Build extensions before integration tests Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> * Build also npm before integration tests Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> * Move npm build and extension build into own build step Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> * Removing separator sketches Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Horizontal scrolling to founded keyword Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Delaying horizontal scrolling Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
2025-05-20 05:10:56 +00:00 · 2020-11-09 17:46:14 +03:00
1 parent f69f8c793f
commit 16fb35e3f9
@@ -9,6 +9,5 @@
    }

    overflow-y: overlay !important;
-    overflow-x: hidden !important;
  }
 }
@@ -4,8 +4,8 @@ import "./virtual-list.scss";

 import React, { Component } from "react";
 import { observer } from "mobx-react";
-import { ListChildComponentProps, VariableSizeList } from "react-window";
-import { cssNames } from "../../utils";
+import { Align, ListChildComponentProps, ListOnScrollProps, VariableSizeList } from "react-window";
+import { cssNames, noop } from "../../utils";
 import { TableRowProps } from "../table/table-row";
 import { ItemObject } from "../../item.store";
 import throttle from "lodash/throttle";
@@ -13,15 +13,17 @@ import debounce from "lodash/debounce";
 import isEqual from "lodash/isEqual";
 import ResizeSensor from "css-element-queries/src/ResizeSensor";

-interface Props {
-  items: ItemObject[];
+interface Props<T extends ItemObject = any> {
+  items: T[];
  rowHeights: number[];
  className?: string;
  width?: number | string;
  initialOffset?: number;
  readyOffset?: number;
  selectedItemId?: string;
-  getTableRow?: (uid: string) => React.ReactElement<TableRowProps>;
+  getRow?: (uid: string | number) => React.ReactElement<any>;
+  onScroll?: (props: ListOnScrollProps) => void;
+  outerRef?: React.Ref<any>
 }

 interface State {
@@ -33,6 +35,7 @@ const defaultProps: Partial<Props> = {
  width: "100%",
  initialOffset: 1,
  readyOffset: 10,
+  onScroll: noop
 }

 export class VirtualList extends Component<Props, State> {
@@ -56,7 +59,7 @@ export class VirtualList extends Component<Props, State> {
  componentDidUpdate(prevProps: Props) {
    const { items, rowHeights } = this.props;
    if (prevProps.items.length !== items.length || !isEqual(prevProps.rowHeights, rowHeights)) {
-      this.listRef.current.resetAfterIndex(0, true);
+      this.listRef.current.resetAfterIndex(0, false);
    }
  }

@@ -73,18 +76,23 @@ export class VirtualList extends Component<Props, State> {
  getItemSize = (index: number) => this.props.rowHeights[index];

  scrollToSelectedItem = debounce(() => {
+    if (!this.props.selectedItemId) return;
    const { items, selectedItemId } = this.props;
    const index = items.findIndex(item => item.getId() == selectedItemId);
    if (index === -1) return;
    this.listRef.current.scrollToItem(index, "start");
  })

+  scrollToItem = (index: number, align: Align) => {
+    this.listRef.current.scrollToItem(index, align)
+  }
+
  render() {
-    const { width, className, items, getTableRow } = this.props;
+    const { width, className, items, getRow, onScroll, outerRef } = this.props;
    const { height, overscanCount } = this.state;
    const rowData: RowData = {
      items,
-      getTableRow
+      getRow
    };
    return (
      <div className={cssNames("VirtualList", className)} ref={this.parentRef}>
@@ -97,7 +105,9 @@ export class VirtualList extends Component<Props, State> {
          itemData={rowData}
          overscanCount={overscanCount}
          ref={this.listRef}
+          outerRef={outerRef}
          children={Row}
+          onScroll={onScroll}
        />
      </div>
    );
@@ -106,7 +116,7 @@ export class VirtualList extends Component<Props, State> {

 interface RowData {
  items: ItemObject[];
-  getTableRow?: (uid: string) => React.ReactElement<TableRowProps>;
+  getRow?: (uid: string | number) => React.ReactElement<TableRowProps>;
 }

 interface RowProps extends ListChildComponentProps {
@@ -115,9 +125,10 @@ interface RowProps extends ListChildComponentProps {

 const Row = observer((props: RowProps) => {
  const { index, style, data } = props;
-  const { items, getTableRow } = data;
-  const uid = items[index].getId();
-  const row = getTableRow(uid);
+  const { items, getRow } = data;
+  const item = items[index];
+  const uid = typeof item == "string" ? index : items[index].getId();
+  const row = getRow(uid);
  if (!row) return null;
  return React.cloneElement(row, {
    style: Object.assign({}, row.props.style, style)