hise-flow-graphs 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hise-flow-graphs",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "This package manages ReactFlow graphs for HISE.",
   "main": "dist/main.js",
   "repository": "git@github.com:aifimmunology/hise-flow-graphs.git",

package/src/@types/GeneralTypes.ts

@@ -23,8 +23,8 @@ export type Pipeline = {
 };
 
 export enum PipelineStatus {
-  Completed = "Completed",
-  Failure = "Failure",
+  Completed = 'Completed',
+  Failure = 'Failure',
 };
 
 export type IDE = {
@@ -35,4 +35,4 @@ export type IDE = {
 export enum IDEState {
   ACTIVE = 'ACTIVE',
   STOPPED = 'STOPPED',
-}
+};

package/src/components/Certificates/WorkspaceCertificate/ReplicaPipelineNode/PipelineModal.tsx

@@ -1,12 +1,44 @@
 import React from 'react';
-import { ConfirmationModal } from 'hise-components';
+import { ConfirmationModal, Button } from 'hise-components';
+import { Status } from './index';
 import { Pipeline } from '../../../../@types/GeneralTypes';
 
+const Content = ({ pipeline }: { pipeline: Pipeline }) => {
+  return (
+    <>
+      <table className="table">
+        <tbody>
+          <tr>
+            <th scope="row">
+              Status
+            </th>
+            <td>
+              <Status status={pipeline.status} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <Button
+        id="view-pipe-btn"
+        key="view-pipe-btn"
+        color="secondary"
+        target="_blank"
+        to={`/data-mgt/pipeline-dashboard/${pipeline.id}`}
+      >
+        View More
+      </Button>
+    </>
+  );
+};
+
 const PipelineModal = ({ isOpen, toggle, pipeline }: {
   isOpen: boolean,
   toggle: Function,
   pipeline: Pipeline | null,
 }) => {
+  if (!pipeline) return null;
+
   return (
     <ConfirmationModal
       id="about-pipeline-modal"
@@ -14,10 +46,8 @@ const PipelineModal = ({ isOpen, toggle, pipeline }: {
       noSubmit
       isOpen={isOpen}
       onClose={toggle}
-      headerContent="What wil go here"
-      content={
-        pipeline ? JSON.stringify(pipeline) : 'No current pipeline data'
-      }
+      headerContent={`${pipeline.pipelineType} Pipeline`}
+      content={<Content pipeline={pipeline} />}
       cancelButtonText="Close"
     />
   );

package/src/components/Certificates/WorkspaceCertificate/ReplicaPipelineNode/index.tsx

@@ -29,18 +29,22 @@ const RetryPipelineButton = ({ pipeline }: { pipeline: Pipeline | null }) => {
       RETRY?
     </Button>
   );
-}
+};
+
+export const Status = ({ status }: { status: PipelineStatus }) => (
+  <section>
+    <span className={`badge rounded-pill ${statusColor[status]}`}>
+      {status}
+    </span>
+  </section>
+);
 
 const ReplicaPipelineInfo = ({ pipeline }: { pipeline: Pipeline | null }) => {
   if (R.isNil(pipeline) || R.isEmpty(pipeline)) return null;
 
   return (
     <div className="text-center">
-      <section>
-        <span className={`badge rounded-pill ${statusColor[pipeline.status]}`}>
-          {pipeline.status}
-        </span>
-      </section>
+      <Status status={pipeline.status} />
       <RetryPipelineButton pipeline={pipeline} />
     </div>
   );
@@ -61,8 +65,10 @@ const ReplicaPipelineNode = (props: NodeProps) => {
 
   useEffect(() => {
     const getReplicaPipelineInfo = async () => {
+      const id = pipelineId.replace('Pipeline/', '');
+
       await fetch(
-        `${process.env.REACT_APP_API_ROUTE}/ledger/pipeline/${pipelineId}`,
+        `${process.env.REACT_APP_API_ROUTE}/ledger/pipeline/${id}`,
         { method: 'GET', credentials: 'include' },
       )
         .then((async (response) => {

package/src/components/Certificates/WorkspaceCertificate/WorkspaceFileNode/index.tsx

@@ -26,10 +26,10 @@ const WorkspaceFileNode = (props: NodeProps) => {
             toast.success('Copied file into exploration.')
           } else {
             const error: any = await resp.json();
-
-            toggleFileModal();
             toast.error('Unable to copy file: ' + error.Message);
           }
+
+          toggleFileModal();
         });
     } catch (error: any) {
       console.log(error);

package/src/components/Certificates/WorkspaceCertificate/WorkspaceIDENode.tsx

@@ -34,10 +34,10 @@ const WorkspaceIDENode = (props: NodeProps) => {
           toast.success('Copied IDE setup into exploration.')
         } else {
           const error: any = await resp.json();
-
-          toggleIDEModal();
           toast.error('Unable to copy IDE: ' + error.Message);
         }
+
+        toggleIDEModal();
       });
     } catch (error: any) {
       console.log(error);

package/src/components/Certificates/WorkspaceCertificate/WorkspacePipelineNode/helpers.ts

@@ -78,10 +78,10 @@ export const startPipeline = async (
           toast.success('Started pipeline.')
         } else {
           const error: any = await resp.json();
-
-          toggleModal();
           toast.error('Unable to start pipeline: ' + error.Message);
         }
+
+        toggleModal();
       });
   } else {
     refresh();