ICSHWI-7456: Modify deployment stepper and date time handling/presentation

src/components/common/Helper.js

@@ -26,7 +26,7 @@ export function searchInArray(array, searchText) {
 
 export const formatDate = (value) => {
     if (value) {
-      return moment(value).format('YYYY.MM.DD HH:mm:ss');
+      return moment(value).format('DD/MM/YYYY HH:mm:ss');
     }
     return null;
 }

src/components/deployments/DeploymentDetails.js

@@ -48,8 +48,8 @@ export function DeploymentDetails({ deployment, getDeployment, onDeploymentStart
     "Git reference": deployment.version.sourceVersion,
     host: <Typography><Link to={`/hosts/${deployment.host.csEntryId}`}>{deployment.host.host}</Link></Typography>,
     repository: deployment.version.sourceUrl,
-    "start time": formatDate(deployment.startDate),
-    duration: deployment.duration + " s"
+    "start time": deployment.startDate ? formatDate(deployment.startDate) : "-",
+    "end time": deployment.endDate ? formatDate(deployment.endDate) : "-"
   }
 
   const theme = createMuiTheme();
@@ -67,7 +67,7 @@ export function DeploymentDetails({ deployment, getDeployment, onDeploymentStart
           <CardContent>
             <div className={classes.stepperContainer}>
               <DeploymentStepper activeStep={["created", "pending", "running", "successful"].indexOf(deployment.status.toLowerCase())} deploymentStatus={deployment.status}
-                  deploymentJob={deploymentJob} />
+                deploymentStart={deployment.startDate} />
             </div>
           </CardContent>
           {deployment.manual &&

src/components/deployments/DeploymentJobOutput.js

 import React, { useRef, useState, useEffect } from 'react';
-import { LinearProgress } from '@material-ui/core';
+import { LinearProgress, Typography  } from '@material-ui/core';
 import { useDeploymentJob } from '../../api/SwaggerApi';
 
 export function DeploymentJobOutput({ awxJobId, update }) {
@@ -31,19 +31,36 @@ export function DeploymentJobOutput({ awxJobId, update }) {
   }, [deploymentJob, firstTime]);
 
   return deploymentJob?.job.started ?
-    <div
-      ref={stdoutRef}
-      style={{
-        overflow: "auto",
-        minHeight: "500px",
-        maxHeight: "500px",
+    <div style={{
+        minHeight: "520px",
+        maxHeight: "520px",
         width: "100%",
-        color: "white",
-        backgroundColor: "black",
-        paddingLeft: "10px",
-        paddingRight: "10px",
-      }}
-      dangerouslySetInnerHTML={{ __html: deploymentJob.stdout }}
-    />
+      }}>
+      <div style={{
+        display: "flex",
+        alignItems: "center"
+      }}>
+        <Typography variant="overline">DURATION: </Typography>
+        <Typography style={{
+            marginLeft: "6px",
+          }}>
+          {deploymentJob?.job.elapsed.toFixed(0)} s
+        </Typography>
+      </div>
+      <div
+        ref={stdoutRef}
+        style={{
+          overflow: "auto",
+          minHeight: "500px",
+          maxHeight: "500px",
+          width: "100%",
+          color: "white",
+          backgroundColor: "black",
+          paddingLeft: "10px",
+          paddingRight: "10px",
+        }}
+        dangerouslySetInnerHTML={{ __html: deploymentJob.stdout }}
+      />
+    </div>
     : <div style={{ width: "100%" }}><LinearProgress color="primary" /></div>
 }
\ No newline at end of file

src/components/deployments/DeploymentStepper.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { makeStyles, withStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import {Stepper, Step, StepLabel, StepConnector, Hidden} from '@material-ui/core';
-import { PlayArrow, Check, ErrorOutline } from "@material-ui/icons";
+import { Person, ScheduleOutlined, RotateRightOutlined, CheckCircleOutline } from "@material-ui/icons";
 import { theme } from "../../Theme";
 
 const useStyles = makeStyles({
@@ -89,9 +89,10 @@ function ColorlibStepIcon(props) {
   const { active, completed, error } = props;
 
   const icons = {
-    "active": <PlayArrow />,
-    "completed": <Check />,
-    "error": <ErrorOutline />,
+    1: <Person />,
+    2: <ScheduleOutlined />,
+    3: <RotateRightOutlined />,
+    4: <CheckCircleOutline />,
   };
 
   return (
@@ -102,7 +103,7 @@ function ColorlibStepIcon(props) {
         [classes.error]: error,
       })}
     >
-      {error ? icons["error"] : (completed ? icons["completed"] : active ? icons["active"] : <></>)}
+      {icons[String(props.icon)]}
     </div>
   );
 }
@@ -124,7 +125,7 @@ ColorlibStepIcon.propTypes = {
 
 export function DeploymentStepper(props) {
   const classes = useStyles(theme);
-  let {activeStep, deploymentStatus, deploymentJob} = props;
+  let {activeStep, deploymentStatus, deploymentStart } = props;
   
   const isStepFailed = (step) => {
     if (deploymentStatus === "FAILED") {
@@ -135,7 +136,7 @@ export function DeploymentStepper(props) {
 
   console.log(activeStep);
   if (deploymentStatus === "FAILED") {
-    activeStep = deploymentJob?.job.started ? 2 : 1;
+    activeStep = deploymentStart ? 2 : 1;
   }
   
   activeStep = activeStep === 3 ? 4 : activeStep;