[dagit] Show timestamps for “failed to start” runs, other metadata tw…

…eaks (#7359)

js_modules/dagit/packages/core/src/gantt/RunGroupPanel.tsx

@@ -9,7 +9,7 @@ import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
 import {SidebarSection} from '../pipelines/SidebarComponents';
 import {RunStatusIndicator} from '../runs/RunStatusDots';
 import {DagsterTag} from '../runs/RunTag';
-import {RunElapsed, RunTime, RUN_TIME_FRAGMENT} from '../runs/RunUtils';
+import {RunStateSummary, RunTime, RUN_TIME_FRAGMENT} from '../runs/RunUtils';
 
 import {
   RunGroupPanelQuery,
@@ -123,7 +123,7 @@ export const RunGroupPanel: React.FC<{runId: string; runStatusLastChangedAt: num
                   }}
                 >
                   {subsetTitleForRun(g)}
-                  <RunElapsed run={g} />
+                  <RunStateSummary run={g} />
                 </div>
               </div>
             </RunGroupRun>

js_modules/dagit/packages/core/src/instance/InstanceOverviewPage.tsx

@@ -30,7 +30,7 @@ import {
   successStatuses,
 } from '../runs/RunStatuses';
 import {RunTimelineContainer, TimelineJob, makeJobKey, HourWindow} from '../runs/RunTimeline';
-import {RunElapsed, RunTime, RUN_TIME_FRAGMENT} from '../runs/RunUtils';
+import {RunStateSummary, RunTime, RUN_TIME_FRAGMENT} from '../runs/RunUtils';
 import {RunTimeFragment} from '../runs/types/RunTimeFragment';
 import {SCHEDULE_SWITCH_FRAGMENT} from '../schedules/ScheduleSwitch';
 import {SENSOR_SWITCH_FRAGMENT} from '../sensors/SensorSwitch';
@@ -515,21 +515,21 @@ const JobSection = (props: JobSectionProps) => {
                     }}
                   >
                     <Box flex={{direction: 'column', alignItems: 'flex-start', gap: 8}}>
-                      <Tag intent={intent(job.runs[0].status)}>
-                        <Box flex={{direction: 'row', alignItems: 'center', gap: 4}}>
-                          <RunStatusIndicator status={job.runs[0].status} size={10} />
-                          <RunTime run={job.runs[0]} />
-                        </Box>
-                      </Tag>
+                      <Box flex={{direction: 'row', alignItems: 'center', gap: 8}}>
+                        <Tag intent={intent(job.runs[0].status)}>
+                          <Box flex={{direction: 'row', alignItems: 'center', gap: 4}}>
+                            <RunStatusIndicator status={job.runs[0].status} size={10} />
+                            <RunTime run={job.runs[0]} />
+                          </Box>
+                        </Tag>
+                        <RunStateSummary run={job.runs[0]} />
+                      </Box>
                       {failedStatuses.has(job.runs[0].status) ||
                       inProgressStatuses.has(job.runs[0].status) ? (
                         <StepSummaryForRun runId={job.runs[0].id} />
-                      ) : null}
-                    </Box>
-                    <Box flex={{direction: 'row', alignItems: 'center', gap: 8}}>
-                      <RunElapsed run={job.runs[0]} />
-                      <AnchorButton to={`/instance/runs/${job.runs[0].id}`}>View run</AnchorButton>
+                      ) : undefined}
                     </Box>
+                    <AnchorButton to={`/instance/runs/${job.runs[0].id}`}>View run</AnchorButton>
                   </Box>
                 </td>
                 <td>

js_modules/dagit/packages/core/src/runs/RunFragments.tsx

@@ -45,6 +45,7 @@ export const RunFragments = {
       stepKeysToExecute
       ...RunFragmentForRepositoryMatch
       ...RunDetailsFragment
+      updateTime
       stepStats {
         stepKey
         status

js_modules/dagit/packages/core/src/runs/RunRoot.tsx

@@ -99,7 +99,14 @@ export const RunRoot = () => {
                       />
                     </Tag>
                   </Popover>
-                ) : null}
+                ) : run.updateTime ? (
+                  <Tag icon="schedule">
+                    <TimestampDisplay
+                      timestamp={run.updateTime}
+                      timeFormat={{showSeconds: true, showTimezone: false}}
+                    />
+                  </Tag>
+                ) : undefined}
                 {run?.startTime && run?.endTime ? (
                   <Popover
                     interactionKind="hover"

js_modules/dagit/packages/core/src/runs/RunStatusPez.tsx

@@ -7,7 +7,7 @@ import {SectionHeader} from '../pipelines/SidebarComponents';
 import {RunStatus} from '../types/globalTypes';
 
 import {RunStatusIndicator} from './RunStatusDots';
-import {RunTime, titleForRun} from './RunUtils';
+import {RunStateSummary, RunTime, titleForRun} from './RunUtils';
 import {RunTimeFragment} from './types/RunTimeFragment';
 
 const RUN_STATUS_COLORS = {
@@ -91,7 +91,10 @@ const RunStatusOverlay = (props: OverlayProps) => {
           <Mono>{titleForRun(props.run)}</Mono>
         </Link>
         <HorizontalSpace />
-        <RunTime run={props.run} />
+        <Box flex={{direction: 'column'}}>
+          <RunTime run={props.run} />
+          <RunStateSummary run={props.run} />
+        </Box>
       </RunRow>
     </OverlayContainer>
   );
@@ -100,7 +103,7 @@ const RunStatusOverlay = (props: OverlayProps) => {
 const OverlayContainer = styled.div`
   padding: 4px;
   font-size: 12px;
-  width: 250px;
+  width: 280px;
 `;
 
 const HorizontalSpace = styled.div`
@@ -117,7 +120,7 @@ const OverlayTitle = styled(SectionHeader)`
 `;
 
 const RunRow = styled.div`
-  align-items: center;
+  align-items: baseline;
   padding: 8px;
   font-family: ${FontFamily.monospace};
   font-size: 14px;

js_modules/dagit/packages/core/src/runs/RunTable.tsx

@@ -20,10 +20,9 @@ import {workspacePipelinePath, workspacePipelinePathGuessRepo} from '../workspac
 
 import {RunActionsMenu, RunBulkActionsMenu} from './RunActionsMenu';
 import {RunStatusTagWithStats} from './RunStatusTag';
-import {canceledStatuses, queuedStatuses} from './RunStatuses';
 import {RunStepKeysAssetList} from './RunStepKeysAssetList';
 import {RunTags} from './RunTags';
-import {RunElapsed, RunTime, RUN_TIME_FRAGMENT, titleForRun} from './RunUtils';
+import {RunStateSummary, RunTime, RUN_TIME_FRAGMENT, titleForRun} from './RunUtils';
 import {RunFilterToken} from './RunsFilterInput';
 import {RunTableRunFragment} from './types/RunTableRunFragment';
 
@@ -116,7 +115,7 @@ export const RunTable = (props: RunTableProps) => {
             <th style={{width: 90}}>Run ID</th>
             <th>{anyPipelines ? 'Job / Pipeline' : 'Job'}</th>
             <th style={{width: 90}}>Snapshot ID</th>
-            <th style={{width: 180}}>Timing</th>
+            <th style={{width: 190}}>Timing</th>
             {props.additionalColumnHeaders}
             <th style={{width: 52}} />
           </tr>
@@ -266,9 +265,7 @@ const RunRow: React.FC<{
       </td>
       <td>
         <RunTime run={run} />
-        {queuedStatuses.has(run.status) || canceledStatuses.has(run.status) ? null : (
-          <RunElapsed run={run} />
-        )}
+        <RunStateSummary run={run} />
       </td>
       {additionalColumns}
       <td>

js_modules/dagit/packages/core/src/runs/RunUtils.tsx

@@ -277,34 +277,31 @@ interface RunTimeProps {
 export const RunTime: React.FC<RunTimeProps> = React.memo(({run}) => {
   const {startTime, updateTime} = run;
 
-  const content = () => {
-    if (startTime) {
-      return <Timestamp timestamp={{unix: startTime}} />;
-    }
-    if (run.status === RunStatus.STARTING && updateTime) {
-      return <Timestamp timestamp={{unix: updateTime}} />;
-    }
-    if (run.status === RunStatus.QUEUED && updateTime) {
-      return <Timestamp timestamp={{unix: updateTime}} />;
-    }
-
-    switch (run.status) {
-      case RunStatus.FAILURE:
-        return 'Failed to start';
-      case RunStatus.CANCELED:
-        return 'Canceled';
-      case RunStatus.CANCELING:
-        return 'Canceling…';
-      default:
-        return 'Starting…';
-    }
-  };
-
-  return <div>{content()}</div>;
+  return (
+    <div>
+      {startTime ? (
+        <Timestamp timestamp={{unix: startTime}} />
+      ) : updateTime ? (
+        <Timestamp timestamp={{unix: updateTime}} />
+      ) : null}
+    </div>
+  );
 });
 
-export const RunElapsed: React.FC<RunTimeProps> = React.memo(({run}) => {
-  return <TimeElapsed startUnix={run.startTime} endUnix={run.endTime} />;
+export const RunStateSummary: React.FC<RunTimeProps> = React.memo(({run}) => {
+  return !run.startTime && run.status === RunStatus.FAILURE ? (
+    <div>Failed to start</div>
+  ) : run.status === RunStatus.CANCELED ? (
+    <div>Canceled</div>
+  ) : run.status === RunStatus.CANCELING ? (
+    <div>Canceling…</div>
+  ) : run.status === RunStatus.QUEUED ? (
+    <div>Queued…</div>
+  ) : !run.startTime ? (
+    <div>Starting…</div>
+  ) : (
+    <TimeElapsed startUnix={run.startTime} endUnix={run.endTime} />
+  );
 });
 
 export const RUN_TIME_FRAGMENT = gql`