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

2021-12-04 11:52:19 +08:00
parent b2efef13ff
commit 647f972110
12 changed files with 115 additions and 45 deletions
--- a/manager/src/main/java/com/usthe/manager/pojo/entity/JsonMapAttributeConverter.java
+++ b/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);
-    }
-}
--- a/manager/src/main/java/com/usthe/manager/pojo/entity/JsonOptionListAttributeConverter.java
+++ 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);
+    }
+}
--- 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;
+    }
 }
--- 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.");
--- 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:
--- 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
+  - 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
--- 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时,前端用switch展示开关
    type: boolean
    required: true
-    # 当type为boolean时,前端用switch展示开关
-    # 当type为radio单选框,checkbox复选框时,option表示可选项值列表
-    # option: Yes,No
--- 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[];
 }
--- 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>
--- 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>
--- 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}`)
  }
-
 }
--- 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,
 })