diff --git a/packages/zapp/console/package.json b/packages/zapp/console/package.json index a191e7e60..6304a0a31 100644 --- a/packages/zapp/console/package.json +++ b/packages/zapp/console/package.json @@ -58,7 +58,7 @@ "@commitlint/cli": "^8.3.5", "@commitlint/config-conventional": "^8.3.4", "@date-io/moment": "1.3.9", - "@flyteorg/flyteidl": "1.1.0", + "@flyteorg/flyteidl": "1.1.4", "@material-ui/core": "^4.0.0", "@material-ui/icons": "^4.0.0", "@material-ui/pickers": "^3.2.2", diff --git a/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx b/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx index e5251378f..8177f5066 100644 --- a/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx +++ b/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx @@ -1,23 +1,70 @@ -import { Button } from '@material-ui/core'; +import { Button, Dialog, IconButton } from '@material-ui/core'; import * as React from 'react'; import { ResourceIdentifier, Identifier, Variable } from 'models/Common/types'; +import { makeStyles, Theme } from '@material-ui/core/styles'; import { getTask } from 'models/Task/api'; import { LaunchFormDialog } from 'components/Launch/LaunchForm/LaunchFormDialog'; import { NodeExecutionIdentifier } from 'models/Execution/types'; -import { useNodeExecutionData } from 'components/hooks/useNodeExecution'; +import { useNodeExecution, useNodeExecutionData } from 'components/hooks/useNodeExecution'; import { literalsToLiteralValueMap } from 'components/Launch/LaunchForm/utils'; import { TaskInitialLaunchParameters } from 'components/Launch/LaunchForm/types'; +import { NodeExecutionPhase } from 'models/Execution/enums'; +import Close from '@material-ui/icons/Close'; import { NodeExecutionDetails } from '../types'; import t from './strings'; +import { ExecutionNodeDeck } from './ExecutionNodeDeck'; + +const useStyles = makeStyles((theme: Theme) => { + return { + actionsContainer: { + borderTop: `1px solid ${theme.palette.divider}`, + marginTop: theme.spacing(2), + paddingTop: theme.spacing(2), + '& button': { + marginRight: theme.spacing(1), + }, + }, + dialog: { + maxWidth: `calc(100% - ${theme.spacing(12)}px)`, + maxHeight: `calc(100% - ${theme.spacing(12)}px)`, + height: theme.spacing(90), + width: theme.spacing(110), + '& iframe': { + border: 'none', + }, + }, + dialogTitle: { + display: 'flex', + alignItems: 'center', + padding: theme.spacing(2), + paddingBottom: theme.spacing(0), + fontFamily: 'Open sans', + }, + deckTitle: { + flexGrow: 1, + textAlign: 'center', + fontSize: '24px', + lineHeight: '32px', + marginBlock: 0, + paddingTop: theme.spacing(2), + paddingBottom: theme.spacing(2), + }, + close: { + position: 'absolute', + right: theme.spacing(2), + }, + }; +}); interface ExecutionDetailsActionsProps { - className?: string; details: NodeExecutionDetails; nodeExecutionId: NodeExecutionIdentifier; + phase?: NodeExecutionPhase; } export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JSX.Element => { - const { className, details, nodeExecutionId } = props; + const { details, nodeExecutionId, phase } = props; + const styles = useStyles(); const [showLaunchForm, setShowLaunchForm] = React.useState(false); const [taskInputsTypes, setTaskInputsTypes] = React.useState< @@ -25,6 +72,7 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS >(); const executionData = useNodeExecutionData(nodeExecutionId); + const execution = useNodeExecution(nodeExecutionId); const id = details.taskTemplate?.id as ResourceIdentifier | undefined; @@ -36,6 +84,9 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS if (id) fetchTask(); }, [id]); + const [showDeck, setShowDeck] = React.useState(false); + const onCloseDeck = () => setShowDeck(false); + if (!id) { return <>; } @@ -54,7 +105,17 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS return ( <> -
+
+ {execution?.value?.closure?.deckUri && ( + + )} @@ -65,6 +126,17 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS showLaunchForm={showLaunchForm} setShowLaunchForm={setShowLaunchForm} /> + {execution?.value?.closure?.deckUri ? ( + +
+

{t('flyteDeck')}

+ + + +
+ +
+ ) : null} ); }; diff --git a/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx b/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx new file mode 100644 index 000000000..e0b702915 --- /dev/null +++ b/packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionNodeDeck.tsx @@ -0,0 +1,14 @@ +import { useDownloadLocation } from 'components/hooks/useDataProxy'; +import { WaitForData } from 'components/common/WaitForData'; +import * as React from 'react'; + +/** Fetches and renders the deck data for a given `deckUri` */ +export const ExecutionNodeDeck: React.FC<{ deckUri: string }> = ({ deckUri }) => { + const downloadLocation = useDownloadLocation(deckUri); + + return ( + +