feat: add webhook playground

src/client/components/CodeBlock.tsx

@@ -4,10 +4,10 @@ import { Button } from './ui/button';
 import { LuCopy, LuCopyCheck } from 'react-icons/lu';
 import { toast } from 'sonner';
 import { useTranslation } from '@i18next-toolkit/react';
-import { ScrollBar } from './ui/scroll-area';
 
 export const CodeBlock: React.FC<{
   code: string;
+  height?: number;
 }> = React.memo((props) => {
   const [copied, setCopied] = useState(false);
   const { t } = useTranslation();
@@ -22,7 +22,12 @@ export const CodeBlock: React.FC<{
 
   return (
     <div className="group relative w-full overflow-auto">
-      <pre className="max-h-96 rounded-sm border border-zinc-200 bg-zinc-100 p-3 pr-12 text-sm dark:border-zinc-800 dark:bg-zinc-900">
+      <pre
+        className="rounded-sm border border-zinc-200 bg-zinc-100 p-3 pr-12 text-sm dark:border-zinc-800 dark:bg-zinc-900"
+        style={{
+          maxHeight: props.height || 384,
+        }}
+      >
         <code>{props.code}</code>
       </pre>
       <Button

src/client/components/WebhookPlayground.tsx

@@ -0,0 +1,218 @@
+import React, { useMemo, useState } from 'react';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from './ui/resizable';
+import { cn } from '@/utils/style';
+import { ScrollArea } from './ui/scroll-area';
+import { Trans, useTranslation } from '@i18next-toolkit/react';
+import { Empty } from 'antd';
+import { Button } from './ui/button';
+import copy from 'copy-to-clipboard';
+import { toast } from 'sonner';
+import { Code } from './Code';
+import { useCurrentWorkspaceId } from '@/store/user';
+import { Badge } from './ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { reverse, toPairs } from 'lodash-es';
+import { CodeBlock } from './CodeBlock';
+import dayjs from 'dayjs';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from './ui/dropdown-menu';
+import { useEvent } from '@/hooks/useEvent';
+import { useSocketSubscribeList } from '@/api/socketio';
+
+export const WebhookPlayground: React.FC = React.memo(() => {
+  const { t } = useTranslation();
+  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(
+    null
+  );
+  const workspaceId = useCurrentWorkspaceId();
+
+  const requestList = useSocketSubscribeList(
+    'onReceivePlaygroundWebhookRequest'
+  );
+
+  const selectedRequest = useMemo(() => {
+    return requestList.find((item) => item.id === selectedRequestId);
+  }, [selectedRequestId, requestList]);
+
+  const handleCopyAsCurl = useEvent(() => {
+    if (!selectedRequest) {
+      return;
+    }
+
+    const url = selectedRequest.url.startsWith('/')
+      ? `${window.location.origin}${selectedRequest.url}`
+      : selectedRequest.url;
+    const command = [
+      'curl',
+      `-X ${selectedRequest.method}`,
+      `${toPairs(selectedRequest.headers)
+        .filter(([key]) => !['content-length'].includes(key.toLowerCase()))
+        .map(([key, value]) => `-H '${key}: ${value}'`)
+        .join(' ')}`,
+      `-d '${JSON.stringify(selectedRequest.body)}'`,
+      `'${url}'`,
+    ].join(' ');
+    copy(command);
+    toast.success('Copied into your clipboard!');
+  });
+
+  const list = (
+    <ScrollArea className="flex-1">
+      <div className="flex flex-col gap-2 p-2">
+        {requestList.length === 0 && (
+          <Empty description={t('Is waiting new request from remote')} />
+        )}
+
+        {reverse(requestList).map((item) => {
+          return (
+            <button
+              key={item.id}
+              className={cn(
+                'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all',
+                selectedRequestId === item.id
+                  ? 'bg-gray-100 dark:!bg-gray-800'
+                  : 'hover:bg-gray-50 dark:hover:bg-gray-900'
+              )}
+              onClick={() => {
+                setSelectedRequestId(item.id);
+              }}
+            >
+              <div className="flex w-full items-center justify-between gap-2">
+                <Badge>{item.method}</Badge>
+
+                <div className="text-xs opacity-80">
+                  {dayjs(item.createdAt).fromNow()}
+                </div>
+              </div>
+              <div className="flex w-full items-center justify-between gap-1">
+                <div className="overflow-hidden text-ellipsis font-semibold">
+                  {item.url}
+                </div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </ScrollArea>
+  );
+
+  const webhookUrl = `${window.location.origin}/open/feed/playground/${workspaceId}`;
+  const emptyContentFallback = (
+    <div>
+      <div>
+        <Trans>
+          Set webhook url with <Code children={webhookUrl} />, and keep this
+          window actived, then you can get webhook request here.
+        </Trans>
+      </div>
+      <Button
+        className="mt-2"
+        size="sm"
+        onClick={() => {
+          copy(webhookUrl);
+          toast.success('Copied into your clipboard!');
+        }}
+      >
+        {t('Copy Url')}
+      </Button>
+    </div>
+  );
+
+  const copyBtn = (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">{t('Copy as')}</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" side="bottom" align="end">
+        <DropdownMenuItem onClick={handleCopyAsCurl}>cURL</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+  const content = selectedRequest ? (
+    <div className="flex flex-col gap-2">
+      <div>
+        <div className="flex gap-2">
+          <Badge>{selectedRequest.method}</Badge>
+          <div className="flex w-full flex-1 items-center justify-between gap-1 overflow-hidden text-ellipsis font-semibold">
+            {selectedRequest.url}
+          </div>
+          {copyBtn}
+        </div>
+        <div className="text-right text-xs opacity-80">
+          {dayjs(selectedRequest.createdAt).fromNow()}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('Request Header')}</CardTitle>
+          </CardHeader>
+
+          <CardContent>
+            {toPairs(selectedRequest.headers).map(([key, value]) => {
+              return (
+                <div key={key} className="flex items-center justify-between">
+                  <div className="overflow-hidden text-ellipsis font-semibold">
+                    {key}
+                  </div>
+                  <div className="overflow-hidden text-ellipsis">{value}</div>
+                </div>
+              );
+            })}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('Request Body')}</CardTitle>
+          </CardHeader>
+
+          <CardContent>
+            <CodeBlock
+              height={600}
+              code={JSON.stringify(selectedRequest.body, null, 2)}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  ) : (
+    emptyContentFallback
+  );
+
+  return (
+    <div className="h-full w-full">
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="h-full items-stretch"
+      >
+        <ResizablePanel
+          defaultSize={30}
+          collapsible={false}
+          minSize={20}
+          maxSize={50}
+          className={cn('flex flex-col')}
+        >
+          {list}
+        </ResizablePanel>
+
+        <ResizableHandle withHandle />
+
+        <ResizablePanel>
+          <ScrollArea className="h-full px-4 py-2">{content}</ScrollArea>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+});
+WebhookPlayground.displayName = 'WebhookPlayground';

src/client/components/feed/FeedIntegration.tsx

@@ -4,7 +4,6 @@ import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { CodeBlock } from '../CodeBlock';
 import { useTranslation } from '@i18next-toolkit/react';
 import { SiSentry } from 'react-icons/si';
-import { Link } from '@tanstack/react-router';
 
 export const FeedIntegration: React.FC<{
   feedId: string;

src/client/routes/playground.tsx

@@ -6,6 +6,8 @@ import {
 } from '@/components/monitor/StatusPage/ServiceList';
 import { useState } from 'react';
 import { EditableText } from '@/components/EditableText';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { WebhookPlayground } from '@/components/WebhookPlayground';
 
 export const Route = createFileRoute('/playground')({
   beforeLoad: () => {
@@ -45,6 +47,19 @@ function PageComponent() {
   ]);
 
   return (
+    <div className="h-full w-full p-4">
+      <Tabs defaultValue="current" className="flex h-full flex-col">
+        <div>
+          <TabsList>
+            <TabsTrigger value="current">Current</TabsTrigger>
+            <TabsTrigger value="history">History</TabsTrigger>
+          </TabsList>
+        </div>
+
+        <TabsContent value="current" className="flex-1 overflow-hidden">
+          <WebhookPlayground />
+        </TabsContent>
+        <TabsContent value="history">
           <div>
             <EditableText
               defaultValue="fooooooooo"
@@ -53,5 +68,8 @@ function PageComponent() {
 
             <MonitorStatusPageServiceList value={list} onChange={setList} />
           </div>
+        </TabsContent>
+      </Tabs>
+    </div>
   );
 }

src/server/trpc/routers/feed/integration.ts

@@ -6,9 +6,44 @@ import { OPENAPI_TAG } from '../../../utils/const.js';
 import { createFeedEvent } from '../../../model/feed/event.js';
 import { tencentCloudAlarmSchema } from '../../../model/_schema/feed.js';
 import { logger } from '../../../utils/logger.js';
-import { compact, fromPairs, get, map } from 'lodash-es';
+import { compact, fromPairs, get, map, uniqueId } from 'lodash-es';
+import { subscribeEventBus } from '../../../ws/shared.js';
 
 export const feedIntegrationRouter = router({
+  playground: publicProcedure
+    .meta(
+      buildFeedPublicOpenapi({
+        method: 'POST',
+        path: '/playground/{workspaceId}',
+        summary: 'webhook playground',
+      })
+    )
+    .input(
+      z
+        .object({
+          workspaceId: z.string(),
+        })
+        .passthrough()
+    )
+    .output(z.string())
+    .mutation(async ({ input, ctx }) => {
+      const headers = ctx.req.headers;
+      const body = ctx.req.body;
+      const method = ctx.req.method;
+      const url = ctx.req.originalUrl;
+      const workspaceId = input.workspaceId;
+
+      subscribeEventBus.emit('onReceivePlaygroundWebhookRequest', workspaceId, {
+        id: uniqueId('req#'),
+        headers,
+        body,
+        method,
+        url,
+        createdAt: Date.now(),
+      });
+
+      return 'success';
+    }),
   github: publicProcedure
     .meta(
       buildFeedPublicOpenapi({

src/server/ws/shared.ts

@@ -1,6 +1,10 @@
 import { EventEmitter } from 'eventemitter-strict';
 import { Socket } from 'socket.io';
-import { MaybePromise, ServerStatusInfo } from '../../types/index.js';
+import {
+  MaybePromise,
+  PlaygroundWebhookRequestPayload,
+  ServerStatusInfo,
+} from '../../types/index.js';
 import { FeedEvent, MonitorData } from '@prisma/client';
 import { Serialize } from '../types/utils.js';
 
@@ -10,6 +14,7 @@ export interface SubscribeEventMap {
   onServerStatusUpdate: SubscribeEventFn<Record<string, ServerStatusInfo>>;
   onMonitorReceiveNewData: SubscribeEventFn<MonitorData>;
   onReceiveFeedEvent: SubscribeEventFn<Serialize<FeedEvent>>;
+  onReceivePlaygroundWebhookRequest: SubscribeEventFn<PlaygroundWebhookRequestPayload>;
   onLighthouseWorkCompleted: SubscribeEventFn<{ websiteId: string }>;
 }
 

src/types/server.ts

@@ -1,3 +1,5 @@
+import { type IncomingHttpHeaders } from 'http';
+
 export interface ServerStatusInfo {
   workspaceId: string;
   name: string;
@@ -52,3 +54,12 @@ export interface ServerStatusDockerContainerPort {
   PublicPort: number;
   Type: 'tcp' | 'udp';
 }
+
+export interface PlaygroundWebhookRequestPayload {
+  id: string;
+  url: string;
+  method: string;
+  headers: IncomingHttpHeaders;
+  body: string;
+  createdAt: number;
+}