[manager,web-app] 监控参数支持单选options

manager/src/main/java/com/usthe/manager/pojo/entity/JsonMapAttributeConverter.java

@@ -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);
-    }
-}

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);
+    }
+}

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;
+    }
 }

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.");

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:

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
+  - 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

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
+    type: boolean
+    required: true

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[];
 }

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>

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>

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}`)
   }
-
 }

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,
 })