[dagit] Asset group styling adjustments, polish (#8246)

* Repository graphs empty state * Show assets first in the workspace / repository tabs, in search placeholder * Align spacing in the DAG views so they match our table views * Move the query refresh indicator to the right side of the Asset Table * Make the Latest Run column wide enough to hold the “warning” icons * Apply a negative margin to the ReloadAllButton on asset group pages so the header is the same height as the job header * Pad the bottom pagination of the asset catalog to match the bottom of runs * Make “No assets to display” span the asset table properly * remove log Co-authored-by: bengotow <bgotow@elementl.com>
dagster-io · Jun 8, 2022 · f6ab196 · f6ab196
1 parent 455096b
commit f6ab196
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 40 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
@@ -395,7 +395,7 @@ export const AssetGraphExplorerWithData: React.FC<
 
           <Box
             flex={{direction: 'column', alignItems: 'flex-end', gap: 8}}
-            style={{position: 'absolute', right: 12, top: 12}}
+            style={{position: 'absolute', right: 12, top: 8}}
           >
             <Box flex={{alignItems: 'center', gap: 12}}>
               <QueryRefreshCountdown

diff --git a/js_modules/dagit/packages/core/src/assets/AssetGroupRoot.tsx b/js_modules/dagit/packages/core/src/assets/AssetGroupRoot.tsx
@@ -42,7 +42,11 @@ export const AssetGroupRoot: React.FC<{repoAddress: RepoAddress; tab: 'lineage'
     <Page style={{display: 'flex', flexDirection: 'column', paddingBottom: 0}}>
       <PageHeader
         title={<Heading>{groupName}</Heading>}
-        right={<ReloadAllButton label="Reload definitions" />}
+        right={
+          <div style={{marginBottom: -8}}>
+            <ReloadAllButton label="Reload definitions" />
+          </div>
+        }
         tags={
           <Tag icon="asset_group">
             Asset Group in <RepositoryLink repoAddress={repoAddress} />

diff --git a/js_modules/dagit/packages/core/src/assets/AssetNodeDefinition.tsx b/js_modules/dagit/packages/core/src/assets/AssetNodeDefinition.tsx
@@ -237,7 +237,7 @@ const OpNamesDisplay = (props: {
 
   return (
     <Box flex={{gap: 4, alignItems: 'center'}}>
-      <Icon name="job" size={16} />
+      <Icon name="schema" size={16} />
       <Mono>
         <Link to={graphPath}>{graphName}</Link> ({opCount === 1 ? '1 op' : `${opCount} ops`})
       </Mono>

diff --git a/js_modules/dagit/packages/core/src/assets/AssetTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetTable.tsx
@@ -17,6 +17,7 @@ import {Link} from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import {usePermissions} from '../app/Permissions';
+import {QueryRefreshCountdown, QueryRefreshState} from '../app/QueryRefresh';
 import {AssetLatestRunWithNotices, AssetRunLink} from '../asset-graph/AssetNode';
 import {LiveData, toGraphId} from '../asset-graph/Utils';
 import {useSelectionReducer} from '../hooks/useSelectionReducer';
@@ -40,6 +41,7 @@ export const AssetTable = ({
   view,
   assets,
   actionBarComponents,
+  refreshState,
   liveDataByNode,
   prefixPath,
   displayPathForAsset,
@@ -48,6 +50,7 @@ export const AssetTable = ({
 }: {
   view: AssetViewType;
   assets: Asset[];
+  refreshState: QueryRefreshState;
   actionBarComponents: React.ReactNode;
   liveDataByNode: LiveData;
   prefixPath: string[];
@@ -82,22 +85,26 @@ export const AssetTable = ({
 
   return (
     <Box flex={{direction: 'column'}}>
-      <Box flex={{alignItems: 'center', gap: 8}} padding={{vertical: 8, left: 24, right: 12}}>
+      <Box flex={{alignItems: 'center', gap: 12}} padding={{vertical: 8, left: 24, right: 12}}>
         {actionBarComponents}
         <div style={{flex: 1}} />
-        {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)} />
+        <QueryRefreshCountdown refreshState={refreshState} />
+
+        <Box flex={{alignItems: 'center', gap: 8}}>
+          {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>
       </Box>
       <Table>
         <thead>
@@ -118,7 +125,7 @@ export const AssetTable = ({
             <th>{view === 'directory' ? 'Asset Key Prefix' : 'Asset Key'}</th>
             <th style={{width: 340}}>Defined In</th>
             <th style={{width: 200}}>Materialized</th>
-            <th style={{width: 100}}>Latest Run</th>
+            <th style={{width: 115}}>Latest Run</th>
             <th style={{width: 80}}>Actions</th>
           </tr>
         </thead>
@@ -158,7 +165,7 @@ export const AssetTable = ({
 const AssetEmptyRow = () => {
   return (
     <tr>
-      <td colSpan={4}>
+      <td colSpan={6}>
         <Box flex={{justifyContent: 'center', alignItems: 'center'}}>
           <Box margin={{left: 8}}>No assets to display</Box>
         </Box>

diff --git a/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx b/js_modules/dagit/packages/core/src/assets/AssetsCatalogTable.tsx
@@ -15,12 +15,7 @@ import * as React from 'react';
 import styled from 'styled-components/macro';
 
 import {PythonErrorInfo, PYTHON_ERROR_FRAGMENT} from '../app/PythonErrorInfo';
-import {
-  FIFTEEN_SECONDS,
-  QueryRefreshCountdown,
-  useMergedRefresh,
-  useQueryRefreshAtInterval,
-} from '../app/QueryRefresh';
+import {FIFTEEN_SECONDS, useMergedRefresh, useQueryRefreshAtInterval} from '../app/QueryRefresh';
 import {PythonErrorFragment} from '../app/types/PythonErrorFragment';
 import {tokenForAssetKey} from '../asset-graph/Utils';
 import {useLiveDataForAssetKeys} from '../asset-graph/useLiveDataForAssetKeys';
@@ -206,16 +201,16 @@ export const AssetsCatalogTable: React.FC<AssetCatalogTableProps> = ({
               {!groupSelector ? (
                 <AssetGroupSuggest assets={assets} value={searchGroup} onChange={setSearchGroup} />
               ) : undefined}
-              <QueryRefreshCountdown refreshState={refreshState} />
             </>
           }
+          refreshState={refreshState}
           prefixPath={prefixPath || []}
           displayPathForAsset={displayPathForAsset}
           maxDisplayCount={PAGE_SIZE}
           requery={(_) => [{query: ASSET_CATALOG_TABLE_QUERY}]}
         />
       </StickyTableContainer>
-      <Box margin={{vertical: 20}}>
+      <Box padding={{bottom: 64}}>
         <CursorPaginationControls {...paginationProps} />
       </Box>
     </Wrapper>

diff --git a/js_modules/dagit/packages/core/src/pipelines/GraphExplorer.tsx b/js_modules/dagit/packages/core/src/pipelines/GraphExplorer.tsx
@@ -357,7 +357,7 @@ export const RightInfoPanelContent = styled.div`
 export const OptionsOverlay = styled.div`
   background-color: ${Color(Colors.White).fade(0.6).toString()};
   z-index: 2;
-  padding: 15px 15px;
+  padding: 15px 20px;
   display: inline-flex;
   align-items: stretch;
   white-space: nowrap;
@@ -370,7 +370,7 @@ export const OptionsOverlay = styled.div`
 export const HighlightOverlay = styled.div`
   background-color: ${Color(Colors.White).fade(0.6).toString()};
   z-index: 2;
-  padding: 12px 12px 0 0;
+  padding: 8px 12px 0 0;
   display: inline-flex;
   align-items: stretch;
   position: absolute;
@@ -381,8 +381,8 @@ export const HighlightOverlay = styled.div`
 export const QueryOverlay = styled.div`
   z-index: 2;
   position: absolute;
-  top: 10px;
-  left: 20px;
+  top: 8px;
+  left: 24px;
   white-space: nowrap;
   display: flex;
   gap: 10px;

diff --git a/js_modules/dagit/packages/core/src/search/SearchDialog.tsx b/js_modules/dagit/packages/core/src/search/SearchDialog.tsx
@@ -177,7 +177,7 @@ export const SearchDialog: React.FC<{searchPlaceholder: string}> = ({searchPlace
               spellCheck={false}
               onChange={onChange}
               onKeyDown={onKeyDown}
-              placeholder="Search jobs, schedules, sensors…"
+              placeholder="Search assets, jobs, schedules, sensors…"
               type="text"
               value={queryString}
             />

diff --git a/js_modules/dagit/packages/core/src/workspace/RepositoryGraphsList.tsx b/js_modules/dagit/packages/core/src/workspace/RepositoryGraphsList.tsx
@@ -124,6 +124,18 @@ export const RepositoryGraphsList: React.FC<Props> = (props) => {
     );
   }
 
+  if (!graphsForTable.length) {
+    return (
+      <Box padding={64}>
+        <NonIdealState
+          icon="schema"
+          title="No graphs found"
+          description={<div>This repository does not have any graphs defined.</div>}
+        />
+      </Box>
+    );
+  }
+
   return (
     <Table>
       <thead>

diff --git a/js_modules/dagit/packages/core/src/workspace/WorkspaceOverviewRoot.tsx b/js_modules/dagit/packages/core/src/workspace/WorkspaceOverviewRoot.tsx
@@ -61,11 +61,11 @@ export const WorkspaceOverviewRoot = () => {
         <thead>
           <tr>
             <th>Repository</th>
+            <th>Assets</th>
             <th>Jobs</th>
             {anyPipelinesInWorkspace ? <th>Pipelines</th> : null}
             <th>Graphs</th>
             <th>Ops</th>
-            <th>Assets</th>
             <th>Schedules</th>
             <th>Sensors</th>
           </tr>
@@ -81,6 +81,9 @@ export const WorkspaceOverviewRoot = () => {
             return (
               <tr key={repoString}>
                 <td style={{width: '40%'}}>{repoString}</td>
+                <td>
+                  <Link to={workspacePath(name, location, '/assets')}>Assets</Link>
+                </td>
                 <td>
                   <Link to={workspacePath(name, location, '/jobs')}>Jobs</Link>
                 </td>
@@ -99,9 +102,6 @@ export const WorkspaceOverviewRoot = () => {
                 <td>
                   <Link to={workspacePath(name, location, '/ops')}>Ops</Link>
                 </td>
-                <td>
-                  <Link to={workspacePath(name, location, '/assets')}>Assets</Link>
-                </td>
                 <td>
                   <Link to={workspacePath(name, location, '/schedules')}>Schedules</Link>
                 </td>

diff --git a/js_modules/dagit/packages/core/src/workspace/WorkspaceRepoRoot.tsx b/js_modules/dagit/packages/core/src/workspace/WorkspaceRepoRoot.tsx
@@ -33,6 +33,10 @@ export const WorkspaceRepoRoot: React.FC<Props> = (props) => {
 
   const tabs = React.useMemo(() => {
     const tabList = [
+      {
+        text: 'Assets',
+        href: workspacePathFromAddress(repoAddress, '/assets'),
+      },
       {text: 'Jobs', href: workspacePathFromAddress(repoAddress, '/jobs')},
       anyPipelines
         ? {text: 'Pipelines', href: workspacePathFromAddress(repoAddress, '/pipelines')}
@@ -44,10 +48,6 @@ export const WorkspaceRepoRoot: React.FC<Props> = (props) => {
       },
       {text: 'Schedules', href: workspacePathFromAddress(repoAddress, '/schedules')},
       {text: 'Sensors', href: workspacePathFromAddress(repoAddress, '/sensors')},
-      {
-        text: 'Assets',
-        href: workspacePathFromAddress(repoAddress, '/assets'),
-      },
     ];
 
     return tabList.filter(Boolean) as {text: string; href: string}[];