Multi-Stream log component

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/fullscreen.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+
+type FullScreenAPI = {
+  requestFullscreen: string;
+  exitFullscreen: string;
+  fullscreenElement: string;
+  fullscreenEnabled: string;
+  fullscreenchange: string;
+  fullscreenerror: string;
+};
+
+const spec: FullScreenAPI = {
+  requestFullscreen: 'requestFullscreen',
+  exitFullscreen: 'exitFullscreen',
+  fullscreenElement: 'fullscreenElement',
+  fullscreenEnabled: 'fullscreenEnabled',
+  fullscreenchange: 'fullscreenchange',
+  fullscreenerror: 'fullscreenerror',
+};
+
+const moz: FullScreenAPI = {
+  requestFullscreen: 'mozRequestFullscreen',
+  exitFullscreen: 'mozExitFullscreen',
+  fullscreenElement: 'mozFullscreenElement',
+  fullscreenEnabled: 'mozFullscreenEnabled',
+  fullscreenchange: 'mozfullscreenchange',
+  fullscreenerror: 'mozfullscreenerror',
+};
+
+const webkit: FullScreenAPI = {
+  requestFullscreen: 'webkitRequestFullscreen',
+  exitFullscreen: 'webkitExitFullscreen',
+  fullscreenElement: 'webkitFullscreenElement',
+  fullscreenEnabled: 'webkitFullscreenEnabled',
+  fullscreenchange: 'webkitfullscreenchange',
+  fullscreenerror: 'webkitfullscreenerror',
+};
+
+const ms: FullScreenAPI = {
+  requestFullscreen: 'msRequestFullscreen',
+  exitFullscreen: 'msExitFullscreen',
+  fullscreenElement: 'msFullscreenElement',
+  fullscreenEnabled: 'msFullscreenEnabled',
+  fullscreenchange: 'msfullscreenchange',
+  fullscreenerror: 'msfullscreenerror',
+};
+
+const allPrefixes: FullScreenAPI[] = [spec, moz, webkit, ms];
+
+const nativeAPI: FullScreenAPI =
+  (function(doc) {
+    return allPrefixes.find((x: FullScreenAPI) => !!doc[x.fullscreenEnabled]);
+  })(document) ?? spec;
+
+export const useFullscreen = <T extends HTMLElement>(): [
+  boolean,
+  (node: T) => void,
+  () => void,
+  boolean,
+] => {
+  const [isFullscreen, setIsFullscreen] = React.useState<boolean>(false);
+  const fullscreenRef = React.useRef<boolean>(isFullscreen);
+  fullscreenRef.current = isFullscreen;
+  const elementRef = React.useRef<any>();
+
+  const listener = React.useCallback((event) => {
+    setIsFullscreen(document[nativeAPI.fullscreenElement] === event.target);
+  }, []);
+
+  const targetCallbackRef = React.useCallback(
+    (node: T) => {
+      if (document[nativeAPI.fullscreenEnabled]) {
+        if (elementRef.current && elementRef.current !== node) {
+          elementRef.current.removeEventListener(nativeAPI.fullscreenchange, listener);
+          elementRef.current.removeEventListener(nativeAPI.fullscreenerror, listener);
+        }
+        if (node != null) {
+          elementRef.current = node;
+          node.addEventListener(nativeAPI.fullscreenchange, listener);
+          node.addEventListener(nativeAPI.fullscreenerror, listener);
+        }
+      }
+    },
+    [listener],
+  );
+
+  const fullscreenToggleCallback = React.useCallback(() => {
+    if (elementRef.current && document[nativeAPI.fullscreenEnabled]) {
+      fullscreenRef.current
+        ? document[nativeAPI.exitFullscreen]()
+        : elementRef.current[nativeAPI.requestFullscreen]();
+    }
+  }, []);
+
+  return [
+    isFullscreen,
+    targetCallbackRef,
+    fullscreenToggleCallback,
+    document[nativeAPI.fullscreenEnabled],
+  ];
+};

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

@@ -1,3 +1,5 @@
 export * from './formik-validation-fix';
 export * from './deep-compare-memoize';
 export * from './document-listener';
+export * from './fullscreen';
+export * from './scroll';

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

@@ -0,0 +1,50 @@
+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 = (): [ScrollDirection, (event) => void] => {
+  const scrollPosition = React.useRef<number>(null);
+  const [scrollDirection, setScrollDirection] = React.useState<ScrollDirection>(null);
+  const handleScroll = React.useCallback(
+    (event) => {
+      const { scrollHeight, scrollTop, clientHeight } = event.target;
+      if (scrollPosition.current !== null) {
+        const direction = getScrollDirection(
+          scrollPosition.current,
+          scrollTop,
+          scrollHeight,
+          clientHeight,
+        );
+        if (direction && direction !== scrollDirection) setScrollDirection(direction);
+      }
+      scrollPosition.current = scrollTop;
+    },
+    [scrollDirection],
+  );
+
+  return [scrollDirection, handleScroll];
+};

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

@@ -1,6 +1,8 @@
 .odc-pipeline-run-logs {
   display: flex;
+  flex: 1;
   width: 100%;
+  padding: var(--pf-global--spacer--xl) 0;
   &__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/LogsWrapperComponent';
 import './PipelineRunLogs.scss';
 
 interface PipelineRunLogsProps {
@@ -129,8 +129,8 @@ class PipelineRunLogs extends React.Component<PipelineRunLogsProps, PipelineRunL
         </div>
         <div className="odc-pipeline-run-logs__container">
           {activeItem ? (
-            <Firehose resources={resources}>
-              <PipelineTaskLogs
+            <Firehose key={activeItem} resources={resources}>
+              <LogsWrapperComponent
                 taskName={_.get(taskRunFromYaml, [activeItem, 'pipelineTaskName'], '-')}
               />
             </Firehose>