[dagit] Add Reload All button to the asset catalog, remove repo filter (

#7708) * Add the workspace Reload All button to the asset catalog, remove repo filter * Add an optional data description, discriminate actions a bit better
dagster-io · May 6, 2022 · 9f73f3f · 9f73f3f · vercel · May 6, 2022
1 parent 89efb37
commit 9f73f3f
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 48 deletions.
diff --git a/js_modules/dagit/packages/core/src/app/QueryRefresh.tsx b/js_modules/dagit/packages/core/src/app/QueryRefresh.tsx
@@ -144,7 +144,13 @@ export function useMergedRefresh(
   }, args);
 }
 
-export const QueryRefreshCountdown = ({refreshState}: {refreshState: QueryRefreshState}) => {
+export const QueryRefreshCountdown = ({
+  refreshState,
+  dataDescription,
+}: {
+  refreshState: QueryRefreshState;
+  dataDescription?: string;
+}) => {
   const status = refreshState.networkStatus === NetworkStatus.ready ? 'counting' : 'idle';
   const timeRemaining = useCountdown({duration: refreshState.nextFireDelay, status});
 
@@ -153,6 +159,7 @@ export const QueryRefreshCountdown = ({refreshState}: {refreshState: QueryRefres
       refreshing={status === 'idle' || timeRemaining === 0}
       seconds={Math.floor(timeRemaining / 1000)}
       onRefresh={() => refreshState.refetch()}
+      dataDescription={dataDescription}
     />
   );
 };
diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx
@@ -95,7 +95,7 @@ export const AssetGraphExplorer: React.FC<Props> = (props) => {
     graphAssetKeys,
     allAssetKeys,
     applyingEmptyDefault,
-  } = useAssetGraphData(props.pipelineSelector, props.explorerPath.opsQuery, props.filterNodes);
+  } = useAssetGraphData(props.pipelineSelector, props.explorerPath.opsQuery);
 
   const {liveResult, liveDataByNode} = useLiveDataForAssetKeys(
     props.pipelineSelector,
@@ -536,7 +536,10 @@ const AssetGraphExplorerWithData: React.FC<
             style={{position: 'absolute', right: 12, top: 12}}
           >
             <Box flex={{alignItems: 'center', gap: 12}}>
-              <QueryRefreshCountdown refreshState={liveDataRefreshState} />
+              <QueryRefreshCountdown
+                refreshState={liveDataRefreshState}
+                dataDescription="materializations"
+              />
 
               <LaunchAssetExecutionButton
                 title={titleForLaunch(selectedGraphNodes, liveDataByNode)}

diff --git a/js_modules/dagit/packages/core/src/assets/AssetTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetTable.tsx
@@ -11,6 +11,7 @@ import {RepositoryLink} from '../nav/RepositoryLink';
 import {instanceAssetsExplorerPathToURL} from '../pipelines/PipelinePathUtils';
 import {MenuLink} from '../ui/MenuLink';
 import {markdownToPlaintext} from '../ui/markdownToPlaintext';
+import {ReloadAllButton} from '../workspace/ReloadAllButton';
 
 import {AssetLink} from './AssetLink';
 import {AssetWipeDialog} from './AssetWipeDialog';
@@ -64,6 +65,7 @@ export const AssetTable = ({
           selected={Array.from(checkedAssets)}
           clearSelection={() => onToggleAll(false)}
         />
+        <ReloadAllButton />
       </Box>
       <Table>
         <thead>

diff --git a/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx
@@ -13,11 +13,8 @@ import {
 import {tokenForAssetKey} from '../asset-graph/Utils';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
-import {RepoFilterButton} from '../instance/RepoFilterButton';
 import {Loading} from '../ui/Loading';
 import {StickyTableContainer} from '../ui/StickyTableContainer';
-import {DagsterRepoOption, WorkspaceContext} from '../workspace/WorkspaceContext';
-import {buildRepoPath} from '../workspace/buildRepoAddress';
 
 import {AssetTable, ASSET_TABLE_FRAGMENT} from './AssetTable';
 import {AssetViewModeSwitch} from './AssetViewModeSwitch';
@@ -33,7 +30,6 @@ const PAGE_SIZE = 50;
 type Asset = AssetCatalogTableQuery_assetsOrError_AssetConnection_nodes;
 
 export const AssetsCatalogTable: React.FC<{prefixPath?: string[]}> = ({prefixPath = []}) => {
-  const {visibleRepos, allRepos} = React.useContext(WorkspaceContext);
   const [cursor, setCursor] = useQueryPersistedState<string | undefined>({queryKey: 'cursor'});
   const [search, setSearch] = useQueryPersistedState<string | undefined>({queryKey: 'q'});
   const [view, _setView] = useAssetView();
@@ -91,10 +87,7 @@ export const AssetsCatalogTable: React.FC<{prefixPath?: string[]}> = ({prefixPat
             .toLowerCase()
             .trim();
 
-          const filtered = (visibleRepos.length === allRepos.length
-            ? assets
-            : filterAssetsToRepos(assets, visibleRepos)
-          ).filter(
+          const filtered = assets.filter(
             (a) =>
               !searchSeparatorAgnostic ||
               tokenForAssetKey(a.key).toLowerCase().includes(searchSeparatorAgnostic),
@@ -123,7 +116,6 @@ export const AssetsCatalogTable: React.FC<{prefixPath?: string[]}> = ({prefixPat
                   actionBarComponents={
                     <>
                       <AssetViewModeSwitch view={view} setView={setView} />
-                      <RepoFilterButton />
                       <TextInput
                         value={search || ''}
                         style={{width: '30vw', minWidth: 150, maxWidth: 400}}
@@ -237,16 +229,3 @@ const filterAssetsByNamespace = (assets: Asset[], paths: string[][]) => {
     paths.some((path) => path.every((part, i) => part === asset.key.path[i])),
   );
 };
-
-const filterAssetsToRepos = (assets: Asset[], visibleRepos: DagsterRepoOption[]) => {
-  const visibleRepoHashes = visibleRepos.map((v) =>
-    buildRepoPath(v.repository.name, v.repositoryLocation.name),
-  );
-  return assets.filter(
-    (a) =>
-      !a.definition ||
-      visibleRepoHashes.includes(
-        buildRepoPath(a.definition.repository.name, a.definition.repository.location.name),
-      ),
-  );
-};
diff --git a/js_modules/dagit/packages/core/src/assets/InstanceAssetGraphExplorer.tsx b/js_modules/dagit/packages/core/src/assets/InstanceAssetGraphExplorer.tsx
@@ -4,14 +4,11 @@ import {useParams} from 'react-router';
 import {useHistory} from 'react-router-dom';
 
 import {AssetGraphExplorer} from '../asset-graph/AssetGraphExplorer';
-import {AssetGraphQuery_assetNodes} from '../asset-graph/types/AssetGraphQuery';
-import {RepoFilterButton} from '../instance/RepoFilterButton';
 import {
   instanceAssetsExplorerPathFromString,
   instanceAssetsExplorerPathToURL,
 } from '../pipelines/PipelinePathUtils';
-import {WorkspaceContext} from '../workspace/WorkspaceContext';
-import {buildRepoPath} from '../workspace/buildRepoAddress';
+import {ReloadAllButton} from '../workspace/ReloadAllButton';
 
 import {AssetViewModeSwitch} from './AssetViewModeSwitch';
 import {useAssetView} from './useAssetView';
@@ -20,19 +17,8 @@ export const InstanceAssetGraphExplorer: React.FC = () => {
   const params = useParams();
   const history = useHistory();
   const [_, _setView] = useAssetView();
-  const {visibleRepos} = React.useContext(WorkspaceContext);
   const explorerPath = instanceAssetsExplorerPathFromString(params[0]);
 
-  const filterNodes = React.useMemo(() => {
-    const visibleRepoAddresses = visibleRepos.map((v) =>
-      buildRepoPath(v.repository.name, v.repositoryLocation.name),
-    );
-    return (node: AssetGraphQuery_assetNodes) =>
-      visibleRepoAddresses.includes(
-        buildRepoPath(node.repository.name, node.repository.location.name),
-      );
-  }, [visibleRepos]);
-
   return (
     <Box
       flex={{direction: 'column', justifyContent: 'stretch'}}
@@ -41,7 +27,7 @@ export const InstanceAssetGraphExplorer: React.FC = () => {
       <PageHeader title={<Heading>Assets</Heading>} />
       <Box
         background={Colors.White}
-        padding={{horizontal: 24, vertical: 8}}
+        padding={{left: 24, right: 12, vertical: 8}}
         border={{side: 'bottom', width: 1, color: Colors.KeylineGray}}
         flex={{direction: 'row', gap: 12}}
       >
@@ -54,11 +40,11 @@ export const InstanceAssetGraphExplorer: React.FC = () => {
             }
           }}
         />
-        <RepoFilterButton />
+        <div style={{flex: 1}} />
+        <ReloadAllButton label="Reload definitions" />
       </Box>
       <AssetGraphExplorer
         options={{preferAssetRendering: true, explodeComposites: true}}
-        filterNodes={filterNodes}
         explorerPath={explorerPath}
         onChangeExplorerPath={(path, mode) => {
           history[mode](instanceAssetsExplorerPathToURL(path));

diff --git a/js_modules/dagit/packages/core/src/hooks/useQueryPersistedState.tsx b/js_modules/dagit/packages/core/src/hooks/useQueryPersistedState.tsx
@@ -7,6 +7,7 @@ type QueryPersistedDataType =
   | {[key: string]: any}
   | Array<any>
   | (string | undefined | number)
+  | (boolean | undefined)
   | null;
 
 let currentQueryString: {[key: string]: any} = {};

diff --git a/js_modules/dagit/packages/core/src/workspace/ReloadAllButton.tsx b/js_modules/dagit/packages/core/src/workspace/ReloadAllButton.tsx
@@ -5,23 +5,23 @@ import {DISABLED_MESSAGE, usePermissions} from '../app/Permissions';
 
 import {useReloadWorkspace} from './useReloadWorkspace';
 
-export const ReloadAllButton = () => {
+export const ReloadAllButton: React.FC<{label?: string}> = ({label = 'Reload all'}) => {
   const {reloading, onClick} = useReloadWorkspace();
   const {canReloadWorkspace} = usePermissions();
 
   if (!canReloadWorkspace) {
     return (
       <Tooltip content={DISABLED_MESSAGE}>
         <Button icon={<Icon name="refresh" />} disabled intent="none">
-          Reload all
+          {label}
         </Button>
       </Tooltip>
     );
   }
 
   return (
     <Button onClick={onClick} icon={<Icon name="refresh" />} loading={reloading} intent="none">
-      Reload all
+      {label}
     </Button>
   );
 };
diff --git a/js_modules/dagit/packages/ui/src/components/RefreshableCountdown.tsx b/js_modules/dagit/packages/ui/src/components/RefreshableCountdown.tsx
@@ -10,16 +10,19 @@ interface Props {
   refreshing: boolean;
   seconds: number;
   onRefresh: () => void;
+  dataDescription?: string;
 }
 
 export const RefreshableCountdown = (props: Props) => {
-  const {refreshing, seconds, onRefresh} = props;
+  const {refreshing, seconds, onRefresh, dataDescription = 'data'} = props;
   return (
     <Group direction="row" spacing={8} alignItems="center">
       <span
         style={{color: Colors.Gray400, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap'}}
       >
-        {refreshing ? 'Refreshing data…' : `0:${seconds < 10 ? `0${seconds}` : seconds}`}
+        {refreshing
+          ? `Refreshing ${dataDescription}…`
+          : `0:${seconds < 10 ? `0${seconds}` : seconds}`}
       </span>
       <Tooltip content={<span style={{whiteSpace: 'nowrap'}}>Refresh now</span>} position="bottom">
         <RefreshButton onClick={onRefresh}>