Add webhook calls ui
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
@@ -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;
|
||||
|
||||
257
apps/console/src/__generated__/core/WebhooksSettingsPage_callsQuery.graphql.ts
generated
Normal file
257
apps/console/src/__generated__/core/WebhooksSettingsPage_callsQuery.graphql.ts
generated
Normal file
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user