cr changes

Feature #13859

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/common/formatters.ts b/src/common/formatters.ts
index 49e0690515e868a4b1145c79ccbd2ede9d813314..a7680a04544f26839dbd3f29bb7e1b56b04073ad 100644 (file)
--- a/src/common/formatters.ts
+++ b/src/common/formatters.ts
@@ -19,6 +19,17 @@ export const formatFileSize = (size?: number) => {
     return "";
 };
 
+export const msToTime = (time: number) => {
+    const minutes = Math.floor(time / (1000 * 60) % 60).toFixed(0);
+    const hours = Math.floor(time / (1000 * 60 * 60)).toFixed(0);
+
+    return hours + "h " + minutes + "m";
+};
+
+export const getDiffTime = (endTime: string, startTime: string) => {
+    return new Date(endTime).getTime() - new Date(startTime).getTime();
+};
+
 export const formatProgress = (loaded: number, total: number) => {
     const progress = loaded >= 0 && total > 0 ? loaded * 100 / total : 0;
     return `${progress.toFixed(2)}%`;

diff --git a/src/store/processes/process.ts b/src/store/processes/process.ts
index 0f12b3fe2f30c3f9821292b946ee0fbe2c74509b..98a84fd23d09bde20c8b4eea737ecfdcedc0974d 100644 (file)
--- a/src/store/processes/process.ts
+++ b/src/store/processes/process.ts
@@ -7,6 +7,7 @@ import { ContainerResource } from '../../models/container';
 import { ResourcesState, getResource } from '~/store/resources/resources';
 import { filterResources } from '../resources/resources';
 import { ResourceKind, Resource } from '~/models/resource';
+import { getDiffTime } from '~/common/formatters';
 
 export interface Process {
     containerRequest: ContainerRequestResource;
@@ -41,6 +42,11 @@ export const getSubprocesses = (uuid: string) => (resources: ResourcesState) =>
     return [];
 };
 
+export const getProcessRuntime = (subprocess: Process) =>
+    subprocess.container
+        ? getDiffTime(subprocess.container.finishedAt || '', subprocess.container.startedAt || '')
+        : 0;
+
 export const getProcessStatus = (process: Process) =>
     process.container
         ? process.container.state

diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 49ce98c03e4bd11dcad78b7c4dbbdc70029543f8..443dbebb5cc944bdb8c26fc038d11940b3fec110 100644 (file)
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -10,12 +10,13 @@ import { ProcessIcon } from '~/components/icon/icon';
 import { Process } from '~/store/processes/process';
 import { SubprocessesCard } from './subprocesses-card';
 import { ProcessSubprocesses } from '~/views-components/process-subprocesses/process-subprocesses';
-import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses';
+import { SubprocessesStatus } from '~/views/process-panel/process-subprocesses-card';
 
 type CssRules = 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
 
 export interface ProcessPanelRootDataProps {
     process?: Process;
+    subprocesses: Array<Process>;
 }
 
 export interface ProcessPanelRootActionProps {
@@ -63,7 +64,10 @@ export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
                     onToggle={() => { return; }}
                 />
             </Grid>
-            <ProcessSubprocesses />
+            <Grid item xs={12}>
+                <ProcessSubprocesses
+                    subprocesses={props.subprocesses} />
+            </Grid>
         </Grid>
         : <Grid container
             alignItems='center'

diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index 421945fed7f1756c1a6f8794b6e5e018d2a27b42..9f1d0adb7a2fae5314e2b2b55136624060519613 100644 (file)
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import { RootState } from '~/store/store';
 import { connect } from 'react-redux';
-import { getProcess } from '~/store/processes/process';
+import { getProcess, getSubprocesses } from '~/store/processes/process';
 import { Dispatch } from 'redux';
 import { openProcessContextMenu } from '~/store/context-menu/context-menu-actions';
 import { matchProcessRoute } from '~/routes/routes';
@@ -16,7 +16,8 @@ const mapStateToProps = ({ router, resources }: RootState): ProcessPanelRootData
     const match = matchProcessRoute(pathname);
     const uuid = match ? match.params.id : '';
     return {
-        process: getProcess(uuid)(resources)
+        process: getProcess(uuid)(resources),
+        subprocesses: getSubprocesses(uuid)(resources)
     };
 };
 

diff --git a/src/views/process-panel/process-subprocesses-card.tsx b/src/views/process-panel/process-subprocesses-card.tsx
index 17c44246adab4d0a2dc8f101acd77e7cc8f645a8..72104a70fb90f4921603451c6725d4a533386e45 100644 (file)
--- a/src/views/process-panel/process-subprocesses-card.tsx
+++ b/src/views/process-panel/process-subprocesses-card.tsx
@@ -12,6 +12,8 @@ import { ArvadosTheme } from '~/common/custom-theme';
 import { MoreOptionsIcon } from '~/components/icon/icon';
 import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
 import { getBackgroundColorStatus } from '~/views/process-panel/process-panel-root';
+import { Process, getProcessStatus, getProcessRuntime } from '~/store/processes/process';
+import { msToTime } from '~/common/formatters';
 
 export type CssRules = 'label' | 'value' | 'title' | 'content' | 'action' | 'options' | 'status' | 'rightSideHeader' | 'titleHeader'
     | 'header' | 'headerActive' | 'headerCompleted' | 'headerQueued' | 'headerFailed' | 'headerCanceled';
@@ -73,23 +75,37 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
 });
 
+export enum SubprocessesStatus {
+    ACTIVE = 'Active',
+    COMPLETED = 'Completed',
+    QUEUED = 'Queued',
+    FAILED = 'Failed',
+    CANCELED = 'Canceled'
+}
+
+export interface SubprocessItemProps {
+    title: string;
+    status: string;
+    runtime?: string;
+}
+
 export interface ProcessSubprocessesCardDataProps {
     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
-    items: any;
+    subprocess: Process;
 }
 
 type ProcessSubprocessesCardProps = ProcessSubprocessesCardDataProps & WithStyles<CssRules>;
 
 export const ProcessSubprocessesCard = withStyles(styles)(
-    ({ classes, onContextMenu, items }: ProcessSubprocessesCardProps) => {
+    ({ classes, onContextMenu, subprocess }: ProcessSubprocessesCardProps) => {
         return <Card>
             <CardHeader
-                className={classnames([classes.header, getBackgroundColorStatus(items.status, classes)])}
+                className={classnames([classes.header, getBackgroundColorStatus(getProcessStatus(subprocess), classes)])}
                 classes={{ content: classes.title, action: classes.action }}
                 action={
                     <div className={classes.rightSideHeader}>
                         <Typography noWrap variant="body2" className={classes.status}>
-                            {items.status}
+                            {getProcessStatus(subprocess)}
                         </Typography>
                         <IconButton
                             className={classes.options}
@@ -100,15 +116,15 @@ export const ProcessSubprocessesCard = withStyles(styles)(
                     </div>
                 }
                 title={
-                    <Tooltip title={items.title}>
+                    <Tooltip title={subprocess.containerRequest.name}>
                         <Typography noWrap variant="body2" className={classes.titleHeader}>
-                            {items.title}
+                            {subprocess.containerRequest.name}
                         </Typography>
                     </Tooltip>
                 } />
             <CardContent className={classes.content}>
                 <DetailsAttribute classLabel={classes.label} classValue={classes.value}
-                    label='Runtime' value="0h 2m" />
+                    label="Runtime" value={msToTime(getProcessRuntime(subprocess))} />
             </CardContent>
         </Card>;
     });
\ No newline at end of file

diff --git a/src/views/process-panel/process-subprocesses.tsx b/src/views/process-panel/process-subprocesses.tsx
index 4ab444c298a1ff974c50e3115e0c4b262c993cc7..cfd517cf6cfd2ded3386f7b11b2089581e03e375 100644 (file)
--- a/src/views/process-panel/process-subprocesses.tsx
+++ b/src/views/process-panel/process-subprocesses.tsx
@@ -5,63 +5,19 @@
 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 {
+    subprocesses: Array<Process>;
     onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
 }
 
-interface SubprocessesProps {
-    title: string;
-    status: string;
-    runtime?: string;
-}
-
-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={2} key={subprocess.containerRequest.uuid}>
+                <ProcessSubprocessesCard onContextMenu={onContextMenu} 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
-    },
-];
-