Enable rendering extra sidebar entries on asset overview page

dagster-io · Dec 18, 2024 · 87fb326 · 87fb326
1 parent 910838e
commit 87fb326
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 9 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx
@@ -49,15 +49,26 @@ import {StaleReasonsTag} from '../assets/Stale';
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {IndeterminateLoadingBar} from '../ui/IndeterminateLoadingBar';
 import {buildRepoAddress} from '../workspace/buildRepoAddress';
+import {AssetNodeDefinitionFragment} from './types/AssetNodeDefinition.types';
 
 interface Props {
   assetKey: AssetKey;
   headerBreadcrumbs: BreadcrumbProps[];
   writeAssetVisit?: (assetKey: AssetKey) => void;
   currentPath: string[];
+  renderExtraSidebarEntries?: (
+    repoAddress: {name: string; location: string},
+    assetNode: AssetNodeDefinitionFragment,
+  ) => React.ReactNode;
 }
 
-export const AssetView = ({assetKey, headerBreadcrumbs, writeAssetVisit, currentPath}: Props) => {
+export const AssetView = ({
+  assetKey,
+  headerBreadcrumbs,
+  writeAssetVisit,
+  currentPath,
+  renderExtraSidebarEntries,
+}: Props) => {
   const [params, setParams] = useQueryPersistedState<AssetViewParams>({});
   const {useTabBuilder, renderFeatureView} = useContext(AssetFeatureContext);
 
@@ -124,6 +135,7 @@ export const AssetView = ({assetKey, headerBreadcrumbs, writeAssetVisit, current
         downstream={downstream}
         liveData={liveData}
         dependsOnSelf={node ? nodeDependsOnSelf(node) : false}
+        renderExtraSidebarEntries={renderExtraSidebarEntries}
       />
     );
   };

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsOverviewRoot.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetsOverviewRoot.oss.tsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-restricted-imports
 import {BreadcrumbProps} from '@blueprintjs/core';
 import {Box} from '@dagster-io/ui-components';
-import React, {useMemo} from 'react';
+import {useMemo} from 'react';
 import {useHistory, useParams} from 'react-router-dom';
 import {AssetGlobalLineageLink, AssetPageHeader} from 'shared/assets/AssetPageHeader.oss';
 
@@ -15,15 +15,21 @@ import {displayNameForAssetKey} from '../asset-graph/Utils';
 import {useDocumentTitle} from '../hooks/useDocumentTitle';
 import {useQueryPersistedState} from '../hooks/useQueryPersistedState';
 import {ReloadAllButton} from '../workspace/ReloadAllButton';
+import {AssetNodeDefinitionFragment} from './types/AssetNodeDefinition.types';
 
 export const AssetsOverviewRoot = ({
   writeAssetVisit,
   headerBreadcrumbs,
   documentTitlePrefix,
+  renderExtraSidebarEntries,
 }: {
   writeAssetVisit?: (assetKey: AssetKey) => void;
   headerBreadcrumbs: BreadcrumbProps[];
   documentTitlePrefix: string;
+  renderExtraSidebarEntries?: (
+    repoAddress: {name: string; location: string},
+    assetNode: AssetNodeDefinitionFragment,
+  ) => React.ReactNode;
 }) => {
   useTrackPageView();
 
@@ -76,6 +82,7 @@ export const AssetsOverviewRoot = ({
       headerBreadcrumbs={headerBreadcrumbs}
       writeAssetVisit={writeAssetVisit}
       currentPath={currentPath}
+      renderExtraSidebarEntries={renderExtraSidebarEntries}
     />
   );
 };

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/overview/AssetAlertsSection.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/overview/AssetAlertsSection.tsx
@@ -0,0 +1,23 @@
+import {Box} from '@dagster-io/ui-components';
+
+import {metadataForAssetNode} from '../AssetMetadata';
+import {SectionSkeleton} from './Common';
+import {RepoAddress} from '../../workspace/types';
+import {AssetNodeDefinitionFragment} from '../types/AssetNodeDefinition.types';
+
+export const AssetAlertsSection = ({
+  repoAddress,
+  assetNode,
+}: {
+  repoAddress: RepoAddress | null;
+  assetNode: AssetNodeDefinitionFragment | null | undefined;
+}) => {
+  if (!assetNode) {
+    return <SectionSkeleton />;
+  }
+  const {assetType} = metadataForAssetNode(assetNode);
+  const configType = assetNode?.configField?.configType;
+  const assetConfigSchema = configType && configType.key !== 'Any' ? configType : null;
+
+  return <Box flex={{direction: 'column', gap: 12}}></Box>;
+};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/overview/AssetNodeOverview.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/overview/AssetNodeOverview.tsx
@@ -49,6 +49,7 @@ export const AssetNodeOverview = ({
   downstream,
   liveData,
   dependsOnSelf,
+  renderExtraSidebarEntries,
 }: {
   assetKey: AssetKey;
   assetNode: AssetNodeDefinitionFragment | undefined | null;
@@ -57,6 +58,10 @@ export const AssetNodeOverview = ({
   downstream: AssetNodeForGraphQueryFragment[] | null;
   liveData: LiveDataForNode | undefined;
   dependsOnSelf: boolean;
+  renderExtraSidebarEntries?: (
+    repoAddress: {name: string; location: string},
+    assetNode: AssetNodeDefinitionFragment,
+  ) => React.ReactNode;
 }) => {
   const cachedOrLiveAssetNode = assetNode ?? cachedAssetNode;
   const repoAddress = cachedOrLiveAssetNode
@@ -98,6 +103,13 @@ export const AssetNodeOverview = ({
     ),
   );
 
+  const extraSidebarEntries = React.useMemo(() => {
+    if (!renderExtraSidebarEntries || !repoAddress || !assetNode) {
+      return null;
+    }
+    return renderExtraSidebarEntries(repoAddress, assetNode);
+  }, [renderExtraSidebarEntries, repoAddress, assetNode]);
+
   if (loading || !cachedOrLiveAssetNode) {
     return <AssetNodeOverviewLoading />;
   }
@@ -261,6 +273,7 @@ export const AssetNodeOverview = ({
               <ComputeDetailsSection repoAddress={repoAddress} assetNode={assetNode} />
             </LargeCollapsibleSection>
           ) : null}
+          {extraSidebarEntries}
         </>
       }
     />

diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/overview/Common.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/overview/Common.tsx
@@ -38,10 +38,12 @@ export const SectionEmptyState = ({
   title,
   description,
   learnMoreLink,
+  interaction,
 }: {
   title: string;
   description: string;
-  learnMoreLink: string;
+  learnMoreLink?: string;
+  interaction?: React.ReactNode;
 }) => (
   <Box
     padding={24}
@@ -50,10 +52,13 @@ export const SectionEmptyState = ({
   >
     <Subtitle2>{title}</Subtitle2>
     <Body2>{description}</Body2>
-    {learnMoreLink ? (
-      <a href={learnMoreLink} target="_blank" rel="noreferrer">
-        Learn more
-      </a>
-    ) : undefined}
+    <Box flex={{direction: 'row', gap: 8}}>
+      {learnMoreLink ? (
+        <a href={learnMoreLink} target="_blank" rel="noreferrer">
+          Learn more
+        </a>
+      ) : undefined}
+      {interaction}
+    </Box>
   </Box>
 );
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/overview/ComputeDetailsSection.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/overview/ComputeDetailsSection.tsx
@@ -1,5 +1,4 @@
 import {Box, ButtonLink, Colors, ConfigTypeSchema, Icon, Tag} from '@dagster-io/ui-components';
-import React from 'react';
 import {Link} from 'react-router-dom';
 
 import {metadataForAssetNode} from '../AssetMetadata';