From b076a3a98480bb52be056b96440cf4cc0c026bb8 Mon Sep 17 00:00:00 2001 From: David Liu <48995019+dliu27@users.noreply.github.com> Date: Mon, 9 Dec 2024 12:46:13 -0500 Subject: [PATCH] [10/n] [RFC] Implement updated designs: Schedules [4/N] (#26179) ## Summary & Motivation Linear: https://linear.app/dagster-labs/issue/FE-708/implement-updated-designs-schedule-[4n] Video: https://github.com/user-attachments/assets/0f8cea65-aef7-44f7-833e-fa111b82b703 ## How I Tested These Changes jest, yarn lint, ts, tested locally for all cases: Multiple run requests, skipped, exception ## Changelog [ui] improved ui for manual sensor/schedule evaluation --- .../VirtualizedAutomationSensorRow.tsx | 6 - .../src/ticks/EvaluateScheduleDialog.tsx | 170 +++++++++++++----- .../src/ticks/EvaluateTickButtonSchedule.tsx | 3 +- .../__tests__/EvaluateScheduleDialog.test.tsx | 8 +- 4 files changed, 129 insertions(+), 58 deletions(-) diff --git a/js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationSensorRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationSensorRow.tsx index 1d37a69a14f41..19a80c0cd2196 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationSensorRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationSensorRow.tsx @@ -88,12 +88,6 @@ export const VirtualizedAutomationSensorRow = forwardRef( return data.sensorOrError; }, [data]); - const cursor = - sensorData && - sensorData.sensorState.typeSpecificData && - sensorData.sensorState.typeSpecificData.__typename === 'SensorData' && - sensorData.sensorState.typeSpecificData.lastCursor; - const onChange = (e: React.FormEvent) => { if (onToggleChecked && e.target instanceof HTMLInputElement) { const {checked} = e.target; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx index ddfd6b42faba7..06add60352b2c 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateScheduleDialog.tsx @@ -10,6 +10,7 @@ import { MenuItem, Mono, NonIdealState, + NonIdealStateWrapper, Popover, Spinner, Subheading, @@ -65,8 +66,8 @@ export const EvaluateScheduleDialog = (props: Props) => { style={{width: '70vw', display: 'flex'}} title={ - - {props.name} + + Preview tick result for {props.name} } > @@ -266,8 +267,8 @@ const EvaluateSchedule = ({repoAddress, name, onClose, jobName}: Props) => { })); selectedTimestampRef.current = selectedTimestamp || timestamps[0] || null; return ( -
- Select a mock evaluation time + + Select an evaluation time to simulate {
- +
+ Each evaluation of a schedule is called a tick, which is an opportunity for one or more + runs to be launched. Ticks kick off runs, which either materialize a selection of assets + or execute a job. + You can preview the result for a given tick in the next step. +
+
+ Learn more about + schedules +
+ ); } }, [ @@ -317,59 +328,88 @@ const EvaluateSchedule = ({repoAddress, name, onClose, jobName}: Props) => { userTimezone, ]); - const buttons = useMemo(() => { + const leftButtons = useMemo(() => { if (launching) { - return ; + return null; } if (scheduleExecutionData || scheduleExecutionError) { return ( - - - - - - - - + ); + } else { + return null; + } + }, [launching, scheduleExecutionData, scheduleExecutionError]); + + const rightButtons = useMemo(() => { + if (launching) { + return ; + } + + if (scheduleExecutionData || scheduleExecutionError) { + const runRequests = scheduleExecutionData?.evaluationResult?.runRequests; + const numRunRequests = runRequests?.length || 0; + const didSkip = !scheduleExecutionError && numRunRequests === 0; + + if (scheduleExecutionError || didSkip) { + return ( + + + + ); + } else { + return ( + + + + + + + ); + } } if (scheduleDryRunMutationLoading) { return ( - + ); } else { return ( <> - + ); @@ -391,7 +431,9 @@ const EvaluateSchedule = ({repoAddress, name, onClose, jobName}: Props) => {
{content}
 - {buttons ? {buttons} : null} + + {rightButtons} + ); }; @@ -449,6 +491,7 @@ const EvaluateScheduleResult = ({ } const data = scheduleExecutionData; + if (!data || !evaluationResult) { return ( - Skip Reason -
{evaluationResult?.skipReason || 'No skip reason was output'}
- + + Requested runs (0) +
+ + + + The schedule function was successfully evaluated but didn't return any + run requests. + + +
+ Skip reason:{' '} + {evaluationResult?.skipReason + ? `"${evaluationResult.skipReason}"` + : 'No skip reason was output'} + + + } + /> + +
+ ); } else { return ( - + + Requested runs ({numRunRequests}) + + ); } }; @@ -577,3 +645,11 @@ const Grid = styled.div` const ScheduleDescriptor = styled.div` padding-bottom: 2px; `; + +const SkipReasonNonIdealStateWrapper = styled.div` + ${NonIdealStateWrapper} { + margin: auto !important; + width: unset !important; + max-width: unset !important; + } +`; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSchedule.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSchedule.tsx index a579e66913f41..4713f65e5aa5d 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSchedule.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSchedule.tsx @@ -1,4 +1,4 @@ -import {Box, Button} from '@dagster-io/ui-components'; +import {Box, Button, Icon} from '@dagster-io/ui-components'; import {useState} from 'react'; import {EvaluateScheduleDialog} from './EvaluateScheduleDialog'; @@ -20,6 +20,7 @@ export const EvaluateTickButtonSchedule = ({ return (