feat: template editor component (#136)

aide-family · Apr 29, 2024 · ae90eef · ae90eef
1 parent ee522d1
commit ae90eef
Show file tree

Hide file tree

Showing 19 changed files with 2,537 additions and 79 deletions.
diff --git a/app/prom_server/internal/service/promservice/strategy.go b/app/prom_server/internal/service/promservice/strategy.go
@@ -5,14 +5,14 @@ import (
 	"fmt"
 	"os"
 
-	"github.com/go-kratos/kratos/v2/log"
 	"github.com/aide-family/moon/api"
 	pb "github.com/aide-family/moon/api/server/prom/strategy"
 	"github.com/aide-family/moon/app/prom_server/internal/biz"
 	"github.com/aide-family/moon/app/prom_server/internal/biz/bo"
 	"github.com/aide-family/moon/app/prom_server/internal/biz/vobj"
 	"github.com/aide-family/moon/pkg/strategy"
 	"github.com/aide-family/moon/pkg/util/slices"
+	"github.com/go-kratos/kratos/v2/log"
 )
 
 type StrategyService struct {
@@ -206,6 +206,7 @@ func (s *StrategyService) TestNotifyTemplate(ctx context.Context, req *pb.TestTe
 		Template:   req.GetTemplate(),
 		StrategyId: req.GetStrategyId(),
 	}
+	s.log.Debugw("testParams", testParams.Template)
 	if err := s.notifyBiz.TestNotifyTemplate(ctx, testParams); err != nil {
 		return nil, err
 	}

diff --git a/web/package.json b/web/package.json
@@ -20,12 +20,13 @@
         "@prometheus-io/codemirror-promql": "^0.47.2",
         "@types/crypto-js": "^4.1.1",
         "@types/react-syntax-highlighter": "^15.5.11",
-        "antd": "^5.13.2",
+        "antd": "^5.16.5",
         "axios": "^1.5.0",
         "crypto-js": "^4.1.1",
         "dayjs": "^1.11.9",
         "echarts": "^5.4.3",
         "js-yaml": "^4.1.0",
+        "monaco-editor": "^0.48.0",
         "qs": "^6.11.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

diff --git a/web/src/apis/data.tsx b/web/src/apis/data.tsx
@@ -1,4 +1,4 @@
-import { Button } from 'antd'
+import { Button, Space } from 'antd'
 import {
     Category,
     DatasourceType,
@@ -128,40 +128,40 @@ export const NotifyTemplateTypeData: Record<
     React.ReactNode
 > = {
     [NotifyTemplateType.NotifyTemplateTypeEmail]: (
-        <span>
+        <Space size={8}>
             <IconFont type="icon-youjian" />
             邮件
-        </span>
+        </Space>
     ),
     [NotifyTemplateType.NotifyTemplateTypeCustom]: (
-        <span>
+        <Space size={8}>
             <IconFont type="icon-zidingyi" />
             自定义hook
-        </span>
+        </Space>
     ),
     [NotifyTemplateType.NotifyTemplateTypeDingDing]: (
-        <span>
+        <Space size={8}>
             <IconFont type="icon-dingding" />
             钉钉
-        </span>
+        </Space>
     ),
     [NotifyTemplateType.NotifyTemplateTypeSms]: (
-        <span>
+        <Space size={8}>
             <IconFont type="icon-duanxin" />
             短信
-        </span>
+        </Space>
     ),
     [NotifyTemplateType.NotifyTemplateTypeFeiShu]: (
-        <span>
+        <Space size={8}>
             <IconFont type="icon-feishu" />
             飞书
-        </span>
+        </Space>
     ),
     [NotifyTemplateType.NotifyTemplateTypeWeChatWork]: (
-        <span>
+        <Space size={8}>
             <IconFont type="icon-qiyeweixin" />
             企业微信
-        </span>
+        </Space>
     )
 }
 

diff --git a/web/src/components/Data/DataInput/DataInput.tsx b/web/src/components/Data/DataInput/DataInput.tsx
@@ -27,6 +27,26 @@ import {
     TemplateAutoComplete,
     TemplateAutoCompleteProps
 } from '../TemplateAutoComplete'
+import {
+    EmailTemplateEditor,
+    EmailTemplateEditorProps
+} from './child/EmailTemplateEditor'
+import {
+    WechatTemplateEditor,
+    WechatTemplateEditorProps
+} from './child/WechatTemplateEditor'
+import {
+    JsonTemplateEditor,
+    JsonTemplateEditorProps
+} from './child/JsonTemplateEditor'
+import {
+    FeishuTemplateEditor,
+    FeishuTemplateEditorProps
+} from './child/FeishuTemplateEditor'
+import {
+    DingTemplateEditor,
+    DingTemplateEditorProps
+} from './child/DingTemplateEditor'
 
 export type DataInputProps =
     | (
@@ -86,6 +106,26 @@ export type DataInputProps =
                 type: 'template-auto-complete'
                 parentProps?: TemplateAutoCompleteProps
             }
+          | {
+                type: 'email-template-editor'
+                parentProps?: EmailTemplateEditorProps
+            }
+          | {
+                type: 'wechat-template-editor'
+                parentProps?: WechatTemplateEditorProps
+            }
+          | {
+                type: 'json-template-editor'
+                parentProps?: JsonTemplateEditorProps
+            }
+          | {
+                type: 'feishu-template-editor'
+                parentProps?: FeishuTemplateEditorProps
+            }
+          | {
+                type: 'ding-template-editor'
+                parentProps?: DingTemplateEditorProps
+            }
       ) & {
           width?: number | string
           value?: any
@@ -217,6 +257,16 @@ const DataInput: FC<DataInputProps> = (props) => {
                         options={parentProps?.options || []}
                     />
                 )
+            case 'email-template-editor':
+                return <EmailTemplateEditor {...props} {...parentProps} />
+            case 'wechat-template-editor':
+                return <WechatTemplateEditor {...props} {...parentProps} />
+            case 'json-template-editor':
+                return <JsonTemplateEditor {...props} {...parentProps} />
+            case 'feishu-template-editor':
+                return <FeishuTemplateEditor {...props} {...parentProps} />
+            case 'ding-template-editor':
+                return <DingTemplateEditor {...props} {...parentProps} />
             default:
                 return (
                     <Input