-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Remove intermediate NodeExecutionsTable row content (#75)
* refactor: removing specialized rows and rendering only nodes * refactor: moving contexts up to common folder * refactor: use a data cache for nested node mapping * refactor: update loading of workflow data * fix: update usage of NodeExecutions in graph tab * fix: update TaskExecutionDetails to use data cache * fix: getting tests and stories working again * chore: docs and cleanup * test: use a more robust element query * refactor: use filter instead of reduce * docs: adding some missing function docs
- Loading branch information
Showing
47 changed files
with
859 additions
and
1,073 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
src/components/Executions/ExecutionDetails/ExecutionNodeDetails/OutputNodeDetails.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
162 changes: 40 additions & 122 deletions
162
src/components/Executions/Tables/NodeExecutionChildren.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,132 +1,50 @@ | ||
| import { WaitForData } from 'components/common'; | ||
| import { | ||
| RefreshConfig, | ||
| useDataRefresher, | ||
| useWorkflowExecution | ||
| } from 'components/hooks'; | ||
| import { isEqual } from 'lodash'; | ||
| import { Execution, NodeExecutionClosure, WorkflowNodeMetadata } from 'models'; | ||
| import { Typography } from '@material-ui/core'; | ||
| import * as classnames from 'classnames'; | ||
| import { useExpandableMonospaceTextStyles } from 'components/common/ExpandableMonospaceText'; | ||
| import * as React from 'react'; | ||
| import { executionIsTerminal, executionRefreshIntervalMs } from '..'; | ||
| import { ExecutionContext } from '../ExecutionDetails/contexts'; | ||
| import { DetailedNodeExecution } from '../types'; | ||
| import { useDetailedTaskExecutions } from '../useDetailedTaskExecutions'; | ||
| import { | ||
| useTaskExecutions, | ||
| useTaskExecutionsRefresher | ||
| } from '../useTaskExecutions'; | ||
| import { generateRowSkeleton } from './generateRowSkeleton'; | ||
| import { NoExecutionsContent } from './NoExecutionsContent'; | ||
| import { useColumnStyles } from './styles'; | ||
| import { generateColumns as generateTaskExecutionColumns } from './taskExecutionColumns'; | ||
| import { TaskExecutionRow } from './TaskExecutionRow'; | ||
| import { generateColumns as generateWorkflowExecutionColumns } from './workflowExecutionColumns'; | ||
| import { WorkflowExecutionRow } from './WorkflowExecutionRow'; | ||
| import { DetailedNodeExecutionGroup } from '../types'; | ||
| import { NodeExecutionRow } from './NodeExecutionRow'; | ||
| import { useExecutionTableStyles } from './styles'; | ||
|
|
||
| export interface NodeExecutionChildrenProps { | ||
| execution: DetailedNodeExecution; | ||
| childGroups: DetailedNodeExecutionGroup[]; | ||
| } | ||
|
|
||
| const TaskNodeExecutionChildren: React.FC<NodeExecutionChildrenProps> = ({ | ||
| execution: nodeExecution | ||
| /** Renders a nested list of row items for children of a NodeExecution */ | ||
| export const NodeExecutionChildren: React.FC<NodeExecutionChildrenProps> = ({ | ||
| childGroups | ||
| }) => { | ||
| const taskExecutions = useDetailedTaskExecutions( | ||
| useTaskExecutions(nodeExecution.id) | ||
| ); | ||
| useTaskExecutionsRefresher(nodeExecution, taskExecutions); | ||
|
|
||
| const columnStyles = useColumnStyles(); | ||
| // Memoizing columns so they won't be re-generated unless the styles change | ||
| const { columns, Skeleton } = React.useMemo(() => { | ||
| const columns = generateTaskExecutionColumns(columnStyles); | ||
| return { columns, Skeleton: generateRowSkeleton(columns) }; | ||
| }, [columnStyles]); | ||
| const showNames = childGroups.length > 1; | ||
| const tableStyles = useExecutionTableStyles(); | ||
| const monospaceTextStyles = useExpandableMonospaceTextStyles(); | ||
| return ( | ||
| <WaitForData | ||
| spinnerVariant="medium" | ||
| loadingComponent={Skeleton} | ||
| {...taskExecutions} | ||
| > | ||
| {taskExecutions.value.length ? ( | ||
| taskExecutions.value.map(taskExecution => ( | ||
| <TaskExecutionRow | ||
| columns={columns} | ||
| key={taskExecution.cacheKey} | ||
| execution={taskExecution} | ||
| nodeExecution={nodeExecution} | ||
| <> | ||
| {childGroups.map(({ name, nodeExecutions }) => { | ||
| const rows = nodeExecutions.map(nodeExecution => ( | ||
| <NodeExecutionRow | ||
| key={nodeExecution.cacheKey} | ||
| execution={nodeExecution} | ||
| /> | ||
| )) | ||
| ) : ( | ||
| <NoExecutionsContent /> | ||
| )} | ||
| </WaitForData> | ||
| ); | ||
| }; | ||
|
|
||
| interface WorkflowNodeExecution extends DetailedNodeExecution { | ||
| closure: NodeExecutionClosure & { | ||
| workflowNodeMetadata: WorkflowNodeMetadata; | ||
| }; | ||
| } | ||
| interface WorkflowNodeExecutionChildrenProps | ||
| extends NodeExecutionChildrenProps { | ||
| execution: WorkflowNodeExecution; | ||
| } | ||
|
|
||
| const executionRefreshConfig: RefreshConfig<Execution> = { | ||
| interval: executionRefreshIntervalMs, | ||
| valueIsFinal: executionIsTerminal | ||
| }; | ||
|
|
||
| const WorkflowNodeExecutionChildren: React.FC<WorkflowNodeExecutionChildrenProps> = ({ | ||
| execution | ||
| }) => { | ||
| const { executionId } = execution.closure.workflowNodeMetadata; | ||
| const workflowExecution = useWorkflowExecution(executionId).fetchable; | ||
| useDataRefresher(executionId, workflowExecution, executionRefreshConfig); | ||
|
|
||
| const columnStyles = useColumnStyles(); | ||
| // Memoizing columns so they won't be re-generated unless the styles change | ||
| const { columns, Skeleton } = React.useMemo(() => { | ||
| const columns = generateWorkflowExecutionColumns(columnStyles); | ||
| return { columns, Skeleton: generateRowSkeleton(columns) }; | ||
| }, [columnStyles]); | ||
| return ( | ||
| <WaitForData | ||
| spinnerVariant="medium" | ||
| loadingComponent={Skeleton} | ||
| {...workflowExecution} | ||
| > | ||
| {workflowExecution.value ? ( | ||
| <WorkflowExecutionRow | ||
| columns={columns} | ||
| execution={workflowExecution.value} | ||
| /> | ||
| ) : ( | ||
| <NoExecutionsContent /> | ||
| )} | ||
| </WaitForData> | ||
| )); | ||
| const key = `group-${name}`; | ||
| return showNames ? ( | ||
| <div key={key}> | ||
| <div className={tableStyles.row}> | ||
| <Typography variant="overline">{name}</Typography> | ||
| </div> | ||
| <div | ||
| className={classnames( | ||
| tableStyles.childrenContainer, | ||
| monospaceTextStyles.nestedParent | ||
| )} | ||
| > | ||
| {rows} | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <div key={key}>{rows}</div> | ||
| ); | ||
| })} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| /** Renders a nested list of row items for children of a NodeExecution */ | ||
| export const NodeExecutionChildren: React.FC<NodeExecutionChildrenProps> = props => { | ||
| const { workflowNodeMetadata } = props.execution.closure; | ||
| const { execution: topExecution } = React.useContext(ExecutionContext); | ||
|
|
||
| // Nested NodeExecutions will sometimes have `workflowNodeMetadata` that | ||
| // points to the parent WorkflowExecution. We only want to expand workflow | ||
| // nodes that point to a different workflow execution | ||
| if ( | ||
| workflowNodeMetadata && | ||
| !isEqual(workflowNodeMetadata.executionId, topExecution.id) | ||
| ) { | ||
| return ( | ||
| <WorkflowNodeExecutionChildren | ||
| {...props} | ||
| execution={props.execution as WorkflowNodeExecution} | ||
| /> | ||
| ); | ||
| } | ||
| return <TaskNodeExecutionChildren {...props} />; | ||
| }; |
Oops, something went wrong.