[dagit] Show more information for last run on Schedules/Sensors (#8130)

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

@@ -8,7 +8,6 @@ import {
   PageHeader,
   Spinner,
   Table,
-  Tag,
   Body,
   Heading,
   TextInput,
@@ -22,7 +21,6 @@ import {isHiddenAssetGroupJob} from '../asset-graph/Utils';
 import {ScheduleOrSensorTag} from '../nav/ScheduleOrSensorTag';
 import {LegacyPipelineTag} from '../pipelines/LegacyPipelineTag';
 import {PipelineReference} from '../pipelines/PipelineReference';
-import {RunStatusIndicator} from '../runs/RunStatusDots';
 import {RunStatusPezList} from '../runs/RunStatusPez';
 import {
   failedStatuses,
@@ -31,12 +29,10 @@ import {
   successStatuses,
 } from '../runs/RunStatuses';
 import {RunTimelineContainer, TimelineJob, makeJobKey, HourWindow} from '../runs/RunTimeline';
-import {RunStateSummary, RunTime, RUN_TIME_FRAGMENT} from '../runs/RunUtils';
+import {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';
-import {RunStatus} from '../types/globalTypes';
-import {AnchorButton} from '../ui/AnchorButton';
 import {REPOSITORY_INFO_FRAGMENT} from '../workspace/RepositoryInformation';
 import {WorkspaceContext} from '../workspace/WorkspaceContext';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
@@ -46,9 +42,9 @@ import {workspacePipelinePath} from '../workspace/workspacePath';
 
 import {InstanceTabs} from './InstanceTabs';
 import {JobMenu} from './JobMenu';
+import {LastRunSummary} from './LastRunSummary';
 import {NextTick, SCHEDULE_FUTURE_TICKS_FRAGMENT} from './NextTick';
 import {RepoFilterButton} from './RepoFilterButton';
-import {StepSummaryForRun} from './StepSummaryForRun';
 import {
   InstanceOverviewInitialQuery,
   InstanceOverviewInitialQuery_workspaceOrError_Workspace_locationEntries_locationOrLoadError_RepositoryLocation_repositories_schedules as Schedule,
@@ -57,19 +53,6 @@ import {
 import {LastTenRunsPerJobQuery} from './types/LastTenRunsPerJobQuery';
 import {OverviewJobFragment} from './types/OverviewJobFragment';
 
-const intent = (status: RunStatus) => {
-  switch (status) {
-    case RunStatus.SUCCESS:
-      return 'success';
-    case RunStatus.CANCELED:
-    case RunStatus.CANCELING:
-    case RunStatus.FAILURE:
-      return 'danger';
-    default:
-      return 'none';
-  }
-};
-
 type JobItem = {
   job: OverviewJobFragment;
   repoAddress: RepoAddress;
@@ -510,30 +493,7 @@ const JobSection = (props: JobSectionProps) => {
                   )}
                 </td>
                 <td>
-                  <Box
-                    flex={{
-                      direction: 'row',
-                      justifyContent: 'space-between',
-                      alignItems: 'flex-start',
-                    }}
-                  >
-                    <Box flex={{direction: 'column', alignItems: 'flex-start', gap: 8}}>
-                      <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} />
-                      ) : undefined}
-                    </Box>
-                    <AnchorButton to={`/instance/runs/${job.runs[0].id}`}>View run</AnchorButton>
-                  </Box>
+                  <LastRunSummary run={job.runs[0]} />
                 </td>
                 <td>
                   <JobMenu job={job} repoAddress={repoAddress} />

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

@@ -0,0 +1,55 @@
+import {Box, Tag} from '@dagster-io/ui';
+import * as React from 'react';
+
+import {RunStatusIndicator} from '../runs/RunStatusDots';
+import {failedStatuses, inProgressStatuses} from '../runs/RunStatuses';
+import {RunStateSummary, RunTime} from '../runs/RunUtils';
+import {RunTimeFragment} from '../runs/types/RunTimeFragment';
+import {RunStatus} from '../types/globalTypes';
+import {AnchorButton} from '../ui/AnchorButton';
+
+import {StepSummaryForRun} from './StepSummaryForRun';
+
+export const LastRunSummary: React.FC<{run: RunTimeFragment}> = React.memo(({run}) => {
+  const {status} = run;
+
+  const intent = React.useMemo(() => {
+    switch (status) {
+      case RunStatus.SUCCESS:
+        return 'success';
+      case RunStatus.CANCELED:
+      case RunStatus.CANCELING:
+      case RunStatus.FAILURE:
+        return 'danger';
+      default:
+        return 'none';
+    }
+  }, [status]);
+
+  return (
+    <Box
+      flex={{
+        direction: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        gap: 16,
+      }}
+    >
+      <Box flex={{direction: 'column', alignItems: 'flex-start', gap: 8}}>
+        <Box flex={{direction: 'row', alignItems: 'center', gap: 8}}>
+          <Tag intent={intent}>
+            <Box flex={{direction: 'row', alignItems: 'center', gap: 4}}>
+              <RunStatusIndicator status={run.status} size={10} />
+              <RunTime run={run} />
+            </Box>
+          </Tag>
+          <RunStateSummary run={run} />
+        </Box>
+        {failedStatuses.has(run.status) || inProgressStatuses.has(run.status) ? (
+          <StepSummaryForRun runId={run.id} />
+        ) : undefined}
+      </Box>
+      <AnchorButton to={`/instance/runs/${run.id}`}>View run</AnchorButton>
+    </Box>
+  );
+});

js_modules/dagit/packages/core/src/instigation/InstigationUtils.tsx

@@ -5,8 +5,9 @@ import {Link} from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import {PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
+import {LastRunSummary} from '../instance/LastRunSummary';
 import {RunStatusIndicator} from '../runs/RunStatusDots';
-import {titleForRun} from '../runs/RunUtils';
+import {RUN_TIME_FRAGMENT, titleForRun} from '../runs/RunUtils';
 
 import {TICK_TAG_FRAGMENT} from './InstigationTick';
 import {InstigationStateFragment} from './types/InstigationStateFragment';
@@ -18,7 +19,7 @@ export const InstigatedRunStatus: React.FC<{
   if (!instigationState.runs.length) {
     return <span style={{color: Colors.Gray300}}>None</span>;
   }
-  return <RunStatusLink run={instigationState.runs[0]} />;
+  return <LastRunSummary run={instigationState.runs[0]} />;
 };
 
 export const RunStatusLink: React.FC<{run: RunStatusFragment}> = ({run}) => (
@@ -59,6 +60,7 @@ export const INSTIGATION_STATE_FRAGMENT = gql`
     runs(limit: 1) {
       id
       ...RunStatusFragment
+      ...RunTimeFragment
     }
     status
     ticks(limit: 1) {
@@ -71,6 +73,7 @@ export const INSTIGATION_STATE_FRAGMENT = gql`
   ${PYTHON_ERROR_FRAGMENT}
   ${TICK_TAG_FRAGMENT}
   ${RUN_STATUS_FRAGMENT}
+  ${RUN_TIME_FRAGMENT}
 `;
 
 export const StatusTable = styled.table`

js_modules/dagit/packages/core/src/sensors/SensorsTable.tsx

@@ -29,15 +29,15 @@ export const SensorsTable: React.FC<{
           <th style={{width: '60px'}}></th>
           <th>Sensor Name</th>
           <th style={{width: '15%'}}>Frequency</th>
-          <th style={{width: '15%'}}>
+          <th style={{width: '10%'}}>
             <Box flex={{gap: 8, alignItems: 'end'}}>
               Last tick
               <Tooltip position="top" content={lastTick}>
                 <Icon name="info" color={Colors.Gray500} />
               </Tooltip>
             </Box>
           </th>
-          <th style={{width: '20%'}}>
+          <th style={{width: '25%'}}>
             <Box flex={{gap: 8, alignItems: 'end'}}>
               Last Run
               <Tooltip position="top" content={lastRun}>