feat(sj_1.0.0): 告警通知-通知人Webhook代码提交

src/constants/business.ts

@@ -49,10 +49,17 @@ export const alarmTypeRecord: Record<Api.NotifyRecipient.AlarmType, App.I18n.I18
   1: 'page.notifyRecipient.dingDing',
   2: 'page.notifyRecipient.email',
   3: 'page.notifyRecipient.weCom',
-  4: 'page.notifyRecipient.lark'
+  4: 'page.notifyRecipient.lark',
+  5: 'page.notifyRecipient.webhook'
 };
 export const alarmTypeRecordOptions = transformRecordToOption(alarmTypeRecord);
 
+export const alarmWebhookTypeRecord: Record<Api.NotifyRecipient.AlarmTypeWebhook, App.I18n.I18nKey> = {
+  1: 'page.notifyRecipient.form.applicationJson',
+  2: 'page.notifyRecipient.form.applicationXWwwFormUrlencoded'
+};
+export const alarmWebhookTypeRecordOptions = transformRecordToOption(alarmWebhookTypeRecord);
+
 export const systemTaskType: Record<Api.NotifyConfig.SystemTaskType, App.I18n.I18nKey> = {
   1: 'common.systemTaskType.retry',
   // 2: 'common.systemTaskType.callback',

src/locales/langs/en-us.ts

@@ -736,17 +736,24 @@ const local: App.I18n.Schema = {
         dingDingAts: "Please enter the {'@'} phone number or DingTalk ID",
         weComAts: "Please enter the {'@'} Enterprise WeChat user ID",
         larkAts: "Please enter the {'@'} open_id",
-        webhookUrl: 'Please enter URL'
+        webhookUrl: 'Please enter URL',
+        secret: 'Please enter secret',
+        contentType: 'Please enter Request type',
+        applicationJson: 'application/json',
+        applicationXWwwFormUrlencoded: 'application/x-www-form-urlencoded'
       },
       addNotifyRecipient: 'Add Notify Recipient',
       editNotifyRecipient: 'Edit Notify Recipient',
       ats: "{'@'} Notification Recipient",
       webhookUrl: 'Notification Address',
+      secret: 'secret',
       tos: 'Recipient Email Address',
       dingDing: 'DingTalk',
       email: 'Email',
       weCom: 'WeCom',
-      lark: 'Lark'
+      lark: 'Lark',
+      webhook: 'webhook',
+      contentType: 'Request type'
     },
     retryDeadLetter: {
       title: 'RetryDeadLetter List',

src/locales/langs/zh-cn.ts

@@ -732,17 +732,24 @@ const local: App.I18n.Schema = {
         dingDingAts: "请输入被{'@'}人手机号或钉钉号",
         weComAts: "请输入被{'@'}人企业微信用户id",
         larkAts: "请输入被{'@'}人open_id",
-        webhookUrl: '请输入URL'
+        webhookUrl: '请输入URL',
+        secret: '请输入密钥',
+        contentType: '请选择请求类型',
+        applicationJson: 'application/json',
+        applicationXWwwFormUrlencoded: 'application/x-www-form-urlencoded'
       },
       addNotifyRecipient: '新增通知接收人',
       editNotifyRecipient: '编辑通知接收人',
       ats: "{'@'}通知人",
       webhookUrl: '通知地址',
+      secret: '密钥',
       tos: '通知人邮箱地址',
       dingDing: '钉钉',
       email: '邮箱',
       weCom: '企业微信',
-      lark: '飞书'
+      lark: '飞书',
+      webhook: 'webhook',
+      contentType: '请求类型'
     },
     retryDeadLetter: {
       title: '死信任务列表',

src/typings/api.d.ts

@@ -637,6 +637,17 @@ declare namespace Api {
     }> &
       NotifyRecipient;
 
+    /** webhook Notify */
+    type WebhookNotify = Common.CommonRecord<{
+      /** 接收人名称 */
+      webhookUrl: string;
+      /* 通知类型 */
+      contentType: string;
+      /** 密钥 */
+      secret?: string;
+    }> &
+      NotifyRecipient;
+
     /** notifyRecipient search params */
     type NotifyRecipientParams = CommonType.RecordNullable<
       Pick<Api.NotifyRecipient.NotifyRecipient, 'recipientName' | 'notifyType' | 'notifyAttribute' | 'description'> &
@@ -646,8 +657,11 @@ declare namespace Api {
     /** notifyRecipient list */
     type NotifyRecipientList = Common.PaginatingQueryRecord<NotifyRecipient>;
 
-    /** 1: 钉钉通知 2: 邮件通知 3: 企业通知 4: 飞书 */
+    /** 1: 钉钉通知 2: 邮件通知 3: 企业通知 4: 飞书 5: Webhook */
-    type AlarmType = 1 | 2 | 3 | 4;
+    type AlarmType = 1 | 2 | 3 | 4 | 5;
+
+    /* 1: application/json 2：application/x-www-form-urlencoded */
+    type AlarmTypeWebhook = 1 | 2;
   }
 
   namespace RetryDeadLetter {

src/typings/app.d.ts

@@ -880,6 +880,10 @@ declare namespace App {
             weComAts: string;
             larkAts: string;
             webhookUrl: string;
+            secret: string;
+            contentType: string;
+            applicationJson: string;
+            applicationXWwwFormUrlencoded: string;
           };
           addNotifyRecipient: string;
           editNotifyRecipient: string;
@@ -890,6 +894,9 @@ declare namespace App {
           email: string;
           weCom: string;
           lark: string;
+          secret: string;
+          webhook: string;
+          contentType: string;
         };
         retryDeadLetter: {
           title: string;

src/views/notify/recipient/modules/notify-recipient-operate-drawer.vue

@@ -8,6 +8,7 @@ import DingDingForm from './dingding-form.vue';
 import LarkForm from './lark-form.vue';
 import EmailForm from './email-form.vue';
 import WeComForm from './wecom-form.vue';
+import WebhookForm from './webhook-form.vue';
 
 defineOptions({
   name: 'NotifyRecipientOperateDrawer'
@@ -121,6 +122,9 @@ watch(visible, () => {
       <NTabPane :name="4" tab="飞书">
         <LarkForm ref="formRef" v-model:value="model" />
       </NTabPane>
+      <NTabPane :name="5" tab="Webhook">
+        <WebhookForm ref="formRef" v-model:value="model" />
+      </NTabPane>
     </NTabs>
     <template #footer>
       <NSpace :size="16">

src/views/notify/recipient/modules/webhook-form.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import { translateOptions } from '@/utils/common';
+import { alarmWebhookTypeRecordOptions } from '@/constants/business';
+
+defineOptions({
+  name: 'WebhookForm'
+});
+
+interface Props {
+  value: Api.NotifyRecipient.NotifyRecipient;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'update:value', value: Api.NotifyRecipient.NotifyRecipient): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { defaultRequiredRule } = useFormRules();
+
+type Model = Pick<
+  Api.NotifyRecipient.WebhookNotify,
+  'id' | 'recipientName' | 'notifyType' | 'webhookUrl' | 'secret' | 'description' | 'contentType'
+>;
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  const { webhookUrl, contentType, secret } = JSON.parse(props.value.notifyAttribute!) as {
+    webhookUrl: string;
+    contentType: string;
+    secret: string;
+  };
+
+  return {
+    id: props.value.id,
+    recipientName: props.value.recipientName,
+    notifyType: 5,
+    contentType,
+    webhookUrl,
+    secret,
+    description: props.value.description
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'recipientName' | 'notifyType' | 'webhookUrl' | 'secret' | 'contentType'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  contentType: defaultRequiredRule,
+  recipientName: defaultRequiredRule,
+  notifyType: defaultRequiredRule,
+  webhookUrl: defaultRequiredRule,
+  secret: defaultRequiredRule
+};
+
+const buildNotifyAttribute = (webhookUrl: string, contentType: string, secret?: string) => {
+  return JSON.stringify({ webhookUrl, contentType, secret });
+};
+
+watch(
+  () => model,
+  () => {
+    const { id, recipientName, notifyType, webhookUrl, secret, description, contentType } = model;
+    const notifyAttribute = buildNotifyAttribute(webhookUrl, contentType, secret);
+    emit('update:value', { id, recipientName, notifyType, notifyAttribute, description });
+  },
+  { immediate: true, deep: true }
+);
+
+defineExpose({
+  validate,
+  restoreValidation
+});
+</script>
+
+<template>
+  <NForm ref="formRef" :model="model" :rules="rules">
+    <NFormItem :label="$t('page.notifyRecipient.recipientName')" path="recipientName">
+      <NInput v-model:value="model.recipientName" :placeholder="$t('page.notifyRecipient.form.recipientName')" />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.webhookUrl')" path="webhookUrl">
+      <NInput v-model:value="model.webhookUrl" :placeholder="$t('page.notifyRecipient.form.webhookUrl')" clearable />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.notifyType')" path="notifyType">
+      <NSelect
+        v-model:value="model.contentType"
+        :options="translateOptions(alarmWebhookTypeRecordOptions)"
+        :placeholder="$t('page.notifyRecipient.contentType')"
+        clearable
+      />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.secret')" path="secret">
+      <NInput v-model:value="model.secret" :placeholder="$t('page.notifyRecipient.form.secret')" clearable />
+    </NFormItem>
+    <NFormItem :label="$t('page.notifyRecipient.description')" path="description">
+      <NInput
+        v-model:value="model.description"
+        type="textarea"
+        :placeholder="$t('page.notifyRecipient.form.description')"
+        clearable
+        round
+      />
+    </NFormItem>
+  </NForm>
+</template>
+
+<style scoped></style>