OpenSource/hertzbeat
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[webapp]小端页面自适应优化

Browse Source
This commit is contained in:
tomsun28
2022-01-30 10:16:23 +08:00
parent 06272523a5
commit 97362beef3
8 changed files with 200 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web-app/src/app/layout/basic/basic.component.ts
View File

@@ -12,6 +12,11 @@ import { environment } from '@env/environment';
<i nz-icon nzType="github"></i> <i nz-icon nzType="github"></i>
</a> </a>
</layout-default-header-item> </layout-default-header-item>
<layout-default-header-item direction="left">
<a layout-default-header-item-trigger href="//gitee.com/usthe" target="_blank">
<i nz-icon nzIconfont="icon-gitee"></i>
</a>
</layout-default-header-item>
<layout-default-header-item direction="left" hidden="mobile"> <layout-default-header-item direction="left" hidden="mobile">
<a layout-default-header-item-trigger routerLink="/passport/lock"> <a layout-default-header-item-trigger routerLink="/passport/lock">
<i nz-icon nzType="lock"></i> <i nz-icon nzType="lock"></i>
@@ -25,7 +30,7 @@ import { environment } from '@env/environment';
<layout-default-header-item direction="middle"> <layout-default-header-item direction="middle">
<header-search class="alain-default__search" [toggleChange]="searchToggleStatus"></header-search> <header-search class="alain-default__search" [toggleChange]="searchToggleStatus"></header-search>
</layout-default-header-item> </layout-default-header-item>
<layout-default-header-item direction="right"> <layout-default-header-item direction="right" hidden="mobile">
<header-notify></header-notify> <header-notify></header-notify>
</layout-default-header-item> </layout-default-header-item>
<layout-default-header-item direction="right" hidden="mobile"> <layout-default-header-item direction="right" hidden="mobile">

10
web-app/src/app/routes/alert/alert-center/alert-center.component.html
View File

@@ -79,20 +79,20 @@
> >
<thead> <thead>
<tr> <tr>
<th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th> <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center">告警指标</th> <th nzAlign="center" nzLeft>告警指标</th>
<th nzAlign="center">所属监控</th> <th nzAlign="center">所属监控</th>
<th nzAlign="center">级别</th> <th nzAlign="center">级别</th>
<th nzAlign="center">告警内容</th> <th nzAlign="center">告警内容</th>
<th nzAlign="center">状态</th> <th nzAlign="center">状态</th>
<th nzAlign="center">告警时间</th> <th nzAlign="center">告警时间</th>
<th nzAlign="center" nzRight>操作</th> <th nzAlign="center">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of fixedTable.data" [ngStyle]="{ 'background-color': data.status === 0 ? '#E1E7A89B' : 'inherit' }"> <tr *ngFor="let data of fixedTable.data" [ngStyle]="{ 'background-color': data.status === 0 ? '#E1E7A89B' : 'inherit' }">
<td nzAlign="center" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td> <td nzAlign="center" nzLeft [nzChecked]="checkedAlertIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
<td nzAlign="center">{{ data.target }}</td> <td nzAlign="center" nzLeft>{{ data.target }}</td>
<td nzAlign="center"> <td nzAlign="center">
<a [routerLink]="['/monitors/' + data.monitorId]"> <a [routerLink]="['/monitors/' + data.monitorId]">
<span>{{ data.monitorName }}</span> <span>{{ data.monitorName }}</span>
@@ -117,7 +117,7 @@
{{ data.status === 0 ? '未处理' : '已处理' }} {{ data.status === 0 ? '未处理' : '已处理' }}
</td> </td>
<td nzAlign="center">{{ data.gmtCreate }}</td> <td nzAlign="center">{{ data.gmtCreate }}</td>
<td nzAlign="center" nzRight> <td nzAlign="center">
<button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警"> <button nz-button nzType="primary" (click)="onDeleteOneAlert(data.id)" nz-tooltip nzTooltipTitle="删除告警">
<i nz-icon nzType="delete" nzTheme="outline"></i> <i nz-icon nzType="delete" nzTheme="outline"></i>
</button> </button>

73
web-app/src/app/routes/alert/alert-notice/alert-notice.component.html
View File

@@ -27,15 +27,15 @@
[nzData]="receivers" [nzData]="receivers"
nzFrontPagination="false" nzFrontPagination="false"
[nzLoading]="receiverTableLoading" [nzLoading]="receiverTableLoading"
[nzScroll]="{ x: '1150px', y: '1240px' }" [nzScroll]="{ x: '100%', y: '100%' }"
> >
<thead> <thead>
<tr> <tr>
<th nzAlign="center">接收人</th> <th nzAlign="center" nzWidth="10%">接收人</th>
<th nzAlign="center">通知方式</th> <th nzAlign="center" nzWidth="20%">通知方式</th>
<th nzAlign="center">配置</th> <th nzAlign="center" nzWidth="20%">配置</th>
<th nzAlign="center">最新修改时间</th> <th nzAlign="center" nzWidth="20%">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th> <th nzAlign="center" nzWidth="30%">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -68,7 +68,7 @@
<span *ngIf="data.type == 3">{{ data.wechatId }}</span> <span *ngIf="data.type == 3">{{ data.wechatId }}</span>
</td> </td>
<td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td> <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight> <td nzAlign="center">
<button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)" nz-tooltip nzTooltipTitle="修改接收人"> <button nz-button nzType="primary" (click)="onEditOneNoticeReceiver(data)" nz-tooltip nzTooltipTitle="修改接收人">
<i nz-icon nzType="edit" nzTheme="outline"></i> <i nz-icon nzType="edit" nzTheme="outline"></i>
</button> </button>
@@ -93,16 +93,16 @@
[nzData]="rules" [nzData]="rules"
nzFrontPagination="false" nzFrontPagination="false"
[nzLoading]="ruleTableLoading" [nzLoading]="ruleTableLoading"
[nzScroll]="{ x: '1150px', y: '1240px' }" [nzScroll]="{ x: '100%', y: '100%' }"
> >
<thead> <thead>
<tr> <tr>
<th nzAlign="center">策略名称</th> <th nzAlign="center" nzWidth="15%">策略名称</th>
<th nzAlign="center">接收人</th> <th nzAlign="center" nzWidth="12%">接收人</th>
<th nzAlign="center">转发所有</th> <th nzAlign="center" nzWidth="12%">转发所有</th>
<th nzAlign="center">是否启用</th> <th nzAlign="center" nzWidth="15%">是否启用</th>
<th nzAlign="center">最新修改时间</th> <th nzAlign="center" nzWidth="15%">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th> <th nzAlign="center" nzWidth="25%">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -130,7 +130,7 @@
</nz-tag> </nz-tag>
</td> </td>
<td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td> <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight> <td nzAlign="center">
<button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略"> <button nz-button nzType="primary" (click)="onEditOneNoticeRule(data)" nz-tooltip nzTooltipTitle="修改告警策略">
<i nz-icon nzType="edit" nzTheme="outline"></i> <i nz-icon nzType="edit" nzTheme="outline"></i>
</button> </button>
@@ -155,17 +155,17 @@
[nzOkLoading]="isManageReceiverModalOkLoading" [nzOkLoading]="isManageReceiverModalOkLoading"
> >
<div *nzModalContent class="-inner-content"> <div *nzModalContent class="-inner-content">
<form nz-form> <form nz-form #receiverForm="ngForm">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">接收人名称</nz-form-label> <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true">接收人名称</nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="receiver.name" nz-input name="name" type="text" id="name" /> <input [(ngModel)]="receiver.name" nz-input required name="name" type="text" id="name" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="type">通知方式 </nz-form-label> <nz-form-label nzSpan="7" nzRequired="true" nzFor="type">通知方式 </nz-form-label>
<nz-form-control nzSpan="8"> <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-select [(ngModel)]="receiver.type" nzAllowClear nzPlaceHolder="Choose" name="type" id="type"> <nz-select [(ngModel)]="receiver.type" nzPlaceHolder="Choose" required name="type" id="type">
<nz-option [nzValue]="0" nzDisabled nzLabel="短信"></nz-option> <nz-option [nzValue]="0" nzDisabled nzLabel="短信"></nz-option>
<nz-option [nzValue]="1" nzLabel="邮箱"></nz-option> <nz-option [nzValue]="1" nzLabel="邮箱"></nz-option>
<nz-option [nzValue]="2" nzLabel="WebHook"></nz-option> <nz-option [nzValue]="2" nzLabel="WebHook"></nz-option>
@@ -175,26 +175,34 @@
</nz-form-item> </nz-form-item>
<nz-form-item *ngIf="receiver.type === 0"> <nz-form-item *ngIf="receiver.type === 0">
<nz-form-label [nzSpan]="7" nzFor="phone" [nzRequired]="receiver.type === 0">手机号</nz-form-label> <nz-form-label [nzSpan]="7" nzFor="phone" [nzRequired]="receiver.type === 0">手机号</nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.phone.invalid' | i18n">
<input [(ngModel)]="receiver.phone" nz-input name="phone" type="tel" id="phone" /> <input
[(ngModel)]="receiver.phone"
nz-input
[required]="receiver.type === 0"
pattern="/^1\d{10}$/"
name="phone"
type="tel"
id="phone"
/>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item *ngIf="receiver.type === 1"> <nz-form-item *ngIf="receiver.type === 1">
<nz-form-label [nzSpan]="7" nzFor="email" [nzRequired]="receiver.type === 1">邮箱</nz-form-label> <nz-form-label [nzSpan]="7" nzFor="email" [nzRequired]="receiver.type === 1">邮箱</nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.email.invalid' | i18n">
<input [(ngModel)]="receiver.email" nz-input name="email" type="email" id="email" /> <input [(ngModel)]="receiver.email" nz-input [required]="receiver.type === 1" email name="email" type="email" id="email" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item *ngIf="receiver.type === 2"> <nz-form-item *ngIf="receiver.type === 2">
<nz-form-label [nzSpan]="7" nzFor="hookUrl" [nzRequired]="receiver.type === 2">URL地址</nz-form-label> <nz-form-label [nzSpan]="7" nzFor="hookUrl" [nzRequired]="receiver.type === 2">URL地址</nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="receiver.hookUrl" nz-input name="hookUrl" type="url" id="hookUrl" /> <input [(ngModel)]="receiver.hookUrl" nz-input [required]="receiver.type === 2" name="hookUrl" type="url" id="hookUrl" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item *ngIf="receiver.type === 3"> <nz-form-item *ngIf="receiver.type === 3">
<nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 3">微信OPENID</nz-form-label> <nz-form-label [nzSpan]="7" nzFor="wechatId" [nzRequired]="receiver.type === 3">微信OPENID</nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="receiver.wechatId" nz-input name="wechatId" type="text" id="wechatId" /> <input [(ngModel)]="receiver.wechatId" nz-input [required]="receiver.type === 3" name="wechatId" type="text" id="wechatId" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</form> </form>
@@ -212,11 +220,11 @@
[nzOkLoading]="isManageRuleModalOkLoading" [nzOkLoading]="isManageRuleModalOkLoading"
> >
<div *nzModalContent class="-inner-content"> <div *nzModalContent class="-inner-content">
<form nz-form> <form nz-form #ruleForm="ngForm">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="rule_name" nzRequired="true">策略名称</nz-form-label> <nz-form-label [nzSpan]="7" nzFor="rule_name" nzRequired="true">策略名称</nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="rule.name" nz-input name="rule_name" type="text" id="rule_name" /> <input [(ngModel)]="rule.name" nz-input required name="rule_name" type="text" id="rule_name" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
@@ -227,7 +235,7 @@
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="receiver">接收人</nz-form-label> <nz-form-label nzSpan="7" nzRequired="true" nzFor="receiver">接收人</nz-form-label>
<nz-form-control nzSpan="8"> <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-select <nz-select
[(ngModel)]="rule.receiverId" [(ngModel)]="rule.receiverId"
(nzOpenChange)="loadReceiversOption()" (nzOpenChange)="loadReceiversOption()"
@@ -235,6 +243,7 @@
nzShowSearch nzShowSearch
nzAllowClear nzAllowClear
nzPlaceHolder="Select a person" nzPlaceHolder="Select a person"
required
name="receiver" name="receiver"
id="receiver" id="receiver"
> >

48
web-app/src/app/routes/alert/alert-setting/alert-setting.component.html
View File

@@ -42,25 +42,25 @@
[nzPageSizeOptions]="[8, 15, 25]" [nzPageSizeOptions]="[8, 15, 25]"
(nzQueryParams)="onTablePageChange($event)" (nzQueryParams)="onTablePageChange($event)"
nzShowPagination="true" nzShowPagination="true"
[nzScroll]="{ x: '1150px', y: '1240px' }" [nzScroll]="{ x: '1240px', y: '1240px' }"
> >
<thead> <thead>
<tr> <tr>
<th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th> <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center">指标对象</th> <th nzAlign="center" nzLeft>指标对象</th>
<th nzAlign="center">阈值触发表达式</th> <th nzAlign="center">阈值触发表达式</th>
<th nzAlign="center">告警级别</th> <th nzAlign="center">告警级别</th>
<th nzAlign="center">触发次数</th> <th nzAlign="center">触发次数</th>
<th nzAlign="center">通知模版</th> <th nzAlign="center">通知模版</th>
<th nzAlign="center">全局默认</th> <th nzAlign="center">全局默认</th>
<th nzAlign="center">最新修改时间</th> <th nzAlign="center">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th> <th nzAlign="center">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of fixedTable.data"> <tr *ngFor="let data of fixedTable.data">
<td nzAlign="center" nzLeft [nzChecked]="checkedDefineIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td> <td nzAlign="center" nzLeft [nzChecked]="checkedDefineIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
<td nzAlign="center"> <td nzAlign="center" nzLeft>
<span>{{ data.app + '.' + data.metric + '.' + data.field }}</span> <span>{{ data.app + '.' + data.metric + '.' + data.field }}</span>
</td> </td>
<td nzAlign="center"> <td nzAlign="center">
@@ -91,7 +91,7 @@
</nz-tag> </nz-tag>
</td> </td>
<td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td> <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight> <td nzAlign="center">
<button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)" nz-tooltip nzTooltipTitle="配置关联监控"> <button nz-button nzType="primary" (click)="onOpenConnectModal(data.id, data.app)" nz-tooltip nzTooltipTitle="配置关联监控">
<i nz-icon nzType="link" nzTheme="outline"></i> <i nz-icon nzType="link" nzTheme="outline"></i>
</button> </button>
@@ -119,11 +119,11 @@
[nzOkLoading]="isManageModalOkLoading" [nzOkLoading]="isManageModalOkLoading"
> >
<div *nzModalContent class="-inner-content"> <div *nzModalContent class="-inner-content">
<form nz-form> <form nz-form #defineForm="ngForm">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">指标对象</nz-form-label> <nz-form-label [nzSpan]="7" nzFor="target" nzRequired="true">指标对象</nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<nz-cascader name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues"> </nz-cascader> <nz-cascader required name="target" id="target" [nzOptions]="appHierarchies" [(ngModel)]="cascadeValues"></nz-cascader>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
@@ -154,10 +154,11 @@
> >
阈值触发表达式 阈值触发表达式
</nz-form-label> </nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<nz-textarea-count [nzMaxCharacterCount]="100"> <nz-textarea-count [nzMaxCharacterCount]="100">
<textarea <textarea
[(ngModel)]="define.expr" [(ngModel)]="define.expr"
required
rows="3" rows="3"
nz-input nz-input
name="expr" name="expr"
@@ -177,8 +178,8 @@
> >
告警级别 告警级别
</nz-form-label> </nz-form-label>
<nz-form-control nzSpan="8"> <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-select [(ngModel)]="define.priority" nzAllowClear nzPlaceHolder="Choose" name="priority" id="priority"> <nz-select [(ngModel)]="define.priority" nzPlaceHolder="Choose" name="priority" id="priority">
<nz-option [nzValue]="0" nzLabel="紧急告警"></nz-option> <nz-option [nzValue]="0" nzLabel="紧急告警"></nz-option>
<nz-option [nzValue]="1" nzLabel="严重告警"></nz-option> <nz-option [nzValue]="1" nzLabel="严重告警"></nz-option>
<nz-option [nzValue]="2" nzLabel="警告告警"></nz-option> <nz-option [nzValue]="2" nzLabel="警告告警"></nz-option>
@@ -189,8 +190,8 @@
<nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" nzTooltipTitle="设置触发阈值多少次之后才会发送告警"> <nz-form-label nzSpan="7" nzRequired="true" nzFor="duration" nzTooltipTitle="设置触发阈值多少次之后才会发送告警">
触发次数 触发次数
</nz-form-label> </nz-form-label>
<nz-form-control nzSpan="8"> <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1" name="duration" id="duration"> <nz-input-number [(ngModel)]="define.times" [nzMin]="1" [nzMax]="10" [nzStep]="1" required name="duration" id="duration">
</nz-input-number> </nz-input-number>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
@@ -200,19 +201,19 @@
<nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的通知模版环境变量"> <nz-collapse-panel [nzActive]="isManageModalAdd" nzHeader="支持的通知模版环境变量">
<nz-list nzSize="small" nzSplit="false"> <nz-list nzSize="small" nzSplit="false">
<nz-list-item *ngIf="cascadeValues.length == 3"> <nz-list-item *ngIf="cascadeValues.length == 3">
<code>&#36;&#40;metric&#41; : 选中的指标对象名称</code> <code>&#36;&#123;metric&#125; : 选中的指标对象名称</code>
</nz-list-item> </nz-list-item>
<nz-list-item *ngIf="cascadeValues.length == 3"> <nz-list-item *ngIf="cascadeValues.length == 3">
<code>&#36;&#40;{{ cascadeValues[2] }}&#41; : 选中的指标对象值</code> <code>&#36;{{ '{' + cascadeValues[2] + '}' }} : 选中的指标对象值</code>
</nz-list-item> </nz-list-item>
<nz-list-item> <nz-list-item>
<code>&#36;&#40;instance&#41; : 所在行实例值</code> <code>&#36;&#123;instance&#125; : 所在行实例值</code>
</nz-list-item> </nz-list-item>
<nz-list-item> <nz-list-item>
<code>&#36;&#40;app&#41; : 所属监控类型名称</code> <code>&#36;&#123;app&#125; : 所属监控类型名称</code>
</nz-list-item> </nz-list-item>
<nz-list-item> <nz-list-item>
<code>&#36;&#40;metrics&#41; : 所属监控指标组名称</code> <code>&#36;&#123;metrics&#125; : 所属监控指标组名称</code>
</nz-list-item> </nz-list-item>
</nz-list> </nz-list>
</nz-collapse-panel> </nz-collapse-panel>
@@ -223,12 +224,13 @@
<nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" nzTooltipTitle="告警触发后发送的通知信息模版,模版环境变量见上方"> <nz-form-label [nzSpan]="7" nzFor="template" nzRequired="true" nzTooltipTitle="告警触发后发送的通知信息模版,模版环境变量见上方">
通知模版 通知模版
</nz-form-label> </nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<nz-textarea-count [nzMaxCharacterCount]="200"> <nz-textarea-count [nzMaxCharacterCount]="200">
<textarea <textarea
[(ngModel)]="define.template" [(ngModel)]="define.template"
rows="3" rows="3"
nz-input nz-input
required
name="template" name="template"
id="template" id="template"
placeholder="请输入告警的通知模版.&#10;示例: ${app}.${metrics}.${metric}'s value is too high" placeholder="请输入告警的通知模版.&#10;示例: ${app}.${metrics}.${metric}'s value is too high"
@@ -238,9 +240,7 @@
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="preset" nzTooltipTitle="此告警阈值配置是否应用于全局所有此类型监控"> <nz-form-label nzSpan="7" nzFor="preset" nzTooltipTitle="此告警阈值配置是否应用于全局所有此类型监控"> 全局默认 </nz-form-label>
全局默认
</nz-form-label>
<nz-form-control nzSpan="8"> <nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch> <nz-switch [(ngModel)]="define.preset" name="preset" id="preset"></nz-switch>
</nz-form-control> </nz-form-control>
@@ -248,7 +248,7 @@
<nz-form-item> <nz-form-item>
<nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" nzTooltipTitle="此告警阈值配置开启生效或关闭"> 启用告警 </nz-form-label> <nz-form-label nzSpan="7" nzRequired="true" nzFor="enable" nzTooltipTitle="此告警阈值配置开启生效或关闭"> 启用告警 </nz-form-label>
<nz-form-control nzSpan="8"> <nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="define.enable" name="enable" id="enable"></nz-switch> <nz-switch [(ngModel)]="define.enable" [ngModelOptions]="{ standalone: true }" name="enable" id="enable"></nz-switch>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</form> </form>

11
web-app/src/app/routes/dashboard/dashboard.component.html
View File

@@ -1,13 +1,10 @@
<br /> <div
<div nz-row [nzGutter]="24" style="margin-top: 10px">
<div nz-col nzXs="18" nzSm="18" nzMd="18" nzLg="18" nzOffset="1">
<div
echarts echarts
[options]="appsCountEChartOption" [options]="appsCountEChartOption"
theme="default" theme="default"
[autoResize]="true" [autoResize]="true"
[loading]="appsCountLoading" [loading]="appsCountLoading"
(chartClick)="onChartClick($event)" (chartClick)="onChartClick($event)"
></div> (chartInit)="onChartInit($event)"
</div> style="width: 100%; height: 400px; margin-top: 5%"
</div> ></div>

96
web-app/src/app/routes/dashboard/dashboard.component.ts
View File

@@ -4,6 +4,7 @@ import { I18NService } from '@core';
import { ALAIN_I18N_TOKEN } from '@delon/theme'; import { ALAIN_I18N_TOKEN } from '@delon/theme';
import { EChartsOption } from 'echarts'; import { EChartsOption } from 'echarts';
import { NzMessageService } from 'ng-zorro-antd/message'; import { NzMessageService } from 'ng-zorro-antd/message';
import { fromEvent } from 'rxjs';
import { MonitorService } from '../../service/monitor.service'; import { MonitorService } from '../../service/monitor.service';
@@ -26,41 +27,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
appsCountLoading: boolean = true; appsCountLoading: boolean = true;
appsCountTableData: any[] = []; appsCountTableData: any[] = [];
appsCountEChartOption!: EChartsOption; appsCountEChartOption!: EChartsOption;
appsCountTheme!: EChartsOption;
echartsInstance!: any;
pageResize$!: any;
ngOnInit(): void { ngOnInit(): void {
this.appsCountLoading = true; this.appsCountLoading = true;
this.refresh(); this.appsCountTheme = {
this.appsCountLoading = false;
// https://stackoverflow.com/questions/43908009/why-is-setinterval-in-an-angular-service-only-firing-one-time
this.interval$ = setInterval(this.refresh.bind(this), 30000);
}
ngOnDestroy(): void {
clearInterval(this.interval$);
}
refresh(): void {
let dashboard$ = this.monitorSvc.getAppsMonitorSummary().subscribe(
message => {
dashboard$.unsubscribe();
if (message.code === 0) {
// {app:'linux',size: 12}
let apps: any[] = message.data.apps;
this.appsCountTableData = [];
let total = 0;
apps.forEach(app => {
let appName = this.i18nSvc.fanyi(`monitor.app.${app.app}`);
this.appsCountTableData.push({
// 自定义属性
app: app.app,
// 默认属性
name: appName,
value: app.size
});
total = total + app.size ? app.size : 0;
});
this.appsCountEChartOption = {
title: { title: {
text: '监控总览', text: '监控总览',
subtext: '监控类型纳管数量分布', subtext: '监控类型纳管数量分布',
@@ -71,6 +44,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
formatter: '{a} <br/>{b} : {c}个监控 占比({d}%)' formatter: '{a} <br/>{b} : {c}个监控 占比({d}%)'
}, },
legend: { legend: {
show: false,
itemWidth: 80, itemWidth: 80,
itemHeight: 20, itemHeight: 20,
right: 0, right: 0,
@@ -94,7 +68,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
labelLine: { labelLine: {
show: false show: false
}, },
data: [{ value: total, name: '监控总量' }] data: [{ value: 0, name: '监控总量' }]
}, },
{ {
name: '纳管数量分布', name: '纳管数量分布',
@@ -134,11 +108,54 @@ export class DashboardComponent implements OnInit, OnDestroy {
borderRadius: 4 borderRadius: 4
} }
} }
}, }
data: this.appsCountTableData
} }
] ]
}; };
this.refresh();
this.appsCountLoading = false;
// https://stackoverflow.com/questions/43908009/why-is-setinterval-in-an-angular-service-only-firing-one-time
this.interval$ = setInterval(this.refresh.bind(this), 30000);
this.pageResize$ = fromEvent(window, 'resize').subscribe(event => {
this.resizeChart();
});
}
ngOnDestroy(): void {
clearInterval(this.interval$);
if (this.pageResize$) {
this.pageResize$.unsubscribe();
}
}
refresh(): void {
let dashboard$ = this.monitorSvc.getAppsMonitorSummary().subscribe(
message => {
dashboard$.unsubscribe();
if (message.code === 0 && message.data.apps != undefined) {
// {app:'linux',size: 12}
let apps: any[] = message.data.apps;
this.appsCountTableData = [];
let total = 0;
apps.forEach(app => {
let appName = this.i18nSvc.fanyi(`monitor.app.${app.app}`);
this.appsCountTableData.push({
// 自定义属性
app: app.app,
// 默认属性
name: appName,
value: app.size
});
total = total + (app.size ? app.size : 0);
});
// @ts-ignore
this.appsCountTheme.series[0].data = [{ value: total, name: '监控总量' }];
// @ts-ignore
this.appsCountTheme.series[1].data = this.appsCountTableData;
this.appsCountEChartOption = this.appsCountTheme;
this.cdr.detectChanges();
} else {
this.appsCountEChartOption = this.appsCountTheme;
this.cdr.detectChanges(); this.cdr.detectChanges();
} }
}, },
@@ -157,4 +174,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
} }
} }
} }
onChartInit(ec: any) {
this.echartsInstance = ec;
}
resizeChart() {
if (this.echartsInstance) {
this.echartsInstance.resize();
}
}
} }

10
web-app/src/app/routes/monitor/monitor-list/monitor-list.component.html
View File

@@ -55,19 +55,19 @@
> >
<thead> <thead>
<tr> <tr>
<th nzAlign="center" nzLeft nzWidth="60px" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th> <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="checkedAll" (nzCheckedChange)="onAllChecked($event)"></th>
<th nzAlign="center">监控名称</th> <th nzAlign="center" nzLeft>监控名称</th>
<th nzAlign="center">监控状态</th> <th nzAlign="center">监控状态</th>
<th nzAlign="center">监控Host</th> <th nzAlign="center">监控Host</th>
<th nzAlign="center">监控类型</th> <th nzAlign="center">监控类型</th>
<th nzAlign="center">最新修改时间</th> <th nzAlign="center">最新修改时间</th>
<th nzAlign="center" nzRight>操作</th> <th nzAlign="center">操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let data of fixedTable.data"> <tr *ngFor="let data of fixedTable.data">
<td nzAlign="center" nzLeft [nzChecked]="checkedMonitorIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td> <td nzAlign="center" nzLeft [nzChecked]="checkedMonitorIds.has(data.id)" (nzCheckedChange)="onItemChecked(data.id, $event)"></td>
<td nzAlign="center"> <td nzAlign="center" nzLeft>
<a [routerLink]="['/monitors/' + data.id]"> <a [routerLink]="['/monitors/' + data.id]">
<span>{{ data.name }}</span> <span>{{ data.name }}</span>
</a> </a>
@@ -102,7 +102,7 @@
</nz-tag> </nz-tag>
</td> </td>
<td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td> <td nzAlign="center">{{ data.gmtUpdate ? data.gmtUpdate : data.gmtCreate }}</td>
<td nzAlign="center" nzRight> <td nzAlign="center">
<button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip nzTooltipTitle="修改监控"> <button nz-button nzType="primary" (click)="onEditOneMonitor(data.id)" nz-tooltip nzTooltipTitle="修改监控">
<i nz-icon nzType="edit" nzTheme="outline"></i> <i nz-icon nzType="edit" nzTheme="outline"></i>
</button> </button>

2
web-app/src/environments/environment.ts
View File

@@ -11,7 +11,7 @@ export const environment = {
production: false, production: false,
useHash: false, useHash: false,
api: { api: {
baseUrl: 'http://localhost:8080/', baseUrl: 'http://localhost:1157/',
refreshTokenEnabled: true refreshTokenEnabled: true
}, },
modules: [DelonMockModule.forRoot({ data: MOCK_DATA })] modules: [DelonMockModule.forRoot({ data: MOCK_DATA })]