[ui] Update asset Automations tab

dagster-io · Dec 31, 2024 · a486dcf · a486dcf
1 parent 9637eae
commit a486dcf
Show file tree

Hide file tree

Showing 13 changed files with 575 additions and 41 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx
@@ -4,6 +4,7 @@ import {Button} from './Button';
 import {Icon} from './Icon';
 
 export interface CursorPaginationProps {
+  cursor?: string;
   hasPrevCursor: boolean;
   hasNextCursor: boolean;
   popCursor: () => void;

diff --git a/js_modules/dagster-ui/packages/ui-core/client.json b/js_modules/dagster-ui/packages/ui-core/client.json
diff --git a/.../dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AssetAutomationRoot.tsx b/.../dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AssetAutomationRoot.tsx
@@ -1,5 +1,10 @@
-import {Box, NonIdealState, SpinnerWithText} from '@dagster-io/ui-components';
-import {useMemo} from 'react';
+import {
+  Box,
+  CursorHistoryControls,
+  NonIdealState,
+  SpinnerWithText,
+} from '@dagster-io/ui-components';
+import {useEffect, useMemo, useRef} from 'react';
 
 import {useEvaluationsQueryResult} from './useEvaluationsQueryResult';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../../app/QueryRefresh';
@@ -13,9 +18,18 @@ interface Props {
 }
 
 export const AssetAutomationRoot = ({assetKey, definition}: Props) => {
-  const {queryResult} = useEvaluationsQueryResult({assetKey});
+  const {queryResult, paginationProps} = useEvaluationsQueryResult({assetKey});
   const {data, loading} = queryResult;
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // When paginating, reset scroll to top.
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTo({top: 0, behavior: 'instant'});
+    }
+  }, [paginationProps.cursor]);
+
   useQueryRefreshAtInterval(queryResult, FIFTEEN_SECONDS);
 
   const evaluations = useMemo(() => {
@@ -29,13 +43,14 @@ export const AssetAutomationRoot = ({assetKey, definition}: Props) => {
     return [];
   }, [data]);
 
-  if (loading) {
+  if (loading && !data) {
     return (
       <Box padding={64} flex={{direction: 'column', alignItems: 'center'}}>
         <SpinnerWithText label="Loading evaluations…" />
       </Box>
     );
   }
+
   if (!definition) {
     return (
       <Box padding={64}>
@@ -48,5 +63,21 @@ export const AssetAutomationRoot = ({assetKey, definition}: Props) => {
     );
   }
 
-  return <EvaluationList definition={definition} evaluations={evaluations} />;
+  return (
+    <>
+      <Box
+        padding={{vertical: 12, horizontal: 20}}
+        flex={{direction: 'row', justifyContent: 'flex-end'}}
+      >
+        <CursorHistoryControls {...paginationProps} style={{marginTop: 0}} />
+      </Box>
+      <div style={{overflowY: 'auto'}} ref={scrollRef}>
+        <EvaluationList
+          evaluations={evaluations}
+          assetKey={assetKey}
+          isPartitioned={definition.partitionDefinition !== null}
+        />
+      </div>
+    </>
+  );
 };
diff --git a/...gster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationDetailDialog.tsx b/...gster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationDetailDialog.tsx
@@ -10,10 +10,13 @@ import {
 } from '@dagster-io/ui-components';
 import {ReactNode, useState} from 'react';
 
-import {GET_EVALUATIONS_QUERY} from './GetEvaluationsQuery';
+import {GET_SLIM_EVALUATIONS_QUERY} from './GetEvaluationsQuery';
 import {PartitionTagSelector} from './PartitionTagSelector';
 import {QueryfulEvaluationDetailTable} from './QueryfulEvaluationDetailTable';
-import {GetEvaluationsQuery, GetEvaluationsQueryVariables} from './types/GetEvaluationsQuery.types';
+import {
+  GetSlimEvaluationsQuery,
+  GetSlimEvaluationsQueryVariables,
+} from './types/GetEvaluationsQuery.types';
 import {usePartitionsForAssetKey} from './usePartitionsForAssetKey';
 import {useQuery} from '../../apollo-client';
 import {DEFAULT_TIME_FORMAT} from '../../app/time/TimestampFormat';
@@ -23,15 +26,23 @@ interface Props {
   isOpen: boolean;
   onClose: () => void;
   assetKeyPath: string[];
+  assetCheckName?: string;
   evaluationID: string;
 }
 
-export const EvaluationDetailDialog = ({isOpen, onClose, evaluationID, assetKeyPath}: Props) => {
+export const EvaluationDetailDialog = ({
+  isOpen,
+  onClose,
+  evaluationID,
+  assetKeyPath,
+  assetCheckName,
+}: Props) => {
   return (
     <Dialog isOpen={isOpen} onClose={onClose} style={EvaluationDetailDialogStyle}>
       <EvaluationDetailDialogContents
         evaluationID={evaluationID}
         assetKeyPath={assetKeyPath}
+        assetCheckName={assetCheckName}
         onClose={onClose}
       />
     </Dialog>
@@ -41,17 +52,26 @@ export const EvaluationDetailDialog = ({isOpen, onClose, evaluationID, assetKeyP
 interface ContentProps {
   evaluationID: string;
   assetKeyPath: string[];
+  assetCheckName?: string;
   onClose: () => void;
 }
 
-const EvaluationDetailDialogContents = ({evaluationID, assetKeyPath, onClose}: ContentProps) => {
+const EvaluationDetailDialogContents = ({
+  evaluationID,
+  assetKeyPath,
+  assetCheckName,
+  onClose,
+}: ContentProps) => {
   const [selectedPartition, setSelectedPartition] = useState<string | null>(null);
 
-  const {data, loading} = useQuery<GetEvaluationsQuery, GetEvaluationsQueryVariables>(
-    GET_EVALUATIONS_QUERY,
+  const {data, loading} = useQuery<GetSlimEvaluationsQuery, GetSlimEvaluationsQueryVariables>(
+    GET_SLIM_EVALUATIONS_QUERY,
     {
       variables: {
-        assetKey: {path: assetKeyPath},
+        assetKey: assetCheckName ? null : {path: assetKeyPath},
+        assetCheckKey: assetCheckName
+          ? {assetKey: {path: assetKeyPath}, name: assetCheckName}
+          : null,
         cursor: `${BigInt(evaluationID) + 1n}`,
         limit: 2,
       },
@@ -95,7 +115,7 @@ const EvaluationDetailDialogContents = ({evaluationID, assetKeyPath, onClose}: C
     );
   }
 
-  const evaluation = record?.records[0];
+  const evaluation = record?.records.find((r) => r.evaluationId === evaluationID);
 
   if (!evaluation) {
     return (
@@ -135,7 +155,7 @@ const EvaluationDetailDialogContents = ({evaluationID, assetKeyPath, onClose}: C
               </div>
             }
           />
-          {allPartitions.length > 0 ? (
+          {allPartitions.length > 0 && evaluation.isLegacy ? (
             <Box padding={{vertical: 12, right: 20}} flex={{justifyContent: 'flex-end'}}>
               <PartitionTagSelector
                 allPartitions={allPartitions}

diff --git a/...dules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationList.tsx b/...dules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationList.tsx
@@ -1,4 +1,4 @@
-import {Table} from '@dagster-io/ui-components';
+import {Colors, Table} from '@dagster-io/ui-components';
 
 import {AssetKey} from '../types';
 import {EvaluationListRow} from './EvaluationListRow';
@@ -7,13 +7,22 @@ import {AssetConditionEvaluationRecordFragment} from './types/GetEvaluationsQuer
 interface Props {
   assetKey: AssetKey;
   isPartitioned: boolean;
+  assetCheckName?: string;
   evaluations: AssetConditionEvaluationRecordFragment[];
 }
 
-export const EvaluationList = ({assetKey, isPartitioned, evaluations}: Props) => {
+export const EvaluationList = ({assetKey, isPartitioned, assetCheckName, evaluations}: Props) => {
   return (
     <Table>
-      <thead>
+      <thead
+        style={{
+          position: 'sticky',
+          top: 0,
+          backgroundColor: Colors.backgroundDefault(),
+          zIndex: 1,
+          boxShadow: `inset 0 -1px 0 ${Colors.keylineDefault()}`,
+        }}
+      >
         <tr>
           <th>Timestamp</th>
           <th style={{width: '240px'}}>Evaluation result</th>
@@ -22,12 +31,12 @@ export const EvaluationList = ({assetKey, isPartitioned, evaluations}: Props) =>
       </thead>
       <tbody>
         {evaluations.map((evaluation) => {
-          console.log(evaluation);
           return (
             <EvaluationListRow
               key={evaluation.id}
               evaluation={evaluation}
               assetKey={assetKey}
+              assetCheckName={assetCheckName}
               isPartitioned={isPartitioned}
             />
           );

diff --git a/...es/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationListRow.tsx b/...es/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationListRow.tsx
@@ -21,11 +21,12 @@ import {TimestampDisplay} from '../../schedules/TimestampDisplay';
 
 interface Props {
   assetKey: AssetKey;
+  assetCheckName?: string;
   isPartitioned: boolean;
   evaluation: AssetConditionEvaluationRecordFragment;
 }
 
-export const EvaluationListRow = ({evaluation, assetKey, isPartitioned}: Props) => {
+export const EvaluationListRow = ({evaluation, assetKey, assetCheckName, isPartitioned}: Props) => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -54,8 +55,9 @@ export const EvaluationListRow = ({evaluation, assetKey, isPartitioned}: Props)
       <EvaluationDetailDialog
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
-        evaluationID={evaluation.id}
+        evaluationID={evaluation.evaluationId}
         assetKeyPath={assetKey.path}
+        assetCheckName={assetCheckName}
       />
     </>
   );
@@ -76,12 +78,20 @@ const EvaluationRunInfo = ({runIds, timestamp}: EvaluationRunInfoProps) => {
 
   if (runIds.length === 1) {
     const truncated = firstRun.slice(0, 8);
-    return (
-      <Box flex={{direction: 'row', gap: 4}}>
-        <Link to={`/runs/${firstRun}`}>
-          <Mono>{truncated}</Mono>
+
+    // This looks like a backfill ID. Link there.
+    if (truncated === firstRun) {
+      return (
+        <Link to={`/runs/b/${firstRun}`}>
+          <Mono>{firstRun}</Mono>
         </Link>
-      </Box>
+      );
+    }
+
+    return (
+      <Link to={`/runs/${firstRun}`}>
+        <Mono>{truncated}</Mono>
+      </Link>
     );
   }
 

diff --git a/.../dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/GetEvaluationsQuery.tsx b/.../dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/GetEvaluationsQuery.tsx
@@ -55,7 +55,7 @@ const NEW_EVALUATION_NODE_FRAGMENT = gql`
   }
 `;
 
-const AssetConditionEvaluationRecordFragment = gql`
+export const ASSET_CONDITION_EVALUATION_RECORD_FRAGMENT = gql`
   fragment AssetConditionEvaluationRecordFragment on AssetConditionEvaluationRecord {
     id
     evaluationId
@@ -88,7 +88,12 @@ const AssetConditionEvaluationRecordFragment = gql`
 `;
 
 export const GET_EVALUATIONS_QUERY = gql`
-  query GetEvaluationsQuery($assetKey: AssetKeyInput!, $limit: Int!, $cursor: String) {
+  query GetEvaluationsQuery(
+    $assetKey: AssetKeyInput!
+    $assetCheckKey: AssetCheckHandleInput
+    $limit: Int!
+    $cursor: String
+  ) {
     assetNodeOrError(assetKey: $assetKey) {
       __typename
       ... on AssetNode {
@@ -103,7 +108,40 @@ export const GET_EVALUATIONS_QUERY = gql`
       }
     }
 
-    assetConditionEvaluationRecordsOrError(assetKey: $assetKey, limit: $limit, cursor: $cursor) {
+    assetConditionEvaluationRecordsOrError(
+      assetKey: $assetKey
+      assetCheckKey: $assetCheckKey
+      limit: $limit
+      cursor: $cursor
+    ) {
+      ... on AssetConditionEvaluationRecords {
+        records {
+          id
+          ...AssetConditionEvaluationRecordFragment
+        }
+      }
+      ... on AutoMaterializeAssetEvaluationNeedsMigrationError {
+        message
+      }
+    }
+  }
+
+  ${ASSET_CONDITION_EVALUATION_RECORD_FRAGMENT}
+`;
+
+export const GET_SLIM_EVALUATIONS_QUERY = gql`
+  query GetSlimEvaluationsQuery(
+    $assetKey: AssetKeyInput
+    $assetCheckKey: AssetCheckHandleInput
+    $limit: Int!
+    $cursor: String
+  ) {
+    assetConditionEvaluationRecordsOrError(
+      assetKey: $assetKey
+      assetCheckKey: $assetCheckKey
+      limit: $limit
+      cursor: $cursor
+    ) {
       ... on AssetConditionEvaluationRecords {
         records {
           id
@@ -115,7 +153,8 @@ export const GET_EVALUATIONS_QUERY = gql`
       }
     }
   }
-  ${AssetConditionEvaluationRecordFragment}
+
+  ${ASSET_CONDITION_EVALUATION_RECORD_FRAGMENT}
 `;
 
 export const GET_EVALUATIONS_SPECIFIC_PARTITION_QUERY = gql`

diff --git a/...i/packages/ui-core/src/assets/AutoMaterializePolicyPage/QueryfulEvaluationDetailTable.tsx b/...i/packages/ui-core/src/assets/AutoMaterializePolicyPage/QueryfulEvaluationDetailTable.tsx
@@ -29,7 +29,7 @@ export const QueryfulEvaluationDetailTable = ({
       evaluationId: evaluation.evaluationId,
       partition: selectedPartition!,
     },
-    skip: !selectedPartition,
+    skip: !selectedPartition || !evaluation.isLegacy,
   });
 
   const {data: specificPartitionData} = partitionQuery;