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

make changes

create coFetchText utility

remove Accept Header

use flex to determine the height of logs container, fix useScrollDirection and useFullscreen, fixe logs.ts to use ref for callbacks

fix unit test

change fullscreen hook implementation to use native fullscreen api instead of screenfull package

full screenD

remove data-id

add null check for fullscreen

fix overflow for logs

make requested changes

support older browser using prefixes

make requesteddd changes

changes

small fix

fix order for steps

fix unit tests

make requested changes

add z-index

make requested changes

changes

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>