Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: force node executions to pull their status #737

Merged
merged 25 commits into from
Apr 17, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: fixes
Signed-off-by: Carina Ursu <carina@union.ai>
ursucarina committed Apr 17, 2023

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
commit a92a054966f9fc03bb1e522744bdb22487a2044c
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import * as React from 'react';
import { useContext } from 'react';
import { Collapse, IconButton } from '@material-ui/core';
import { makeStyles, Theme } from '@material-ui/core/styles';
import ExpandMore from '@material-ui/icons/ExpandMore';
@@ -6,16 +8,17 @@ import { LargeLoadingSpinner } from 'components/common/LoadingSpinner';
import { WaitForQuery } from 'components/common/WaitForQuery';
import { withRouteParams } from 'components/common/withRouteParams';
import { DataError } from 'components/Errors/DataError';
import { isEqual } from 'lodash';
import { Execution } from 'models/Execution/types';
import * as React from 'react';
import { useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { useQuery, useQueryClient } from 'react-query';
import { Workflow } from 'models/Workflow/types';
import { makeWorkflowQuery } from 'components/Workflow/workflowQueries';
import { ExecutionContext } from '../contexts';
import { useWorkflowExecutionQuery } from '../useWorkflowExecution';
import { ExecutionDetailsAppBarContent } from './ExecutionDetailsAppBarContent';
import { ExecutionMetadata } from './ExecutionMetadata';
import { ExecutionNodeViews } from './ExecutionNodeViews';
import { NodeExecutionDetailsContextProvider } from '../contextProvider/NodeExecutionDetails';

const useStyles = makeStyles((theme: Theme) => ({
expandCollapseButton: {
@@ -40,63 +43,60 @@ const useStyles = makeStyles((theme: Theme) => ({
},
}));

export interface ExecutionDetailsRouteParams {
domainId: string;
executionId: string;
projectId: string;
}
export type ExecutionDetailsProps = ExecutionDetailsRouteParams;

interface RenderExecutionDetailsProps {
execution: Execution;
}

const RenderExecutionDetails: React.FC<RenderExecutionDetailsProps> = ({
execution,
}) => {
const RenderExecutionContainer: React.FC<{}> = () => {
const styles = useStyles();
const [metadataExpanded, setMetadataExpanded] = React.useState(true);
const toggleMetadata = () => setMetadataExpanded(!metadataExpanded);

const [localExecution, setLocalExecution] = useState<Execution>();
const { execution } = useContext(ExecutionContext);

React.useEffect(() => {
setLocalExecution(prev => {
if (isEqual(prev, execution)) {
return prev;
}

return execution;
});
}, [execution]);
const contextValue = {
execution,
};
const {
closure: { workflowId },
} = execution;

const workflowQuery = useQuery<Workflow, Error>(
makeWorkflowQuery(useQueryClient(), workflowId),
);
return (
<ExecutionContext.Provider value={contextValue}>
<ExecutionDetailsAppBarContent />
<div className={styles.metadataContainer}>
<Collapse in={metadataExpanded}>
<ExecutionMetadata />
</Collapse>
<div className={styles.expandCollapseContainer}>
<IconButton size="small" onClick={toggleMetadata}>
<ExpandMore
className={classnames(styles.expandCollapseButton, {
expanded: metadataExpanded,
})}
/>
</IconButton>
</div>
</div>
<ExecutionNodeViews />
</ExecutionContext.Provider>
<>
{/* Fetches the current workflow to build the execution tree inside NodeExecutionDetailsContextProvider */}
<WaitForQuery errorComponent={DataError} query={workflowQuery}>
{workflow => (
<>
{/* Provides a node execution tree for the current workflow */}
<NodeExecutionDetailsContextProvider workflow={workflow}>
<ExecutionDetailsAppBarContent />
<div className={styles.metadataContainer}>
<Collapse in={metadataExpanded}>
<ExecutionMetadata />
</Collapse>
<div className={styles.expandCollapseContainer}>
<IconButton size="small" onClick={toggleMetadata}>
<ExpandMore
className={classnames(styles.expandCollapseButton, {
expanded: metadataExpanded,
})}
/>
</IconButton>
</div>
</div>

<ExecutionNodeViews />
</NodeExecutionDetailsContextProvider>
</>
)}
</WaitForQuery>
</>
);
};

export interface ExecutionDetailsRouteParams {
domainId: string;
executionId: string;
projectId: string;
}
/** The view component for the Execution Details page */
export const ExecutionDetailsContainer: React.FC<ExecutionDetailsProps> = ({
export const ExecutionDetailsWrapper: React.FC<ExecutionDetailsRouteParams> = ({
executionId,
domainId,
projectId,
@@ -107,21 +107,28 @@ export const ExecutionDetailsContainer: React.FC<ExecutionDetailsProps> = ({
name: executionId,
};

const renderExecutionDetails = (execution: Execution) => (
<RenderExecutionDetails execution={execution} />
);
const workflowExecutionQuery = useWorkflowExecutionQuery(id);

return (
// get the workflow execution query to get the current workflow id
<WaitForQuery
errorComponent={DataError}
loadingComponent={LargeLoadingSpinner}
query={useWorkflowExecutionQuery(id)}
query={workflowExecutionQuery}
>
{renderExecutionDetails}
{(execution: Execution) => (
<ExecutionContext.Provider
value={{
execution,
}}
>
<RenderExecutionContainer />
</ExecutionContext.Provider>
)}
</WaitForQuery>
);
};

export const ExecutionDetails: React.FunctionComponent<
RouteComponentProps<ExecutionDetailsRouteParams>
> = withRouteParams<ExecutionDetailsRouteParams>(ExecutionDetailsContainer);
> = withRouteParams<ExecutionDetailsRouteParams>(ExecutionDetailsWrapper);
Original file line number Diff line number Diff line change
@@ -1,109 +1,32 @@
import React, { useContext } from 'react';
import { Tab, Tabs } from '@material-ui/core';
import { makeStyles, Theme } from '@material-ui/core/styles';
import { useTabState } from 'components/hooks/useTabState';
import { secondaryBackgroundColor } from 'components/Theme/constants';
import { WaitForQuery } from 'components/common';
import { DataError } from 'components/Errors/DataError';
import { LargeLoadingSpinner } from 'components/common/LoadingSpinner';
import { useQuery, useQueryClient } from 'react-query';
import { Workflow } from 'models/Workflow/types';
import { makeWorkflowQuery } from 'components/Workflow/workflowQueries';
import {
NodeExecutionDetailsContextProvider,
NodeExecutionsByIdContextProvider,
} from '../contextProvider/NodeExecutionDetails';
import { LargeLoadingComponent } from 'components/common/LoadingSpinner';
import { ExecutionContext } from '../contexts';
import { ExecutionFilters } from '../ExecutionFilters';
import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
import { tabs } from './constants';
import { ExecutionTab } from './ExecutionTab';
import { useExecutionNodeViewsState } from './useExecutionNodeViewsState';

const useStyles = makeStyles((theme: Theme) => ({
filters: {
paddingLeft: theme.spacing(3),
},
nodesContainer: {
borderTop: `1px solid ${theme.palette.divider}`,
display: 'flex',
flex: '1 1 100%',
flexDirection: 'column',
minHeight: 0,
},
tabs: {
background: secondaryBackgroundColor,
paddingLeft: theme.spacing(3.5),
},
}));
import { useExecutionNodeViewsStatePoll } from './useExecutionNodeViewsState';
import { ExecutionTabView } from './ExecutionTabView';
import { WorkflowNodeExecutionsProvider } from '../contextProvider/NodeExecutionDetails';

/** Contains the available ways to visualize the nodes of a WorkflowExecution */
export const ExecutionNodeViews: React.FC = () => {
const defaultTab = tabs.nodes.id;
const styles = useStyles();
const filterState = useNodeExecutionFiltersState();
const tabState = useTabState(tabs, defaultTab);
export const ExecutionNodeViews: React.FC<{}> = () => {
const { execution } = useContext(ExecutionContext);

const {
closure: { workflowId },
} = execution;
const workflowQuery = useQuery<Workflow, Error>(
makeWorkflowQuery(useQueryClient(), workflowId),
);
// query to get all data to build Graph and Timeline
const { nodeExecutionsQuery } = useExecutionNodeViewsState(execution);
// query to get filtered data to narrow down Table outputs
const { nodeExecutionsQuery: filteredNodeExecutionsQuery } =
useExecutionNodeViewsState(execution, filterState?.appliedFilters);
const { nodeExecutionsQuery } = useExecutionNodeViewsStatePoll(execution);

return (
<>
<Tabs className={styles.tabs} {...tabState}>
<Tab value={tabs.nodes.id} label={tabs.nodes.label} />
<Tab value={tabs.graph.id} label={tabs.graph.label} />
<Tab value={tabs.timeline.id} label={tabs.timeline.label} />
</Tabs>

<WaitForQuery errorComponent={DataError} query={workflowQuery}>
{() =>
filterState ? (
<NodeExecutionDetailsContextProvider workflowId={workflowId}>
<NodeExecutionsByIdContextProvider
filterState={filterState}
nodeExecutionsQuery={nodeExecutionsQuery}
filteredNodeExecutionsQuery={filteredNodeExecutionsQuery}
>
<div className={styles.nodesContainer}>
{tabState.value === tabs.nodes.id && (
<div className={styles.filters}>
<ExecutionFilters {...filterState} />
</div>
)}

<WaitForQuery
errorComponent={DataError}
query={nodeExecutionsQuery}
loadingComponent={LoadingComponent}
>
{() => <ExecutionTab tabType={tabState.value} />}
</WaitForQuery>
</div>
</NodeExecutionsByIdContextProvider>
</NodeExecutionDetailsContextProvider>
) : (
<LoadingComponent />
)
}
<WaitForQuery
query={nodeExecutionsQuery}
errorComponent={DataError}
loadingComponent={LargeLoadingComponent}
>
{data => (
<WorkflowNodeExecutionsProvider initialNodeExecutions={data}>
<ExecutionTabView />
</WorkflowNodeExecutionsProvider>
)}
</WaitForQuery>
</>
);
};

const LoadingComponent = () => {
return (
<div style={{ margin: 'auto' }}>
<LargeLoadingSpinner />
</div>
);
};
Loading