comment

microsoft · Oct 21, 2020 · 2d2a7ff · 2d2a7ff
1 parent 75669b4
commit 2d2a7ff
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/src/webportal/src/app/job/job-view/fabric/job-detail.jsx b/src/webportal/src/app/job/job-view/fabric/job-detail.jsx
@@ -264,7 +264,7 @@ class JobDetail extends React.Component {
                           />
                         </Stack>
                         <Stack gap='m'>
-                          <Text>Attempt Created Time</Text>
+                          <Text>Attempt Creation Time</Text>
                           <Text>
                             {isNil(jobInfo.jobStatus.appCreatedTime)
                               ? 'N/A'

diff --git a/src/webportal/src/app/job/job-view/fabric/task-attempt.jsx b/src/webportal/src/app/job/job-view/fabric/task-attempt.jsx
@@ -82,18 +82,17 @@ const TaskAttemptPage = () => {
             </ActionButton>
           </div>
           <Card style={{ padding: 10 }}>
-            <Stack gap='m'>
-              <Stack horizontal gap='s1' padding='s2'>
+            <Stack>
+              <Stack horizontal gap='m' padding='m'>
                 <Text>Job Name:</Text>
                 <Text>{jobName}</Text>
               </Stack>
               <HorizontalLine />
-              <Stack horizontal gap='s1' padding='s2'>
-                <Text>Job Attempt Index:</Text>
-                <Text>{jobAttemptIndex}</Text>
-              </Stack>
-              <HorizontalLine />
-              <Stack horizontal gap='l1' padding='s2'>
+              <Stack horizontal gap='l1' padding='m'>
+                <Stack gap='m'>
+                  <Text>Job Attempt Index</Text>
+                  <Text>{jobAttemptIndex}</Text>
+                </Stack>
                 <Stack gap='m'>
                   <Text>Task Role</Text>
                   <Text>{taskRoleName}</Text>
@@ -106,6 +105,9 @@ const TaskAttemptPage = () => {
                   <Text>Task Uid</Text>
                   <Text>{taskStatus.taskUid}</Text>
                 </Stack>
+              </Stack>
+              <HorizontalLine />
+              <Stack horizontal gap='l1' padding='m'>
                 <Stack gap='m'>
                   <Text>Task State</Text>
                   <StatusBadge status={capitalize(taskStatus.taskState)} />
@@ -114,6 +116,27 @@ const TaskAttemptPage = () => {
                   <Text>Task Retries</Text>
                   <Text>{taskStatus.retries}</Text>
                 </Stack>
+                <Stack gap='m'>
+                  <Text>Task Creation Time</Text>
+                  <Text>
+                    {isNil(taskStatus.createdTime)
+                      ? 'N/A'
+                      : DateTime.fromMillis(
+                          taskStatus.createdTime,
+                        ).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS)}
+                  </Text>
+                </Stack>
+                <Stack gap='m'>
+                  <Text>Task Duration</Text>
+                  <Text>
+                    {getDurationString(
+                      getTimeDuration(
+                        taskStatus.createdTime,
+                        taskStatus.completedTime,
+                      ),
+                    )}
+                  </Text>
+                </Stack>
                 <Stack gap='m'>
                   <Text>Task Running Start Time</Text>
                   <Text>

diff --git a/src/webportal/src/app/job/job-view/fabric/task-attempt/task-attempt-list.jsx b/src/webportal/src/app/job/job-view/fabric/task-attempt/task-attempt-list.jsx
@@ -331,7 +331,7 @@ export default class TaskAttemptList extends React.Component {
     return (
       <div>
         <DetailsList
-          styles={{ root: { overflow: 'auto' } }}
+          styles={{ root: { overflow: 'auto', padding: '16px' } }}
           columns={this.getColumns()}
           disableSelectionZone
           items={items}