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
- },
-];
-