create Multi-Stream log component

commit

add http request

a

make reuested changes

add vars

fix lint errors

add unit tests

remove comments

remove co-fetch code

remove co fetch reference

make request changes

make requested changes

make requested changes

changes

make requested changes

rmeove fragment

add tests

frontend/packages/console-shared/src/hooks/__tests__/scroll.spec.ts

@@ -0,0 +1,23 @@
+import { ScrollDirection, getScrollDirection } from '../scroll';
+
+describe('getScrollDirection', () => {
+  it('should return scrolled to bottom', () => {
+    expect(getScrollDirection(300, 500, 1000, 500)).toEqual(ScrollDirection.scrolledToBottom);
+  });
+
+  it('should return scrolled to top', () => {
+    expect(getScrollDirection(500, 0, 1000, 500)).toEqual(ScrollDirection.scrolledToTop);
+  });
+
+  it('should return scrolling down', () => {
+    expect(getScrollDirection(300, 400, 1000, 500)).toEqual(ScrollDirection.scrollingDown);
+  });
+
+  it('should return scrolling up', () => {
+    expect(getScrollDirection(300, 200, 1000, 500)).toEqual(ScrollDirection.scrollingUp);
+  });
+
+  it('should return undefined', () => {
+    expect(getScrollDirection(300, 300, 1000, 500)).toEqual(undefined);
+  });
+});

frontend/packages/console-shared/src/hooks/index.ts

@@ -1,2 +1,4 @@
 export * from './formik-validation-fix';
 export * from './deep-compare-memoize';
+export * from './screenfull';
+export * from './scroll';

frontend/packages/console-shared/src/hooks/screenfull.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as screenfull from 'screenfull';
+
+export const useFullScreen = (node: HTMLElement): [boolean, () => void] => {
+  const [isFullScreen, setIsFullScreen] = React.useState<boolean>(false);
+
+  const fullScreenToggleCallback = React.useCallback(() => {
+    if (node && screenfull.enabled) {
+      screenfull.toggle(node);
+    }
+  }, [node]);
+
+  React.useEffect(() => {
+    if (screenfull.enabled) {
+      screenfull.on('change', () => {
+        setIsFullScreen(screenfull.isFullscreen);
+      });
+      screenfull.on('error', () => {
+        setIsFullScreen(false);
+      });
+    }
+    return () => {
+      if (screenfull.enabled) {
+        screenfull.off('change');
+        screenfull.off('error');
+      }
+    };
+  }, []);
+
+  return [isFullScreen, fullScreenToggleCallback];
+};

frontend/packages/console-shared/src/hooks/scroll.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+export enum ScrollDirection {
+  scrollingUp = 'scrolling-up',
+  scrollingDown = 'scrolling-down',
+  scrolledToBottom = 'scrolled-to-bottom',
+  scrolledToTop = 'scrolled-to-top',
+}
+
+export const getScrollDirection = (
+  prevScrollTop: number,
+  currentScrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+) => {
+  let direction;
+  if (scrollHeight - currentScrollTop === clientHeight) {
+    direction = ScrollDirection.scrolledToBottom;
+  } else if (currentScrollTop === 0) {
+    direction = ScrollDirection.scrolledToTop;
+  } else if (prevScrollTop > currentScrollTop) {
+    direction = ScrollDirection.scrollingUp;
+  } else if (prevScrollTop < currentScrollTop) {
+    direction = ScrollDirection.scrollingDown;
+  }
+  return direction;
+};
+
+export const useScrollDirection = (node: HTMLElement) => {
+  const scrollPosition = React.useRef(null);
+  const [scrollDirection, setScrollDirection] = React.useState<ScrollDirection>(null);
+  const handleScroll = React.useCallback(
+    (event) => {
+      const { scrollHeight, scrollTop, clientHeight } = event.target;
+      if (scrollPosition.current) {
+        const direction = getScrollDirection(
+          scrollPosition.current,
+          scrollTop,
+          scrollHeight,
+          clientHeight,
+        );
+        if (direction && direction !== scrollDirection) setScrollDirection(direction);
+      }
+      scrollPosition.current = scrollTop;
+    },
+    [scrollDirection],
+  );
+
+  React.useEffect(() => {
+    const eventHandler = (event) => setTimeout(() => handleScroll(event), 100);
+    if (node) {
+      node.addEventListener('scroll', eventHandler);
+    }
+    return () => {
+      node && node.removeEventListener('scroll', eventHandler);
+      clearTimeout();
+    };
+  }, [handleScroll, node]);
+
+  return scrollDirection;
+};

frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/PipelineRunLogs.scss

@@ -1,6 +1,7 @@
 .odc-pipeline-run-logs {
   display: flex;
   width: 100%;
+  padding-top: var(--pf-global--spacer--xl);
   &__nav {
     list-style-type: none;
   }

frontend/packages/dev-console/src/components/pipelineruns/detail-page-tabs/PipelineRunLogs.tsx

@@ -8,7 +8,7 @@ import { Firehose, resourcePathFromModel } from '@console/internal/components/ut
 import { pipelineRunFilterReducer } from '../../../utils/pipeline-filter-reducer';
 import { PipelineRun } from '../../../utils/pipeline-augment';
 import { PipelineRunModel } from '../../../models';
-import PipelineTaskLogs from './PipelineTaskLogs';
+import { LogsWrapperComponent } from '../logs/MultiStreamLogs';
 import './PipelineRunLogs.scss';
 
 interface PipelineRunLogsProps {
@@ -130,7 +130,7 @@ class PipelineRunLogs extends React.Component<PipelineRunLogsProps, PipelineRunL
         <div className="odc-pipeline-run-logs__container">
           {activeItem ? (
             <Firehose resources={resources}>
-              <PipelineTaskLogs
+              <LogsWrapperComponent
                 taskName={_.get(taskRunFromYaml, [activeItem, 'pipelineTaskName'], '-')}
               />
             </Firehose>