diff --git a/js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationScheduleRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationScheduleRow.tsx index f979dc3ae59ab..e4a8568d1f974 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationScheduleRow.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/automation/VirtualizedAutomationScheduleRow.tsx @@ -8,6 +8,7 @@ import { } from '@dagster-io/ui-components'; import {forwardRef, useMemo} from 'react'; import {Link} from 'react-router-dom'; +import styled from 'styled-components'; import {AutomationTargetList} from './AutomationTargetList'; import {AutomationRowGrid} from './VirtualizedAutomationRow'; @@ -24,6 +25,7 @@ import { ScheduleAssetSelectionQuery, ScheduleAssetSelectionQueryVariables, } from '../schedules/types/ScheduleAssetSelectionsQuery.types'; +import {EvaluateTickButtonSchedule} from '../ticks/EvaluateTickButtonSchedule'; import {TickStatusTag} from '../ticks/TickStatusTag'; import {RowCell} from '../ui/VirtualizedTable'; import {SINGLE_SCHEDULE_QUERY} from '../workspace/VirtualizedScheduleRow'; @@ -138,22 +140,37 @@ export const VirtualizedAutomationScheduleRow = forwardRef( - - {scheduleData ? ( - - {/* Keyed so that a new switch is always rendered, otherwise it's reused and animates on/off */} - - {errorDisplay( - scheduleData.scheduleState.status, - scheduleData.scheduleState.runningCount, - )} - - ) : ( -
- )} - - - + + + {scheduleData ? ( + <> + + {errorDisplay( + scheduleData.scheduleState.status, + scheduleData.scheduleState.runningCount, + )} + + ) : ( +
+ )} + + + + + + + @@ -225,3 +242,9 @@ export const VirtualizedAutomationScheduleRow = forwardRef( ); }, ); + +const EvaluateTickButtonScheduleWrapper = styled.div` + button { + height: 24px; + } +`; 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 8531c46dabfdc..599551ffca9e5 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 @@ -8,6 +8,7 @@ import { } from '@dagster-io/ui-components'; import {forwardRef, useMemo} from 'react'; import {Link} from 'react-router-dom'; +import styled from 'styled-components'; import {AutomationTargetList} from './AutomationTargetList'; import {AutomationRowGrid} from './VirtualizedAutomationRow'; @@ -21,6 +22,7 @@ import { SensorAssetSelectionQuery, SensorAssetSelectionQueryVariables, } from '../sensors/types/SensorRoot.types'; +import {EvaluateTickButtonSensor} from '../ticks/EvaluateTickButtonSensor'; import {TickStatusTag} from '../ticks/TickStatusTag'; import {RowCell} from '../ui/VirtualizedTable'; import {SENSOR_TYPE_META, SINGLE_SENSOR_QUERY} from '../workspace/VirtualizedSensorRow'; @@ -88,6 +90,12 @@ 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; @@ -136,16 +144,38 @@ export const VirtualizedAutomationSensorRow = forwardRef( - - {/* Keyed so that a new switch is always rendered, otherwise it's reused and animates on/off */} + + + {/* Keyed so that a new switch is always rendered, otherwise it's reused and animates on/off */} + {sensorData ? ( + + ) : ( +
+ )} + + + + {sensorData ? ( - + + + ) : (
)} - - - @@ -205,3 +235,9 @@ export const VirtualizedAutomationSensorRow = forwardRef( ); }, ); + +const EvaluateTickButtonSensorWrapper = styled.div` + button { + height: 24px; + } +`; diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleDetails.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleDetails.tsx index 0c93dc35c4701..224bb62400002 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleDetails.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/ScheduleDetails.tsx @@ -1,6 +1,5 @@ import { Box, - Button, Code, Group, Heading, @@ -8,7 +7,6 @@ import { PageHeader, Tag, } from '@dagster-io/ui-components'; -import {useState} from 'react'; import {Link} from 'react-router-dom'; import styled from 'styled-components'; @@ -23,7 +21,7 @@ import {AutomationTargetList} from '../automation/AutomationTargetList'; import {AutomationAssetSelectionFragment} from '../automation/types/AutomationAssetSelectionFragment.types'; import {InstigationStatus} from '../graphql/types'; import {RepositoryLink} from '../nav/RepositoryLink'; -import {EvaluateScheduleDialog} from '../ticks/EvaluateScheduleDialog'; +import {EvaluateTickButtonSchedule} from '../ticks/EvaluateTickButtonSchedule'; import {TickStatusTag} from '../ticks/TickStatusTag'; import {RepoAddress} from '../workspace/types'; @@ -42,8 +40,6 @@ export const ScheduleDetails = (props: { const latestTick = ticks.length > 0 ? ticks[0] : null; const running = status === InstigationStatus.RUNNING; - const [showTestTickDialog, setShowTestTickDialog] = useState(false); - return ( <> - + } /> - { - setShowTestTickDialog(false); - }} - name={schedule.name} - repoAddress={repoAddress} - jobName={pipelineName} - /> {schedule.description ? ( diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorDetails.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorDetails.tsx index e1dfccab4bf9c..2e2d005dac948 100644 --- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorDetails.tsx +++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorDetails.tsx @@ -17,6 +17,7 @@ import {EditCursorDialog} from './EditCursorDialog'; import {SensorMonitoredAssets} from './SensorMonitoredAssets'; import {SensorResetButton} from './SensorResetButton'; import {SensorSwitch} from './SensorSwitch'; +import {EvaluateTickButtonSensor} from '../ticks/EvaluateTickButtonSensor'; import {SensorFragment} from './types/SensorFragment.types'; import {usePermissionsForLocation} from '../app/Permissions'; import {QueryRefreshCountdown, QueryRefreshState} from '../app/QueryRefresh'; @@ -25,7 +26,6 @@ import {AutomationAssetSelectionFragment} from '../automation/types/AutomationAs import {InstigationStatus, SensorType} from '../graphql/types'; import {RepositoryLink} from '../nav/RepositoryLink'; import {TimestampDisplay} from '../schedules/TimestampDisplay'; -import {SensorDryRunDialog} from '../ticks/SensorDryRunDialog'; import {TickStatusTag} from '../ticks/TickStatusTag'; import {RepoAddress} from '../workspace/types'; @@ -92,7 +92,6 @@ export const SensorDetails = ({ sensor.sensorState.typeSpecificData.__typename === 'SensorData' && sensor.sensorState.typeSpecificData.lastCursor; - const [showTestTickDialog, setShowTestTickDialog] = useState(false); const running = status === InstigationStatus.RUNNING; return ( @@ -114,33 +113,16 @@ export const SensorDetails = ({ right={ - - - + } /> - { - setShowTestTickDialog(false); - }} - currentCursor={cursor || ''} - name={sensor.name} - repoAddress={repoAddress} - jobName={sensor.targets?.[0]?.pipelineName || ''} - /> {sensor.description ? ( 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 new file mode 100644 index 0000000000000..03ea49e3fdf2d --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSchedule.tsx @@ -0,0 +1,41 @@ +import {Box, Button} from '@dagster-io/ui-components'; +import {useState} from 'react'; + +import {EvaluateScheduleDialog} from './EvaluateScheduleDialog'; +import {RepoAddress} from '../workspace/types'; + +interface EvaluateTickButtonScheduleProps { + name: string; + repoAddress: RepoAddress; + jobName: string; +} + +export const EvaluateTickButtonSchedule = ({ + name, + repoAddress, + jobName, +}: EvaluateTickButtonScheduleProps) => { + const [showTestTickDialog, setShowTestTickDialog] = useState(false); + + return ( + + + { + setShowTestTickDialog(false); + }} + name={name} + repoAddress={repoAddress} + jobName={jobName} + /> + + ); +}; diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSensor.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSensor.tsx new file mode 100644 index 0000000000000..cec8337183c97 --- /dev/null +++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/EvaluateTickButtonSensor.tsx @@ -0,0 +1,49 @@ +import {Box, Button, Tooltip} from '@dagster-io/ui-components'; +import {useState} from 'react'; + +import {SensorDryRunDialog} from './SensorDryRunDialog'; +import {SensorType} from '../graphql/types'; +import {RepoAddress} from '../workspace/types'; + +interface EvaluateTickButtonSensorProps { + cursor: string; + name: string; + repoAddress: RepoAddress; + jobName: string; + sensorType: SensorType; +} + +export const EvaluateTickButtonSensor = ({ + cursor, + name, + repoAddress, + jobName, + sensorType, +}: EvaluateTickButtonSensorProps) => { + const [showTestTickDialog, setShowTestTickDialog] = useState(false); + + return ( + + + + + setShowTestTickDialog(false)} + currentCursor={cursor} + name={name} + repoAddress={repoAddress} + jobName={jobName} + /> + + ); +};