From 2c8a2efbe5bac7df0a13a17ed773102d95fd1111 Mon Sep 17 00:00:00 2001
From: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>
Date: Tue, 18 Dec 2018 08:17:18 +0100
Subject: [PATCH] PR fixes, extract format start and finished dates

Feature #14434

Arvados-DCO-1.1-Signed-off-by: Pawel Kromplewski <pawel.kromplewski@contractors.roche.com>
---
 src/common/formatters.ts                      |  2 +-
 .../process-information-card.tsx              | 34 +++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/common/formatters.ts b/src/common/formatters.ts
index ae50ee8a..60e6cd59 100644
--- a/src/common/formatters.ts
+++ b/src/common/formatters.ts
@@ -4,7 +4,7 @@
 
 import { PropertyValue } from "~/models/search-bar";
 
-export const formatDate = (isoDate?: string) => {
+export const formatDate = (isoDate?: string | null) => {
     if (isoDate) {
         const date = new Date(isoDate);
         const text = date.toLocaleString();
diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index 9e8b783f..52f13987 100644
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -76,24 +76,27 @@ export interface ProcessInformationCardDataProps {
 type ProcessInformationCardProps = ProcessInformationCardDataProps & WithStyles<CssRules, true>;
 
 export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
-    ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, navigateToWorkflow }: ProcessInformationCardProps) =>
-        <Card className={classes.card}>
+    ({ classes, process, onContextMenu, theme, openProcessInputDialog, navigateToOutput, navigateToWorkflow }: ProcessInformationCardProps) => {
+        const { container } = process;
+        const startedAt = container ? formatDate(container.startedAt) : 'N/A';
+        const finishedAt = container ? formatDate(container.finishedAt) : 'N/A';
+        return <Card className={classes.card}>
             <CardHeader
                 classes={{
                     content: classes.title,
                     avatar: classes.avatar
                 }}
-                avatar={<ProcessIcon className={classes.iconHeader} />}
+                avatar={<ProcessIcon className={classes.iconHeader}/>}
                 action={
                     <div>
                         <Chip label={getProcessStatus(process)}
                               className={classes.chip}
-                              style={{backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme)}} />
+                              style={{backgroundColor: getProcessStatusColor(getProcessStatus(process), theme as ArvadosTheme)}}/>
                         <Tooltip title="More options" disableFocusListener>
                             <IconButton
                                 aria-label="More options"
                                 onClick={event => onContextMenu(event)}>
-                                <MoreOptionsIcon />
+                                <MoreOptionsIcon/>
                             </IconButton>
                         </Tooltip>
                     </div>
@@ -110,33 +113,34 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
                         <Typography noWrap variant="body2" color='inherit'>
                             {getDescription(process)}
                         </Typography>
-                    </Tooltip>} />
+                    </Tooltip>}/>
             <CardContent className={classes.content}>
                 <Grid container>
                     <Grid item xs={6}>
                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                                           label='From'
-                                          value={process.container ? formatDate(process.container.startedAt!) : 'N/A'} />
+                                          value={process.container ? formatDate(startedAt) : 'N/A'}/>
                         <DetailsAttribute classLabel={classes.label} classValue={classes.value}
                                           label='To'
-                                          value={process.container ? formatDate(process.container.finishedAt!) : 'N/A'} />
+                                          value={process.container ? formatDate(finishedAt) : 'N/A'}/>
                         {process.containerRequest.properties.templateUuid &&
-                            <DetailsAttribute label='Workflow' classLabel={classes.label} classValue={classes.link}
-                                              value={process.containerRequest.properties.templateUuid}
-                                              onValueClick={() => navigateToWorkflow(process.containerRequest.properties.templateUuid)}
-                                              />}
+                        <DetailsAttribute label='Workflow' classLabel={classes.label} classValue={classes.link}
+                                          value={process.containerRequest.properties.templateUuid}
+                                          onValueClick={() => navigateToWorkflow(process.containerRequest.properties.templateUuid)}
+                        />}
                     </Grid>
                     <Grid item xs={6}>
                         <span onClick={() => navigateToOutput(process.containerRequest.outputUuid!)}>
-                            <DetailsAttribute classLabel={classes.link} label='Outputs' />
+                            <DetailsAttribute classLabel={classes.link} label='Outputs'/>
                         </span>
                         <span onClick={() => openProcessInputDialog(process.containerRequest.uuid)}>
-                            <DetailsAttribute classLabel={classes.link} label='Inputs' />
+                            <DetailsAttribute classLabel={classes.link} label='Inputs'/>
                         </span>
                     </Grid>
                 </Grid>
             </CardContent>
-        </Card>
+        </Card>;
+    }
 );
 
 const getDescription = (process: Process) =>
-- 
2.30.2