From 27f38b28a8c51bc932b4f2566b89c3c2a564f7eb Mon Sep 17 00:00:00 2001
From: Nathan Freeman <nathan.dean.freeman@gmail.com>
Date: Tue, 13 Aug 2024 14:41:58 -0500
Subject: [PATCH] ML Edge updates. Styles for pipeline runs

---
 .../pages/MLEdge/Analysis/AnalysisForm.tsx    |  8 +++--
 .../PipelineRuns/PipelineRuns.module.scss     | 28 +++++++++++++++
 .../Pipelines/PipelineRuns/PipelineRuns.tsx   | 35 +++++++++++++------
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/packages/icicle-tapisui-extension/src/pages/MLEdge/Analysis/AnalysisForm.tsx b/packages/icicle-tapisui-extension/src/pages/MLEdge/Analysis/AnalysisForm.tsx
index a1dfd3e7..11c8bd85 100644
--- a/packages/icicle-tapisui-extension/src/pages/MLEdge/Analysis/AnalysisForm.tsx
+++ b/packages/icicle-tapisui-extension/src/pages/MLEdge/Analysis/AnalysisForm.tsx
@@ -350,11 +350,12 @@ const AnalysisForm: React.FC = () => {
                       }
                       onBlur={handleBlur}
                       value={values.model}
-                      className={
-                        errors.model && touched.model ? 'is-invalid' : ''
-                      }
                     >
                       <option value="" label="Select option" />
+                      <option
+                        value="kudu-megadetector-ft"
+                        label="kudu-megadetector-ft"
+                      />
                       <option value="megadetectorv5a" label="megadetectorv5a" />
                       <option value="megadetectorv5b" label="megadetectorv5b" />
                       <option
@@ -442,6 +443,7 @@ const AnalysisForm: React.FC = () => {
                         value="Ohio Small Animals dataset"
                         label="Ohio Small Animals dataset"
                       />
+                      <option value="okavango-delta" label="Okavanga Delta" />
                       <option value="Other" label="Other" />
                     </Input>
                     {values.dataset === 'Other' && (
diff --git a/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.module.scss b/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.module.scss
index 289b72a3..1bb87097 100644
--- a/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.module.scss
+++ b/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.module.scss
@@ -50,6 +50,34 @@
   border-radius: 3px 3px 0 0;
 }
 
+.run-status-text {
+  display: inline-block;
+}
+
+.run-status-icon {
+  display: inline-block;
+  border-radius: 50%;
+  margin-right: 16px;
+  height: 12px;
+  width: 12px;
+}
+
+.run-status-icon-failed {
+  background-color: #d32f2f;
+}
+
+.run-status-icon-completed {
+  background-color: #15bd42;
+}
+
+.run-status-icon-pending {
+  background-color: #ffa726;
+}
+
+.run-status-icon-active {
+  background-color: #ffa726;
+}
+
 .logs {
   white-space: pre-line;
   padding: 16px;
diff --git a/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx b/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx
index 461412f5..84e0cee7 100644
--- a/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx
+++ b/src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { Workflows } from '@tapis/tapis-typescript';
 import { Workflows as Hooks } from '@tapis/tapisui-hooks';
 import { SectionMessage, SectionHeader } from '@tapis/tapisui-common';
 import { QueryWrapper } from '@tapis/tapisui-common';
 import styles from './PipelineRuns.module.scss';
 import { Link, useHistory, useLocation } from 'react-router-dom';
-import { ExpandMore } from '@mui/icons-material';
+import { ExpandMore, Check, Close, DonutLarge } from '@mui/icons-material';
 import {
   Accordion,
   AccordionDetails,
@@ -15,16 +15,25 @@ import {
 } from '@mui/material';
 import { Table } from 'reactstrap';
 
-type PipelineRunProps = {
-  order: number;
+type PipelineRunsProps = {
   groupId: string;
   pipelineId: string;
-  pipelineRun: Workflows.PipelineRun;
 };
 
-type PipelineRunsProps = {
-  groupId: string;
-  pipelineId: string;
+const PipelineRunHeader: React.FC<{
+  status: Workflows.PipelineRun['status'];
+  text: string | undefined;
+}> = ({ status, text = '' }) => {
+  return (
+    <div>
+      <div
+        className={`${styles['run-status-icon']} ${
+          styles[`run-status-icon-${status}`]
+        }`}
+      />
+      <div className={styles['run-status-text']}>{text}</div>
+    </div>
+  );
 };
 
 const PipelineRuns: React.FC<PipelineRunsProps> = ({ groupId, pipelineId }) => {
@@ -58,7 +67,9 @@ const PipelineRuns: React.FC<PipelineRunsProps> = ({ groupId, pipelineId }) => {
                     aria-controls="pipeline-run-summary"
                     id={`pipeline-${pipelineId}-run-summary-${i}`}
                   >
-                    <b>{run.name}</b>
+                    <div>
+                      <PipelineRunHeader status={run.status} text={run.name} />
+                    </div>
                   </AccordionSummary>
                   <AccordionDetails>
                     <Table
@@ -69,7 +80,7 @@ const PipelineRuns: React.FC<PipelineRunsProps> = ({ groupId, pipelineId }) => {
                     >
                       <thead>
                         <tr>
-                          <th>#</th>
+                          <th style={{ textAlign: 'center' }}>#</th>
                           <th>name</th>
                           <th>status</th>
                           <th>duration</th>
@@ -78,7 +89,9 @@ const PipelineRuns: React.FC<PipelineRunsProps> = ({ groupId, pipelineId }) => {
                         </tr>
                       </thead>
                       <tr>
-                        <th scope="row">{pipelineRuns.length - i}</th>
+                        <th style={{ textAlign: 'center' }} scope="row">
+                          {pipelineRuns.length - i}
+                        </th>
                         <td>{run.name}</td>
                         <td>{run.status}</td>
                         <td>{duration}</td>