Skip to content

S
smart
Commit f91ff121 authored by wangqinghua's avatar wangqinghua
Browse files
Options

服务器

parent 783a7ebc
Hide whitespace changes
Inline Side-by-side
Showing with 421 additions and 192 deletions
src/main/webapp/app/component/topology-view/topology-view.component.html
View file @ f91ff121
<div #topologyBody id="topology-body" class="topology-context">
<div #topologyBody id="topology-body" class="topology-context" style="height: 400px;">
<nz-spin [nzSpinning]="isLoading">
<canvas class="topology-context" id="topology-canvas" width="1190" height="520" #topologyCanvas>
您的浏览器不支持HTML5!
......
src/main/webapp/app/component/topology-view/topology-view.component.ts
View file @ f91ff121
......@@ -6,7 +6,12 @@ declare let editor: any;
@Component({
selector: 'smart-topology-view',
templateUrl: './topology-view.component.html',
styles: []
styles: [
`
.topology-context {
background: rgba(0, 0, 0, 0.2);
}`
]
})
export class TopologyViewComponent implements OnInit, AfterViewInit {
@ViewChild('topologyCanvas') topologyCanvas: ElementRef;
......
src/main/webapp/app/home/home.component.html
View file @ f91ff121
......@@ -91,7 +91,7 @@
</ng-container>
</nz-select>
</div>
<div class="host-item-content" >
<div class="host-item-content">
<nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="charTrendOption" style="height: 360px;width: 100%"></div>
</nz-spin>
......@@ -110,8 +110,16 @@
<nz-row class="table-content">
<nz-col class="text-center" nzSpan="3">状态</nz-col>
<nz-col nzSpan="7">{{flow.name}}</nz-col>
<nz-col nzSpan="7">{{flow.cpuUseRate}}</nz-col>
<nz-col nzSpan="7">{{flow.vmUseRate}}</nz-col>
<nz-col nzSpan="7">
<div class="width-host">
<div class="space" [style.width]="flow.cpuUseRate + '%'"></div>
</div>
</nz-col>
<nz-col nzSpan="7">
<div class="width-host">
<div class="space" [style.width]="flow.vmUseRate + '%'"></div>
</div>
</nz-col>
</nz-row>
</ng-container>
</div>
......@@ -119,7 +127,7 @@
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">资源数量统计</div>
<div class="host-item-content" style="height: 500px">
<div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>
<!-- <div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>-->
<div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
</div>
</nz-col>
......@@ -145,34 +153,37 @@
<div class="host-item-table" style="height: 500px">
<nz-row class="text-center table-title">
<nz-col nzSpan="8">资源名称</nz-col>
<nz-col nzSpan="8">发送利用率</nz-col>
<nz-col nzSpan="8">接受利用率</nz-col>
<nz-col nzSpan="16">发送利用率</nz-col>
</nz-row>
<ng-container *ngFor="let flow of flowListPre">
<nz-row class="table-content">
<nz-col nzSpan="8">{{flow.name}}</nz-col>
<nz-col nzSpan="8">{{flow.useRate}}</nz-col>
<nz-col nzSpan="8">{{flow.useRate}}</nz-col>
<nz-col nzSpan="16">
<div class="width-host">
<div class="space" [style.width]="flow.useRate *100 + '%'"></div>
</div>
</nz-col>
</nz-row>
</ng-container>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="16">
<div class="host-item-title">网络拓扑图</div>
<div class="time-group" style="top: 18px;">
<nz-select style="width: 200px;" nzPlaceHolder="选择拓扑图" [(ngModel)]="topoId" (ngModelChange)="getDetail($event)">
<div class="time-group" style="top: 18px;">
<nz-select style="width: 200px;" nzPlaceHolder="选择拓扑图" [(ngModel)]="topoId"
(ngModelChange)="getDetail($event)">
<ng-container *ngFor="let item of dataSet">
<nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
</ng-container>
</nz-select>
</div>
<div class="host-item-content">
<smart-topology-view #smartTopologyView></smart-topology-view>
<smart-topology-view #smartTopologyView></smart-topology-view>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="8">
<div class="host-item-title">业务系统安全运行天数</div>
<div class="host-item-table" style="height: 500px">
<div class="host-item-table" style="height: 400px">
<nz-row class="text-center table-title">
<nz-col nzSpan="12">系统名称</nz-col>
<nz-col nzSpan="12">运行天数</nz-col>
......
src/main/webapp/app/home/home.component.ts
View file @ f91ff121
......@@ -11,6 +11,7 @@ import {Router} from '@angular/router';
import {CommonService} from '../shared/common/common.service';
import {AnalysisService} from '../analysis/analysis.service';
import {TopologyViewComponent} from '../component/topology-view/topology-view.component';
import {TopologyService} from '../netTopology/topology.service';
@Component({
selector: 'jhi-home',
......@@ -95,7 +96,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
private overAllSer: OverAllService, private message: NzMessageService,
private alarmSer: AlarmService, private renderer: Renderer2,
private layoutSer: LayoutService,
private principal: Principal,
private principal: Principal,private topologySer:TopologyService,
private eventManager: JhiEventManager, private analysisSer: AnalysisService,
private router: Router, private commonSer: CommonService,
) {
......@@ -112,6 +113,8 @@ export class HomeComponent implements OnInit, AfterViewInit {
this.countOrde();
this.findSafeRunDay();
this.getList();
}
ngAfterViewInit() {
......@@ -131,6 +134,19 @@ export class HomeComponent implements OnInit, AfterViewInit {
);
}
//获取拓扑图列表
getList() {
this.topologySer.findAll().subscribe(
(res) => {
if (res.errCode == 10000) {
this.dataSet = res.data;
} else {
this.message.create('error', res.errMsg);
}
}
);
}
//主机组中统计
countGroupItem() {
this.getAlarmTrend();
......
src/main/webapp/app/overAll/modal/database/database.component.html
View file @ f91ff121
<nz-spin [nzSpinning]="isLoading">
<div>
<nz-row>
<nz-col nzSpan="12">
<div>
<nz-row>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">数据库</p>
<nz-row class="padding-15 host-item-content">
<ng-container *ngFor="let database of databaseList">
<nz-col nzSpan="8" class="text-center">
<img src="../../../../content/images/database.png">
</nz-col>
<nz-col nzSpan="16">
<p><span class="database-name">{{database.name}}</span></p>
<nz-row class="margin-top-8">
<nz-col class="gray-font-color text-right" nzSpan="8">大小：</nz-col>
<nz-col class="blue-font-color"
nzSpan="16">{{database.storageSize}}</nz-col>
<nz-col class="gray-font-color text-right" nzSpan="8">版本：</nz-col>
<nz-col class="blue-font-color" nzSpan="16">{{database.version}}</nz-col>
</nz-row>
</nz-col>
<div>
<nz-row>
<nz-col nzSpan="12">
<div>
<nz-row>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">数据库</p>
<nz-row class="padding-15 host-item-content">
<ng-container *ngFor="let database of databaseList">
<nz-col nzSpan="8" class="text-center">
<img src="../../../../content/images/database.png">
</nz-col>
<nz-col nzSpan="16">
<p><span class="database-name">{{database.name}}</span></p>
<nz-row class="margin-top-8">
<nz-col class="gray-font-color text-right" nzSpan="8">大小：</nz-col>
<nz-col class="blue-font-color"
nzSpan="16">{{database.storageSize}}</nz-col>
<nz-col class="gray-font-color text-right" nzSpan="8">版本：</nz-col>
<nz-col class="blue-font-color" nzSpan="16">{{database.version}}</nz-col>
</nz-row>
</nz-col>
</ng-container>
</nz-row>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row>
<ng-container *ngFor="let item of databaseDetail">
<nz-col nzSpan="14">{{item.name}}：</nz-col>
<nz-col nzSpan="10">{{item.val}}</nz-col>
</ng-container>
</nz-row>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row>
<ng-container *ngFor="let item of databaseDetail">
<nz-col nzSpan="14">{{item.name}}：</nz-col>
<nz-col nzSpan="10">{{item.val}}</nz-col>
</ng-container>
</nz-row>
</div>
</nz-col>
</nz-row>
</div>
<div>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">
告警总数趋势
</div>
<div class="host-item-content">
<nz-radio-group class="time-group" [(ngModel)]="timeTypeFlow" (ngModelChange)="changeTypeFlow()">
<label nz-radio-button nzValue="3">三天</label>
<label nz-radio-button nzValue="4">一周</label>
<label nz-radio-button nzValue="5">一月</label>
</nz-radio-group>
<nz-spin [nzSpinning]="isFlowLoading">
<div echarts [options]="charTrendOption" style="height: 400px;width: 100%"></div>
</nz-spin>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-content">
<nz-row>
<nz-col nzSpan="4" style="position: relative;height: 380px;">
<div class="dataChart">
<p>MTTR</p>
<p class="text-right">{{indexDetail?.mttr + 'h'}}</p>
<p>MTBF</p>
<p class="text-right">{{indexDetail?.mtbf + 'h'}}</p>
<p>MTTF</p>
<p class="text-right">{{indexDetail?.mttf + 'h'}}</p>
<p>最近一次宕机时间</p>
<p class="text-right">{{indexDetail?.downTime}}</p>
<p>宕机次数</p>
<p class="text-right">{{indexDetail?.downCount}}</p>
</div>
</nz-col>
<nz-col nzSpan="20" class="padding-left-10" style="position: relative;">
<div>
<nz-select class="time-group" nzPlaceHolder="选择分组"
(ngModelChange)="changeTypeDatabase()" [(ngModel)]="timeTypeDatabase">
<nz-option nzLabel="最近一小时" nzValue="0"></nz-option>
<nz-option nzLabel="最近一天" nzValue="2"></nz-option>
<nz-option nzLabel="最近三天" nzValue="3"></nz-option>
<nz-option nzLabel="最近一周" nzValue="4"></nz-option>
</nz-select>
</div>
<nz-spin [nzSpinning]="isDatabaseLoading">
<div echarts [options]="chartDatabaseOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</nz-col>
</div>
</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">
告警总数趋势
</div>
<div class="host-item-content">
<nz-radio-group class="time-group" [(ngModel)]="timeTypeFlow" (ngModelChange)="changeTypeFlow()">
<label nz-radio-button nzValue="3">三天</label>
<label nz-radio-button nzValue="4">一周</label>
<label nz-radio-button nzValue="5">一月</label>
</nz-radio-group>
<nz-spin [nzSpinning]="isFlowLoading">
<div echarts [options]="charTrendOption" style="height: 400px;width: 100%"></div>
</nz-spin>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-content">
<nz-row>
<nz-col nzSpan="4" style="position: relative;height: 380px;">
<div class="dataChart">
<p>MTTR</p>
<p class="text-right">{{indexDetail?.mttr + 'h'}}</p>
<p>MTBF</p>
<p class="text-right">{{indexDetail?.mtbf + 'h'}}</p>
<p>MTTF</p>
<p class="text-right">{{indexDetail?.mttf + 'h'}}</p>
<p>最近一次宕机时间</p>
<p class="text-right">{{indexDetail?.downTime}}</p>
<p>宕机次数</p>
<p class="text-right">{{indexDetail?.downCount}}</p>
</div>
</nz-col>
<nz-col nzSpan="20" class="padding-left-10" style="position: relative;">
<div>
<nz-select class="time-group" nzPlaceHolder="选择分组"
(ngModelChange)="changeTypeDatabase()" [(ngModel)]="timeTypeDatabase">
<nz-option nzLabel="最近一小时" nzValue="0"></nz-option>
<nz-option nzLabel="最近一天" nzValue="2"></nz-option>
<nz-option nzLabel="最近三天" nzValue="3"></nz-option>
<nz-option nzLabel="最近一周" nzValue="4"></nz-option>
</nz-select>
</div>
<nz-spin [nzSpinning]="isDatabaseLoading">
<div echarts [options]="chartDatabaseOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-table" style="height: 400px">
<nz-row class="text-center table-title">
<nz-col nzSpan="8">监测点信息</nz-col>
<nz-col nzSpan="8">告警信息</nz-col>
<nz-col nzSpan="8">产生时间</nz-col>
</nz-row>
<ng-container *ngFor="let event of eventList;">
<nz-row class="table-content">
<nz-col nzSpan="8">{{event.itemName}}</nz-col>
<nz-col nzSpan="8">{{event.description}}</nz-col>
<nz-col nzSpan="8">{{event.clock}}</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-table" style="height: 400px">
<nz-row class="text-center table-title">
<nz-col nzSpan="8">监测点信息</nz-col>
<nz-col nzSpan="8">告警信息</nz-col>
<nz-col nzSpan="8">产生时间</nz-col>
</nz-row>
<ng-container *ngFor="let event of eventList;">
<nz-row class="table-content">
<nz-col nzSpan="8">{{event.itemName}}</nz-col>
<nz-col nzSpan="8">{{event.description}}</nz-col>
<nz-col nzSpan="8">{{event.clock}}</nz-col>
</nz-row>
</ng-container>
</div>
</nz-col>
</nz-row>
</div>
</nz-spin>
</ng-container>
</div>
</nz-col>
</nz-row>
</div>
src/main/webapp/app/overAll/modal/server/server.component.html
View file @ f91ff121
......@@ -20,8 +20,38 @@
</nz-row>
</div>
</div>
<div class="padding-10" style="height: 40%;">
<div class="padding-10" style="height: 40%;position: relative">
<p class="host-item-title">分区</p>
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="setDiskChart($event)" [(ngModel)]="diskType">
<ng-container *ngFor="let disk of hostObj.disk;let i = index;">
<nz-option [nzLabel]="disk.name" [nzValue]="i"></nz-option>
</ng-container>
</nz-select>
</div>
<div class="host-item-content" style="height: 300px;">
<ng-container *ngIf="hostObj.disk.length > 0">
<nz-spin [nzSpinning]="isDiskLoading">
<div echarts [options]="chartDiskOption" style="height: 360px;width: 100%"></div>
<div>
<span>{{hostObj.disk[diskType].name}}</span>
</div>
<nz-row>
<nz-col nzSpan="12">总大小</nz-col>
<nz-col nzSpan="12">{{hostObj.disk[diskType].total}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="12">已用大小</nz-col>
<nz-col nzSpan="12">{{hostObj.disk[diskType].use}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="12">剩余容量</nz-col>
<nz-col nzSpan="12">{{hostObj.disk[diskType].total - hostObj.disk[diskType].use}}</nz-col>
</nz-row>
</nz-spin>
</ng-container>
</div>
</div>
<div class="padding-10" style="height: 40%;">
<nz-row>
......@@ -38,19 +68,19 @@
</nz-row>
<nz-row>
<nz-col nzSpan="8">IP地址：</nz-col>
<nz-col nzSpan="16">{{server?.ip}}</nz-col>
<nz-col nzSpan="16">{{server?.ip || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16">{{equipmentType}}</nz-col>
<nz-col nzSpan="16">{{equipmentType || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.no}}</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.no || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.person}}</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.person || '-'}}</nz-col>
</nz-row>
</div>
</nz-col>
......@@ -88,7 +118,7 @@
<div class="padding-10" style="height: 50%;position: relative">
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTrend(null)" [(ngModel)]="trendObj.type">
(ngModelChange)="changeTrend(trendObj.type)" [(ngModel)]="trendObj.type">
<ng-container *ngFor="let flow of targetFlow">
<nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option>
</ng-container>
......@@ -103,9 +133,11 @@
<div class="host-item-title">
指标趋势
</div>
<nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
</nz-spin>
<div class="host-item-content">
<nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</div>
</div>
<div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title">
......@@ -119,9 +151,11 @@
</ng-container>
</nz-select>
</div>
<nz-spin [nzSpinning]="isHistoryLoading">
<div echarts [options]="chartHistoryOption" style="height: 360px;width: 100%"></div>
</nz-spin>
<div class="host-item-content">
<nz-spin [nzSpinning]="isHistoryLoading">
<div echarts [options]="chartHistoryOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</div>
</div>
</nz-col>
</nz-row>
......
src/main/webapp/app/overAll/modal/server/server.component.ts
View file @ f91ff121
......@@ -24,8 +24,8 @@ export class ServerComponent implements OnInit {
{'label': '最近三天', value: '3'},
{'label': '最近一周', value: '4'},
];
timeTypeTrend;
timeTypeHistory;
timeTypeTrend = '0';
timeTypeHistory = '0';
isTrendLoading = false;
chartTrendOption;
......@@ -45,12 +45,17 @@ export class ServerComponent implements OnInit {
};
hostObj = {
disk: null,
disk: [],
used: null,
cpu: null,
losed: null,
response: null
};
isDiskLoading = false;
chartDiskOption;
diskType;
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService,
private hostCom: HostComponent) {
......@@ -62,7 +67,9 @@ export class ServerComponent implements OnInit {
ngOnInit() {
this.getDetail();
this.getTrend();
this.changeHistory('0');
this.changeTrend('0');
this.getDisk();
}
getDetail() {
......@@ -74,17 +81,11 @@ export class ServerComponent implements OnInit {
this.server = res.data[0];
}
);
//磁盘使用率
this.overAllSer.disks(data).subscribe(
(res) => {
this.hostObj.disk = res.data;
}
);
//内存使用率
this.overAllSer.used(data).subscribe(
(res) => {
if (res.data) {
this.hostObj.used = res.data;
this.hostObj.used = res.data.used;
} else {
this.hostObj.used = 0;
}
......@@ -94,7 +95,7 @@ export class ServerComponent implements OnInit {
this.overAllSer.cupUsed(data).subscribe(
(res) => {
if (res.data) {
this.hostObj.cpu = res.data;
this.hostObj.cpu = res.data.cpuUsed;
} else {
this.hostObj.cpu = 0;
}
......@@ -110,6 +111,73 @@ export class ServerComponent implements OnInit {
}
}
);
//响应时间
this.overAllSer.responseTime(this.hostId).subscribe(
(res) => {
if (res.data) {
this.hostObj.response = res.data.response;
} else {
this.hostObj.response = 0;
}
}
);
}
// 分区
getDisk() {
const data = {
hostId: this.hostId,
};
this.isDiskLoading = true;
//磁盘使用率
this.overAllSer.disks(data).subscribe(
(res) => {
this.hostObj.disk = res.data.disks;
if (this.hostObj.disk.length > 0) {
this.setDiskChart(0);
}
}
);
}
setDiskChart(index) {
const data = this.hostObj.disk[index];
this.chartDiskOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: data.used, name: '已使用'},
{value: data.total - data.used, name: '未使用'},
]
}
]
};
}
//获取趋势数据
......@@ -149,16 +217,32 @@ export class ServerComponent implements OnInit {
},
type: 'value'
},
series: data.map(e => {
return e.value;
})
series: [
{
data: data.map(e => {
return e.val;
}),
type: 'line',
name: '',
}
]
};
this.isTrendLoading = false;
}
//获取历史趋势
getHistory() {
const data = {
type: 'icmpping',
hostid: this.hostId,
startTime: this.historyObj.startTime,
endTime: this.historyObj.endTime
};
this.overAllSer.findChartByKey(data).subscribe(
(res) => {
this.setHistoryChart(res.data);
}
);
}
//设置指标趋势
......@@ -183,14 +267,19 @@ export class ServerComponent implements OnInit {
},
type: 'value'
},
series: data.map(e => {
return e.value;
})
series: [
{
data: data.map(e => {
return e.val;
}),
type: 'line'
}
]
};
this.isHistoryLoading = false;
}
changeTrend(e){
changeTrend(e) {
this.isTrendLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.trendObj.startTime = timeObj.startTime;
......@@ -198,7 +287,7 @@ export class ServerComponent implements OnInit {
this.getTrend();
}
changeHistory(e){
changeHistory(e) {
this.isHistoryLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.historyObj.startTime = timeObj.startTime;
......
src/main/webapp/app/overAll/modal/switch/switch.component.html
View file @ f91ff121
......@@ -2,8 +2,21 @@
<nz-col nzSpan="8">
<div class="padding-10" style="height: 30%;">
<p class="host-item-title">关键指标</p>
<div class="host-item-content" style="height: 100%;">
<div class="host-item-content" style="height:100px">
<nz-row>
<nz-col nzSpan="12">
<p style="text-align: center">cpu利用率</p>
<div class="width-host">
<div class="space" [style.width]="this.hostObj.cpu + '%'"></div>
</div>
</nz-col>
<nz-col nzSpan="12">
<p style="text-align: center;color: #b7d1f1;">内存使用率</p>
<div class="width-host">
<div class="space" [style.width]="this.hostObj.used + '%'"></div>
</div>
</nz-col>
</nz-row>
</div>
</div>
<div class="padding-10" style="height: 35%;">
......@@ -12,21 +25,26 @@
<nz-row>
<nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16">{{switch?.waringName}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">名称：</nz-col>
<nz-col nzSpan="16">{{switch?.name}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">IP地址：</nz-col>
<nz-col nzSpan="16">{{switch?.ip}}</nz-col>
<nz-col nzSpan="16">{{switch?.ip || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16">交换机</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">{{switch?.inventory?.no}}</nz-col>
<nz-col nzSpan="16">{{switch?.inventory?.no || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">{{switch?.inventory?.person}}</nz-col>
<nz-col nzSpan="16">{{switch?.inventory?.person || '-'}}</nz-col>
</nz-row>
</div>
</div>
......@@ -35,19 +53,19 @@
<div class="host-item-content" style="height: 100%;">
<nz-row>
<nz-col nzSpan="8">CPU利用率(%)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="16">{{hostObj.cpu}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">Ping延时(ms)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="16">{{hostObj.response}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">丢包数：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="16">{{hostObj.losed}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">内存利用率(%)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8">总流速(Kbps)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="16">{{hostObj.used}}</nz-col>
</nz-row>
</div>
</div>
......@@ -56,49 +74,52 @@
<div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title">指标趋势</div>
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTimeTarget(null)" [(ngModel)]="trendObj.type">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTimeTarget(timeTypeTrend)" [(ngModel)]="trendObj.type">
<ng-container *ngFor="let flow of targetFlow">
<nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option>
</ng-container>
</nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择时间"
<nz-select style="width: 150px;" nzPlaceHolder="选择时间"
(ngModelChange)="changeTimeTarget($event)" [(ngModel)]="timeTypeTrend">
<ng-container *ngFor="let time of timeList">
<nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
</ng-container>
</nz-select>
</div>
<nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
</nz-spin>
<div class="host-item-content" style="height: 300px">
<nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</div>
</div>
<div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title">网卡流量</div>
<div class="time-group" style="top: 18px;">
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择接口"
(ngModelChange)="changeTimeFlow(null)" [(ngModel)]="netWorkdObj.itemName">
(ngModelChange)="changeTimeFlow(timeTypeFLow)" [(ngModel)]="netWorkdObj.itemName">
<ng-container *ngFor="let interface of interfaceList">
<nz-option [nzLabel]="interface" [nzValue]="interface"></nz-option>
</ng-container>
</nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择单位"
(ngModelChange)="changeTimeFlow(null)" [(ngModel)]="netWorkdObj.unit">
(ngModelChange)="changeTimeFlow(timeTypeFLow)" [(ngModel)]="netWorkdObj.unit">
<ng-container *ngFor="let unit of unitList">
<nz-option [nzLabel]="unit.label" [nzValue]="unit.value"></nz-option>
</ng-container>
</nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择时间"
(ngModelChange)="changeTimeFlow(null)" [(ngModel)]="timeTypeFLow">
(ngModelChange)="changeTimeFlow($event)" [(ngModel)]="timeTypeFLow">
<ng-container *ngFor="let time of timeList">
<nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
</ng-container>
</nz-select>
</div>
<nz-spin [nzSpinning]="isNetworkLoading">
<div echarts [options]="chartNetworkOption" style="height: 360px;width: 100%"></div>
</nz-spin>
<div class="host-item-content" style="height: 300px">
<nz-spin [nzSpinning]="isNetworkLoading">
<div echarts [options]="chartNetworkOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</div>
</div>
</nz-col>
</nz-row>
......
src/main/webapp/app/overAll/modal/switch/switch.component.ts
View file @ f91ff121
......@@ -32,6 +32,7 @@ export class SwitchComponent implements OnInit {
isNetworkLoading = false;
chartNetworkOption;
isTrendLoading = false;
chartTrendOption;
......@@ -48,6 +49,14 @@ export class SwitchComponent implements OnInit {
endTime: ''
};
hostObj = {
disk: null,
used: null,
cpu: null,
losed: null,
response:null
};
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService) {
this.routerInfo.queryParams.subscribe(queryParams => {
......@@ -64,11 +73,60 @@ export class SwitchComponent implements OnInit {
this.overAllSer.findNetworkCard(this.hostId).subscribe(
(res) => {
this.interfaceList = res.data;
this.netWorkdObj.itemName = this.interfaceList[0];
this.changeTimeFlow('0');
if(this.interfaceList && this.interfaceList.length > 0){
this.netWorkdObj.itemName = this.interfaceList[0];
this.changeTimeFlow('0');
}
}
);
this.changeTimeTarget('0');
this.getDetail();
}
getDetail() {
const data = {
hostId: this.hostId,
};
//内存使用率
this.overAllSer.used(data).subscribe(
(res) => {
if (res.data) {
this.hostObj.used = res.data.used;
} else {
this.hostObj.used = 0;
}
}
);
//cpu使用率
this.overAllSer.cupUsed(data).subscribe(
(res) => {
if (res.data) {
this.hostObj.cpu = res.data.cpuUsed;
} else {
this.hostObj.cpu = 0;
}
}
);
//丢包率
this.overAllSer.losed(this.hostId).subscribe(
(res) => {
if (res.data) {
this.hostObj.losed = res.data.losed;
} else {
this.hostObj.losed = 0;
}
}
);
//响应时间
this.overAllSer.responseTime(this.hostId).subscribe(
(res)=>{
if (res.data) {
this.hostObj.response = res.data.response;
} else {
this.hostObj.response = 0;
}
}
)
}
//网卡流量
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment