[monitor]feature dashboard仪表盘重构 (#13)
This commit is contained in:
tomsun28
@@ -6,6 +6,9 @@ import { EChartsOption } from 'echarts';
|
||||
import { NzMessageService } from 'ng-zorro-antd/message';
|
||||
import { fromEvent } from 'rxjs';
|
||||
|
||||
import { Alert } from '../../pojo/Alert';
|
||||
import { AppCount } from '../../pojo/AppCount';
|
||||
import { AlertService } from '../../service/alert.service';
|
||||
import { MonitorService } from '../../service/monitor.service';
|
||||
|
||||
@Component({
|
||||
@@ -18,21 +21,31 @@ export class DashboardComponent implements OnInit, OnDestroy {
|
||||
constructor(
|
||||
private msg: NzMessageService,
|
||||
private monitorSvc: MonitorService,
|
||||
private alertSvc: AlertService,
|
||||
@Inject(ALAIN_I18N_TOKEN) private i18nSvc: I18NService,
|
||||
private router: Router,
|
||||
private cdr: ChangeDetectorRef
|
||||
) {}
|
||||
|
||||
// start 大类别数量信息
|
||||
appCountService: AppCount = new AppCount();
|
||||
appCountOs: AppCount = new AppCount();
|
||||
appCountDb: AppCount = new AppCount();
|
||||
appCountCustom: AppCount = new AppCount();
|
||||
|
||||
// start 数量全局概览
|
||||
interval$!: number;
|
||||
appsCountLoading: boolean = true;
|
||||
appsCountTableData: any[] = [];
|
||||
appsCountEChartOption!: EChartsOption;
|
||||
appsCountTheme!: EChartsOption;
|
||||
echartsInstance!: any;
|
||||
appsCountEchartsInstance!: any;
|
||||
pageResize$!: any;
|
||||
|
||||
// 告警列表
|
||||
alerts!: Alert[];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.appsCountLoading = true;
|
||||
this.appsCountTheme = {
|
||||
title: {
|
||||
text: '监控总览',
|
||||
@@ -112,8 +125,86 @@ export class DashboardComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
]
|
||||
};
|
||||
this.alertsTheme = {
|
||||
title: {
|
||||
subtext: '告警等级分布',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['警告告警', '严重告警', '紧急告警']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '告警数量',
|
||||
type: 'bar',
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
// 设置单个柱子的样式
|
||||
itemStyle: {
|
||||
color: '#ffb72b',
|
||||
shadowColor: '#91cc75'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
color: '#fa6202',
|
||||
shadowColor: '#91cc75'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
color: '#dc1313',
|
||||
shadowColor: '#91cc75'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.alertsDealTheme = {
|
||||
title: {
|
||||
subtext: '告警处理',
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: '{b} : {c}%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '告警处理率',
|
||||
type: 'gauge',
|
||||
progress: {
|
||||
show: true
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
formatter: '{value}'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
name: '告警处理率'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.appsCountLoading = true;
|
||||
this.alertsLoading = true;
|
||||
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 => {
|
||||
@@ -129,12 +220,21 @@ export class DashboardComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
|
||||
refresh(): void {
|
||||
this.refreshAppsCount();
|
||||
this.refreshAlertContentList();
|
||||
this.refreshAlertSummary();
|
||||
}
|
||||
refreshAppsCount(): void {
|
||||
this.appCountService = new AppCount();
|
||||
this.appCountOs = new AppCount();
|
||||
this.appCountDb = new AppCount();
|
||||
this.appCountCustom = new AppCount();
|
||||
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;
|
||||
let apps: AppCount[] = message.data.apps;
|
||||
this.appsCountTableData = [];
|
||||
let total = 0;
|
||||
apps.forEach(app => {
|
||||
@@ -147,6 +247,36 @@ export class DashboardComponent implements OnInit, OnDestroy {
|
||||
value: app.size
|
||||
});
|
||||
total = total + (app.size ? app.size : 0);
|
||||
switch (app.category) {
|
||||
case 'service':
|
||||
this.appCountService.size += app.size;
|
||||
this.appCountService.availableSize += app.availableSize;
|
||||
this.appCountService.unAvailableSize += app.unAvailableSize;
|
||||
this.appCountService.unManageSize += app.unManageSize;
|
||||
this.appCountService.unReachableSize += app.unReachableSize;
|
||||
break;
|
||||
case 'db':
|
||||
this.appCountDb.size += app.size;
|
||||
this.appCountDb.availableSize += app.availableSize;
|
||||
this.appCountDb.unAvailableSize += app.unAvailableSize;
|
||||
this.appCountDb.unManageSize += app.unManageSize;
|
||||
this.appCountDb.unReachableSize += app.unReachableSize;
|
||||
break;
|
||||
case 'os':
|
||||
this.appCountOs.size += app.size;
|
||||
this.appCountOs.availableSize += app.availableSize;
|
||||
this.appCountOs.unAvailableSize += app.unAvailableSize;
|
||||
this.appCountOs.unManageSize += app.unManageSize;
|
||||
this.appCountOs.unReachableSize += app.unReachableSize;
|
||||
break;
|
||||
case 'custom':
|
||||
this.appCountCustom.size += app.size;
|
||||
this.appCountCustom.availableSize += app.availableSize;
|
||||
this.appCountCustom.unAvailableSize += app.unAvailableSize;
|
||||
this.appCountCustom.unManageSize += app.unManageSize;
|
||||
this.appCountCustom.unReachableSize += app.unReachableSize;
|
||||
break;
|
||||
}
|
||||
});
|
||||
// @ts-ignore
|
||||
this.appsCountTheme.series[0].data = [{ value: total, name: '监控总量' }];
|
||||
@@ -158,9 +288,11 @@ export class DashboardComponent implements OnInit, OnDestroy {
|
||||
this.appsCountEChartOption = this.appsCountTheme;
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
this.appsCountLoading = false;
|
||||
},
|
||||
error => {
|
||||
console.error(error);
|
||||
this.appsCountLoading = false;
|
||||
dashboard$.unsubscribe();
|
||||
}
|
||||
);
|
||||
@@ -175,12 +307,113 @@ export class DashboardComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
onChartInit(ec: any) {
|
||||
this.echartsInstance = ec;
|
||||
onAppsCountChartInit(ec: any) {
|
||||
this.appsCountEchartsInstance = ec;
|
||||
}
|
||||
onAlertNumChartInit(ec: any) {
|
||||
this.alertsEchartsInstance = ec;
|
||||
}
|
||||
onAlertRateChartInit(ec: any) {
|
||||
this.alertsDealEchartsInstance = ec;
|
||||
}
|
||||
resizeChart() {
|
||||
if (this.echartsInstance) {
|
||||
this.echartsInstance.resize();
|
||||
if (this.appsCountEchartsInstance) {
|
||||
this.appsCountEchartsInstance.resize();
|
||||
}
|
||||
if (this.alertsEchartsInstance) {
|
||||
this.alertsEchartsInstance.resize();
|
||||
}
|
||||
if (this.alertsDealEchartsInstance) {
|
||||
this.alertsDealEchartsInstance.resize();
|
||||
}
|
||||
}
|
||||
|
||||
// start 告警分布
|
||||
alertsEChartOption!: EChartsOption;
|
||||
alertsTheme!: EChartsOption;
|
||||
alertsEchartsInstance!: any;
|
||||
alertsLoading: boolean = true;
|
||||
|
||||
refreshAlerts(): void {
|
||||
this.alertsEChartOption = this.alertsTheme;
|
||||
this.cdr.detectChanges();
|
||||
this.alertsLoading = false;
|
||||
}
|
||||
|
||||
// start 告警处理率
|
||||
alertsDealEChartOption!: EChartsOption;
|
||||
alertsDealTheme!: EChartsOption;
|
||||
alertsDealEchartsInstance!: any;
|
||||
alertsDealLoading: boolean = true;
|
||||
|
||||
refreshAlertContentList(): void {
|
||||
let alertsInit$ = this.alertSvc.getAlerts(0, 4).subscribe(
|
||||
message => {
|
||||
if (message.code === 0) {
|
||||
let page = message.data;
|
||||
this.alerts = page.content;
|
||||
} else {
|
||||
console.warn(message.msg);
|
||||
}
|
||||
alertsInit$.unsubscribe();
|
||||
},
|
||||
error => {
|
||||
alertsInit$.unsubscribe();
|
||||
console.error(error.msg);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
refreshAlertSummary(): void {
|
||||
let alertSummaryInit$ = this.alertSvc.getAlertsSummary().subscribe(
|
||||
message => {
|
||||
if (message.code === 0) {
|
||||
let summary = message.data;
|
||||
// @ts-ignore
|
||||
this.alertsTheme.series[0].data = [
|
||||
{
|
||||
value: summary.priorityWarningNum,
|
||||
itemStyle: {
|
||||
color: '#ffb72b',
|
||||
shadowColor: '#91cc75'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: summary.priorityCriticalNum,
|
||||
itemStyle: {
|
||||
color: '#fa6202',
|
||||
shadowColor: '#91cc75'
|
||||
}
|
||||
},
|
||||
{
|
||||
value: summary.priorityEmergencyNum,
|
||||
itemStyle: {
|
||||
color: '#dc1313',
|
||||
shadowColor: '#91cc75'
|
||||
}
|
||||
}
|
||||
];
|
||||
// @ts-ignore
|
||||
this.alertsDealTheme.series[0].data = [
|
||||
{
|
||||
value: summary.rate,
|
||||
name: '告警处理率'
|
||||
}
|
||||
];
|
||||
this.alertsEChartOption = this.alertsTheme;
|
||||
this.alertsDealEChartOption = this.alertsDealTheme;
|
||||
this.cdr.detectChanges();
|
||||
} else {
|
||||
console.warn(message.msg);
|
||||
}
|
||||
alertSummaryInit$.unsubscribe();
|
||||
},
|
||||
error => {
|
||||
alertSummaryInit$.unsubscribe();
|
||||
this.alertsDealLoading = false;
|
||||
this.alertsLoading = false;
|
||||
console.error(error.msg);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user