diff --git a/packages/backend/src/graphql/queries/get-execution-steps.js b/packages/backend/src/graphql/queries/get-execution-steps.js deleted file mode 100644 index 61eab6ac..00000000 --- a/packages/backend/src/graphql/queries/get-execution-steps.js +++ /dev/null @@ -1,27 +0,0 @@ -import paginate from '../../helpers/pagination.js'; -import Execution from '../../models/execution.js'; - -const getExecutionSteps = async (_parent, params, context) => { - const conditions = context.currentUser.can('read', 'Execution'); - const userExecutions = context.currentUser.$relatedQuery('executions'); - const allExecutions = Execution.query(); - const executionBaseQuery = conditions.isCreator - ? userExecutions - : allExecutions; - - const execution = await executionBaseQuery - .clone() - .withSoftDeleted() - .findById(params.executionId) - .throwIfNotFound(); - - const executionSteps = execution - .$relatedQuery('executionSteps') - .withSoftDeleted() - .withGraphFetched('step') - .orderBy('created_at', 'asc'); - - return paginate(executionSteps, params.limit, params.offset); -}; - -export default getExecutionSteps; diff --git a/packages/backend/src/graphql/query-resolvers.js b/packages/backend/src/graphql/query-resolvers.js index f9c578c5..1400d3f0 100644 --- a/packages/backend/src/graphql/query-resolvers.js +++ b/packages/backend/src/graphql/query-resolvers.js @@ -8,7 +8,6 @@ import getCurrentUser from './queries/get-current-user.js'; import getDynamicData from './queries/get-dynamic-data.js'; import getDynamicFields from './queries/get-dynamic-fields.js'; import getExecution from './queries/get-execution.js'; -import getExecutionSteps from './queries/get-execution-steps.js'; import getExecutions from './queries/get-executions.js'; import getFlow from './queries/get-flow.js'; import getFlows from './queries/get-flows.js'; @@ -42,7 +41,6 @@ const queryResolvers = { getDynamicFields, getExecution, getExecutions, - getExecutionSteps, getFlow, getFlows, getInvoices, diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql index 0bd4deb7..acafacdd 100644 --- a/packages/backend/src/graphql/schema.graphql +++ b/packages/backend/src/graphql/schema.graphql @@ -19,11 +19,6 @@ type Query { offset: Int! filters: ExecutionFiltersInput ): ExecutionConnection - getExecutionSteps( - executionId: String! - limit: Int! - offset: Int! - ): ExecutionStepConnection getDynamicData( stepId: String! key: String! diff --git a/packages/web/src/components/ExecutionStep/index.jsx b/packages/web/src/components/ExecutionStep/index.jsx index 04cdc826..2ce7f6c5 100644 --- a/packages/web/src/components/ExecutionStep/index.jsx +++ b/packages/web/src/components/ExecutionStep/index.jsx @@ -66,7 +66,7 @@ function ExecutionStepDate(props) { } ExecutionStepDate.propTypes = { - createdAt: PropTypes.string.isRequired, + createdAt: PropTypes.number.isRequired, }; const validIcon = ; diff --git a/packages/web/src/graphql/queries/get-execution-steps.js b/packages/web/src/graphql/queries/get-execution-steps.js deleted file mode 100644 index 833a9b67..00000000 --- a/packages/web/src/graphql/queries/get-execution-steps.js +++ /dev/null @@ -1,34 +0,0 @@ -import { gql } from '@apollo/client'; -export const GET_EXECUTION_STEPS = gql` - query GetExecutionSteps($executionId: String!, $limit: Int!, $offset: Int!) { - getExecutionSteps( - executionId: $executionId - limit: $limit - offset: $offset - ) { - pageInfo { - currentPage - totalPages - } - edges { - node { - id - executionId - status - dataIn - dataOut - errorDetails - createdAt - updatedAt - step { - id - appKey - type - status - position - } - } - } - } - } -`; diff --git a/packages/web/src/hooks/useExecutionSteps.js b/packages/web/src/hooks/useExecutionSteps.js new file mode 100644 index 00000000..ddbd5643 --- /dev/null +++ b/packages/web/src/hooks/useExecutionSteps.js @@ -0,0 +1,29 @@ +import { useInfiniteQuery } from '@tanstack/react-query'; + +import api from 'helpers/api'; + +export default function useExecutionSteps({ executionId }) { + const query = useInfiniteQuery({ + queryKey: ['executionSteps', executionId], + queryFn: async ({ pageParam = 1, signal }) => { + const { data } = await api.get( + `/v1/executions/${executionId}/execution-steps`, + { + params: { + page: pageParam, + }, + signal, + }, + ); + + return data; + }, + initialPageParam: 1, + getNextPageParam: (lastPage) => + lastPage?.meta?.currentPage < lastPage?.meta?.totalPages + ? lastPage?.meta?.currentPage + 1 + : null, + }); + + return query; +} diff --git a/packages/web/src/pages/Execution/index.jsx b/packages/web/src/pages/Execution/index.jsx index d9625f3c..b6a702d1 100644 --- a/packages/web/src/pages/Execution/index.jsx +++ b/packages/web/src/pages/Execution/index.jsx @@ -5,34 +5,45 @@ import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import AlertTitle from '@mui/material/AlertTitle'; import Alert from '@mui/material/Alert'; + import useFormatMessage from 'hooks/useFormatMessage'; import ExecutionHeader from 'components/ExecutionHeader'; import ExecutionStep from 'components/ExecutionStep'; import Container from 'components/Container'; import { GET_EXECUTION } from 'graphql/queries/get-execution'; -import { GET_EXECUTION_STEPS } from 'graphql/queries/get-execution-steps'; -const EXECUTION_PER_PAGE = 100; -const getLimitAndOffset = (page) => ({ - limit: EXECUTION_PER_PAGE, - offset: (page - 1) * EXECUTION_PER_PAGE, -}); +import useExecutionSteps from 'hooks/useExecutionSteps'; + export default function Execution() { const { executionId } = useParams(); const formatMessage = useFormatMessage(); + const { data: execution } = useQuery(GET_EXECUTION, { variables: { executionId }, }); - const { data, loading } = useQuery(GET_EXECUTION_STEPS, { - variables: { executionId, ...getLimitAndOffset(1) }, + + const { + data, + isLoading: isExecutionStepsLoading, + fetchNextPage, + hasNextPage, + isFetching, + isFetchingNextPage, + } = useExecutionSteps({ + executionId: executionId, }); - const { edges } = data?.getExecutionSteps || {}; - const executionSteps = edges?.map((edge) => edge.node); + + React.useEffect(() => { + if (!isFetching && !isFetchingNextPage && hasNextPage) { + fetchNextPage(); + } + }, [isFetching, isFetchingNextPage, hasNextPage, fetchNextPage]); + return ( - {!loading && !executionSteps?.length && ( + {!isExecutionStepsLoading && !data?.pages?.[0].data.length && ( {formatMessage('execution.noDataTitle')} @@ -44,12 +55,16 @@ export default function Execution() { )} - {executionSteps?.map((executionStep) => ( - + {data?.pages?.map((group, i) => ( + + {group?.data?.map((executionStep) => ( + + ))} + ))} diff --git a/packages/web/src/propTypes/propTypes.js b/packages/web/src/propTypes/propTypes.js index 6e2caa1d..6f6ef17b 100644 --- a/packages/web/src/propTypes/propTypes.js +++ b/packages/web/src/propTypes/propTypes.js @@ -225,8 +225,8 @@ export const ExecutionStepPropType = PropTypes.shape({ dataOut: PropTypes.object, errorDetails: PropTypes.object, status: PropTypes.string, - createdAt: PropTypes.string, - updatedAt: PropTypes.string, + createdAt: PropTypes.number, + updatedAt: PropTypes.number, }); export const FlowPropType = PropTypes.shape({