[dagit] Adjust details in Run header (#7345)

## Summary Resolves #7197. Show start time and duration in tags on the Run detail header, instead of burying them behind the icon hover. ## Test Plan View a run in Dagit. Verify rendering and behavior of start time and duration tags.
dagster-io · Apr 7, 2022 · a7bf12e · a7bf12e
1 parent 8e7d7d6
commit a7bf12e
Showing 1 changed file with 41 additions and 11 deletions.
diff --git a/js_modules/dagit/packages/core/src/runs/RunRoot.tsx b/js_modules/dagit/packages/core/src/runs/RunRoot.tsx
@@ -3,7 +3,9 @@ import {Box, NonIdealState, PageHeader, Popover, Tag, Heading, FontFamily} from
 import * as React from 'react';
 import {useParams} from 'react-router-dom';
 
+import {formatElapsedTime} from '../app/Util';
 import {PipelineReference} from '../pipelines/PipelineReference';
+import {TimestampDisplay} from '../schedules/TimestampDisplay';
 import {isThisThingAJob} from '../workspace/WorkspaceContext';
 import {__ASSET_GROUP} from '../workspace/asset-graph/Utils';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
@@ -65,17 +67,6 @@ export const RunRoot = () => {
           tags={
             run ? (
               <>
-                <Popover
-                  interactionKind="hover"
-                  placement="bottom"
-                  content={
-                    <Box padding={16}>
-                      <RunDetails run={run} loading={loading} />
-                    </Box>
-                  }
-                >
-                  <Tag icon="info" />
-                </Popover>
                 <RunStatusTag status={run.status} />
                 {run.pipelineName !== __ASSET_GROUP ? (
                   <Tag icon="run">
@@ -91,6 +82,45 @@ export const RunRoot = () => {
                 ) : (
                   <RunStepKeysAssetList stepKeys={run.stepKeysToExecute} clickableTags />
                 )}
+                {run?.startTime ? (
+                  <Popover
+                    interactionKind="hover"
+                    placement="bottom"
+                    content={
+                      <Box padding={16}>
+                        <RunDetails run={run} loading={loading} />
+                      </Box>
+                    }
+                  >
+                    <Tag icon="schedule">
+                      <TimestampDisplay
+                        timestamp={run.startTime}
+                        timeFormat={{showSeconds: true, showTimezone: false}}
+                      />
+                    </Tag>
+                  </Popover>
+                ) : null}
+                {run?.startTime && run?.endTime ? (
+                  <Popover
+                    interactionKind="hover"
+                    placement="bottom"
+                    content={
+                      <Box padding={16}>
+                        <RunDetails run={run} loading={loading} />
+                      </Box>
+                    }
+                  >
+                    <Tag icon="timer">
+                      <span style={{fontVariantNumeric: 'tabular-nums'}}>
+                        {run?.startTime
+                          ? formatElapsedTime(
+                              (run?.endTime * 1000 || Date.now()) - run?.startTime * 1000,
+                            )
+                          : '–'}
+                      </span>
+                    </Tag>
+                  </Popover>
+                ) : null}
               </>
             ) : null
           }