add dynamic dates for webhookGraphDataUsage #7720

anamarn · 2024-10-15T15:21:01Z

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

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 .

In order to test

Set ANALYTICS_ENABLED to true
Set TINYBIRD_TOKEN to your token from the workspace twenty_analytics_playground
Write your client tinybird token in SettingsDeveloppersWebhookDetail.tsx in line 93
Create a Webhook in twenty and set wich events it needs to track
Run twenty-worker in order to make the webhooks work.
Do your tasks in order to populate the data
Enter to settings> webhook>your webhook and the statistics section should be displayed.
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

packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphData.ts

greptile-apps

PR Summary

This pull request adds dynamic date selection for the webhook usage graph in the Developers Settings, enhancing the visualization of webhook activity over time.

Introduced SettingsDevelopersWebhookUsageGraph component with a time range selector for 7 days, 1 day, 12 hours, and 4 hours views
Added WEBHOOK_GRAPH_API_OPTIONS_MAP in /constants/WebhookGraphApiOptionsMap.ts to define time intervals and tick sizes for different ranges
Created fetchGraphData function in /utils/fetchGraphData.ts to retrieve and transform webhook usage data for selected time ranges
Implemented SettingsDevelopersWebhookTooltip component in /components/SettingsDeveloperSliceTooltip.tsx for displaying detailed information on data points
Updated SettingsDevelopersWebhookDetail component to integrate new graph features and time range selection

_{7 file(s) reviewed, 13 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-10-15T15:21:49Z

...y-front/src/modules/settings/developers/webhook/components/SettingsDeveloperSliceTooltip.tsx

+  point,
+}: any): ReactElement => {


style: Consider defining a proper type for the 'point' prop instead of using 'any'

I agree with greptile, you should shouldn't use any here :)

greptile-apps · 2024-10-15T15:21:49Z

...y-front/src/modules/settings/developers/webhook/components/SettingsDeveloperSliceTooltip.tsx

+  return (
+    <StyledTooltipContainer>
+      <StyledTooltipDateContainer>
+        {format(newDate, 'MMM d · HH:mm')}


style: Use a consistent date format across the application. Consider using a constant for the date format string

Agree with Greptile again, maybe rely on existing formatting options? or add a new helper similar to formatToHumanReadableTime, etc.

...y-front/src/modules/settings/developers/webhook/components/SettingsDeveloperSliceTooltip.tsx

greptile-apps · 2024-10-15T15:22:18Z

...t/src/modules/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraph.tsx

@@ -1,8 +1,14 @@
+import { SettingsDevelopersWebhookTooltip } from '@/settings/developers/webhook/components/SettingsDevelopersliceTooltip';


syntax: SettingsDevelopersliceTooltip is misspelled

Agree with greptile, the filename should match the component

greptile-apps · 2024-10-15T15:22:45Z

...modules/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraphEffect.tsx

-          });
-          return;
-        }
+    //   try {


style: Remove commented-out code before merging

greptile-apps · 2024-10-15T15:22:45Z

...modules/settings/developers/webhook/components/SettingsDevelopersWebhookUsageGraphEffect.tsx

+    //     });
+    //   }
+    // };
+    // fetchData();
  }, [enqueueSnackBar, setWebhookGraphData, webhookId]);


logic: Ensure fetchGraphData is included in the dependency array if it's defined outside this component

greptile-apps · 2024-10-15T15:23:08Z

.../twenty-front/src/modules/settings/developers/webhook/constants/WebhookGraphApiOptionsMap.ts

@@ -0,0 +1,6 @@
+export const WEBHOOK_GRAPH_API_OPTIONS_MAP = {
+  '7D': { startIntervalHours: '168', tickSizeMinutes: '420' },


logic: 420 minutes is 7 hours, which seems like an unusual tick size for a 7-day view

greptile-apps · 2024-10-15T15:23:33Z

...ages/twenty-front/src/modules/settings/developers/webhook/states/webhookGraphOptionsState.ts

@@ -0,0 +1,8 @@
+import { createState } from 'twenty-ui';
+
+export type WebhookGraphOptions = '7D' | '1D' | '12H' | '4H';


style: consider adding a more descriptive type name, such as 'WebhookGraphTimeRange'

greptile-apps · 2024-10-15T15:23:59Z

packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphData.ts

+    }
+    // Next steps: separate the map logic to a different component (response.data, {id:str, color:str}[])=>NivoLineInput[]
+
+    const graphInput = result.data


style: Complex data transformation. Consider breaking this into smaller, more manageable functions

FelixMalfait · 2024-10-15T16:44:10Z

.../twenty-front/src/modules/settings/developers/webhook/constants/WebhookGraphApiOptionsMap.ts

@@ -0,0 +1,6 @@
+export const WEBHOOK_GRAPH_API_OPTIONS_MAP = {
+  '7D': { startIntervalHours: '168', tickSizeMinutes: '420' },


Maybe we could rename startIntervalHours? It wasn't very clear for me
windowInHours ; tickIntervalInMinutes ?

FelixMalfait · 2024-10-15T16:49:51Z

packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphData.ts

+
+export const fetchGraphData = async ({
+  webhookId,
+  enqueueSnackBar,


It feels a bit strange to pass enqueueSnackBar to a util. Maybe just throw errors here and put your try catch at a high level? You can create a dedicated hook probably?

FelixMalfait · 2024-10-15T16:51:37Z

packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphData.ts

+import { WEBHOOK_GRAPH_API_OPTIONS_MAP } from '@/settings/developers/webhook/constants/WebhookGraphAPIOptionsMap';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+
+type fetchGraphDataProps = {


feels a bit strange to have webhookId and webhookOptions = 7D... next to another. WebhookOptions feels very generic so I would have expected an object.
Maybe you can just rename that param to windowLength or something like that?

packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphDataOrThrow.ts

FelixMalfait

Great!

FelixMalfait

Great!

github-actions · 2024-10-18T09:01:11Z

	Fails
🚫	`node` failed.

Log

�[31mError: �[39m RequestError [HttpError]: You have exceeded a secondary rate limit. Please wait a few minutes before you try again. If you reach out to GitHub Support for help, please include the request ID 7FC7:1484C5:640BB:C349F:671223D6.
    at /home/runner/work/twenty/twenty/node_modules/�[4m@octokit�[24m/request/dist-node/index.js:86:21
�[90m    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)�[39m {
  status: �[33m403�[39m,
  response: {
    url: �[32m'https://api.github.com/search/issues?q=is%3Apr%20author%3Aanamarn%20is%3Aclosed%20repo%3Atwentyhq%2Ftwenty&per_page=2&page=1'�[39m,
    status: �[33m403�[39m,
    headers: {
      �[32m'access-control-allow-origin'�[39m: �[32m'*'�[39m,
      �[32m'access-control-expose-headers'�[39m: �[32m'ETag, Link, Location, Retry-After, X-GitHub-OTP, X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Used, X-RateLimit-Resource, X-RateLimit-Reset, X-OAuth-Scopes, X-Accepted-OAuth-Scopes, X-Poll-Interval, X-GitHub-Media-Type, X-GitHub-SSO, X-GitHub-Request-Id, Deprecation, Sunset'�[39m,
      connection: �[32m'close'�[39m,
      �[32m'content-encoding'�[39m: �[32m'gzip'�[39m,
      �[32m'content-security-policy'�[39m: �[32m"default-src 'none'"�[39m,
      �[32m'content-type'�[39m: �[32m'application/json; charset=utf-8'�[39m,
      date: �[32m'Fri, 18 Oct 2024 09:01:10 GMT'�[39m,
      �[32m'referrer-policy'�[39m: �[32m'origin-when-cross-origin, strict-origin-when-cross-origin'�[39m,
      server: �[32m'github.com'�[39m,
      �[32m'strict-transport-security'�[39m: �[32m'max-age=31536000; includeSubdomains; preload'�[39m,
      �[32m'transfer-encoding'�[39m: �[32m'chunked'�[39m,
      vary: �[32m'Accept-Encoding, Accept, X-Requested-With'�[39m,
      �[32m'x-content-type-options'�[39m: �[32m'nosniff'�[39m,
      �[32m'x-frame-options'�[39m: �[32m'deny'�[39m,
      �[32m'x-github-api-version-selected'�[39m: �[32m'2022-11-28'�[39m,
      �[32m'x-github-media-type'�[39m: �[32m'github.v3; format=json'�[39m,
      �[32m'x-github-request-id'�[39m: �[32m'7FC7:1484C5:640BB:C349F:671223D6'�[39m,
      �[32m'x-ratelimit-limit'�[39m: �[32m'30'�[39m,
      �[32m'x-ratelimit-remaining'�[39m: �[32m'30'�[39m,
      �[32m'x-ratelimit-reset'�[39m: �[32m'1729242130'�[39m,
      �[32m'x-ratelimit-resource'�[39m: �[32m'search'�[39m,
      �[32m'x-ratelimit-used'�[39m: �[32m'1'�[39m,
      �[32m'x-xss-protection'�[39m: �[32m'0'�[39m
    },
    data: {
      documentation_url: �[32m'https://docs.github.com/free-pro-team@latest/rest/overview/rate-limits-for-the-rest-api#about-secondary-rate-limits'�[39m,
      message: �[32m'You have exceeded a secondary rate limit. Please wait a few minutes before you try again. If you reach out to GitHub Support for help, please include the request ID 7FC7:1484C5:640BB:C349F:671223D6.'�[39m
    }
  },
  request: {
    method: �[32m'GET'�[39m,
    url: �[32m'https://api.github.com/search/issues?q=is%3Apr%20author%3Aanamarn%20is%3Aclosed%20repo%3Atwentyhq%2Ftwenty&per_page=2&page=1'�[39m,
    headers: {
      accept: �[32m'application/vnd.github.v3+json'�[39m,
      �[32m'user-agent'�[39m: �[32m'octokit-rest.js/18.12.0 octokit-core.js/3.6.0 Node.js/18.20.4 (linux; x64)'�[39m,
      authorization: �[32m'token [REDACTED]'�[39m
    },
    request: { hook: �[36m[Function: bound bound register]�[39m }
  }
}
danger-results://tmp/danger-results-6b76929e.json

Generated by 🚫 dangerJS against e4eb06c

add dynamic dates for webhookGraphDataUsage

c7aa270

anamarn added the -PR: awaiting review label Oct 15, 2024

anamarn requested a review from FelixMalfait October 15, 2024 15:22

github-advanced-security bot found potential problems Oct 15, 2024

View reviewed changes

packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphData.ts Fixed Show fixed Hide fixed

greptile-apps bot reviewed Oct 15, 2024

View reviewed changes

clean unused code and comments

d5bf442

FelixMalfait reviewed Oct 15, 2024

View reviewed changes

add custom hook and correct comments

64757f7

github-advanced-security bot found potential problems Oct 16, 2024

View reviewed changes

packages/twenty-front/src/modules/settings/developers/webhook/utils/fetchGraphDataOrThrow.ts Dismissed Show dismissed Hide dismissed

anamarn added 3 commits October 17, 2024 14:01

Merge branch 'main' into feat/webhooks-graph-v2

bd25f57

correct dateFormat and client config

f12dd40

set AnalyticsEnabled to false

a5d3d69

FelixMalfait approved these changes Oct 17, 2024

View reviewed changes

anamarn mentioned this pull request Oct 18, 2024

Webhooks not working #7751

Closed

anamarn added 2 commits October 18, 2024 10:47

add analytics user context and format day simplified

e3ef11e

set analytics to false in env

e4eb06c

FelixMalfait approved these changes Oct 18, 2024

View reviewed changes

FelixMalfait merged commit 8cadcdf into main Oct 18, 2024
13 checks passed

FelixMalfait deleted the feat/webhooks-graph-v2 branch October 18, 2024 09:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add dynamic dates for webhookGraphDataUsage #7720

add dynamic dates for webhookGraphDataUsage #7720

anamarn commented Oct 15, 2024

greptile-apps bot left a comment

greptile-apps bot Oct 15, 2024

FelixMalfait Oct 15, 2024

greptile-apps bot Oct 15, 2024

FelixMalfait Oct 15, 2024

greptile-apps bot Oct 15, 2024

FelixMalfait Oct 15, 2024

greptile-apps bot Oct 15, 2024

greptile-apps bot Oct 15, 2024

greptile-apps bot Oct 15, 2024

greptile-apps bot Oct 15, 2024

greptile-apps bot Oct 15, 2024

FelixMalfait Oct 15, 2024

FelixMalfait Oct 15, 2024

FelixMalfait Oct 15, 2024

FelixMalfait left a comment

FelixMalfait left a comment

github-actions bot commented Oct 18, 2024

		@@ -1,8 +1,14 @@
		import { SettingsDevelopersWebhookTooltip } from '@/settings/developers/webhook/components/SettingsDevelopersliceTooltip';

		@@ -0,0 +1,6 @@
		export const WEBHOOK_GRAPH_API_OPTIONS_MAP = {
		'7D': { startIntervalHours: '168', tickSizeMinutes: '420' },

		@@ -0,0 +1,8 @@
		import { createState } from 'twenty-ui';

		export type WebhookGraphOptions = '7D' \| '1D' \| '12H' \| '4H';

add dynamic dates for webhookGraphDataUsage #7720

add dynamic dates for webhookGraphDataUsage #7720

Conversation

anamarn commented Oct 15, 2024

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot Oct 15, 2024

Choose a reason for hiding this comment

FelixMalfait Oct 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 15, 2024

Choose a reason for hiding this comment

FelixMalfait Oct 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 15, 2024

Choose a reason for hiding this comment

FelixMalfait Oct 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 15, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 15, 2024

Choose a reason for hiding this comment

FelixMalfait Oct 15, 2024

Choose a reason for hiding this comment

FelixMalfait Oct 15, 2024

Choose a reason for hiding this comment

FelixMalfait Oct 15, 2024

Choose a reason for hiding this comment

FelixMalfait left a comment

Choose a reason for hiding this comment

FelixMalfait left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 18, 2024

Log