From a1e8f854ee32dc96f111041216aba309afcaa9ea Mon Sep 17 00:00:00 2001 From: Isaac Hellendag <2823852+hellendag@users.noreply.github.com> Date: Thu, 19 Dec 2024 10:56:40 -0600 Subject: [PATCH] [ui] Limit the amount of asset info required for evaluation list (#26571) ## Summary & Motivation We don't need so much fragment data for the evaluation list, so let's require less so that consumers don't need to overquery. ## How I Tested These Changes TS, lint, storybook. --- .../EvaluationList.tsx | 10 ++++---- .../EvaluationListRow.tsx | 24 ++++++++++++------- .../EvaluationStatusTag.tsx | 17 ++++++++----- .../__stories__/EvaluationList.stories.tsx | 6 ++++- 4 files changed, 37 insertions(+), 20 deletions(-) diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationList.tsx index 18eeaf18b0f7e..25daf6c8e841f 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationList.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationList.tsx @@ -1,15 +1,16 @@ import {Table} from '@dagster-io/ui-components'; +import {AssetKey} from '../types'; import {EvaluationListRow} from './EvaluationListRow'; import {AssetConditionEvaluationRecordFragment} from './types/GetEvaluationsQuery.types'; -import {AssetViewDefinitionNodeFragment} from '../types/AssetView.types'; interface Props { - definition: AssetViewDefinitionNodeFragment; + assetKey: AssetKey; + isPartitioned: boolean; evaluations: AssetConditionEvaluationRecordFragment[]; } -export const EvaluationList = ({definition, evaluations}: Props) => { +export const EvaluationList = ({assetKey, isPartitioned, evaluations}: Props) => { return ( @@ -25,7 +26,8 @@ export const EvaluationList = ({definition, evaluations}: Props) => { ); })} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationListRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationListRow.tsx index 4a52253515d1f..34ba66772ec19 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationListRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationListRow.tsx @@ -10,20 +10,21 @@ import { } from '@dagster-io/ui-components'; import {useState} from 'react'; +import {AssetKey} from '../types'; import {EvaluationDetailDialog} from './EvaluationDetailDialog'; import {EvaluationStatusTag} from './EvaluationStatusTag'; import {AssetConditionEvaluationRecordFragment} from './types/GetEvaluationsQuery.types'; import {DEFAULT_TIME_FORMAT} from '../../app/time/TimestampFormat'; import {RunsFeedTableWithFilters} from '../../runs/RunsFeedTable'; import {TimestampDisplay} from '../../schedules/TimestampDisplay'; -import {AssetViewDefinitionNodeFragment} from '../types/AssetView.types'; interface Props { - definition: AssetViewDefinitionNodeFragment; + assetKey: AssetKey; + isPartitioned: boolean; evaluation: AssetConditionEvaluationRecordFragment; } -export const EvaluationListRow = ({evaluation, definition}: Props) => { +export const EvaluationListRow = ({evaluation, assetKey, isPartitioned}: Props) => { const [isOpen, setIsOpen] = useState(false); return ( @@ -39,27 +40,32 @@ export const EvaluationListRow = ({evaluation, definition}: Props) => { ); }; -const EvaluationRunInfo = ({evaluation}: {evaluation: AssetConditionEvaluationRecordFragment}) => { - const {runIds} = evaluation; +interface EvaluationRunInfoProps { + runIds: string[]; + timestamp: number; +} + +const EvaluationRunInfo = ({runIds, timestamp}: EvaluationRunInfoProps) => { const [isOpen, setIsOpen] = useState(false); if (runIds.length === 0) { @@ -95,7 +101,7 @@ const EvaluationRunInfo = ({evaluation}: {evaluation: AssetConditionEvaluationRe <> Runs at{' '} diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationStatusTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationStatusTag.tsx index 4e89fbb089f9e..2e2b21a794ff0 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationStatusTag.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/EvaluationStatusTag.tsx @@ -1,17 +1,23 @@ import {Box, Colors, Icon, Popover, Tag} from '@dagster-io/ui-components'; import {useMemo} from 'react'; +import {AssetKey} from '../types'; import {PartitionSubsetList} from './PartitionSubsetList'; import {AssetConditionEvaluationRecordFragment} from './types/GetEvaluationsQuery.types'; -import {AssetViewDefinitionNodeFragment} from '../types/AssetView.types'; interface Props { - definition: AssetViewDefinitionNodeFragment; + assetKey: AssetKey; + isPartitioned: boolean; selectedEvaluation: AssetConditionEvaluationRecordFragment; selectPartition: (partitionKey: string | null) => void; } -export const EvaluationStatusTag = ({definition, selectedEvaluation, selectPartition}: Props) => { +export const EvaluationStatusTag = ({ + assetKey, + isPartitioned, + selectedEvaluation, + selectPartition, +}: Props) => { const evaluation = selectedEvaluation?.evaluation; const rootEvaluationNode = useMemo( () => evaluation?.evaluationNodes.find((node) => node.uniqueId === evaluation.rootUniqueId), @@ -19,8 +25,7 @@ export const EvaluationStatusTag = ({definition, selectedEvaluation, selectParti ); const rootUniqueId = evaluation?.rootUniqueId; - const partitionDefinition = definition?.partitionDefinition; - const assetKeyPath = definition?.assetKey.path || []; + const assetKeyPath = assetKey.path || []; const numRequested = selectedEvaluation?.numRequested; const numTrue = @@ -29,7 +34,7 @@ export const EvaluationStatusTag = ({definition, selectedEvaluation, selectParti : null; if (numRequested) { - if (partitionDefinition && rootUniqueId && numTrue) { + if (isPartitioned && rootUniqueId && numTrue) { return ( { return ( - + ); };
{}} /> - +