Add webhook calls ui

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/__generated__/core/WebhooksSettingsPageQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<ddaaa2d60cc045e841daaa3be6428cf2>>
+ * @generated SignedSource<<cc57c5db0d6374e4941bb0d4f1fb73c2>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -20,6 +20,9 @@ export type WebhooksSettingsPageQuery$data = {
     readonly webhookConfigurations: {
       readonly edges: ReadonlyArray<{
         readonly node: {
+          readonly calls: {
+            readonly totalCount: number;
+          };
           readonly endpointUrl: string;
           readonly id: string;
           readonly selectedEvents: ReadonlyArray<WebhookEventType>;
@@ -98,6 +101,30 @@ v4 = [
             "name": "selectedEvents",
             "storageKey": null
           },
+          {
+            "alias": null,
+            "args": [
+              {
+                "kind": "Literal",
+                "name": "first",
+                "value": 0
+              }
+            ],
+            "concreteType": "WebhookCallConnection",
+            "kind": "LinkedField",
+            "name": "calls",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "totalCount",
+                "storageKey": null
+              }
+            ],
+            "storageKey": "calls(first:0)"
+          },
           (v2/*: any*/)
         ],
         "storageKey": null
@@ -238,7 +265,7 @@ return {
     ]
   },
   "params": {
-    "cacheID": "e6aa5c6b8142b654e2a3b7bebec59f83",
+    "cacheID": "97b7c454586fe958e456fa7929b46686",
     "id": null,
     "metadata": {
       "connection": [
@@ -255,11 +282,11 @@ return {
     },
     "name": "WebhooksSettingsPageQuery",
     "operationKind": "query",
-    "text": "query WebhooksSettingsPageQuery(\n  $organizationId: ID!\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    ... on Organization {\n      id\n      webhookConfigurations(first: 50) {\n        edges {\n          node {\n            id\n            endpointUrl\n            selectedEvents\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n    id\n  }\n}\n"
+    "text": "query WebhooksSettingsPageQuery(\n  $organizationId: ID!\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    ... on Organization {\n      id\n      webhookConfigurations(first: 50) {\n        edges {\n          node {\n            id\n            endpointUrl\n            selectedEvents\n            calls(first: 0) {\n              totalCount\n            }\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n    id\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "2a68dcb3a875a982b7d8300aa72c012b";
+(node as any).hash = "58012f55644dae31fe5e18c2c1e193a7";
 
 export default node;

apps/console/src/__generated__/core/WebhooksSettingsPage_callsQuery.graphql.ts

@@ -0,0 +1,257 @@
+/**
+ * @generated SignedSource<<c53381e72c0d17cff70568af0bbbb6e5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type WebhookCallStatus = "FAILED" | "SUCCEEDED";
+export type WebhooksSettingsPage_callsQuery$variables = {
+  after?: string | null | undefined;
+  first?: number | null | undefined;
+  webhookConfigurationId: string;
+};
+export type WebhooksSettingsPage_callsQuery$data = {
+  readonly node: {
+    readonly calls?: {
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly createdAt: string;
+          readonly endpointUrl: string;
+          readonly id: string;
+          readonly response: string | null | undefined;
+          readonly status: WebhookCallStatus;
+        };
+      }>;
+      readonly pageInfo: {
+        readonly endCursor: string | null | undefined;
+        readonly hasNextPage: boolean;
+      };
+      readonly totalCount: number;
+    };
+  };
+};
+export type WebhooksSettingsPage_callsQuery = {
+  response: WebhooksSettingsPage_callsQuery$data;
+  variables: WebhooksSettingsPage_callsQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "after"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "first"
+},
+v2 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "webhookConfigurationId"
+},
+v3 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "webhookConfigurationId"
+  }
+],
+v4 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v5 = {
+  "kind": "InlineFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": [
+        {
+          "kind": "Variable",
+          "name": "after",
+          "variableName": "after"
+        },
+        {
+          "kind": "Variable",
+          "name": "first",
+          "variableName": "first"
+        }
+      ],
+      "concreteType": "WebhookCallConnection",
+      "kind": "LinkedField",
+      "name": "calls",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "totalCount",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "PageInfo",
+          "kind": "LinkedField",
+          "name": "pageInfo",
+          "plural": false,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "hasNextPage",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "endCursor",
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "WebhookCallEdge",
+          "kind": "LinkedField",
+          "name": "edges",
+          "plural": true,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "concreteType": "WebhookCall",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [
+                (v4/*: any*/),
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "status",
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "endpointUrl",
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "createdAt",
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "response",
+                  "storageKey": null
+                }
+              ],
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "type": "WebhookConfiguration",
+  "abstractKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/),
+      (v2/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "WebhooksSettingsPage_callsQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v3/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v5/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v2/*: any*/),
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "WebhooksSettingsPage_callsQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v3/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v5/*: any*/),
+          (v4/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "9371a8918daebbb2a660b02649ba0241",
+    "id": null,
+    "metadata": {},
+    "name": "WebhooksSettingsPage_callsQuery",
+    "operationKind": "query",
+    "text": "query WebhooksSettingsPage_callsQuery(\n  $webhookConfigurationId: ID!\n  $first: Int\n  $after: CursorKey\n) {\n  node(id: $webhookConfigurationId) {\n    __typename\n    ... on WebhookConfiguration {\n      calls(first: $first, after: $after) {\n        totalCount\n        pageInfo {\n          hasNextPage\n          endCursor\n        }\n        edges {\n          node {\n            id\n            status\n            endpointUrl\n            createdAt\n            response\n          }\n        }\n      }\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "de18874117b6272fdf2e22871adc4a5d";
+
+export default node;

apps/console/src/pages/organizations/settings/WebhooksSettingsPage.tsx

@@ -1,5 +1,6 @@
 import { useTranslate } from "@probo/i18n";
 import {
+  Badge,
   Button,
   Card,
   Checkbox,
@@ -17,11 +18,12 @@ import {
   useDialogRef,
   useToast,
 } from "@probo/ui";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { type PreloadedQuery, usePreloadedQuery, useRelayEnvironment } from "react-relay";
 import { ConnectionHandler, fetchQuery, graphql } from "relay-runtime";
 import { z } from "zod";
 
+import type { WebhooksSettingsPage_callsQuery } from "#/__generated__/core/WebhooksSettingsPage_callsQuery.graphql";
 import type { WebhooksSettingsPage_createMutation } from "#/__generated__/core/WebhooksSettingsPage_createMutation.graphql";
 import type { WebhooksSettingsPage_deleteMutation } from "#/__generated__/core/WebhooksSettingsPage_deleteMutation.graphql";
 import type { WebhooksSettingsPage_signingSecretQuery } from "#/__generated__/core/WebhooksSettingsPage_signingSecretQuery.graphql";
@@ -43,6 +45,9 @@ export const webhooksSettingsPageQuery = graphql`
               id
               endpointUrl
               selectedEvents
+              calls(first: 0) {
+                totalCount
+              }
             }
           }
         }
@@ -93,6 +98,35 @@ const signingSecretQuery = graphql`
   }
 `;
 
+const webhookCallsQuery = graphql`
+  query WebhooksSettingsPage_callsQuery(
+    $webhookConfigurationId: ID!
+    $first: Int
+    $after: CursorKey
+  ) {
+    node(id: $webhookConfigurationId) {
+      ... on WebhookConfiguration {
+        calls(first: $first, after: $after) {
+          totalCount
+          pageInfo {
+            hasNextPage
+            endCursor
+          }
+          edges {
+            node {
+              id
+              status
+              endpointUrl
+              createdAt
+              response
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
 const deleteWebhookConfigurationMutation = graphql`
   mutation WebhooksSettingsPage_deleteMutation(
     $input: DeleteWebhookConfigurationInput!
@@ -251,6 +285,151 @@ function WebhookFormDialog({
   );
 }
 
+function CallStatusBadge({ status }: { status: string }) {
+  const { __ } = useTranslate();
+  if (status === "SUCCEEDED") {
+    return <Badge variant="success" size="sm">{__("Succeeded")}</Badge>;
+  }
+  return <Badge variant="danger" size="sm">{__("Failed")}</Badge>;
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleString();
+}
+
+function WebhookCallsDialog({
+  webhookConfigurationId,
+  endpointUrl,
+  onClose,
+}: {
+  webhookConfigurationId: string;
+  endpointUrl: string;
+  onClose: () => void;
+}) {
+  const { __ } = useTranslate();
+  const environment = useRelayEnvironment();
+  const dialogRef = useDialogRef();
+  type CallNode = NonNullable<WebhooksSettingsPage_callsQuery["response"]["node"]["calls"]>["edges"][number]["node"];
+  const [calls, setCalls] = useState<CallNode[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [endCursor, setEndCursor] = useState<string | null>(null);
+  const [totalCount, setTotalCount] = useState(0);
+
+  const PAGE_SIZE = 20;
+
+  const loadCalls = useCallback(
+    async (after?: string | null) => {
+      setLoading(true);
+      try {
+        const data = await fetchQuery<WebhooksSettingsPage_callsQuery>(
+          environment,
+          webhookCallsQuery,
+          {
+            webhookConfigurationId,
+            first: PAGE_SIZE,
+            after: after ?? null,
+          },
+        ).toPromise();
+
+        const connection = data?.node?.calls;
+        if (connection) {
+          const newCalls = connection.edges.map(e => e.node);
+          setCalls(prev => after ? [...prev, ...newCalls] : newCalls);
+          setHasNextPage(connection.pageInfo.hasNextPage);
+          setEndCursor(connection.pageInfo.endCursor ?? null);
+          setTotalCount(connection.totalCount);
+        }
+      } finally {
+        setLoading(false);
+      }
+    },
+    [environment, webhookConfigurationId],
+  );
+
+  useEffect(() => {
+    void loadCalls();
+    dialogRef.current?.open();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <Dialog
+      ref={dialogRef}
+      title={__("Webhook Calls")}
+      className="max-w-2xl"
+      onClose={onClose}
+    >
+      <DialogContent padded>
+        <p className="text-sm text-txt-secondary mb-4">
+          {endpointUrl}
+          {totalCount > 0 && (
+            <span className="text-txt-tertiary ml-2">
+              {`(${totalCount} ${__("total")})`}
+            </span>
+          )}
+        </p>
+        {calls.length === 0 && !loading
+          ? (
+              <p className="text-sm text-txt-tertiary text-center py-8">
+                {__("No webhook calls recorded yet.")}
+              </p>
+            )
+          : (
+              <div className="space-y-2">
+                {calls.map(call => (
+                  <div
+                    key={call.id}
+                    className="border border-border-solid rounded-md p-3 space-y-1"
+                  >
+                    <div className="flex items-center justify-between">
+                      <CallStatusBadge status={call.status} />
+                      <span className="text-xs text-txt-tertiary">
+                        {formatDate(call.createdAt)}
+                      </span>
+                    </div>
+                    <p className="text-xs font-mono text-txt-secondary truncate">
+                      {call.endpointUrl}
+                    </p>
+                    {call.response && (
+                      <details className="text-xs">
+                        <summary className="cursor-pointer text-txt-link hover:underline">
+                          {__("Response")}
+                        </summary>
+                        <pre className="mt-1 bg-subtle p-2 rounded text-xs overflow-auto max-h-48 whitespace-pre-wrap break-all">
+                          {(() => {
+                            try {
+                              return JSON.stringify(JSON.parse(call.response), null, 2);
+                            } catch {
+                              return call.response;
+                            }
+                          })()}
+                        </pre>
+                      </details>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+        {loading && (
+          <div className="flex justify-center py-4">
+            <Spinner size={20} />
+          </div>
+        )}
+      </DialogContent>
+      {hasNextPage && !loading && (
+        <DialogFooter>
+          <Button
+            variant="secondary"
+            onClick={() => void loadCalls(endCursor)}
+          >
+            {__("Load more")}
+          </Button>
+        </DialogFooter>
+      )}
+    </Dialog>
+  );
+}
+
 export function WebhooksSettingsPage(props: {
   queryRef: PreloadedQuery<WebhooksSettingsPageQuery>;
 }) {
@@ -262,6 +441,7 @@ export function WebhooksSettingsPage(props: {
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [revealedSecrets, setRevealedSecrets] = useState<Record<string, string>>({});
   const [loadingSecrets, setLoadingSecrets] = useState<Set<string>>(new Set());
+  const [viewingCallsId, setViewingCallsId] = useState<string | null>(null);
 
   const fetchSigningSecret = useCallback(
     async (webhookConfigurationId: string): Promise<string | null> => {
@@ -501,6 +681,12 @@ export function WebhooksSettingsPage(props: {
                       </div>
                     </div>
                     <div className="flex items-center gap-1 shrink-0">
+                      <Button
+                        variant="secondary"
+                        onClick={() => setViewingCallsId(webhook.id)}
+                      >
+                        {`${__("Calls")} (${webhook.calls.totalCount})`}
+                      </Button>
                       <WebhookFormDialog
                         mode="edit"
                         initialValues={{
@@ -562,6 +748,18 @@ export function WebhooksSettingsPage(props: {
           </Button>
         </DialogFooter>
       </Dialog>
+
+      {viewingCallsId && (() => {
+        const webhook = webhooks.find(e => e.node.id === viewingCallsId);
+        if (!webhook) return null;
+        return (
+          <WebhookCallsDialog
+            webhookConfigurationId={viewingCallsId}
+            endpointUrl={webhook.node.endpointUrl}
+            onClose={() => setViewingCallsId(null)}
+          />
+        );
+      })()}
     </div>
   );
 }

pkg/coredata/webhook_call.go

@@ -18,11 +18,13 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"maps"
 	"time"
 
 	"github.com/jackc/pgx/v5"
 	"go.gearno.de/kit/pg"
 	"go.probo.inc/probo/pkg/gid"
+	"go.probo.inc/probo/pkg/page"
 )
 
 type (
@@ -39,6 +41,83 @@ type (
 	WebhookCalls []*WebhookCall
 )
 
+func (w WebhookCall) CursorKey(orderBy WebhookCallOrderField) page.CursorKey {
+	switch orderBy {
+	case WebhookCallOrderFieldCreatedAt:
+		return page.NewCursorKey(w.ID, w.CreatedAt)
+	}
+
+	panic(fmt.Sprintf("unsupported order by: %s", orderBy))
+}
+
+func (w *WebhookCalls) LoadByConfigurationID(
+	ctx context.Context,
+	conn pg.Conn,
+	scope Scoper,
+	webhookConfigurationID gid.GID,
+	cursor *page.Cursor[WebhookCallOrderField],
+) error {
+	q := `
+SELECT
+    id,
+    webhook_event_id,
+    webhook_configuration_id,
+    endpoint_url,
+    status,
+    response,
+    created_at
+FROM
+    webhook_calls
+WHERE
+    %s
+    AND webhook_configuration_id = @webhook_configuration_id
+    AND %s
+`
+	q = fmt.Sprintf(q, scope.SQLFragment(), cursor.SQLFragment())
+
+	args := pgx.NamedArgs{"webhook_configuration_id": webhookConfigurationID}
+	maps.Copy(args, scope.SQLArguments())
+	maps.Copy(args, cursor.SQLArguments())
+
+	rows, err := conn.Query(ctx, q, args)
+	if err != nil {
+		return fmt.Errorf("cannot query webhook calls: %w", err)
+	}
+
+	calls, err := pgx.CollectRows(rows, pgx.RowToAddrOfStructByName[WebhookCall])
+	if err != nil {
+		return fmt.Errorf("cannot collect webhook calls: %w", err)
+	}
+
+	*w = calls
+	return nil
+}
+
+func (w *WebhookCalls) CountByConfigurationID(
+	ctx context.Context,
+	conn pg.Conn,
+	scope Scoper,
+	webhookConfigurationID gid.GID,
+) (int, error) {
+	q := `
+SELECT COUNT(*)
+FROM webhook_calls
+WHERE %s
+    AND webhook_configuration_id = @webhook_configuration_id
+`
+	q = fmt.Sprintf(q, scope.SQLFragment())
+
+	args := pgx.StrictNamedArgs{"webhook_configuration_id": webhookConfigurationID}
+	maps.Copy(args, scope.SQLArguments())
+
+	var count int
+	if err := conn.QueryRow(ctx, q, args).Scan(&count); err != nil {
+		return 0, fmt.Errorf("cannot count webhook calls: %w", err)
+	}
+
+	return count, nil
+}
+
 func (w *WebhookCall) Insert(
 	ctx context.Context,
 	conn pg.Conn,

pkg/coredata/webhook_call_order_field.go

@@ -0,0 +1,55 @@
+// Copyright (c) 2025 Probo Inc <hello@getprobo.com>.
+//
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+//
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+// PERFORMANCE OF THIS SOFTWARE.
+
+package coredata
+
+import (
+	"fmt"
+)
+
+type (
+	WebhookCallOrderField string
+)
+
+const (
+	WebhookCallOrderFieldCreatedAt WebhookCallOrderField = "CREATED_AT"
+)
+
+func (p WebhookCallOrderField) Column() string {
+	return string(p)
+}
+
+func (p WebhookCallOrderField) String() string {
+	return string(p)
+}
+
+func (p WebhookCallOrderField) IsValid() bool {
+	switch p {
+	case WebhookCallOrderFieldCreatedAt:
+		return true
+	}
+	return false
+}
+
+func (p WebhookCallOrderField) MarshalText() ([]byte, error) {
+	return []byte(p.String()), nil
+}
+
+func (p *WebhookCallOrderField) UnmarshalText(text []byte) error {
+	*p = WebhookCallOrderField(text)
+	if !p.IsValid() {
+		return fmt.Errorf("%s is not a valid WebhookCallOrderField", string(text))
+	}
+	return nil
+}

pkg/probo/webhook_configuration_service.go

@@ -261,6 +261,58 @@ func (s WebhookConfigurationService) GetSigningSecret(
 	return wc.DecryptSigningSecret(s.svc.encryptionKey)
 }
 
+func (s WebhookConfigurationService) ListCallsForConfigurationID(
+	ctx context.Context,
+	webhookConfigurationID gid.GID,
+	cursor *page.Cursor[coredata.WebhookCallOrderField],
+) (*page.Page[*coredata.WebhookCall, coredata.WebhookCallOrderField], error) {
+	var calls coredata.WebhookCalls
+
+	err := s.svc.pg.WithConn(
+		ctx,
+		func(conn pg.Conn) error {
+			if err := calls.LoadByConfigurationID(ctx, conn, s.svc.scope, webhookConfigurationID, cursor); err != nil {
+				return fmt.Errorf("cannot load webhook calls: %w", err)
+			}
+
+			return nil
+		},
+	)
+
+	if err != nil {
+		return nil, err
+	}
+
+	return page.NewPage(calls, cursor), nil
+}
+
+func (s WebhookConfigurationService) CountCallsForConfigurationID(
+	ctx context.Context,
+	webhookConfigurationID gid.GID,
+) (int, error) {
+	var count int
+
+	err := s.svc.pg.WithConn(
+		ctx,
+		func(conn pg.Conn) (err error) {
+			calls := &coredata.WebhookCalls{}
+			count, err = calls.CountByConfigurationID(ctx, conn, s.svc.scope, webhookConfigurationID)
+
+			if err != nil {
+				return fmt.Errorf("cannot count webhook calls: %w", err)
+			}
+
+			return nil
+		},
+	)
+
+	if err != nil {
+		return 0, err
+	}
+
+	return count, nil
+}
+
 func (s WebhookConfigurationService) Delete(
 	ctx context.Context,
 	webhookConfigurationID gid.GID,

pkg/server/api/console/v1/schema.graphql

@@ -2293,6 +2293,14 @@ type WebhookConfiguration implements Node {
     createdAt: Datetime!
     updatedAt: Datetime!
 
+    calls(
+        first: Int
+        after: CursorKey
+        last: Int
+        before: CursorKey
+        orderBy: WebhookCallOrder
+    ): WebhookCallConnection! @goField(forceResolver: true)
+
     permission(action: String!): Boolean! @goField(forceResolver: true)
 }
 
@@ -2310,6 +2318,56 @@ type WebhookConfigurationEdge {
     node: WebhookConfiguration!
 }
 
+enum WebhookCallStatus
+    @goModel(model: "go.probo.inc/probo/pkg/coredata.WebhookCallStatus") {
+    SUCCEEDED
+        @goEnum(value: "go.probo.inc/probo/pkg/coredata.WebhookCallStatusSucceeded")
+    FAILED
+        @goEnum(value: "go.probo.inc/probo/pkg/coredata.WebhookCallStatusFailed")
+}
+
+enum WebhookCallOrderField
+    @goModel(
+        model: "go.probo.inc/probo/pkg/coredata.WebhookCallOrderField"
+    ) {
+    CREATED_AT
+        @goEnum(
+            value: "go.probo.inc/probo/pkg/coredata.WebhookCallOrderFieldCreatedAt"
+        )
+}
+
+input WebhookCallOrder
+    @goModel(
+        model: "go.probo.inc/probo/pkg/server/api/console/v1/types.WebhookCallOrderBy"
+    ) {
+    field: WebhookCallOrderField!
+    direction: OrderDirection!
+}
+
+type WebhookCall implements Node {
+    id: ID!
+    webhookEventId: ID!
+    webhookConfigurationId: ID!
+    endpointUrl: String!
+    status: WebhookCallStatus!
+    response: String
+    createdAt: Datetime!
+}
+
+type WebhookCallConnection
+    @goModel(
+        model: "go.probo.inc/probo/pkg/server/api/console/v1/types.WebhookCallConnection"
+    ) {
+    edges: [WebhookCallEdge!]!
+    pageInfo: PageInfo!
+    totalCount: Int! @goField(forceResolver: true)
+}
+
+type WebhookCallEdge {
+    cursor: CursorKey!
+    node: WebhookCall!
+}
+
 type StateOfApplicability implements Node {
     id: ID!
     name: String!

pkg/server/api/console/v1/types/types.go

@@ -2623,6 +2623,24 @@ type Viewer struct {
 	SignableDocument  *SignableDocument           `json:"signableDocument,omitempty"`
 }
 
+type WebhookCall struct {
+	ID                     gid.GID                    `json:"id"`
+	WebhookEventID         gid.GID                    `json:"webhookEventId"`
+	WebhookConfigurationID gid.GID                    `json:"webhookConfigurationId"`
+	EndpointURL            string                     `json:"endpointUrl"`
+	Status                 coredata.WebhookCallStatus `json:"status"`
+	Response               *string                    `json:"response,omitempty"`
+	CreatedAt              time.Time                  `json:"createdAt"`
+}
+
+func (WebhookCall) IsNode()             {}
+func (this WebhookCall) GetID() gid.GID { return this.ID }
+
+type WebhookCallEdge struct {
+	Cursor page.CursorKey `json:"cursor"`
+	Node   *WebhookCall   `json:"node"`
+}
+
 type WebhookConfiguration struct {
 	ID             gid.GID                     `json:"id"`
 	Organization   *Organization               `json:"organization,omitempty"`
@@ -2631,6 +2649,7 @@ type WebhookConfiguration struct {
 	SelectedEvents []coredata.WebhookEventType `json:"selectedEvents"`
 	CreatedAt      time.Time                   `json:"createdAt"`
 	UpdatedAt      time.Time                   `json:"updatedAt"`
+	Calls          *WebhookCallConnection      `json:"calls"`
 	Permission     bool                        `json:"permission"`
 }
 

pkg/server/api/console/v1/types/webhook_call.go

@@ -0,0 +1,79 @@
+// Copyright (c) 2025 Probo Inc <hello@getprobo.com>.
+//
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+//
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+// PERFORMANCE OF THIS SOFTWARE.
+
+package types
+
+import (
+	"go.probo.inc/probo/pkg/coredata"
+	"go.probo.inc/probo/pkg/gid"
+	"go.probo.inc/probo/pkg/page"
+)
+
+type (
+	WebhookCallOrderBy OrderBy[coredata.WebhookCallOrderField]
+
+	WebhookCallConnection struct {
+		TotalCount int
+		Edges      []*WebhookCallEdge
+		PageInfo   PageInfo
+
+		Resolver any
+		ParentID gid.GID
+	}
+)
+
+func NewWebhookCallConnection(
+	p *page.Page[*coredata.WebhookCall, coredata.WebhookCallOrderField],
+	parentType any,
+	parentID gid.GID,
+) *WebhookCallConnection {
+	var edges = make([]*WebhookCallEdge, len(p.Data))
+
+	for i := range edges {
+		edges[i] = NewWebhookCallEdge(p.Data[i], p.Cursor.OrderBy.Field)
+	}
+
+	return &WebhookCallConnection{
+		Edges:    edges,
+		PageInfo: *NewPageInfo(p),
+
+		Resolver: parentType,
+		ParentID: parentID,
+	}
+}
+
+func NewWebhookCallEdge(wc *coredata.WebhookCall, orderBy coredata.WebhookCallOrderField) *WebhookCallEdge {
+	return &WebhookCallEdge{
+		Cursor: wc.CursorKey(orderBy),
+		Node:   NewWebhookCall(wc),
+	}
+}
+
+func NewWebhookCall(wc *coredata.WebhookCall) *WebhookCall {
+	var response *string
+	if len(wc.Response) > 0 {
+		s := string(wc.Response)
+		response = &s
+	}
+
+	return &WebhookCall{
+		ID:                     wc.ID,
+		WebhookEventID:        wc.WebhookEventID,
+		WebhookConfigurationID: wc.WebhookConfigurationID,
+		EndpointURL:            wc.EndpointURL,
+		Status:                 wc.Status,
+		Response:               response,
+		CreatedAt:              wc.CreatedAt,
+	}
+}

pkg/server/api/console/v1/v1_resolver.go

@@ -8559,6 +8559,23 @@ func (r *viewerResolver) SignableDocument(ctx context.Context, obj *types.Viewer
 	}, nil
 }
 
+// TotalCount is the resolver for the totalCount field.
+func (r *webhookCallConnectionResolver) TotalCount(ctx context.Context, obj *types.WebhookCallConnection) (int, error) {
+	if err := r.authorize(ctx, obj.ParentID, probo.ActionWebhookConfigurationGet); err != nil {
+		return 0, err
+	}
+
+	prb := r.ProboService(ctx, obj.ParentID.TenantID())
+
+	count, err := prb.WebhookConfigurations.CountCallsForConfigurationID(ctx, obj.ParentID)
+	if err != nil {
+		r.logger.ErrorCtx(ctx, "cannot count webhook calls", log.Error(err))
+		return 0, gqlutils.Internal(ctx)
+	}
+
+	return count, nil
+}
+
 // Organization is the resolver for the organization field.
 func (r *webhookConfigurationResolver) Organization(ctx context.Context, obj *types.WebhookConfiguration) (*types.Organization, error) {
 	if err := r.authorize(ctx, obj.ID, probo.ActionOrganizationGet); err != nil {
@@ -8593,6 +8610,36 @@ func (r *webhookConfigurationResolver) SigningSecret(ctx context.Context, obj *t
 	return signingSecret, nil
 }
 
+// Calls is the resolver for the calls field.
+func (r *webhookConfigurationResolver) Calls(ctx context.Context, obj *types.WebhookConfiguration, first *int, after *page.CursorKey, last *int, before *page.CursorKey, orderBy *types.WebhookCallOrderBy) (*types.WebhookCallConnection, error) {
+	if err := r.authorize(ctx, obj.ID, probo.ActionWebhookConfigurationGet); err != nil {
+		return nil, err
+	}
+
+	prb := r.ProboService(ctx, obj.ID.TenantID())
+
+	pageOrderBy := page.OrderBy[coredata.WebhookCallOrderField]{
+		Field:     coredata.WebhookCallOrderFieldCreatedAt,
+		Direction: page.OrderDirectionDesc,
+	}
+	if orderBy != nil {
+		pageOrderBy = page.OrderBy[coredata.WebhookCallOrderField]{
+			Field:     orderBy.Field,
+			Direction: orderBy.Direction,
+		}
+	}
+
+	cursor := types.NewCursor(first, after, last, before, pageOrderBy)
+
+	page, err := prb.WebhookConfigurations.ListCallsForConfigurationID(ctx, obj.ID, cursor)
+	if err != nil {
+		r.logger.ErrorCtx(ctx, "cannot list webhook calls", log.Error(err))
+		return nil, gqlutils.Internal(ctx)
+	}
+
+	return types.NewWebhookCallConnection(page, r, obj.ID), nil
+}
+
 // Permission is the resolver for the permission field.
 func (r *webhookConfigurationResolver) Permission(ctx context.Context, obj *types.WebhookConfiguration, action string) (bool, error) {
 	return r.Resolver.Permission(ctx, obj, action)
@@ -8922,6 +8969,11 @@ func (r *Resolver) VendorService() schema.VendorServiceResolver { return &vendor
 // Viewer returns schema.ViewerResolver implementation.
 func (r *Resolver) Viewer() schema.ViewerResolver { return &viewerResolver{r} }
 
+// WebhookCallConnection returns schema.WebhookCallConnectionResolver implementation.
+func (r *Resolver) WebhookCallConnection() schema.WebhookCallConnectionResolver {
+	return &webhookCallConnectionResolver{r}
+}
+
 // WebhookConfiguration returns schema.WebhookConfigurationResolver implementation.
 func (r *Resolver) WebhookConfiguration() schema.WebhookConfigurationResolver {
 	return &webhookConfigurationResolver{r}
@@ -9004,5 +9056,6 @@ type vendorDataPrivacyAgreementResolver struct{ *Resolver }
 type vendorRiskAssessmentResolver struct{ *Resolver }
 type vendorServiceResolver struct{ *Resolver }
 type viewerResolver struct{ *Resolver }
+type webhookCallConnectionResolver struct{ *Resolver }
 type webhookConfigurationResolver struct{ *Resolver }
 type webhookConfigurationConnectionResolver struct{ *Resolver }