From 7e41f6449173115b02045c6a64a184347b4a73d5 Mon Sep 17 00:00:00 2001 From: tomsun28 Date: Thu, 23 Dec 2021 15:59:49 +0800 Subject: [PATCH] =?UTF-8?q?[webapp]=20=E6=89=B9=E9=87=8F=E5=A4=84=E7=90=86?= =?UTF-8?q?eslint=E6=A0=BC=E5=BC=8F=E5=91=8A=E8=AD=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web-app/src/app/app.module.ts | 26 +- web-app/src/app/core/core.module.ts | 8 +- .../src/app/core/guard/detect-auth-guard.ts | 24 +- web-app/src/app/core/i18n/i18n.service.ts | 40 +-- .../core/interceptor/default.interceptor.ts | 19 +- .../src/app/core/startup/startup.service.ts | 70 ++-- web-app/src/app/icons-provider.module.ts | 15 +- .../src/app/layout/basic/basic.component.ts | 15 +- .../layout/basic/widgets/notify.component.ts | 56 ++-- .../layout/basic/widgets/search.component.ts | 21 +- .../layout/basic/widgets/user.component.ts | 15 +- web-app/src/app/layout/layout.module.ts | 12 +- .../layout/passport/passport.component.html | 2 +- .../app/layout/passport/passport.component.ts | 12 +- web-app/src/app/pojo/Page.ts | 1 - .../alert-center/alert-center.component.html | 157 +++++---- .../alert-center.component.spec.ts | 5 +- .../alert-center/alert-center.component.ts | 149 ++++----- .../alert-notice/alert-notice.component.html | 266 ++++++++------- .../alert-notice.component.spec.ts | 5 +- .../alert-notice/alert-notice.component.ts | 310 ++++++++++-------- .../app/routes/alert/alert-routing.module.ts | 9 +- .../alert-setting.component.html | 252 +++++++------- .../alert-setting.component.spec.ts | 5 +- .../alert-setting/alert-setting.component.ts | 270 ++++++++------- web-app/src/app/routes/alert/alert.module.ts | 37 +-- .../src/app/routes/dashboard/ColorTheme.ts | 15 +- .../routes/dashboard/dashboard.component.html | 11 +- .../routes/dashboard/dashboard.component.ts | 53 ++- .../monitor-data-chart.component.html | 42 +-- .../monitor-data-chart.component.spec.ts | 5 +- .../monitor-data-chart.component.ts | 23 +- .../monitor-detail.component.html | 40 ++- .../monitor-detail.component.spec.ts | 5 +- .../monitor-detail.component.ts | 78 ++--- .../monitor-edit/monitor-edit.component.html | 117 +++---- .../monitor-edit.component.spec.ts | 5 +- .../monitor-edit/monitor-edit.component.ts | 214 ++++++------ .../monitor-list/monitor-list.component.html | 158 ++++----- .../monitor-list.component.spec.ts | 5 +- .../monitor-list/monitor-list.component.ts | 170 +++++----- .../monitor-new/monitor-new.component.html | 126 ++++--- .../monitor-new/monitor-new.component.spec.ts | 5 +- .../monitor-new/monitor-new.component.ts | 179 +++++----- .../routes/monitor/monitor-routing.module.ts | 11 +- .../src/app/routes/monitor/monitor.module.ts | 35 +- .../app/routes/passport/callback.component.ts | 35 -- .../routes/passport/lock/lock.component.html | 2 +- .../routes/passport/lock/lock.component.ts | 6 +- .../passport/login/login.component.html | 45 +-- .../routes/passport/login/login.component.ts | 73 +---- .../register-result.component.html | 13 - .../register-result.component.ts | 15 - .../passport/register/register.component.html | 100 ------ .../passport/register/register.component.less | 42 --- .../passport/register/register.component.ts | 139 -------- .../src/app/routes/routes-routing.module.ts | 40 +-- web-app/src/app/routes/routes.module.ts | 18 +- .../src/app/service/alert-define.service.ts | 46 ++- web-app/src/app/service/alert.service.ts | 50 +-- web-app/src/app/service/app-define.service.ts | 23 +- .../src/app/service/local-storage.service.ts | 6 +- web-app/src/app/service/monitor.service.ts | 72 ++-- .../app/service/notice-receiver.service.ts | 21 +- .../src/app/service/notice-rule.service.ts | 20 +- web-app/src/app/shared/shared-zorro.module.ts | 2 +- web-app/src/app/shared/shared.module.ts | 6 +- web-app/src/assets/{tmp => }/app-data.json | 22 +- web-app/src/assets/{tmp => }/i18n/en-US.json | 0 web-app/src/assets/{tmp => }/i18n/zh-CN.json | 0 web-app/src/assets/{tmp => }/i18n/zh-TW.json | 0 web-app/src/assets/{tmp => }/img/avatar.svg | 0 72 files changed, 1724 insertions(+), 2170 deletions(-) delete mode 100644 web-app/src/app/routes/passport/callback.component.ts delete mode 100644 web-app/src/app/routes/passport/register-result/register-result.component.html delete mode 100644 web-app/src/app/routes/passport/register-result/register-result.component.ts delete mode 100644 web-app/src/app/routes/passport/register/register.component.html delete mode 100644 web-app/src/app/routes/passport/register/register.component.less delete mode 100644 web-app/src/app/routes/passport/register/register.component.ts rename web-app/src/assets/{tmp => }/app-data.json (83%) rename web-app/src/assets/{tmp => }/i18n/en-US.json (100%) rename web-app/src/assets/{tmp => }/i18n/zh-CN.json (100%) rename web-app/src/assets/{tmp => }/i18n/zh-TW.json (100%) rename web-app/src/assets/{tmp => }/img/avatar.svg (100%) diff --git a/web-app/src/app/app.module.ts b/web-app/src/app/app.module.ts index 00ba95c..e0404a0 100644 --- a/web-app/src/app/app.module.ts +++ b/web-app/src/app/app.module.ts @@ -19,7 +19,7 @@ const LANG = { ng: ngLang, zorro: zorroLang, date: dateLang, - delon: delonLang, + delon: delonLang }; // register angular import { registerLocaleData } from '@angular/common'; @@ -28,31 +28,28 @@ const LANG_PROVIDES = [ { provide: LOCALE_ID, useValue: LANG.abbr }, { provide: NZ_I18N, useValue: LANG.zorro }, { provide: NZ_DATE_LOCALE, useValue: LANG.date }, - { provide: DELON_LOCALE, useValue: LANG.delon }, + { provide: DELON_LOCALE, useValue: LANG.delon } ]; // #endregion // #region i18n services import { ALAIN_I18N_TOKEN } from '@delon/theme'; import { I18NService } from '@core'; -const I18NSERVICE_PROVIDES = [ - { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false } -]; +const I18NSERVICE_PROVIDES = [{ provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false }]; // #region // #region JSON Schema form (using @delon/form) import { JsonSchemaModule } from '@shared'; -const FORM_MODULES = [ JsonSchemaModule ]; +const FORM_MODULES = [JsonSchemaModule]; // #endregion - // #region Http Interceptors import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { DefaultInterceptor } from '@core'; import { SimpleInterceptor } from '@delon/auth'; const INTERCEPTOR_PROVIDES = [ // { provide: HTTP_INTERCEPTORS, useClass: SimpleInterceptor, multi: true}, - { provide: HTTP_INTERCEPTORS, useClass: DefaultInterceptor, multi: true} + { provide: HTTP_INTERCEPTORS, useClass: DefaultInterceptor, multi: true } ]; // #endregion @@ -87,9 +84,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { NgxEchartsModule } from 'ngx-echarts'; @NgModule({ - declarations: [ - AppComponent - ], + declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, @@ -109,12 +104,7 @@ import { NgxEchartsModule } from 'ngx-echarts'; echarts: () => import('echarts') }) ], - providers: [ - ...LANG_PROVIDES, - ...INTERCEPTOR_PROVIDES, - ...I18NSERVICE_PROVIDES, - ...APP_INIT_PROVIDES - ], + providers: [...LANG_PROVIDES, ...INTERCEPTOR_PROVIDES, ...I18NSERVICE_PROVIDES, ...APP_INIT_PROVIDES], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} diff --git a/web-app/src/app/core/core.module.ts b/web-app/src/app/core/core.module.ts index a11ecf4..aadc639 100644 --- a/web-app/src/app/core/core.module.ts +++ b/web-app/src/app/core/core.module.ts @@ -1,15 +1,13 @@ import { NgModule, Optional, SkipSelf } from '@angular/core'; -import { throwIfAlreadyLoaded } from './module-import-guard'; import { I18NService } from './i18n/i18n.service'; +import { throwIfAlreadyLoaded } from './module-import-guard'; @NgModule({ - providers: [ - I18NService - ] + providers: [I18NService] }) export class CoreModule { - constructor( @Optional() @SkipSelf() parentModule: CoreModule) { + constructor(@Optional() @SkipSelf() parentModule: CoreModule) { throwIfAlreadyLoaded(parentModule, 'CoreModule'); } } diff --git a/web-app/src/app/core/guard/detect-auth-guard.ts b/web-app/src/app/core/guard/detect-auth-guard.ts index 98c010e..a60fca7 100644 --- a/web-app/src/app/core/guard/detect-auth-guard.ts +++ b/web-app/src/app/core/guard/detect-auth-guard.ts @@ -1,24 +1,24 @@ -import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from "@angular/router"; -import {Observable} from "rxjs"; -import {Injectable} from "@angular/core"; -import {LocalStorageService} from "../../service/local-storage.service"; -import {NzNotificationService} from "ng-zorro-antd/notification"; +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router'; +import { NzNotificationService } from 'ng-zorro-antd/notification'; +import { Observable } from 'rxjs'; + +import { LocalStorageService } from '../../service/local-storage.service'; @Injectable({ providedIn: 'root' }) export class DetectAuthGuard implements CanActivate { + constructor(private localStorageSvc: LocalStorageService, private notifySvc: NzNotificationService, private router: Router) {} - constructor(private localStorageSvc : LocalStorageService, - private notifySvc: NzNotificationService, - private router: Router) { } - - canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): - Observable | Promise | boolean | UrlTree { + canActivate( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot + ): Observable | Promise | boolean | UrlTree { let activate = this.localStorageSvc.hasAuthorizationToken(); if (!activate) { setTimeout(() => { - this.notifySvc.warning('请先登陆!','') + this.notifySvc.warning('请先登陆!', ''); this.router.navigateByUrl('/passport/login'); }); } diff --git a/web-app/src/app/core/i18n/i18n.service.ts b/web-app/src/app/core/i18n/i18n.service.ts index 7910bb5..aa3e248 100644 --- a/web-app/src/app/core/i18n/i18n.service.ts +++ b/web-app/src/app/core/i18n/i18n.service.ts @@ -1,10 +1,10 @@ // 请参考：https://ng-alain.com/docs/i18n -import {Platform} from '@angular/cdk/platform'; -import {registerLocaleData} from '@angular/common'; +import { Platform } from '@angular/cdk/platform'; +import { registerLocaleData } from '@angular/common'; import ngEn from '@angular/common/locales/en'; import ngZh from '@angular/common/locales/zh'; import ngZhTw from '@angular/common/locales/zh-Hant'; -import {Injectable} from '@angular/core'; +import { Injectable } from '@angular/core'; import { _HttpClient, AlainI18nBaseService, @@ -14,13 +14,14 @@ import { zh_CN as delonZhCn, zh_TW as delonZhTw } from '@delon/theme'; -import {AlainConfigService} from '@delon/util/config'; -import {enUS as dfEn, zhCN as dfZhCn, zhTW as dfZhTw} from 'date-fns/locale'; -import {NzSafeAny} from 'ng-zorro-antd/core/types'; -import {en_US as zorroEnUS, NzI18nService, zh_CN as zorroZhCN, zh_TW as zorroZhTW} from 'ng-zorro-antd/i18n'; -import {Observable, zip} from 'rxjs'; -import {map} from "rxjs/operators"; -import {Message} from "../../pojo/Message"; +import { AlainConfigService } from '@delon/util/config'; +import { enUS as dfEn, zhCN as dfZhCn, zhTW as dfZhTw } from 'date-fns/locale'; +import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { en_US as zorroEnUS, NzI18nService, zh_CN as zorroZhCN, zh_TW as zorroZhTW } from 'ng-zorro-antd/i18n'; +import { Observable, zip } from 'rxjs'; +import { map } from 'rxjs/operators'; + +import { Message } from '../../pojo/Message'; interface LangConfigData { abbr: string; @@ -94,16 +95,15 @@ export class I18NService extends AlainI18nBaseService { } loadLangData(lang: string): Observable { - return zip(this.http.get(`http://localhost:4200/assets/tmp/i18n/${lang}.json`),this.http.get(`/i18n/${lang}`)) - .pipe( - map(([langLocalData, langRemoteData]: [Record, Message]) => { - let remote:Record = langRemoteData.data; - Object.keys(remote).forEach(key => { - langLocalData[key] = remote[key]; - }); - return langLocalData; - }) - ) + return zip(this.http.get(`./assets/i18n/${lang}.json`), this.http.get(`/i18n/${lang}`)).pipe( + map(([langLocalData, langRemoteData]: [Record, Message]) => { + let remote: Record = langRemoteData.data; + Object.keys(remote).forEach(key => { + langLocalData[key] = remote[key]; + }); + return langLocalData; + }) + ); } use(lang: string, data: Record): void { diff --git a/web-app/src/app/core/interceptor/default.interceptor.ts b/web-app/src/app/core/interceptor/default.interceptor.ts index b9f7b7b..e9261ad 100644 --- a/web-app/src/app/core/interceptor/default.interceptor.ts +++ b/web-app/src/app/core/interceptor/default.interceptor.ts @@ -4,7 +4,8 @@ import { HttpHandler, HttpHeaders, HttpInterceptor, - HttpRequest, HttpResponse, + HttpRequest, + HttpResponse, HttpResponseBase } from '@angular/common/http'; import { Injectable, Injector } from '@angular/core'; @@ -14,7 +15,8 @@ import { environment } from '@env/environment'; import { NzNotificationService } from 'ng-zorro-antd/notification'; import { BehaviorSubject, Observable, of, throwError } from 'rxjs'; import { catchError, filter, mergeMap, switchMap, take } from 'rxjs/operators'; -import {LocalStorageService} from "../../service/local-storage.service"; + +import { LocalStorageService } from '../../service/local-storage.service'; const CODE_MESSAGE: { [key: number]: string } = { 200: '服务器成功返回请求的数据。', @@ -44,7 +46,7 @@ export class DefaultInterceptor implements HttpInterceptor { private refreshToking = false; private refreshToken$: BehaviorSubject = new BehaviorSubject(null); - constructor(private injector: Injector, private storageSvc: LocalStorageService) { } + constructor(private injector: Injector, private storageSvc: LocalStorageService) {} private get notification(): NzNotificationService { return this.injector.get(NzNotificationService); @@ -71,8 +73,7 @@ export class DefaultInterceptor implements HttpInterceptor { */ private refreshTokenRequest(): Observable { const refreshToken = this.storageSvc.getRefreshToken(); - return this.http.post(`/account/auth/refresh`, null, null, - { headers: { Authorization: `Bearer ${refreshToken}` }}); + return this.http.post(`/account/auth/refresh`, null, null, { headers: { Authorization: `Bearer ${refreshToken}` } }); } // #region 刷新Token方式一：使用 401 重新刷新 Token @@ -124,12 +125,11 @@ export class DefaultInterceptor implements HttpInterceptor { let token = this.storageSvc.getAuthorizationToken(); return req.clone({ setHeaders: { - 'Authorization': `Bearer ${token}` + Authorization: `Bearer ${token}` } }); } - private toLogin(): void { this.notification.error(`未登录或登录已过期，请重新登录。`, ``); this.goTo('/passport/login'); @@ -150,14 +150,13 @@ export class DefaultInterceptor implements HttpInterceptor { intercept(req: HttpRequest, next: HttpHandler): Observable> { let url = req.url; - if (!url.startsWith('https://') && !url.startsWith('http://')) { + if (!url.startsWith('https://') && !url.startsWith('http://') && !url.startsWith('.')) { const { baseUrl } = environment.api; url = baseUrl + (baseUrl.endsWith('/') && url.startsWith('/') ? url.substring(1) : url); } const newReq = req.clone({ url, setHeaders: this.fillHeaders(req.headers) }); return next.handle(newReq).pipe( mergeMap(httpEvent => { - if (httpEvent instanceof HttpResponseBase) { // todo 处理成功状态响应 @@ -192,7 +191,7 @@ export class DefaultInterceptor implements HttpInterceptor { break; } this.checkStatus(err); - console.warn(`${err.status} == ${err.message}`) + console.warn(`${err.status} == ${err.message}`); return throwError(err); }) ); diff --git a/web-app/src/app/core/startup/startup.service.ts b/web-app/src/app/core/startup/startup.service.ts index f8108be..ee60d52 100644 --- a/web-app/src/app/core/startup/startup.service.ts +++ b/web-app/src/app/core/startup/startup.service.ts @@ -1,17 +1,17 @@ +import { HttpClient } from '@angular/common/http'; import { Injectable, Inject } from '@angular/core'; import { Router } from '@angular/router'; -import { HttpClient } from '@angular/common/http'; +import { ACLService } from '@delon/acl'; import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth'; import { ALAIN_I18N_TOKEN, MenuService, SettingsService, TitleService } from '@delon/theme'; -import { ACLService } from '@delon/acl'; -import { I18NService } from '../i18n/i18n.service'; -import { Observable, zip, of } from 'rxjs'; -import { catchError, map } from 'rxjs/operators'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzIconService } from 'ng-zorro-antd/icon'; +import { Observable, zip, of } from 'rxjs'; +import { catchError, map } from 'rxjs/operators'; import { ICONS } from '../../../style-icons'; import { ICONS_AUTO } from '../../../style-icons-auto'; +import { I18NService } from '../i18n/i18n.service'; /** * Used for application startup * Generally used to get the basic data of the application, like: Menu Data, User Data, etc. @@ -32,45 +32,31 @@ export class StartupService { iconSrv.addIcon(...ICONS_AUTO, ...ICONS); } - - private viaHttp(): Observable { - const defaultLang = this.i18n.defaultLang; - return zip(this.i18n.loadLangData(defaultLang), this.httpClient.get('http://localhost:4200/assets/tmp/app-data.json')).pipe( - catchError((res: NzSafeAny) => { - console.warn(`StartupService.load: Network request failed`, res); - setTimeout(() => this.router.navigateByUrl(`/exception/500`)); - return []; - }), - map(([langData, appData]: [Record, NzSafeAny]) => { - // setting language data - this.i18n.use(defaultLang, langData); - - // Application data - // Application information: including site name, description, year - this.settingService.setApp(appData.app); - // User information: including name, avatar, email address - // this.settingService.setUser(appData.user); - // ACL: Set the permissions to full, https://ng-alain.com/acl/getting-started - this.aclService.setFull(true); - // Menu data, https://ng-alain.com/theme/menu - this.menuService.add(appData.menu); - // Can be set page suffix title, https://ng-alain.com/theme/title - this.titleService.suffix = appData.app.name; - }) - ); - } - - - - private viaMockI18n(): Observable { + private viaHttp(): Observable { const defaultLang = this.i18n.defaultLang; - return this.i18n.loadLangData(defaultLang).pipe( - map((langData: NzSafeAny) => { - this.i18n.use(defaultLang, langData); + return zip(this.i18n.loadLangData(defaultLang), this.httpClient.get('./assets/app-data.json')).pipe( + catchError((res: NzSafeAny) => { + console.warn(`StartupService.load: Network request failed`, res); + setTimeout(() => this.router.navigateByUrl(`/exception/500`)); + return []; + }), + map(([langData, appData]: [Record, NzSafeAny]) => { + // setting language data + this.i18n.use(defaultLang, langData); - this.viaMock(); - }) - ); + // Application data + // Application information: including site name, description, year + this.settingService.setApp(appData.app); + // User information: including name, avatar, email address + // this.settingService.setUser(appData.user); + // ACL: Set the permissions to full, https://ng-alain.com/acl/getting-started + this.aclService.setFull(true); + // Menu data, https://ng-alain.com/theme/menu + this.menuService.add(appData.menu); + // Can be set page suffix title, https://ng-alain.com/theme/title + this.titleService.suffix = appData.app.name; + }) + ); } private viaMock(): Observable { diff --git a/web-app/src/app/icons-provider.module.ts b/web-app/src/app/icons-provider.module.ts index 544ba8b..60eb5c7 100644 --- a/web-app/src/app/icons-provider.module.ts +++ b/web-app/src/app/icons-provider.module.ts @@ -1,21 +1,12 @@ import { NgModule } from '@angular/core'; +import { MenuFoldOutline, MenuUnfoldOutline, FormOutline, DashboardOutline } from '@ant-design/icons-angular/icons'; import { NZ_ICONS, NzIconModule } from 'ng-zorro-antd/icon'; -import { - MenuFoldOutline, - MenuUnfoldOutline, - FormOutline, - DashboardOutline -} from '@ant-design/icons-angular/icons'; - const icons = [MenuFoldOutline, MenuUnfoldOutline, DashboardOutline, FormOutline]; @NgModule({ imports: [NzIconModule], exports: [NzIconModule], - providers: [ - { provide: NZ_ICONS, useValue: icons } - ] + providers: [{ provide: NZ_ICONS, useValue: icons }] }) -export class IconsProviderModule { -} +export class IconsProviderModule {} diff --git a/web-app/src/app/layout/basic/basic.component.ts b/web-app/src/app/layout/basic/basic.component.ts index 8213e9c..19bd186 100644 --- a/web-app/src/app/layout/basic/basic.component.ts +++ b/web-app/src/app/layout/basic/basic.component.ts @@ -50,19 +50,13 @@ import { environment } from '@env/environment'; -
- +
+
- -
    -
  • {{ 'menu.account.center' | i18n }}
    • -
  • {{ 'menu.account.settings' | i18n }}
    • -
- @@ -71,13 +65,14 @@ import { environment } from '@env/environment'; - `, + ` }) export class LayoutBasicComponent { options: LayoutDefaultOptions = { logoExpanded: `./assets/brand_white.svg`, - logoCollapsed: `./assets/logo.svg`, + logoCollapsed: `./assets/logo.svg` }; + avatar: string = `./assets/logo.svg`; searchToggleStatus = false; showSettingDrawer = !environment.production; get user(): User { diff --git a/web-app/src/app/layout/basic/widgets/notify.component.ts b/web-app/src/app/layout/basic/widgets/notify.component.ts index 5de4e2e..61912d0 100644 --- a/web-app/src/app/layout/basic/widgets/notify.component.ts +++ b/web-app/src/app/layout/basic/widgets/notify.component.ts @@ -1,11 +1,12 @@ -import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core'; -import {NoticeIconSelect, NoticeItem } from '@delon/abc/notice-icon'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { I18NService } from '@core'; +import { NoticeIconSelect, NoticeItem } from '@delon/abc/notice-icon'; +import { ALAIN_I18N_TOKEN } from '@delon/theme'; import { NzI18nService } from 'ng-zorro-antd/i18n'; import { NzMessageService } from 'ng-zorro-antd/message'; -import {AlertService} from "../../../service/alert.service"; -import {ALAIN_I18N_TOKEN} from "@delon/theme"; -import {I18NService} from "@core"; -import {Router} from "@angular/router"; + +import { AlertService } from '../../../service/alert.service'; @Component({ selector: 'header-notify', @@ -22,8 +23,7 @@ import {Router} from "@angular/router"; `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class HeaderNotifyComponent implements OnInit{ - +export class HeaderNotifyComponent implements OnInit { data: NoticeItem[] = [ { title: '近期未处理告警', @@ -36,12 +36,14 @@ export class HeaderNotifyComponent implements OnInit{ count = 0; loading = false; - constructor(private msg: NzMessageService, - private nzI18n: NzI18nService, - private router: Router, - @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService, - private alertSvc: AlertService, - private cdr: ChangeDetectorRef) {} + constructor( + private msg: NzMessageService, + private nzI18n: NzI18nService, + private router: Router, + @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService, + private alertSvc: AlertService, + private cdr: ChangeDetectorRef + ) {} ngOnInit(): void { this.loadData(); @@ -52,8 +54,8 @@ export class HeaderNotifyComponent implements OnInit{ return; } this.loading = true; - let loadAlerts$ = this.alertSvc.searchAlerts(0, undefined,undefined, 0, 5) - .subscribe(message => { + let loadAlerts$ = this.alertSvc.searchAlerts(0, undefined, undefined, 0, 5).subscribe( + message => { loadAlerts$.unsubscribe(); if (message.code === 0) { let page = message.data; @@ -61,26 +63,28 @@ export class HeaderNotifyComponent implements OnInit{ this.data[0].list = []; alerts.forEach(alert => { let item = { - id: alert.id, - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', - title: '监控-' + alert.monitorName +'-发出' + this.i18nSvc.fanyi(`alert.priority.${alert.priority}`), - datetime: alert.gmtCreate, - color: 'blue', - type: '近期未处理告警' - } + id: alert.id, + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png', + title: `监控-${alert.monitorName}-发出${this.i18nSvc.fanyi(`alert.priority.${alert.priority}`)}`, + datetime: alert.gmtCreate, + color: 'blue', + type: '近期未处理告警' + }; this.data[0].list.push(item); - }) + }); this.count = page.totalElements; } else { console.warn(message.msg); } this.loading = false; this.cdr.detectChanges(); - }, error => { + }, + error => { loadAlerts$.unsubscribe(); console.error(error.msg); this.loading = false; - }) + } + ); } gotoAlertCenter(type: string): void { diff --git a/web-app/src/app/layout/basic/widgets/search.component.ts b/web-app/src/app/layout/basic/widgets/search.component.ts index dc2a43c..9120558 100644 --- a/web-app/src/app/layout/basic/widgets/search.component.ts +++ b/web-app/src/app/layout/basic/widgets/search.component.ts @@ -12,8 +12,9 @@ import { } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'; -import {MonitorService} from "../../../service/monitor.service"; -import {Monitor} from "../../../pojo/Monitor"; + +import { Monitor } from '../../../pojo/Monitor'; +import { MonitorService } from '../../../service/monitor.service'; @Component({ selector: 'header-search', @@ -40,7 +41,7 @@ import {Monitor} from "../../../pojo/Monitor"; 监控名称: {{ option.name }} - 监控Host: {{option.host}} + 监控Host: {{ option.host }} @@ -73,9 +74,7 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy { } @Output() readonly toggleChangeChange = new EventEmitter(); - constructor(private el: ElementRef, - private cdr: ChangeDetectorRef, - private monitorSvc : MonitorService) {} + constructor(private el: ElementRef, private cdr: ChangeDetectorRef, private monitorSvc: MonitorService) {} ngAfterViewInit(): void { this.qIpt = this.el.nativeElement.querySelector('.ant-input') as HTMLInputElement; @@ -91,8 +90,8 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy { ) .subscribe(value => { // 远程加载搜索数据 - let searchMonitors$ = this.monitorSvc.searchMonitors(value, value, 0, 10) - .subscribe(message => { + let searchMonitors$ = this.monitorSvc.searchMonitors(value, value, 0, 10).subscribe( + message => { this.loading = false; searchMonitors$.unsubscribe(); if (message.code === 0) { @@ -102,11 +101,13 @@ export class HeaderSearchComponent implements AfterViewInit, OnDestroy { } else { console.warn(message.msg); } - }, error => { + }, + error => { this.loading = false; searchMonitors$.unsubscribe(); console.error(error.msg); - }) + } + ); }); } diff --git a/web-app/src/app/layout/basic/widgets/user.component.ts b/web-app/src/app/layout/basic/widgets/user.component.ts index b66bcd5..f710b71 100644 --- a/web-app/src/app/layout/basic/widgets/user.component.ts +++ b/web-app/src/app/layout/basic/widgets/user.component.ts @@ -1,7 +1,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { Router } from '@angular/router'; import { SettingsService, User } from '@delon/theme'; -import {LocalStorageService} from "../../../service/local-storage.service"; + +import { LocalStorageService } from '../../../service/local-storage.service'; @Component({ selector: 'header-user', @@ -12,14 +13,6 @@ import {LocalStorageService} from "../../../service/local-storage.service";
-
- - {{ 'menu.account.center' | i18n }} -
-
- - {{ 'menu.account.settings' | i18n }} -
  • @@ -35,9 +28,7 @@ export class HeaderUserComponent { return this.settings.user; } - constructor(private settings: SettingsService, - private router: Router, - private localStorageSvc : LocalStorageService) {} + constructor(private settings: SettingsService, private router: Router, private localStorageSvc: LocalStorageService) {} logout(): void { this.localStorageSvc.clear(); diff --git a/web-app/src/app/layout/layout.module.ts b/web-app/src/app/layout/layout.module.ts index 3e8c242..6733556 100644 --- a/web-app/src/app/layout/layout.module.ts +++ b/web-app/src/app/layout/layout.module.ts @@ -25,7 +25,7 @@ import { HeaderFullScreenComponent } from './basic/widgets/fullscreen.component' import { HeaderI18nComponent } from './basic/widgets/i18n.component'; import { HeaderSearchComponent } from './basic/widgets/search.component'; import { HeaderUserComponent } from './basic/widgets/user.component'; -import {HeaderNotifyComponent} from "./basic/widgets/notify.component"; +import { HeaderNotifyComponent } from './basic/widgets/notify.component'; import { LayoutBlankComponent } from './blank/blank.component'; const COMPONENTS = [LayoutBasicComponent, LayoutBlankComponent]; @@ -41,9 +41,7 @@ const HEADER_COMPONENTS = [ // passport import { LayoutPassportComponent } from './passport/passport.component'; -const PASSPORT = [ - LayoutPassportComponent -]; +const PASSPORT = [LayoutPassportComponent]; @NgModule({ imports: [ @@ -64,9 +62,9 @@ const PASSPORT = [ NzSpinModule, NzBadgeModule, NzAvatarModule, - NzIconModule, + NzIconModule ], declarations: [...COMPONENTS, ...HEADER_COMPONENTS, ...PASSPORT], - exports: [...COMPONENTS, ...PASSPORT], + exports: [...COMPONENTS, ...PASSPORT] }) -export class LayoutModule { } +export class LayoutModule {} diff --git a/web-app/src/app/layout/passport/passport.component.html b/web-app/src/app/layout/passport/passport.component.html index e8fff16..5c425b3 100644 --- a/web-app/src/app/layout/passport/passport.component.html +++ b/web-app/src/app/layout/passport/passport.component.html @@ -3,7 +3,7 @@
    - + 探云
    易用友好的高性能监控云服务
    diff --git a/web-app/src/app/layout/passport/passport.component.ts b/web-app/src/app/layout/passport/passport.component.ts index c48bb16..f388b24 100644 --- a/web-app/src/app/layout/passport/passport.component.ts +++ b/web-app/src/app/layout/passport/passport.component.ts @@ -9,16 +9,8 @@ import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth'; export class LayoutPassportComponent implements OnInit { links = [ { - title: '帮助', - href: '' - }, - { - title: '隐私', - href: '' - }, - { - title: '条款', - href: '' + title: '欢迎使用TanCloud探云-监控云服务-tancloud.cn', + href: 'https://tancloud.cn' } ]; diff --git a/web-app/src/app/pojo/Page.ts b/web-app/src/app/pojo/Page.ts index 246b7f9..d29342a 100644 --- a/web-app/src/app/pojo/Page.ts +++ b/web-app/src/app/pojo/Page.ts @@ -1,4 +1,3 @@ - export class Page { content!: T[]; // 集合总页数 diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.html b/web-app/src/app/routes/alert/alert-center/alert-center.component.html index aa0c996..ca96bed 100644 --- a/web-app/src/app/routes/alert/alert-center/alert-center.component.html +++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.html @@ -30,91 +30,106 @@ - - - + + + - + -
    - + - - - 告警指标 - 所属监控 - 级别 - 告警内容 - 状态 - 告警时间 - 操作 - + + + 告警指标 + 所属监控 + 级别 + 告警内容 + 状态 + 告警时间 + 操作 + - - - {{ data.target }} - - - {{ data.monitorName }} - - - - - - 紧急告警 - - - - 严重告警 - - - - 警告告警 - - - {{ data.content }} - - {{ data.status === 0 ? '未处理' : '已处理' }} - - {{ data.gmtCreate }} - - - - - - + + + {{ data.target }} + + + {{ data.monitorName }} + + + + + + 紧急告警 + + + + 严重告警 + + + + 警告告警 + + + {{ data.content }} + + {{ data.status === 0 ? '未处理' : '已处理' }} + + {{ data.gmtCreate }} + + + + + + - - 总量 {{ total }} - + 总量 {{ total }} diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.spec.ts b/web-app/src/app/routes/alert/alert-center/alert-center.component.spec.ts index ee46e65..58505cb 100644 --- a/web-app/src/app/routes/alert/alert-center/alert-center.component.spec.ts +++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.spec.ts @@ -8,9 +8,8 @@ describe('AlertCenterComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AlertCenterComponent ] - }) - .compileComponents(); + declarations: [AlertCenterComponent] + }).compileComponents(); }); beforeEach(() => { diff --git a/web-app/src/app/routes/alert/alert-center/alert-center.component.ts b/web-app/src/app/routes/alert/alert-center/alert-center.component.ts index ec2efad..c6b7608 100644 --- a/web-app/src/app/routes/alert/alert-center/alert-center.component.ts +++ b/web-app/src/app/routes/alert/alert-center/alert-center.component.ts @@ -1,21 +1,18 @@ import { Component, OnInit } from '@angular/core'; -import {NzTableQueryParams} from "ng-zorro-antd/table"; -import {Alert} from "../../../pojo/Alert"; -import {NzNotificationService} from "ng-zorro-antd/notification"; -import {AlertService} from "../../../service/alert.service"; -import {NzModalService} from "ng-zorro-antd/modal"; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { NzNotificationService } from 'ng-zorro-antd/notification'; +import { NzTableQueryParams } from 'ng-zorro-antd/table'; + +import { Alert } from '../../../pojo/Alert'; +import { AlertService } from '../../../service/alert.service'; @Component({ selector: 'app-alert-center', templateUrl: './alert-center.component.html', - styles: [ - ] + styles: [] }) export class AlertCenterComponent implements OnInit { - - constructor(private notifySvc: NzNotificationService, - private modal: NzModalService, - private alertSvc: AlertService) { } + constructor(private notifySvc: NzNotificationService, private modal: NzModalService, private alertSvc: AlertService) {} pageIndex: number = 1; pageSize: number = 8; @@ -34,27 +31,29 @@ export class AlertCenterComponent implements OnInit { onFilterSearchAlerts() { this.tableLoading = true; - let filterAlerts$ = this.alertSvc.searchAlerts(this.filterStatus, this.filterPriority, - this.filterContent, this.pageIndex - 1, this.pageSize) - .subscribe(message => { - filterAlerts$.unsubscribe(); - this.tableLoading = false; - this.checkedAll = false; - this.checkedAlertIds.clear(); - if (message.code === 0) { - let page = message.data; - this.alerts = page.content; - this.pageIndex = page.number + 1; - this.total = page.totalElements; - } else { - console.warn(message.msg); + let filterAlerts$ = this.alertSvc + .searchAlerts(this.filterStatus, this.filterPriority, this.filterContent, this.pageIndex - 1, this.pageSize) + .subscribe( + message => { + filterAlerts$.unsubscribe(); + this.tableLoading = false; + this.checkedAll = false; + this.checkedAlertIds.clear(); + if (message.code === 0) { + let page = message.data; + this.alerts = page.content; + this.pageIndex = page.number + 1; + this.total = page.totalElements; + } else { + console.warn(message.msg); + } + }, + error => { + this.tableLoading = false; + filterAlerts$.unsubscribe(); + console.error(error.msg); } - }, error => { - this.tableLoading = false; - filterAlerts$.unsubscribe(); - console.error(error.msg); - }); - + ); } sync() { @@ -63,8 +62,8 @@ export class AlertCenterComponent implements OnInit { loadAlertsTable() { this.tableLoading = true; - let alertsInit$ = this.alertSvc.getAlerts(this.pageIndex - 1, this.pageSize) - .subscribe(message => { + let alertsInit$ = this.alertSvc.getAlerts(this.pageIndex - 1, this.pageSize).subscribe( + message => { this.tableLoading = false; this.checkedAll = false; this.checkedAlertIds.clear(); @@ -77,16 +76,18 @@ export class AlertCenterComponent implements OnInit { console.warn(message.msg); } alertsInit$.unsubscribe(); - }, error => { + }, + error => { this.tableLoading = false; alertsInit$.unsubscribe(); console.error(error.msg); - }); + } + ); } onDeleteAlerts() { if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) { - this.notifySvc.warning("未选中任何待删除项！",""); + this.notifySvc.warning('未选中任何待删除项！', ''); return; } this.modal.confirm({ @@ -94,14 +95,14 @@ export class AlertCenterComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.deleteAlerts(this.checkedAlertIds) }); } onMarkReadAlerts() { if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) { - this.notifySvc.warning("未选中任何待标记项！",""); + this.notifySvc.warning('未选中任何待标记项！', ''); return; } this.modal.confirm({ @@ -109,13 +110,13 @@ export class AlertCenterComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 3) }); } onMarkUnReadAlerts() { if (this.checkedAlertIds == null || this.checkedAlertIds.size === 0) { - this.notifySvc.warning("未选中任何待标记项！",""); + this.notifySvc.warning('未选中任何待标记项！', ''); return; } this.modal.confirm({ @@ -123,7 +124,7 @@ export class AlertCenterComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.updateAlertsStatus(this.checkedAlertIds, 0) }); } @@ -136,7 +137,7 @@ export class AlertCenterComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.deleteAlerts(alerts) }); } @@ -149,7 +150,7 @@ export class AlertCenterComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.updateAlertsStatus(alerts, 3) }); } @@ -162,51 +163,51 @@ export class AlertCenterComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.updateAlertsStatus(alerts, 0) }); } deleteAlerts(alertIds: Set) { this.tableLoading = true; - const deleteAlerts$ = this.alertSvc.deleteAlerts(alertIds) - .subscribe(message => { - deleteAlerts$.unsubscribe(); - if (message.code === 0) { - this.notifySvc.success("删除成功！", ""); - this.loadAlertsTable(); - } else { - this.tableLoading = false; - this.notifySvc.error("删除失败！", message.msg); - } - }, - error => { + const deleteAlerts$ = this.alertSvc.deleteAlerts(alertIds).subscribe( + message => { + deleteAlerts$.unsubscribe(); + if (message.code === 0) { + this.notifySvc.success('删除成功！', ''); + this.loadAlertsTable(); + } else { this.tableLoading = false; - deleteAlerts$.unsubscribe(); - this.notifySvc.error("删除失败！", error.msg) + this.notifySvc.error('删除失败！', message.msg); } - ); + }, + error => { + this.tableLoading = false; + deleteAlerts$.unsubscribe(); + this.notifySvc.error('删除失败！', error.msg); + } + ); } updateAlertsStatus(alertIds: Set, status: number) { this.tableLoading = true; - const markAlertsStatus$ = this.alertSvc.applyAlertsStatus(alertIds, status) - .subscribe(message => { - markAlertsStatus$.unsubscribe(); - if (message.code === 0) { - this.notifySvc.success("标记成功！", ""); - this.loadAlertsTable(); - } else { - this.tableLoading = false; - this.notifySvc.error("标记失败！", message.msg); - } - }, - error => { + const markAlertsStatus$ = this.alertSvc.applyAlertsStatus(alertIds, status).subscribe( + message => { + markAlertsStatus$.unsubscribe(); + if (message.code === 0) { + this.notifySvc.success('标记成功！', ''); + this.loadAlertsTable(); + } else { this.tableLoading = false; - markAlertsStatus$.unsubscribe(); - this.notifySvc.error("标记失败！", error.msg) + this.notifySvc.error('标记失败！', message.msg); } - ); + }, + error => { + this.tableLoading = false; + markAlertsStatus$.unsubscribe(); + this.notifySvc.error('标记失败！', error.msg); + } + ); } // begin: 列表多选分页逻辑 diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html index 41c3f7e..d6a3a38 100644 --- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html +++ b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.html @@ -22,58 +22,61 @@ - + - - 接收人 - 通知方式 - 配置 - 最新修改时间 - 操作 - + + 接收人 + 通知方式 + 配置 + 最新修改时间 + 操作 + - - - {{ data.name}} - - - - - 短信 - - - - 邮件 - - - - WebHook - - - - 微信公众号 - - - - {{data.phone}} - {{data.email}} - {{data.hookUrl}} - {{data.wechatId}} - - {{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }} - - - - - + + + {{ data.name }} + + + + + 短信 + + + + 邮件 + + + + WebHook + + + + 微信公众号 + + + + {{ data.phone }} + {{ data.email }} + {{ data.hookUrl }} + {{ data.wechatId }} + + {{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }} + + + + + @@ -85,90 +88,84 @@ - + - - 策略名称 - 接收人 - 转发所有 - 是否启用 - 最新修改时间 - 操作 - + + 策略名称 + 接收人 + 转发所有 + 是否启用 + 最新修改时间 + 操作 + - - - {{ data.name}} - - - {{ data.receiverName}} - - - - 是 - - - 否 - - - - - 开启 - - - 关闭 - - - {{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }} - - - - - + + + {{ data.name }} + + + {{ data.receiverName }} + + + + 是 + + + 否 + + + + + 开启 + + + 关闭 + + + {{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }} + + + + + - -
    +
    - 接收人名称 + 接收人名称 - + - + - 通知方式 - + 通知方式 - + @@ -177,29 +174,29 @@ - 手机号 + 手机号 - + - + - 邮箱 + 邮箱 - + - + - URL地址 + URL地址 - + - + - 微信OPENID + 微信OPENID - + - +
    @@ -207,29 +204,29 @@ -
    +
    - 策略名称 + 策略名称 - + - + - 转发所有 + 转发所有 - + - 接收人 + 接收人 - + - 是否启用 + 是否启用 - +
    diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.spec.ts b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.spec.ts index b1bc346..0f57dc7 100644 --- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.spec.ts +++ b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.spec.ts @@ -8,9 +8,8 @@ describe('AlertNoticeComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AlertNoticeComponent ] - }) - .compileComponents(); + declarations: [AlertNoticeComponent] + }).compileComponents(); }); beforeEach(() => { diff --git a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts index 47b099f..1523ed1 100644 --- a/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts +++ b/web-app/src/app/routes/alert/alert-notice/alert-notice.component.ts @@ -1,24 +1,25 @@ import { Component, OnInit } from '@angular/core'; -import {NzNotificationService} from "ng-zorro-antd/notification"; -import {NoticeReceiverService} from "../../../service/notice-receiver.service"; -import {NoticeRuleService} from "../../../service/notice-rule.service"; -import {NoticeReceiver} from "../../../pojo/NoticeReceiver"; -import {finalize} from "rxjs/operators"; -import {NoticeRule} from "../../../pojo/NoticeRule"; -import {NzModalService} from "ng-zorro-antd/modal"; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { NzNotificationService } from 'ng-zorro-antd/notification'; +import { finalize } from 'rxjs/operators'; + +import { NoticeReceiver } from '../../../pojo/NoticeReceiver'; +import { NoticeRule } from '../../../pojo/NoticeRule'; +import { NoticeReceiverService } from '../../../service/notice-receiver.service'; +import { NoticeRuleService } from '../../../service/notice-rule.service'; @Component({ selector: 'app-alert-notice', templateUrl: './alert-notice.component.html', - styles: [ - ] + styles: [] }) export class AlertNoticeComponent implements OnInit { - - constructor(private notifySvc: NzNotificationService, - private noticeReceiverSvc: NoticeReceiverService, - private modal: NzModalService, - private noticeRuleSvc : NoticeRuleService) { } + constructor( + private notifySvc: NzNotificationService, + private noticeReceiverSvc: NoticeReceiverService, + private modal: NzModalService, + private noticeRuleSvc: NoticeRuleService + ) {} receivers!: NoticeReceiver[]; receiverTableLoading: boolean = true; @@ -38,8 +39,8 @@ export class AlertNoticeComponent implements OnInit { loadReceiversTable() { this.receiverTableLoading = true; - let receiverInit$ = this.noticeReceiverSvc.getReceivers() - .subscribe(message => { + let receiverInit$ = this.noticeReceiverSvc.getReceivers().subscribe( + message => { this.receiverTableLoading = false; if (message.code === 0) { this.receivers = message.data; @@ -47,16 +48,18 @@ export class AlertNoticeComponent implements OnInit { console.warn(message.msg); } receiverInit$.unsubscribe(); - }, error => { + }, + error => { console.error(error.msg); this.receiverTableLoading = false; receiverInit$.unsubscribe(); - }); + } + ); } loadRulesTable() { this.ruleTableLoading = true; - let rulesInit$ = this.noticeRuleSvc.getNoticeRules() - .subscribe(message => { + let rulesInit$ = this.noticeRuleSvc.getNoticeRules().subscribe( + message => { this.ruleTableLoading = false; if (message.code === 0) { this.rules = message.data; @@ -64,71 +67,85 @@ export class AlertNoticeComponent implements OnInit { console.warn(message.msg); } rulesInit$.unsubscribe(); - }, error => { + }, + error => { console.error(error.msg); this.ruleTableLoading = false; rulesInit$.unsubscribe(); - }); + } + ); } - onDeleteOneNoticeReceiver(receiveId : number) { + onDeleteOneNoticeReceiver(receiveId: number) { this.modal.confirm({ nzTitle: '请确认是否删除！', nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.deleteOneNoticeReceiver(receiveId) }); } - deleteOneNoticeReceiver(receiveId : number) { - const deleteReceiver$ = this.noticeReceiverSvc.deleteReceiver(receiveId) - .pipe(finalize(() => { - deleteReceiver$.unsubscribe(); - })) - .subscribe(message => { - if (message.code === 0) { - this.notifySvc.success("删除成功！", ""); - this.loadReceiversTable(); - } else { - this.notifySvc.error("删除失败！", message.msg); + deleteOneNoticeReceiver(receiveId: number) { + const deleteReceiver$ = this.noticeReceiverSvc + .deleteReceiver(receiveId) + .pipe( + finalize(() => { + deleteReceiver$.unsubscribe(); + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.notifySvc.success('删除成功！', ''); + this.loadReceiversTable(); + } else { + this.notifySvc.error('删除失败！', message.msg); + } + }, + error => { + this.notifySvc.error('删除失败！', error.msg); } - }, error => { - this.notifySvc.error("删除失败！", error.msg); - }) + ); } - onDeleteOneNoticeRule(ruleId : number) { + onDeleteOneNoticeRule(ruleId: number) { this.modal.confirm({ nzTitle: '请确认是否删除！', nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.deleteOneNoticeRule(ruleId) }); } - deleteOneNoticeRule(ruleId : number) { - const deleteRule$ = this.noticeRuleSvc.deleteNoticeRule(ruleId) - .pipe(finalize(() => { - deleteRule$.unsubscribe(); - })) - .subscribe(message => { - if (message.code === 0) { - this.notifySvc.success("删除成功！", ""); - this.loadRulesTable(); - } else { - this.notifySvc.error("删除失败！", message.msg); + deleteOneNoticeRule(ruleId: number) { + const deleteRule$ = this.noticeRuleSvc + .deleteNoticeRule(ruleId) + .pipe( + finalize(() => { + deleteRule$.unsubscribe(); + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.notifySvc.success('删除成功！', ''); + this.loadRulesTable(); + } else { + this.notifySvc.error('删除失败！', message.msg); + } + }, + error => { + this.notifySvc.error('删除失败！', error.msg); } - }, error => { - this.notifySvc.error("删除失败！", error.msg); - }) + ); } // start 新增或修改通知接收人弹出框 - isManageReceiverModalVisible : boolean = false; + isManageReceiverModalVisible: boolean = false; isManageReceiverModalAdd: boolean = true; isManageReceiverModalOkLoading: boolean = false; receiver!: NoticeReceiver; @@ -138,7 +155,7 @@ export class AlertNoticeComponent implements OnInit { this.isManageReceiverModalVisible = true; this.isManageReceiverModalAdd = true; } - onEditOneNoticeReceiver(receiver : NoticeReceiver) { + onEditOneNoticeReceiver(receiver: NoticeReceiver) { this.receiver = receiver; this.isManageReceiverModalVisible = true; this.isManageReceiverModalAdd = false; @@ -150,44 +167,56 @@ export class AlertNoticeComponent implements OnInit { onManageReceiverModalOk() { this.isManageReceiverModalOkLoading = true; if (this.isManageReceiverModalAdd) { - const modalOk$ = this.noticeReceiverSvc.newReceiver(this.receiver) - .pipe(finalize(() => { - modalOk$.unsubscribe(); - this.isManageReceiverModalOkLoading = false; - })) - .subscribe(message => { - if (message.code === 0) { - this.isManageReceiverModalVisible = false; - this.notifySvc.success("新增成功！", ""); - this.loadReceiversTable(); - } else { - this.notifySvc.error("新增失败！", message.msg); + const modalOk$ = this.noticeReceiverSvc + .newReceiver(this.receiver) + .pipe( + finalize(() => { + modalOk$.unsubscribe(); + this.isManageReceiverModalOkLoading = false; + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.isManageReceiverModalVisible = false; + this.notifySvc.success('新增成功！', ''); + this.loadReceiversTable(); + } else { + this.notifySvc.error('新增失败！', message.msg); + } + }, + error => { + this.notifySvc.error('新增失败！', error.msg); } - }, error => { - this.notifySvc.error("新增失败！", error.msg); - }) + ); } else { - const modalOk$ = this.noticeReceiverSvc.editReceiver(this.receiver) - .pipe(finalize(() => { - modalOk$.unsubscribe(); - this.isManageReceiverModalOkLoading = false; - })) - .subscribe(message => { - if (message.code === 0) { - this.isManageReceiverModalVisible = false; - this.notifySvc.success("修改成功！", ""); - this.loadReceiversTable(); - } else { - this.notifySvc.error("修改失败！", message.msg); + const modalOk$ = this.noticeReceiverSvc + .editReceiver(this.receiver) + .pipe( + finalize(() => { + modalOk$.unsubscribe(); + this.isManageReceiverModalOkLoading = false; + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.isManageReceiverModalVisible = false; + this.notifySvc.success('修改成功！', ''); + this.loadReceiversTable(); + } else { + this.notifySvc.error('修改失败！', message.msg); + } + }, + error => { + this.notifySvc.error('修改失败！', error.msg); } - }, error => { - this.notifySvc.error("修改失败！", error.msg); - }) + ); } } // start 新增或修改通知策略弹出框 - isManageRuleModalVisible : boolean = false; + isManageRuleModalVisible: boolean = false; isManageRuleModalAdd: boolean = true; isManageRuleModalOkLoading: boolean = false; rule!: NoticeRule; @@ -199,43 +228,53 @@ export class AlertNoticeComponent implements OnInit { this.isManageRuleModalAdd = true; } - onEditOneNoticeRule(rule : NoticeRule) { + onEditOneNoticeRule(rule: NoticeRule) { this.rule = rule; this.isManageRuleModalVisible = true; this.isManageRuleModalAdd = false; this.receiversOption.push({ value: rule.receiverId, label: rule.receiverName - }) + }); } loadReceiversOption() { - let receiverOption$ = this.noticeReceiverSvc.getReceivers() - .subscribe(message => { + let receiverOption$ = this.noticeReceiverSvc.getReceivers().subscribe( + message => { if (message.code === 0) { let data = message.data; this.receiversOption = []; data.forEach(item => { - let label = item.name + '-'; + let label = `${item.name}-`; switch (item.type) { - case 0: label = label + 'Phone';break; - case 1: label = label + 'Email';break; - case 2: label = label + 'WebHook';break; - case 3: label = label + 'WeChat';break; + case 0: + label = `${label}Phone`; + break; + case 1: + label = `${label}Email`; + break; + case 2: + label = `${label}WebHook`; + break; + case 3: + label = `${label}WeChat`; + break; } this.receiversOption.push({ value: item.id, label: label }); - }) + }); } else { console.warn(message.msg); } receiverOption$.unsubscribe(); - }, error => { + }, + error => { console.error(error.msg); receiverOption$.unsubscribe(); - }); + } + ); } onManageRuleModalCancel() { @@ -250,40 +289,51 @@ export class AlertNoticeComponent implements OnInit { }); this.isManageRuleModalOkLoading = true; if (this.isManageRuleModalAdd) { - const modalOk$ = this.noticeRuleSvc.newNoticeRule(this.rule) - .pipe(finalize(() => { - modalOk$.unsubscribe(); - this.isManageRuleModalOkLoading = false; - })) - .subscribe(message => { - if (message.code === 0) { - this.isManageRuleModalVisible = false; - this.notifySvc.success("新增成功！", ""); - this.loadRulesTable(); - } else { - this.notifySvc.error("新增失败！", message.msg); + const modalOk$ = this.noticeRuleSvc + .newNoticeRule(this.rule) + .pipe( + finalize(() => { + modalOk$.unsubscribe(); + this.isManageRuleModalOkLoading = false; + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.isManageRuleModalVisible = false; + this.notifySvc.success('新增成功！', ''); + this.loadRulesTable(); + } else { + this.notifySvc.error('新增失败！', message.msg); + } + }, + error => { + this.notifySvc.error('新增失败！', error.msg); } - }, error => { - this.notifySvc.error("新增失败！", error.msg); - }) + ); } else { - const modalOk$ = this.noticeRuleSvc.editNoticeRule(this.rule) - .pipe(finalize(() => { - modalOk$.unsubscribe(); - this.isManageRuleModalOkLoading = false; - })) - .subscribe(message => { - if (message.code === 0) { - this.isManageRuleModalVisible = false; - this.notifySvc.success("修改成功！", ""); - this.loadRulesTable(); - } else { - this.notifySvc.error("修改失败！", message.msg); + const modalOk$ = this.noticeRuleSvc + .editNoticeRule(this.rule) + .pipe( + finalize(() => { + modalOk$.unsubscribe(); + this.isManageRuleModalOkLoading = false; + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.isManageRuleModalVisible = false; + this.notifySvc.success('修改成功！', ''); + this.loadRulesTable(); + } else { + this.notifySvc.error('修改失败！', message.msg); + } + }, + error => { + this.notifySvc.error('修改失败！', error.msg); } - }, error => { - this.notifySvc.error("修改失败！", error.msg); - }) + ); } } - } diff --git a/web-app/src/app/routes/alert/alert-routing.module.ts b/web-app/src/app/routes/alert/alert-routing.module.ts index e0ca76e..4670289 100644 --- a/web-app/src/app/routes/alert/alert-routing.module.ts +++ b/web-app/src/app/routes/alert/alert-routing.module.ts @@ -1,8 +1,9 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import {AlertCenterComponent} from "./alert-center/alert-center.component"; -import {AlertSettingComponent} from "./alert-setting/alert-setting.component"; -import {AlertNoticeComponent} from "./alert-notice/alert-notice.component"; + +import { AlertCenterComponent } from './alert-center/alert-center.component'; +import { AlertNoticeComponent } from './alert-notice/alert-notice.component'; +import { AlertSettingComponent } from './alert-setting/alert-setting.component'; const routes: Routes = [ { path: '', component: AlertCenterComponent }, @@ -16,4 +17,4 @@ const routes: Routes = [ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) -export class AlertRoutingModule { } +export class AlertRoutingModule {} diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html index 7ff723d..62bcf65 100644 --- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html +++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.html @@ -17,7 +17,7 @@ 新增阈值 - @@ -29,110 +29,110 @@ - + - - - 指标对象 - 阈值触发表达式 - 告警级别 - 触发次数 - 通知模版 - 全局默认 - 最新修改时间 - 操作 - + + + 指标对象 + 阈值触发表达式 + 告警级别 + 触发次数 + 通知模版 + 全局默认 + 最新修改时间 + 操作 + - - - - {{ data.app + '.' + data.metric + '.' + data.field }} - - - {{ data.expr}} - - - - - 紧急告警 - - - - 严重告警 - - - - 警告告警 - - - {{ data.times }} - {{ data.template }} - - - 是 - - - 否 - - - {{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }} - - - - - - + + + + {{ data.app + '.' + data.metric + '.' + data.field }} + + + {{ data.expr }} + + + + + 紧急告警 + + + + 严重告警 + + + + 警告告警 + + + {{ data.times }} + {{ data.template }} + + + 是 + + + 否 + + + {{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }} + + + + + + - - 总量 {{ total }} - + 总量 {{ total }} -
    +
    - 指标对象 + 指标对象 - - + - + - + - {{cascadeValues[2]}} : 选中的指标对象 + {{ cascadeValues[2] }} : 选中的指标对象 instance : 所属行实例值 @@ -146,29 +146,39 @@ - + 阈值触发表达式 - - + - + 告警级别 - + @@ -176,28 +186,24 @@ - + 触发次数 - + - + - + $(metric) : 选中的指标对象名称 - $({{cascadeValues[2]}}) : 选中的指标对象值 + $({{ cascadeValues[2] }}) : 选中的指标对象值 $(instance) : 所在行实例值 @@ -214,33 +220,37 @@ - + 通知模版 - - + 全局默认 - + - - 启用告警 - + 启用告警 - +
    @@ -274,21 +284,17 @@ > - - - 未关联监控 - 已关联监控 - + + + 未关联监控 + 已关联监控 + - - - {{ data.name }} - + + + {{ data.name }} + diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.spec.ts b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.spec.ts index d0c7903..925a4e5 100644 --- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.spec.ts +++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.spec.ts @@ -8,9 +8,8 @@ describe('AlertSettingComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AlertSettingComponent ] - }) - .compileComponents(); + declarations: [AlertSettingComponent] + }).compileComponents(); }); beforeEach(() => { diff --git a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts index 0f2135b..2cf1d3c 100644 --- a/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts +++ b/web-app/src/app/routes/alert/alert-setting/alert-setting.component.ts @@ -1,31 +1,32 @@ import { Component, OnInit } from '@angular/core'; -import {NzTableQueryParams} from "ng-zorro-antd/table"; -import {NzModalService} from "ng-zorro-antd/modal"; -import {NzNotificationService} from "ng-zorro-antd/notification"; -import {AlertDefineService} from "../../../service/alert-define.service"; -import {AlertDefine} from "../../../pojo/AlertDefine"; -import {finalize, map} from "rxjs/operators"; -import {AppDefineService} from "../../../service/app-define.service"; -import {TransferChange, TransferItem} from "ng-zorro-antd/transfer"; -import {zip} from "rxjs"; -import {MonitorService} from "../../../service/monitor.service"; -import {Message} from "../../../pojo/Message"; -import {AlertDefineBind} from "../../../pojo/AlertDefineBind"; -import {Monitor} from "../../../pojo/Monitor"; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { NzNotificationService } from 'ng-zorro-antd/notification'; +import { NzTableQueryParams } from 'ng-zorro-antd/table'; +import { TransferChange, TransferItem } from 'ng-zorro-antd/transfer'; +import { zip } from 'rxjs'; +import { finalize, map } from 'rxjs/operators'; + +import { AlertDefine } from '../../../pojo/AlertDefine'; +import { AlertDefineBind } from '../../../pojo/AlertDefineBind'; +import { Message } from '../../../pojo/Message'; +import { Monitor } from '../../../pojo/Monitor'; +import { AlertDefineService } from '../../../service/alert-define.service'; +import { AppDefineService } from '../../../service/app-define.service'; +import { MonitorService } from '../../../service/monitor.service'; @Component({ selector: 'app-alert-setting', templateUrl: './alert-setting.component.html', - styles: [ - ] + styles: [] }) export class AlertSettingComponent implements OnInit { - - constructor(private modal: NzModalService, - private notifySvc: NzNotificationService, - private appDefineSvc: AppDefineService, - private monitorSvc: MonitorService, - private alertDefineSvc: AlertDefineService) { } + constructor( + private modal: NzModalService, + private notifySvc: NzNotificationService, + private appDefineSvc: AppDefineService, + private monitorSvc: MonitorService, + private alertDefineSvc: AlertDefineService + ) {} pageIndex: number = 1; pageSize: number = 8; @@ -39,19 +40,25 @@ export class AlertSettingComponent implements OnInit { ngOnInit(): void { this.loadAlertDefineTable(); // 查询监控层级 - const getHierarchy$ = this.appDefineSvc.getAppHierarchy() - .pipe(finalize(() => { - getHierarchy$.unsubscribe(); - })) - .subscribe(message => { - if (message.code === 0) { - this.appHierarchies = message.data; - } else { - console.warn(message.msg); + const getHierarchy$ = this.appDefineSvc + .getAppHierarchy() + .pipe( + finalize(() => { + getHierarchy$.unsubscribe(); + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.appHierarchies = message.data; + } else { + console.warn(message.msg); + } + }, + error => { + console.warn(error.msg); } - }, error => { - console.warn(error.msg); - }) + ); } sync() { @@ -60,8 +67,8 @@ export class AlertSettingComponent implements OnInit { loadAlertDefineTable() { this.tableLoading = true; - let alertDefineInit$ = this.alertDefineSvc.getAlertDefines(this.pageIndex - 1, this.pageSize) - .subscribe(message => { + let alertDefineInit$ = this.alertDefineSvc.getAlertDefines(this.pageIndex - 1, this.pageSize).subscribe( + message => { this.tableLoading = false; this.checkedAll = false; this.checkedDefineIds.clear(); @@ -74,10 +81,12 @@ export class AlertSettingComponent implements OnInit { console.warn(message.msg); } alertDefineInit$.unsubscribe(); - }, error => { + }, + error => { this.tableLoading = false; alertDefineInit$.unsubscribe(); - }); + } + ); } onNewAlertDefine() { @@ -89,7 +98,7 @@ export class AlertSettingComponent implements OnInit { onEditOneAlertDefine(alertDefineId: number) { if (alertDefineId == null) { - this.notifySvc.warning("未选中任何待编辑项！",""); + this.notifySvc.warning('未选中任何待编辑项！', ''); return; } this.editAlertDefine(alertDefineId); @@ -98,15 +107,15 @@ export class AlertSettingComponent implements OnInit { onEditAlertDefine() { // 编辑时只能选中一个 if (this.checkedDefineIds == null || this.checkedDefineIds.size === 0) { - this.notifySvc.warning("未选中任何待编辑项！",""); + this.notifySvc.warning('未选中任何待编辑项！', ''); return; } if (this.checkedDefineIds.size > 1) { - this.notifySvc.warning("只能对一个选中项进行编辑！",""); + this.notifySvc.warning('只能对一个选中项进行编辑！', ''); return; } let alertDefineId = 0; - this.checkedDefineIds.forEach(item => alertDefineId = item); + this.checkedDefineIds.forEach(item => (alertDefineId = item)); this.editAlertDefine(alertDefineId); } @@ -115,25 +124,31 @@ export class AlertSettingComponent implements OnInit { this.isManageModalVisible = true; this.isManageModalOkLoading = false; // 查询告警定义信息 - const getDefine$ = this.alertDefineSvc.getAlertDefine(alertDefineId) - .pipe(finalize(() => { - getDefine$.unsubscribe(); - })) - .subscribe(message => { - if (message.code === 0) { - this.define = message.data; - this.cascadeValues = [this.define.app, this.define.metric, this.define.field]; - } else { - this.notifySvc.error("查询此监控定义详情失败！",message.msg); + const getDefine$ = this.alertDefineSvc + .getAlertDefine(alertDefineId) + .pipe( + finalize(() => { + getDefine$.unsubscribe(); + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.define = message.data; + this.cascadeValues = [this.define.app, this.define.metric, this.define.field]; + } else { + this.notifySvc.error('查询此监控定义详情失败！', message.msg); + } + }, + error => { + this.notifySvc.error('查询此监控定义详情失败！', error.msg); } - }, error => { - this.notifySvc.error("查询此监控定义详情失败！",error.msg); - }) + ); } onDeleteAlertDefines() { if (this.checkedDefineIds == null || this.checkedDefineIds.size === 0) { - this.notifySvc.warning("未选中任何待删除项！",""); + this.notifySvc.warning('未选中任何待删除项！', ''); return; } this.modal.confirm({ @@ -141,7 +156,7 @@ export class AlertSettingComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.deleteAlertDefines(this.checkedDefineIds) }); } @@ -154,33 +169,34 @@ export class AlertSettingComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.deleteAlertDefines(defineIds) }); } - deleteAlertDefines(defineIds: Set) { if (defineIds == null || defineIds.size == 0) { - this.notifySvc.warning("未选中任何待删除项！",""); + this.notifySvc.warning('未选中任何待删除项！', ''); return; } this.tableLoading = true; - const deleteDefines$ = this.alertDefineSvc.deleteAlertDefines(defineIds) - .subscribe(message => { + const deleteDefines$ = this.alertDefineSvc.deleteAlertDefines(defineIds).subscribe( + message => { deleteDefines$.unsubscribe(); if (message.code === 0) { - this.notifySvc.success("删除成功！", ""); + this.notifySvc.success('删除成功！', ''); this.loadAlertDefineTable(); } else { this.tableLoading = false; - this.notifySvc.error("删除失败！", message.msg); + this.notifySvc.error('删除失败！', message.msg); } - }, error => { + }, + error => { this.tableLoading = false; deleteDefines$.unsubscribe(); - this.notifySvc.error("删除失败！", error.msg) - }) + this.notifySvc.error('删除失败！', error.msg); + } + ); } // begin: 列表多选分页逻辑 @@ -201,6 +217,7 @@ export class AlertSettingComponent implements OnInit { } /** * 分页回调 + * * @param params 页码信息 */ onTablePageChange(params: NzTableQueryParams) { @@ -211,7 +228,6 @@ export class AlertSettingComponent implements OnInit { } // end: 列表多选逻辑 - // start 新增修改告警定义model isManageModalVisible = false; isManageModalOkLoading = false; @@ -227,39 +243,51 @@ export class AlertSettingComponent implements OnInit { this.define.metric = this.cascadeValues[1]; this.define.field = this.cascadeValues[2]; if (this.isManageModalAdd) { - const modalOk$ = this.alertDefineSvc.newAlertDefine(this.define) - .pipe(finalize(() => { - modalOk$.unsubscribe(); - this.isManageModalOkLoading = false; - })) - .subscribe(message => { - if (message.code === 0) { - this.isManageModalVisible = false; - this.notifySvc.success("新增成功！", ""); - this.loadAlertDefineTable(); - } else { - this.notifySvc.error("新增失败！", message.msg); + const modalOk$ = this.alertDefineSvc + .newAlertDefine(this.define) + .pipe( + finalize(() => { + modalOk$.unsubscribe(); + this.isManageModalOkLoading = false; + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.isManageModalVisible = false; + this.notifySvc.success('新增成功！', ''); + this.loadAlertDefineTable(); + } else { + this.notifySvc.error('新增失败！', message.msg); + } + }, + error => { + this.notifySvc.error('新增失败！', error.msg); } - }, error => { - this.notifySvc.error("新增失败！", error.msg); - }) + ); } else { - const modalOk$ = this.alertDefineSvc.editAlertDefine(this.define) - .pipe(finalize(() => { - modalOk$.unsubscribe(); - this.isManageModalOkLoading = false; - })) - .subscribe(message => { - if (message.code === 0) { - this.isManageModalVisible = false; - this.notifySvc.success("修改成功！", ""); - this.loadAlertDefineTable(); - } else { - this.notifySvc.error("修改失败！", message.msg); + const modalOk$ = this.alertDefineSvc + .editAlertDefine(this.define) + .pipe( + finalize(() => { + modalOk$.unsubscribe(); + this.isManageModalOkLoading = false; + }) + ) + .subscribe( + message => { + if (message.code === 0) { + this.isManageModalVisible = false; + this.notifySvc.success('修改成功！', ''); + this.loadAlertDefineTable(); + } else { + this.notifySvc.error('修改失败！', message.msg); + } + }, + error => { + this.notifySvc.error('修改失败！', error.msg); } - }, error => { - this.notifySvc.error("修改失败！", error.msg); - }) + ); } } // end 新增修改告警定义model @@ -280,7 +308,7 @@ export class AlertSettingComponent implements OnInit { if (defineBindData.data != undefined) { defineBindData.data.forEach(bind => { bindRecode[bind.monitorId] = bind.monitorName; - }) + }); } let listTmp: any[] = []; if (monitorData.data != undefined) { @@ -290,12 +318,13 @@ export class AlertSettingComponent implements OnInit { name: monitor.name, key: monitor.id, direction: bindRecode[monitor.id] == undefined ? 'left' : 'right' - }) - }) + }); + }); } return listTmp; }) - ).subscribe(list => this.transferData = list); + ) + .subscribe(list => (this.transferData = list)); } onConnectModalCancel() { this.isConnectModalVisible = false; @@ -311,23 +340,29 @@ export class AlertSettingComponent implements OnInit { bind.monitorName = item.name; defineBinds.push(bind); } - }) - const applyBind$ = this.alertDefineSvc.applyAlertDefineMonitorsBind(this.currentAlertDefineId, defineBinds) - .pipe(finalize(() => { - applyBind$.unsubscribe(); - })) - .subscribe(message => { - this.isConnectModalOkLoading = false; - if (message.code === 0) { - this.notifySvc.success("应用成功！", ""); - this.isConnectModalVisible = false; - this.loadAlertDefineTable(); - } else { - this.notifySvc.error("应用失败！", message.msg); + }); + const applyBind$ = this.alertDefineSvc + .applyAlertDefineMonitorsBind(this.currentAlertDefineId, defineBinds) + .pipe( + finalize(() => { + applyBind$.unsubscribe(); + }) + ) + .subscribe( + message => { + this.isConnectModalOkLoading = false; + if (message.code === 0) { + this.notifySvc.success('应用成功！', ''); + this.isConnectModalVisible = false; + this.loadAlertDefineTable(); + } else { + this.notifySvc.error('应用失败！', message.msg); + } + }, + error => { + this.notifySvc.error('应用失败！', error.msg); } - }, error => { - this.notifySvc.error("应用失败！", error.msg); - }) + ); } change(ret: TransferChange): void { const listKeys = ret.list.map(l => l.key); @@ -344,5 +379,4 @@ export class AlertSettingComponent implements OnInit { }); } // end 告警定义与监控关联model - } diff --git a/web-app/src/app/routes/alert/alert.module.ts b/web-app/src/app/routes/alert/alert.module.ts index ac108b5..f98f5c9 100644 --- a/web-app/src/app/routes/alert/alert.module.ts +++ b/web-app/src/app/routes/alert/alert.module.ts @@ -1,24 +1,21 @@ import { NgModule, Type } from '@angular/core'; import { SharedModule } from '@shared'; -import { AlertRoutingModule } from './alert-routing.module'; -import {NzBreadCrumbModule} from "ng-zorro-antd/breadcrumb"; -import {NzDividerModule} from "ng-zorro-antd/divider"; -import {AlertCenterComponent} from "./alert-center/alert-center.component"; -import {AlertSettingComponent} from "./alert-setting/alert-setting.component"; -import {AlertNoticeComponent} from "./alert-notice/alert-notice.component"; -import {NzTagModule} from "ng-zorro-antd/tag"; -import {NzRadioModule} from "ng-zorro-antd/radio"; -import {NzSwitchModule} from "ng-zorro-antd/switch"; -import {NzCascaderModule} from "ng-zorro-antd/cascader"; -import {NzTransferModule} from "ng-zorro-antd/transfer"; -import {NzCollapseModule} from "ng-zorro-antd/collapse"; -import {NzListModule} from "ng-zorro-antd/list"; +import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; +import { NzCascaderModule } from 'ng-zorro-antd/cascader'; +import { NzCollapseModule } from 'ng-zorro-antd/collapse'; +import { NzDividerModule } from 'ng-zorro-antd/divider'; +import { NzListModule } from 'ng-zorro-antd/list'; +import { NzRadioModule } from 'ng-zorro-antd/radio'; +import { NzSwitchModule } from 'ng-zorro-antd/switch'; +import { NzTagModule } from 'ng-zorro-antd/tag'; +import { NzTransferModule } from 'ng-zorro-antd/transfer'; -const COMPONENTS: Type[] = [ - AlertCenterComponent, - AlertSettingComponent, - AlertNoticeComponent -]; +import { AlertCenterComponent } from './alert-center/alert-center.component'; +import { AlertNoticeComponent } from './alert-notice/alert-notice.component'; +import { AlertRoutingModule } from './alert-routing.module'; +import { AlertSettingComponent } from './alert-setting/alert-setting.component'; + +const COMPONENTS: Array> = [AlertCenterComponent, AlertSettingComponent, AlertNoticeComponent]; @NgModule({ imports: [ @@ -34,6 +31,6 @@ const COMPONENTS: Type[] = [ NzCollapseModule, NzListModule ], - declarations: COMPONENTS, + declarations: COMPONENTS }) -export class AlertModule { } +export class AlertModule {} diff --git a/web-app/src/app/routes/dashboard/ColorTheme.ts b/web-app/src/app/routes/dashboard/ColorTheme.ts index 01731ef..ed2be8c 100644 --- a/web-app/src/app/routes/dashboard/ColorTheme.ts +++ b/web-app/src/app/routes/dashboard/ColorTheme.ts @@ -1,18 +1,7 @@ -import {ThemeOption} from "ngx-echarts"; +import { ThemeOption } from 'ngx-echarts'; export const CoolTheme: ThemeOption = { - color: [ - '#b21ab4', - '#6f0099', - '#2a2073', - '#0b5ea8', - '#17aecc', - '#b3b3ff', - '#eb99ff', - '#fae6ff', - '#e6f2ff', - '#eeeeee' - ], + color: ['#b21ab4', '#6f0099', '#2a2073', '#0b5ea8', '#17aecc', '#b3b3ff', '#eb99ff', '#fae6ff', '#e6f2ff', '#eeeeee'], title: { textStyle: { diff --git a/web-app/src/app/routes/dashboard/dashboard.component.html b/web-app/src/app/routes/dashboard/dashboard.component.html index fd3ae52..6c0231a 100644 --- a/web-app/src/app/routes/dashboard/dashboard.component.html +++ b/web-app/src/app/routes/dashboard/dashboard.component.html @@ -1,6 +1,13 @@ -
    +
    -
    +
    diff --git a/web-app/src/app/routes/dashboard/dashboard.component.ts b/web-app/src/app/routes/dashboard/dashboard.component.ts index 6db24b3..b94cbae 100644 --- a/web-app/src/app/routes/dashboard/dashboard.component.ts +++ b/web-app/src/app/routes/dashboard/dashboard.component.ts @@ -1,17 +1,11 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - Inject, - OnDestroy, - OnInit -} from '@angular/core'; -import {NzMessageService} from "ng-zorro-antd/message"; -import {MonitorService} from "../../service/monitor.service"; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { I18NService } from '@core'; +import { ALAIN_I18N_TOKEN } from '@delon/theme'; import { EChartsOption } from 'echarts'; -import {I18NService} from "@core"; -import {ALAIN_I18N_TOKEN} from "@delon/theme"; -import {Router} from "@angular/router"; +import { NzMessageService } from 'ng-zorro-antd/message'; + +import { MonitorService } from '../../service/monitor.service'; @Component({ selector: 'app-dashboard', @@ -20,12 +14,13 @@ import {Router} from "@angular/router"; changeDetection: ChangeDetectionStrategy.OnPush }) export class DashboardComponent implements OnInit, OnDestroy { - - constructor(private msg: NzMessageService, - private monitorSvc: MonitorService, - @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService, - private router: Router, - private cdr: ChangeDetectorRef){} + constructor( + private msg: NzMessageService, + private monitorSvc: MonitorService, + @Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService, + private router: Router, + private cdr: ChangeDetectorRef + ) {} interval$!: number; appsCountLoading: boolean = true; @@ -45,8 +40,8 @@ export class DashboardComponent implements OnInit, OnDestroy { } refresh(): void { - let dashboard$ = this.monitorSvc.getAppsMonitorSummary() - .subscribe(message => { + let dashboard$ = this.monitorSvc.getAppsMonitorSummary().subscribe( + message => { dashboard$.unsubscribe(); if (message.code === 0) { // {app:'linux',size: 12} @@ -54,7 +49,7 @@ export class DashboardComponent implements OnInit, OnDestroy { this.appsCountTableData = []; let total = 0; apps.forEach(app => { - let appName = this.i18nSvc.fanyi('monitor.app.' + app.app); + let appName = this.i18nSvc.fanyi(`monitor.app.${app.app}`); this.appsCountTableData.push({ // 自定义属性 app: app.app, @@ -62,7 +57,7 @@ export class DashboardComponent implements OnInit, OnDestroy { name: appName, value: app.size }); - total = total + app.size? app.size : 0; + total = total + app.size ? app.size : 0; }); this.appsCountEChartOption = { @@ -94,14 +89,12 @@ export class DashboardComponent implements OnInit, OnDestroy { fontSize: 15, color: '#ffffff', fontStyle: 'oblique', - formatter: '{a}:{c}', + formatter: '{a}:{c}' }, labelLine: { show: false }, - data: [ - { value: total, name: '监控总量' }, - ] + data: [{ value: total, name: '监控总量' }] }, { name: '纳管数量分布', @@ -148,10 +141,12 @@ export class DashboardComponent implements OnInit, OnDestroy { }; this.cdr.detectChanges(); } - }, error => { + }, + error => { console.error(error); dashboard$.unsubscribe(); - }); + } + ); } onChartClick(click: any) { diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html index a1570a9..1b680df 100644 --- a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html +++ b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.html @@ -1,42 +1,42 @@ - + - - {{field.name}} - + + {{ field.name }} + - - {{ value.origin}} - + + {{ value.origin }} + - + - - 属性 - 值 - + + 属性 + 值 + - - {{field.name}} - {{rowValues[i].origin + ' ' + (field.unit? field.unit : '')}} - + + {{ field.name }} + {{ rowValues[i].origin + ' ' + (field.unit ? field.unit : '') }} + -

    {{metrics}}

    +

    {{ metrics }}

    - - 采集时间:{{time | _date: "HH:mm:ss"}} + + + 采集时间:{{ time | _date: 'HH:mm:ss' }}
    diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.spec.ts b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.spec.ts index 599eaa4..7514537 100644 --- a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.spec.ts +++ b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.spec.ts @@ -8,9 +8,8 @@ describe('MonitorDataChartComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MonitorDataChartComponent ] - }) - .compileComponents(); + declarations: [MonitorDataChartComponent] + }).compileComponents(); }); beforeEach(() => { diff --git a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts index 632a097..685a0af 100644 --- a/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts +++ b/web-app/src/app/routes/monitor/monitor-data-chart/monitor-data-chart.component.ts @@ -1,5 +1,6 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {MonitorService} from "../../../service/monitor.service"; +import { Component, Input, OnInit } from '@angular/core'; + +import { MonitorService } from '../../../service/monitor.service'; @Component({ selector: 'app-monitor-data-chart', @@ -7,9 +8,10 @@ import {MonitorService} from "../../../service/monitor.service"; styleUrls: ['./monitor-data-chart.component.less'] }) export class MonitorDataChartComponent implements OnInit { - @Input() - get monitorId(): number { return this._monitorId; } + get monitorId(): number { + return this._monitorId; + } set monitorId(monitorId: number) { this._monitorId = monitorId; this.loadData(); @@ -24,13 +26,13 @@ export class MonitorDataChartComponent implements OnInit { rowValues!: any[]; isTable: boolean = true; - constructor(private monitorSvc: MonitorService) { } + constructor(private monitorSvc: MonitorService) {} ngOnInit(): void {} loadData() { // 读取实时指标数据 - let metricData$ = this.monitorSvc.getMonitorMetricsData(this.monitorId, this.metrics) - .subscribe(message => { + let metricData$ = this.monitorSvc.getMonitorMetricsData(this.monitorId, this.metrics).subscribe( + message => { metricData$.unsubscribe(); if (message.code === 0) { this.time = message.data.time; @@ -43,9 +45,10 @@ export class MonitorDataChartComponent implements OnInit { } else { console.error(message.msg); } - }, error => { + }, + error => { metricData$.unsubscribe(); - }) + } + ); } - } diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html index 0539135..10dd1d0 100644 --- a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html +++ b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html @@ -7,40 +7,50 @@ - + 监控列表 - {{'monitor.app.' + app | i18n}} 监控详情 + {{ 'monitor.app.' + app | i18n }} 监控详情 - +

    ID

    -

    {{monitorId}}

    +

    {{ monitorId }}

    名称

    -

    {{monitor?.name}}

    +

    {{ monitor?.name }}

    HOST

    -

    {{monitor?.host}}

    +

    {{ monitor?.host }}

    端口

    -

    {{port}}

    +

    {{ port }}

    描述

    -

    {{monitor?.description}}

    +

    {{ monitor?.description }}

    状态

    @@ -69,15 +79,21 @@

    采集间隔

    -

    {{monitor?.intervals}}s

    +

    {{ monitor?.intervals }}s

    创建时间

    -

    {{monitor?.gmtCreate}}

    +

    {{ monitor?.gmtCreate }}

    最近更新时间

    -

    {{monitor?.gmtUpdate}}

    +

    {{ monitor?.gmtUpdate }}

         @@ -89,7 +105,7 @@ 监控数据报告详情 -
    +
    diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.spec.ts b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.spec.ts index cdaacfa..69988c5 100644 --- a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.spec.ts +++ b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.spec.ts @@ -8,9 +8,8 @@ describe('MonitorDetailComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MonitorDetailComponent ] - }) - .compileComponents(); + declarations: [MonitorDetailComponent] + }).compileComponents(); }); beforeEach(() => { diff --git a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts index 67421f3..c11c05c 100644 --- a/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts +++ b/web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.ts @@ -1,10 +1,11 @@ import { Component, OnInit } from '@angular/core'; -import {MonitorService} from "../../../service/monitor.service"; -import {ActivatedRoute, ParamMap, Router} from "@angular/router"; -import {TitleService} from "@delon/theme"; -import {switchMap} from "rxjs/operators"; -import {Param} from "../../../pojo/Param"; -import {Monitor} from "../../../pojo/Monitor"; +import { ActivatedRoute, ParamMap, Router } from '@angular/router'; +import { TitleService } from '@delon/theme'; +import { switchMap } from 'rxjs/operators'; + +import { Monitor } from '../../../pojo/Monitor'; +import { Param } from '../../../pojo/Param'; +import { MonitorService } from '../../../service/monitor.service'; @Component({ selector: 'app-monitor-detail', @@ -12,12 +13,8 @@ import {Monitor} from "../../../pojo/Monitor"; styleUrls: ['./monitor-detail.component.less'] }) export class MonitorDetailComponent implements OnInit { - - constructor(private monitorSvc: MonitorService, - private route: ActivatedRoute, - private router: Router, - private titleSvc: TitleService) { } - isSpinning: boolean = false + constructor(private monitorSvc: MonitorService, private route: ActivatedRoute, private router: Router, private titleSvc: TitleService) {} + isSpinning: boolean = false; monitorId!: number; app: string | undefined; monitor: Monitor | undefined; @@ -26,32 +23,37 @@ export class MonitorDetailComponent implements OnInit { metrics!: string[]; ngOnInit(): void { - this.route.paramMap.pipe( - switchMap((paramMap: ParamMap) => { - this.isSpinning = true; - let id = paramMap.get("monitorId"); - this.monitorId = Number(id); - // 查询监控指标组结构信息 - return this.monitorSvc.getMonitor(this.monitorId); - }) - ).subscribe(message => { - this.isSpinning = false; - if (message.code === 0) { - this.monitor = message.data.monitor; - this.app = this.monitor?.app; - let params: Param[] = message.data.params; - // 取出端口信息 - params.forEach(param => { - if (param.field === 'port') { - this.port = Number(param.value); - } + this.route.paramMap + .pipe( + switchMap((paramMap: ParamMap) => { + this.isSpinning = true; + let id = paramMap.get('monitorId'); + this.monitorId = Number(id); + // 查询监控指标组结构信息 + return this.monitorSvc.getMonitor(this.monitorId); }) - this.metrics = message.data.metrics; - } else { - console.warn(message.msg); - } - }, error => { - this.isSpinning = false; - }); + ) + .subscribe( + message => { + this.isSpinning = false; + if (message.code === 0) { + this.monitor = message.data.monitor; + this.app = this.monitor?.app; + let params: Param[] = message.data.params; + // 取出端口信息 + params.forEach(param => { + if (param.field === 'port') { + this.port = Number(param.value); + } + }); + this.metrics = message.data.metrics; + } else { + console.warn(message.msg); + } + }, + error => { + this.isSpinning = false; + } + ); } } diff --git 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 index a0084da..73d025c 100644 --- 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 @@ -7,56 +7,59 @@ - + 监控列表 - 修改 {{'monitor.app.' + monitor.app | i18n}} 监控 + 修改 {{ 'monitor.app.' + monitor.app | i18n }} 监控 -
    +
    - - 监控Host - + 监控Host - + - + - + 监控名称 - + - + - {{paramDefine.name}} + {{ paramDefine.name }} - - + + - {{paramDefine.name}} + {{ paramDefine.name }} @@ -67,7 +70,7 @@ [(ngModel)]="params[i].value" [id]="paramDefine.field" [name]="paramDefine.field" - [placeholder]="paramDefine.placeholder? paramDefine.placeholder : ''" + [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''" /> @@ -75,11 +78,8 @@ - - {{paramDefine.name}} + {{ paramDefine.name }} - {{paramDefine.name}} + {{ paramDefine.name }} - {{paramDefine.name}} + {{ paramDefine.name }} - + - - + - - 采集间隔 - + 采集间隔 - + - + - - 是否探测 - + 是否探测 - + - - 描述备注 - + 描述备注 - +
    - - - + + +
    - diff --git a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.spec.ts b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.spec.ts index 624afe6..256440c 100644 --- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.spec.ts +++ b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.spec.ts @@ -8,9 +8,8 @@ describe('MonitorModifyComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MonitorEditComponent ] - }) - .compileComponents(); + declarations: [MonitorEditComponent] + }).compileComponents(); }); beforeEach(() => { diff --git a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts index 481cd57..5d8b1d8 100644 --- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts +++ b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts @@ -1,31 +1,32 @@ import { Component, OnInit } from '@angular/core'; -import {switchMap} from "rxjs/operators"; -import {ActivatedRoute, ParamMap, Router} from "@angular/router"; -import {Param} from "../../../pojo/Param"; -import {AppDefineService} from "../../../service/app-define.service"; -import {MonitorService} from "../../../service/monitor.service"; -import {NzNotificationService} from "ng-zorro-antd/notification"; -import {ParamDefine} from "../../../pojo/ParamDefine"; -import {Monitor} from "../../../pojo/Monitor"; -import {FormGroup} from "@angular/forms"; -import {Message} from "../../../pojo/Message"; -import {throwError} from "rxjs"; -import {TitleService} from "@delon/theme"; +import { FormGroup } from '@angular/forms'; +import { ActivatedRoute, ParamMap, Router } from '@angular/router'; +import { TitleService } from '@delon/theme'; +import { NzNotificationService } from 'ng-zorro-antd/notification'; +import { throwError } from 'rxjs'; +import { switchMap } from 'rxjs/operators'; + +import { Message } from '../../../pojo/Message'; +import { Monitor } from '../../../pojo/Monitor'; +import { Param } from '../../../pojo/Param'; +import { ParamDefine } from '../../../pojo/ParamDefine'; +import { AppDefineService } from '../../../service/app-define.service'; +import { MonitorService } from '../../../service/monitor.service'; @Component({ selector: 'app-monitor-modify', templateUrl: './monitor-edit.component.html', - styles: [ - ] + styles: [] }) export class MonitorEditComponent implements OnInit { - - constructor(private appDefineSvc: AppDefineService, - private monitorSvc: MonitorService, - private route: ActivatedRoute, - private router: Router, - private titleSvc: TitleService, - private notifySvc: NzNotificationService,) { } + constructor( + private appDefineSvc: AppDefineService, + private monitorSvc: MonitorService, + private route: ActivatedRoute, + private router: Router, + private titleSvc: TitleService, + private notifySvc: NzNotificationService + ) {} paramDefines!: ParamDefine[]; params!: Param[]; @@ -34,129 +35,134 @@ export class MonitorEditComponent implements OnInit { profileForm: FormGroup = new FormGroup({}); detected: boolean = true; passwordVisible: boolean = false; - isSpinning:boolean = false + isSpinning: boolean = false; ngOnInit(): void { - this.route.paramMap.pipe( - switchMap((paramMap: ParamMap) => { - this.isSpinning = false; - this.passwordVisible = false; - let id = paramMap.get("monitorId"); - this.monitor.id = Number(id); - // 查询监控信息 - return this.monitorSvc.getMonitor(this.monitor.id); - }) - ).pipe(switchMap((message: Message) => { - if (message.code === 0) { - this.monitor = message.data.monitor; - this.titleSvc.setTitleByI18n('monitor.app.' + this.monitor.app) - if (message.data.params != null) { - message.data.params.forEach((item: Param) => { - 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); - this.notifySvc.error("查询异常，此监控不存在", message.msg); - return throwError("查询此监控异常"); - } - return this.appDefineSvc.getAppParamsDefine(this.monitor.app); - })).subscribe(message => { - if (message.code === 0) { - this.paramDefines = message.data; - this.params = []; - this.paramDefines.forEach(define => { - let param = this.paramValueMap.get(define.field); - if (param === undefined) { - param = new Param(); - param.type = define.type === "number" ? 0 : 1; - if (define.type === "boolean") { - param.value = false; - } - if (param.field === "host") { - param.value = this.monitor.host; + this.route.paramMap + .pipe( + switchMap((paramMap: ParamMap) => { + this.isSpinning = false; + this.passwordVisible = false; + let id = paramMap.get('monitorId'); + this.monitor.id = Number(id); + // 查询监控信息 + return this.monitorSvc.getMonitor(this.monitor.id); + }) + ) + .pipe( + switchMap((message: Message) => { + if (message.code === 0) { + this.monitor = message.data.monitor; + this.titleSvc.setTitleByI18n(`monitor.app.${this.monitor.app}`); + if (message.data.params != null) { + message.data.params.forEach((item: Param) => { + this.paramValueMap.set(item.field, item); + }); } + this.params = message.data.params; + this.detected = message.data.detected ? message.data.detected : true; } else { - if (define.type === "boolean") { - if (param.value != null) { - param.value = param.value.toLowerCase() == 'true'; - } else { + console.warn(message.msg); + this.notifySvc.error('查询异常，此监控不存在', message.msg); + return throwError('查询此监控异常'); + } + return this.appDefineSvc.getAppParamsDefine(this.monitor.app); + }) + ) + .subscribe(message => { + if (message.code === 0) { + this.paramDefines = message.data; + this.params = []; + this.paramDefines.forEach(define => { + let param = this.paramValueMap.get(define.field); + if (param === undefined) { + param = new Param(); + param.type = define.type === 'number' ? 0 : 1; + if (define.type === 'boolean') { param.value = false; } + if (param.field === 'host') { + param.value = this.monitor.host; + } + } else { + if (define.type === 'boolean') { + if (param.value != null) { + param.value = param.value.toLowerCase() == 'true'; + } else { + param.value = false; + } + } } - } - this.params.push(param); - }) - } else { - console.warn(message.msg); - } - }); + this.params.push(param); + }); + } else { + console.warn(message.msg); + } + }); } onSubmit() { // todo 暂时单独设置host属性值 this.params.forEach(param => { - if (param.field === "host") { + if (param.field === 'host') { param.value = this.monitor.host; } }); let addMonitor = { - "detected": this.detected, - "monitor": this.monitor, - "params": this.params + detected: this.detected, + monitor: this.monitor, + params: this.params }; this.isSpinning = true; - this.monitorSvc.editMonitor(addMonitor) - .subscribe(message => { - this.isSpinning = false; - if (message.code === 0) { - this.notifySvc.success("修改监控成功", ""); - this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`) - } else { - this.notifySvc.error("修改监控失败", message.msg); - }}, - error => { - this.isSpinning = false; - this.notifySvc.error("修改监控失败", error.error.msg); + this.monitorSvc.editMonitor(addMonitor).subscribe( + message => { + this.isSpinning = false; + if (message.code === 0) { + this.notifySvc.success('修改监控成功', ''); + this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`); + } else { + this.notifySvc.error('修改监控失败', message.msg); } - ) + }, + error => { + this.isSpinning = false; + this.notifySvc.error('修改监控失败', error.error.msg); + } + ); } onDetect() { // todo 暂时单独设置host属性值 this.params.forEach(param => { - if (param.field === "host") { + if (param.field === 'host') { param.value = this.monitor.host; } }); let detectMonitor = { - "detected": this.detected, - "monitor": this.monitor, - "params": this.params + detected: this.detected, + monitor: this.monitor, + params: this.params }; this.isSpinning = true; - this.monitorSvc.detectMonitor(detectMonitor) - .subscribe(message => { + this.monitorSvc.detectMonitor(detectMonitor).subscribe( + message => { this.isSpinning = false; if (message.code === 0) { - this.notifySvc.success("探测成功", ""); + this.notifySvc.success('探测成功', ''); } else { - this.notifySvc.error("探测失败", message.msg); + this.notifySvc.error('探测失败', message.msg); } }, - error => { + error => { this.isSpinning = false; - this.notifySvc.error("探测异常", error.error.msg); - } - ) + this.notifySvc.error('探测异常', error.error.msg); + } + ); } onCancel() { let app = this.monitor.app; app = app ? app : ''; - this.router.navigateByUrl(`/monitors?app=${app}`) + this.router.navigateByUrl(`/monitors?app=${app}`); } - } diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html index 739e9e3..07d769d 100644 --- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html +++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html @@ -8,17 +8,17 @@ - {{'monitor.app.' + app | i18n}} 监控列表 + {{ 'monitor.app.' + app | i18n }} 监控列表 - @@ -38,82 +38,86 @@ - + - - - 监控名称 - 监控状态 - 监控Host - 监控类型 - 最新修改时间 - 操作 - + + + 监控名称 + 监控状态 + 监控Host + 监控类型 + 最新修改时间 + 操作 + - - - - - {{ data.name }} - - - - - - 未监控 - - - - 正常监控 - - - - 监控不可用 - - - - 监控不可达 - - - - 监控已挂起 - - - {{ data.host }} - - - - {{ 'monitor.app.' + data.app | i18n }} - - - {{ data.gmtUpdate? data.gmtUpdate : data.gmtCreate }} - - - - - - - + + + + + {{ data.name }} + + + + + + 未监控 + + + + 正常监控 + + + + 监控不可用 + + + + 监控不可达 + + + + 监控已挂起 + + + {{ data.host }} + + + + {{ 'monitor.app.' + data.app | i18n }} + + + {{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }} + + + + + + + - - 总量 {{ total }} - + 总量 {{ total }} diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.spec.ts b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.spec.ts index 19e6e4d..1eec6ca 100644 --- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.spec.ts +++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.spec.ts @@ -8,9 +8,8 @@ describe('MonitorListComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MonitorListComponent ] - }) - .compileComponents(); + declarations: [MonitorListComponent] + }).compileComponents(); }); beforeEach(() => { diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts index 074092b..a23f154 100644 --- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts +++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts @@ -1,26 +1,27 @@ import { Component, OnInit } from '@angular/core'; -import {ActivatedRoute, Router} from "@angular/router"; -import {MonitorService} from "../../../service/monitor.service"; -import {Monitor} from "../../../pojo/Monitor"; -import {NzModalService} from "ng-zorro-antd/modal"; -import {NzNotificationService} from "ng-zorro-antd/notification"; -import {NzMessageService} from "ng-zorro-antd/message"; -import {NzTableQueryParams} from "ng-zorro-antd/table"; +import { ActivatedRoute, Router } from '@angular/router'; +import { NzMessageService } from 'ng-zorro-antd/message'; +import { NzModalService } from 'ng-zorro-antd/modal'; +import { NzNotificationService } from 'ng-zorro-antd/notification'; +import { NzTableQueryParams } from 'ng-zorro-antd/table'; + +import { Monitor } from '../../../pojo/Monitor'; +import { MonitorService } from '../../../service/monitor.service'; @Component({ selector: 'app-monitor-list', templateUrl: './monitor-list.component.html', - styles: [ - ] + styles: [] }) export class MonitorListComponent implements OnInit { - - constructor(private route: ActivatedRoute, - private router: Router, - private modal: NzModalService, - private notifySvc: NzNotificationService, - private msg: NzMessageService, - private monitorSvc: MonitorService) { } + constructor( + private route: ActivatedRoute, + private router: Router, + private modal: NzModalService, + private notifySvc: NzNotificationService, + private msg: NzMessageService, + private monitorSvc: MonitorService + ) {} app!: string; pageIndex: number = 1; @@ -31,15 +32,14 @@ export class MonitorListComponent implements OnInit { checkedMonitorIds = new Set(); ngOnInit(): void { - this.route.queryParamMap - .subscribe(paramMap => { - this.app = paramMap.get("app") || ''; - this.pageIndex = 1; - this.pageSize = 8; - this.checkedMonitorIds = new Set(); - this.tableLoading = true; - this.loadMonitorTable(); - }); + this.route.queryParamMap.subscribe(paramMap => { + this.app = paramMap.get('app') || ''; + this.pageIndex = 1; + this.pageSize = 8; + this.checkedMonitorIds = new Set(); + this.tableLoading = true; + this.loadMonitorTable(); + }); } sync() { @@ -48,8 +48,8 @@ export class MonitorListComponent implements OnInit { loadMonitorTable() { this.tableLoading = true; - let monitorInit$ = this.monitorSvc.getMonitors(this.app, this.pageIndex - 1, this.pageSize) - .subscribe(message => { + let monitorInit$ = this.monitorSvc.getMonitors(this.app, this.pageIndex - 1, this.pageSize).subscribe( + message => { this.tableLoading = false; this.checkedAll = false; this.checkedMonitorIds.clear(); @@ -66,12 +66,13 @@ export class MonitorListComponent implements OnInit { error => { this.tableLoading = false; monitorInit$.unsubscribe(); - }); + } + ); } onEditOneMonitor(monitorId: number) { if (monitorId == null) { - this.notifySvc.warning("未选中任何待编辑项！",""); + this.notifySvc.warning('未选中任何待编辑项！', ''); return; } this.router.navigateByUrl(`/monitors/${monitorId}/edit`); @@ -82,15 +83,15 @@ export class MonitorListComponent implements OnInit { onEditMonitor() { // 编辑时只能选中一个监控 if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) { - this.notifySvc.warning("未选中任何待编辑项！",""); + this.notifySvc.warning('未选中任何待编辑项！', ''); return; } if (this.checkedMonitorIds.size > 1) { - this.notifySvc.warning("只能对一个选中项进行编辑！",""); + this.notifySvc.warning('只能对一个选中项进行编辑！', ''); return; } let monitorId = 0; - this.checkedMonitorIds.forEach(item => monitorId = item); + this.checkedMonitorIds.forEach(item => (monitorId = item)); this.router.navigateByUrl(`/monitors/${monitorId}/edit`); } @@ -102,14 +103,14 @@ export class MonitorListComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.deleteMonitors(monitors) }); } onDeleteMonitors() { if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) { - this.notifySvc.warning("未选中任何待删除项！",""); + this.notifySvc.warning('未选中任何待删除项！', ''); return; } this.modal.confirm({ @@ -117,40 +118,39 @@ export class MonitorListComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.deleteMonitors(this.checkedMonitorIds) }); } - deleteMonitors(monitors: Set) { if (monitors == null || monitors.size == 0) { - this.notifySvc.warning("未选中任何待删除项！",""); + this.notifySvc.warning('未选中任何待删除项！', ''); return; } this.tableLoading = true; - const deleteMonitors$ = this.monitorSvc.deleteMonitors(monitors) - .subscribe(message => { - deleteMonitors$.unsubscribe(); + const deleteMonitors$ = this.monitorSvc.deleteMonitors(monitors).subscribe( + message => { + deleteMonitors$.unsubscribe(); if (message.code === 0) { - this.notifySvc.success("删除成功！", ""); + this.notifySvc.success('删除成功！', ''); this.loadMonitorTable(); } else { this.tableLoading = false; - this.notifySvc.error("删除失败！", message.msg); - } - }, - error => { - this.tableLoading = false; - deleteMonitors$.unsubscribe(); - this.notifySvc.error("删除失败！", error.msg) + this.notifySvc.error('删除失败！', message.msg); } + }, + error => { + this.tableLoading = false; + deleteMonitors$.unsubscribe(); + this.notifySvc.error('删除失败！', error.msg); + } ); } onCancelManageMonitors() { if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) { - this.notifySvc.warning("未选中任何待取消项！",""); + this.notifySvc.warning('未选中任何待取消项！', ''); return; } this.modal.confirm({ @@ -158,7 +158,7 @@ export class MonitorListComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.cancelManageMonitors(this.checkedMonitorIds) }); } @@ -171,35 +171,35 @@ export class MonitorListComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.cancelManageMonitors(monitors) }); } cancelManageMonitors(monitors: Set) { this.tableLoading = true; - const cancelManage$ = this.monitorSvc.cancelManageMonitors(monitors) - .subscribe(message => { - cancelManage$.unsubscribe(); - if (message.code === 0) { - this.notifySvc.success("取消纳管成功！", ""); - this.loadMonitorTable(); - } else { - this.tableLoading = false; - this.notifySvc.error("取消纳管失败！", message.msg); - } - }, - error => { + const cancelManage$ = this.monitorSvc.cancelManageMonitors(monitors).subscribe( + message => { + cancelManage$.unsubscribe(); + if (message.code === 0) { + this.notifySvc.success('取消纳管成功！', ''); + this.loadMonitorTable(); + } else { this.tableLoading = false; - cancelManage$.unsubscribe(); - this.notifySvc.error("取消纳管失败！", error.msg) + this.notifySvc.error('取消纳管失败！', message.msg); } - ); + }, + error => { + this.tableLoading = false; + cancelManage$.unsubscribe(); + this.notifySvc.error('取消纳管失败！', error.msg); + } + ); } onEnableManageMonitors() { if (this.checkedMonitorIds == null || this.checkedMonitorIds.size === 0) { - this.notifySvc.warning("未选中任何待启用纳管项！",""); + this.notifySvc.warning('未选中任何待启用纳管项！', ''); return; } this.modal.confirm({ @@ -207,7 +207,7 @@ export class MonitorListComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.enableManageMonitors(this.checkedMonitorIds) }); } @@ -220,30 +220,30 @@ export class MonitorListComponent implements OnInit { nzOkText: '确定', nzCancelText: '取消', nzOkDanger: true, - nzOkType: "primary", + nzOkType: 'primary', nzOnOk: () => this.enableManageMonitors(monitors) }); } enableManageMonitors(monitors: Set) { this.tableLoading = true; - const enableManage$ = this.monitorSvc.enableManageMonitors(monitors) - .subscribe(message => { - enableManage$.unsubscribe(); - if (message.code === 0) { - this.notifySvc.success("启用纳管成功！", ""); - this.loadMonitorTable(); - } else { - this.tableLoading = false; - this.notifySvc.error("启用纳管失败！", message.msg); - } - }, - error => { + const enableManage$ = this.monitorSvc.enableManageMonitors(monitors).subscribe( + message => { + enableManage$.unsubscribe(); + if (message.code === 0) { + this.notifySvc.success('启用纳管成功！', ''); + this.loadMonitorTable(); + } else { this.tableLoading = false; - enableManage$.unsubscribe(); - this.notifySvc.error("启用纳管失败！", error.msg) + this.notifySvc.error('启用纳管失败！', message.msg); } - ); + }, + error => { + this.tableLoading = false; + enableManage$.unsubscribe(); + this.notifySvc.error('启用纳管失败！', error.msg); + } + ); } // begin: 列表多选逻辑 @@ -266,6 +266,7 @@ export class MonitorListComponent implements OnInit { /** * 分页回调 + * * @param params 页码信息 */ onTablePageChange(params: NzTableQueryParams) { @@ -274,5 +275,4 @@ export class MonitorListComponent implements OnInit { this.pageSize = pageSize; this.loadMonitorTable(); } - } diff --git 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 index b71963b..1754783 100644 --- 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 @@ -7,57 +7,67 @@ - + 监控列表 - 新增 {{'monitor.app.' + monitor.app | i18n}} 监控 + 新增 {{ 'monitor.app.' + monitor.app | i18n }} 监控 -
    +
    - - 监控Host - + 监控Host - + - + - + 监控名称 - + - + - {{paramDefine.name}} + {{ paramDefine.name }} - - + + - {{paramDefine.name}} + {{ paramDefine.name }} @@ -68,7 +78,7 @@ [(ngModel)]="params[i].value" [id]="paramDefine.field" [name]="paramDefine.field" - [placeholder]="paramDefine.placeholder? paramDefine.placeholder : ''" + [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''" /> @@ -76,11 +86,8 @@ - - {{paramDefine.name}} + {{ paramDefine.name }} - {{paramDefine.name}} + {{ paramDefine.name }} - {{paramDefine.name}} + {{ paramDefine.name }} - + - - + - - 采集间隔 - + 采集间隔 - + - + - - 是否探测 - + 是否探测 - + - - 描述备注 - + 描述备注 - +
    - - - + + +
    - diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.spec.ts b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.spec.ts index 047d38c..8884b27 100644 --- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.spec.ts +++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.spec.ts @@ -8,9 +8,8 @@ describe('MonitorAddComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MonitorNewComponent ] - }) - .compileComponents(); + declarations: [MonitorNewComponent] + }).compileComponents(); }); beforeEach(() => { diff --git 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 index ae14f86..31bba12 100644 --- 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,24 +1,23 @@ -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"; -import {switchMap} from "rxjs/operators"; -import {FormBuilder, FormControl, FormGroup} from "@angular/forms"; -import {I18NService} from "@core"; -import {Param} from "../../../pojo/Param"; -import {Monitor} from "../../../pojo/Monitor"; -import {MonitorService} from "../../../service/monitor.service"; -import {NzNotificationService} from "ng-zorro-antd/notification"; -import {TitleService} from "@delon/theme"; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; +import { ActivatedRoute, ParamMap, Router } from '@angular/router'; +import { I18NService } from '@core'; +import { TitleService } from '@delon/theme'; +import { NzNotificationService } from 'ng-zorro-antd/notification'; +import { switchMap } from 'rxjs/operators'; + +import { Monitor } from '../../../pojo/Monitor'; +import { Param } from '../../../pojo/Param'; +import { ParamDefine } from '../../../pojo/ParamDefine'; +import { AppDefineService } from '../../../service/app-define.service'; +import { MonitorService } from '../../../service/monitor.service'; @Component({ selector: 'app-monitor-add', templateUrl: './monitor-new.component.html', - styles: [ - ] + styles: [] }) export class MonitorNewComponent implements OnInit { - paramDefines!: ParamDefine[]; params!: Param[]; monitor!: Monitor; @@ -26,121 +25,127 @@ export class MonitorNewComponent implements OnInit { detected: boolean = true; passwordVisible: boolean = false; // 是否显示加载中 - isSpinning:boolean = false - constructor(private appDefineSvc: AppDefineService, - private monitorSvc: MonitorService, - private route: ActivatedRoute, - private router: Router, - private notifySvc: NzNotificationService, - private cdr: ChangeDetectorRef, - private i18n: I18NService, - private titleSvc: TitleService, - private formBuilder: FormBuilder) { + isSpinning: boolean = false; + constructor( + private appDefineSvc: AppDefineService, + private monitorSvc: MonitorService, + private route: ActivatedRoute, + private router: Router, + private notifySvc: NzNotificationService, + private cdr: ChangeDetectorRef, + private i18n: I18NService, + private titleSvc: TitleService, + private formBuilder: FormBuilder + ) { this.monitor = new Monitor(); } ngOnInit(): void { - this.route.queryParamMap.pipe( - switchMap((paramMap: ParamMap) => { - this.monitor.app = paramMap.get("app") || ''; - this.titleSvc.setTitleByI18n('monitor.app.' + this.monitor.app) - this.detected = true; - this.passwordVisible = false; - this.isSpinning = false; - return this.appDefineSvc.getAppParamsDefine(this.monitor.app); - }) - ).subscribe(message => { - if (message.code === 0) { - this.paramDefines = message.data; - this.params = []; - this.paramDefines.forEach(define => { - let param = new Param(); - param.field = define.field; - param.type = define.type === "number" ? 0 : 1; - if (define.type === "boolean") { - param.value = false; - } - if (define.defaultValue != undefined) { - if (define.type === "number") { - param.value = Number(define.defaultValue); - } else if (define.type === "boolean") { - param.value = define.defaultValue.toLowerCase() == 'true' - } else { - param.value = define.defaultValue; - } - } - this.params.push(param); + this.route.queryParamMap + .pipe( + switchMap((paramMap: ParamMap) => { + this.monitor.app = paramMap.get('app') || ''; + this.titleSvc.setTitleByI18n(`monitor.app.${this.monitor.app}`); + this.detected = true; + this.passwordVisible = false; + this.isSpinning = false; + return this.appDefineSvc.getAppParamsDefine(this.monitor.app); }) - } else { - console.warn(message.msg); - } - }); + ) + .subscribe(message => { + if (message.code === 0) { + this.paramDefines = message.data; + this.params = []; + this.paramDefines.forEach(define => { + let param = new Param(); + param.field = define.field; + param.type = define.type === 'number' ? 0 : 1; + if (define.type === 'boolean') { + param.value = false; + } + if (define.defaultValue != undefined) { + if (define.type === 'number') { + param.value = Number(define.defaultValue); + } else if (define.type === 'boolean') { + param.value = define.defaultValue.toLowerCase() == 'true'; + } else { + param.value = define.defaultValue; + } + } + this.params.push(param); + }); + } else { + console.warn(message.msg); + } + }); } onHostChange(hostValue: string) { - this.monitor.name = this.monitor.app.toUpperCase() + '_' + hostValue; + this.monitor.name = `${this.monitor.app.toUpperCase()}_${hostValue}`; } onSubmit() { // todo 暂时单独设置host属性值 this.params.forEach(param => { - if (param.field === "host") { + if (param.field === 'host') { param.value = this.monitor.host; } }); let addMonitor = { - "detected": this.detected, - "monitor": this.monitor, - "params": this.params + detected: this.detected, + monitor: this.monitor, + params: this.params }; this.isSpinning = true; - this.monitorSvc.newMonitor(addMonitor) - .subscribe(message => { + this.monitorSvc.newMonitor(addMonitor).subscribe( + message => { this.isSpinning = false; if (message.code === 0) { - this.notifySvc.success("新增监控成功", ""); - this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`) + this.notifySvc.success('新增监控成功', ''); + this.router.navigateByUrl(`/monitors?app=${this.monitor.app}`); } else { - this.notifySvc.error("新增监控失败", message.msg); - }}, - error => { - this.isSpinning = false; - this.notifySvc.error("新增监控失败", error.error.msg); + this.notifySvc.error('新增监控失败', message.msg); } - ) + }, + error => { + this.isSpinning = false; + this.notifySvc.error('新增监控失败', error.error.msg); + } + ); } onDetect() { // todo 暂时单独设置host属性值 this.params.forEach(param => { - if (param.field === "host") { + if (param.field === 'host') { param.value = this.monitor.host; } }); let detectMonitor = { - "detected": this.detected, - "monitor": this.monitor, - "params": this.params + detected: this.detected, + monitor: this.monitor, + params: this.params }; this.isSpinning = true; - this.monitorSvc.detectMonitor(detectMonitor) - .subscribe(message => { + this.monitorSvc.detectMonitor(detectMonitor).subscribe( + message => { this.isSpinning = false; if (message.code === 0) { - this.notifySvc.success("探测成功", ""); + this.notifySvc.success('探测成功', ''); } else { - this.notifySvc.error("探测失败", message.msg); + this.notifySvc.error('探测失败', message.msg); } - }, error => { + }, + error => { this.isSpinning = false; - this.notifySvc.error("探测异常", error.error.msg); - } - ) + this.notifySvc.error('探测异常', error.error.msg); + } + ); } onCancel() { let app = this.monitor.app; app = app ? app : ''; - this.router.navigateByUrl(`/monitors?app=${app}`) + this.router.navigateByUrl(`/monitors?app=${app}`); } } diff --git a/web-app/src/app/routes/monitor/monitor-routing.module.ts b/web-app/src/app/routes/monitor/monitor-routing.module.ts index 9479a30..da1a79a 100644 --- a/web-app/src/app/routes/monitor/monitor-routing.module.ts +++ b/web-app/src/app/routes/monitor/monitor-routing.module.ts @@ -1,9 +1,10 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import {MonitorListComponent} from "./monitor-list/monitor-list.component"; -import {MonitorNewComponent} from "./monitor-new/monitor-new.component"; -import {MonitorEditComponent} from "./monitor-edit/monitor-edit.component"; -import {MonitorDetailComponent} from "./monitor-detail/monitor-detail.component"; + +import { MonitorDetailComponent } from './monitor-detail/monitor-detail.component'; +import { MonitorEditComponent } from './monitor-edit/monitor-edit.component'; +import { MonitorListComponent } from './monitor-list/monitor-list.component'; +import { MonitorNewComponent } from './monitor-new/monitor-new.component'; const routes: Routes = [ { path: '', component: MonitorListComponent }, @@ -17,4 +18,4 @@ const routes: Routes = [ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) -export class MonitorRoutingModule { } +export class MonitorRoutingModule {} diff --git a/web-app/src/app/routes/monitor/monitor.module.ts b/web-app/src/app/routes/monitor/monitor.module.ts index 071799c..8942e75 100644 --- a/web-app/src/app/routes/monitor/monitor.module.ts +++ b/web-app/src/app/routes/monitor/monitor.module.ts @@ -1,21 +1,22 @@ import { NgModule, Type } from '@angular/core'; import { SharedModule } from '@shared'; -import { MonitorRoutingModule } from './monitor-routing.module'; -import {MonitorNewComponent} from "./monitor-new/monitor-new.component"; -import {MonitorEditComponent} from "./monitor-edit/monitor-edit.component"; -import {MonitorListComponent} from "./monitor-list/monitor-list.component"; -import {MonitorDetailComponent} from "./monitor-detail/monitor-detail.component"; -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"; -import {NgxEchartsModule} from "ngx-echarts"; -import {NzLayoutModule} from "ng-zorro-antd/layout"; -import {NzSpaceModule} from "ng-zorro-antd/space"; -import {MonitorDataChartComponent} from "./monitor-data-chart/monitor-data-chart.component"; +import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb'; +import { NzDividerModule } from 'ng-zorro-antd/divider'; +import { NzLayoutModule } from 'ng-zorro-antd/layout'; +import { NzRadioModule } from 'ng-zorro-antd/radio'; +import { NzSpaceModule } from 'ng-zorro-antd/space'; +import { NzSwitchModule } from 'ng-zorro-antd/switch'; +import { NzTagModule } from 'ng-zorro-antd/tag'; +import { NgxEchartsModule } from 'ngx-echarts'; -const COMPONENTS: Type[] = [ +import { MonitorDataChartComponent } from './monitor-data-chart/monitor-data-chart.component'; +import { MonitorDetailComponent } from './monitor-detail/monitor-detail.component'; +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'; + +const COMPONENTS: Array> = [ MonitorNewComponent, MonitorEditComponent, MonitorListComponent, @@ -36,6 +37,6 @@ const COMPONENTS: Type[] = [ NzLayoutModule, NzSpaceModule ], - declarations: COMPONENTS, + declarations: COMPONENTS }) -export class MonitorModule { } +export class MonitorModule {} diff --git a/web-app/src/app/routes/passport/callback.component.ts b/web-app/src/app/routes/passport/callback.component.ts deleted file mode 100644 index 8e205c6..0000000 --- a/web-app/src/app/routes/passport/callback.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { SocialService } from '@delon/auth'; -import { SettingsService } from '@delon/theme'; - -@Component({ - selector: 'app-callback', - template: ``, - providers: [SocialService] -}) -export class CallbackComponent implements OnInit { - type = ''; - - constructor(private socialService: SocialService, private settingsSrv: SettingsService, private route: ActivatedRoute) {} - - ngOnInit(): void { - this.type = this.route.snapshot.params.type; - this.mockModel(); - } - - private mockModel(): void { - const info = { - token: '123456789', - name: 'cipchk', - email: `${this.type}@${this.type}.com`, - id: 10000, - time: +new Date() - }; - this.settingsSrv.setUser({ - ...this.settingsSrv.user, - ...info - }); - this.socialService.callback(info); - } -} diff --git a/web-app/src/app/routes/passport/lock/lock.component.html b/web-app/src/app/routes/passport/lock/lock.component.html index 43fd3c7..b615930 100644 --- a/web-app/src/app/routes/passport/lock/lock.component.html +++ b/web-app/src/app/routes/passport/lock/lock.component.html @@ -7,7 +7,7 @@ - + diff --git a/web-app/src/app/routes/passport/lock/lock.component.ts b/web-app/src/app/routes/passport/lock/lock.component.ts index d3d702f..c72a0b4 100644 --- a/web-app/src/app/routes/passport/lock/lock.component.ts +++ b/web-app/src/app/routes/passport/lock/lock.component.ts @@ -15,11 +15,7 @@ export class UserLockComponent { return this.settings.user; } - constructor( - fb: FormBuilder, - private settings: SettingsService, - private router: Router - ) { + constructor(fb: FormBuilder, private settings: SettingsService, private router: Router) { this.f = fb.group({ password: [null, Validators.required] }); diff --git a/web-app/src/app/routes/passport/login/login.component.html b/web-app/src/app/routes/passport/login/login.component.html index 478521f..e0443d9 100644 --- a/web-app/src/app/routes/passport/login/login.component.html +++ b/web-app/src/app/routes/passport/login/login.component.html @@ -3,7 +3,7 @@ - + @@ -17,47 +17,11 @@ - - - - - - - - - {{ 'validation.phone-number.required' | i18n }} - - - {{ 'validation.phone-number.wrong-format' | i18n }} - - - - - - - - - - - - - - - - - - - - - {{ 'app.login.forgot-password' | i18n }} - -
    - {{ 'app.login.sign-in-with' | i18n }} - - - - {{ 'app.login.signup' | i18n }} -
    diff --git a/web-app/src/app/routes/passport/login/login.component.ts b/web-app/src/app/routes/passport/login/login.component.ts index 1f29017..5787ae3 100644 --- a/web-app/src/app/routes/passport/login/login.component.ts +++ b/web-app/src/app/routes/passport/login/login.component.ts @@ -5,12 +5,12 @@ import { StartupService } from '@core'; import { ReuseTabService } from '@delon/abc/reuse-tab'; import { DA_SERVICE_TOKEN, ITokenService, SocialOpenType, SocialService } from '@delon/auth'; import { SettingsService, _HttpClient } from '@delon/theme'; -import { environment } from '@env/environment'; +import { User } from '@delon/theme/src/services/settings/types'; import { NzTabChangeEvent } from 'ng-zorro-antd/tabs'; import { finalize } from 'rxjs/operators'; -import {Message} from "../../../pojo/Message"; -import {LocalStorageService} from "../../../service/local-storage.service"; -import {User} from "@delon/theme/src/services/settings/types"; + +import { Message } from '../../../pojo/Message'; +import { LocalStorageService } from '../../../service/local-storage.service'; @Component({ selector: 'passport-login', @@ -73,21 +73,6 @@ export class UserLoginComponent implements OnDestroy { this.type = index!; } - getCaptcha(): void { - if (this.mobile.invalid) { - this.mobile.markAsDirty({ onlySelf: true }); - this.mobile.updateValueAndValidity({ onlySelf: true }); - return; - } - this.count = 59; - this.interval$ = setInterval(() => { - this.count -= 1; - if (this.count <= 0) { - clearInterval(this.interval$); - } - }, 1000); - } - // #endregion submit(): void { @@ -137,11 +122,11 @@ export class UserLoginComponent implements OnDestroy { // 设置用户Token信息 this.storageSvc.storageAuthorizationToken(message.data.token); this.storageSvc.storageRefreshToken(message.data.refreshToken); - let user:User = { + let user: User = { name: this.userName.value, - avatar: "./assets/tmp/img/avatar.svg", - email: "" - } + avatar: './assets/img/avatar.svg', + email: '管理员' + }; this.settingsService.setUser(user); // 重新获取 StartupService 内容，我们始终认为应用信息一般都会受当前用户授权范围而影响 this.startupSrv.load().subscribe(() => { @@ -153,48 +138,6 @@ export class UserLoginComponent implements OnDestroy { }); }); } - - // #region social - - open(type: string, openType: SocialOpenType = 'href'): void { - let url = ``; - let callback = ``; - if (environment.production) { - callback = `https://ng-alain.github.io/ng-alain/#/passport/callback/${type}`; - } else { - callback = `http://localhost:4200/#/passport/callback/${type}`; - } - switch (type) { - case 'auth0': - url = `//cipchk.auth0.com/login?client=8gcNydIDzGBYxzqV0Vm1CX_RXH-wsWo5&redirect_uri=${decodeURIComponent(callback)}`; - break; - case 'github': - url = `//github.com/login/oauth/authorize?client_id=9d6baae4b04a23fcafa2&response_type=code&redirect_uri=${decodeURIComponent( - callback - )}`; - break; - case 'weibo': - url = `https://api.weibo.com/oauth2/authorize?client_id=1239507802&response_type=code&redirect_uri=${decodeURIComponent(callback)}`; - break; - } - if (openType === 'window') { - this.socialService - .login(url, '/', { - type: 'window' - }) - .subscribe(res => { - if (res) { - this.settingsService.setUser(res); - this.router.navigateByUrl('/'); - } - }); - } else { - this.socialService.login(url, '/', { - type: 'href' - }); - } - } - // #endregion ngOnDestroy(): void { diff --git a/web-app/src/app/routes/passport/register-result/register-result.component.html b/web-app/src/app/routes/passport/register-result/register-result.component.html deleted file mode 100644 index 8666655..0000000 --- a/web-app/src/app/routes/passport/register-result/register-result.component.html +++ /dev/null @@ -1,13 +0,0 @@ - - -
    - {{ 'app.register-result.msg' | i18n: params }} -
    -     - - -     diff --git a/web-app/src/app/routes/passport/register-result/register-result.component.ts b/web-app/src/app/routes/passport/register-result/register-result.component.ts deleted file mode 100644 index a5a7cbc..0000000 --- a/web-app/src/app/routes/passport/register-result/register-result.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { NzMessageService } from 'ng-zorro-antd/message'; - -@Component({ - selector: 'passport-register-result', - templateUrl: './register-result.component.html' -}) -export class UserRegisterResultComponent { - params = { email: '' }; - email = ''; - constructor(route: ActivatedRoute, public msg: NzMessageService) { - this.params.email = this.email = route.snapshot.queryParams.email || 'ng-alain@example.com'; - } -} diff --git a/web-app/src/app/routes/passport/register/register.component.html b/web-app/src/app/routes/passport/register/register.component.html deleted file mode 100644 index 500d5f1..0000000 --- a/web-app/src/app/routes/passport/register/register.component.html +++ /dev/null @@ -1,100 +0,0 @@ -

    {{ 'app.register.register' | i18n }}

    -
    - - - - - - - - {{ 'validation.email.required' | i18n }} - {{ 'validation.email.wrong-format' | i18n }} - - - - - - - - - -
    - -
    {{ 'validation.password.strength.strong' | i18n }}
    -
    {{ 'validation.password.strength.medium' | i18n }}
    -
    {{ 'validation.password.strength.short' | i18n }}
    -     -
    - -
    -

    {{ 'validation.password.strength.msg' | i18n }}

    -
    -     -     -     - - - - - - - {{ 'validation.confirm-password.required' | i18n }} - {{ 'validation.password.twice' | i18n }} - - - - - - - - - - - - - - - - {{ 'validation.phone-number.required' | i18n }} - {{ 'validation.phone-number.wrong-format' | i18n }} - - - - - - - - - - - - - - - - - - - - - -
    diff --git a/web-app/src/app/routes/passport/register/register.component.less b/web-app/src/app/routes/passport/register/register.component.less deleted file mode 100644 index 6836413..0000000 --- a/web-app/src/app/routes/passport/register/register.component.less +++ /dev/null @@ -1,42 +0,0 @@ -@import '~@delon/theme/index'; -:host { - display: block; - width: 368px; - margin: 0 auto; - ::ng-deep { - h3 { - margin-bottom: 20px; - font-size: 16px; - } - .submit { - width: 50%; - } - .login { - float: right; - line-height: @btn-height-lg; - } - } -} -::ng-deep { - .register-password-cdk { - .success, - .warning, - .error { - transition: color 0.3s; - } - .success { - color: @success-color; - } - .warning { - color: @warning-color; - } - .error { - color: @error-color; - } - .progress-pass > .progress { - .ant-progress-bg { - background-color: @warning-color; - } - } - } -} diff --git a/web-app/src/app/routes/passport/register/register.component.ts b/web-app/src/app/routes/passport/register/register.component.ts deleted file mode 100644 index 701f05d..0000000 --- a/web-app/src/app/routes/passport/register/register.component.ts +++ /dev/null @@ -1,139 +0,0 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from '@angular/core'; -import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; -import { Router } from '@angular/router'; -import { _HttpClient } from '@delon/theme'; -import { MatchControl } from '@delon/util/form'; -import { NzSafeAny } from 'ng-zorro-antd/core/types'; -import { finalize } from 'rxjs/operators'; - -@Component({ - selector: 'passport-register', - templateUrl: './register.component.html', - styleUrls: ['./register.component.less'], - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class UserRegisterComponent implements OnDestroy { - constructor(fb: FormBuilder, private router: Router, private http: _HttpClient, private cdr: ChangeDetectorRef) { - this.form = fb.group( - { - mail: [null, [Validators.required, Validators.email]], - password: [null, [Validators.required, Validators.minLength(6), UserRegisterComponent.checkPassword.bind(this)]], - confirm: [null, [Validators.required, Validators.minLength(6)]], - mobilePrefix: ['+86'], - mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]], - captcha: [null, [Validators.required]] - }, - { - validators: MatchControl('password', 'confirm') - } - ); - } - - // #region fields - - get mail(): AbstractControl { - return this.form.controls.mail; - } - get password(): AbstractControl { - return this.form.controls.password; - } - get confirm(): AbstractControl { - return this.form.controls.confirm; - } - get mobile(): AbstractControl { - return this.form.controls.mobile; - } - get captcha(): AbstractControl { - return this.form.controls.captcha; - } - form: FormGroup; - error = ''; - type = 0; - loading = false; - visible = false; - status = 'pool'; - progress = 0; - passwordProgressMap: { [key: string]: 'success' | 'normal' | 'exception' } = { - ok: 'success', - pass: 'normal', - pool: 'exception' - }; - - // #endregion - - // #region get captcha - - count = 0; - interval$: any; - - static checkPassword(control: FormControl): NzSafeAny { - if (!control) { - return null; - } - // eslint-disable-next-line @typescript-eslint/no-this-alias - const self: any = this; - self.visible = !!control.value; - if (control.value && control.value.length > 9) { - self.status = 'ok'; - } else if (control.value && control.value.length > 5) { - self.status = 'pass'; - } else { - self.status = 'pool'; - } - - if (self.visible) { - self.progress = control.value.length * 10 > 100 ? 100 : control.value.length * 10; - } - } - - getCaptcha(): void { - if (this.mobile.invalid) { - this.mobile.markAsDirty({ onlySelf: true }); - this.mobile.updateValueAndValidity({ onlySelf: true }); - return; - } - this.count = 59; - this.cdr.detectChanges(); - this.interval$ = setInterval(() => { - this.count -= 1; - this.cdr.detectChanges(); - if (this.count <= 0) { - clearInterval(this.interval$); - } - }, 1000); - } - - // #endregion - - submit(): void { - this.error = ''; - Object.keys(this.form.controls).forEach(key => { - this.form.controls[key].markAsDirty(); - this.form.controls[key].updateValueAndValidity(); - }); - if (this.form.invalid) { - return; - } - - const data = this.form.value; - this.loading = true; - this.cdr.detectChanges(); - this.http - .post('/register?_allow_anonymous=true', data) - .pipe( - finalize(() => { - this.loading = false; - this.cdr.detectChanges(); - }) - ) - .subscribe(() => { - this.router.navigate(['passport', 'register-result'], { queryParams: { email: data.mail } }); - }); - } - - ngOnDestroy(): void { - if (this.interval$) { - clearInterval(this.interval$); - } - } -} diff --git a/web-app/src/app/routes/routes-routing.module.ts b/web-app/src/app/routes/routes-routing.module.ts index 053eba2..af4a7a4 100644 --- a/web-app/src/app/routes/routes-routing.module.ts +++ b/web-app/src/app/routes/routes-routing.module.ts @@ -1,19 +1,17 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { environment } from '@env/environment'; + // layout +import { DetectAuthGuard } from '../core/guard/detect-auth-guard'; import { LayoutBasicComponent } from '../layout/basic/basic.component'; import { LayoutPassportComponent } from '../layout/passport/passport.component'; // dashboard pages import { DashboardComponent } from './dashboard/dashboard.component'; // single pages -import { CallbackComponent } from './passport/callback.component'; import { UserLockComponent } from './passport/lock/lock.component'; // passport pages import { UserLoginComponent } from './passport/login/login.component'; -import { UserRegisterResultComponent } from './passport/register-result/register-result.component'; -import { UserRegisterComponent } from './passport/register/register.component'; -import {DetectAuthGuard} from "../core/guard/detect-auth-guard"; const routes: Routes = [ { @@ -23,11 +21,12 @@ const routes: Routes = [ canActivate: [DetectAuthGuard], children: [ // todo 根据路由自动生成面包屑 - { path: '', redirectTo: 'dashboard', pathMatch: 'full'}, + { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, { path: 'dashboard', component: DashboardComponent, data: { title: '仪表盘' } }, { path: 'exception', loadChildren: () => import('./exception/exception.module').then(m => m.ExceptionModule) }, - { path: 'monitors', loadChildren: () => import('./monitor/monitor.module').then((m) => m.MonitorModule) }, - { path: 'alert', loadChildren: () => import('./alert/alert.module').then((m) => m.AlertModule) },] + { path: 'monitors', loadChildren: () => import('./monitor/monitor.module').then(m => m.MonitorModule) }, + { path: 'alert', loadChildren: () => import('./alert/alert.module').then(m => m.AlertModule) } + ] }, // 空白布局 // { @@ -42,26 +41,21 @@ const routes: Routes = [ component: LayoutPassportComponent, children: [ { path: 'login', component: UserLoginComponent, data: { title: '登录' } }, - { path: 'register', component: UserRegisterComponent, data: { title: '注册' } }, - { path: 'register-result', component: UserRegisterResultComponent, data: { title: '注册结果' } }, - { path: 'lock', component: UserLockComponent, data: { title: '锁屏' } }, + { path: 'lock', component: UserLockComponent, data: { title: '锁屏' } } ] }, - // 单页不包裹Layout - { path: 'passport/callback/:type', component: CallbackComponent }, - { path: '**', redirectTo: 'exception/404' }, + { path: '**', redirectTo: 'exception/404' } ]; @NgModule({ imports: [ - RouterModule.forRoot( - routes, { - useHash: environment.useHash, - // NOTICE: If you use `reuse-tab` component and turn on keepingScroll you can set to `disabled` - // Pls refer to https://ng-alain.com/components/reuse-tab - scrollPositionRestoration: 'top', - } - )], - exports: [RouterModule], + RouterModule.forRoot(routes, { + useHash: environment.useHash, + // NOTICE: If you use `reuse-tab` component and turn on keepingScroll you can set to `disabled` + // Pls refer to https://ng-alain.com/components/reuse-tab + scrollPositionRestoration: 'top' + }) + ], + exports: [RouterModule] }) -export class RouteRoutingModule { } +export class RouteRoutingModule {} diff --git a/web-app/src/app/routes/routes.module.ts b/web-app/src/app/routes/routes.module.ts index e1427b9..d348c66 100644 --- a/web-app/src/app/routes/routes.module.ts +++ b/web-app/src/app/routes/routes.module.ts @@ -1,30 +1,26 @@ import { NgModule, Type } from '@angular/core'; import { SharedModule } from '@shared'; + // dashboard pages +import { NgxEchartsModule } from 'ngx-echarts'; + import { DashboardComponent } from './dashboard/dashboard.component'; -import { RouteRoutingModule } from './routes-routing.module'; -import {NgxEchartsModule} from "ngx-echarts"; // single pages -import { CallbackComponent } from './passport/callback.component'; import { UserLockComponent } from './passport/lock/lock.component'; // passport pages import { UserLoginComponent } from './passport/login/login.component'; -import { UserRegisterResultComponent } from './passport/register-result/register-result.component'; -import { UserRegisterComponent } from './passport/register/register.component'; +import { RouteRoutingModule } from './routes-routing.module'; const COMPONENTS: Array> = [ DashboardComponent, // passport pages UserLoginComponent, - UserRegisterComponent, - UserRegisterResultComponent, // single pages - CallbackComponent, - UserLockComponent, + UserLockComponent ]; @NgModule({ - imports: [SharedModule, RouteRoutingModule, NgxEchartsModule], - declarations: COMPONENTS, + imports: [SharedModule, RouteRoutingModule, NgxEchartsModule], + declarations: COMPONENTS }) export class RoutesModule {} diff --git a/web-app/src/app/service/alert-define.service.ts b/web-app/src/app/service/alert-define.service.ts index 2d2cd5d..caa765e 100644 --- a/web-app/src/app/service/alert-define.service.ts +++ b/web-app/src/app/service/alert-define.service.ts @@ -1,66 +1,64 @@ +import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import {HttpClient, HttpParams} from "@angular/common/http"; -import {Observable} from "rxjs"; -import {Message} from "../pojo/Message"; -import {Page} from "../pojo/Page"; -import {AlertDefine} from "../pojo/AlertDefine"; -import {AlertDefineBind} from "../pojo/AlertDefineBind"; +import { Observable } from 'rxjs'; -const alert_define_uri = "/alert/define"; -const alert_defines_uri = "/alert/defines"; +import { AlertDefine } from '../pojo/AlertDefine'; +import { AlertDefineBind } from '../pojo/AlertDefineBind'; +import { Message } from '../pojo/Message'; +import { Page } from '../pojo/Page'; + +const alert_define_uri = '/alert/define'; +const alert_defines_uri = '/alert/defines'; @Injectable({ providedIn: 'root' }) export class AlertDefineService { + constructor(private http: HttpClient) {} - constructor(private http : HttpClient) { } - - public newAlertDefine(body: AlertDefine) : Observable> { + public newAlertDefine(body: AlertDefine): Observable> { return this.http.post>(alert_define_uri, body); } - public editAlertDefine(body: AlertDefine) : Observable> { + public editAlertDefine(body: AlertDefine): Observable> { return this.http.put>(alert_define_uri, body); } - public getAlertDefine(alertDefineId: number) : Observable> { + public getAlertDefine(alertDefineId: number): Observable> { return this.http.get>(`${alert_define_uri}/${alertDefineId}`); } - public applyAlertDefineMonitorsBind(alertDefineId: number, - binds: AlertDefineBind[]): Observable> { + public applyAlertDefineMonitorsBind(alertDefineId: number, binds: AlertDefineBind[]): Observable> { return this.http.post>(`${alert_define_uri}/${alertDefineId}/monitors`, binds); } - public getAlertDefineMonitorsBind(alertDefineId: number) : Observable> { + public getAlertDefineMonitorsBind(alertDefineId: number): Observable> { return this.http.get>(`${alert_define_uri}/${alertDefineId}/monitors`); } - public deleteAlertDefines(alertDefineIds: Set) : Observable> { + public deleteAlertDefines(alertDefineIds: Set): Observable> { let httpParams = new HttpParams(); alertDefineIds.forEach(alertDefineId => { // 注意HttpParams是不可变对象 需要保存append后返回的对象为最新对象 // append方法可以叠加同一key, set方法会把key之前的值覆盖只留一个key-value httpParams = httpParams.append('ids', alertDefineId); - }) + }); const options = { params: httpParams }; return this.http.delete>(alert_defines_uri, options); } - public getAlertDefines(pageIndex: number, pageSize: number) : Observable>> { + public getAlertDefines(pageIndex: number, pageSize: number): Observable>> { pageIndex = pageIndex ? pageIndex : 0; pageSize = pageSize ? pageSize : 8; // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象 let httpParams = new HttpParams(); httpParams = httpParams.appendAll({ - 'sort': 'id', - 'order': 'desc', - 'pageIndex': pageIndex, - 'pageSize': pageSize + sort: 'id', + order: 'desc', + pageIndex: pageIndex, + pageSize: pageSize }); const options = { params: httpParams }; return this.http.get>>(alert_defines_uri, options); } - } diff --git a/web-app/src/app/service/alert.service.ts b/web-app/src/app/service/alert.service.ts index f507b5b..38671b7 100644 --- a/web-app/src/app/service/alert.service.ts +++ b/web-app/src/app/service/alert.service.ts @@ -1,9 +1,10 @@ +import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import {HttpClient, HttpParams} from "@angular/common/http"; -import {Observable} from "rxjs"; -import {Message} from "../pojo/Message"; -import {Page} from "../pojo/Page"; -import {Alert} from "../pojo/Alert"; +import { Observable } from 'rxjs'; + +import { Alert } from '../pojo/Alert'; +import { Message } from '../pojo/Message'; +import { Page } from '../pojo/Page'; const alerts_uri = '/alerts'; @@ -13,35 +14,39 @@ const alerts_status_uri = '/alerts/status'; providedIn: 'root' }) export class AlertService { + constructor(private http: HttpClient) {} - constructor(private http : HttpClient) { } - - public getAlerts(pageIndex: number, pageSize: number) : Observable>> { + public getAlerts(pageIndex: number, pageSize: number): Observable>> { pageIndex = pageIndex ? pageIndex : 0; pageSize = pageSize ? pageSize : 8; // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象 let httpParams = new HttpParams(); httpParams = httpParams.appendAll({ - 'sort': 'id', - 'order': 'desc', - 'pageIndex': pageIndex, - 'pageSize': pageSize + sort: 'id', + order: 'desc', + pageIndex: pageIndex, + pageSize: pageSize }); const options = { params: httpParams }; return this.http.get>>(alerts_uri, options); } - public searchAlerts(status: number | undefined, priority: number | undefined, content: string | undefined, - pageIndex: number, pageSize: number) : Observable>> { + public searchAlerts( + status: number | undefined, + priority: number | undefined, + content: string | undefined, + pageIndex: number, + pageSize: number + ): Observable>> { pageIndex = pageIndex ? pageIndex : 0; pageSize = pageSize ? pageSize : 8; // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象 let httpParams = new HttpParams(); httpParams = httpParams.appendAll({ - 'sort': 'id', - 'order': 'desc', - 'pageIndex': pageIndex, - 'pageSize': pageSize + sort: 'id', + order: 'desc', + pageIndex: pageIndex, + pageSize: pageSize }); if (status != undefined && status != 9) { httpParams = httpParams.append('status', status); @@ -56,26 +61,25 @@ export class AlertService { return this.http.get>>(alerts_uri, options); } - public deleteAlerts(alertIds: Set) : Observable> { + public deleteAlerts(alertIds: Set): Observable> { let httpParams = new HttpParams(); alertIds.forEach(alertId => { // 注意HttpParams是不可变对象 需要保存append后返回的对象为最新对象 // append方法可以叠加同一key, set方法会把key之前的值覆盖只留一个key-value httpParams = httpParams.append('ids', alertId); - }) + }); const options = { params: httpParams }; return this.http.delete>(alerts_uri, options); } - public applyAlertsStatus(alertIds: Set, status: number) : Observable> { + public applyAlertsStatus(alertIds: Set, status: number): Observable> { let httpParams = new HttpParams(); alertIds.forEach(alertId => { // 注意HttpParams是不可变对象 需要保存append后返回的对象为最新对象 // append方法可以叠加同一key, set方法会把key之前的值覆盖只留一个key-value httpParams = httpParams.append('ids', alertId); - }) + }); const options = { params: httpParams }; return this.http.put>(`${alerts_status_uri}/${status}`, null, options); } - } diff --git a/web-app/src/app/service/app-define.service.ts b/web-app/src/app/service/app-define.service.ts index b031fce..667157f 100644 --- a/web-app/src/app/service/app-define.service.ts +++ b/web-app/src/app/service/app-define.service.ts @@ -1,8 +1,9 @@ +import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import {HttpClient, HttpParams} from '@angular/common/http'; -import {Message} from "../pojo/Message"; -import {Observable} from "rxjs"; -import {ParamDefine} from "../pojo/ParamDefine"; +import { Observable } from 'rxjs'; + +import { Message } from '../pojo/Message'; +import { ParamDefine } from '../pojo/ParamDefine'; const app_hierarchy = '/apps/hierarchy'; @@ -10,21 +11,19 @@ const app_hierarchy = '/apps/hierarchy'; providedIn: 'root' }) export class AppDefineService { + constructor(private http: HttpClient) {} - constructor(private http : HttpClient) { } - - public getAppParamsDefine(app: string | undefined | null) : Observable> { + public getAppParamsDefine(app: string | undefined | null): Observable> { if (app === null || app === undefined) { - console.log("getAppParamsDefine app can not null"); + console.log('getAppParamsDefine app can not null'); } const paramDefineUri = `/apps/${app}/params`; return this.http.get>(paramDefineUri); } - public getAppHierarchy() : Observable> { - let httpParams = new HttpParams().append("lang",'zh-CN'); + public getAppHierarchy(): Observable> { + let httpParams = new HttpParams().append('lang', 'zh-CN'); const options = { params: httpParams }; - return this.http.get>(app_hierarchy,options); + return this.http.get>(app_hierarchy, options); } - } diff --git a/web-app/src/app/service/local-storage.service.ts b/web-app/src/app/service/local-storage.service.ts index 7e7bd65..fadaed0 100644 --- a/web-app/src/app/service/local-storage.service.ts +++ b/web-app/src/app/service/local-storage.service.ts @@ -7,8 +7,7 @@ const refreshToken = 'refresh-token'; providedIn: 'root' }) export class LocalStorageService { - - constructor() { } + constructor() {} public putData(key: string, value: string) { localStorage.setItem(key, value); @@ -36,11 +35,10 @@ export class LocalStorageService { } public hasAuthorizationToken() { - return localStorage.getItem(Authorization) === null; + return localStorage.getItem(Authorization) != null; } public clear() { localStorage.clear(); } - } diff --git a/web-app/src/app/service/monitor.service.ts b/web-app/src/app/service/monitor.service.ts index 2759926..4dfe20f 100644 --- a/web-app/src/app/service/monitor.service.ts +++ b/web-app/src/app/service/monitor.service.ts @@ -1,115 +1,113 @@ +import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import {HttpClient, HttpParams} from "@angular/common/http"; -import {Observable} from "rxjs"; -import {Message} from "../pojo/Message"; -import {Page} from "../pojo/Page"; -import {Monitor} from "../pojo/Monitor"; +import { Observable } from 'rxjs'; -const monitor_uri = "/monitor"; -const monitors_uri = "/monitors"; -const detect_monitor_uri = "/monitor/detect" -const manage_monitors_uri = "/monitors/manage"; -const summary_uri = "/summary"; +import { Message } from '../pojo/Message'; +import { Monitor } from '../pojo/Monitor'; +import { Page } from '../pojo/Page'; + +const monitor_uri = '/monitor'; +const monitors_uri = '/monitors'; +const detect_monitor_uri = '/monitor/detect'; +const manage_monitors_uri = '/monitors/manage'; +const summary_uri = '/summary'; @Injectable({ providedIn: 'root' }) export class MonitorService { + constructor(private http: HttpClient) {} - constructor(private http : HttpClient) { } - - public newMonitor(body: any) : Observable> { + public newMonitor(body: any): Observable> { return this.http.post>(monitor_uri, body); } - public editMonitor(body: any) : Observable> { + public editMonitor(body: any): Observable> { return this.http.put>(monitor_uri, body); } - public deleteMonitor(monitorId: number) : Observable> { + public deleteMonitor(monitorId: number): Observable> { return this.http.delete>(`${monitor_uri}/${monitorId}`); } - public deleteMonitors(monitorIds: Set) : Observable> { + public deleteMonitors(monitorIds: Set): Observable> { let httpParams = new HttpParams(); monitorIds.forEach(monitorId => { // 注意HttpParams是不可变对象 需要保存append后返回的对象为最新对象 // append方法可以叠加同一key, set方法会把key之前的值覆盖只留一个key-value httpParams = httpParams.append('ids', monitorId); - }) + }); const options = { params: httpParams }; return this.http.delete>(monitors_uri, options); } - public cancelManageMonitors(monitorIds: Set) : Observable> { + public cancelManageMonitors(monitorIds: Set): Observable> { let httpParams = new HttpParams(); monitorIds.forEach(monitorId => { // 注意HttpParams是不可变对象 需要保存append后返回的对象为最新对象 // append方法可以叠加同一key, set方法会把key之前的值覆盖只留一个key-value httpParams = httpParams.append('ids', monitorId); - }) + }); const options = { params: httpParams }; return this.http.delete>(manage_monitors_uri, options); } - public enableManageMonitors(monitorIds: Set) : Observable> { + public enableManageMonitors(monitorIds: Set): Observable> { let httpParams = new HttpParams(); monitorIds.forEach(monitorId => { httpParams = httpParams.append('ids', monitorId); - }) + }); const options = { params: httpParams }; return this.http.get>(manage_monitors_uri, options); } - public detectMonitor(body: any) : Observable> { + public detectMonitor(body: any): Observable> { return this.http.post>(detect_monitor_uri, body); } - public getMonitor(monitorId: number) : Observable> { + public getMonitor(monitorId: number): Observable> { return this.http.get>(`${monitor_uri}/${monitorId}`); } - public getMonitorsByApp(app: string) : Observable> { + public getMonitorsByApp(app: string): Observable> { return this.http.get>(`${monitors_uri}/${app}`); } - public getMonitors(app: string, pageIndex: number, pageSize: number) : Observable>> { + public getMonitors(app: string, pageIndex: number, pageSize: number): Observable>> { app = app.trim(); pageIndex = pageIndex ? pageIndex : 0; pageSize = pageSize ? pageSize : 8; // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象 let httpParams = new HttpParams(); httpParams = httpParams.appendAll({ - 'app': app, - 'pageIndex': pageIndex, - 'pageSize': pageSize + app: app, + pageIndex: pageIndex, + pageSize: pageSize }); const options = { params: httpParams }; return this.http.get>>(monitors_uri, options); } - public searchMonitors(monitorName: string, monitorHost: string, - pageIndex: number, pageSize: number): Observable>> { + public searchMonitors(monitorName: string, monitorHost: string, pageIndex: number, pageSize: number): Observable>> { pageIndex = pageIndex ? pageIndex : 0; pageSize = pageSize ? pageSize : 8; // 注意HttpParams是不可变对象 需要保存set后返回的对象为最新对象 let httpParams = new HttpParams(); httpParams = httpParams.appendAll({ - 'name': monitorName, - 'host': monitorHost, - 'pageIndex': pageIndex, - 'pageSize': pageSize + name: monitorName, + host: monitorHost, + pageIndex: pageIndex, + pageSize: pageSize }); const options = { params: httpParams }; return this.http.get>>(monitors_uri, options); } - public getMonitorMetricsData(monitorId: number, metrics: string) : Observable> { + public getMonitorMetricsData(monitorId: number, metrics: string): Observable> { return this.http.get>(`/monitor/${monitorId}/metrics/${metrics}`); } - public getAppsMonitorSummary() : Observable> { + public getAppsMonitorSummary(): Observable> { return this.http.get>(summary_uri); } - } diff --git a/web-app/src/app/service/notice-receiver.service.ts b/web-app/src/app/service/notice-receiver.service.ts index 7438a57..be92899 100644 --- a/web-app/src/app/service/notice-receiver.service.ts +++ b/web-app/src/app/service/notice-receiver.service.ts @@ -1,8 +1,9 @@ +import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import {HttpClient} from "@angular/common/http"; -import {Observable} from "rxjs"; -import {Message} from "../pojo/Message"; -import {NoticeReceiver} from "../pojo/NoticeReceiver"; +import { Observable } from 'rxjs'; + +import { Message } from '../pojo/Message'; +import { NoticeReceiver } from '../pojo/NoticeReceiver'; const notice_receiver_uri = '/notice/receiver'; const notice_receivers_uri = '/notice/receivers'; @@ -11,22 +12,20 @@ const notice_receivers_uri = '/notice/receivers'; providedIn: 'root' }) export class NoticeReceiverService { + constructor(private http: HttpClient) {} - constructor(private http : HttpClient) { } - - public newReceiver(body: NoticeReceiver) : Observable> { + public newReceiver(body: NoticeReceiver): Observable> { return this.http.post>(notice_receiver_uri, body); } - public editReceiver(body: NoticeReceiver) : Observable> { + public editReceiver(body: NoticeReceiver): Observable> { return this.http.put>(notice_receiver_uri, body); } - public deleteReceiver(receiverId: number) : Observable> { + public deleteReceiver(receiverId: number): Observable> { return this.http.delete>(`${notice_receiver_uri}/${receiverId}`); } - public getReceivers() : Observable> { + public getReceivers(): Observable> { return this.http.get>(notice_receivers_uri); } - } diff --git a/web-app/src/app/service/notice-rule.service.ts b/web-app/src/app/service/notice-rule.service.ts index 91d7c68..1d21679 100644 --- a/web-app/src/app/service/notice-rule.service.ts +++ b/web-app/src/app/service/notice-rule.service.ts @@ -1,8 +1,9 @@ +import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import {Observable} from "rxjs"; -import {Message} from "../pojo/Message"; -import {HttpClient} from "@angular/common/http"; -import {NoticeRule} from "../pojo/NoticeRule"; +import { Observable } from 'rxjs'; + +import { Message } from '../pojo/Message'; +import { NoticeRule } from '../pojo/NoticeRule'; const notice_rule_uri = '/notice/rule'; const notice_rules_uri = '/notice/rules'; @@ -11,22 +12,21 @@ const notice_rules_uri = '/notice/rules'; providedIn: 'root' }) export class NoticeRuleService { + constructor(private http: HttpClient) {} - constructor(private http : HttpClient) { } - - public newNoticeRule(body: NoticeRule) : Observable> { + public newNoticeRule(body: NoticeRule): Observable> { return this.http.post>(notice_rule_uri, body); } - public editNoticeRule(body: NoticeRule) : Observable> { + public editNoticeRule(body: NoticeRule): Observable> { return this.http.put>(notice_rule_uri, body); } - public deleteNoticeRule(ruleId: number) : Observable> { + public deleteNoticeRule(ruleId: number): Observable> { return this.http.delete>(`${notice_rule_uri}/${ruleId}`); } - public getNoticeRules() : Observable> { + public getNoticeRules(): Observable> { return this.http.get>(notice_rules_uri); } } diff --git a/web-app/src/app/shared/shared-zorro.module.ts b/web-app/src/app/shared/shared-zorro.module.ts index 891ae08..ecc42e2 100644 --- a/web-app/src/app/shared/shared-zorro.module.ts +++ b/web-app/src/app/shared/shared-zorro.module.ts @@ -41,5 +41,5 @@ export const SHARED_ZORRO_MODULES = [ NzToolTipModule, NzIconModule, NzCheckboxModule, - NzSpinModule, + NzSpinModule ]; diff --git a/web-app/src/app/shared/shared.module.ts b/web-app/src/app/shared/shared.module.ts index b858d30..bc2bd74 100644 --- a/web-app/src/app/shared/shared.module.ts +++ b/web-app/src/app/shared/shared.module.ts @@ -1,10 +1,10 @@ -import { NgModule, Type } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { NgModule, Type } from '@angular/core'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; -import { AlainThemeModule } from '@delon/theme'; import { DelonACLModule } from '@delon/acl'; import { DelonFormModule } from '@delon/form'; +import { AlainThemeModule } from '@delon/theme'; import { SHARED_DELON_MODULES } from './shared-delon.module'; import { SHARED_ZORRO_MODULES } from './shared-zorro.module'; @@ -58,4 +58,4 @@ const DIRECTIVES: Array> = []; ...DIRECTIVES ] }) -export class SharedModule { } +export class SharedModule {} diff --git a/web-app/src/assets/tmp/app-data.json b/web-app/src/assets/app-data.json similarity index 83% rename from web-app/src/assets/tmp/app-data.json rename to web-app/src/assets/app-data.json index a116bf1..b0bbf70 100644 --- a/web-app/src/assets/tmp/app-data.json +++ b/web-app/src/assets/app-data.json @@ -5,7 +5,7 @@ }, "user": { "name": "Admin", - "avatar": "./assets/tmp/img/avatar.svg", + "avatar": "./assets/img/avatar.svg", "email": "管理员" }, "menu": [ @@ -105,26 +105,6 @@ "link": "/alert/notice" } ] - }, - { - "text": "More", - "i18n": "menu.extras", - "group": true, - "hideInBreadcrumb": true, - "children": [ - { - "text": "Help Center", - "link": "/extras/help", - "i18n": "menu.extras.help", - "icon": "anticon-link" - }, - { - "text": "Settings", - "link": "/extras/setting", - "i18n": "menu.extras.setting", - "icon": "anticon-setting" - } - ] } ] } diff --git a/web-app/src/assets/tmp/i18n/en-US.json b/web-app/src/assets/i18n/en-US.json similarity index 100% rename from web-app/src/assets/tmp/i18n/en-US.json rename to web-app/src/assets/i18n/en-US.json diff --git a/web-app/src/assets/tmp/i18n/zh-CN.json b/web-app/src/assets/i18n/zh-CN.json similarity index 100% rename from web-app/src/assets/tmp/i18n/zh-CN.json rename to web-app/src/assets/i18n/zh-CN.json diff --git a/web-app/src/assets/tmp/i18n/zh-TW.json b/web-app/src/assets/i18n/zh-TW.json similarity index 100% rename from web-app/src/assets/tmp/i18n/zh-TW.json rename to web-app/src/assets/i18n/zh-TW.json diff --git a/web-app/src/assets/tmp/img/avatar.svg b/web-app/src/assets/img/avatar.svg similarity index 100% rename from web-app/src/assets/tmp/img/avatar.svg rename to web-app/src/assets/img/avatar.svg