[dagit] Show assets on run pages in more scenarios (#7874)

* [dagit] Do not display the dagster/partition_set tag on asset group runs

* Update to reflect Claire’s new changes

Co-authored-by: bengotow <bgotow@elementl.com>

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

@@ -0,0 +1,105 @@
+import {
+  Box,
+  Button,
+  ButtonLink,
+  Colors,
+  Dialog,
+  DialogFooter,
+  Icon,
+  Table,
+  Tag,
+} from '@dagster-io/ui';
+import * as React from 'react';
+import {Link} from 'react-router-dom';
+
+import {displayNameForAssetKey, tokenForAssetKey} from '../asset-graph/Utils';
+import {AssetKey} from '../assets/types';
+
+export const RunAssetKeyTags: React.FC<{
+  assetKeys: AssetKey[] | null;
+  clickableTags?: boolean;
+}> = React.memo(({assetKeys, clickableTags}) => {
+  const [showMore, setShowMore] = React.useState(false);
+
+  if (!assetKeys || !assetKeys.length) {
+    return null;
+  }
+
+  const displayed = assetKeys.slice(0, 3);
+  const hidden = assetKeys.length - displayed.length;
+
+  if (clickableTags) {
+    return (
+      <>
+        {displayed.map((assetKey) => (
+          <Link
+            to={`/instance/assets/${assetKey.path.map(encodeURIComponent).join('/')}`}
+            key={tokenForAssetKey(assetKey)}
+          >
+            <Tag intent="none" interactive icon="asset">
+              {displayNameForAssetKey(assetKey)}
+            </Tag>
+          </Link>
+        ))}
+        {hidden > 0 && (
+          <ButtonLink onClick={() => setShowMore(true)}>
+            <Tag intent="none" icon="asset">
+              {` + ${hidden} more`}
+            </Tag>
+          </ButtonLink>
+        )}
+        <Dialog
+          title="Assets in Run"
+          onClose={() => setShowMore(false)}
+          style={{minWidth: '400px', maxWidth: '80vw', maxHeight: '70vh'}}
+          isOpen={showMore}
+        >
+          {showMore ? (
+            <Box
+              padding={{bottom: 12}}
+              border={{side: 'bottom', color: Colors.KeylineGray, width: 1}}
+              style={{overflowY: 'auto'}}
+              background={Colors.White}
+            >
+              <Table>
+                <thead>
+                  <tr>
+                    <th>Asset Key</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {assetKeys.map((assetKey) => (
+                    <tr key={tokenForAssetKey(assetKey)}>
+                      <td>
+                        <Link
+                          to={`/instance/assets/${assetKey.path.map(encodeURIComponent).join('/')}`}
+                          key={tokenForAssetKey(assetKey)}
+                        >
+                          {displayNameForAssetKey(assetKey)}
+                        </Link>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </Table>
+            </Box>
+          ) : null}
+          <DialogFooter>
+            <Button intent="primary" autoFocus={true} onClick={() => setShowMore(false)}>
+              OK
+            </Button>
+          </DialogFooter>
+        </Dialog>
+      </>
+    );
+  }
+
+  return (
+    <Box flex={{direction: 'row', gap: 8, wrap: 'wrap', alignItems: 'center'}}>
+      <Icon color={Colors.Gray400} name="asset" size={16} />
+      {`${displayed.map(displayNameForAssetKey).join(', ')}${
+        hidden > 0 ? ` + ${hidden} more` : ''
+      }`}
+    </Box>
+  );
+});

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

@@ -33,6 +33,12 @@ export const RunFragments = {
         key
         value
       }
+      assets {
+        id
+        key {
+          path
+        }
+      }
       rootRunId
       parentRunId
       pipelineName

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

@@ -12,10 +12,11 @@ import {buildRepoAddress} from '../workspace/buildRepoAddress';
 import {useRepositoryForRun} from '../workspace/useRepositoryForRun';
 
 import {Run} from './Run';
+import {RunAssetKeyTags} from './RunAssetKeyTags';
 import {RunConfigDialog, RunDetails} from './RunDetails';
 import {RunFragments} from './RunFragments';
 import {RunStatusTag} from './RunStatusTag';
-import {RunStepKeysAssetList} from './RunStepKeysAssetList';
+import {assetKeysForRun} from './RunUtils';
 import {RunRootQuery, RunRootQueryVariables} from './types/RunRootQuery';
 
 export const RunRoot = () => {
@@ -68,66 +69,71 @@ export const RunRoot = () => {
             run ? (
               <>
                 <RunStatusTag status={run.status} />
-                {!isAssetGroup(run.pipelineName) ? (
-                  <Tag icon="run">
-                    Run of{' '}
-                    <PipelineReference
-                      pipelineName={run?.pipelineName}
-                      pipelineHrefContext={repoAddress || 'repo-unknown'}
-                      snapshotId={snapshotID}
-                      size="small"
-                      isJob={isJob}
-                    />
-                  </Tag>
+                {isAssetGroup(run.pipelineName) ? (
+                  <RunAssetKeyTags assetKeys={assetKeysForRun(run)} clickableTags />
                 ) : (
-                  <RunStepKeysAssetList stepKeys={run.stepKeysToExecute} clickableTags />
+                  <>
+                    <Tag icon="run">
+                      Run of{' '}
+                      <PipelineReference
+                        pipelineName={run?.pipelineName}
+                        pipelineHrefContext={repoAddress || 'repo-unknown'}
+                        snapshotId={snapshotID}
+                        size="small"
+                        isJob={isJob}
+                      />
+                    </Tag>
+                    <RunAssetKeyTags assetKeys={run.assets.map((a) => a.key)} clickableTags />
+                  </>
                 )}
-                {run?.startTime ? (
-                  <Popover
-                    interactionKind="hover"
-                    placement="bottom"
-                    content={
-                      <Box padding={16}>
-                        <RunDetails run={run} loading={loading} />
-                      </Box>
-                    }
-                  >
+                <Box flex={{direction: 'row', alignItems: 'flex-start', gap: 12, wrap: 'wrap'}}>
+                  {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>
+                  ) : run.updateTime ? (
                     <Tag icon="schedule">
                       <TimestampDisplay
-                        timestamp={run.startTime}
+                        timestamp={run.updateTime}
                         timeFormat={{showSeconds: true, showTimezone: false}}
                       />
                     </Tag>
-                  </Popover>
-                ) : run.updateTime ? (
-                  <Tag icon="schedule">
-                    <TimestampDisplay
-                      timestamp={run.updateTime}
-                      timeFormat={{showSeconds: true, showTimezone: false}}
-                    />
-                  </Tag>
-                ) : undefined}
-                {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}
+                  ) : undefined}
+                  {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}
+                </Box>
               </>
             ) : null
           }

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

@@ -20,10 +20,16 @@ import {useRepositoryForRun} from '../workspace/useRepositoryForRun';
 import {workspacePipelinePath, workspacePipelinePathGuessRepo} from '../workspace/workspacePath';
 
 import {RunActionsMenu, RunBulkActionsMenu} from './RunActionsMenu';
+import {RunAssetKeyTags} from './RunAssetKeyTags';
 import {RunStatusTagWithStats} from './RunStatusTag';
-import {RunStepKeysAssetList} from './RunStepKeysAssetList';
 import {RunTags} from './RunTags';
-import {RunStateSummary, RunTime, RUN_TIME_FRAGMENT, titleForRun} from './RunUtils';
+import {
+  assetKeysForRun,
+  RunStateSummary,
+  RunTime,
+  RUN_TIME_FRAGMENT,
+  titleForRun,
+} from './RunUtils';
 import {RunFilterToken} from './RunsFilterInput';
 import {RunTableRunFragment} from './types/RunTableRunFragment';
 
@@ -235,7 +241,9 @@ const RunRow: React.FC<{
       </td>
       <td>
         <Box flex={{direction: 'column', gap: 5}}>
-          {!isAssetGroup(run.pipelineName) ? (
+          {isAssetGroup(run.pipelineName) ? (
+            <RunAssetKeyTags assetKeys={assetKeysForRun(run)} />
+          ) : (
             <Box flex={{direction: 'row', gap: 8, alignItems: 'center'}}>
               <PipelineReference
                 isJob={isJob}
@@ -258,8 +266,6 @@ const RunRow: React.FC<{
                 <Icon name="open_in_new" color={Colors.Blue500} />
               </Link>
             </Box>
-          ) : (
-            <RunStepKeysAssetList stepKeys={run.stepKeysToExecute} />
           )}
           <RunTags
             tags={run.tags}

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

@@ -8,6 +8,7 @@ import {showCustomAlert} from '../app/CustomAlertProvider';
 import {SharedToaster} from '../app/DomUtils';
 import {PythonErrorInfo, PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
 import {Timestamp} from '../app/time/Timestamp';
+import {AssetKey} from '../assets/types';
 import {ExecutionParams, RunStatus} from '../types/globalTypes';
 
 import {DagsterTag} from './RunTag';
@@ -23,6 +24,16 @@ export function titleForRun(run: {runId: string}) {
   return run.runId.split('-').shift();
 }
 
+export function assetKeysForRun(run: {
+  assetSelection: {path: string[]}[] | null;
+  stepKeysToExecute: string[] | null;
+}): AssetKey[] {
+  // Note: The fallback logic here is only necessary for Dagit <0.15.0 and should be removed
+  // soon, because stepKeysToExecute and asset keys do not map 1:1 for multi-component asset
+  // paths.
+  return run.assetSelection || run.stepKeysToExecute?.map((s) => ({path: [s]})) || [];
+}
+
 export function linkToRunEvent(
   run: {runId: string},
   event: {timestamp?: string; stepKey: string | null},