Pipeline run styles

src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.module.scss

@@ -41,3 +41,19 @@
 .task-executions p {
   padding: 8px;
 }
+
+.runs {
+  border-bottom: 1px solid #CCCCCC;
+}
+
+.runs-table {
+  border-radius: 3px 3px 0 0
+}
+
+.logs {
+  white-space: pre-line;
+  padding: 16px;
+  background: #343A40;
+  color: #FFFFFF;
+  border-radius: 0 0 3px 3px;
+}

src/app/Workflows/Pipelines/PipelineRuns/PipelineRuns.tsx

@@ -4,10 +4,10 @@ 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 { Accordion, AccordionDetails, AccordionSummary, Button, AccordionActions } from '@mui/material';
 import { Table } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import { Toolbar } from '../../_components';
-import { RunPipelineModal } from '../../_components/Toolbar/RunPipelineModal';
 
 type PipelineRunProps = {
   order: number;
@@ -16,30 +16,6 @@ type PipelineRunProps = {
   pipelineRun: Workflows.PipelineRun;
 };
 
-const PipelineRun: React.FC<PipelineRunProps> = ({
-  order,
-  groupId,
-  pipelineId,
-  pipelineRun,
-}) => {
-  return (
-    <tr>
-      <td className={styles['center']}>{order}</td>
-      <td>{pipelineRun.status}</td>
-      <td>{pipelineRun.started_at}</td>
-      <td>{pipelineRun.last_modified}</td>
-      <td>{pipelineRun.uuid}</td>
-      <td className={styles['center']}>
-        <Link
-          to={`/workflows/pipelines/${groupId}/${pipelineId}/runs/${pipelineRun.uuid}`}
-        >
-          View
-        </Link>
-      </td>
-    </tr>
-  );
-};
-
 type PipelineRunsProps = {
   groupId: string;
   pipelineId: string;
@@ -55,57 +31,65 @@ const PipelineRuns: React.FC<PipelineRunsProps> = ({ groupId, pipelineId }) => {
     a.started_at! < b.started_at! ? 1 : a.started_at! > b.started_at! ? -1 : 0
   );
   const [showModal, setShowModal] = useState<boolean>(false);
-  const toggle = () => {
-    setShowModal(!showModal);
-  };
+  const history = useHistory()
+  const { pathname } = useLocation()
 
   return (
     <div className={styles['grid']}>
-      <SectionHeader>{pipelineId}</SectionHeader>
-      <Toolbar
-        buttons={['runpipeline']}
-        pipelineId={pipelineId}
-        groupId={groupId}
-      />
       <QueryWrapper isLoading={isLoading} error={error}>
-        <div id="pipelineruns">
+        <div id="pipelineruns" className={styles["runs"]}>
           {pipelineRuns.length ? (
-            <Table dark bordered style={{ margin: 0 }}>
-              <thead>
-                <tr>
-                  <th className={styles['center']}>#</th>
-                  <th>status</th>
-                  <th>started at</th>
-                  <th>last modified</th>
-                  <th>uuid</th>
-                  <th>executions</th>
-                </tr>
-              </thead>
-              <tbody>
-                {pipelineRuns.map((pipelineRun, i) => (
-                  <PipelineRun
-                    order={pipelineRuns.length - i}
-                    groupId={groupId}
-                    pipelineId={pipelineId}
-                    pipelineRun={pipelineRun}
-                  />
-                ))}
-              </tbody>
-            </Table>
+            pipelineRuns.map((run, i) => {
+              const startedAt = Date.parse(run.started_at!) 
+              const lastModified = Date.parse(run.last_modified!)
+              const duration = `${Math.floor((lastModified - startedAt)/1000/60)}m ${Math.floor(((lastModified - startedAt)/1000)%60)}s` 
+              return (
+                <Accordion defaultExpanded={i === 0 ? true : undefined}>
+                  <AccordionSummary
+                    expandIcon={<ExpandMore />}
+                    aria-controls="pipeline-run-summary"
+                    id={`pipeline-${pipelineId}-run-summary-${i}`}
+                  >
+                    <b>{run.name}</b>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Table dark bordered style={{ margin: 0}} className={styles["runs-table"]}>
+                      <thead>
+                        <tr>
+                          <th>#</th>
+                          <th>name</th>
+                          <th>status</th>
+                          <th>duration</th>
+                          <th>started</th>
+                          <th>last modified</th>
+                        </tr>
+                      </thead>
+                      <tr>
+                        <th scope="row">{pipelineRuns.length - i}</th>
+                        <td>{run.name}</td>
+                        <td>{run.status}</td>
+                        <td>{duration}</td>
+                        <td>{run.started_at}</td>
+                        <td>{run.last_modified}</td>
+                      </tr>
+                    </Table>
+                    <pre className={styles["logs"]}>
+                      {run.logs}
+                    </pre>
+                  </AccordionDetails>
+                  <AccordionActions>
+                    <Button variant="outlined" onClick={() => {history.push(`${pathname}/${run.uuid}`)}}>View Task Executions</Button>
+                  </AccordionActions>
+                </Accordion>
+              )
+            })
           ) : (
             <SectionMessage type="info">
               No runs to show for pipeline '{pipelineId}'
             </SectionMessage>
           )}
         </div>
       </QueryWrapper>
-      {/* {showModal && groupId && pipelineId && (
-        <RunPipelineModal
-          groupId={groupId}
-          pipelineId={pipelineId}
-          toggle={toggle}
-        />
-      )} */}
     </div>
   );
 };