feat(LogViewer): refactor the component to get rid of the gaps between items (#6201)

Author: DaoDaoNoCode

packages/react-log-viewer/src/LogViewer/LogViewer.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { LogViewerRow } from './LogViewerRow';
 import { DEFAULT_FOCUS, DEFAULT_SEARCH_INDEX, DEFAULT_INDEX } from './utils/constants';
 import { searchForKeyword, parseConsoleOutput, escapeString } from './utils/utils';
-import { VariableSizeList as List, areEqual } from '../react-window';
+import { DynamicSizeList as List, areEqual } from '../react-window';
 import styles from '@patternfly/react-styles/css/components/LogViewer/log-viewer';
 
 interface LogViewerProps {
@@ -18,7 +18,7 @@ interface LogViewerProps {
   width?: number;
   /** Height in pixels of the log viewer. */
   height?: number;
-  /** Rows being rendered outside of view. The more rows are rendered, the higher impact on performance */
+  /** Rows rendered outside of view. The more rows are rendered, the higher impact on performance */
   overScanCount?: number;
   /** Toolbar rendered in the log viewer header */
   toolbar?: React.ReactNode;
@@ -30,18 +30,8 @@ interface LogViewerProps {
   scrollToRow?: number;
   /** Number of rows to display in the log viewer */
   itemCount?: number;
-}
-
-let canvas: HTMLCanvasElement | undefined;
-
-function getTextWidth(text: string, font: string) {
-  // if given, use cached canvas for better performance
-  // else, create new canvas
-  canvas = canvas || document.createElement('canvas');
-  const context = canvas.getContext('2d');
-  context.font = font;
-  const metrics = context.measureText(text);
-  return metrics.width;
+  /** Component rendered in the log viewer console window header */
+  headerComponent?: React.ReactNode;
 }
 
 export const LogViewer: React.FunctionComponent<LogViewerProps> = memo(
@@ -56,6 +46,7 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = memo(
     theme = 'light',
     scrollToRow = 0,
     itemCount = undefined,
+    headerComponent,
     ...props
   }: LogViewerProps) => {
     const [searchedInput, setSearchedInput] = useState<string | null>('');
@@ -121,12 +112,6 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = memo(
       setParsedData(parseConsoleOutput(data));
     }, [data]);
 
-    useEffect(() => {
-      if (logViewerRef && logViewerRef.current) {
-        logViewerRef.current.resetAfterIndex(0);
-      }
-    }, [parsedData]);
-
     useEffect(() => {
       if (scrollToRow && parsedData.length) {
         setRowInFocus(parsedData.length - 1);
@@ -147,6 +132,7 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = memo(
         if (foundKeywordIndexes.length !== 0) {
           setSearchedWordIndexes(foundKeywordIndexes);
           scrollToRowInFocus(foundKeywordIndexes[DEFAULT_SEARCH_INDEX]);
+          setCurrentSearchedItemCount(DEFAULT_INDEX);
         }
       }
 
@@ -166,20 +152,11 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = memo(
       logViewerRef.current.scrollToItem(searchedRowIndex, 'center');
     };
 
-    const guessRowHeight = (rowIndex: number) => {
-      const rowText = parsedData[rowIndex];
-      const textWidth = getTextWidth(rowText, 'Liberation Mono');
-      const numRows = Math.ceil(textWidth / (currentWidth || 600));
-
-      return 60 * (numRows || 1);
-    };
-
     const createList = (parsedData: string[]) => (
       <List
         className={css(styles.logViewerList)}
         height={height}
-        width={`${currentWidth}px`}
-        itemSize={guessRowHeight}
+        width={currentWidth}
         itemCount={typeof itemCount === 'undefined' ? parsedData.length : itemCount}
         itemData={dataToRender}
         ref={logViewerRef}
@@ -221,6 +198,7 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = memo(
               <div className={css(styles.logViewerHeader)}>{toolbar}</div>
             </LogViewerToolbarContext.Provider>
           )}
+          {headerComponent}
           <div className={css(styles.logViewerMain)} ref={containerRef}>
             {loading ? <div style={{ height }}>{loadingContent}</div> : createList(parsedData)}
           </div>

packages/react-log-viewer/src/LogViewer/LogViewerRow.tsx

@@ -1,13 +1,14 @@
-import React, { useState, useEffect, memo } from 'react';
+import React, { useState, useEffect } from 'react';
 import { LOGGER_LINE_NUMBER_INDEX_DELTA } from './utils/constants';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/LogViewer/log-viewer';
 import { LogViewerContext } from './LogViewerContext';
+import { forwardRef } from 'react';
 
-interface LogViewerRowProps extends React.Props<HTMLElement> {
-  index: number;
+interface LogViewerRowProps {
+  index?: number;
   style?: React.CSSProperties;
-  data: {
+  data?: {
     parsedData: string[] | null;
     rowInFocus: number;
     searchedWordIndexes: number[];
@@ -16,7 +17,7 @@ interface LogViewerRowProps extends React.Props<HTMLElement> {
   };
 }
 
-export const LogViewerRow: React.FunctionComponent<LogViewerRowProps> = memo(({ index, style, data }) => {
+export const LogViewerRow: React.FunctionComponent<LogViewerRowProps> = forwardRef(({ index, style, data }, ref) => {
   const { parsedData, highlightedRowIndexes, searchedWordIndexes, setHighlightedRowIndexes, rowInFocus } = data;
   const [clickCounter, setClickCounter] = useState(0);
   const [isHiglighted, setIsHiglighted] = useState(false);
@@ -84,7 +85,13 @@ export const LogViewerRow: React.FunctionComponent<LogViewerRowProps> = memo(({
   };
 
   return (
-    <div style={style} className={css(styles.logViewerListItem)} onClick={() => handleHighlightRow()}>
+    <div
+      key={index}
+      ref={ref as any}
+      style={style}
+      className={css(styles.logViewerListItem)}
+      onClick={() => handleHighlightRow()}
+    >
       <span className={css(styles.logViewerIndex)}>{getRowIndex(index)}</span>
       <span className={css(styles.logViewerText)} onClick={() => handleHighlightRow()}>
         {getFormattedData()}

packages/react-log-viewer/src/LogViewer/examples/LogViewer.md

@@ -21,7 +21,7 @@ import { Checkbox } from '@patternfly/react-core';
 
 BasicLogViewer = () => {
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
-  
+
   return (
     <React.Fragment>
       <Checkbox
@@ -35,7 +35,7 @@ BasicLogViewer = () => {
       <LogViewer hasLineNumbers={false} height={300} data={data.data} theme={isDarkTheme ? 'dark' : 'light'} />
     </React.Fragment>
   );
-}
+};
 ```
 
 ### With search
@@ -107,3 +107,26 @@ CustomControlLogViewer = () => {
   );
 };
 ```
+
+### With header component
+
+```js
+import React from 'react';
+import { data } from './realTestData.js';
+import { LogViewer } from '@patternfly/react-log-viewer';
+import { Banner } from '@patternfly/react-core';
+
+HeaderComponentLogViewer = () => {
+  return (
+    <React.Fragment>
+      <LogViewer
+        hasLineNumbers={false}
+        height={300}
+        data={data.data}
+        theme="dark"
+        headerComponent={<Banner>{data.data.length} lines</Banner>}
+      />
+    </React.Fragment>
+  );
+};
+```