admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Serverless function follow up (#9924)

Browse Source 
- remove asynchronous serverless function build
- build serverless function synchronously instead on activate workflow
or execute
- add a loader on workflow code step test tab test button
- add a new `ServerlessFunctionSyncStatus` `BUILDING`
- add a new route to build a serverless function draft version 
- delay artificially execution to avoid UI flashing



https://github.com/user-attachments/assets/8d958d9a-ef41-4261-999e-6ea374191e33
This commit is contained in:
martmull
2025-01-31 17:12:42 +01:00
committed by GitHub
parent f47c0d45e3
commit ae62789159
28 changed files with 430 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/generated-metadata/gql.ts
View File

@ -34,6 +34,7 @@ const documents = {
"\n mutation DeleteOneRelationMetadataItem($idToDelete: UUID!) {\n deleteOneRelation(input: { id: $idToDelete }) {\n id\n }\n }\n": types.DeleteOneRelationMetadataItemDocument,
"\n query ObjectMetadataItems(\n $objectFilter: ObjectFilter\n $fieldFilter: FieldFilter\n ) {\n objects(paging: { first: 1000 }, filter: $objectFilter) {\n edges {\n node {\n id\n dataSourceId\n nameSingular\n namePlural\n labelSingular\n labelPlural\n description\n icon\n isCustom\n isRemote\n isActive\n isSystem\n createdAt\n updatedAt\n labelIdentifierFieldMetadataId\n imageIdentifierFieldMetadataId\n shortcut\n isLabelSyncedWithName\n indexMetadatas(paging: { first: 100 }) {\n edges {\n node {\n id\n createdAt\n updatedAt\n name\n indexWhereClause\n indexType\n isUnique\n indexFieldMetadatas(paging: { first: 100 }) {\n edges {\n node {\n id\n createdAt\n updatedAt\n order\n fieldMetadataId\n }\n }\n }\n }\n }\n }\n fields(paging: { first: 1000 }, filter: $fieldFilter) {\n edges {\n node {\n id\n type\n name\n label\n description\n icon\n isCustom\n isActive\n isSystem\n isNullable\n isUnique\n createdAt\n updatedAt\n defaultValue\n options\n settings\n isLabelSyncedWithName\n relationDefinition {\n relationId\n direction\n sourceObjectMetadata {\n id\n nameSingular\n namePlural\n }\n sourceFieldMetadata {\n id\n name\n }\n targetObjectMetadata {\n id\n nameSingular\n namePlural\n }\n targetFieldMetadata {\n id\n name\n }\n }\n }\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n": types.ObjectMetadataItemsDocument,
"\n fragment ServerlessFunctionFields on ServerlessFunction {\n id\n name\n description\n runtime\n timeoutSeconds\n syncStatus\n latestVersion\n latestVersionInputSchema\n publishedVersions\n createdAt\n updatedAt\n }\n": types.ServerlessFunctionFieldsFragmentDoc,
"\n \n mutation BuildDraftServerlessFunction(\n $input: BuildDraftServerlessFunctionInput!\n ) {\n buildDraftServerlessFunction(input: $input) {\n ...ServerlessFunctionFields\n }\n }\n": types.BuildDraftServerlessFunctionDocument,
"\n \n mutation CreateOneServerlessFunctionItem(\n $input: CreateServerlessFunctionInput!\n ) {\n createOneServerlessFunction(input: $input) {\n ...ServerlessFunctionFields\n }\n }\n": types.CreateOneServerlessFunctionItemDocument,
"\n \n mutation DeleteOneServerlessFunction($input: ServerlessFunctionIdInput!) {\n deleteOneServerlessFunction(input: $input) {\n ...ServerlessFunctionFields\n }\n }\n": types.DeleteOneServerlessFunctionDocument,
"\n mutation ExecuteOneServerlessFunction(\n $input: ExecuteServerlessFunctionInput!\n ) {\n executeOneServerlessFunction(input: $input) {\n data\n duration\n status\n error\n }\n }\n": types.ExecuteOneServerlessFunctionDocument,
@ -143,6 +144,10 @@ export function graphql(source: "\n query ObjectMetadataItems(\n $objectFilt
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment ServerlessFunctionFields on ServerlessFunction {\n id\n name\n description\n runtime\n timeoutSeconds\n syncStatus\n latestVersion\n latestVersionInputSchema\n publishedVersions\n createdAt\n updatedAt\n }\n"): (typeof documents)["\n fragment ServerlessFunctionFields on ServerlessFunction {\n id\n name\n description\n runtime\n timeoutSeconds\n syncStatus\n latestVersion\n latestVersionInputSchema\n publishedVersions\n createdAt\n updatedAt\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n \n mutation BuildDraftServerlessFunction(\n $input: BuildDraftServerlessFunctionInput!\n ) {\n buildDraftServerlessFunction(input: $input) {\n ...ServerlessFunctionFields\n }\n }\n"): (typeof documents)["\n \n mutation BuildDraftServerlessFunction(\n $input: BuildDraftServerlessFunctionInput!\n ) {\n buildDraftServerlessFunction(input: $input) {\n ...ServerlessFunctionFields\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

21
packages/twenty-front/src/generated-metadata/graphql.ts
View File

File diff suppressed because one or more lines are too long

3
packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx
View File

@ -9,9 +9,11 @@ import { FeatureFlagKey } from '~/generated/graphql';
export const CmdEnterActionButton = ({
title,
onClick,
disabled = false,
}: {
title: string;
onClick: () => void;
disabled?: boolean;
}) => {
const isCommandMenuV2Enabled = useIsFeatureEnabled(
FeatureFlagKey.IsCommandMenuV2Enabled,
@ -32,6 +34,7 @@ export const CmdEnterActionButton = ({
accent="blue"
size="medium"
onClick={onClick}
disabled={disabled}
hotkeys={[getOsControlSymbol(), '⏎']}
/>
);

96
packages/twenty-front/src/modules/serverless-functions/components/ServerlessFunctionExecutionResult.tsx
View File

@ -1,15 +1,16 @@
import styled from '@emotion/styled';
import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
import {
DEFAULT_OUTPUT_VALUE,
ServerlessFunctionTestData,
} from '@/workflow/states/serverlessFunctionTestDataFamilyState';
import { ServerlessFunctionTestData } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
import { useTheme } from '@emotion/react';
import {
CodeEditor,
CoreEditorHeader,
IconSquareRoundedCheck,
IconSquareRoundedX,
IconLoader,
IconSettings,
AnimatedCircleLoading,
} from 'twenty-ui';
import { ServerlessFunctionExecutionStatus } from '~/generated-metadata/graphql';
@ -18,20 +19,33 @@ const StyledContainer = styled.div`
flex-direction: column;
`;
const StyledOutput = styled.div<{ status?: ServerlessFunctionExecutionStatus }>`
type OutputAccent = 'default' | 'success' | 'error';
const StyledInfoContainer = styled.div`
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
`;
const StyledOutput = styled.div<{ accent?: OutputAccent }>`
align-items: center;
gap: ${({ theme }) => theme.spacing(1)};
color: ${({ theme, status }) =>
status === ServerlessFunctionExecutionStatus.SUCCESS
color: ${({ theme, accent }) =>
accent === 'success'
? theme.color.turquoise
: theme.color.red};
: accent === 'error'
? theme.color.red
: theme.font.color.secondary};
display: flex;
`;
export const ServerlessFunctionExecutionResult = ({
serverlessFunctionTestData,
isTesting = false,
isBuilding = false,
}: {
serverlessFunctionTestData: ServerlessFunctionTestData;
isTesting?: boolean;
isBuilding?: boolean;
}) => {
const theme = useTheme();
@ -40,25 +54,60 @@ export const ServerlessFunctionExecutionResult = ({
serverlessFunctionTestData.output.error ||
'';
const leftNode =
serverlessFunctionTestData.output.data === DEFAULT_OUTPUT_VALUE ? (
'Output'
) : (
<StyledOutput status={serverlessFunctionTestData.output.status}>
<IconSquareRoundedCheck size={theme.icon.size.md} />
{serverlessFunctionTestData.output.status ===
ServerlessFunctionExecutionStatus.SUCCESS
? '200 OK'
: '500 Error'}
{' - '}
{serverlessFunctionTestData.output.duration}ms
</StyledOutput>
);
const SuccessLeftNode = (
<StyledOutput accent="success">
<IconSquareRoundedCheck size={theme.icon.size.md} />
200 OK - {serverlessFunctionTestData.output.duration}ms
</StyledOutput>
);
const ErrorLeftNode = (
<StyledOutput accent="error">
<IconSquareRoundedX size={theme.icon.size.md} />
500 Error - {serverlessFunctionTestData.output.duration}ms
</StyledOutput>
);
const IdleLeftNode = 'Output';
const PendingLeftNode = (isTesting || isBuilding) && (
<StyledOutput>
<AnimatedCircleLoading>
{isTesting ? (
<IconLoader size={theme.icon.size.md} />
) : (
<IconSettings size={theme.icon.size.md} />
)}
</AnimatedCircleLoading>
<StyledInfoContainer>
{isTesting ? 'Running function' : 'Building function'}
</StyledInfoContainer>
</StyledOutput>
);
const computeLeftNode = () => {
if (isTesting || isBuilding) {
return PendingLeftNode;
}
if (
serverlessFunctionTestData.output.status ===
ServerlessFunctionExecutionStatus.ERROR
) {
return ErrorLeftNode;
}
if (
serverlessFunctionTestData.output.status ===
ServerlessFunctionExecutionStatus.SUCCESS
) {
return SuccessLeftNode;
}
return IdleLeftNode;
};
return (
<StyledContainer>
<CoreEditorHeader
leftNodes={[leftNode]}
leftNodes={[computeLeftNode()]}
rightNodes={[<LightCopyIconButton copyText={result} />]}
/>
<CodeEditor
@ -66,6 +115,7 @@ export const ServerlessFunctionExecutionResult = ({
language={serverlessFunctionTestData.language}
height={serverlessFunctionTestData.height}
options={{ readOnly: true, domReadOnly: true }}
isLoading={isTesting || isBuilding}
withHeader
/>
</StyledContainer>

91
packages/twenty-front/src/modules/serverless-functions/hooks/useTestServerlessFunction.ts
View File

@ -2,55 +2,76 @@ import { useExecuteOneServerlessFunction } from '@/settings/serverless-functions
import { useRecoilState } from 'recoil';
import { serverlessFunctionTestDataFamilyState } from '@/workflow/states/serverlessFunctionTestDataFamilyState';
import { isDefined } from 'twenty-ui';
import { useState } from 'react';
import { useBuildDraftServerlessFunction } from '@/settings/serverless-functions/hooks/useBuildDraftServerlessFunction';
import { sleep } from '~/utils/sleep';
export const useTestServerlessFunction = ({
serverlessFunctionId,
serverlessFunctionVersion = 'draft',
callback,
}: {
serverlessFunctionId: string;
serverlessFunctionVersion?: string;
callback?: (testResult: object) => void;
}) => {
const [isTesting, setIsTesting] = useState(false);
const [isBuilding, setIsBuilding] = useState(false);
const { executeOneServerlessFunction } = useExecuteOneServerlessFunction();
const { buildDraftServerlessFunction } = useBuildDraftServerlessFunction();
const [serverlessFunctionTestData, setServerlessFunctionTestData] =
useRecoilState(serverlessFunctionTestDataFamilyState(serverlessFunctionId));
const testServerlessFunction = async () => {
const result = await executeOneServerlessFunction({
id: serverlessFunctionId,
payload: serverlessFunctionTestData.input,
version: serverlessFunctionVersion,
});
const testServerlessFunction = async (shouldBuild = true) => {
try {
if (shouldBuild) {
setIsBuilding(true);
await buildDraftServerlessFunction({
id: serverlessFunctionId,
});
setIsBuilding(false);
}
setIsTesting(true);
await sleep(200); // Delay artificially to avoid flashing the UI
const result = await executeOneServerlessFunction({
id: serverlessFunctionId,
payload: serverlessFunctionTestData.input,
version: 'draft',
});
if (isDefined(result?.data?.executeOneServerlessFunction?.data)) {
callback?.(result?.data?.executeOneServerlessFunction?.data);
setIsTesting(false);
if (isDefined(result?.data?.executeOneServerlessFunction?.data)) {
callback?.(result?.data?.executeOneServerlessFunction?.data);
}
setServerlessFunctionTestData((prev) => ({
...prev,
language: 'json',
height: 300,
output: {
data: result?.data?.executeOneServerlessFunction?.data
? JSON.stringify(
result?.data?.executeOneServerlessFunction?.data,
null,
4,
)
: undefined,
duration: result?.data?.executeOneServerlessFunction?.duration,
status: result?.data?.executeOneServerlessFunction?.status,
error: result?.data?.executeOneServerlessFunction?.error
? JSON.stringify(
result?.data?.executeOneServerlessFunction?.error,
null,
4,
)
: undefined,
},
}));
} catch (error) {
setIsBuilding(false);
setIsTesting(false);
throw error;
}
setServerlessFunctionTestData((prev) => ({
...prev,
language: 'json',
height: 300,
output: {
data: result?.data?.executeOneServerlessFunction?.data
? JSON.stringify(
result?.data?.executeOneServerlessFunction?.data,
null,
4,
)
: undefined,
duration: result?.data?.executeOneServerlessFunction?.duration,
status: result?.data?.executeOneServerlessFunction?.status,
error: result?.data?.executeOneServerlessFunction?.error
? JSON.stringify(
result?.data?.executeOneServerlessFunction?.error,
null,
4,
)
: undefined,
},
}));
};
return { testServerlessFunction };
return { testServerlessFunction, isTesting, isBuilding };
};

13
packages/twenty-front/src/modules/settings/serverless-functions/graphql/mutations/buildDraftServerlessFunction.ts Normal file
View File

@ -0,0 +1,13 @@
import { gql } from '@apollo/client';
import { SERVERLESS_FUNCTION_FRAGMENT } from '@/settings/serverless-functions/graphql/fragments/serverlessFunctionFragment';
export const BUILD_DRAFT_SERVERLESS_FUNCTION = gql`
${SERVERLESS_FUNCTION_FRAGMENT}
mutation BuildDraftServerlessFunction(
$input: BuildDraftServerlessFunctionInput!
) {
buildDraftServerlessFunction(input: $input) {
...ServerlessFunctionFields
}
}
`;

29
packages/twenty-front/src/modules/settings/serverless-functions/hooks/useBuildDraftServerlessFunction.ts Normal file
View File

@ -0,0 +1,29 @@
import { useApolloMetadataClient } from '@/object-metadata/hooks/useApolloMetadataClient';
import { useMutation } from '@apollo/client';
import { BUILD_DRAFT_SERVERLESS_FUNCTION } from '@/settings/serverless-functions/graphql/mutations/buildDraftServerlessFunction';
import {
BuildDraftServerlessFunctionMutation,
BuildDraftServerlessFunctionMutationVariables,
BuildDraftServerlessFunctionInput,
} from '~/generated-metadata/graphql';
export const useBuildDraftServerlessFunction = () => {
const apolloMetadataClient = useApolloMetadataClient();
const [mutate] = useMutation<
BuildDraftServerlessFunctionMutation,
BuildDraftServerlessFunctionMutationVariables
>(BUILD_DRAFT_SERVERLESS_FUNCTION, {
client: apolloMetadataClient,
});
const buildDraftServerlessFunction = async (
input: BuildDraftServerlessFunctionInput,
) => {
return await mutate({
variables: {
input,
},
});
};
return { buildDraftServerlessFunction };
};

1
packages/twenty-front/src/modules/settings/serverless-functions/hooks/useGetOneServerlessFunctionSourceCode.ts
View File

@ -25,6 +25,7 @@ export const useGetOneServerlessFunctionSourceCode = ({
input: { id, version },
},
onCompleted,
fetchPolicy: 'network-only',
});
return { code: data?.getServerlessFunctionSourceCode, loading };
};

38
packages/twenty-front/src/modules/settings/serverless-functions/hooks/useUpdateOneServerlessFunction.ts
View File

@ -6,9 +6,6 @@ import {
UpdateOneServerlessFunctionMutationVariables,
UpdateServerlessFunctionInput,
} from '~/generated-metadata/graphql';
import { useEffect, useState } from 'react';
import { FIND_ONE_SERVERLESS_FUNCTION } from '@/settings/serverless-functions/graphql/queries/findOneServerlessFunction';
import { sleep } from '~/utils/sleep';
import { getOperationName } from '@apollo/client/utilities';
import { FIND_ONE_SERVERLESS_FUNCTION_SOURCE_CODE } from '@/settings/serverless-functions/graphql/queries/findOneServerlessFunctionSourceCode';
@ -16,7 +13,6 @@ export const useUpdateOneServerlessFunction = (
serverlessFunctionId: string,
) => {
const apolloMetadataClient = useApolloMetadataClient();
const [isReady, setIsReady] = useState(false);
const [mutate] = useMutation<
UpdateOneServerlessFunctionMutation,
UpdateOneServerlessFunctionMutationVariables
@ -27,7 +23,7 @@ export const useUpdateOneServerlessFunction = (
const updateOneServerlessFunction = async (
input: Omit<UpdateServerlessFunctionInput, 'id'>,
) => {
const result = await mutate({
return await mutate({
variables: {
input: { ...input, id: serverlessFunctionId },
},
@ -35,37 +31,7 @@ export const useUpdateOneServerlessFunction = (
getOperationName(FIND_ONE_SERVERLESS_FUNCTION_SOURCE_CODE) ?? '',
],
});
setIsReady(false);
return result;
};
useEffect(() => {
let isMounted = true;
const pollFunctionStatus = async () => {
while (isMounted && !isReady) {
const { data } = await apolloMetadataClient.query({
query: FIND_ONE_SERVERLESS_FUNCTION,
variables: { input: { id: serverlessFunctionId } },
fetchPolicy: 'network-only', // Always fetch fresh data
});
const serverlessFunction = data?.findOneServerlessFunction;
if (serverlessFunction?.syncStatus === 'READY') {
setIsReady(true);
break;
}
await sleep(500);
}
};
pollFunctionStatus();
return () => {
isMounted = false; // Cleanup when the component unmounts
};
}, [serverlessFunctionId, apolloMetadataClient, isReady]);
return { updateOneServerlessFunction, isReady };
return { updateOneServerlessFunction };
};

7
packages/twenty-front/src/modules/workflow/states/serverlessFunctionTestDataFamilyState.ts
View File

@ -13,7 +13,10 @@ export type ServerlessFunctionTestData = {
height: number;
};
export const DEFAULT_OUTPUT_VALUE = 'Enter an input above then press "Test"';
export const DEFAULT_OUTPUT_VALUE = {
data: 'Enter an input above then press "Test"',
status: ServerlessFunctionExecutionStatus.IDLE,
};
export const serverlessFunctionTestDataFamilyState = createFamilyState<
ServerlessFunctionTestData,
@ -24,6 +27,6 @@ export const serverlessFunctionTestDataFamilyState = createFamilyState<
language: 'plaintext',
height: 64,
input: {},
output: { data: DEFAULT_OUTPUT_VALUE },
output: DEFAULT_OUTPUT_VALUE,
},
});

32
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionFormServerlessFunction.tsx
View File

@ -86,12 +86,14 @@ export const WorkflowEditActionFormServerlessFunction = ({
}: WorkflowEditActionFormServerlessFunctionProps) => {
const theme = useTheme();
const { getIcon } = useIcons();
const [shouldBuildServerlessFunction, setShouldBuildServerlessFunction] =
useState(false);
const serverlessFunctionId = action.settings.input.serverlessFunctionId;
const serverlessFunctionVersion =
action.settings.input.serverlessFunctionVersion;
const tabListId = `${WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID}_${serverlessFunctionId}`;
const { activeTabId, setActiveTabId } = useTabList(tabListId);
const { updateOneServerlessFunction, isReady } =
const { activeTabId } = useTabList(tabListId);
const { updateOneServerlessFunction } =
useUpdateOneServerlessFunction(serverlessFunctionId);
const { getUpdatableWorkflowVersion } = useGetUpdatableWorkflowVersion();
@ -126,13 +128,14 @@ export const WorkflowEditActionFormServerlessFunction = ({
});
};
const { testServerlessFunction } = useTestServerlessFunction({
serverlessFunctionId,
serverlessFunctionVersion,
callback: updateOutputSchemaFromTestResult,
});
const { testServerlessFunction, isTesting, isBuilding } =
useTestServerlessFunction({
serverlessFunctionId,
callback: updateOutputSchemaFromTestResult,
});
const handleSave = useDebouncedCallback(async () => {
setShouldBuildServerlessFunction(true);
await updateOneServerlessFunction({
name: formValues.name,
description: formValues.description,
@ -231,8 +234,10 @@ export const WorkflowEditActionFormServerlessFunction = ({
};
const handleRunFunction = async () => {
await testServerlessFunction();
setActiveTabId('test');
if (!isTesting) {
await testServerlessFunction(shouldBuildServerlessFunction);
setShouldBuildServerlessFunction(false);
}
};
const handleEditorDidMount = async (
@ -313,7 +318,6 @@ export const WorkflowEditActionFormServerlessFunction = ({
readonly={actionOptions.readonly}
/>
<StyledCodeEditorContainer>
<InputLabel>Code {!isReady && <span>•</span>}</InputLabel>
<CodeEditor
height={343}
value={formValues.code?.[INDEX_FILE_PATH]}
@ -339,6 +343,8 @@ export const WorkflowEditActionFormServerlessFunction = ({
<InputLabel>Result</InputLabel>
<ServerlessFunctionExecutionResult
serverlessFunctionTestData={serverlessFunctionTestData}
isBuilding={isBuilding}
isTesting={isTesting}
/>
</StyledCodeEditorContainer>
</>
@ -347,7 +353,11 @@ export const WorkflowEditActionFormServerlessFunction = ({
{activeTabId === 'test' && (
<RightDrawerFooter
actions={[
<CmdEnterActionButton title="Test" onClick={handleRunFunction} />,
<CmdEnterActionButton
title="Test"
onClick={handleRunFunction}
disabled={isTesting || isBuilding}
/>,
]}
/>
)}

49
packages/twenty-server/src/database/typeorm/metadata/migrations/1738233783889-addNewSyncStatusToServerless.ts Normal file
View File

@ -0,0 +1,49 @@
import { MigrationInterface, QueryRunner } from 'typeorm';
export class AddNewSyncStatusToServerless1738233783889
implements MigrationInterface
{
name = 'AddNewSyncStatusToServerless1738233783889';
public async up(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(
`ALTER TYPE "metadata"."serverlessFunction_syncstatus_enum" RENAME TO "serverlessFunction_syncstatus_enum_old"`,
);
await queryRunner.query(
`CREATE TYPE "metadata"."serverlessFunction_syncstatus_enum" AS ENUM('NOT_READY', 'BUILDING', 'READY')`,
);
await queryRunner.query(
`ALTER TABLE "metadata"."serverlessFunction" ALTER COLUMN "syncStatus" DROP DEFAULT`,
);
await queryRunner.query(
`ALTER TABLE "metadata"."serverlessFunction" ALTER COLUMN "syncStatus" TYPE "metadata"."serverlessFunction_syncstatus_enum" USING "syncStatus"::"text"::"metadata"."serverlessFunction_syncstatus_enum"`,
);
await queryRunner.query(
`ALTER TABLE "metadata"."serverlessFunction" ALTER COLUMN "syncStatus" SET DEFAULT 'NOT_READY'`,
);
await queryRunner.query(
`DROP TYPE "metadata"."serverlessFunction_syncstatus_enum_old"`,
);
}
public async down(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(
`CREATE TYPE "metadata"."serverlessFunction_syncstatus_enum_old" AS ENUM('NOT_READY', 'READY')`,
);
await queryRunner.query(
`ALTER TABLE "metadata"."serverlessFunction" ALTER COLUMN "syncStatus" DROP DEFAULT`,
);
await queryRunner.query(
`ALTER TABLE "metadata"."serverlessFunction" ALTER COLUMN "syncStatus" TYPE "metadata"."serverlessFunction_syncstatus_enum_old" USING "syncStatus"::"text"::"metadata"."serverlessFunction_syncstatus_enum_old"`,
);
await queryRunner.query(
`ALTER TABLE "metadata"."serverlessFunction" ALTER COLUMN "syncStatus" SET DEFAULT 'NOT_READY'`,
);
await queryRunner.query(
`DROP TYPE "metadata"."serverlessFunction_syncstatus_enum"`,
);
await queryRunner.query(
`ALTER TYPE "metadata"."serverlessFunction_syncstatus_enum_old" RENAME TO "serverlessFunction_syncstatus_enum"`,
);
}
}

16
packages/twenty-server/src/engine/core-modules/serverless/drivers/lambda.driver.ts
View File

@ -54,7 +54,7 @@ import { compileTypescript } from 'src/engine/core-modules/serverless/drivers/ut
import { ENV_FILE_NAME } from 'src/engine/core-modules/serverless/drivers/constants/env-file-name';
import { OUTDIR_FOLDER } from 'src/engine/core-modules/serverless/drivers/constants/outdir-folder';
const UPDATE_FUNCTION_DURATION_TIMEOUT_IN_SECONDS = 30;
const UPDATE_FUNCTION_DURATION_TIMEOUT_IN_SECONDS = 60;
export interface LambdaDriverOptions extends LambdaClientConfig {
fileStorageService: FileStorageService;
@ -133,7 +133,7 @@ export class LambdaDriver implements ServerlessDriver {
await lambdaBuildDirectoryManager.clean();
if (!isDefined(result.LayerVersionArn)) {
throw new Error('new layer version arn si undefined');
throw new Error('new layer version arn if undefined');
}
return result.LayerVersionArn;
@ -177,15 +177,13 @@ export class LambdaDriver implements ServerlessDriver {
return join(SERVERLESS_TMPDIR_FOLDER, serverlessFunction.id, version);
};
async build(serverlessFunction: ServerlessFunctionEntity, version: string) {
const computedVersion =
version === 'latest' ? serverlessFunction.latestVersion : version;
async build(serverlessFunction: ServerlessFunctionEntity, version: 'draft') {
if (version !== 'draft') {
throw new Error("We can only build 'draft' version with lambda driver");
}
const inMemoryServerlessFunctionFolderPath =
this.getInMemoryServerlessFunctionFolderPath(
serverlessFunction,
computedVersion,
);
this.getInMemoryServerlessFunctionFolderPath(serverlessFunction, version);
const folderPath = getServerlessFolder({
serverlessFunction,

9
packages/twenty-server/src/engine/metadata-modules/serverless-function/dtos/build-draft-serverless-function.input.ts Normal file
View File

@ -0,0 +1,9 @@
import { ID, InputType } from '@nestjs/graphql';
import { IDField } from '@ptc-org/nestjs-query-graphql';
@InputType()
export class BuildDraftServerlessFunctionInput {
@IDField(() => ID, { description: 'The id of the function.' })
id!: string;
}

1
packages/twenty-server/src/engine/metadata-modules/serverless-function/dtos/serverless-function-execution-result.dto.ts
View File

@ -4,6 +4,7 @@ import { IsObject, IsOptional } from 'class-validator';
import graphqlTypeJson from 'graphql-type-json';
export enum ServerlessFunctionExecutionStatus {
IDLE = 'IDLE',
SUCCESS = 'SUCCESS',
ERROR = 'ERROR',
}

61
packages/twenty-server/src/engine/metadata-modules/serverless-function/jobs/build-serverless-function.job.ts
View File

@ -1,61 +0,0 @@
import { Scope } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Processor } from 'src/engine/core-modules/message-queue/decorators/processor.decorator';
import { MessageQueue } from 'src/engine/core-modules/message-queue/message-queue.constants';
import { Process } from 'src/engine/core-modules/message-queue/decorators/process.decorator';
import { ServerlessService } from 'src/engine/core-modules/serverless/serverless.service';
import {
ServerlessFunctionEntity,
ServerlessFunctionSyncStatus,
} from 'src/engine/metadata-modules/serverless-function/serverless-function.entity';
import { isDefined } from 'src/utils/is-defined';
export type BuildServerlessFunctionBatchEvent = {
serverlessFunctions: {
serverlessFunctionId: string;
serverlessFunctionVersion: string;
}[];
workspaceId: string;
};
@Processor({
queueName: MessageQueue.serverlessFunctionQueue,
scope: Scope.REQUEST,
})
export class BuildServerlessFunctionJob {
constructor(
@InjectRepository(ServerlessFunctionEntity, 'metadata')
private readonly serverlessFunctionRepository: Repository<ServerlessFunctionEntity>,
private readonly serverlessService: ServerlessService,
) {}
@Process(BuildServerlessFunctionJob.name)
async handle(batchEvent: BuildServerlessFunctionBatchEvent): Promise<void> {
for (const {
serverlessFunctionId,
serverlessFunctionVersion,
} of batchEvent.serverlessFunctions) {
const serverlessFunction =
await this.serverlessFunctionRepository.findOneBy({
id: serverlessFunctionId,
workspaceId: batchEvent.workspaceId,
});
if (isDefined(serverlessFunction)) {
await this.serverlessFunctionRepository.update(serverlessFunction.id, {
syncStatus: ServerlessFunctionSyncStatus.NOT_READY,
});
await this.serverlessService.build(
serverlessFunction,
serverlessFunctionVersion,
);
await this.serverlessFunctionRepository.update(serverlessFunction.id, {
syncStatus: ServerlessFunctionSyncStatus.READY,
});
}
}
}
}

1
packages/twenty-server/src/engine/metadata-modules/serverless-function/serverless-function.entity.ts
View File

@ -13,6 +13,7 @@ const DEFAULT_SERVERLESS_TIMEOUT_SECONDS = 300; // 5 minutes
export enum ServerlessFunctionSyncStatus {
NOT_READY = 'NOT_READY',
BUILDING = 'BUILDING',
READY = 'READY',
}

1
packages/twenty-server/src/engine/metadata-modules/serverless-function/serverless-function.exception.ts
View File

@ -13,5 +13,6 @@ export enum ServerlessFunctionExceptionCode {
FEATURE_FLAG_INVALID = 'FEATURE_FLAG_INVALID',
SERVERLESS_FUNCTION_ALREADY_EXIST = 'SERVERLESS_FUNCTION_ALREADY_EXIST',
SERVERLESS_FUNCTION_NOT_READY = 'SERVERLESS_FUNCTION_NOT_READY',
SERVERLESS_FUNCTION_BUILDING = 'SERVERLESS_FUNCTION_BUILDING',
SERVERLESS_FUNCTION_EXECUTION_LIMIT_REACHED = 'SERVERLESS_FUNCTION_EXECUTION_LIMIT_REACHED',
}

7
packages/twenty-server/src/engine/metadata-modules/serverless-function/serverless-function.module.ts
View File

@ -11,7 +11,6 @@ import { ThrottlerModule } from 'src/engine/core-modules/throttler/throttler.mod
import { ServerlessFunctionEntity } from 'src/engine/metadata-modules/serverless-function/serverless-function.entity';
import { ServerlessFunctionResolver } from 'src/engine/metadata-modules/serverless-function/serverless-function.resolver';
import { ServerlessFunctionService } from 'src/engine/metadata-modules/serverless-function/serverless-function.service';
import { BuildServerlessFunctionJob } from 'src/engine/metadata-modules/serverless-function/jobs/build-serverless-function.job';
@Module({
imports: [
@ -22,11 +21,7 @@ import { BuildServerlessFunctionJob } from 'src/engine/metadata-modules/serverle
ThrottlerModule,
AnalyticsModule,
],
providers: [
ServerlessFunctionService,
ServerlessFunctionResolver,
BuildServerlessFunctionJob,
],
providers: [ServerlessFunctionService, ServerlessFunctionResolver],
exports: [ServerlessFunctionService],
})
export class ServerlessFunctionModule {}

19
packages/twenty-server/src/engine/metadata-modules/serverless-function/serverless-function.resolver.ts
View File

@ -24,6 +24,7 @@ import {
} from 'src/engine/metadata-modules/serverless-function/serverless-function.exception';
import { ServerlessFunctionService } from 'src/engine/metadata-modules/serverless-function/serverless-function.service';
import { serverlessFunctionGraphQLApiExceptionHandler } from 'src/engine/metadata-modules/serverless-function/utils/serverless-function-graphql-api-exception-handler.utils';
import { BuildDraftServerlessFunctionInput } from 'src/engine/metadata-modules/serverless-function/dtos/build-draft-serverless-function.input';
@UseGuards(WorkspaceAuthGuard)
@Resolver()
@ -204,4 +205,22 @@ export class ServerlessFunctionResolver {
serverlessFunctionGraphQLApiExceptionHandler(error);
}
}
@Mutation(() => ServerlessFunctionDTO)
async buildDraftServerlessFunction(
@Args('input') input: BuildDraftServerlessFunctionInput,
@AuthWorkspace() { id: workspaceId }: Workspace,
) {
try {
await this.checkFeatureFlag(workspaceId);
const { id } = input;
return await this.serverlessFunctionService.buildDraftServerlessFunction(
id,
workspaceId,
);
} catch (error) {
serverlessFunctionGraphQLApiExceptionHandler(error);
}
}
}

82
packages/twenty-server/src/engine/metadata-modules/serverless-function/serverless-function.service.ts
View File

@ -26,10 +26,6 @@ import { getServerlessFolder } from 'src/engine/core-modules/serverless/utils/se
import { ThrottlerService } from 'src/engine/core-modules/throttler/throttler.service';
import { CreateServerlessFunctionInput } from 'src/engine/metadata-modules/serverless-function/dtos/create-serverless-function.input';
import { UpdateServerlessFunctionInput } from 'src/engine/metadata-modules/serverless-function/dtos/update-serverless-function.input';
import {
BuildServerlessFunctionBatchEvent,
BuildServerlessFunctionJob,
} from 'src/engine/metadata-modules/serverless-function/jobs/build-serverless-function.job';
import {
ServerlessFunctionEntity,
ServerlessFunctionSyncStatus,
@ -141,6 +137,16 @@ export class ServerlessFunctionService {
workspaceId,
});
if (
version === 'draft' &&
functionToExecute.syncStatus !== ServerlessFunctionSyncStatus.READY
) {
await this.buildDraftServerlessFunction(
functionToExecute.id,
workspaceId,
);
}
const resultServerlessFunction = await this.serverlessService.execute(
functionToExecute,
payload,
@ -276,12 +282,6 @@ export class ServerlessFunctionService {
});
}
await this.buildServerlessFunction({
serverlessFunctionId: existingServerlessFunction.id,
serverlessFunctionVersion: 'draft',
workspaceId,
});
return this.serverlessFunctionRepository.findOneBy({
id: existingServerlessFunction.id,
});
@ -322,6 +322,7 @@ export class ServerlessFunctionService {
...serverlessFunctionInput,
workspaceId,
layerVersion: LAST_LAYER_VERSION,
syncStatus: ServerlessFunctionSyncStatus.NOT_READY,
});
const createdServerlessFunction =
@ -341,12 +342,6 @@ export class ServerlessFunctionService {
});
}
await this.buildServerlessFunction({
serverlessFunctionId: createdServerlessFunction.id,
serverlessFunctionVersion: 'draft',
workspaceId,
});
return this.serverlessFunctionRepository.findOneBy({
id: createdServerlessFunction.id,
});
@ -361,6 +356,10 @@ export class ServerlessFunctionService {
version: string;
workspaceId: string;
}) {
if (version === 'draft') {
return;
}
const serverlessFunction = await this.findOneOrFail({
id,
workspaceId,
@ -381,10 +380,8 @@ export class ServerlessFunctionService {
},
});
await this.buildServerlessFunction({
serverlessFunctionId: id,
serverlessFunctionVersion: 'draft',
workspaceId,
await this.serverlessFunctionRepository.update(serverlessFunction.id, {
syncStatus: ServerlessFunctionSyncStatus.NOT_READY,
});
}
@ -403,24 +400,31 @@ export class ServerlessFunctionService {
}
}
private async buildServerlessFunction({
serverlessFunctionId,
serverlessFunctionVersion,
workspaceId,
}: {
serverlessFunctionId: string;
serverlessFunctionVersion: string;
workspaceId: string;
}) {
await this.messageQueueService.add<BuildServerlessFunctionBatchEvent>(
BuildServerlessFunctionJob.name,
{
serverlessFunctions: [
{ serverlessFunctionId, serverlessFunctionVersion },
],
workspaceId,
},
{ id: `${serverlessFunctionId}-${serverlessFunctionVersion}` },
);
async buildDraftServerlessFunction(id: string, workspaceId: string) {
const functionToBuild = await this.findOneOrFail({
id,
workspaceId,
});
if (functionToBuild.syncStatus === ServerlessFunctionSyncStatus.READY) {
return functionToBuild;
}
if (functionToBuild.syncStatus === ServerlessFunctionSyncStatus.BUILDING) {
throw new ServerlessFunctionException(
'This function is currently building. Please try later',
ServerlessFunctionExceptionCode.SERVERLESS_FUNCTION_BUILDING,
);
}
await this.serverlessFunctionRepository.update(functionToBuild.id, {
syncStatus: ServerlessFunctionSyncStatus.BUILDING,
});
await this.serverlessService.build(functionToBuild, 'draft');
await this.serverlessFunctionRepository.update(functionToBuild.id, {
syncStatus: ServerlessFunctionSyncStatus.READY,
});
return functionToBuild;
}
}

1
packages/twenty-server/src/engine/metadata-modules/serverless-function/utils/serverless-function-graphql-api-exception-handler.utils.ts
View File

@ -18,6 +18,7 @@ export const serverlessFunctionGraphQLApiExceptionHandler = (error: any) => {
case ServerlessFunctionExceptionCode.SERVERLESS_FUNCTION_ALREADY_EXIST:
throw new ConflictError(error.message);
case ServerlessFunctionExceptionCode.SERVERLESS_FUNCTION_NOT_READY:
case ServerlessFunctionExceptionCode.SERVERLESS_FUNCTION_BUILDING:
case ServerlessFunctionExceptionCode.FEATURE_FLAG_INVALID:
throw new ForbiddenError(error.message);
default:

2
packages/twenty-ui/src/display/icon/components/TablerIcons.ts
View File

@ -173,6 +173,7 @@ export {
IconListCheck,
IconListDetails,
IconListNumbers,
IconLoader,
IconLock,
IconLockOpen,
IconMail,
@ -236,6 +237,7 @@ export {
IconSquare,
IconSquareKey,
IconSquareRoundedCheck,
IconSquareRoundedX,
IconTable,
IconTag,
IconTags,

33
packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
View File

@ -1,3 +1,4 @@
import { Loader } from '@ui/feedback/loader/components/Loader';
import { useTheme, css } from '@emotion/react';
import Editor, { EditorProps, Monaco } from '@monaco-editor/react';
import { codeEditorTheme } from '@ui/input';
@ -10,8 +11,30 @@ type CodeEditorProps = Omit<EditorProps, 'onChange'> & {
onChange?: (value: string) => void;
setMarkers?: (value: string) => editor.IMarkerData[];
withHeader?: boolean;
isLoading?: boolean;
};
const StyledEditorLoader = styled.div<{
height: string | number;
withHeader?: boolean;
}>`
align-items: center;
display: flex;
height: ${({ height }) => height}px;
justify-content: center;
border: 1px solid ${({ theme }) => theme.border.color.medium};
background-color: ${({ theme }) => theme.background.transparent.lighter};
${({ withHeader, theme }) =>
withHeader
? css`
border-radius: 0 0 ${theme.border.radius.sm} ${theme.border.radius.sm};
border-top: none;
`
: css`
border-radius: ${theme.border.radius.sm};
`}
`;
const StyledEditor = styled(Editor)<{ withHeader: boolean }>`
.monaco-editor {
border-radius: ${({ theme }) => theme.border.radius.sm};
@ -42,6 +65,7 @@ export const CodeEditor = ({
onValidate,
height = 450,
withHeader = false,
isLoading = false,
options,
}: CodeEditorProps) => {
const theme = useTheme();
@ -64,12 +88,17 @@ export const CodeEditor = ({
}
};
return (
return isLoading ? (
<StyledEditorLoader height={height} withHeader={withHeader}>
<Loader />
</StyledEditorLoader>
) : (
<StyledEditor
height={height}
withHeader={withHeader}
value={value}
value={isLoading ? '' : value}
language={language}
loading=""
onMount={(editor, monaco) => {
setMonaco(monaco);
setEditor(editor);

1
packages/twenty-ui/src/theme/constants/Animation.ts
View File

@ -3,6 +3,7 @@ export const ANIMATION = {
instant: 0.075,
fast: 0.15,
normal: 0.3,
slow: 1.5,
},
};

33
packages/twenty-ui/src/utilities/animation/components/AnimatedCircleLoading.tsx Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import { motion } from 'framer-motion';
import styled from '@emotion/styled';
import { useTheme } from '@emotion/react';
const StyledAnimatedContainer = styled(motion.div)`
align-items: center;
display: flex;
justify-content: center;
`;
export const AnimatedCircleLoading = ({
children,
}: {
children: React.ReactNode;
}) => {
const theme = useTheme();
return (
<StyledAnimatedContainer
initial={{ rotate: 0 }}
animate={{
rotate: 360,
}}
transition={{
repeat: Infinity,
duration: theme.animation.duration.slow,
ease: 'easeInOut',
}}
>
{children}
</StyledAnimatedContainer>
);
};

1
packages/twenty-ui/src/utilities/animation/index.ts
View File

@ -4,3 +4,4 @@ export * from './components/AnimatedEaseInOut';
export * from './components/AnimatedFadeOut';
export * from './components/AnimatedTextWord';
export * from './components/AnimatedTranslation';
export * from './components/AnimatedCircleLoading';

1
packages/twenty-ui/src/utilities/index.ts
View File

@ -1,3 +1,4 @@
export * from './animation/components/AnimatedCircleLoading';
export * from './animation/components/AnimatedContainer';
export * from './animation/components/AnimatedEaseIn';
export * from './animation/components/AnimatedEaseInOut';