Merge branch 'dev' into QA-Fixes

Author: talhainvenxion

src/ui/components/dag/index.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useService } from './useService';
 import { LayoutFlow } from '../lineage';
 import { FullWidthSpinner } from '../spinners';
+import { useSelector } from '../../hooks';
+import { sessionSelectors } from '../../../redux/selectors';
+import axios from 'axios';
 
 const styles = {
   container: { width: '100%', height: '100%' },
@@ -12,16 +15,38 @@ export const DAG: React.FC<{ runId: TId; fetching?: boolean }> = ({
   runId,
   fetching,
 }) => {
+  const [metadata, setMetaData] = useState([] as any);
+
+  const authToken = useSelector(sessionSelectors.authenticationToken);
+
   const { graph } = useService({ runId });
 
+  useEffect(() => {
+    fetchMetaData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runId]);
+
+  const fetchMetaData = async () => {
+    const response = await axios.get(
+      `${process.env.REACT_APP_BASE_API_URL}/run-metadata?pipeline_run_id=${runId}&key=orchestrator_url`,
+      {
+        headers: {
+          Authorization: `bearer ${authToken}`,
+        },
+      },
+    );
+
+    setMetaData(response?.data?.items); //Setting the response into state
+  };
+
   if (fetching) {
     return <FullWidthSpinner color="black" size="md" />;
   }
-
+  // console.log(metadata, 'metadatametadata');
   return (
     <div style={styles.container}>
       <div style={styles.dag}>
-        <LayoutFlow runId={runId} graph={graph} />
+        <LayoutFlow graph={graph} runId={runId} metadata={metadata} />
       </div>
     </div>
   );

src/ui/components/icons/assets/Logs.svg

@@ -44,7 +44,7 @@ import { ReactComponent as Cached } from './assets/Cached.svg';
 import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
 import { ReactComponent as Edit } from './assets/Edit.svg';
 import { ReactComponent as Search } from './assets/Search.svg';
-
+import { ReactComponent as Logs } from './assets/Logs.svg';
 //icons for stackComponents
 // import { ReactComponent as PuzzlePiece } from './assets/PuzzlePiece.svg';
 import { ReactComponent as Folders } from './assets/Folders.svg';
@@ -172,7 +172,7 @@ const icons = {
   edit: createIcon({ Component: Edit }),
   search: createIcon({ Component: Search }),
   run: createIcon({ Component: Run, useStroke: true }),
-
+  logs: createIcon({ Component: Logs, useStroke: true }),
   //icons for stackComponents
   artifact_store: createIcon({ Component: Folders, useStroke: true }),
   alerter: createIcon({ Component: ChatDots, useStroke: true }),

src/ui/components/icons/index.tsx

@@ -110,7 +110,7 @@ const getLayoutedElements = (
 
 const nodeTypes = { step: StepNode, artifact: ArtifactNode };
 
-export const LayoutFlow: React.FC<any> = (graph: any, runId: any) => {
+export const LayoutFlow: React.FC<any> = (graph: any) => {
   const dispatch = useDispatch();
   const {
     initialNodes: layoutedNodes,
@@ -153,9 +153,19 @@ export const LayoutFlow: React.FC<any> = (graph: any, runId: any) => {
         >
           Refresh
         </button>
-
+        <button onClick={() => setLegend(!legend)}>Legend</button>
+        <button
+          onClick={() => {
+            window.open(
+              graph?.metadata[0]?.value
+                ? graph?.metadata[0]?.value
+                : 'https://zenml.io/home',
+            );
+          }}
+        >
+          Orchestrator Logs
+        </button>
         <div style={{ position: 'relative' }}>
-          <button onClick={() => setLegend(!legend)}>Legend</button>
           <div className="legend" style={{ display: legend ? '' : 'none' }}>
             <span>
               <Analysis /> <span>Data Analysis Artifact</span>