[ui] Small UI tweaks around asset checks

List of changes: https://www.notion.so/dagster/Asset-checks-UI-followups-8c188b748d0f449ca72a9e5ddf264090

js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNodeStatusContent.tsx

@@ -222,14 +222,14 @@ export function _buildAssetNodeStatusContent({
     const numMissing = numPartitions - numFailed - numMaterialized;
     const {background, foreground, border} =
       StyleForAssetPartitionStatus[
-        overdue || numFailed
+        overdue || numFailed || checksFailed
           ? AssetPartitionStatus.FAILED
           : numMissing
           ? AssetPartitionStatus.MISSING
           : AssetPartitionStatus.MATERIALIZED
       ];
     const statusCase =
-      overdue || numFailed
+      overdue || numFailed || checksFailed
         ? (StatusCase.PARTITIONS_FAILED as const)
         : numMissing
         ? (StatusCase.PARTITIONS_MISSING as const)
@@ -302,8 +302,10 @@ export function _buildAssetNodeStatusContent({
             </OverdueLineagePopover>
           ) : runWhichFailedToMaterialize ? (
             <span style={{color: Colors.Red700}}>Failed</span>
-          ) : (
+          ) : lastMaterialization ? (
             <span style={{color: Colors.Red700}}>Materialized</span>
+          ) : (
+            <span style={{color: Colors.Red700}}>Never materialized</span>
           )}
 
           {expanded && <SpacerDot />}

js_modules/dagster-ui/packages/ui-core/src/asset-graph/__fixtures__/AssetNode.fixtures.ts

@@ -696,6 +696,16 @@ export const AssetNodeScenariosBase = [
     expectedText: ['Never materialized'],
   },
 
+  {
+    title: 'Never Materialized, Failed Check',
+    liveData: {
+      ...LiveDataForNodeNeverMaterialized,
+      assetChecks: LiveDataForNodeMaterializedWithChecks.assetChecks,
+    },
+    definition: AssetNodeFragmentBasic,
+    expectedText: ['Never materialized'],
+  },
+
   {
     title: 'Materialized',
     liveData: LiveDataForNodeMaterialized,

js_modules/dagster-ui/packages/ui-core/src/asset-graph/useLiveDataForAssetKeys.tsx

@@ -161,6 +161,7 @@ export const ASSET_NODE_LIVE_FRAGMENT = gql`
         id
         runId
         status
+        stepKey
         evaluation {
           severity
         }

js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx

@@ -175,10 +175,7 @@ export const AssetSidebarActivitySummary: React.FC<Props> = ({
               }}
             >
               <MiddleTruncate text={`${check.name}`} />
-              <AssetCheckStatusTag
-                check={check}
-                execution={check.executionForLatestMaterialization}
-              />
+              <AssetCheckStatusTag execution={check.executionForLatestMaterialization} />
             </Box>
           ))}
           {liveData.assetChecks.length > 10 && (

js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetCheckDetailModal.tsx

@@ -26,6 +26,7 @@ import {AssetKeyInput} from '../../graphql/types';
 import {useDocumentTitle} from '../../hooks/useDocumentTitle';
 import {METADATA_ENTRY_FRAGMENT, MetadataEntries} from '../../metadata/MetadataEntry';
 import {MetadataEntryFragment} from '../../metadata/types/MetadataEntry.types';
+import {linkToRunEvent} from '../../runs/RunUtils';
 import {useCursorPaginatedQuery} from '../../runs/useCursorPaginatedQuery';
 import {TimestampDisplay} from '../../schedules/TimestampDisplay';
 
@@ -173,11 +174,16 @@ const AssetCheckDetailModalImpl = ({
                 <tr key={execution.id}>
                   <td>
                     {execution.evaluation?.timestamp ? (
-                      <Link to={`/runs/${execution.runId}`}>
+                      <Link
+                        to={linkToRunEvent(
+                          {id: execution.runId},
+                          {stepKey: execution.stepKey, timestamp: execution.timestamp},
+                        )}
+                      >
                         <TimestampDisplay timestamp={execution.evaluation.timestamp} />
                       </Link>
                     ) : (
-                      ' - '
+                      <TimestampDisplay timestamp={execution.timestamp} />
                     )}
                   </td>
                   <td>
@@ -192,7 +198,7 @@ const AssetCheckDetailModalImpl = ({
                     )}
                   </td>
                   <td>
-                    <AssetCheckStatusTag check={check} execution={execution} />
+                    <AssetCheckStatusTag execution={execution} />
                   </td>
                   <td>
                     <MetadataCell metadataEntries={execution.evaluation?.metadataEntries} />
@@ -255,6 +261,8 @@ export const ASSET_CHECK_EXECUTION_FRAGMENT = gql`
     id
     runId
     status
+    stepKey
+    timestamp
     evaluation {
       severity
       timestamp

js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetCheckStatusTag.tsx

@@ -2,22 +2,23 @@ import {BaseTag, Box, Colors, Icon, Spinner, Tag} from '@dagster-io/ui-component
 import * as React from 'react';
 
 import {assertUnreachable} from '../../app/Util';
-import {AssetCheckExecutionResolvedStatus, AssetCheckSeverity} from '../../graphql/types';
+import {
+  AssetCheckEvaluation,
+  AssetCheckExecution,
+  AssetCheckExecutionResolvedStatus,
+  AssetCheckSeverity,
+} from '../../graphql/types';
+import {linkToRunEvent} from '../../runs/RunUtils';
 import {TagActionsPopover} from '../../ui/TagActions';
 
 export const AssetCheckStatusTag = ({
   execution,
 }: {
-  check: {
-    name: string;
-  };
-  execution: {
-    runId: string;
-    status: AssetCheckExecutionResolvedStatus;
-    evaluation?: {
-      severity: AssetCheckSeverity;
-    } | null;
-  } | null;
+  execution:
+    | (Pick<AssetCheckExecution, 'runId' | 'status' | 'timestamp' | 'stepKey'> & {
+        evaluation: Pick<AssetCheckEvaluation, 'severity'> | null;
+      })
+    | null;
 }) => {
   // Note: this uses BaseTag for a "grayer" style than the default tag intent
   if (!execution) {
@@ -83,7 +84,10 @@ export const AssetCheckStatusTag = ({
       actions={[
         {
           label: 'View in run logs',
-          to: `/runs/${runId}`,
+          to: linkToRunEvent(
+            {id: runId},
+            {stepKey: execution.stepKey, timestamp: execution.timestamp},
+          ),
         },
       ]}
     >

js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/VirtualizedAssetCheckTable.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
+import {linkToRunEvent} from '../../runs/RunUtils';
 import {TimestampDisplay} from '../../schedules/TimestampDisplay';
 import {testId} from '../../testing/testId';
 import {HeaderCell, Row, RowCell, Container, Inner} from '../../ui/VirtualizedTable';
@@ -86,12 +87,17 @@ export const VirtualizedAssetCheckRow = ({assetNode, height, start, row}: AssetC
         </RowCell>
         <RowCell style={{flexDirection: 'row', alignItems: 'center'}}>
           <div>
-            <AssetCheckStatusTag check={row} execution={row.executionForLatestMaterialization} />
+            <AssetCheckStatusTag execution={row.executionForLatestMaterialization} />
           </div>
         </RowCell>
         <RowCell style={{flexDirection: 'row', alignItems: 'center'}}>
           {timestamp ? (
-            <Link to={`/runs/${execution.runId}`}>
+            <Link
+              to={linkToRunEvent(
+                {id: execution.runId},
+                {stepKey: execution.stepKey, timestamp: execution.timestamp},
+              )}
+            >
               <TimestampDisplay timestamp={timestamp} />
             </Link>
           ) : (

js_modules/dagster-ui/packages/ui-core/src/runs/RunUtils.tsx

@@ -36,7 +36,7 @@ export function assetKeysForRun(run: {
 
 export function linkToRunEvent(
   run: {id: string},
-  event: {timestamp?: string; stepKey: string | null},
+  event: {timestamp?: string | number; stepKey: string | null},
 ) {
   return `/runs/${run.id}?${qs.stringify({
     focusedTime: event.timestamp ? Number(event.timestamp) : undefined,