add manual tick button to rows in automation table

dagster-io · Oct 17, 2024 · fdd4ce8 · fdd4ce8
1 parent 857bf23
commit fdd4ce8
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 25 deletions.
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
@@ -1,5 +1,5 @@
-import {Box, Caption, Checkbox, MiddleTruncate, Tooltip} from '@dagster-io/ui-components';
-import {forwardRef, useCallback, useMemo} from 'react';
+import {Box, Button, Caption, Checkbox, MiddleTruncate, Tooltip} from '@dagster-io/ui-components';
+import {forwardRef, useCallback, useMemo, useState} from 'react';
 import {Link} from 'react-router-dom';
 
 import {AutomationTargetList} from './AutomationTargetList';
@@ -17,6 +17,7 @@ import {
   ScheduleAssetSelectionQuery,
   ScheduleAssetSelectionQueryVariables,
 } from '../schedules/types/ScheduleAssetSelectionsQuery.types';
+import {EvaluateScheduleDialog} from '../ticks/EvaluateScheduleDialog';
 import {TickStatusTag} from '../ticks/TickStatusTag';
 import {RowCell} from '../ui/VirtualizedTable';
 import {SINGLE_SCHEDULE_QUERY} from '../workspace/VirtualizedScheduleRow';
@@ -40,6 +41,8 @@ export const VirtualizedAutomationScheduleRow = forwardRef(
   (props: ScheduleRowProps, ref: React.ForwardedRef<HTMLDivElement>) => {
     const {index, name, repoAddress, checked, onToggleChecked} = props;
 
+    const [showTestTickDialog, setShowTestTickDialog] = useState(false);
+
     const [querySchedule, queryResult] = useLazyQuery<
       SingleScheduleQuery,
       SingleScheduleQueryVariables
@@ -133,22 +136,33 @@ export const VirtualizedAutomationScheduleRow = forwardRef(
             </Tooltip>
           </RowCell>
           <RowCell>
+            {/* Left aligned content */}
             <Box flex={{direction: 'row', gap: 8, alignItems: 'flex-start'}}>
-              {scheduleData ? (
-                <Box flex={{direction: 'column', gap: 4}}>
-                  {/* Keyed so that a new switch is always rendered, otherwise it's reused and animates on/off */}
-                  <ScheduleSwitch key={name} repoAddress={repoAddress} schedule={scheduleData} />
-                  {errorDisplay(
-                    scheduleData.scheduleState.status,
-                    scheduleData.scheduleState.runningCount,
-                  )}
-                </Box>
-              ) : (
-                <div style={{width: 30}} />
-              )}
-              <Link to={workspacePathFromAddress(repoAddress, `/schedules/${name}`)}>
-                <MiddleTruncate text={name} />
-              </Link>
+              <Box flex={{grow: 1, gap: 8}}>
+                {scheduleData ? (
+                  <>
+                    <ScheduleSwitch key={name} repoAddress={repoAddress} schedule={scheduleData} />
+                    {errorDisplay(
+                      scheduleData.scheduleState.status,
+                      scheduleData.scheduleState.runningCount,
+                    )}
+                  </>
+                ) : (
+                  <div style={{width: 30}} />
+                )}
+                <Link to={workspacePathFromAddress(repoAddress, `/schedules/${name}`)}>
+                  <MiddleTruncate text={name} />
+                </Link>
+              </Box>
+              {/* Right aligned content */}
+              <Button
+                onClick={() => {
+                  setShowTestTickDialog(true);
+                }}
+                style={{height: '24px', marginTop: '-4px'}} // center button text with content in AutomationRowGrid
+              >
+                Manual tick
+              </Button>
             </Box>
           </RowCell>
           <RowCell>
@@ -216,6 +230,16 @@ 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>
     );
   },

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
@@ -1,19 +1,20 @@
-import {Box, Checkbox, MiddleTruncate, Tag, Tooltip} from '@dagster-io/ui-components';
-import {forwardRef, useCallback, useMemo} from 'react';
+import {Box, Button, Checkbox, MiddleTruncate, Tag, Tooltip} from '@dagster-io/ui-components';
+import {forwardRef, useCallback, useMemo, useState} from 'react';
 import {Link} from 'react-router-dom';
 
 import {AutomationTargetList} from './AutomationTargetList';
 import {AutomationRowGrid} from './VirtualizedAutomationRow';
 import {useLazyQuery} from '../apollo-client';
 import {FIFTEEN_SECONDS, useQueryRefreshAtInterval} from '../app/QueryRefresh';
-import {InstigationStatus} from '../graphql/types';
+import {InstigationStatus, SensorType} 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 {TickStatusTag} from '../ticks/TickStatusTag';
 import {RowCell} from '../ui/VirtualizedTable';
 import {SENSOR_TYPE_META, SINGLE_SENSOR_QUERY} from '../workspace/VirtualizedSensorRow';
@@ -37,6 +38,8 @@ export const VirtualizedAutomationSensorRow = forwardRef(
   (props: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
     const {index, name, repoAddress, checked, onToggleChecked} = props;
 
+    const [showTestTickDialog, setShowTestTickDialog] = useState(false);
+
     const [querySensor, sensorQueryResult] = useLazyQuery<
       SingleSensorQuery,
       SingleSensorQueryVariables
@@ -83,6 +86,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<HTMLInputElement>) => {
       if (onToggleChecked && e.target instanceof HTMLInputElement) {
         const {checked} = e.target;
@@ -132,15 +141,38 @@ export const VirtualizedAutomationSensorRow = forwardRef(
           </RowCell>
           <RowCell>
             <Box flex={{direction: 'row', gap: 8, alignItems: 'flex-start'}}>
-              {/* Keyed so that a new switch is always rendered, otherwise it's reused and animates on/off */}
+              {/* Left aligned content */}
+              <Box flex={{grow: 1, gap: 8}}>
+                {/* Keyed so that a new switch is always rendered, otherwise it's reused and animates on/off */}
+                {sensorData ? (
+                  <SensorSwitch key={name} repoAddress={repoAddress} sensor={sensorData} />
+                ) : (
+                  <div style={{width: 30}} />
+                )}
+                <Link to={workspacePathFromAddress(repoAddress, `/sensors/${name}`)}>
+                  <MiddleTruncate text={name} />
+                </Link>
+              </Box>
+              {/* Right aligned content */}
               {sensorData ? (
-                <SensorSwitch key={name} repoAddress={repoAddress} sensor={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>
               ) : (
                 <div style={{width: 30}} />
               )}
-              <Link to={workspacePathFromAddress(repoAddress, `/sensors/${name}`)}>
-                <MiddleTruncate text={name} />
-              </Link>
             </Box>
           </RowCell>
           <RowCell>
@@ -196,6 +228,16 @@ 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>
     );
   },