feat(vben5): 增加发送记录drawer查看

apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptDrawer.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { TenantDto } from '@abp/saas';
+
+import type { WebhookSendRecordDto, WebhookSubscriptionDto } from '../../types';
+
+import { ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { CodeEditor } from '@abp/components/codeeditor';
+import { Tinymce } from '@abp/components/tinymce';
+import { formatToDateTime, isNullOrWhiteSpace } from '@abp/core';
+import { useHttpStatusCodeMap } from '@abp/request';
+import { useTenantsApi } from '@abp/saas';
+import {
+  Checkbox,
+  DatePicker,
+  Form,
+  Input,
+  InputPassword,
+  Tabs,
+  Tag,
+  Textarea,
+} from 'ant-design-vue';
+
+import { useSendAttemptsApi, useSubscriptionsApi } from '../../api';
+import { WebhookSubscriptionPermissions } from '../../constants/permissions';
+
+const FormItem = Form.Item;
+const TabPane = Tabs.TabPane;
+
+type TabKey = 'basic' | 'event' | 'subscriber';
+
+const activeTabKey = ref<TabKey>('basic');
+const formModel = ref<WebhookSendRecordDto>();
+const webhookSubscription = ref<WebhookSubscriptionDto>();
+const webhookTenant = ref<TenantDto>();
+
+const { hasAccessByCodes } = useAccess();
+const { getApi } = useSendAttemptsApi();
+const { getApi: getTenantApi } = useTenantsApi();
+const { getApi: getSubscriptionApi } = useSubscriptionsApi();
+const { getHttpStatusColor, httpStatusCodeMap } = useHttpStatusCodeMap();
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  class: 'w-1/2',
+  async onOpenChange(isOpen) {
+    formModel.value = undefined;
+    webhookTenant.value = undefined;
+    webhookSubscription.value = undefined;
+    if (isOpen) {
+      await onInit();
+    }
+  },
+});
+
+async function onInit() {
+  const dto = drawerApi.getData<WebhookSendRecordDto>();
+  if (isNullOrWhiteSpace(dto.id)) {
+    return;
+  }
+  const [sendRecordDto, subscriptionDto, tenantDto] = await Promise.all([
+    getApi(dto.id),
+    onInitSubscription(dto.webhookSubscriptionId),
+    onInitTenant(dto.tenantId),
+  ]);
+  formModel.value = sendRecordDto;
+  webhookSubscription.value = subscriptionDto;
+  webhookTenant.value = tenantDto;
+}
+
+async function onInitSubscription(subscriptionId: string) {
+  if (!hasAccessByCodes([WebhookSubscriptionPermissions.Default])) {
+    return undefined;
+  }
+  return await getSubscriptionApi(subscriptionId);
+}
+
+async function onInitTenant(tenantId?: string) {
+  // TODO: 公开saas模块常量?
+  if (isNullOrWhiteSpace(tenantId) || !hasAccessByCodes(['AbpSaas.Tenants'])) {
+    return undefined;
+  }
+  return await getTenantApi(tenantId);
+}
+</script>
+
+<template>
+  <Drawer :title="$t('WebhooksManagement.SendAttempts')">
+    <Form :model="formModel" layout="vertical">
+      <Tabs v-if="formModel" v-model:active-key="activeTabKey">
+        <TabPane key="basic" :tab="$t('WebhooksManagement.BasicInfo')">
+          <FormItem
+            v-if="webhookTenant"
+            name="tenantId"
+            :label="$t('WebhooksManagement.DisplayName:TenantId')"
+          >
+            <Input :value="webhookTenant.name" disabled />
+          </FormItem>
+          <FormItem name="sendExactSameData">
+            <Checkbox :checked="formModel.sendExactSameData" disabled>
+              {{ $t('WebhooksManagement.DisplayName:SendExactSameData') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            name="creationTime"
+            :label="$t('WebhooksManagement.DisplayName:CreationTime')"
+          >
+            <DatePicker
+              class="w-full"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              :value="formModel.creationTime"
+              disabled
+              show-time
+            />
+          </FormItem>
+          <FormItem
+            name="requestHeaders"
+            :label="$t('WebhooksManagement.DisplayName:RequestHeaders')"
+          >
+            <CodeEditor :value="formModel.requestHeaders" readonly />
+          </FormItem>
+          <FormItem
+            v-if="formModel.responseStatusCode"
+            name="responseStatusCode"
+            :label="$t('WebhooksManagement.DisplayName:ResponseStatusCode')"
+          >
+            <Tag :color="getHttpStatusColor(formModel.responseStatusCode)">
+              {{ httpStatusCodeMap[formModel.responseStatusCode] }}
+            </Tag>
+          </FormItem>
+          <FormItem
+            name="responseHeaders"
+            :label="$t('WebhooksManagement.DisplayName:ResponseHeaders')"
+          >
+            <CodeEditor :value="formModel.responseHeaders" readonly />
+          </FormItem>
+          <FormItem
+            name="response"
+            :label="$t('WebhooksManagement.DisplayName:Response')"
+          >
+            <Tinymce
+              :value="formModel.response"
+              :toolbar="[]"
+              :plugins="[]"
+              readonly
+            />
+          </FormItem>
+        </TabPane>
+        <TabPane key="event" :tab="$t('WebhooksManagement.WebhookEvent')">
+          <FormItem
+            name="webhookEventId"
+            :label="$t('WebhooksManagement.DisplayName:WebhookEventId')"
+          >
+            <Input :value="formModel.webhookEventId" disabled />
+          </FormItem>
+          <FormItem
+            :name="['webhookEvent', 'webhookName']"
+            :label="$t('WebhooksManagement.DisplayName:WebhookName')"
+          >
+            <Input :value="formModel.webhookEvent.webhookName" disabled />
+          </FormItem>
+          <FormItem
+            :name="['webhookEvent', 'creationTime']"
+            :label="$t('WebhooksManagement.DisplayName:CreationTime')"
+          >
+            <DatePicker
+              class="w-full"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              :value="formModel.webhookEvent.creationTime"
+              disabled
+              show-time
+            />
+          </FormItem>
+          <FormItem
+            :name="['webhookEvent', 'data']"
+            :label="$t('WebhooksManagement.DisplayName:Data')"
+          >
+            <CodeEditor :value="formModel.webhookEvent.data" readonly />
+          </FormItem>
+        </TabPane>
+        <TabPane
+          v-if="webhookSubscription"
+          key="subscriber"
+          :tab="$t('WebhooksManagement.Subscriptions')"
+        >
+          <FormItem>
+            <Checkbox :checked="webhookSubscription.isActive" disabled>
+              {{ $t('WebhooksManagement.DisplayName:IsActive') }}
+            </Checkbox>
+          </FormItem>
+          <FormItem
+            :label="$t('WebhooksManagement.DisplayName:WebhookSubscriptionId')"
+          >
+            <Input :value="webhookSubscription.id" disabled />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:WebhookUri')">
+            <Input :value="webhookSubscription.webhookUri" disabled />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:Description')">
+            <Textarea
+              :auto-size="{ minRows: 3 }"
+              :value="webhookSubscription.description"
+              disabled
+            />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:Secret')">
+            <InputPassword :value="webhookSubscription.secret" disabled />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:CreationTime')">
+            <DatePicker
+              class="w-full"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              :value="formatToDateTime(webhookSubscription.creationTime)"
+              disabled
+              show-time
+            />
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:Webhooks')">
+            <template
+              v-for="webhook in webhookSubscription.webhooks"
+              :key="webhook"
+            >
+              <Tag color="blue">
+                {{ webhook }}
+              </Tag>
+            </template>
+          </FormItem>
+          <FormItem :label="$t('WebhooksManagement.DisplayName:Headers')">
+            <CodeEditor :value="webhookSubscription.headers" readonly />
+          </FormItem>
+        </TabPane>
+      </Tabs>
+    </Form>
+  </Drawer>
+</template>
+
+<style scoped></style>

apps/vben5/packages/@abp/webhooks/src/components/send-attempts/WebhookSendAttemptTable.vue

@@ -6,9 +6,10 @@ import type { VbenFormProps } from '@vben/common-ui';
 
 import type { WebhookSendRecordDto } from '../../types/sendAttempts';
 
-import { h, ref } from 'vue';
+import { defineAsyncComponent, h, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
+import { useVbenDrawer } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
@@ -106,11 +107,11 @@ const formOptions: VbenFormProps = {
         options: [
           {
             label: $t('WebhooksManagement.ResponseState:Successed'),
-            value: true,
+            value: 'true',
           },
           {
             label: $t('WebhooksManagement.ResponseState:Failed'),
-            value: false,
+            value: 'false',
           },
         ],
       },
@@ -225,12 +226,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions,
 });
 
-function onUpdate(_row: WebhookSendRecordDto) {}
+const [WebhookSendAttemptDrawer, drawerApi] = useVbenDrawer({
+  connectedComponent: defineAsyncComponent(
+    () => import('./WebhookSendAttemptDrawer.vue'),
+  ),
+});
+
+function onUpdate(row: WebhookSendRecordDto) {
+  drawerApi.setData(row);
+  drawerApi.open();
+}
 
 function onDelete(row: WebhookSendRecordDto) {
   Modal.confirm({
     centered: true,
-    content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.title]),
+    content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [
+      $t('WebhooksManagement.SelectedItems'),
+    ]),
     onCancel: () => {
       cancel();
     },
@@ -253,7 +265,9 @@ async function onMenuClick(row: WebhookSendRecordDto, info: MenuInfo) {
 async function onSend(row: WebhookSendRecordDto) {
   Modal.confirm({
     centered: true,
-    content: `${$t('WebhooksManagement.ItemWillBeResendMessageWithFormat', [$t('WebhooksManagement.SelectedItems')])}`,
+    content: $t('WebhooksManagement.ItemWillBeResendMessageWithFormat', [
+      $t('WebhooksManagement.SelectedItems'),
+    ]),
     onOk: async () => {
       try {
         gridApi.setLoading(true);
@@ -377,6 +391,7 @@ async function onDeleteMany(keys: string[]) {
       </div>
     </template>
   </Grid>
+  <WebhookSendAttemptDrawer />
 </template>
 
 <style lang="scss" scoped></style>

apps/vben5/packages/@abp/webhooks/src/types/sendAttempts.ts

@@ -3,15 +3,15 @@ import type { EntityDto, PagedAndSortedResultRequestDto } from '@abp/core';
 import { HttpStatusCode } from '@abp/request';
 
 interface WebhookEventRecordDto extends EntityDto<string> {
-  creationTime: Date;
+  creationTime: string;
   data?: string;
   tenantId?: string;
   webhookName: string;
 }
 
 interface WebhookSendRecordDto extends EntityDto<string> {
-  creationTime: Date;
+  creationTime: string;
-  lastModificationTime?: Date;
+  lastModificationTime?: string;
   requestHeaders?: Record<string, string>;
   response?: string;
   responseHeaders?: Record<string, string>;