通知渠道 Notify Channel
https://aiops.com/integration.html
https://docs.erda.cloud/2.0/manual/msp/guides/apm/alert-notify-channel.html
https://github.com/yangpeng14/DevOps/blob/master/kubernetes/PrometheusAlert%E5%A4%9A%E6%B8%A0%E9%81%93%E5%91%8A%E8%AD%A6%E9%80%9A%E7%9F%A5%E7%A5%9E%E5%99%A8.md
https://www.alibabacloud.com/help/zh/log-service/latest/notification-methods
https://antchain.antgroup.com/docs/2/209963

钉钉数字一体化 https://www.dingtalk.com
image.png

  1. 钉钉，DingdingOutlined image.png
    1. DingtalkSquareFilled image.png
  2. 短信 MessageFilled image.png
  3. 电话，PhoneOutlined image.png
    1. PhoneTwoTone image.png
  4. 邮件，MailTwoTone image.png
    1. SMTP，发送；发消息给邮件服务器上的 SMTP Service
    2. POP3/IMAP 接收
  5. 企业微信，QQ
    1. QqSquareFilled image.png
    2. WechatFilled image.png image.png
  6. 飞书 image.png

image.png
image.png

  1. const options = [
  2.   {
  3.     label: <><DingdingOutlined style={{color: '#0983ff'}} /> 钉钉</>,
  4.     value: "ding",
  5.   },
  6.   {
  7.     label: <><MailTwoTone /> 邮件</>,
  8.     value: "mail",
  9.   },
  10.   {
  11.     label: <><PhoneTwoTone rotate={90} style={{ color: '#0ce463' }} /> 电话</>,
  12.     value: "phone",
  13.   },
  14.   {
  15.     label: <><MessageFilled style={{ color: '#0ce463' }} /> 短信</>,
  16.     value: "message",
  17.   }
  18. ];

tagRender

image.png
Select tagRender 自定义选择标签的样式
https://ant-design.antgroup.com/components/select-cn#components-select-demo-custom-tag-render

  1. import React from "react";
  2. // import PropTypes from "prop-types";
  3. import { Select as AntdSelect, Tag } from "antd";
  4. import {
  5.   PhoneTwoTone,
  6.   DingdingOutlined,
  7.   MailTwoTone,
  8.   MessageFilled
  9. } from "@ant-design/icons";
  10. import type { CustomTagProps } from "rc-select/lib/BaseSelect";
  12. const options = [
  13.   {
  14.     label: "钉钉",
  15.     value: "ding",
  16.     icon: <DingdingOutlined />,
  17.     color: "processing"
  18.   },
  19.   {
  20.     label: "邮件",
  21.     value: "mail",
  22.     icon: <MailTwoTone />,
  23.     color: "warning"
  24.   },
  25.   {
  26.     label: "电话",
  27.     value: "phone",
  28.     icon: <PhoneTwoTone rotate={90} />,
  29.     color: "red"
  30.   },
  31.   {
  32.     label: "短信",
  33.     value: "message",
  34.     icon: <MessageFilled />,
  35.     color: "lime"
  36.   }
  37. ];
  39. Select.propTypes = {};
  41. function Select() {
  43.   function tagRender(props: CustomTagProps) {
  44.     const { label, value, closable, onClose } = props;
  45.     const item = options.find(it => it.value === value) ?? {};
  47.     const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
  48.       event.preventDefault();
  49.       event.stopPropagation();
  50.     };
  52.     return (
  53.       <Tag
  54.         bordered={false}
  55.         color={item.color}
  56.         onMouseDown={onPreventMouseDown}
  57.         closable={closable}
  58.         onClose={onClose}
  59.         icon={item.icon}
  60.       >
  61.         {label}
  62.       </Tag>
  63.     );
  64.   }
  66.   return (
  67.     <AntdSelect
  68.       options={options}
  69.       mode="multiple"
  70.       className="w-full"
  71.       tagRender={tagRender}
  72.     />
  73.   );
  74. }
  76. export default Select;

邮件

SMTP，发送；发消息给邮件服务器上的 SMTP Service
POP3/IMAP 接收
SMTP，Simple Mail Transfer Protocal
POP，Post Office Protocol 邮局通讯协议
https://www.sohu.com/a/323407215_657867