18cfe79b80
Solves https://github.com/twentyhq/private-issues/issues/118 **TLDR** Fix webhook response not sending data to tinybird when the url is not a link. **Changes in Tinybird:** - Add column Success to webhook payload (boolean) - Changed the parameter WebhookIdRequest to WebhookId in the getWebhooksResponse api point. - Those changes can be seen in the tinybird workspace twenty_analytics_playground **In order to test** 1. Set ANALYTICS_ENABLED to true 2. Set TINYBIRD_INGEST_TOKEN to your token from the workspace twenty_analytics_playground 3. Set TINYBIRD_GENERATE_JWT_TOKEN to the admin kwt token from the workspace twenty_analytics_playground 4. Set TINYBIRD_WORKSPACE_UUID to the UUID of twenty_analytics_playground 5. Create a Webhook in twenty and set wich events it needs to track 6. Run twenty-worker in order to make the webhooks work. 7. Do your tasks in order to populate the data 8. Look at your webhooks in settings>api and webhooks> your webhook and the statistics should be displayed
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
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';
|
|
tinybirdJwt: string;
|
|
};
|
|
|
|
export const fetchGraphDataOrThrow = async ({
|
|
webhookId,
|
|
windowLength,
|
|
tinybirdJwt,
|
|
}: fetchGraphDataOrThrowProps) => {
|
|
const queryString = new URLSearchParams({
|
|
...WEBHOOK_GRAPH_API_OPTIONS_MAP[windowLength],
|
|
webhookId,
|
|
}).toString();
|
|
|
|
const response = await fetch(
|
|
`https://api.eu-central-1.aws.tinybird.co/v0/pipes/getWebhooksAnalyticsV2.json?${queryString}`,
|
|
{
|
|
headers: {
|
|
Authorization: 'Bearer ' + tinybirdJwt,
|
|
},
|
|
},
|
|
);
|
|
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;
|
|
};
|