added log button in dag

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} metadata={metadata} />
       </div>
     </div>
   );

src/ui/components/lineage/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, metadata?: any) => {
   const dispatch = useDispatch();
   const {
     initialNodes: layoutedNodes,
@@ -142,6 +142,23 @@ export const LayoutFlow: React.FC<any> = (graph: any, runId: any) => {
   return (
     <>
       <div className="controls">
+        <button
+          onClick={() => {
+            window.open(
+              graph?.metadata[0]?.value
+                ? graph?.metadata[0]?.value
+                : 'https://zenml.io/home',
+            );
+
+            // dispatch(
+            //   runsActions.graphForRun({
+            //     runId: graph.runId,
+            //   }),
+            // );
+          }}
+        >
+          Logs
+        </button>
         <button
           onClick={() => {
             dispatch(