From 647f97211012906d5b275d7781ab8e35379fb830 Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Sat, 4 Dec 2021 11:52:19 +0800
Subject: [PATCH] =?UTF-8?q?[manager,web-app]=20=E7=9B=91=E6=8E=A7=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E6=94=AF=E6=8C=81=E5=8D=95=E9=80=89options?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../entity/JsonMapAttributeConverter.java     | 25 -------------------
 .../JsonOptionListAttributeConverter.java     | 25 +++++++++++++++++++
 .../manager/pojo/entity/ParamDefine.java      | 20 ++++++++++++---
 .../service/impl/MonitorServiceImpl.java      |  6 +++++
 .../main/resources/define/app/A-example.yml   |  2 +-
 .../main/resources/define/param/A-example.yml | 20 ++++++++++++---
 .../main/resources/define/param/website.yml   | 23 +++++++++++------
 web-app/src/app/pojo/ParamDefine.ts           |  3 ++-
 .../monitor-edit/monitor-edit.component.html  | 14 +++++++++++
 .../monitor-new/monitor-new.component.html    | 14 +++++++++++
 .../monitor-new/monitor-new.component.ts      |  4 +--
 .../src/app/routes/monitor/monitor.module.ts  |  4 ++-
 12 files changed, 115 insertions(+), 45 deletions(-)
 delete mode 100644 manager/src/main/java/com/usthe/manager/pojo/entity/JsonMapAttributeConverter.java
 create mode 100644 manager/src/main/java/com/usthe/manager/pojo/entity/JsonOptionListAttributeConverter.java

diff --git a/manager/src/main/java/com/usthe/manager/pojo/entity/JsonMapAttributeConverter.java b/manager/src/main/java/com/usthe/manager/pojo/entity/JsonMapAttributeConverter.java
deleted file mode 100644
index b90fa3d..0000000
--- a/manager/src/main/java/com/usthe/manager/pojo/entity/JsonMapAttributeConverter.java
+++ /dev/null
@@ -1,25 +0,0 @@
-package com.usthe.manager.pojo.entity;
-
-import com.usthe.common.util.GsonUtil;
-
-import javax.persistence.AttributeConverter;
-import java.util.Map;
-
-/**
- * json 互转map对象字段为数据String字段
- * @author tom
- * @date 2021/12/4 07:54
- */
-public class JsonMapAttributeConverter implements AttributeConverter<Map<String,String>, String> {
-
-    @Override
-    public String convertToDatabaseColumn(Map<String,String> attribute) {
-        return GsonUtil.toJson(attribute);
-
-    }
-
-    @Override
-    public Map<String,String> convertToEntityAttribute(String dbData) {
-        return GsonUtil.fromJson(dbData, Map.class);
-    }
-}
diff --git a/manager/src/main/java/com/usthe/manager/pojo/entity/JsonOptionListAttributeConverter.java b/manager/src/main/java/com/usthe/manager/pojo/entity/JsonOptionListAttributeConverter.java
new file mode 100644
index 0000000..2142fd6
--- /dev/null
+++ b/manager/src/main/java/com/usthe/manager/pojo/entity/JsonOptionListAttributeConverter.java
@@ -0,0 +1,25 @@
+package com.usthe.manager.pojo.entity;
+
+import com.usthe.common.util.GsonUtil;
+
+import javax.persistence.AttributeConverter;
+import java.util.List;
+
+/**
+ * json 互转map对象字段为数据String字段
+ * @author tom
+ * @date 2021/12/4 07:54
+ */
+public class JsonOptionListAttributeConverter implements AttributeConverter<List<ParamDefine.Option>, String> {
+
+    @Override
+    public String convertToDatabaseColumn(List<ParamDefine.Option> attribute) {
+        return GsonUtil.toJson(attribute);
+
+    }
+
+    @Override
+    public List<ParamDefine.Option> convertToEntityAttribute(String dbData) {
+        return GsonUtil.fromJson(dbData, List.class);
+    }
+}
diff --git a/manager/src/main/java/com/usthe/manager/pojo/entity/ParamDefine.java b/manager/src/main/java/com/usthe/manager/pojo/entity/ParamDefine.java
index b98bd1c..5ec4368 100644
--- a/manager/src/main/java/com/usthe/manager/pojo/entity/ParamDefine.java
+++ b/manager/src/main/java/com/usthe/manager/pojo/entity/ParamDefine.java
@@ -15,7 +15,7 @@ import javax.persistence.GenerationType;
 import javax.persistence.Id;
 import javax.persistence.Table;
 import java.time.LocalDateTime;
-import java.util.Map;
+import java.util.List;
 
 import static io.swagger.annotations.ApiModelProperty.AccessMode.READ_ONLY;
 import static io.swagger.annotations.ApiModelProperty.AccessMode.READ_WRITE;
@@ -107,8 +107,8 @@ public class ParamDefine {
      */
     @ApiModelProperty(value = "当type为radio单选框,checkbox复选框时,option表示可选项值列表", example = "{key1,value1}", accessMode = READ_WRITE, position = 8)
     @Column(name = "param_options")
-    @Convert(converter = JsonMapAttributeConverter.class)
-    private Map<String,String> options;
+    @Convert(converter = JsonOptionListAttributeConverter.class)
+    private List<Option> options;
 
     /**
      * 此条记录创建者
@@ -133,4 +133,18 @@ public class ParamDefine {
      */
     @ApiModelProperty(value = "记录最新修改时间(毫秒时间戳)", example = "1612198444000", accessMode = READ_ONLY, position = 12)
     private LocalDateTime gmtUpdate;
+
+    @Data
+    @AllArgsConstructor
+    @NoArgsConstructor
+    public static final class Option {
+        /**
+         * 值显示标签
+         */
+        private String label;
+        /**
+         * 可选值
+         */
+        private String value;
+    }
 }
diff --git a/manager/src/main/java/com/usthe/manager/service/impl/MonitorServiceImpl.java b/manager/src/main/java/com/usthe/manager/service/impl/MonitorServiceImpl.java
index 77a85b3..733da49 100644
--- a/manager/src/main/java/com/usthe/manager/service/impl/MonitorServiceImpl.java
+++ b/manager/src/main/java/com/usthe/manager/service/impl/MonitorServiceImpl.java
@@ -187,6 +187,12 @@ public class MonitorServiceImpl implements MonitorService {
                                         + booleanValue + " is invalid boolean value.");
                             }
                             break;
+                        case "radio":
+                            // todo radio校验
+                            break;
+                        case "checkbox":
+                            // todo checkbox校验
+                            break;
                         // todo 更多参数定义与实际值格式校验
                         default:
                             throw new IllegalArgumentException("ParamDefine type " + paramDefine.getType() + " is invalid.");
diff --git a/manager/src/main/resources/define/app/A-example.yml b/manager/src/main/resources/define/app/A-example.yml
index bf38f34..801642e 100644
--- a/manager/src/main/resources/define/app/A-example.yml
+++ b/manager/src/main/resources/define/app/A-example.yml
@@ -1,5 +1,5 @@
 # 监控应用类型名称(与文件名保持一致) eg: linux windows tomcat mysql aws...
-app: TanCloud
+app: exapmle_type
 # 参数映射map. type是参数类型: 0-number数字, 1-string明文字符串, 2-secret加密字符串
 # 强制固定必须参数 - host
 configmap:
diff --git a/manager/src/main/resources/define/param/A-example.yml b/manager/src/main/resources/define/param/A-example.yml
index fb05db4..842c8f8 100644
--- a/manager/src/main/resources/define/param/A-example.yml
+++ b/manager/src/main/resources/define/param/A-example.yml
@@ -1,5 +1,5 @@
 # 监控应用类型名称(与文件名保持一致) eg: linux windows tomcat mysql aws...
-app: TanCloud
+app: exapmle_type
 # 强制固定必须参数 - host(ipv4,ipv6,域名)
 param:
     # field-字段名称标识符
@@ -32,8 +32,20 @@ param:
     required: false
   - field: ssl
     name: 启动SSL
+    # 当type为boolean时,前端用switch展示开关
     type: boolean
     required: false
-    # 当type为boolean时,前端用switch展示开关
-    # 当type为radio单选框,checkbox复选框时,option表示可选项值列表
-    # option: Yes,No
\ No newline at end of file
+  - field: method
+    name: 请求方式
+    type: radio
+    required: true
+    # 当type为radio单选框,checkbox复选框时,option表示可选项值列表 {name1:value1,name2:value2}
+    options:
+      - label: GET请求
+        value: GET
+      - label: POST请求
+        value: POST
+      - label: PUT请求
+        value: PUT
+      - label: DELETE请求
+        value: DELETE
\ No newline at end of file
diff --git a/manager/src/main/resources/define/param/website.yml b/manager/src/main/resources/define/param/website.yml
index bd2bf34..144574a 100644
--- a/manager/src/main/resources/define/param/website.yml
+++ b/manager/src/main/resources/define/param/website.yml
@@ -23,13 +23,22 @@ param:
     # 当type为text时,用limit表示字符串限制大小
     limit: 100
     required: true
-    placeholder: 'eg:/index.html'
+    placeholder: '请输入网站的URI，例如:/index.html'
   - field: method
     name: 请求方式
-    type: text
-    # 当type为text时,用limit表示字符串限制大小
-    limit: 20
+    type: radio
     required: true
+    # 当type为radio单选框,checkbox复选框时,option表示可选项值列表 {name1:value1,name2:value2}
+    options:
+      - label: GET请求
+        value: GET
+      - label: POST请求
+        value: POST
+      - label: PUT请求
+        value: PUT
+      - label: DELETE请求
+        value: DELETE
+
   - field: username
     name: 用户名
     type: text
@@ -42,8 +51,6 @@ param:
     required: false
   - field: ssl
     name: 使用SSL
-    type: boolean
-    required: true
     # 当type为boolean时,前端用switch展示开关
-    # 当type为radio单选框,checkbox复选框时,option表示可选项值列表
-    # option: Yes,No
\ No newline at end of file
+    type: boolean
+    required: true
\ No newline at end of file
diff --git a/web-app/src/app/pojo/ParamDefine.ts b/web-app/src/app/pojo/ParamDefine.ts
index 43405b4..10fc0ba 100644
--- a/web-app/src/app/pojo/ParamDefine.ts
+++ b/web-app/src/app/pojo/ParamDefine.ts
@@ -7,5 +7,6 @@ export class ParamDefine {
   placeholder!: string;
   range: string | undefined;
   limit: number | undefined;
-  options: string | undefined;
+  //'[{"label":"GET请求","value":"GET"},{"label":"PUT请求","value":"PUT"}]'
+  options!: any[];
 }
diff --git a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
index e3278be..bf160e2 100644
--- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
+++ b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
@@ -96,6 +96,20 @@
           <nz-switch [(ngModel)]="params[i].value" [name]="paramDefine.field" [id]="paramDefine.field"></nz-switch>
         </nz-form-control>
 
+        <nz-form-label *ngIf="paramDefine.type === 'radio'"
+                       nzSpan="7"
+                       [nzRequired]="paramDefine.required"
+                       [nzFor]= "paramDefine.field">{{paramDefine.name}}
+        </nz-form-label>
+        <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="10">
+          <nz-radio-group [(ngModel)]="params[i].value" nzButtonStyle="solid"
+                          [name]="paramDefine.field" [id]="paramDefine.field">
+            <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
+              {{optionItem.label}}
+            </label>
+          </nz-radio-group>
+        </nz-form-control>
+
       </nz-form-item >
 
       <nz-divider></nz-divider>
diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
index 5fb0b83..9dda2fb 100644
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
+++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
@@ -96,6 +96,20 @@
           <nz-switch [(ngModel)]="params[i].value" [name]="paramDefine.field" [id]="paramDefine.field"></nz-switch>
         </nz-form-control>
 
+        <nz-form-label *ngIf="paramDefine.type === 'radio'"
+                       nzSpan="7"
+                       [nzRequired]="paramDefine.required"
+                       [nzFor]= "paramDefine.field">{{paramDefine.name}}
+        </nz-form-label>
+        <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="10">
+          <nz-radio-group [(ngModel)]="params[i].value" nzButtonStyle="solid"
+                          [name]="paramDefine.field" [id]="paramDefine.field">
+            <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
+              {{optionItem.label}}
+            </label>
+          </nz-radio-group>
+        </nz-form-control>
+
       </nz-form-item >
 
       <nz-divider></nz-divider>
diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
index fd73e61..98151fd 100644
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
+++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {ParamDefine} from "../../../pojo/ParamDefine";
 import {AppDefineService} from "../../../service/app-define.service";
 import {ActivatedRoute, ParamMap, Router} from "@angular/router";
@@ -30,6 +30,7 @@ export class MonitorNewComponent implements OnInit {
               private route: ActivatedRoute,
               private router: Router,
               private notifySvc: NzNotificationService,
+              private cdr: ChangeDetectorRef,
               private i18n: I18NService,
               private formBuilder: FormBuilder) {
     this.monitor = new Monitor();
@@ -134,5 +135,4 @@ export class MonitorNewComponent implements OnInit {
     app = app ? app : '';
     this.router.navigateByUrl(`/monitors?app=${app}`)
   }
-
 }
diff --git a/web-app/src/app/routes/monitor/monitor.module.ts b/web-app/src/app/routes/monitor/monitor.module.ts
index fe48e42..52deba9 100644
--- a/web-app/src/app/routes/monitor/monitor.module.ts
+++ b/web-app/src/app/routes/monitor/monitor.module.ts
@@ -9,6 +9,7 @@ import {NzBreadCrumbModule} from "ng-zorro-antd/breadcrumb";
 import {NzDividerModule} from "ng-zorro-antd/divider";
 import {NzSwitchModule} from "ng-zorro-antd/switch";
 import {NzTagModule} from "ng-zorro-antd/tag";
+import {NzRadioModule} from "ng-zorro-antd/radio";
 
 const COMPONENTS: Type<void>[] = [
   MonitorNewComponent,
@@ -24,7 +25,8 @@ const COMPONENTS: Type<void>[] = [
         NzBreadCrumbModule,
         NzDividerModule,
         NzSwitchModule,
-        NzTagModule
+        NzTagModule,
+        NzRadioModule
     ],
   declarations: COMPONENTS,
 })