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

add dynamic dates for webhookGraphDataUsage (#7720)

Browse Source 
**Before:**
Only last 5 days where displayed on Developers Settings Webhook Usage
Graph.

![image](https://github.com/user-attachments/assets/7b7f2e6b-9637-489e-a7a7-5a3cb70525aa)


**Now**
Added component where you can select the time range where you want to
view the webhook usage. To do better the styling and content depassing .

<img width="652" alt="Screenshot 2024-10-15 at 16 56 45"
src="https://github.com/user-attachments/assets/d06e7f4c-a689-49a0-8839-f015ce36bab9">


**In order to test**

1. Set ANALYTICS_ENABLED to true
2. Set TINYBIRD_TOKEN to your token from the workspace
twenty_analytics_playground
3. Write your client tinybird token in
SettingsDeveloppersWebhookDetail.tsx in line 93
4. Create a Webhook in twenty and set wich events it needs to track
5. Run twenty-worker in order to make the webhooks work.
6. Do your tasks in order to populate the data
7. Enter to settings> webhook>your webhook and the statistics section
should be displayed.
8.  Select the desired time range in the dropdown

**To do list**

- Tooltip is truncated when accessing values at the right end of the
graph
- DateTicks needs to follow a more clear standard
- Update this PR with more representative images
This commit is contained in:
Ana Sofia Marin Alexandre
2024-10-18 11:00:21 +02:00
committed by GitHub
parent 0c24001e23
commit 8cadcdf577
28 changed files with 631 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/generated/graphql.tsx
View File

@ -141,6 +141,7 @@ export enum CaptchaDriverType {
export type ClientConfig = {
__typename?: 'ClientConfig';
analyticsEnabled: Scalars['Boolean'];
api: ApiConfig;
authProviders: AuthProviders;
billing: Billing;
@ -1599,7 +1600,7 @@ export type UpdateBillingSubscriptionMutation = { __typename?: 'Mutation', updat
export type GetClientConfigQueryVariables = Exact<{ [key: string]: never; }>;
export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, signUpDisabled: boolean, debugMode: boolean, chromeExtensionId?: string | null, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean, microsoft: boolean }, billing: { __typename?: 'Billing', isBillingEnabled: boolean, billingUrl?: string | null, billingFreeTrialDurationInDays?: number | null }, support: { __typename?: 'Support', supportDriver: string, supportFrontChatId?: string | null }, sentry: { __typename?: 'Sentry', dsn?: string | null, environment?: string | null, release?: string | null }, captcha: { __typename?: 'Captcha', provider?: CaptchaDriverType | null, siteKey?: string | null }, api: { __typename?: 'ApiConfig', mutationMaximumAffectedRecords: number } } };
export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, signUpDisabled: boolean, debugMode: boolean, analyticsEnabled: boolean, chromeExtensionId?: string | null, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean, microsoft: boolean }, billing: { __typename?: 'Billing', isBillingEnabled: boolean, billingUrl?: string | null, billingFreeTrialDurationInDays?: number | null }, support: { __typename?: 'Support', supportDriver: string, supportFrontChatId?: string | null }, sentry: { __typename?: 'Sentry', dsn?: string | null, environment?: string | null, release?: string | null }, captcha: { __typename?: 'Captcha', provider?: CaptchaDriverType | null, siteKey?: string | null }, api: { __typename?: 'ApiConfig', mutationMaximumAffectedRecords: number } } };
export type SkipSyncEmailOnboardingStepMutationVariables = Exact<{ [key: string]: never; }>;
@ -2765,6 +2766,7 @@ export const GetClientConfigDocument = gql`
signInPrefilled
signUpDisabled
debugMode
analyticsEnabled
support {
supportDriver
supportFrontChatId

6
packages/twenty-front/src/modules/auth/hooks/useAuth.ts
View File

@ -32,6 +32,8 @@ import {
import { isDefined } from '~/utils/isDefined';
import { currentWorkspaceMembersState } from '@/auth/states/currentWorkspaceMembersStates';
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { dateTimeFormatState } from '@/localization/states/dateTimeFormatState';
import { detectDateFormat } from '@/localization/utils/detectDateFormat';
import { detectTimeFormat } from '@/localization/utils/detectTimeFormat';
@ -143,12 +145,12 @@ export const useAuth = () => {
? getDateFormatFromWorkspaceDateFormat(
user.workspaceMember.dateFormat,
)
: detectDateFormat(),
: DateFormat[detectDateFormat()],
timeFormat: isDefined(user.workspaceMember.timeFormat)
? getTimeFormatFromWorkspaceTimeFormat(
user.workspaceMember.timeFormat,
)
: detectTimeFormat(),
: TimeFormat[detectTimeFormat()],
});
}

9
packages/twenty-front/src/modules/client-config/components/ClientConfigProviderEffect.tsx
View File

@ -1,23 +1,24 @@
import { useEffect } from 'react';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { apiConfigState } from '@/client-config/states/apiConfigState';
import { authProvidersState } from '@/client-config/states/authProvidersState';
import { billingState } from '@/client-config/states/billingState';
import { captchaProviderState } from '@/client-config/states/captchaProviderState';
import { chromeExtensionIdState } from '@/client-config/states/chromeExtensionIdState';
import { isAnalyticsEnabledState } from '@/client-config/states/isAnalyticsEnabledState';
import { isClientConfigLoadedState } from '@/client-config/states/isClientConfigLoadedState';
import { isDebugModeState } from '@/client-config/states/isDebugModeState';
import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
import { isSignUpDisabledState } from '@/client-config/states/isSignUpDisabledState';
import { sentryConfigState } from '@/client-config/states/sentryConfigState';
import { supportChatState } from '@/client-config/states/supportChatState';
import { useEffect } from 'react';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { useGetClientConfigQuery } from '~/generated/graphql';
import { isDefined } from '~/utils/isDefined';
export const ClientConfigProviderEffect = () => {
const setAuthProviders = useSetRecoilState(authProvidersState);
const setIsDebugMode = useSetRecoilState(isDebugModeState);
const setIsAnalyticsEnabled = useSetRecoilState(isAnalyticsEnabledState);
const setIsSignInPrefilled = useSetRecoilState(isSignInPrefilledState);
const setIsSignUpDisabled = useSetRecoilState(isSignUpDisabledState);
@ -50,6 +51,7 @@ export const ClientConfigProviderEffect = () => {
magicLink: false,
});
setIsDebugMode(data?.clientConfig.debugMode);
setIsAnalyticsEnabled(data?.clientConfig.analyticsEnabled);
setIsSignInPrefilled(data?.clientConfig.signInPrefilled);
setIsSignUpDisabled(data?.clientConfig.signUpDisabled);
@ -84,6 +86,7 @@ export const ClientConfigProviderEffect = () => {
setCaptchaProvider,
setChromeExtensionId,
setApiConfig,
setIsAnalyticsEnabled,
]);
return <></>;

1
packages/twenty-front/src/modules/client-config/graphql/queries/getClientConfig.ts
View File

@ -16,6 +16,7 @@ export const GET_CLIENT_CONFIG = gql`
signInPrefilled
signUpDisabled
debugMode
analyticsEnabled
support {
supportDriver
supportFrontChatId

6
packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts Normal file
View File

@ -0,0 +1,6 @@
import { createState } from 'twenty-ui';
export const isAnalyticsEnabledState = createState<boolean>({
key: 'isAnalyticsEnabled',
defaultValue: false,
});

11
packages/twenty-front/src/modules/localization/constants/DateFormatWithoutYear.ts Normal file
View File

@ -0,0 +1,11 @@
import { DateFormat } from '@/localization/constants/DateFormat';
type DateFormatWithoutYear = {
[K in keyof typeof DateFormat]: string;
};
export const DATE_FORMAT_WITHOUT_YEAR: DateFormatWithoutYear = {
SYSTEM: 'SYSTEM',
MONTH_FIRST: 'MMM d',
DAY_FIRST: 'd MMM',
YEAR_FIRST: 'MMM d',
};

17
packages/twenty-front/src/modules/localization/utils/__tests__/detectDateFormat.test.ts
View File

@ -1,8 +1,7 @@
import { DateFormat } from '@/localization/constants/DateFormat';
import { detectDateFormat } from '@/localization/utils/detectDateFormat';
describe('detectDateFormat', () => {
it('should return DateFormat.MONTH_FIRST if the detected format starts with month', () => {
it('should return MONTH_FIRST if the detected format starts with month', () => {
// Mock the Intl.DateTimeFormat to return a specific format
const mockDateTimeFormat = jest.fn().mockReturnValue({
formatToParts: () => [
@ -16,10 +15,10 @@ describe('detectDateFormat', () => {
const result = detectDateFormat();
expect(result).toBe(DateFormat.MONTH_FIRST);
expect(result).toBe('MONTH_FIRST');
});
it('should return DateFormat.DAY_FIRST if the detected format starts with day', () => {
it('should return DAY_FIRST if the detected format starts with day', () => {
// Mock the Intl.DateTimeFormat to return a specific format
const mockDateTimeFormat = jest.fn().mockReturnValue({
formatToParts: () => [
@ -32,10 +31,10 @@ describe('detectDateFormat', () => {
const result = detectDateFormat();
expect(result).toBe(DateFormat.DAY_FIRST);
expect(result).toBe('DAY_FIRST');
});
it('should return DateFormat.YEAR_FIRST if the detected format starts with year', () => {
it('should return YEAR_FIRST if the detected format starts with year', () => {
// Mock the Intl.DateTimeFormat to return a specific format
const mockDateTimeFormat = jest.fn().mockReturnValue({
formatToParts: () => [
@ -48,10 +47,10 @@ describe('detectDateFormat', () => {
const result = detectDateFormat();
expect(result).toBe(DateFormat.YEAR_FIRST);
expect(result).toBe('YEAR_FIRST');
});
it('should return DateFormat.MONTH_FIRST by default if the detected format does not match any specific order', () => {
it('should return MONTH_FIRST by default if the detected format does not match any specific order', () => {
// Mock the Intl.DateTimeFormat to return a specific format
const mockDateTimeFormat = jest.fn().mockReturnValue({
formatToParts: () => [
@ -64,6 +63,6 @@ describe('detectDateFormat', () => {
const result = detectDateFormat();
expect(result).toBe(DateFormat.MONTH_FIRST);
expect(result).toBe('MONTH_FIRST');
});
});

9
packages/twenty-front/src/modules/localization/utils/__tests__/detectTimeFormat.test.ts
View File

@ -1,8 +1,7 @@
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { detectTimeFormat } from '@/localization/utils/detectTimeFormat';
describe('detectTimeFormat', () => {
it('should return TimeFormat.HOUR_12 if the hour format is 12-hour', () => {
it('should return HOUR_12 if the hour format is 12-hour', () => {
// Mock the resolvedOptions method to return hour12 as true
const mockResolvedOptions = jest.fn(() => ({ hour12: true }));
Intl.DateTimeFormat = jest.fn().mockImplementation(() => ({
@ -11,11 +10,11 @@ describe('detectTimeFormat', () => {
const result = detectTimeFormat();
expect(result).toBe(TimeFormat.HOUR_12);
expect(result).toBe('HOUR_12');
expect(mockResolvedOptions).toHaveBeenCalled();
});
it('should return TimeFormat.HOUR_24 if the hour format is 24-hour', () => {
it('should return HOUR_24 if the hour format is 24-hour', () => {
// Mock the resolvedOptions method to return hour12 as false
const mockResolvedOptions = jest.fn(() => ({ hour12: false }));
Intl.DateTimeFormat = jest.fn().mockImplementation(() => ({
@ -24,7 +23,7 @@ describe('detectTimeFormat', () => {
const result = detectTimeFormat();
expect(result).toBe(TimeFormat.HOUR_24);
expect(result).toBe('HOUR_24');
expect(mockResolvedOptions).toHaveBeenCalled();
});
});

90
packages/twenty-front/src/modules/localization/utils/__tests__/formatDateISOStringToDateTimeSimplified.test.js Normal file
View File

@ -0,0 +1,90 @@
import { detectDateFormat } from '@/localization/utils/detectDateFormat';
import { formatDateISOStringToDateTimeSimplified } from '@/localization/utils/formatDateISOStringToDateTimeSimplified';
import { formatInTimeZone } from 'date-fns-tz';
// Mock the imported modules
jest.mock('@/localization/utils/detectDateFormat');
jest.mock('date-fns-tz');
describe('formatDateISOStringToDateTimeSimplified', () => {
const mockDate = new Date('2023-08-15T10:30:00Z');
const mockTimeZone = 'America/New_York';
const mockTimeFormat = 'HH:mm';
beforeEach(() => {
jest.resetAllMocks();
});
it('should format the date correctly when DATE_FORMAT is MONTH_FIRST', () => {
detectDateFormat.mockReturnValue('MONTH_FIRST');
formatInTimeZone.mockReturnValue('Oct 15 · 06:30');
const result = formatDateISOStringToDateTimeSimplified(
mockDate,
mockTimeZone,
mockTimeFormat,
);
expect(detectDateFormat).toHaveBeenCalled();
expect(formatInTimeZone).toHaveBeenCalledWith(
mockDate,
mockTimeZone,
'MMM d · HH:mm',
);
expect(result).toBe('Oct 15 · 06:30');
});
it('should format the date correctly when DATE_FORMAT is DAY_FIRST', () => {
detectDateFormat.mockReturnValue('DAY_FIRST');
formatInTimeZone.mockReturnValue('15 Oct · 06:30');
const result = formatDateISOStringToDateTimeSimplified(
mockDate,
mockTimeZone,
mockTimeFormat,
);
expect(detectDateFormat).toHaveBeenCalled();
expect(formatInTimeZone).toHaveBeenCalledWith(
mockDate,
mockTimeZone,
'd MMM · HH:mm',
);
expect(result).toBe('15 Oct · 06:30');
});
it('should use the provided time format', () => {
detectDateFormat.mockReturnValue('MONTH_FIRST');
formatInTimeZone.mockReturnValue('Oct 15 · 6:30 AM');
const result = formatDateISOStringToDateTimeSimplified(
mockDate,
mockTimeZone,
'h:mm aa',
);
expect(formatInTimeZone).toHaveBeenCalledWith(
mockDate,
mockTimeZone,
'MMM d · h:mm aa',
);
expect(result).toBe('Oct 15 · 6:30 AM');
});
it('should handle different time zones', () => {
detectDateFormat.mockReturnValue('MONTH_FIRST');
formatInTimeZone.mockReturnValue('Oct 16 · 02:30');
const result = formatDateISOStringToDateTimeSimplified(
mockDate,
'Asia/Tokyo',
mockTimeFormat,
);
expect(formatInTimeZone).toHaveBeenCalledWith(
mockDate,
'Asia/Tokyo',
'MMM d · HH:mm',
);
expect(result).toBe('Oct 16 · 02:30');
});
});

10
packages/twenty-front/src/modules/localization/utils/detectDateFormat.ts
View File

@ -1,6 +1,6 @@
import { DateFormat } from '@/localization/constants/DateFormat';
export const detectDateFormat = (): DateFormat => {
export const detectDateFormat = (): keyof typeof DateFormat => {
const date = new Date();
const formatter = new Intl.DateTimeFormat(navigator.language);
const parts = formatter.formatToParts(date);
@ -9,9 +9,9 @@ export const detectDateFormat = (): DateFormat => {
.filter((part) => ['year', 'month', 'day'].includes(part.type))
.map((part) => part.type);
if (partOrder[0] === 'month') return DateFormat.MONTH_FIRST;
if (partOrder[0] === 'day') return DateFormat.DAY_FIRST;
if (partOrder[0] === 'year') return DateFormat.YEAR_FIRST;
if (partOrder[0] === 'month') return 'MONTH_FIRST';
if (partOrder[0] === 'day') return 'DAY_FIRST';
if (partOrder[0] === 'year') return 'YEAR_FIRST';
return DateFormat.MONTH_FIRST;
return 'MONTH_FIRST';
};

6
packages/twenty-front/src/modules/localization/utils/detectTimeFormat.ts
View File

@ -1,14 +1,14 @@
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { isDefined } from '~/utils/isDefined';
export const detectTimeFormat = () => {
export const detectTimeFormat = (): keyof typeof TimeFormat => {
const isHour12 = Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
}).resolvedOptions().hour12;
if (isDefined(isHour12) && isHour12) {
return TimeFormat.HOUR_12;
return 'HOUR_12';
}
return TimeFormat.HOUR_24;
return 'HOUR_24';
};

18
packages/twenty-front/src/modules/localization/utils/formatDateISOStringToDateTimeSimplified.ts Normal file
View File

@ -0,0 +1,18 @@
import { DATE_FORMAT_WITHOUT_YEAR } from '@/localization/constants/DateFormatWithoutYear';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { detectDateFormat } from '@/localization/utils/detectDateFormat';
import { formatInTimeZone } from 'date-fns-tz';
export const formatDateISOStringToDateTimeSimplified = (
date: Date,
timeZone: string,
timeFormat: TimeFormat,
) => {
const simplifiedDateFormat = DATE_FORMAT_WITHOUT_YEAR[detectDateFormat()];
return formatInTimeZone(
date,
timeZone,
`${simplifiedDateFormat} · ${timeFormat}`,
);
};

2
packages/twenty-front/src/modules/localization/utils/getDateFormatFromWorkspaceDateFormat.ts
View File

@ -7,7 +7,7 @@ export const getDateFormatFromWorkspaceDateFormat = (
) => {
switch (workspaceDateFormat) {
case WorkspaceMemberDateFormatEnum.System:
return detectDateFormat();
return DateFormat[detectDateFormat()];
case WorkspaceMemberDateFormatEnum.MonthFirst:
return DateFormat.MONTH_FIRST;
case WorkspaceMemberDateFormatEnum.DayFirst:

2
packages/twenty-front/src/modules/localization/utils/getTimeFormatFromWorkspaceTimeFormat.ts
View File

@ -7,7 +7,7 @@ export const getTimeFormatFromWorkspaceTimeFormat = (
) => {
switch (workspaceTimeFormat) {
case WorkspaceMemberTimeFormatEnum.System:
return detectTimeFormat();
return TimeFormat[detectTimeFormat()];
case WorkspaceMemberTimeFormatEnum.Hour_24:
return TimeFormat.HOUR_24;
case WorkspaceMemberTimeFormatEnum.Hour_12:

89
packages/twenty-front/src/modules/settings/developers/webhook/components/SettingsDevelopersWebhookTooltip.tsx Normal file
View File

@ -0,0 +1,89 @@
import { formatDateISOStringToDateTimeSimplified } from '@/localization/utils/formatDateISOStringToDateTimeSimplified';
import { UserContext } from '@/users/contexts/UserContext';
import styled from '@emotion/styled';
import { Point } from '@nivo/line';
import { ReactElement, useContext } from 'react';
const StyledTooltipContainer = styled.div`
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.md};
border: 1px solid ${({ theme }) => theme.border.color.medium};
display: flex;
width: 128px;
flex-direction: column;
justify-content: center;
background: ${({ theme }) => theme.background.transparent.secondary};
box-shadow: ${({ theme }) => theme.boxShadow.light};
backdrop-filter: ${({ theme }) => theme.blur.medium};
`;
const StyledTooltipDateContainer = styled.div`
align-items: flex-start;
align-self: stretch;
display: flex;
justify-content: center;
font-weight: ${({ theme }) => theme.font.weight.medium};
font-family: ${({ theme }) => theme.font.family};
gap: ${({ theme }) => theme.spacing(2)};
color: ${({ theme }) => theme.font.color.secondary};
padding: ${({ theme }) => theme.spacing(2)};
`;
const StyledTooltipDataRow = styled.div`
align-items: flex-start;
align-self: stretch;
display: flex;
justify-content: space-between;
color: ${({ theme }) => theme.font.color.tertiary};
padding: ${({ theme }) => theme.spacing(2)};
`;
const StyledLine = styled.div`
background-color: ${({ theme }) => theme.border.color.medium};
height: 1px;
width: 100%;
`;
const StyledColorPoint = styled.div<{ color: string }>`
background-color: ${({ color }) => color};
border-radius: 50%;
height: 8px;
width: 8px;
display: inline-block;
`;
const StyledDataDefinition = styled.div`
display: flex;
align-items: center;
gap: ${({ theme }) => theme.spacing(2)};
`;
const StyledSpan = styled.span`
color: ${({ theme }) => theme.font.color.primary};
`;
type SettingsDevelopersWebhookTooltipProps = {
point: Point;
};
export const SettingsDevelopersWebhookTooltip = ({
point,
}: SettingsDevelopersWebhookTooltipProps): ReactElement => {
const { timeFormat, timeZone } = useContext(UserContext);
const windowInterval = new Date(point.data.x);
const windowIntervalDate = formatDateISOStringToDateTimeSimplified(
windowInterval,
timeZone,
timeFormat,
);
return (
<StyledTooltipContainer>
<StyledTooltipDateContainer>
{windowIntervalDate}
</StyledTooltipDateContainer>
<StyledLine />
<StyledTooltipDataRow>
<StyledDataDefinition>
<StyledColorPoint color={point.serieColor} />
{String(point.serieId)}
</StyledDataDefinition>
<StyledSpan>{String(point.data.y)}</StyledSpan>
</StyledTooltipDataRow>
</StyledTooltipContainer>
);
};

142
packages/twenty-front/src/modules/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraph.tsx
View File

@ -1,8 +1,13 @@
import { SettingsDevelopersWebhookTooltip } from '@/settings/developers/webhook/components/SettingsDevelopersWebhookTooltip';
import { useGraphData } from '@/settings/developers/webhook/hooks/useGraphData';
import { webhookGraphDataState } from '@/settings/developers/webhook/states/webhookGraphDataState';
import { Select } from '@/ui/input/components/Select';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ResponsiveLine } from '@nivo/line';
import { Section } from '@react-email/components';
import { useRecoilValue } from 'recoil';
import { useState } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { H2Title } from 'twenty-ui';
export type NivoLineInput = {
@ -14,22 +19,102 @@ export type NivoLineInput = {
}>;
};
const StyledGraphContainer = styled.div`
height: 200px;
width: 100%;
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
height: 199px;
padding: ${({ theme }) => theme.spacing(4, 2, 2, 2)};
width: 496px;
`;
export const SettingsDeveloppersWebhookUsageGraph = () => {
const StyledTitleContainer = styled.div`
align-items: flex-start;
display: flex;
justify-content: space-between;
`;
type SettingsDevelopersWebhookUsageGraphProps = {
webhookId: string;
};
export const SettingsDevelopersWebhookUsageGraph = ({
webhookId,
}: SettingsDevelopersWebhookUsageGraphProps) => {
const webhookGraphData = useRecoilValue(webhookGraphDataState);
const setWebhookGraphData = useSetRecoilState(webhookGraphDataState);
const theme = useTheme();
const [windowLengthGraphOption, setWindowLengthGraphOption] = useState<
'7D' | '1D' | '12H' | '4H'
>('7D');
const { fetchGraphData } = useGraphData(webhookId);
return (
<>
{webhookGraphData.length ? (
<Section>
<H2Title title="Statistics" />
<StyledTitleContainer>
<H2Title
title="Activity"
description="See your webhook activity over time"
/>
<Select
dropdownId="test-id-webhook-graph"
value={windowLengthGraphOption}
options={[
{ value: '7D', label: 'This week' },
{ value: '1D', label: 'Today' },
{ value: '12H', label: 'Last 12 hours' },
{ value: '4H', label: 'Last 4 hours' },
]}
onChange={(windowLengthGraphOption) => {
setWindowLengthGraphOption(windowLengthGraphOption);
fetchGraphData(windowLengthGraphOption).then((graphInput) => {
setWebhookGraphData(graphInput);
});
}}
/>
</StyledTitleContainer>
<StyledGraphContainer>
<ResponsiveLine
data={webhookGraphData}
curve={'monotoneX'}
enableArea={true}
colors={(d) => d.color}
margin={{ top: 0, right: 0, bottom: 50, left: 60 }}
theme={{
text: {
fill: theme.font.color.light,
fontSize: theme.font.size.sm,
fontFamily: theme.font.family,
},
axis: {
domain: {
line: {
stroke: theme.border.color.light,
},
},
ticks: {
line: {
stroke: theme.border.color.light,
},
},
},
grid: {
line: {
stroke: theme.border.color.light,
},
},
crosshair: {
line: {
stroke: theme.font.color.light,
strokeDasharray: '2 2',
},
},
}}
margin={{ top: 20, right: 0, bottom: 30, left: 30 }}
xFormat="time:%Y-%m-%d %H:%M%"
xScale={{
type: 'time',
@ -37,17 +122,54 @@ export const SettingsDeveloppersWebhookUsageGraph = () => {
format: '%Y-%m-%d %H:%M:%S',
precision: 'hour',
}}
defs={[
{
colors: [
{
color: 'inherit',
offset: 0,
},
{
color: 'inherit',
offset: 100,
opacity: 0,
},
],
id: 'gradientGraph',
type: 'linearGradient',
},
]}
fill={[
{
id: 'gradientGraph',
match: '*',
},
]}
yScale={{
type: 'linear',
}}
axisBottom={{
tickValues: 'every day',
format: '%b %d',
format: '%b %d, %I:%M %p',
tickValues: 2,
tickPadding: 5,
tickSize: 6,
}}
axisLeft={{
tickPadding: 5,
tickSize: 6,
tickValues: 4,
}}
enableTouchCrosshair={true}
enableGridY={false}
enableGridX={false}
lineWidth={1}
gridYValues={4}
enablePoints={false}
isInteractive={true}
useMesh={true}
enableSlices={false}
enableCrosshair={false}
tooltip={({ point }) => (
<SettingsDevelopersWebhookTooltip point={point} />
)}
/>
</StyledGraphContainer>
</Section>

89
packages/twenty-front/src/modules/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraphEffect.tsx
View File

@ -1,7 +1,5 @@
import { NivoLineInput } from '@/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraph';
import { useGraphData } from '@/settings/developers/webhook/hooks/useGraphData';
import { webhookGraphDataState } from '@/settings/developers/webhook/states/webhookGraphDataState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
@ -14,88 +12,13 @@ export const SettingsDevelopersWebhookUsageGraphEffect = ({
}: SettingsDevelopersWebhookUsageGraphEffectProps) => {
const setWebhookGraphData = useSetRecoilState(webhookGraphDataState);
const { enqueueSnackBar } = useSnackBar();
const { fetchGraphData } = useGraphData(webhookId);
useEffect(() => {
const fetchData = async () => {
try {
const queryString = new URLSearchParams({
webhookIdRequest: webhookId,
}).toString();
const token = 'REPLACE_ME';
const response = await fetch(
`https://api.eu-central-1.aws.tinybird.co/v0/pipes/getWebhooksAnalytics.json?${queryString}`,
{
headers: {
Authorization: 'Bearer ' + token,
},
},
);
const result = await response.json();
fetchGraphData('7D').then((graphInput) => {
setWebhookGraphData(graphInput);
});
}, [fetchGraphData, setWebhookGraphData, webhookId]);
if (!response.ok) {
enqueueSnackBar('Something went wrong while fetching webhook usage', {
variant: SnackBarVariant.Error,
});
return;
}
const graphInput = result.data
.flatMap(
(dataRow: {
start_interval: string;
failure_count: number;
success_count: number;
}) => [
{
x: dataRow.start_interval,
y: dataRow.failure_count,
id: 'failure_count',
color: 'red',
},
{
x: dataRow.start_interval,
y: dataRow.success_count,
id: 'success_count',
color: 'green',
},
],
)
.reduce(
(
acc: NivoLineInput[],
{
id,
x,
y,
color,
}: { id: string; x: string; y: number; color: string },
) => {
const existingGroupIndex = acc.findIndex(
(group) => group.id === id,
);
const isExistingGroup = existingGroupIndex !== -1;
if (isExistingGroup) {
return acc.map((group, index) =>
index === existingGroupIndex
? { ...group, data: [...group.data, { x, y }] }
: group,
);
} else {
return [...acc, { id, color, data: [{ x, y }] }];
}
},
[],
);
setWebhookGraphData(graphInput);
} catch (error) {
enqueueSnackBar('Something went wrong while fetching webhook usage', {
variant: SnackBarVariant.Error,
});
}
};
fetchData();
}, [enqueueSnackBar, setWebhookGraphData, webhookId]);
return <></>;
};

6
packages/twenty-front/src/modules/settings/developers/webhook/constants/WebhookGraphApiOptionsMap.ts Normal file
View File

@ -0,0 +1,6 @@
export const WEBHOOK_GRAPH_API_OPTIONS_MAP = {
'7D': { windowInHours: '168', tickIntervalInMinutes: '420' },
'1D': { windowInHours: '24', tickIntervalInMinutes: '60' },
'12H': { windowInHours: '12', tickIntervalInMinutes: '30' },
'4H': { windowInHours: '4', tickIntervalInMinutes: '10' },
};

23
packages/twenty-front/src/modules/settings/developers/webhook/hooks/useGraphData.tsx Normal file
View File

@ -0,0 +1,23 @@
import { fetchGraphDataOrThrow } from '@/settings/developers/webhook/utils/fetchGraphDataOrThrow';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
export const useGraphData = (webhookId: string) => {
const { enqueueSnackBar } = useSnackBar();
const fetchGraphData = async (
windowLengthGraphOption: '7D' | '1D' | '12H' | '4H',
) => {
try {
return await fetchGraphDataOrThrow({
webhookId,
windowLength: windowLengthGraphOption,
});
} catch (error) {
enqueueSnackBar('Something went wrong while fetching webhook usage', {
variant: SnackBarVariant.Error,
});
return [];
}
};
return { fetchGraphData };
};

115
packages/twenty-front/src/modules/settings/developers/webhook/utils/__tests__/fetchGraphDataOrThrow.test.js Normal file
View File

@ -0,0 +1,115 @@
import { WEBHOOK_GRAPH_API_OPTIONS_MAP } from '@/settings/developers/webhook/constants/WebhookGraphApiOptionsMap';
import { fetchGraphDataOrThrow } from '@/settings/developers/webhook/utils/fetchGraphDataOrThrow';
// Mock the global fetch function
global.fetch = jest.fn();
describe('fetchGraphDataOrThrow', () => {
const mockWebhookId = 'test-webhook-id';
const mockWindowLength = '7D';
beforeEach(() => {
jest.resetAllMocks();
});
it('should fetch and transform data successfully', async () => {
const mockResponse = {
ok: true,
json: jest.fn().mockResolvedValue({
data: [
{ start_interval: '2023-05-01', failure_count: 2, success_count: 8 },
{ start_interval: '2023-05-02', failure_count: 1, success_count: 9 },
],
}),
};
global.fetch.mockResolvedValue(mockResponse);
const result = await fetchGraphDataOrThrow({
webhookId: mockWebhookId,
windowLength: mockWindowLength,
});
expect(global.fetch).toHaveBeenCalledWith(
expect.stringContaining(
`https://api.eu-central-1.aws.tinybird.co/v0/pipes/getWebhooksAnalyticsV2.json?`,
),
expect.objectContaining({
headers: {
Authorization: expect.stringContaining('Bearer '),
},
}),
);
expect(result).toEqual([
{
id: 'Failed',
color: 'red',
data: [
{ x: '2023-05-01', y: 2 },
{ x: '2023-05-02', y: 1 },
],
},
{
id: 'Succeeded',
color: 'blue',
data: [
{ x: '2023-05-01', y: 8 },
{ x: '2023-05-02', y: 9 },
],
},
]);
});
it('should throw an error when the response is not ok', async () => {
const mockResponse = {
ok: false,
json: jest.fn().mockResolvedValue({ error: 'Some error' }),
};
global.fetch.mockResolvedValue(mockResponse);
await expect(
fetchGraphDataOrThrow({
webhookId: mockWebhookId,
windowLength: mockWindowLength,
}),
).rejects.toThrow('Something went wrong while fetching webhook usage');
});
it('should use correct query parameters based on window length', async () => {
const mockResponse = {
ok: true,
json: jest.fn().mockResolvedValue({ data: [] }),
};
global.fetch.mockResolvedValue(mockResponse);
await fetchGraphDataOrThrow({
webhookId: mockWebhookId,
windowLength: '1D',
});
expect(global.fetch).toHaveBeenCalledWith(
expect.stringContaining(
new URLSearchParams({
...WEBHOOK_GRAPH_API_OPTIONS_MAP['1D'],
webhookIdRequest: mockWebhookId,
}).toString(),
),
expect.any(Object),
);
});
it('should handle empty response data', async () => {
const mockResponse = {
ok: true,
json: jest.fn().mockResolvedValue({ data: [] }),
};
global.fetch.mockResolvedValue(mockResponse);
const result = await fetchGraphDataOrThrow({
webhookId: mockWebhookId,
windowLength: mockWindowLength,
});
expect(result).toEqual([]);
});
});

80
packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphDataOrThrow.ts Normal file
View File

@ -0,0 +1,80 @@
import { NivoLineInput } from '@/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraph';
import { WEBHOOK_GRAPH_API_OPTIONS_MAP } from '@/settings/developers/webhook/constants/WebhookGraphApiOptionsMap';
type fetchGraphDataOrThrowProps = {
webhookId: string;
windowLength: '7D' | '1D' | '12H' | '4H';
};
export const fetchGraphDataOrThrow = async ({
webhookId,
windowLength,
}: fetchGraphDataOrThrowProps) => {
const queryString = new URLSearchParams({
...WEBHOOK_GRAPH_API_OPTIONS_MAP[windowLength],
webhookIdRequest: webhookId,
}).toString();
const token = 'REPLACE_ME';
const response = await fetch(
`https://api.eu-central-1.aws.tinybird.co/v0/pipes/getWebhooksAnalyticsV2.json?${queryString}`,
{
headers: {
Authorization: 'Bearer ' + token,
},
},
);
const result = await response.json();
if (!response.ok) {
throw new Error('Something went wrong while fetching webhook usage');
}
// Next steps: separate the map logic to a different component (response.data, {id:str, color:str}[])=>NivoLineInput[]
const graphInput = result.data
.flatMap(
(dataRow: {
start_interval: string;
failure_count: number;
success_count: number;
}) => [
{
x: dataRow.start_interval,
y: dataRow.failure_count,
id: 'Failed',
color: 'red', // need to refacto this
},
{
x: dataRow.start_interval,
y: dataRow.success_count,
id: 'Succeeded',
color: 'blue',
},
],
)
.reduce(
(
acc: NivoLineInput[],
{
id,
x,
y,
color,
}: { id: string; x: string; y: number; color: string },
) => {
const existingGroupIndex = acc.findIndex((group) => group.id === id);
const isExistingGroup = existingGroupIndex !== -1;
if (isExistingGroup) {
return acc.map((group, index) =>
index === existingGroupIndex
? { ...group, data: [...group.data, { x, y }] }
: group,
);
} else {
return [...acc, { id, color, data: [{ x, y }] }];
}
},
[],
);
return graphInput;
};

6
packages/twenty-front/src/modules/users/components/UserProviderEffect.tsx
View File

@ -7,6 +7,8 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadingState';
import { workspacesState } from '@/auth/states/workspaces';
import { DateFormat } from '@/localization/constants/DateFormat';
import { TimeFormat } from '@/localization/constants/TimeFormat';
import { dateTimeFormatState } from '@/localization/states/dateTimeFormatState';
import { detectDateFormat } from '@/localization/utils/detectDateFormat';
import { detectTimeFormat } from '@/localization/utils/detectTimeFormat';
@ -81,10 +83,10 @@ export const UserProviderEffect = () => {
: detectTimeZone(),
dateFormat: isDefined(workspaceMember.dateFormat)
? getDateFormatFromWorkspaceDateFormat(workspaceMember.dateFormat)
: detectDateFormat(),
: DateFormat[detectDateFormat()],
timeFormat: isDefined(workspaceMember.timeFormat)
? getTimeFormatFromWorkspaceTimeFormat(workspaceMember.timeFormat)
: detectTimeFormat(),
: TimeFormat[detectTimeFormat()],
});
}

10
packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx
View File

@ -3,6 +3,7 @@ import { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { H2Title, IconTrash } from 'twenty-ui';
import { isAnalyticsEnabledState } from '@/client-config/states/isAnalyticsEnabledState';
import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
@ -11,7 +12,7 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { Webhook } from '@/settings/developers/types/webhook/Webhook';
import { SettingsDeveloppersWebhookUsageGraph } from '@/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraph';
import { SettingsDevelopersWebhookUsageGraph } from '@/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraph';
import { SettingsDevelopersWebhookUsageGraphEffect } from '@/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraphEffect';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
@ -23,6 +24,7 @@ import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModa
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useRecoilValue } from 'recoil';
const StyledFilterRow = styled.div`
display: flex;
@ -32,6 +34,8 @@ const StyledFilterRow = styled.div`
export const SettingsDevelopersWebhooksDetail = () => {
const { objectMetadataItems } = useObjectMetadataItems();
const isAnalyticsEnabled = useRecoilValue(isAnalyticsEnabledState);
const navigate = useNavigate();
const { webhookId = '' } = useParams();
@ -178,10 +182,10 @@ export const SettingsDevelopersWebhooksDetail = () => {
/>
</StyledFilterRow>
</Section>
{isAnalyticsV2Enabled ? (
{isAnalyticsEnabled && isAnalyticsV2Enabled ? (
<>
<SettingsDevelopersWebhookUsageGraphEffect webhookId={webhookId} />
<SettingsDeveloppersWebhookUsageGraph />
<SettingsDevelopersWebhookUsageGraph webhookId={webhookId} />
</>
) : (
<></>

4
packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettings.tsx
View File

@ -77,7 +77,7 @@ export const DateTimeSettings = () => {
);
dateTime[settingName] =
(value as DateFormat) === DateFormat.SYSTEM
? detectDateFormat()
? DateFormat[detectDateFormat()]
: (value as DateFormat);
break;
}
@ -87,7 +87,7 @@ export const DateTimeSettings = () => {
);
dateTime[settingName] =
(value as TimeFormat) === TimeFormat.SYSTEM
? detectTimeFormat()
? TimeFormat[detectTimeFormat()]
: (value as TimeFormat);
break;
}

2
packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsDateFormatSelect.tsx
View File

@ -20,7 +20,7 @@ export const DateTimeSettingsDateFormatSelect = ({
const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
const systemDateFormat = detectDateFormat();
const systemDateFormat = DateFormat[detectDateFormat()];
return (
<Select

2
packages/twenty-front/src/pages/settings/profile/appearance/components/DateTimeSettingsTimeFormatSelect.tsx
View File

@ -20,7 +20,7 @@ export const DateTimeSettingsTimeFormatSelect = ({
const usedTimeZone = timeZone === 'system' ? systemTimeZone : timeZone;
const systemTimeFormat = detectTimeFormat();
const systemTimeFormat = TimeFormat[detectTimeFormat()];
return (
<Select

3
packages/twenty-server/src/engine/core-modules/client-config/client-config.entity.ts
View File

@ -88,6 +88,9 @@ export class ClientConfig {
@Field(() => Boolean)
debugMode: boolean;
@Field(() => Boolean)
analyticsEnabled: boolean;
@Field(() => Support)
support: Support;

1
packages/twenty-server/src/engine/core-modules/client-config/client-config.resolver.ts
View File

@ -48,6 +48,7 @@ export class ClientConfigResolver {
'MUTATION_MAXIMUM_AFFECTED_RECORDS',
),
},
analyticsEnabled: this.environmentService.get('ANALYTICS_ENABLED'),
};
return Promise.resolve(clientConfig);