Skip to content

Commit

Permalink
refactor evaluate tick button to its own component
Browse files Browse the repository at this point in the history
  • Loading branch information
dliu27 committed Nov 12, 2024
1 parent bbe1514 commit b711bcc
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 102 deletions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import {
Box,
Button,
Caption,
Checkbox,
MiddleTruncate,
Tooltip,
useDelayedState,
} from '@dagster-io/ui-components';
import {forwardRef, useMemo, useState} from 'react';
import {forwardRef, useMemo} from 'react';
import {Link} from 'react-router-dom';
import styled from 'styled-components';

import {AutomationTargetList} from './AutomationTargetList';
import {AutomationRowGrid} from './VirtualizedAutomationRow';
Expand All @@ -25,7 +25,7 @@ import {
ScheduleAssetSelectionQuery,
ScheduleAssetSelectionQueryVariables,
} from '../schedules/types/ScheduleAssetSelectionsQuery.types';
import {EvaluateScheduleDialog} from '../ticks/EvaluateScheduleDialog';
import {EvaluateTickButtonSchedule} from '../ticks/EvaluateTickButtonSchedule';
import {TickStatusTag} from '../ticks/TickStatusTag';
import {RowCell} from '../ui/VirtualizedTable';
import {SINGLE_SCHEDULE_QUERY} from '../workspace/VirtualizedScheduleRow';
Expand All @@ -49,8 +49,6 @@ export const VirtualizedAutomationScheduleRow = forwardRef(
(props: ScheduleRowProps, ref: React.ForwardedRef<HTMLDivElement>) => {
const {index, name, repoAddress, checked, onToggleChecked} = props;

const [showTestTickDialog, setShowTestTickDialog] = useState(false);

// Wait 100ms before querying in case we're scrolling the table really fast
const shouldQuery = useDelayedState(100);

Expand Down Expand Up @@ -161,14 +159,13 @@ export const VirtualizedAutomationScheduleRow = forwardRef(
</Link>
</Box>
{/* Right aligned content */}
<Button
onClick={() => {
setShowTestTickDialog(true);
}}
style={{height: '24px', marginTop: '-4px'}} // center button text with content in AutomationRowGrid
>
Manual tick
</Button>
<EvaluateTickButtonScheduleWrapper>
<EvaluateTickButtonSchedule
name={scheduleData?.name || ''}
repoAddress={repoAddress}
jobName={scheduleData?.pipelineName || ''}
/>
</EvaluateTickButtonScheduleWrapper>
</Box>
</RowCell>
<RowCell>
Expand Down Expand Up @@ -236,17 +233,13 @@ export const VirtualizedAutomationScheduleRow = forwardRef(
)}
</RowCell>
</AutomationRowGrid>
<EvaluateScheduleDialog
key={showTestTickDialog ? '1' : '0'} // change key to reset dialog state
isOpen={showTestTickDialog}
onClose={() => {
setShowTestTickDialog(false);
}}
name={scheduleData?.name || ''}
repoAddress={repoAddress}
jobName={scheduleData?.pipelineName || ''}
/>
</div>
);
},
);

const EvaluateTickButtonScheduleWrapper = styled.div`
button {
height: 24px;
}
`;
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
import {
Box,
Button,
Checkbox,
MiddleTruncate,
Tag,
Tooltip,
useDelayedState,
} from '@dagster-io/ui-components';
import {forwardRef, useMemo, useState} from 'react';
import {forwardRef, useMemo} from 'react';
import {Link} from 'react-router-dom';
import styled from 'styled-components';

import {AutomationTargetList} from './AutomationTargetList';
import {AutomationRowGrid} from './VirtualizedAutomationRow';
import {useQuery} from '../apollo-client';
import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
import {InstigationStatus, SensorType} from '../graphql/types';
import {InstigationStatus} from '../graphql/types';
import {LastRunSummary} from '../instance/LastRunSummary';
import {SENSOR_ASSET_SELECTIONS_QUERY} from '../sensors/SensorRoot';
import {SensorSwitch} from '../sensors/SensorSwitch';
import {
SensorAssetSelectionQuery,
SensorAssetSelectionQueryVariables,
} from '../sensors/types/SensorRoot.types';
import {SensorDryRunDialog} from '../ticks/SensorDryRunDialog';
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';
Expand All @@ -46,8 +46,6 @@ export const VirtualizedAutomationSensorRow = forwardRef(
(props: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
const {index, name, repoAddress, checked, onToggleChecked} = props;

const [showTestTickDialog, setShowTestTickDialog] = useState(false);

// Wait 100ms before querying in case we're scrolling the table really fast
const shouldQuery = useDelayedState(100);

Expand Down Expand Up @@ -161,21 +159,15 @@ export const VirtualizedAutomationSensorRow = forwardRef(
</Box>
{/* Right aligned content */}
{sensorData ? (
<Tooltip
canShow={sensorData.sensorType !== SensorType.STANDARD}
content="Testing not available for this sensor type"
placement="top-end"
>
<Button
disabled={sensorData.sensorType !== SensorType.STANDARD}
onClick={() => {
setShowTestTickDialog(true);
}}
style={{height: '24px', marginTop: '-4px'}} // center button text with content in AutomationRowGrid
>
Manual tick
</Button>
</Tooltip>
<EvaluateTickButtonSensorWrapper>
<EvaluateTickButtonSensor
cursor={cursor || ''}
name={sensorData?.name || ''}
repoAddress={repoAddress}
jobName={sensorData?.targets?.[0]?.pipelineName || ''}
sensorType={sensorData.sensorType}
/>
</EvaluateTickButtonSensorWrapper>
) : (
<div style={{width: 30}} />
)}
Expand Down Expand Up @@ -234,17 +226,13 @@ export const VirtualizedAutomationSensorRow = forwardRef(
)}
</RowCell>
</AutomationRowGrid>
<SensorDryRunDialog
isOpen={showTestTickDialog}
onClose={() => {
setShowTestTickDialog(false);
}}
currentCursor={cursor || ''}
name={sensorData?.name || ''}
repoAddress={repoAddress}
jobName={sensorData?.targets?.[0]?.pipelineName || ''}
/>
</div>
);
},
);

const EvaluateTickButtonSensorWrapper = styled.div`
button {
height: 24px;
}
`;
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import {
Box,
Button,
Code,
Group,
Heading,
MetadataTableWIP,
PageHeader,
Tag,
} from '@dagster-io/ui-components';
import {useState} from 'react';
import {Link} from 'react-router-dom';
import styled from 'styled-components';

Expand All @@ -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';

Expand All @@ -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 (
<>
<PageHeader
Expand All @@ -62,26 +58,14 @@ export const ScheduleDetails = (props: {
right={
<Box flex={{direction: 'row', alignItems: 'center', gap: 8}}>
<QueryRefreshCountdown refreshState={refreshState} />
<Button
onClick={() => {
setShowTestTickDialog(true);
}}
>
Evaluate tick
</Button>
<EvaluateTickButtonSchedule
name={schedule.name}
repoAddress={repoAddress}
jobName={pipelineName}
/>
</Box>
}
/>
<EvaluateScheduleDialog
key={showTestTickDialog ? '1' : '0'} // change key to reset dialog state
isOpen={showTestTickDialog}
onClose={() => {
setShowTestTickDialog(false);
}}
name={schedule.name}
repoAddress={repoAddress}
jobName={pipelineName}
/>
<MetadataTableWIP>
<tbody>
{schedule.description ? (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';

Expand Down Expand Up @@ -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 (
Expand All @@ -114,33 +113,16 @@ export const SensorDetails = ({
right={
<Box margin={{top: 4}} flex={{direction: 'row', alignItems: 'center', gap: 8}}>
<QueryRefreshCountdown refreshState={refreshState} />
<Tooltip
canShow={sensor.sensorType !== SensorType.STANDARD}
content="Testing not available for this sensor type"
placement="top-end"
>
<Button
disabled={sensor.sensorType !== SensorType.STANDARD}
onClick={() => {
setShowTestTickDialog(true);
}}
>
Evaluate tick
</Button>
</Tooltip>
<EvaluateTickButtonSensor
cursor={cursor || ''}
name={sensor.name}
repoAddress={repoAddress}
jobName={sensor.targets?.[0]?.pipelineName || ''}
sensorType={sensor.sensorType}
/>
</Box>
}
/>
<SensorDryRunDialog
isOpen={showTestTickDialog}
onClose={() => {
setShowTestTickDialog(false);
}}
currentCursor={cursor || ''}
name={sensor.name}
repoAddress={repoAddress}
jobName={sensor.targets?.[0]?.pipelineName || ''}
/>
<MetadataTableWIP>
<tbody>
{sensor.description ? (
Expand Down
Original file line number Diff line number Diff line change
@@ -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 (
<Box flex={{direction: 'row', alignItems: 'center', gap: 8}}>
<Button
onClick={() => {
setShowTestTickDialog(true);
}}
>
Evaluate tick
</Button>
<EvaluateScheduleDialog
key={showTestTickDialog ? '1' : '0'} // change key to reset dialog state
isOpen={showTestTickDialog}
onClose={() => {
setShowTestTickDialog(false);
}}
name={name}
repoAddress={repoAddress}
jobName={jobName}
/>
</Box>
);
};
Original file line number Diff line number Diff line change
@@ -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 (
<Box flex={{direction: 'row', alignItems: 'center', gap: 8}}>
<Tooltip
canShow={sensorType !== SensorType.STANDARD}
content="Testing not available for this sensor type"
placement="top-end"
>
<Button
disabled={sensorType !== SensorType.STANDARD}
onClick={() => setShowTestTickDialog(true)}
>
Evaluate tick
</Button>
</Tooltip>
<SensorDryRunDialog
isOpen={showTestTickDialog}
onClose={() => setShowTestTickDialog(false)}
currentCursor={cursor}
name={name}
repoAddress={repoAddress}
jobName={jobName}
/>
</Box>
);
};

0 comments on commit b711bcc

Please sign in to comment.