Skip to content

Commit

Permalink
[web-app] update layout ui - help button, nav menu (#272)
Browse files Browse the repository at this point in the history 
* [web-app] update layout ui

* [web-app] update layout ui - help button, nav menu
  • Loading branch information
@tomsun28
tomsun28 committed Sep 4, 2022
1 parent acf0930 commit a844644
Show file tree
Hide file tree
Showing 21 changed files with 128 additions and 78 deletions.
0 ...src/main/resources/define/app/app-ssl.yml → ...ain/resources/define/app/app-ssl_cert.yml
View file
File renamed without changes.
0 ...main/resources/define/param/param-ssl.yml → ...resources/define/param/param-ssl_cert.yml
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions web-app/src/app/core/startup/startup.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ export class StartupService {
// 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);
// https://ng-alain.com/theme/settings/zh
this.settingService.setLayout('collapsed', true);
// 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
Expand Down
7 changes: 5 additions & 2 deletions web-app/src/app/layout/basic/basic.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { CONSTS } from 'src/app/shared/consts';
@Component({
selector: 'layout-basic',
template: `
<layout-default [options]="options" [asideUser]="asideUserTpl" [content]="contentTpl" [customError]="null">
<layout-default [options]="options" [asideUser]="asideUserTpl" [nav]="navTpl" [content]="contentTpl" [customError]="null">
<layout-default-header-item direction="left">
<a layout-default-header-item-trigger href="//github.com/dromara/hertzbeat" target="_blank">
<i nz-icon nzType="github"></i>
Expand Down Expand Up @@ -69,6 +69,9 @@ import { CONSTS } from 'src/app/shared/consts';
</div>
</div>
</ng-template>
<ng-template #navTpl>
<layout-default-nav class="d-block py-lg" openStrictly="true"></layout-default-nav>
</ng-template>
<ng-template #contentTpl>
<router-outlet></router-outlet>
</ng-template>
Expand All @@ -78,7 +81,7 @@ import { CONSTS } from 'src/app/shared/consts';
HertzBeat {{ version }}<br />
Copyright
<i nz-icon nzType="copyright"></i> 2022
<a href="https://hertzbeat.com" target="_blank">https://www.hertzbeat.com</a>
<a href="https://hertzbeat.com" target="_blank">hertzbeat.com</a>
<br />
Licensed under the Apache License, Version 2.0
</div>
Expand Down
2 changes: 1 addition & 1 deletion web-app/src/app/layout/passport/passport.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
Copyright
<i nz-icon nzType="copyright" nzTheme="outline"></i>
2022
<a href="https://hertzbeat.com" target="_blank">https://www.hertzbeat.com</a>
<a href="https://hertzbeat.com" target="_blank">hertzbeat.com</a>
<br />
Licensed under the Apache License, Version 2.0
</div>
Expand Down
2 changes: 1 addition & 1 deletion web-app/src/app/routes/alert/alert-center/alert-center.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</nz-breadcrumb>
<nz-divider></nz-divider>

<div>
<div style="margin-bottom: 20px">
<button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
Expand Down
18 changes: 2 additions & 16 deletions web-app/src/app/routes/alert/alert-center/alert-center.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,27 +141,13 @@ export class AlertCenterComponent implements OnInit {
onMarkReadOneAlert(alertId: number) {
let alerts = new Set<number>();
alerts.add(alertId);
this.modal.confirm({
nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-done'),
nzOkText: this.i18nSvc.fanyi('common.button.ok'),
nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
nzOkDanger: true,
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(alerts, 3)
});
this.updateAlertsStatus(alerts, 3);
}

onMarkUnReadOneAlert(alertId: number) {
let alerts = new Set<number>();
alerts.add(alertId);
this.modal.confirm({
nzTitle: this.i18nSvc.fanyi('alert.center.confirm.mark-no'),
nzOkText: this.i18nSvc.fanyi('common.button.ok'),
nzCancelText: this.i18nSvc.fanyi('common.button.cancel'),
nzOkDanger: true,
nzOkType: 'primary',
nzOnOk: () => this.updateAlertsStatus(alerts, 0)
});
this.updateAlertsStatus(alerts, 0);
}

deleteAlerts(alertIds: Set<number>) {
Expand Down
43 changes: 24 additions & 19 deletions web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,28 @@
<i nz-icon nzType="alert"></i>
<span>{{ 'menu.alert.dispatch' | i18n }}</span>
<a href="https://hertzbeat.com/docs/help/alert_email" target="_blank" style="float: right; margin-right: 5%">
<span>{{ 'common.button.help' | i18n }}&nbsp;</span>
<i nz-icon nzType="question-circle" nzTheme="outline"></i>
<button nz-button nzType="primary">
<span>{{ 'common.button.help' | i18n }} </span>
<span nz-icon nzType="question-circle"></span>
</button>
</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<nz-tabset nzSize="large">
<nz-tab [nzTitle]="'alert.notice.receiver' | i18n">
<button nz-button nzType="primary" (click)="syncReceiver()">
<i nz-icon nzType="sync" nzTheme="outline"></i>
{{ 'common.refresh' | i18n }}
</button>

<button nz-button nzType="primary" (click)="onNewNoticeReceiver()">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
{{ 'alert.notice.receiver.new' | i18n }}
</button>
<div style="margin-bottom: 20px">
<button nz-button nzType="primary" (click)="syncReceiver()">
<i nz-icon nzType="sync" nzTheme="outline"></i>
{{ 'common.refresh' | i18n }}
</button>

<button nz-button nzType="primary" (click)="onNewNoticeReceiver()">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
{{ 'alert.notice.receiver.new' | i18n }}
</button>
</div>
<nz-table
#fixedTable
[nzData]="receivers"
Expand Down Expand Up @@ -116,15 +119,17 @@
</nz-table>
</nz-tab>
<nz-tab [nzTitle]="'alert.notice.rule' | i18n">
<button nz-button nzType="primary" (click)="syncRule()">
<i nz-icon nzType="sync" nzTheme="outline"></i>
{{ 'common.refresh' | i18n }}
</button>
<div style="margin-bottom: 20px">
<button nz-button nzType="primary" (click)="syncRule()">
<i nz-icon nzType="sync" nzTheme="outline"></i>
{{ 'common.refresh' | i18n }}
</button>

<button nz-button nzType="primary" (click)="onNewNoticeRule()">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
{{ 'alert.notice.rule.new' | i18n }}
</button>
<button nz-button nzType="primary" (click)="onNewNoticeRule()">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
{{ 'alert.notice.rule.new' | i18n }}
</button>
</div>

<nz-table
#ruleFixedTable
Expand Down
30 changes: 17 additions & 13 deletions web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,28 @@
<i nz-icon nzType="alert"></i>
<span>{{ 'menu.alert.setting' | i18n }}</span>
<a href="https://hertzbeat.com/docs/help/alert_threshold" target="_blank" style="float: right; margin-right: 5%">
<span>{{ 'common.button.help' | i18n }}&nbsp;</span>
<i nz-icon nzType="question-circle" nzTheme="outline"></i>
<button nz-button nzType="primary">
<span>{{ 'common.button.help' | i18n }} </span>
<span nz-icon nzType="question-circle"></span>
</button>
</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onNewAlertDefine()">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
{{ 'alert.setting.new' | i18n }}
</button>
<button nz-button nzType="primary" nzDanger (click)="onDeleteAlertDefines()">
<i nz-icon nzType="delete" nzTheme="outline"></i>
{{ 'common.button.delete' | i18n }}
</button>
<div style="margin-bottom: 20px">
<button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
<button nz-button nzType="primary" (click)="onNewAlertDefine()">
<i nz-icon nzType="appstore-add" nzTheme="outline"></i>
{{ 'alert.setting.new' | i18n }}
</button>
<button nz-button nzType="primary" nzDanger (click)="onDeleteAlertDefines()">
<i nz-icon nzType="delete" nzTheme="outline"></i>
{{ 'common.button.delete' | i18n }}
</button>
</div>

<nz-table
#fixedTable
Expand Down
12 changes: 6 additions & 6 deletions web-app/src/app/routes/dashboard/dashboard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,26 +79,26 @@
<div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
<div nz-row nzAlign="middle" class="bg-magenta rounded-lg">
<div nz-col nzSpan="10" class="p-md text-white">
<div class="h2 mt0 font-weight-bold">{{ appCountCustom.size }}</div>
<div class="h2 mt0 font-weight-bold">{{ appCountMid.size }}</div>
<p class="h5 text-nowrap mb0">
<i nz-icon nzType="skin" nzTheme="outline"></i>
{{ 'monitor.category.custom' | i18n }}
{{ 'monitor.category.mid' | i18n }}
</p>
</div>
<div nz-col nzSpan="14">
<nz-tag class="mb-xs">
<span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.availableSize }}</span>
<span>{{ 'monitor.status.available' | i18n }} </span><span style="font-weight: bolder">{{ appCountMid.availableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>{{ 'monitor.status.unavailable' | i18n }} </span
><span style="font-weight: bolder">{{ appCountCustom.unAvailableSize }}</span>
><span style="font-weight: bolder">{{ appCountMid.unAvailableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>{{ 'monitor.status.unreachable' | i18n }} </span
><span style="font-weight: bolder">{{ appCountCustom.unReachableSize }}</span>
><span style="font-weight: bolder">{{ appCountMid.unReachableSize }}</span>
</nz-tag>
<nz-tag class="mb-xs">
<span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountCustom.unManageSize }}</span>
<span>{{ 'monitor.status.un-manage' | i18n }} </span><span style="font-weight: bolder">{{ appCountMid.unManageSize }}</span>
</nz-tag>
</div>
</div>
Expand Down
9 changes: 9 additions & 0 deletions web-app/src/app/routes/dashboard/dashboard.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
appCountService: AppCount = new AppCount();
appCountOs: AppCount = new AppCount();
appCountDb: AppCount = new AppCount();
appCountMid: AppCount = new AppCount();
appCountCustom: AppCount = new AppCount();

// start 数量全局概览
Expand Down Expand Up @@ -228,6 +229,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
this.appCountService = new AppCount();
this.appCountOs = new AppCount();
this.appCountDb = new AppCount();
this.appCountMid = new AppCount();
this.appCountCustom = new AppCount();
let dashboard$ = this.monitorSvc.getAppsMonitorSummary().subscribe(
message => {
Expand Down Expand Up @@ -269,6 +271,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
this.appCountOs.unManageSize += app.unManageSize;
this.appCountOs.unReachableSize += app.unReachableSize;
break;
case 'mid':
this.appCountMid.size += app.size;
this.appCountMid.availableSize += app.availableSize;
this.appCountMid.unAvailableSize += app.unAvailableSize;
this.appCountMid.unManageSize += app.unManageSize;
this.appCountMid.unReachableSize += app.unReachableSize;
break;
case 'custom':
this.appCountCustom.size += app.size;
this.appCountCustom.availableSize += app.availableSize;
Expand Down
13 changes: 9 additions & 4 deletions web-app/src/app/routes/monitor/monitor-detail/monitor-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,16 @@
</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<i nz-icon nzType="pie-chart"></i>
<span>{{ 'monitor.app.' + app | i18n }} {{ 'monitors.detail' | i18n }}</span>
<span nz-icon nzType="pie-chart"></span>
<span>{{ 'monitors.detail' | i18n }}</span>
<nz-tag style="font-size: 14px; border-radius: 4px; margin-left: 4px" nzColor="#3f51b5">
<span>{{ 'monitor.app.' + app | i18n }}</span>
</nz-tag>
<a [href]="'https://hertzbeat.com/docs/help/' + app" target="_blank" style="float: right; margin-right: 5%">
<span>{{ 'common.button.help' | i18n }} </span>
<i nz-icon nzType="question-circle" nzTheme="outline"></i>
<button nz-button nzType="primary">
<span>{{ 'common.button.help' | i18n }} </span>
<span nz-icon nzType="question-circle"></span>
</button>
</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
Expand Down
12 changes: 9 additions & 3 deletions web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,16 @@
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<i nz-icon nzType="edit"></i>
<span>{{ 'monitors.edit' | i18n }} {{ 'monitor.app.' + monitor.app | i18n }} {{ 'monitor' | i18n }}</span>
<span>{{ 'monitors.edit' | i18n }} </span>
<nz-tag style="font-size: 14px; border-radius: 4px" nzColor="#3f51b5">
<span>{{ 'monitor.app.' + monitor.app | i18n }}</span>
</nz-tag>
<span>{{ 'monitor' | i18n }}</span>
<a [href]="'https://hertzbeat.com/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
<span>{{ 'common.button.help' | i18n }} </span>
<i nz-icon nzType="question-circle" nzTheme="outline"></i>
<button nz-button nzType="primary">
<span>{{ 'common.button.help' | i18n }} </span>
<span nz-icon nzType="question-circle"></span>
</button>
</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
Expand Down
14 changes: 12 additions & 2 deletions web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,21 @@
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<i nz-icon nzType="reconciliation"></i>
<span>{{ 'monitor.app.' + app | i18n }} {{ 'monitors.list' | i18n }}</span>
<span>{{ 'monitors.list' | i18n }}</span>
<nz-tag style="font-size: 14px; border-radius: 4px; margin-left: 4px" nzColor="#3f51b5">
<span>{{ 'monitor.app.' + app | i18n }}</span>
</nz-tag>
<a [href]="'https://hertzbeat.com/docs/help/' + app" target="_blank" style="float: right; margin-right: 5%">
<button nz-button nzType="primary">
<span>{{ 'common.button.help' | i18n }} </span>
<span nz-icon nzType="question-circle"></span>
</button>
</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<div>
<div style="margin-bottom: 20px">
<button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
Expand Down Expand Up @@ -124,6 +133,7 @@
[cdkCopyToClipboard]="data.host"
nz-tooltip
[nzTooltipTitle]="'common.copy' | i18n"
(click)="notifyCopySuccess()"
>
{{ data.host }}
<span nz-icon nzType="copy"></span>
Expand Down
5 changes: 5 additions & 0 deletions web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export class MonitorListComponent implements OnInit {
private notifySvc: NzNotificationService,
private msg: NzMessageService,
private monitorSvc: MonitorService,
private messageSvc: NzMessageService,
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService
) {}

Expand Down Expand Up @@ -297,6 +298,10 @@ export class MonitorListComponent implements OnInit {
}
// end: 列表多选逻辑

notifyCopySuccess() {
this.messageSvc.success(this.i18nSvc.fanyi('common.notify.copy-success'), { nzDuration: 800 });
}

/**
* 分页回调
*
Expand Down
12 changes: 9 additions & 3 deletions web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,16 @@
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<i nz-icon nzType="plus-circle"></i>
<span>{{ 'monitors.new' | i18n }} {{ 'monitor.app.' + monitor.app | i18n }} {{ 'monitor' | i18n }}</span>
<span>{{ 'monitors.new' | i18n }} </span>
<nz-tag style="font-size: 14px; border-radius: 4px" nzColor="#3f51b5">
<span>{{ 'monitor.app.' + monitor.app | i18n }}</span>
</nz-tag>
<span>{{ 'monitor' | i18n }}</span>
<a [href]="'https://hertzbeat.com/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
<span>{{ 'common.button.help' | i18n }} </span>
<i nz-icon nzType="question-circle" nzTheme="outline"></i>
<button nz-button nzType="primary">
<span>{{ 'common.button.help' | i18n }} </span>
<span nz-icon nzType="question-circle"></span>
</button>
</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
Expand Down
8 changes: 5 additions & 3 deletions web-app/src/app/routes/setting/tags/tags.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,16 @@
<i nz-icon nzType="tags"></i>
<span>{{ 'menu.extras.tags' | i18n }}</span>
<a href="https://hertzbeat.com/docs/help/alert_threshold" target="_blank" style="float: right; margin-right: 5%">
<span>{{ 'common.button.help' | i18n }}&nbsp;</span>
<i nz-icon nzType="question-circle" nzTheme="outline"></i>
<button nz-button nzType="primary">
<span>{{ 'common.button.help' | i18n }} </span>
<span nz-icon nzType="question-circle"></span>
</button>
</a>
</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<div>
<div style="margin-bottom: 20px">
<button nz-button nzType="primary" nz-tooltip (click)="sync()" [nzTooltipTitle]="'common.refresh' | i18n">
<i nz-icon nzType="sync" nzTheme="outline"></i>
</button>
Expand Down
1 change: 1 addition & 0 deletions web-app/src/assets/i18n/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@
"common.notify.enable-fail": "Enable Failed!",
"common.confirm.clear-cache": "Please confirm whether to clear cache!",
"common.notify.clear-success": "Clear Success!",
"common.notify.copy-success": "Copy Success!",
"common.button.ok": "OK",
"common.button.cancel": "Cancel",
"common.button.help": "Help",
Expand Down
Loading

0 comments on commit a844644

Please sign in to comment.