refactor webhookAnalytics call and enrich analytics module (#8253)

**TLDR**

Refactor WebhoonAnalytics Graph to a more abstract version
AnalyticsGraph (in analytics module). Thus enabling the components to be
used on different instances (ex: new endpoint, new kind of graph).

**In order to test:**

1. Set ANALYTICS_ENABLED to true
2. Set TINYBIRD_JWT_TOKEN to the ADMIN token from the workspace
twenty_analytics_playground
3. Set TINYBIRD_JWT_TOKEN to the datasource or your admin token from the
workspace twenty_analytics_playground
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.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionMonitoringTab.tsx

@@ -0,0 +1,75 @@
+import { AnalyticsActivityGraph } from '@/analytics/components/AnalyticsActivityGraph';
+import { AnalyticsGraphEffect } from '@/analytics/components/AnalyticsGraphEffect';
+import { AnalyticsGraphDataInstanceContext } from '@/analytics/states/contexts/AnalyticsGraphDataInstanceContext';
+import { SettingsServerlessFunctionHotkeyScope } from '@/settings/serverless-functions/types/SettingsServerlessFunctionHotKeyScope';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useNavigate } from 'react-router-dom';
+import { Key } from 'ts-key-enum';
+import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
+
+export const SettingsServerlessFunctionMonitoringTab = ({
+  serverlessFunctionId,
+}: {
+  serverlessFunctionId: string;
+}) => {
+  const navigate = useNavigate();
+
+  useHotkeyScopeOnMount(
+    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
+  );
+
+  useScopedHotkeys(
+    [Key.Escape],
+    () => {
+      navigate(getSettingsPagePath(SettingsPath.ServerlessFunctions));
+    },
+    SettingsServerlessFunctionHotkeyScope.ServerlessFunctionSettingsTab,
+  );
+
+  return (
+    <>
+      <AnalyticsGraphDataInstanceContext.Provider
+        value={{
+          instanceId: `function-${serverlessFunctionId}-errorCount`,
+        }}
+      >
+        <AnalyticsGraphEffect
+          recordId={serverlessFunctionId}
+          endpointName="getServerlessFunctionErrorCount"
+        />
+        <AnalyticsActivityGraph
+          recordId={serverlessFunctionId}
+          endpointName="getServerlessFunctionErrorCount"
+        />
+      </AnalyticsGraphDataInstanceContext.Provider>
+
+      <AnalyticsGraphDataInstanceContext.Provider
+        value={{ instanceId: `function-${serverlessFunctionId}-duration` }}
+      >
+        <AnalyticsGraphEffect
+          recordId={serverlessFunctionId}
+          endpointName="getServerlessFunctionDuration"
+        />
+        <AnalyticsActivityGraph
+          recordId={serverlessFunctionId}
+          endpointName="getServerlessFunctionDuration"
+        />
+      </AnalyticsGraphDataInstanceContext.Provider>
+
+      <AnalyticsGraphDataInstanceContext.Provider
+        value={{ instanceId: `function-${serverlessFunctionId}-successRate` }}
+      >
+        <AnalyticsGraphEffect
+          recordId={serverlessFunctionId}
+          endpointName="getServerlessFunctionSuccessRate"
+        />
+        <AnalyticsActivityGraph
+          recordId={serverlessFunctionId}
+          endpointName="getServerlessFunctionSuccessRate"
+        />
+      </AnalyticsGraphDataInstanceContext.Provider>
+    </>
+  );
+};