[dagit] Add Materialize button to the Asset Catalog (#8206)

* Defer fetching data required to launch assets until you click the button! * Explicitly remove text decoration Co-authored-by: bengotow <bgotow@elementl.com>
dagster-io · Jun 8, 2022 · 08b4fcf · 08b4fcf
1 parent db7fb76
commit 08b4fcf
Show file tree

Hide file tree

Showing 11 changed files with 1,401 additions and 195 deletions.
diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx
@@ -1,8 +1,6 @@
 import {Box, Checkbox, NonIdealState, SplitPanelContainer} from '@dagster-io/ui';
-import flatMap from 'lodash/flatMap';
 import pickBy from 'lodash/pickBy';
 import uniq from 'lodash/uniq';
-import uniqBy from 'lodash/uniqBy';
 import without from 'lodash/without';
 import React from 'react';
 import {useHistory} from 'react-router-dom';
@@ -406,18 +404,9 @@ export const AssetGraphExplorerWithData: React.FC<
               />
 
               <LaunchAssetExecutionButton
-                title={titleForLaunch(selectedGraphNodes, liveDataByNode)}
+                assetKeys={launchGraphNodes.map((n) => n.assetKey)}
+                liveDataByNode={liveDataByNode}
                 preferredJobName={explorerPath.pipelineName}
-                assets={launchGraphNodes.map((n) => n.definition)}
-                upstreamAssetKeys={uniqBy(
-                  flatMap(launchGraphNodes.map((n) => n.definition.dependencyKeys)),
-                  (key) => JSON.stringify(key),
-                ).filter(
-                  (key) =>
-                    !launchGraphNodes.some(
-                      (n) => JSON.stringify(n.assetKey) === JSON.stringify(key),
-                    ),
-                )}
               />
             </Box>
           </Box>
@@ -517,14 +506,3 @@ const opsInRange = (
   }
   return uniq(ledToTarget);
 };
-
-const titleForLaunch = (nodes: GraphNode[], liveDataByNode: LiveData) => {
-  const isRematerializeForAll = (nodes.length
-    ? nodes.map((n) => liveDataByNode[n.id])
-    : Object.values(liveDataByNode)
-  ).every((e) => !!e?.lastMaterialization);
-
-  return `${isRematerializeForAll ? 'Rematerialize' : 'Materialize'} ${
-    nodes.length === 0 ? `All` : nodes.length === 1 ? `Selected` : `Selected (${nodes.length})`
-  }`;
-};
diff --git a/js_modules/dagit/packages/core/src/asset-graph/Utils.tsx b/js_modules/dagit/packages/core/src/asset-graph/Utils.tsx
@@ -39,8 +39,8 @@ export interface GraphData {
   downstream: {[assetId: GraphId]: {[childAssetId: GraphId]: boolean}};
   upstream: {[assetId: GraphId]: {[parentAssetId: GraphId]: boolean}};
 }
-export const isSourceAsset = (node: {jobNames: string[]; opNames: string[]}) => {
-  return node.jobNames.length === 0 && !node.opNames.length;
+export const isSourceAsset = (node: {graphName: string | null; opNames: string[]}) => {
+  return !node.graphName && !node.opNames.length;
 };
 
 export const buildGraphData = (assetNodes: AssetNode[]) => {

diff --git a/js_modules/dagit/packages/core/src/asset-graph/types/AssetGraphQuery.ts b/js_modules/dagit/packages/core/src/asset-graph/types/AssetGraphQuery.ts
diff --git a/js_modules/dagit/packages/core/src/asset-graph/useAssetGraphData.tsx b/js_modules/dagit/packages/core/src/asset-graph/useAssetGraphData.tsx
@@ -140,6 +140,7 @@ const ASSET_GRAPH_QUERY = gql`
       dependedByKeys {
         path
       }
+      partitionDefinition
       ...AssetNodeFragment
     }
   }

diff --git a/js_modules/dagit/packages/core/src/assets/AssetTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetTable.tsx
@@ -10,6 +10,7 @@ import {
   Popover,
   Table,
   Mono,
+  Tooltip,
 } from '@dagster-io/ui';
 import * as React from 'react';
 import {Link} from 'react-router-dom';
@@ -21,13 +22,15 @@ import {LiveData, toGraphId} from '../asset-graph/Utils';
 import {useSelectionReducer} from '../hooks/useSelectionReducer';
 import {RepositoryLink} from '../nav/RepositoryLink';
 import {TimestampDisplay} from '../schedules/TimestampDisplay';
+import {AnchorButton} from '../ui/AnchorButton';
 import {MenuLink} from '../ui/MenuLink';
 import {markdownToPlaintext} from '../ui/markdownToPlaintext';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
 import {workspacePathFromAddress} from '../workspace/workspacePath';
 
 import {AssetLink} from './AssetLink';
 import {AssetWipeDialog} from './AssetWipeDialog';
+import {LaunchAssetExecutionButton} from './LaunchAssetExecutionButton';
 import {AssetTableFragment as Asset} from './types/AssetTableFragment';
 import {AssetViewType} from './useAssetView';
 
@@ -79,13 +82,22 @@ export const AssetTable = ({
 
   return (
     <Box flex={{direction: 'column'}}>
-      <Box flex={{alignItems: 'center', gap: 12}} padding={{vertical: 8, left: 24, right: 12}}>
+      <Box flex={{alignItems: 'center', gap: 8}} padding={{vertical: 8, left: 24, right: 12}}>
         {actionBarComponents}
         <div style={{flex: 1}} />
-        <AssetBulkActions
-          selected={Array.from(checkedAssets)}
-          clearSelection={() => onToggleAll(false)}
-        />
+        {checkedAssets.some((c) => !c.definition) ? (
+          <Tooltip content="One or more selected assets are not software-defined and cannot be launched directly.">
+            <Button intent="primary" icon={<Icon name="materialization" />} disabled>
+              Materialize
+            </Button>
+          </Tooltip>
+        ) : (
+          <LaunchAssetExecutionButton
+            assetKeys={checkedAssets.map((c) => c.key)}
+            liveDataByNode={liveDataByNode}
+          />
+        )}
+        <MoreActionsDropdown selected={checkedAssets} clearSelection={() => onToggleAll(false)} />
       </Box>
       <Table>
         <thead>
@@ -258,20 +270,44 @@ const AssetEntryRow: React.FC<{
         <td>
           {asset ? (
             <Box flex={{gap: 8, alignItems: 'center'}}>
-              <Link to={`/instance/assets/${path.join('/')}`}>
-                <Button>View Details</Button>
-              </Link>
+              <AnchorButton to={`/instance/assets/${path.join('/')}`}>View Details</AnchorButton>
               <Popover
                 position="bottom-right"
                 content={
                   <Menu>
                     <MenuLink
-                      text="View details…"
-                      to={`/instance/assets/${path.join('/')}`}
-                      icon="view_list"
+                      text="Show in group"
+                      to={
+                        repoAddress && asset.definition?.groupName
+                          ? workspacePathFromAddress(
+                              repoAddress,
+                              `/asset_groups/${asset.definition.groupName}`,
+                            )
+                          : ''
+                      }
+                      disabled={!asset?.definition}
+                      icon="asset_group"
+                    />
+                    <MenuLink
+                      text="View neighbors"
+                      to={`/instance/assets/${path.join('/')}?view=lineage&lineageScope=neighbors`}
+                      disabled={!asset?.definition}
+                      icon="graph_neighbors"
+                    />
+                    <MenuLink
+                      text="View upstream assets"
+                      to={`/instance/assets/${path.join('/')}?view=lineage&lineageScope=upstream`}
+                      disabled={!asset?.definition}
+                      icon="graph_upstream"
+                    />
+                    <MenuLink
+                      text="View downstream assets"
+                      to={`/instance/assets/${path.join('/')}?view=lineage&lineageScope=downstream`}
+                      disabled={!asset?.definition}
+                      icon="graph_downstream"
                     />
                     <MenuItem
-                      text="Wipe Asset…"
+                      text="Wipe materializations"
                       icon="delete"
                       disabled={!canWipe}
                       intent="danger"
@@ -292,7 +328,7 @@ const AssetEntryRow: React.FC<{
   },
 );
 
-const AssetBulkActions: React.FC<{
+const MoreActionsDropdown: React.FC<{
   selected: Asset[];
   clearSelection: () => void;
   requery?: RefetchQueriesFunction;
@@ -305,24 +341,25 @@ const AssetBulkActions: React.FC<{
   }
 
   const disabled = selected.length === 0;
-  const label =
-    selected.length > 1
-      ? `Wipe materializations for ${selected.length} assets`
-      : selected.length === 1
-      ? `Wipe materializations for 1 asset`
-      : `Wipe materializations`;
 
   return (
     <>
-      <Button
-        disabled={disabled}
-        icon={<Icon name="delete" />}
-        intent={disabled ? 'none' : 'danger'}
-        outlined={!disabled}
-        onClick={() => setShowBulkWipeDialog(true)}
+      <Popover
+        position="bottom-right"
+        content={
+          <Menu>
+            <MenuItem
+              text="Wipe materializations"
+              onClick={() => setShowBulkWipeDialog(true)}
+              icon={<Icon name="delete" color={disabled ? Colors.Gray600 : Colors.Red500} />}
+              disabled={disabled}
+              intent="danger"
+            />
+          </Menu>
+        }
       >
-        {label}
-      </Button>
+        <Button icon={<Icon name="expand_more" />} />
+      </Popover>
       <AssetWipeDialog
         assetKeys={selected.map((asset) => asset.key)}
         isOpen={showBulkWipeDialog}

diff --git a/js_modules/dagit/packages/core/src/assets/AssetView.tsx b/js_modules/dagit/packages/core/src/assets/AssetView.tsx
@@ -154,10 +154,8 @@ export const AssetView: React.FC<Props> = ({assetKey}) => {
             </Box>
             {definition && definition.jobNames.length > 0 && repoAddress && upstream && (
               <LaunchAssetExecutionButton
-                assets={[definition]}
-                upstreamAssetKeys={upstream.map((u) => u.assetKey)}
-                preferredJobName={definition.jobNames[0]}
-                title={lastMaterializedAt ? 'Rematerialize' : 'Materialize'}
+                assetKeys={[definition.assetKey]}
+                liveDataByNode={liveDataByNode}
               />
             )}
           </Box>