[dagit] Add sensors/schedules to the asset details page (#7041)

dagster-io · Mar 16, 2022 · 72807a1 · 72807a1
1 parent e282d44
commit 72807a1
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 30 deletions.
diff --git a/js_modules/dagit/packages/core/src/assets/AssetEntryRoot.tsx b/js_modules/dagit/packages/core/src/assets/AssetEntryRoot.tsx
@@ -23,12 +23,12 @@ export const AssetEntryRoot = () => {
 
   return queryResult.loading ? (
     <Page>
-      <AssetPageHeader assetKey={{path: currentPath}} repoAddress={null} />
+      <AssetPageHeader assetKey={{path: currentPath}} />
       <Loading queryResult={queryResult}>{() => null}</Loading>
     </Page>
   ) : queryResult.data?.assetOrError.__typename === 'AssetNotFoundError' ? (
     <Page>
-      <AssetPageHeader assetKey={{path: currentPath}} repoAddress={null} />
+      <AssetPageHeader assetKey={{path: currentPath}} />
       <AssetsCatalogTable prefixPath={currentPath} />
     </Page>
   ) : (

diff --git a/js_modules/dagit/packages/core/src/assets/AssetNodeInstigatorTag.tsx b/js_modules/dagit/packages/core/src/assets/AssetNodeInstigatorTag.tsx
@@ -0,0 +1,42 @@
+import {gql} from '@apollo/client';
+import {flatMap} from 'lodash';
+import React from 'react';
+
+import {ScheduleOrSensorTag} from '../nav/JobMetadata';
+import {SCHEDULE_SWITCH_FRAGMENT} from '../schedules/ScheduleSwitch';
+import {SENSOR_SWITCH_FRAGMENT} from '../sensors/SensorSwitch';
+import {RepoAddress} from '../workspace/types';
+
+import {AssetNodeInstigatorsFragment} from './types/AssetNodeInstigatorsFragment';
+
+export const AssetNodeInstigatorTag: React.FC<{
+  assetNode: AssetNodeInstigatorsFragment;
+  repoAddress: RepoAddress;
+}> = ({assetNode, repoAddress}) => {
+  const schedules = flatMap(assetNode.jobs, (j) => j.schedules);
+  const sensors = flatMap(assetNode.jobs, (j) => j.sensors);
+
+  return <ScheduleOrSensorTag repoAddress={repoAddress} schedules={schedules} sensors={sensors} />;
+};
+
+export const ASSET_NODE_INSTIGATORS_FRAGMENT = gql`
+  fragment AssetNodeInstigatorsFragment on AssetNode {
+    id
+    jobs {
+      id
+      name
+      schedules {
+        id
+        __typename
+        ...ScheduleSwitchFragment
+      }
+      sensors {
+        id
+        __typename
+        ...SensorSwitchFragment
+      }
+    }
+  }
+  ${SCHEDULE_SWITCH_FRAGMENT}
+  ${SENSOR_SWITCH_FRAGMENT}
+`;
diff --git a/js_modules/dagit/packages/core/src/assets/AssetPageHeader.tsx b/js_modules/dagit/packages/core/src/assets/AssetPageHeader.tsx
@@ -1,17 +1,12 @@
 import {BreadcrumbProps, Breadcrumbs} from '@blueprintjs/core';
-import {Box, ColorsWIP, PageHeader, TagWIP, Heading} from '@dagster-io/ui';
+import {Box, ColorsWIP, PageHeader, Heading} from '@dagster-io/ui';
 import React from 'react';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components/macro';
 
-import {RepositoryLink} from '../nav/RepositoryLink';
-import {RepoAddress} from '../workspace/types';
+type Props = {assetKey: {path: string[]}} & Partial<React.ComponentProps<typeof PageHeader>>;
 
-type Props = {assetKey: {path: string[]}; repoAddress: RepoAddress | null} & Partial<
-  React.ComponentProps<typeof PageHeader>
->;
-
-export const AssetPageHeader: React.FC<Props> = ({assetKey, repoAddress, ...extra}) => {
+export const AssetPageHeader: React.FC<Props> = ({assetKey, ...extra}) => {
   const breadcrumbs = React.useMemo(() => {
     if (assetKey.path.length === 1) {
       return [{text: assetKey.path[0], href: '/instance/assets'}];
@@ -42,15 +37,6 @@ export const AssetPageHeader: React.FC<Props> = ({assetKey, repoAddress, ...extr
           />
         </Box>
       }
-      tags={
-        repoAddress ? (
-          <TagWIP icon="asset">
-            Asset in <RepositoryLink repoAddress={repoAddress} />
-          </TagWIP>
-        ) : (
-          <TagWIP icon="asset">Asset</TagWIP>
-        )
-      }
       {...extra}
     />
   );

diff --git a/js_modules/dagit/packages/core/src/assets/AssetView.tsx b/js_modules/dagit/packages/core/src/assets/AssetView.tsx
@@ -1,5 +1,15 @@
 import {gql, useQuery} from '@apollo/client';
-import {Alert, Box, ButtonLink, ColorsWIP, NonIdealState, Spinner, Tab, Tabs} from '@dagster-io/ui';
+import {
+  Alert,
+  Box,
+  ButtonLink,
+  ColorsWIP,
+  NonIdealState,
+  Spinner,
+  Tab,
+  Tabs,
+  TagWIP,
+} from '@dagster-io/ui';
 import * as React from 'react';
 
 import {
@@ -11,6 +21,7 @@ import {displayNameForAssetKey} from '../app/Util';
 import {Timestamp} from '../app/time/Timestamp';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
+import {RepositoryLink} from '../nav/RepositoryLink';
 import {useDidLaunchEvent} from '../runs/RunUtils';
 import {LaunchAssetExecutionButton} from '../workspace/asset-graph/LaunchAssetExecutionButton';
 import {
@@ -23,6 +34,7 @@ import {buildRepoAddress} from '../workspace/buildRepoAddress';
 
 import {AssetEvents} from './AssetEvents';
 import {AssetNodeDefinition, ASSET_NODE_DEFINITION_FRAGMENT} from './AssetNodeDefinition';
+import {AssetNodeInstigatorTag, ASSET_NODE_INSTIGATORS_FRAGMENT} from './AssetNodeInstigatorTag';
 import {AssetPageHeader} from './AssetPageHeader';
 import {AssetKey} from './types';
 import {
@@ -109,7 +121,20 @@ export const AssetView: React.FC<Props> = ({assetKey}) => {
     <div>
       <AssetPageHeader
         assetKey={assetKey}
-        repoAddress={repoAddress}
+        tags={
+          <>
+            {repoAddress ? (
+              <TagWIP icon="asset">
+                Asset in <RepositoryLink repoAddress={repoAddress} />
+              </TagWIP>
+            ) : (
+              <TagWIP icon="asset">Asset</TagWIP>
+            )}
+            {definition && repoAddress && (
+              <AssetNodeInstigatorTag assetNode={definition} repoAddress={repoAddress} />
+            )}
+          </>
+        }
         tabs={
           <Tabs size="large" selectedTabId={params.view || 'activity'}>
             <Tab
@@ -224,11 +249,14 @@ const ASSET_QUERY = gql`
               name
             }
           }
+
+          ...AssetNodeInstigatorsFragment
           ...AssetNodeDefinitionFragment
         }
       }
     }
   }
+  ${ASSET_NODE_INSTIGATORS_FRAGMENT}
   ${ASSET_NODE_DEFINITION_FRAGMENT}
 `;
 

diff --git a/js_modules/dagit/packages/core/src/assets/types/AssetNodeInstigatorsFragment.ts b/js_modules/dagit/packages/core/src/assets/types/AssetNodeInstigatorsFragment.ts
diff --git a/js_modules/dagit/packages/core/src/assets/types/AssetQuery.ts b/js_modules/dagit/packages/core/src/assets/types/AssetQuery.ts
diff --git a/js_modules/dagit/packages/core/src/nav/RepositoryLink.tsx b/js_modules/dagit/packages/core/src/nav/RepositoryLink.tsx
@@ -25,12 +25,12 @@ export const RepositoryLink: React.FC<{
   ].join('@');
 
   return (
-    <Box flex={{display: 'inline-flex', direction: 'row', alignItems: 'center'}}>
+    <Box
+      flex={{display: 'inline-flex', direction: 'row', alignItems: 'center'}}
+      title={repoAddressAsString(repoAddress)}
+    >
       {showIcon && <IconWIP name="folder" style={{marginRight: 8}} color={ColorsWIP.Gray400} />}
-      <RepositoryName
-        to={workspacePathFromAddress(repoAddress)}
-        title={repoAddressAsString(repoAddress)}
-      >
+      <RepositoryName to={workspacePathFromAddress(repoAddress)}>
         {repoAddressTruncated}
       </RepositoryName>
       {canReloadRepositoryLocation && showRefresh ? (

diff --git a/js_modules/dagit/packages/core/src/schedules/ScheduleSwitch.tsx b/js_modules/dagit/packages/core/src/schedules/ScheduleSwitch.tsx
@@ -87,7 +87,9 @@ export const ScheduleSwitch: React.FC<Props> = (props) => {
   );
 
   return lacksPermission ? (
-    <Tooltip content={DISABLED_MESSAGE}>{switchElement}</Tooltip>
+    <Tooltip content={DISABLED_MESSAGE} display="flex">
+      {switchElement}
+    </Tooltip>
   ) : (
     switchElement
   );

diff --git a/js_modules/dagit/packages/core/src/sensors/SensorSwitch.tsx b/js_modules/dagit/packages/core/src/sensors/SensorSwitch.tsx
@@ -77,7 +77,9 @@ export const SensorSwitch: React.FC<Props> = (props) => {
   );
 
   return lacksPermission ? (
-    <Tooltip content={DISABLED_MESSAGE}>{switchElement}</Tooltip>
+    <Tooltip content={DISABLED_MESSAGE} display="flex">
+      {switchElement}
+    </Tooltip>
   ) : (
     switchElement
   );

diff --git a/js_modules/dagit/packages/ui/src/components/BaseTag.tsx b/js_modules/dagit/packages/ui/src/components/BaseTag.tsx
@@ -40,7 +40,7 @@ export const BaseTag = (props: Props) => {
       {icon || null}
       {label !== undefined && label !== null ? (
         <span
-          data-tooltip={label}
+          data-tooltip={typeof label === 'string' ? label : undefined}
           data-tooltip-style={JSON.stringify({
             ...BaseTagTooltipStyle,
             backgroundColor: fillColor,