[monitor]feature:support hide advanced params define

common/src/main/java/com/usthe/common/entity/manager/ParamDefine.java

@@ -123,6 +123,12 @@ public class ParamDefine {
     private String valueAlias;
 
     /**
+     * 是否是高级隐藏参数 true-是 false-否
+     */
+    @ApiModelProperty(value = "是否是高级隐藏参数 true-是 false-否", example = "true", accessMode = READ_WRITE, position = 11)
+    private boolean hide = false;
+
+    /**
      * 此条记录创建者
      */
     @ApiModelProperty(value = "此条记录创建者", example = "tom", accessMode = READ_ONLY, position = 11)

manager/src/main/resources/define/param/A-example.yml

@@ -26,10 +26,12 @@ param:
     # 当type为text时,用limit表示字符串限制大小
     limit: 20
     required: false
+    hide: true
   - field: password
     name: 密码
     type: password
     required: false
+    hide: true
   - field: ssl
     name: 启动SSL
     # 当type为boolean时,前端用switch展示开关

web-app/src/app/pojo/ParamDefine.ts

@@ -12,4 +12,6 @@ export class ParamDefine {
   // 当type为key-value时有效,表示别名描述
   keyAlias!: string;
   valueAlias!: string;
+  // 此参数是否隐藏 即默认不显示, 在高级设置区显示
+  hide: boolean = false;
 }

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html

@@ -162,11 +162,151 @@
         </nz-form-control>
       </nz-form-item>
 
+      <nz-collapse [nzGhost]="true">
+        <nz-collapse-panel nzHeader="高级" [nzHeader]="extraColHeader" [nzShowArrow]="false">
+          <nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
+            <nz-form-label
+              *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
+              nzSpan="7"
+              [nzRequired]="paramDefine.required"
+              [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control
+              *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
+              nzSpan="8"
+              [nzErrorTip]="'validation.required' | i18n"
+            >
+              <input
+                nz-input
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                [name]="paramDefine.field"
+                [type]="paramDefine.type"
+                [id]="paramDefine.field"
+                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+              />
+            </nz-form-control>
+
+            <nz-form-label
+              *ngIf="paramDefine.type === 'textarea'"
+              nzSpan="7"
+              [nzRequired]="paramDefine.required"
+              [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'textarea'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <textarea
+                nz-input
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                [name]="paramDefine.field"
+                [id]="paramDefine.field"
+                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+                rows="3"
+              ></textarea>
+            </nz-form-control>
+
+            <nz-form-label
+              *ngIf="paramDefine.type === 'password'"
+              nzSpan="7"
+              [nzRequired]="paramDefine.required"
+              [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
+                <input
+                  [type]="passwordVisible ? 'text' : 'password'"
+                  nz-input
+                  placeholder="input password"
+                  [required]="paramDefine.required"
+                  [(ngModel)]="advancedParams[i].value"
+                  [id]="paramDefine.field"
+                  [name]="paramDefine.field"
+                  [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+                />
+              </nz-input-group>
+              <ng-template #suffixTemplate>
+                <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
+              </ng-template>
+            </nz-form-control>
+
+            <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <nz-input-number
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                [nzMin]="-1000"
+                [nzMax]="65535"
+                [nzStep]="1"
+                [nzPlaceHolder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+                [name]="paramDefine.field"
+                [id]="paramDefine.field"
+              ></nz-input-number>
+            </nz-form-control>
+
+            <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <nz-switch
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                [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="8" [nzErrorTip]="'validation.required' | i18n">
+              <nz-radio-group
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                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-label
+              *ngIf="paramDefine.type === 'key-value'"
+              nzSpan="7"
+              [nzRequired]="paramDefine.required"
+              [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <app-key-value-input
+                [(value)]="advancedParams[i].value"
+                [id]="paramDefine.field"
+                keyAlias="Header Name"
+                valueAlias="Header Value"
+              ></app-key-value-input>
+            </nz-form-control>
+          </nz-form-item>
+        </nz-collapse-panel>
+      </nz-collapse>
+      <ng-template #extraColHeader>
+        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip nzTooltipTitle="设置高级可选参数">
+          <span>高级设置</span>
+          <i nz-icon nzType="down-circle" nzTheme="outline"></i>
+        </button>
+      </ng-template>
+
       <nz-divider></nz-divider>
 
       <nz-form-item>
         <nz-form-label nzSpan="7" nzFor="intervals" nzTooltipTitle="监控周期性采集数据间隔时间,单位秒"> 采集间隔 </nz-form-label>
-        <nz-form-control nzSpan="10">
+        <nz-form-control nzSpan="8">
           <nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="604800" [nzStep]="60" name="intervals" id="intervals">
           </nz-input-number>
         </nz-form-control>

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.less

@@ -0,0 +1,8 @@
+.dynamic-button {
+  font-size: 20px;
+  margin-left: 45%;
+}
+
+.dynamic-button:hover {
+  font-size: 30px;
+}

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts

@@ -16,7 +16,7 @@ import { MonitorService } from '../../../service/monitor.service';
 @Component({
   selector: 'app-monitor-modify',
   templateUrl: './monitor-edit.component.html',
-  styles: []
+  styleUrls: ['./monitor-edit.component.less']
 })
 export class MonitorEditComponent implements OnInit {
   constructor(
@@ -30,6 +30,8 @@ export class MonitorEditComponent implements OnInit {
 
   paramDefines!: ParamDefine[];
   params!: Param[];
+  advancedParamDefines!: ParamDefine[];
+  advancedParams!: Param[];
   paramValueMap = new Map<String, Param>();
   monitor = new Monitor();
   profileForm: FormGroup = new FormGroup({});
@@ -59,7 +61,6 @@ export class MonitorEditComponent implements OnInit {
                 this.paramValueMap.set(item.field, item);
               });
             }
-            this.params = message.data.params;
             this.detected = message.data.detected ? message.data.detected : true;
           } else {
             console.warn(message.msg);
@@ -73,7 +74,10 @@ export class MonitorEditComponent implements OnInit {
         if (message.code === 0) {
           this.paramDefines = message.data;
           this.params = [];
-          this.paramDefines.forEach(define => {
+          this.advancedParams = [];
+          this.paramDefines = [];
+          this.advancedParamDefines = [];
+          message.data.forEach(define => {
             let param = this.paramValueMap.get(define.field);
             if (param === undefined) {
               param = new Param();
@@ -100,7 +104,13 @@ export class MonitorEditComponent implements OnInit {
                 }
               }
             }
-            this.params.push(param);
+            if (define.hide) {
+              this.advancedParams.push(param);
+              this.advancedParamDefines.push(define);
+            } else {
+              this.params.push(param);
+              this.paramDefines.push(define);
+            }
           });
         } else {
           console.warn(message.msg);
@@ -144,10 +154,15 @@ export class MonitorEditComponent implements OnInit {
         param.value = (param.value as string).trim();
       }
     });
+    this.advancedParams.forEach(param => {
+      if (param.value != null && typeof param.value == 'string') {
+        param.value = (param.value as string).trim();
+      }
+    });
     let addMonitor = {
       detected: this.detected,
       monitor: this.monitor,
-      params: this.params
+      params: this.params.concat(this.advancedParams)
     };
     this.isSpinning = true;
     this.monitorSvc.editMonitor(addMonitor).subscribe(
@@ -188,10 +203,15 @@ export class MonitorEditComponent implements OnInit {
         param.value = (param.value as string).trim();
       }
     });
+    this.advancedParams.forEach(param => {
+      if (param.value != null && typeof param.value == 'string') {
+        param.value = (param.value as string).trim();
+      }
+    });
     let detectMonitor = {
       detected: this.detected,
       monitor: this.monitor,
-      params: this.params
+      params: this.params.concat(this.advancedParams)
     };
     this.isSpinning = true;
     this.monitorSvc.detectMonitor(detectMonitor).subscribe(

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html

@@ -171,6 +171,146 @@
         </nz-form-control>
       </nz-form-item>
 
+      <nz-collapse [nzGhost]="true">
+        <nz-collapse-panel nzHeader="高级" [nzHeader]="extraColHeader" [nzShowArrow]="false">
+          <nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
+            <nz-form-label
+              *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
+              nzSpan="7"
+              [nzRequired]="paramDefine.required"
+              [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control
+              *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
+              nzSpan="8"
+              [nzErrorTip]="'validation.required' | i18n"
+            >
+              <input
+                nz-input
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                [name]="paramDefine.field"
+                [type]="paramDefine.type"
+                [id]="paramDefine.field"
+                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+              />
+            </nz-form-control>
+
+            <nz-form-label
+              *ngIf="paramDefine.type === 'textarea'"
+              nzSpan="7"
+              [nzRequired]="paramDefine.required"
+              [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'textarea'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <textarea
+                nz-input
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                [name]="paramDefine.field"
+                [id]="paramDefine.field"
+                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+                rows="3"
+              ></textarea>
+            </nz-form-control>
+
+            <nz-form-label
+              *ngIf="paramDefine.type === 'password'"
+              nzSpan="7"
+              [nzRequired]="paramDefine.required"
+              [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
+                <input
+                  [type]="passwordVisible ? 'text' : 'password'"
+                  nz-input
+                  placeholder="input password"
+                  [required]="paramDefine.required"
+                  [(ngModel)]="advancedParams[i].value"
+                  [id]="paramDefine.field"
+                  [name]="paramDefine.field"
+                  [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+                />
+              </nz-input-group>
+              <ng-template #suffixTemplate>
+                <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
+              </ng-template>
+            </nz-form-control>
+
+            <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <nz-input-number
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                [nzMin]="-1000"
+                [nzMax]="65535"
+                [nzStep]="1"
+                [nzPlaceHolder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
+                [name]="paramDefine.field"
+                [id]="paramDefine.field"
+              ></nz-input-number>
+            </nz-form-control>
+
+            <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <nz-switch
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                [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="8" [nzErrorTip]="'validation.required' | i18n">
+              <nz-radio-group
+                [(ngModel)]="advancedParams[i].value"
+                [required]="paramDefine.required"
+                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-label
+              *ngIf="paramDefine.type === 'key-value'"
+              nzSpan="7"
+              [nzRequired]="paramDefine.required"
+              [nzFor]="paramDefine.field"
+              >{{ paramDefine.name }}
+            </nz-form-label>
+            <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+              <app-key-value-input
+                [(value)]="advancedParams[i].value"
+                [id]="paramDefine.field"
+                keyAlias="Header Name"
+                valueAlias="Header Value"
+              ></app-key-value-input>
+            </nz-form-control>
+          </nz-form-item>
+        </nz-collapse-panel>
+      </nz-collapse>
+      <ng-template #extraColHeader>
+        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip nzTooltipTitle="设置高级可选参数">
+          <span>高级设置</span>
+          <i nz-icon nzType="down-circle" nzTheme="outline"></i>
+        </button>
+      </ng-template>
+
       <nz-divider></nz-divider>
 
       <nz-form-item>

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts

@@ -20,6 +20,8 @@ import { MonitorService } from '../../../service/monitor.service';
 export class MonitorNewComponent implements OnInit {
   paramDefines!: ParamDefine[];
   params!: Param[];
+  advancedParamDefines!: ParamDefine[];
+  advancedParams!: Param[];
   monitor!: Monitor;
   detected: boolean = true;
   passwordVisible: boolean = false;
@@ -53,9 +55,11 @@ export class MonitorNewComponent implements OnInit {
       )
       .subscribe(message => {
         if (message.code === 0) {
-          this.paramDefines = message.data;
           this.params = [];
-          this.paramDefines.forEach(define => {
+          this.advancedParams = [];
+          this.paramDefines = [];
+          this.advancedParamDefines = [];
+          message.data.forEach(define => {
             let param = new Param();
             param.field = define.field;
             if (define.type === 'number') {
@@ -77,7 +81,13 @@ export class MonitorNewComponent implements OnInit {
                 param.value = define.defaultValue;
               }
             }
-            this.params.push(param);
+            if (define.hide) {
+              this.advancedParams.push(param);
+              this.advancedParamDefines.push(define);
+            } else {
+              this.params.push(param);
+              this.paramDefines.push(define);
+            }
           });
         } else {
           console.warn(message.msg);
@@ -125,10 +135,15 @@ export class MonitorNewComponent implements OnInit {
         param.value = (param.value as string).trim();
       }
     });
+    this.advancedParams.forEach(param => {
+      if (param.value != null && typeof param.value == 'string') {
+        param.value = (param.value as string).trim();
+      }
+    });
     let addMonitor = {
       detected: this.detected,
       monitor: this.monitor,
-      params: this.params
+      params: this.params.concat(this.advancedParams)
     };
     this.isSpinning = true;
     this.monitorSvc.newMonitor(addMonitor).subscribe(
@@ -169,10 +184,15 @@ export class MonitorNewComponent implements OnInit {
         param.value = (param.value as string).trim();
       }
     });
+    this.advancedParams.forEach(param => {
+      if (param.value != null && typeof param.value == 'string') {
+        param.value = (param.value as string).trim();
+      }
+    });
     let detectMonitor = {
       detected: true,
       monitor: this.monitor,
-      params: this.params
+      params: this.params.concat(this.advancedParams)
     };
     this.isSpinning = true;
     this.monitorSvc.detectMonitor(detectMonitor).subscribe(

web-app/src/app/routes/monitor/monitor.module.ts

@@ -16,6 +16,7 @@ import { MonitorEditComponent } from './monitor-edit/monitor-edit.component';
 import { MonitorListComponent } from './monitor-list/monitor-list.component';
 import { MonitorNewComponent } from './monitor-new/monitor-new.component';
 import { MonitorRoutingModule } from './monitor-routing.module';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 
 const COMPONENTS: Array<Type<void>> = [
   MonitorNewComponent,
@@ -37,7 +38,8 @@ const COMPONENTS: Array<Type<void>> = [
     NzRadioModule,
     NgxEchartsModule,
     NzLayoutModule,
-    NzSpaceModule
+    NzSpaceModule,
+    NzCollapseModule
   ],
   declarations: COMPONENTS
 })