feat: display logs in steps detail (#401)

Author: Cahllagerfeld

src/ui/components/lineage/Sidebar.tsx

@@ -9,7 +9,6 @@ import {
   fetchArtifactData,
   // fetchArtifactVisualizationSize,
   fetchStepData,
-  // fetchStepLogs,
 } from '../../layouts/runs/RunDetail/sidebarServices';
 import styles from './index.module.scss';
 // import { runsActions } from '../../../redux/actions';
@@ -27,16 +26,13 @@ const Sidebar: React.FC<any> = ({ selectedNode }) => {
   const [isStepNode, setIsStepNode] = useState(true);
   const [artifact, setArtifact] = useState([] as any);
   const [step, setStep] = useState([] as any);
-  const [logs] = useState([] as any);
   const sidebar_ref = useRef<HTMLInputElement>(null); //eslint-disable-line
   const authToken = useSelector(sessionSelectors.authenticationToken);
 
   async function FetchData(type: boolean) {
     if (type) {
       const data = await fetchStepData(selectedNode, authToken);
-      // const _logs = await fetchStepLogs(selectedNode, authToken);
       setStep(data);
-      // setLogs(_logs);
       setFetching(false);
     } else {
       const data = await fetchArtifactData(selectedNode, authToken);
@@ -107,7 +103,7 @@ const Sidebar: React.FC<any> = ({ selectedNode }) => {
       </div>
       <div className={`${styles.bodyContainer}`}>
         {isStepNode ? (
-          <StepnodeTabHeader node={step} logs={logs} fetching={fetching} />
+          <StepnodeTabHeader node={step} fetching={fetching} />
         ) : (
           <ArtifactTabHeader node={artifact} fetching={fetching} />
         )}

src/ui/components/lineage/sidebarTabsSwitchers/DisplayLogs.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from '../index.module.scss';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { fetchStepLogs } from '../../../layouts/runs/RunDetail/sidebarServices';
+import { useSelector } from 'react-redux';
+import { sessionSelectors } from '../../../../redux/selectors';
+import { FullWidthSpinner } from '../../spinners';
+
+type DisplayLogsProps = { selectedNode: any };
+
+const DisplayLogs = ({ selectedNode }: DisplayLogsProps) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  const authToken = useSelector(sessionSelectors.authenticationToken);
+  const [logs, setLogs] = useState('');
+  const [fetching, setFetching] = useState(true);
+
+  async function fetchLogs(node: any) {
+    const logs = await fetchStepLogs(node, authToken);
+    setLogs(logs);
+    setFetching(false);
+  }
+
+  useEffect(() => {
+    if (selectedNode === null) return;
+    fetchLogs(selectedNode.id).then(() => {
+      setFetching(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (divRef.current) {
+      const preElement = divRef.current.querySelector('pre');
+      if (preElement) {
+        preElement.scrollTop = preElement.scrollHeight;
+      }
+    }
+  }, [fetching, logs]);
+
+  useEffect(() => {
+    let pollingInterval: NodeJS.Timeout;
+    if (selectedNode === null) return;
+    if (!fetching) {
+      pollingInterval = setInterval(() => {
+        fetchLogs(selectedNode.id);
+      }, 2000);
+    }
+    return () => clearInterval(pollingInterval);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetching]);
+
+  return (
+    <>
+      {fetching ? (
+        <div className={styles.FullWidthSpinnerContainer}>
+          <FullWidthSpinner color="black" size="md" />
+          <p style={{ fontFamily: 'Rubik', fontSize: '14px' }}>
+            Loading Logs, please wait...
+          </p>
+        </div>
+      ) : (
+        <div ref={divRef} className={styles.codeContainer}>
+          <SyntaxHighlighter
+            customStyle={{ width: '100%', height: '80%', fontSize: 16 }}
+            wrapLines={true}
+            language="text"
+            style={okaidia}
+          >
+            {logs ? logs : 'No Logs Avaialable'}
+          </SyntaxHighlighter>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default DisplayLogs;

src/ui/components/lineage/sidebarTabsSwitchers/stepTabSwitcher.tsx

@@ -6,6 +6,7 @@ import styles from '../index.module.scss';
 import stepStyles from './artifact.module.scss';
 import { FullWidthSpinner } from '../../spinners';
 import { formatDateToDisplayOnTable } from '../../../../utils';
+import DisplayLogs from './DisplayLogs';
 
 const stylesActive = {
   opacity: 1,
@@ -19,10 +20,6 @@ const stylesInActive = {
 };
 
 const tabs = [
-  //   {
-  //     title: 'Logs',
-  //     case: '__LOG',
-  //   },
   {
     title: 'Attributes',
     case: '__ATTRIBUTE',
@@ -31,6 +28,10 @@ const tabs = [
     title: 'Code',
     case: '__CODE',
   },
+  {
+    title: 'Logs',
+    case: '__LOG',
+  },
 ];
 
 // const TextInput: React.FC<any> = ({ label, value }) => {
@@ -74,7 +75,7 @@ const tabs = [
 //   );
 // };
 
-const StepnodeTabHeader: React.FC<any> = ({ node, logs, fetching }) => {
+const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
   const [show, setShow] = useState('__ATTRIBUTE');
   const [dynamicWidth, setDynamicWidth] = useState<number | undefined>(79);
   const [dynamicLeft, setDynamicLeft] = useState<number | undefined>(21);
@@ -138,7 +139,10 @@ const StepnodeTabHeader: React.FC<any> = ({ node, logs, fetching }) => {
       ></div>
 
       {fetching ? (
-        <div className={`${styles.FullWidthSpinnerContainer}`}>
+        <div
+          style={{ minHeight: '100%' }}
+          className={`${styles.FullWidthSpinnerContainer}`}
+        >
           <FullWidthSpinner color="black" size="md" />
           <p style={{ fontFamily: 'Rubik', fontSize: '14px' }}>
             Loading Step. Please wait
@@ -399,20 +403,7 @@ const StepnodeTabHeader: React.FC<any> = ({ node, logs, fetching }) => {
           ) : (
             ''
           )}
-          {/* {show === '__LOG' ? (
-            <div className={styles.codeContainer}>
-              <SyntaxHighlighter
-                customStyle={{ width: '100%', height: '80%', fontSize: 16 }}
-                wrapLines={true}
-                language="python"
-                style={okaidia}
-              >
-                {logs ? logs : 'No Logs Avaialable'}
-              </SyntaxHighlighter>
-            </div>
-          ) : (
-            ''
-          )} */}
+          {show === '__LOG' ? <DisplayLogs selectedNode={node} /> : ''}
         </>
       )}
     </>

src/ui/layouts/runs/RunDetail/sidebarServices.tsx

@@ -20,16 +20,13 @@ export const fetchStepData = async (selectedNode: any, authToken: any) => {
   return data;
 };
 
-export const fetchStepLogs = async (selectedNode: any, authToken: any) => {
+export const fetchStepLogs = async (id: string, authToken: any) => {
   const logs = axios
-    .get(
-      `${process.env.REACT_APP_BASE_API_URL}/steps/${selectedNode.execution_id}/logs`,
-      {
-        headers: {
-          Authorization: `bearer ${authToken}`,
-        },
+    .get(`${process.env.REACT_APP_BASE_API_URL}/steps/${id}/logs`, {
+      headers: {
+        Authorization: `bearer ${authToken}`,
       },
-    )
+    })
     .then((response) => {
       return response?.data;
     })