create Multi-Stream log component

commit

add http request

a

make reuested changes

add vars

fix lint errors

add unit tests

remove comments

frontend/packages/console-shared/src/co-fetch/co-fetch.ts

@@ -0,0 +1,29 @@
+import store from '@console/internal/redux';
+import { coFetch } from '@console/internal/co-fetch';
+
+export const coFetchText = (url: string) => {
+  const headers = new Headers();
+  headers.set('Accept', 'application/json');
+  const { kind: impersonateKind, name: impersonateName } = store
+    .getState()
+    .UI.get('impersonate', {});
+  if ((impersonateKind === 'User' || impersonateKind === 'Group') && impersonateKind) {
+    // Even if we are impersonating a group, we still need to set Impersonate-User to something or k8s will complain
+    headers.set('Impersonate-User', impersonateName);
+    if (impersonateKind === 'Group') {
+      headers.set('Impersonate-Group', impersonateName);
+    }
+  }
+  headers.set('method', 'GET');
+  return coFetch(url, headers).then((response) => {
+    if (!response.ok) {
+      return response.text();
+    }
+
+    // If the response has no body, return promise that resolves with an empty object
+    if (response.headers.get('Content-Length') === '0') {
+      return Promise.resolve({});
+    }
+    return response.text();
+  });
+};

frontend/packages/console-shared/src/co-fetch/index.ts

@@ -0,0 +1 @@
+export * from './co-fetch';

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

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

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

@@ -5,3 +5,4 @@ export * from './types';
 export * from './utils';
 export * from './hooks';
 export * from './sorts';
+export * from './co-fetch';

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>

frontend/packages/dev-console/src/components/pipelineruns/logs/Logs.scss

@@ -0,0 +1,14 @@
+.odc-logs {
+  // color: var(--pf-global--BackgroundColor--100);
+  margin: 0;
+  padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
+
+  &__name {
+    font-weight: var(--pf-global--FontWeight--bold);
+    text-transform: uppercase;
+  }
+
+  &__content {
+    padding-left: var(--pf-global--spacer--md);
+  }
+}