Policy evaluations frontend

js_modules/dagster-ui/packages/ui-components/src/components/Suggest.tsx

@@ -98,23 +98,25 @@ export const Suggest = <T,>(props: Props<T>) => {
         }
 
         return (
-          <List
-            style={{outline: 'none', marginRight: -5, paddingRight: 5}}
-            rowCount={props.filteredItems.length}
-            scrollToIndex={
-              props.activeItem && !isCreateNewItem(props.activeItem)
-                ? props.filteredItems.indexOf(props.activeItem)
-                : undefined
-            }
-            rowHeight={itemHeight}
-            rowRenderer={(a: any) => (
-              <div key={a.index} style={a.style}>
-                {props.renderItem(props.filteredItems[a.index] as T, a.index)}
-              </div>
-            )}
-            width={menuWidth}
-            height={Math.min(props.filteredItems.length * itemHeight, itemHeight * VISIBLE_ITEMS)}
-          />
+          <div style={{overscrollBehavior: 'contain'}}>
+            <List
+              style={{outline: 'none', marginRight: -5, paddingRight: 5}}
+              rowCount={props.filteredItems.length}
+              scrollToIndex={
+                props.activeItem && !isCreateNewItem(props.activeItem)
+                  ? props.filteredItems.indexOf(props.activeItem)
+                  : undefined
+              }
+              rowHeight={itemHeight}
+              rowRenderer={(a: any) => (
+                <div key={a.index} style={a.style}>
+                  {props.renderItem(props.filteredItems[a.index] as T, a.index)}
+                </div>
+              )}
+              width={menuWidth}
+              height={Math.min(props.filteredItems.length * itemHeight, itemHeight * VISIBLE_ITEMS)}
+            />
+          </div>
         );
       }}
       popoverProps={allPopoverProps}

js_modules/dagster-ui/packages/ui-components/src/components/TagSelector.tsx

@@ -43,6 +43,8 @@ type Props = {
   dropdownStyles?: React.CSSProperties;
   rowWidth?: number;
   rowHeight?: number;
+  closeOnSelect?: boolean;
+  usePortal?: boolean;
 };
 
 const defaultRenderTag = (tag: string, tagProps: TagSelectorTagProps) => {
@@ -58,7 +60,7 @@ const defaultRenderTag = (tag: string, tagProps: TagSelectorTagProps) => {
           maxWidth: '120px',
         }}
         data-tooltip={tag}
-        data-tooltip-style={DefaultTagTooltipStyle}
+        data-tooltip-style={TagSelectorDefaultTagTooltipStyle}
       >
         <MiddleTruncate text={tag} />
         <Box style={{cursor: 'pointer'}} onClick={tagProps.remove}>
@@ -101,6 +103,8 @@ export const TagSelector = ({
   dropdownStyles,
   renderTagList,
   rowHeight = MENU_ITEM_HEIGHT,
+  closeOnSelect,
+  usePortal,
 }: Props) => {
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
   const {viewport, containerProps} = useViewport();
@@ -135,6 +139,9 @@ export const TagSelector = ({
                 setSelectedTags(
                   selected ? selectedTags.filter((t) => t !== tag) : [...selectedTags, tag],
                 );
+                if (closeOnSelect) {
+                  setIsDropdownOpen(false);
+                }
               };
               if (renderDropdownItem) {
                 return <div>{renderDropdownItem(tag, {toggle, selected})}</div>;
@@ -156,6 +163,7 @@ export const TagSelector = ({
     return <Menu style={{width: viewport.width + 'px'}}>{dropdownContent}</Menu>;
   }, [
     allTags,
+    closeOnSelect,
     dropdownStyles,
     items,
     renderDropdown,
@@ -199,27 +207,28 @@ export const TagSelector = ({
           }
         }
       }}
-      content={<div ref={dropdownContainer}>{dropdown}</div>}
+      content={<div>{dropdown}</div>}
       targetTagName="div"
       onOpening={rowVirtualizer.measure}
       onOpened={rowVirtualizer.measure}
+      usePortal={usePortal}
     >
-      <Container
+      <TagSelectorContainer
         onClick={() => {
           setIsDropdownOpen((isOpen) => !isOpen);
         }}
         {...containerProps}
       >
-        <TagsContainer flex={{grow: 1, gap: 6}}>{tagsContent}</TagsContainer>
+        <TagSelectorTagsContainer flex={{grow: 1, gap: 6}}>{tagsContent}</TagSelectorTagsContainer>
         <div style={{cursor: 'pointer'}}>
           <Icon name={isDropdownOpen ? 'expand_less' : 'expand_more'} />
         </div>
-      </Container>
+      </TagSelectorContainer>
     </Popover>
   );
 };
 
-const Container = styled.div`
+export const TagSelectorContainer = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -231,7 +240,7 @@ const Placeholder = styled.div`
   color: ${Colors.textDisabled()};
 `;
 
-const TagsContainer = styled(Box)`
+export const TagSelectorTagsContainer = styled(Box)`
   overflow-x: auto;
 
   &::-webkit-scrollbar {
@@ -297,7 +306,7 @@ export const TagSelectorWithSearch = (
   );
 };
 
-const DefaultTagTooltipStyle = JSON.stringify({
+export const TagSelectorDefaultTagTooltipStyle = JSON.stringify({
   background: Colors.backgroundDefault(),
   border: `1px solid ${Colors.borderDefault()}`,
   color: Colors.textDefault(),

js_modules/dagster-ui/packages/ui-core/src/app/Flags.tsx

@@ -11,6 +11,7 @@ export const FeatureFlag = {
   flagDisableWebsockets: 'flagDisableWebsockets' as const,
   flagSidebarResources: 'flagSidebarResources' as const,
   flagDisableAutoLoadDefaults: 'flagDisableAutoLoadDefaults' as const,
+  flagUseNewAutomationPage: 'flagUseNewAutomationPage' as const,
 };
 export type FeatureFlagType = keyof typeof FeatureFlag;
 

js_modules/dagster-ui/packages/ui-core/src/app/getVisibleFeatureFlagRows.tsx

@@ -20,4 +20,8 @@ export const getVisibleFeatureFlagRows = () => [
     key: 'Debug console logging',
     flagType: FeatureFlag.flagDebugConsoleLogging,
   },
+  {
+    key: 'Use new asset auto-materialize history page',
+    flagType: FeatureFlag.flagUseNewAutomationPage,
+  },
 ];

js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventMetadataEntriesTable.tsx

@@ -19,7 +19,11 @@ export const AssetEventMetadataEntriesTable = ({
   event,
   observations,
 }: {
-  event: AssetObservationFragment | AssetMaterializationFragment | null;
+  event:
+    | (Pick<AssetObservationFragment | AssetMaterializationFragment, 'metadataEntries'> & {
+        timestamp?: string | number;
+      })
+    | null;
   observations?: (AssetObservationFragment | AssetMaterializationFragment)[];
 }) => {
   if (!event || (!event.metadataEntries.length && !observations?.length)) {

js_modules/dagster-ui/packages/ui-core/src/assets/AssetSidebarActivitySummary.tsx

@@ -82,8 +82,8 @@ export const AssetSidebarActivitySummary = ({
             padding={{horizontal: 24, vertical: 12}}
             flex={{direction: 'row', gap: 4, alignItems: 'center'}}
           >
-            <Link to={assetDetailsPathForKey(asset.assetKey, {view: 'auto-materialize-history'})}>
-              View auto-materialize history
+            <Link to={assetDetailsPathForKey(asset.assetKey, {view: 'automation'})}>
+              View automation history
             </Link>
             <Icon name="open_in_new" color={Colors.linkDefault()} />
           </Box>

js_modules/dagster-ui/packages/ui-core/src/assets/AssetTabs.tsx

@@ -34,7 +34,7 @@ export const DEFAULT_ASSET_TAB_ORDER = [
   'plots',
   'definition',
   'lineage',
-  'auto-materialize-history',
+  'automation',
 ];
 
 export type AssetTabConfigInput = {
@@ -89,10 +89,10 @@ export const buildAssetTabMap = (input: AssetTabConfigInput): Record<string, Ass
       to: buildAssetViewParams({...params, view: 'lineage'}),
       disabled: !definition,
     },
-    'auto-materialize-history': {
-      id: 'auto-materialize-history',
-      title: 'Auto-materialize history',
-      to: buildAssetViewParams({...params, view: 'auto-materialize-history'}),
+    automation: {
+      id: 'automation',
+      title: 'Automation',
+      to: buildAssetViewParams({...params, view: 'automation'}),
       disabled: !definition,
       hidden: !definition?.autoMaterializePolicy,
     },

js_modules/dagster-ui/packages/ui-core/src/assets/AssetView.tsx

@@ -13,6 +13,7 @@ import {AssetPartitions} from './AssetPartitions';
 import {AssetPlots} from './AssetPlots';
 import {AssetTabs} from './AssetTabs';
 import {AssetAutomaterializePolicyPage} from './AutoMaterializePolicyPage/AssetAutomaterializePolicyPage';
+import {AssetAutomaterializePolicyPageOld} from './AutoMaterializePolicyPageOld/AssetAutomaterializePolicyPage';
 import {AutomaterializeDaemonStatusTag} from './AutomaterializeDaemonStatusTag';
 import {useAutomationPolicySensorFlag} from './AutomationPolicySensorFlag';
 import {LaunchAssetExecutionButton} from './LaunchAssetExecutionButton';
@@ -28,6 +29,7 @@ import {
 } from './types/AssetView.types';
 import {healthRefreshHintFromLiveData} from './usePartitionHealthData';
 import {useReportEventsModal} from './useReportEventsModal';
+import {useFeatureFlags} from '../app/Flags';
 import {Timestamp} from '../app/time/Timestamp';
 import {AssetLiveDataRefresh, useAssetLiveData} from '../asset-data/AssetLiveDataProvider';
 import {
@@ -178,12 +180,17 @@ export const AssetView = ({assetKey, trace}: Props) => {
     );
   };
 
+  const {flagUseNewAutomationPage} = useFeatureFlags();
+
   const renderAutomaterializeHistoryTab = () => {
     if (definitionQueryResult.loading && !definitionQueryResult.previousData) {
       return <AssetLoadingDefinitionState />;
     }
+    if (flagUseNewAutomationPage) {
+      return <AssetAutomaterializePolicyPage assetKey={assetKey} definition={definition} />;
+    }
     return (
-      <AssetAutomaterializePolicyPage
+      <AssetAutomaterializePolicyPageOld
         assetKey={assetKey}
         assetHasDefinedPartitions={!!definition?.partitionDefinition}
       />
@@ -214,7 +221,7 @@ export const AssetView = ({assetKey, trace}: Props) => {
         return renderEventsTab();
       case 'plots':
         return renderPlotsTab();
-      case 'auto-materialize-history':
+      case 'automation':
         return renderAutomaterializeHistoryTab();
       case 'checks':
         return renderChecksTab();

js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AssetAutomaterializePolicyPage.tsx

@@ -1,42 +1,39 @@
-import {Box, Colors, Subheading} from '@dagster-io/ui-components';
+import {Box, Colors, Spinner} from '@dagster-io/ui-components';
+import * as React from 'react';
 import {useMemo} from 'react';
 import styled from 'styled-components';
 
 import {AutoMaterializeExperimentalBanner} from './AutoMaterializeExperimentalBanner';
 import {AutomaterializeLeftPanel} from './AutomaterializeLeftPanel';
 import {AutomaterializeMiddlePanel} from './AutomaterializeMiddlePanel';
-import {AutomaterializeRightPanel} from './AutomaterializeRightPanel';
 import {useEvaluationsQueryResult} from './useEvaluationsQueryResult';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../../app/QueryRefresh';
 import {useQueryPersistedState} from '../../hooks/useQueryPersistedState';
 import {AssetKey} from '../types';
+import {AssetViewDefinitionNodeFragment} from '../types/AssetView.types';
 
 export const AssetAutomaterializePolicyPage = ({
   assetKey,
-  assetHasDefinedPartitions,
+  definition,
 }: {
   assetKey: AssetKey;
-  assetHasDefinedPartitions: boolean;
+  definition?: AssetViewDefinitionNodeFragment | null;
 }) => {
   const {queryResult, paginationProps} = useEvaluationsQueryResult({assetKey});
 
   useQueryRefreshAtInterval(queryResult, FIFTEEN_SECONDS);
 
-  const {evaluations} = useMemo(() => {
+  const evaluations = useMemo(() => {
     if (
-      queryResult.data?.autoMaterializeAssetEvaluationsOrError?.__typename ===
-        'AutoMaterializeAssetEvaluationRecords' &&
+      queryResult.data?.assetConditionEvaluationRecordsOrError?.__typename ===
+        'AssetConditionEvaluationRecords' &&
       queryResult.data?.assetNodeOrError?.__typename === 'AssetNode'
     ) {
-      return {
-        evaluations: queryResult.data?.autoMaterializeAssetEvaluationsOrError.records,
-        currentAutoMaterializeEvaluationId:
-          queryResult.data.assetNodeOrError.currentAutoMaterializeEvaluationId,
-      };
+      return queryResult.data?.assetConditionEvaluationRecordsOrError.records;
     }
-    return {evaluations: [], currentAutoMaterializeEvaluationId: null};
+    return [];
   }, [
-    queryResult.data?.autoMaterializeAssetEvaluationsOrError,
+    queryResult.data?.assetConditionEvaluationRecordsOrError,
     queryResult.data?.assetNodeOrError,
   ]);
 
@@ -63,49 +60,48 @@ export const AssetAutomaterializePolicyPage = ({
     return evaluations.find((evaluation) => evaluation.evaluationId === selectedEvaluationId);
   }, [selectedEvaluationId, isFirstPage, evaluations]);
 
+  if (!queryResult.data && queryResult.loading) {
+    return (
+      <Box
+        style={{height: 390}}
+        flex={{direction: 'row', justifyContent: 'center', alignItems: 'center'}}
+      >
+        <Spinner purpose="page" />
+      </Box>
+    );
+  }
+
   return (
     <AutomaterializePage
       style={{flex: 1, minHeight: 0, color: Colors.textLight(), overflow: 'hidden'}}
       flex={{direction: 'column'}}
     >
-      <Box padding={{horizontal: 24, vertical: 12}} border="bottom">
-        <AutoMaterializeExperimentalBanner />
-      </Box>
+      <AutoMaterializeExperimentalBanner />
       <Box flex={{direction: 'row'}} style={{minHeight: 0, flex: 1}}>
-        <Box flex={{direction: 'column', grow: 1}}>
-          <Box
-            flex={{alignItems: 'center'}}
-            padding={{vertical: 16, horizontal: 24}}
-            border="bottom"
-          >
-            <Subheading>Evaluation history</Subheading>
+        <Box flex={{direction: 'row'}} style={{flex: 1, minHeight: 0}}>
+          <Box border="right" flex={{grow: 0, direction: 'column'}} style={{flex: '0 0 296px'}}>
+            <AutomaterializeLeftPanel
+              definition={definition}
+              evaluations={evaluations}
+              paginationProps={paginationProps}
+              onSelectEvaluation={(evaluation) => {
+                setSelectedEvaluationId(evaluation.evaluationId);
+              }}
+              selectedEvaluation={selectedEvaluation}
+            />
           </Box>
-          <Box flex={{direction: 'row'}} style={{flex: 1, minHeight: 0}}>
-            <Box border="right" flex={{grow: 0, direction: 'column'}} style={{flex: '0 0 296px'}}>
-              <AutomaterializeLeftPanel
-                assetHasDefinedPartitions={assetHasDefinedPartitions}
-                evaluations={evaluations}
-                paginationProps={paginationProps}
-                onSelectEvaluation={(evaluation) => {
-                  setSelectedEvaluationId(evaluation.evaluationId);
-                }}
-                selectedEvaluation={selectedEvaluation}
-              />
-            </Box>
-            <Box flex={{grow: 1}} style={{minHeight: 0, overflowY: 'auto'}}>
-              <AutomaterializeMiddlePanel
-                assetKey={assetKey}
-                assetHasDefinedPartitions={assetHasDefinedPartitions}
-                // Use the evaluation ID of the current evaluation object, if any. Otherwise
-                // fall back to the evaluation ID from the query parameter, if any.
-                selectedEvaluationId={selectedEvaluation?.evaluationId || selectedEvaluationId}
-              />
-            </Box>
+          <Box flex={{grow: 1}} style={{minHeight: 0, overflowY: 'auto'}}>
+            <AutomaterializeMiddlePanel
+              key={selectedEvaluation?.evaluationId || selectedEvaluationId}
+              assetKey={assetKey}
+              // Use the evaluation ID of the current evaluation object, if any. Otherwise
+              // fall back to the evaluation ID from the query parameter, if any.
+              selectedEvaluationId={selectedEvaluation?.evaluationId || selectedEvaluationId}
+              selectedEvaluation={selectedEvaluation}
+              definition={definition}
+            />
           </Box>
         </Box>
-        <Box border="left">
-          <AutomaterializeRightPanel assetKey={assetKey} />
-        </Box>
       </Box>
     </AutomaterializePage>
   );