monitor center add search type modal

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

@@ -26,8 +26,6 @@
         </nz-form-control>
       </nz-form-item>
 
-      <nz-divider></nz-divider>
-
       <nz-form-item *ngFor="let paramDefine of paramDefines; let i = index">
         <nz-form-label
           *ngIf="paramDefine.field !== 'host' && (paramDefine.type === 'text' || paramDefine.type === 'array')"
@@ -304,8 +302,6 @@
         </button>
       </ng-template>
 
-      <nz-divider></nz-divider>
-
       <nz-form-item>
         <nz-form-label nzSpan="7" nzFor="collector" [nzTooltipTitle]="'monitor.collector.tip' | i18n">
           {{ 'monitor.collector' | i18n }}

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

@@ -24,6 +24,11 @@
     </a>
   </button>
 
+  <button *ngIf="app == undefined" nz-button nzType="primary" (click)="onAppSwitchModalOpen()">
+    <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+    {{ 'monitors.new-monitor' | i18n }}
+  </button>
+
   <button nz-button nzType="primary" (click)="onEnableManageMonitors()" class="mobile-hide">
     <i nz-icon nzType="up-circle" nzTheme="outline"></i>
     {{ 'monitors.enable' | i18n }}
@@ -254,3 +259,55 @@
     </p>
   </ng-container>
 </nz-modal>
+
+<!-- filter app type modal -->
+<nz-modal
+  [(nzVisible)]="appSwitchModalVisible"
+  (nzOnCancel)="onAppSwitchModalCancel()"
+  nzClosable="false"
+  nzWidth="30%"
+  [nzOkText]="null"
+  [nzCancelText]="null"
+  [nzOkLoading]="appSearchLoading"
+>
+  <div *nzModalContent class="-inner-content">
+    <div style="text-align: center">
+      <nz-input-group nzSize="large" nzSearch="true" style="width: 97%; border-radius: 12px" [nzPrefix]="suffixIconSearch">
+        <input
+          nz-input
+          type="text"
+          [placeholder]="'monitors.center.search.placeholder' | i18n"
+          nzSize="default"
+          (keyup.enter)="searchSwitchApp()"
+          [(ngModel)]="appSearchContent"
+        />
+      </nz-input-group>
+      <ng-template #suffixIconSearch>
+        <span nz-icon nzType="search"></span>
+      </ng-template>
+    </div>
+    <div style="min-height: 100px; margin-top: 20px">
+      <nz-list nzSplit="false" style="max-height: 400px; overflow-y: scroll">
+        <nz-spin [nzSpinning]="appSearchLoading">
+          <nz-list-item
+            *ngFor="let appItem of appSearchResult"
+            nzNoFlex="true"
+            class="switch-app"
+            routerLink="/monitors/new"
+            (keyup.enter)="gotoMonitorAddDetail(appItem.value)"
+            [queryParams]="{ app: appItem.value }"
+          >
+            <button nz-button nzType="default" style="margin-left: 24px">
+              <i nz-icon [nzType]="getAppIconName(appItem.value)" nzTheme="outline"></i>
+              {{ appItem.categoryLabel }}
+            </button>
+            <button nz-button nzType="default" style="left: 40%; position: absolute">
+              {{ appItem.label }}
+            </button>
+            <span style="right: 10px; position: absolute"><i nz-icon nzType="arrow-right" nzTheme="outline"></i></span>
+          </nz-list-item>
+        </nz-spin>
+      </nz-list>
+    </div>
+  </div>
+</nz-modal>

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

@@ -0,0 +1,8 @@
+@import "~src/styles/theme";
+
+.switch-app {
+  border-radius: 6px;
+}
+.switch-app:hover {
+  background-color: @primary-color;
+}

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

@@ -11,14 +11,15 @@ import { NzUploadChangeParam } from 'ng-zorro-antd/upload';
 import { finalize } from 'rxjs/operators';
 
 import { Monitor } from '../../../pojo/Monitor';
+import { AppDefineService } from '../../../service/app-define.service';
 import { MemoryStorageService } from '../../../service/memory-storage.service';
 import { MonitorService } from '../../../service/monitor.service';
 import { formatTagName } from '../../../shared/utils/common-util';
 
 @Component({
   selector: 'app-monitor-list',
   templateUrl: './monitor-list.component.html',
-  styles: []
+  styleUrls: ['./monitor-list.component.less']
 })
 export class MonitorListComponent implements OnInit {
   constructor(
@@ -29,6 +30,7 @@ export class MonitorListComponent implements OnInit {
     private monitorSvc: MonitorService,
     private messageSvc: NzMessageService,
     private storageSvc: MemoryStorageService,
+    private appDefineSvc: AppDefineService,
     @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
   ) {}
 
@@ -47,6 +49,12 @@ export class MonitorListComponent implements OnInit {
   // 过滤搜索
   filterContent!: string;
   filterStatus: number = 9;
+  // app type search filter
+  appSwitchModalVisible = false;
+  appSearchContent = '';
+  appSearchOrigin: any[] = [];
+  appSearchResult: any[] = [];
+  appSearchLoading = false;
 
   switchExportTypeModalFooter: ModalButtonOptions[] = [
     { label: this.i18nSvc.fanyi('common.button.cancel'), type: 'default', onClick: () => (this.isSwitchExportTypeModalVisible = false) }
@@ -456,5 +464,63 @@ export class MonitorListComponent implements OnInit {
     this.changeMonitorTable(sortField, sortOrder);
   }
 
+  // begin: app type search filter
+
+  onAppSwitchModalOpen() {
+    this.appSwitchModalVisible = true;
+    this.appSearchLoading = true;
+    const getHierarchy$ = this.appDefineSvc
+      .getAppHierarchy(this.i18nSvc.defaultLang)
+      .pipe(
+        finalize(() => {
+          getHierarchy$.unsubscribe();
+          this.appSearchLoading = false;
+        })
+      )
+      .subscribe(
+        message => {
+          if (message.code === 0) {
+            this.appSearchOrigin = [];
+            this.appSearchResult = [];
+            message.data.forEach((app: any) => {
+              app.categoryLabel = this.i18nSvc.fanyi(`monitor.category.${app.category}`);
+              this.appSearchOrigin.push(app);
+            });
+            this.appSearchOrigin = this.appSearchOrigin.sort((a, b) => a.category?.localeCompare(b.category));
+            this.appSearchResult = this.appSearchOrigin;
+          } else {
+            console.warn(message.msg);
+          }
+        },
+        error => {
+          console.warn(error.msg);
+        }
+      );
+  }
+
+  onAppSwitchModalCancel() {
+    this.appSwitchModalVisible = false;
+  }
+
+  gotoMonitorAddDetail(app: string) {
+    this.router.navigateByUrl(`/monitors/new?app=${app}`);
+  }
+
+  searchSwitchApp() {
+    if (this.appSearchContent === '' || this.appSearchContent == null) {
+      this.appSearchResult = this.appSearchOrigin;
+    } else {
+      this.appSearchResult = this.appSearchOrigin.filter(
+        app =>
+          app.label.toLowerCase().includes(this.appSearchContent.toLowerCase()) ||
+          app.categoryLabel.toLowerCase().includes(this.appSearchContent.toLowerCase()) ||
+          app.value.toLowerCase().includes(this.appSearchContent.toLowerCase()) ||
+          app.category.toLowerCase().includes(this.appSearchContent.toLowerCase())
+      );
+    }
+  }
+
+  // end: app type search filter
+
   protected readonly sliceTagName = formatTagName;
 }

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

@@ -35,8 +35,6 @@
         </nz-form-control>
       </nz-form-item>
 
-      <nz-divider></nz-divider>
-
       <nz-form-item *ngFor="let paramDefine of paramDefines; let i = index">
         <nz-form-label
           *ngIf="paramDefine.field !== 'host' && (paramDefine.type === 'text' || paramDefine.type === 'array')"
@@ -173,7 +171,7 @@
         </nz-form-control>
       </nz-form-item>
 
-      <nz-collapse [nzGhost]="true">
+      <nz-collapse [nzGhost]="true" style="margin-bottom: 16px">
         <nz-collapse-panel [nzHeader]="extraColHeader" [nzShowArrow]="false">
           <nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
             <nz-form-label
@@ -313,8 +311,6 @@
         </button>
       </ng-template>
 
-      <nz-divider></nz-divider>
-
       <nz-form-item>
         <nz-form-label nzSpan="7" nzFor="collector" [nzTooltipTitle]="'monitor.collector.tip' | i18n">
           {{ 'monitor.collector' | i18n }}

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

@@ -5,6 +5,7 @@ import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
 import { NzCollapseModule } from 'ng-zorro-antd/collapse';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
+import { NzListModule } from 'ng-zorro-antd/list';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzSpaceModule } from 'ng-zorro-antd/space';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
@@ -43,7 +44,8 @@ const COMPONENTS: Array<Type<void>> = [
     NzSpaceModule,
     NzCollapseModule,
     ClipboardModule,
-    NzUploadModule
+    NzUploadModule,
+    NzListModule
   ],
   declarations: COMPONENTS
 })

web-app/src/app/routes/setting/define/define.component.html

@@ -9,6 +9,12 @@
 <nz-layout style="min-height: 100vh">
   <nz-sider style="height: 100%; overflow: auto; margin: 4px" [nzTrigger]="null">
     <ul nz-menu nzTheme="light" nzMode="inline" nzInlineCollapsed="false">
+      <li *ngIf="currentApp != null" style="text-align: center; margin-top: 12px">
+        <button nzGhost nz-button nzType="primary" nzSize="small" (click)="onNewMonitorDefine()">
+          <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
+          {{ 'define.new' | i18n }}
+        </button>
+      </li>
       <li nz-submenu [nzTitle]="'menu.monitor.service' | i18n">
         <ul>
           <li
@@ -146,21 +152,26 @@
   <nz-layout>
     <nz-content>
       <div style="margin: 10px 10px 4px 10px">
-        <button nzGhost *ngIf="currentApp != null" nz-button nzType="primary">
+        <button nzGhost *ngIf="currentApp != null" nz-button nzType="primary" routerLink="/monitors" [queryParams]="{ app: currentApp }">
           <i nz-icon nzType="file-text" nzTheme="outline"></i>
           {{ 'app-' + currentApp + '.yml' }}
+          <i nz-icon nzType="more" nzTheme="outline"></i>
         </button>
         <button *ngIf="code != originalCode" nz-button nzType="primary" [nzLoading]="saveLoading" (click)="onSaveAndApply()">
           <i nz-icon nzType="save" nzTheme="outline"></i>
           {{ 'define.save-apply' | i18n }}
         </button>
-        <button *ngIf="currentApp != null" nz-button nzType="primary" (click)="onNewMonitorDefine()">
-          <i nz-icon nzType="save" nzTheme="outline"></i>
-          {{ 'define.new' | i18n }}
+        <button *ngIf="false" nz-button nzType="primary" (click)="onDeleteDefineYml()">
+          <i nz-icon nzType="up-circle" nzTheme="outline"></i>
+          {{ 'define.enable' | i18n : { app: currentApp } }}
+        </button>
+        <button *ngIf="false" nz-button nzDanger nzType="primary" (click)="onDeleteDefineYml()">
+          <i nz-icon nzType="down-circle" nzTheme="outline"></i>
+          {{ 'define.disable' | i18n : { app: currentApp } }}
         </button>
         <button *ngIf="currentApp != null" nz-button nzDanger nzType="primary" (click)="onDeleteDefineYml()">
           <i nz-icon nzType="delete" nzTheme="outline"></i>
-          {{ 'define.delete' | i18n }}
+          {{ 'define.delete' | i18n : { app: currentApp } }}
         </button>
 
         <nz-switch

web-app/src/app/shared/components/help-massage-show/help-massage-show.component.ts

@@ -23,17 +23,7 @@ export class HelpMassageShowComponent implements OnInit {
   module_name!: string;
   @Input()
   icon_name: string = 'home';
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private modal: NzModalService,
-    private notifySvc: NzNotificationService,
-    private monitorSvc: MonitorService,
-    private messageSvc: NzMessageService,
-    private rd2: Renderer2,
-    private el: ElementRef,
-    @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
-  ) {}
+  constructor(private route: ActivatedRoute, private rd2: Renderer2, private el: ElementRef) {}
   isCollapsed: boolean = false;
   targetHeight: number = 140;
   collapse_expand: string = 'collapse';

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

@@ -61,9 +61,9 @@
     "": "Monitor",
     "availability": "Monitor Availability",
     "name": "Task Name",
-    "name.tip": "Monitor task name, the name needs to be unique",
+    "name.tip": "Monitoring task name",
     "host": "Target Host",
-    "host.tip": "The monitored peer IP or domain name",
+    "host.tip": "The monitored peer ip or domain name",
     "description": "Description",
     "description.tip": "Description and remarks",
     "intervals": "Intervals",
@@ -85,7 +85,8 @@
       "program": "Application",
       "webserver": "Webserver",
       "cache": "Cache",
-      "bigdata": "Bigdata"
+      "bigdata": "Bigdata",
+      "auto": "Auto Task"
     },
     "app": {
       "": "Monitor Type",
@@ -349,9 +350,11 @@
   "monitor_icon.webserver": "database",
   "monitors.center.help": "Monitoring Center is the monitoring resource management portal of HertzBeat. Displays the currently added monitors in the form of list, and supports tag grouping, query filtering, and access to view monitoring details. <br> You can add, modify, delete, cancel monitoring, import/export, batch management, and other operations on the monitors.",
   "monitors.center.help.link": "https://hertzbeat.com/docs/",
+  "monitors.center.search.placeholder": "Search monitor type to add: Linux, Redis",
   "monitors.list": "Monitor List",
   "monitors.spinning-tip.detecting": "Available Detecting",
   "monitors.new": "New",
+  "monitors.new-monitor": "New Monitor",
   "monitors.new.success": "New Monitor Success",
   "monitors.new.failed": "New Monitor Failed",
   "monitors.edit": "Edit",
@@ -371,7 +374,7 @@
   "monitors.search.tag": "Tag Filter",
   "monitors.total": "Total",
   "monitors.advanced": "Advanced",
-  "monitors.advanced.tip": "Setting Advanced Param",
+  "monitors.advanced.tip": "Advanced Setting Params",
   "monitors.detect": "Detect",
   "monitors.detect.success": "Detect Success",
   "monitors.detect.failed": "Detect Failed",
@@ -514,7 +517,7 @@
   "define.help": "HertzBeat supports custom modifications and you could select an existing monitoring template from the drop-down menu then make modifications according to your own needs. <br>The bottom-left area is the editing place.\nYou can also click \"New Monitor Type\" to define the new type. Currently supported protocols include<a href='https://hertzbeat.com/zh-cn/docs/advanced/extend-http'> HTTP</a>, <a href='https://hertzbeat.com/zh-cn/docs/advanced/extend-jdbc'>JDBC</a>, <a href='https://hertzbeat.com/zh-cn/docs/advanced/extend-ssh'>SSH</a>, <a href='https://hertzbeat.com/zh-cn/docs/advanced/extend-jmx'>JMX</a>, <a href='https://hertzbeat.com/zh-cn/docs/advanced/extend-snmp'> SNMP</a>. <a class='help_module_content' href='https://hertzbeat.com/zh-cn/docs/template'>Click here to view the monitor templates</a>.",
   "define.help.link": "https://hertzbeat.com/zh-cn/docs/advanced/extend-point/",
   "define.save-apply": "Save And Apply",
-  "define.delete": "Delete Monitor Type",
+  "define.delete": "Delete {{app}}",
   "define.delete.confirm": "Please confirm whether to delete {{app}} monitoring type? This type of monitoring cannot be added after deletion.",
   "define.new": "New Monitor Type",
   "define.new.code": "# Please define a new monitoring type by writing YML content here, refer to the document: https://hertzbeat.com/docs/advanced/extend-point ",