Complete task apache#2600

web-app/src/app/routes/setting/plugins/plugin.component.html

@@ -92,6 +92,9 @@
       <!--      <td nzAlign="center">{{ data.enableStatus }}</td>-->
       <td nzAlign="center">
         <div class="actions">
+          <button nz-button nzType="primary" (click)="onEditPluginParamDefine(data.id)" nz-tooltip [nzTooltipTitle]="'plugin.edit' | i18n">
+            <i nz-icon nzType="edit" nzTheme="outline"></i>
+          </button>
           <button
             nz-button
             nzType="primary"
@@ -159,3 +162,24 @@
     </form>
   </div>
 </nz-modal>
+
+<nz-modal
+  [(nzVisible)]="isEditPluginParamDefineModalVisible"
+  [nzTitle]="'plugin.edit' | i18n"
+  (nzOnCancel)="onEditPluginParamDefineModalCancel()"
+  (nzOnOk)="onEditPluginParamDefineModalOk()"
+  nzMaskClosable="false"
+>
+  <div *nzModalContent class="-inner-content">
+    <form nz-form #form="ngForm">
+      <ng-container *ngFor="let paramDefine of paramDefines; let i = index">
+        <nz-form-item>
+          <nz-form-label nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field">{{ paramDefine.name }} </nz-form-label>
+          <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+            <app-form-field [item]="paramDefine" [name]="paramDefine.field" [(ngModel)]="params[paramDefine.field].paramValue" />
+          </nz-form-control>
+        </nz-form-item>
+      </ng-container>
+    </form>
+  </div>
+</nz-modal>

web-app/src/app/routes/setting/plugins/plugin.component.ts

@@ -27,6 +27,7 @@ import { NzTableQueryParams } from 'ng-zorro-antd/table';
 import { NzUploadFile } from 'ng-zorro-antd/upload';
 import { finalize } from 'rxjs/operators';
 
+import { ParamDefine } from '../../../pojo/ParamDefine';
 import { Plugin } from '../../../pojo/Plugin';
 import { PluginService } from '../../../service/plugin.service';
 
@@ -47,8 +48,10 @@ export class SettingPluginsComponent implements OnInit {
       jarFile: [null, [Validators.required]],
       enableStatus: [true, [Validators.required]]
     });
+    this.lang = this.i18nSvc.defaultLang;
   }
 
+  lang: string;
   pageIndex: number = 1;
   pageSize: number = 8;
   total: number = 0;
@@ -275,4 +278,58 @@ export class SettingPluginsComponent implements OnInit {
     });
     this.fileList = [];
   }
+
+  params: any = {};
+  paramDefines!: ParamDefine[];
+  isEditPluginParamDefineModalVisible = false;
+
+  onEditPluginParamDefine(pluginId: number) {
+    const getPluginParamDefine$ = this.pluginService
+      .getPluginParamDefine(pluginId)
+      .pipe(
+        finalize(() => {
+          getPluginParamDefine$.unsubscribe();
+        })
+      )
+      .subscribe((message: any) => {
+        if (message.code === 0) {
+          this.paramDefines = message.data.map((i: any) => {
+            this.params[i.field] = {
+              pluginMetadataId: pluginId,
+              // Parameter type 0: number 1: string 2: encrypted string 3: json string mapped by map
+              type: i.type === 'number' ? 0 : i.type === 'text' ? 1 : i.type === 'json' ? 3 : 2,
+              field: i.field,
+              paramValue: null
+            };
+            i.name = i.name[this.lang];
+            return i;
+          });
+          this.isEditPluginParamDefineModalVisible = true;
+        } else {
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'), message.msg);
+        }
+      });
+  }
+
+  onEditPluginParamDefineModalCancel() {
+    this.isEditPluginParamDefineModalVisible = false;
+  }
+
+  onEditPluginParamDefineModalOk() {
+    const savePluginParamDefine$ = this.pluginService
+      .savePluginParamDefine(Object.values(this.params))
+      .pipe(
+        finalize(() => {
+          savePluginParamDefine$.unsubscribe();
+        })
+      )
+      .subscribe((message: any) => {
+        if (message.code === 0) {
+          this.isEditPluginParamDefineModalVisible = false;
+          this.notifySvc.success(this.i18nSvc.fanyi('common.notify.edit-success'), '');
+        } else {
+          this.notifySvc.error(this.i18nSvc.fanyi('common.notify.edit-fail'), message.msg);
+        }
+      });
+  }
 }

web-app/src/app/service/plugin.service.ts

@@ -64,20 +64,6 @@ export class PluginService {
     return this.http.put<Message<any>>(plugin_uri, body);
   }
 
-  public newTags(body: Tag[]): Observable<Message<any>> {
-    return this.http.post<Message<any>>(plugin_uri, body);
-  }
-
-  public newTag(body: Tag): Observable<Message<any>> {
-    const tags = [];
-    tags.push(body);
-    return this.http.post<Message<any>>(plugin_uri, tags);
-  }
-
-  public editTag(body: Tag): Observable<Message<any>> {
-    return this.http.put<Message<any>>(plugin_uri, body);
-  }
-
   public deletePlugins(pluginIds: Set<number>): Observable<Message<any>> {
     let httpParams = new HttpParams();
     pluginIds.forEach(pluginId => {
@@ -86,4 +72,17 @@ export class PluginService {
     const options = { params: httpParams };
     return this.http.delete<Message<any>>(plugin_uri, options);
   }
+
+  public getPluginParamDefine(pluginId: number): Observable<Message<any>> {
+    let httpParams = new HttpParams();
+    httpParams = httpParams.appendAll({
+      pluginMetadataId: pluginId
+    });
+    const options = { params: httpParams };
+    return this.http.get<Message<any>>(`${plugin_uri}/getParamDefine`, options);
+  }
+
+  public savePluginParamDefine(body: any): Observable<Message<any>> {
+    return this.http.post<Message<any>>(`${plugin_uri}/saveParams`, body);
+  }
 }

web-app/src/assets/i18n/en-US.json

@@ -551,6 +551,7 @@
   "plugin.delete": "Delete Plugin",
   "plugin.type.POST_ALERT": "POST ALERT",
   "plugin.search": "Search plugins",
+  "plugin.edit": "Edit plugin",
   "define.help": "The monitor templates define each monitoring type, parameter variable, metrics info, collection protocol, etc. You can select an existing monitoring template from the drop-down menu then make modifications according to your own needs. The bottom-left area is the compare area and the bottom-right area is the editing place. <br> You can also click \"New Monitor Type\" to custom define an new type. Currently supported protocols include<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-http'> HTTP</a>, <a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-jdbc'>JDBC</a>, <a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-ssh'>SSH</a>, <a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-jmx'>JMX</a>, <a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-snmp'> SNMP</a>. <a class='help_module_content' href='https://hertzbeat.apache.org/zh-cn/docs/template'>Monitor Templates</a>.",
   "define.help.link": "https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-point/",
   "define.save-apply": "Save And Apply",

web-app/src/assets/i18n/zh-CN.json

@@ -549,6 +549,7 @@
   "plugin.type": "插件类型",
   "plugin.type.POST_ALERT": "告警后",
   "plugin.search": "搜索插件",
+  "plugin.edit": "编辑插件",
   "define.help": "监控模版定义每一个监控类型，类型的参数变量，指标信息，采集协议等。您可根据需求在下拉菜单中选择已有监控模板修改。左下区域为对照区，右下区域为编辑区。<br>您也可以点击“<i>新增监控类型</i>”来自定义新的的监控类型，目前支持 <a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-http'> HTTP 协议</a>，<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-jdbc'>JDBC协议</a>，<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-ssh'>SSH协议</a>，<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-jmx'> JMX 协议</a>，<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-snmp'> SNMP 协议</a>，<a class='help_module_content' href='https://hertzbeat.apache.org/zh-cn/docs/template'>点击查看监控模板</a>。\n",
   "define.help.link": "https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-point/",
   "define.save-apply": "保存并应用",

web-app/src/assets/i18n/zh-TW.json

@@ -548,6 +548,7 @@
   "plugin.delete": "刪除插件",
   "plugin.type.POST_ALERT": "告警後",
   "plugin.search": "搜尋插件",
+  "plugin.edit": "編輯插件",
   "define.help": "監控模版定義每一個監控類型，類型的參數變量，指標信息，採集協議等。您可根據需求在下拉功能表中選擇已有監控模版進行修改。右下區域為編輯區，左下區域為對照區。<br>您也可以點擊“<i>新增監控類型</i>”來自定義新的的監控類型，現支持<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-http'> HTTP協議</a>，<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-jdbc'>JDBC協定</a>，<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-ssh'>SSH協定</a>，<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-jmx'> JMX協定</a>，<a href='https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-snmp'> SNMP協定</a>，<a  href='https://hertzbeat.apache.org/zh-cn/docs/template'>點擊查看監控範本</a>。",
   "define.help.link": "https://hertzbeat.apache.org/zh-cn/docs/advanced/extend-point/",
   "define.save-apply": "保存並應用",