Implement command dialog, update code snippet styles

[arvados.git] / src / views / process-panel / process-subprocesses.tsx

diff --git a/src/views/process-panel/process-subprocesses.tsx b/src/views/process-panel/process-subprocesses.tsx
index 4ab444c298a1ff974c50e3115e0c4b262c993cc7..d3f87701fc73724799a8968df0b5da29d394d4bb 100644 (file)
--- a/src/views/process-panel/process-subprocesses.tsx
+++ b/src/views/process-panel/process-subprocesses.tsx
@@ -5,63 +5,21 @@
 import * as React from 'react';
 import { Grid } from '@material-ui/core';
 import { ProcessSubprocessesCard } from '~/views/process-panel/process-subprocesses-card';
-
-export enum SubprocessesStatus {
-    ACTIVE = 'Active',
-    COMPLETED = 'Completed',
-    QUEUED = 'Queued',
-    FAILED = 'Failed',
-    CANCELED = 'Canceled'
-}
+import { Process } from '~/store/processes/process';
 
 export interface ProcessSubprocessesDataProps {
-    onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
-}
-
-interface SubprocessesProps {
-    title: string;
-    status: string;
-    runtime?: string;
+    subprocesses: Array<Process>;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, process: Process) => void;
 }
 
-export const ProcessSubprocesses = ({ onContextMenu }: ProcessSubprocessesDataProps) => {
+export const ProcessSubprocesses = ({ onContextMenu, subprocesses }: ProcessSubprocessesDataProps) => {
     return <Grid container spacing={16}>
-        {items.map(it =>
-            <Grid item xs={2} key={it.title}>
-                <ProcessSubprocessesCard onContextMenu={onContextMenu} items={it} />
+        {subprocesses.map(subprocess =>
+            <Grid item xs={12} sm={6} md={4} lg={2} key={subprocess.containerRequest.uuid}>
+                <ProcessSubprocessesCard
+                    onContextMenu={event => onContextMenu(event, subprocess)}
+                    subprocess={subprocess} />
             </Grid>
         )}
     </Grid>;
 };
-
-const items: Array<SubprocessesProps> = [
-    {
-        title: 'cos1',
-        status: SubprocessesStatus.ACTIVE
-    },
-    {
-        title: 'cos2',
-        status: SubprocessesStatus.FAILED
-    },
-    {
-        title: 'cos3',
-        status: SubprocessesStatus.QUEUED
-    },
-    {
-        title: 'cos4',
-        status: SubprocessesStatus.CANCELED
-    },
-    {
-        title: 'cos5',
-        status: SubprocessesStatus.COMPLETED
-    },
-    {
-        title: 'cos6',
-        status: SubprocessesStatus.COMPLETED
-    },
-    {
-        title: 'cos7',
-        status: SubprocessesStatus.COMPLETED
-    },
-];
-