Merge pull request #542 from zenml-io/UAT

Uat

Author: Cahllagerfeld

src/api/types.ts

@@ -26,6 +26,9 @@ export type Run = components['schemas']['PipelineRunResponse'];
 // //Repository
 export type Repository = components['schemas']['CodeRepositoryResponse'];
 
+// PipelineBuild
+export type PipelineBuild = components['schemas']['PipelineBuildResponse'];
+
 // ServerInfo
 
 export type ServerInfo = components['schemas']['ServerModel'];

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

@@ -412,11 +412,11 @@ const StepnodeTabHeader: React.FC<any> = ({ node, fetching }) => {
                     </div>
                   )}
                   {node.metadata?.run_metadata !== null &&
-                    Object.entries(node.metadata.run_metadata).map(
+                    Object.values(node.metadata.run_metadata).map(
                       (e: any, index: number) => (
                         <tr key={index}>
-                          <td className="td_key">{e[1]?.key}</td>
-                          <td className="td_value">{e[1]?.value}</td>
+                          <td className="td_key">{e?.body?.key}</td>
+                          <td className="td_value">{e?.body?.value}</td>
                         </tr>
                       ),
                     )}

src/ui/components/runDetailCards/Cards/OrchestratorCard.tsx

@@ -1,54 +1,95 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import DetailCard from '../DetailCard';
 import styles from '../index.module.scss';
 import { Paragraph } from '../../typographies';
-import { Run } from '../../../../api/types';
+import { PipelineBuild, Run } from '../../../../api/types';
+import axios from 'axios';
+import { useSelector } from 'react-redux';
+import { sessionSelectors } from '../../../../redux/selectors';
 
 interface OrchestratorCardProps {
   run: Run;
 }
 
 const OrchestratorCard = ({ run }: OrchestratorCardProps) => {
+  const authToken = useSelector(sessionSelectors.authenticationToken);
+  const [pipelineBuild, setPipelineBuild] = useState<PipelineBuild | null>(
+    null,
+  );
+  async function fetchPipelineBuild(id: string) {
+    try {
+      const response = await axios.get(
+        `${process.env.REACT_APP_BASE_API_URL}/pipeline_builds/${id}`,
+        {
+          headers: {
+            Authorization: `bearer ${authToken}`,
+          },
+        },
+      );
+      setPipelineBuild(response.data);
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  useEffect(() => {
+    if (run.body?.build?.id) {
+      fetchPipelineBuild(run.body?.build.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <DetailCard isInitiallyOpen={true} heading="Orchestrator">
       <div>
         <Paragraph className={styles.card__key}>Orchestrator Run ID</Paragraph>
         <Paragraph className={styles.card__value}>
-          {/* @ts-ignore */}
           {run.metadata?.orchestrator_run_id}
         </Paragraph>
       </div>
       <div>
         <Paragraph className={styles.card__key}>URL</Paragraph>
         <Paragraph className={styles.card__value}>
-          {/* @ts-ignore */}
-          {run.metadata?.orchestrator_url?.value ? (
+          {(run.metadata?.run_metadata?.orchestrator_url as {
+            [key: string]: any;
+          })?.body?.value ? (
             <a
               rel="noopener noreferrer"
-              // @ts-ignore
-              href={run.metadata?.orchestrator_url?.value}
+              href={
+                (run.metadata?.run_metadata?.orchestrator_url as {
+                  [key: string]: any;
+                })?.body?.value
+              }
               target="_blank"
             >
-              {/* @ts-ignore */}
-              {run.metadata?.orchestrator_url?.value}
+              {
+                (run.metadata?.run_metadata?.orchestrator_url as {
+                  [key: string]: any;
+                })?.body?.value
+              }
             </a>
           ) : (
             'n/a'
           )}
         </Paragraph>
       </div>
-      {/* @ts-ignore */}
-      {run.build?.images?.orchestrator && (
+
+      {pipelineBuild?.metadata?.images?.orchestrator && (
         <>
           <div>
             <Paragraph className={styles.card__key}>Image</Paragraph>
             <Paragraph className={styles.card__value}>
-              {/* @ts-ignore */}
-              {run.build?.images?.orchestrator?.image}
+              {
+                (pipelineBuild.metadata?.images?.orchestrator as {
+                  [key: string]: any;
+                })?.image
+              }
             </Paragraph>
           </div>
-          {/* @ts-ignore */}
-          {run.build?.images?.orchestrator?.dockerfile ? (
+
+          {(pipelineBuild.metadata?.images?.orchestrator as {
+            [key: string]: any;
+          })?.dockerfile   ? (
             <div>
               <details>
                 <summary className={styles.card__summary}>
@@ -60,13 +101,13 @@ const OrchestratorCard = ({ run }: OrchestratorCardProps) => {
                   </Paragraph>
                 </summary>
                 <div className={styles.card__detailsContainer}>
-                  {/* @ts-ignore */}
                   <Paragraph
                     style={{ whiteSpace: 'pre-wrap' }}
                     className={styles.card__value}
                   >
-                    {/* @ts-ignore */}
-                    {run.build?.images?.orchestrator?.dockerfile || 'n/a'}
+                    {(pipelineBuild.metadata?.images?.orchestrator as {
+                      [key: string]: any;
+                    })?.dockerfile || 'n/a'}
                   </Paragraph>
                 </div>
               </details>
@@ -82,8 +123,9 @@ const OrchestratorCard = ({ run }: OrchestratorCardProps) => {
               </Paragraph>
             </div>
           )}
-          {/* @ts-ignore */}
-          {run.build?.images?.orchestrator?.requirements ? (
+          {(pipelineBuild.metadata?.images?.orchestrator as {
+            [key: string]: any;
+          })?.requirements ? (
             <div>
               <details>
                 <summary className={styles.card__summary}>
@@ -95,13 +137,13 @@ const OrchestratorCard = ({ run }: OrchestratorCardProps) => {
                   </Paragraph>
                 </summary>
                 <div className={styles.card__detailsContainer}>
-                  {/* @ts-ignore */}
                   <Paragraph
                     style={{ whiteSpace: 'pre-wrap' }}
                     className={styles.card__value}
                   >
-                    {/* @ts-ignore */}
-                    {run.build?.images?.orchestrator?.requirements || 'n/a'}
+                    {(pipelineBuild.metadata?.images?.orchestrator as {
+                      [key: string]: any;
+                    })?.requirements || 'n/a'}
                   </Paragraph>
                 </div>
               </details>
@@ -120,15 +162,13 @@ const OrchestratorCard = ({ run }: OrchestratorCardProps) => {
           <div>
             <Paragraph className={styles.card__key}>ZenML Version</Paragraph>
             <Paragraph className={styles.card__value}>
-              {/* @ts-ignore */}
-              {run.build?.zenml_version || 'n/a'}
+              {pipelineBuild.metadata?.zenml_version || 'n/a'}
             </Paragraph>
           </div>
           <div>
             <Paragraph className={styles.card__key}>Python Version</Paragraph>
             <Paragraph className={styles.card__value}>
-              {/* @ts-ignore */}
-              {run.build?.python_version || 'n/a'}
+              {pipelineBuild.metadata?.python_version || 'n/a'}
             </Paragraph>
           </div>
         </>

src/ui/layouts/settings/Organization/UserBox/UserBox.tsx

@@ -44,7 +44,7 @@ const UserBox = ({ data, permission, setShowPasswordUpdate, setUser }: any) => {
         justifyContent="center"
         marginTop="lg"
       >
-        <Box>
+        <Box style={{ width: '100%' }}>
           <Box className={styles.imageContainer}>
             <FlexBox
               justifyContent="center"