Skip to content

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

服务器

parent ebc74086
Show whitespace changes
Inline Side-by-side
Showing with 1311 additions and 123 deletions
src/main/webapp/app/app.constants.ts
View file @ 9c0a7f77
...@@ -23,9 +23,9 @@ export const ThemeList = [ ...@@ -23,9 +23,9 @@ export const ThemeList = [
//流量单位 //流量单位
export const UnitList = [ export const UnitList = [
{'label': 'bps', value: 'bps'}, {'label': 'bps', value: 'bps'},
{'label': 'Kbps', value: 'kbps'}, {'label': 'Kbps', value: 'Kbps'},
{'label': 'Mbps', value: 'mbps'}, {'label': 'Mbps', value: 'Mbps'},
{'label': 'Gbps', value: 'gbps'}, {'label': 'Gbps', value: 'Gbps'},
]; ];
//主机指标 //主机指标
......
src/main/webapp/app/app.module.ts
View file @ 9c0a7f77
import './vendor.ts'; import './vendor.ts';
import {NgModule, Injector, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core'; import {NgModule, Injector, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { HTTP_INTERCEPTORS } from '@angular/common/http'; import {HTTP_INTERCEPTORS} from '@angular/common/http';
import { Ng2Webstorage, LocalStorageService, SessionStorageService } from 'ngx-webstorage'; import {Ng2Webstorage, LocalStorageService, SessionStorageService} from 'ngx-webstorage';
import { JhiEventManager } from 'ng-jhipster'; import {JhiEventManager} from 'ng-jhipster';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpModule } from "@angular/http"; import {HttpModule} from '@angular/http';
import { AuthInterceptor } from './blocks/interceptor/auth.interceptor'; import {AuthInterceptor} from './blocks/interceptor/auth.interceptor';
import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor'; import {AuthExpiredInterceptor} from './blocks/interceptor/auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor'; import {ErrorHandlerInterceptor} from './blocks/interceptor/errorhandler.interceptor';
import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor'; import {NotificationInterceptor} from './blocks/interceptor/notification.interceptor';
import { BootappSharedModule, UserRouteAccessService } from './shared'; import {BootappSharedModule, UserRouteAccessService} from './shared';
import { PaginationConfig } from './blocks/config/uib-pagination.config'; import {PaginationConfig} from './blocks/config/uib-pagination.config';
import { FileUploadModule } from 'ng2-file-upload'; import {FileUploadModule} from 'ng2-file-upload';
import {CommonModule, LocationStrategy, PathLocationStrategy} from '@angular/common'; import {CommonModule, LocationStrategy, PathLocationStrategy} from '@angular/common';
import { LayoutService } from "./layouts/layout.service"; import {LayoutService} from './layouts/layout.service';
import { NgxEchartsModule } from "ngx-echarts"; import {NgxEchartsModule} from 'ngx-echarts';
import { import {
FooterComponent, FooterComponent,
...@@ -24,13 +24,14 @@ import { ...@@ -24,13 +24,14 @@ import {
PageRibbonComponent, PageRibbonComponent,
ErrorComponent ErrorComponent
} from './layouts'; } from './layouts';
import {AppComponent} from "./app.component"; import {AppComponent} from './app.component';
import {RouterModule} from "@angular/router"; import {RouterModule} from '@angular/router';
import {DEBUG_INFO_ENABLED} from "./app.constants"; import {DEBUG_INFO_ENABLED} from './app.constants';
import { route } from "./app.route"; import {route} from './app.route';
import {LoginGuard} from "./shared/common/loginGuard"; import {LoginGuard} from './shared/common/loginGuard';
import {AppMainModule} from './app.main.module'; import {AppMainModule} from './app.main.module';
import {AppService} from './app.service'; import {AppService} from './app.service';
import {HostComponent} from './overAll/host.component';
@NgModule({ @NgModule({
imports: [ imports: [
...@@ -40,13 +41,13 @@ import {AppService} from './app.service'; ...@@ -40,13 +41,13 @@ import {AppService} from './app.service';
HttpModule, HttpModule,
BrowserAnimationsModule, BrowserAnimationsModule,
RouterModule, RouterModule,
Ng2Webstorage.forRoot({ prefix: 'smart', separator: '-'}), Ng2Webstorage.forRoot({prefix: 'smart', separator: '-'}),
BootappSharedModule, BootappSharedModule,
FileUploadModule, FileUploadModule,
CommonModule, CommonModule,
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
RouterModule.forRoot(route,{useHash: true}) RouterModule.forRoot(route, {useHash: true})
], ],
declarations: [ declarations: [
ErrorComponent, ErrorComponent,
...@@ -60,6 +61,7 @@ import {AppService} from './app.service'; ...@@ -60,6 +61,7 @@ import {AppService} from './app.service';
PaginationConfig, PaginationConfig,
LoginGuard, LoginGuard,
AppService, AppService,
HostComponent,
UserRouteAccessService, UserRouteAccessService,
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
...@@ -95,9 +97,9 @@ import {AppService} from './app.service'; ...@@ -95,9 +97,9 @@ import {AppService} from './app.service';
] ]
}, },
], ],
bootstrap: [ AppComponent ], bootstrap: [AppComponent],
schemas: [ CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA ], schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
exports:[ exports: []
]
}) })
export class BootappAppModule {} export class BootappAppModule {
}
src/main/webapp/app/overAll/basic/basic-detail/basic-detail.component.ts
View file @ 9c0a7f77
...@@ -138,9 +138,772 @@ export class BasicDetailComponent implements OnInit, AfterViewInit { ...@@ -138,9 +138,772 @@ export class BasicDetailComponent implements OnInit, AfterViewInit {
} }
ngOnInit() { ngOnInit() {
this.isSpinning = true;
this.responseTime();
this.losed();
this.cpused();
this.used();
// this.inOutInfo();
//监测点
this.getList();
//历史告警
const obj = {};
this.warnList.getList(obj);
this.disks();
} }
ngAfterViewInit() { ngAfterViewInit() {
this.checkEle.nativeElement.children[1].children[0].children[0].children[2].children[0].children[0].children[2].style.marginRight = this.colorEle.nativeElement.offsetWidth +'px';
}
//平均响应时间
responseTime() {
this.overAllSer.responseTime(this.hostId).subscribe(
(res) => {
if (res.errCode == 10000) {
this.responseTimeStr = res.data.responseTime.toFixed(2);
const responseTime = this.responseTimeStr;
const other = 100 - this.responseTimeStr;
const data = [
{value: responseTime},
{value: other},
{
value: 100, name: '', tooltip: {
formatter: function(a) {
return '';
}
}
}
];
this.chartOption1 = {
title: {
text: '平均响应时间',
top: '5%',
left: '35%',
textStyle: {
color: '#999',
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#7eb6ea', '#eeeeee', 'transparent'],
series: [
{
type: 'pie',
startAngle: 180,
radius: ['50%', '85%'],
center: ['50%', '75%'],
hoverAnimation: true,
data: data,
itemStyle: {
normal: {
show: false,
position: 'center'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
}
);
}
//丢包率
losed() {
this.overAllSer.losed(this.hostId).subscribe(
(res) => {
if (res.errCode == 10000) {
this.losedStr = res.data.losed;
const losed = res.data.losed;
const other = 100 - res.data.losed;
const data = [
{value: losed},
{value: other},
{
value: 100, name: '', tooltip: {
formatter: function(a) {
return '';
}
}
}
];
this.chartOption2 = {
title: {
text: '丢包率',
top: '5%',
left: '38%',
textStyle: {
color: '#999',
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#7eb6ea', '#eeeeee', 'transparent'],
series: [
{
type: 'pie',
startAngle: 180,
radius: ['50%', '85%'],
center: ['50%', '75%'],
hoverAnimation: true,
data: data,
itemStyle: {
normal: {
show: false,
position: 'center'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
}
);
}
//cup使用率
cpused() {
const data = {
hostId: this.hostId,
};
this.overAllSer.cupUsed(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.cpuUsedStr = res.data.cpuUsed;
const losed = res.data.cpuUsed;
const other = 100 - res.data.cpuUsed;
const data = [
{value: losed},
{value: other},
{
value: 100, name: '', tooltip: {
formatter: function(a) {
return '';
}
}
}
];
this.chartOption3 = {
title: {
text: 'CPU使用率',
top: '5%',
left: '38%',
textStyle: {
color: '#999',
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#7eb6ea', '#eeeeee', 'transparent'],
series: [
{
type: 'pie',
startAngle: 180,
radius: ['50%', '85%'],
center: ['50%', '75%'],
hoverAnimation: true,
data: data,
itemStyle: {
normal: {
show: false,
position: 'center'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
} }
}
);
}
//内存使用率
used() {
const data = {
hostId: this.hostId,
};
this.overAllSer.used(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.usedStr = res.data.used;
const used = res.data.used;
const other = 100 - res.data.used;
const data = [
{value: used},
{value: other},
{
value: 100, name: '', tooltip: {
formatter: function(a) {
return '';
}
}
}
];
this.chartOption4 = {
title: {
text: '内存使用率',
top: '5%',
left: '38%',
textStyle: {
color: '#999',
fontSize: 12,
}
},
tooltip: {
trigger: 'item',
show: false,
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#7eb6ea', '#eeeeee', 'transparent'],
series: [
{
type: 'pie',
startAngle: 180,
radius: ['50%', '85%'],
center: ['50%', '75%'],
hoverAnimation: true,
data: data,
itemStyle: {
normal: {
show: false,
position: 'center'
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
}
);
}
//磁盘使用率
disks() {
const data = {
hostId: this.hostId,
};
this.overAllSer.disks(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.secondOptionLeft = {
grid: {
left: '8%',
right: '0',
bottom: '1%',
containLabel: true
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'value',
show: false,
},
yAxis: {
triggerEvent: true,
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
},
// 分割线设置
splitLine: {
show: true, //显示分割线
},
data: res.data.disks.map((item) => {
return item.name;
}),
axisLabel:res.data.disks.map((item) => {
let data = item.name;
if(data.length > 5) {
data = data.substring(0, 4) + "..";
}
return data;
}),
},
color: ['#ed7a7b', '#f2f2f2'],
series: [
{
name: '已使用',
type: 'bar',
stack: '总空间',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: (obj) => {
const item = (res.data.disks[obj.dataIndex].used / (1024 * 1024 * 1024)).toFixed(2);
return item + 'G';
}
}
},
itemStyle: {
normal: {
color: '#0D5DCB'
},
},
data: res.data.disks.map((item) => {
const pre = ( (item.used / item.total) * 100 ).toFixed(2); //已使用百分比
return pre;
})
},
{
name: '剩余空间',
type: 'bar',
stack: '总空间',
label: {
normal: {
show: true,
position: 'insideRight',
formatter: (obj) => {
const cut = (res.data.disks[obj.dataIndex].total - res.data.disks[obj.dataIndex].used);
const item = (cut / (1024 * 1024 * 1024)).toFixed(2);
return item + 'G';
}
}
},
itemStyle: {
normal: {
color: '#bfbfbf'
},
},
data: res.data.disks.map((item) => {
const pre = ( (item.total - item.used) / (item.total) * 100 ).toFixed(2); //剩余百分比
return pre;
})
},
]
};
let total = res.data.disks.map((item) => {
return item.total;
});
total = this.add(total);
let used = res.data.disks.map((item) => {
return item.used;
});
used = this.add(used);
const arr = [
{
name:"已使用",
value:used,
},
{
name:"未使用",
value:total,
}
];
this.secondOptionRight = {
title: {
text: '磁盘总体使用占比',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#3194e0','#bfbfbf'],
series: [
{
name: '',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: arr,
itemStyle: {
normal: {
label: {
position: 'inner',
show: true,
formatter: '{b} : {c} ({d}%)'
},
labelLine: {show: true}
}
},
labelLine: {
normal: {
show: false
}
},
}
]
};
} else {
this.message.info(res.errMsg);
}
this.isSpinning = false;
}
);
}
extension(){
}
add(arr) {
let total = 0;
for (let i = 0; i < arr.length; i++) {
total += arr[i];
}
return (total / 1024 / 1024 / 1024).toFixed(2);
}
//进出口流量-SNMP
inOutInfo() {
this.inOutLoading = true;
const data = {
obj:{
hostid:Number(this.hostId)
},
pageNum:this.pageNum,
pageCount:this.pageCount
}
this.overAllSer.inOutInfoSnmp(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.dataSet = res.data.data;
this.inOutLoading = false;
this.totalNumInOut = res.data.totalNum;
}else{
this.message.info(res.errMsg);
}
}
);
}
//进出口流量 翻页
changeInoutInfo(e){
this.pageNum = e;
// this.inOutInfo();
}
//添加监测点
showCheckModal() {
this.smartCheck.showAddModal(this.hostId,this.realName,'添加监测点');
}
//编辑监测点
showEditModal(item){
this.smartCheck.showEditModal(this.hostId,item.itemid,this.realName,item.templateid,'编辑监测点');
}
//添加阈值
showAddThresholdModal(item){
this.smartThreshold.showAddModal("添加阈值",item.itemid,this.realName);
}
//编辑阈值
showEditThresholdModal(item){
this.smartThreshold.showEditModal("编辑阈值",item.itemid,this.hostId,this.realName);
}
//添加or编辑监测点 之后
getList(){
this.getCheckList();
this.findItemType();
}
handleKeyCancel() {
this.isKey = false;
}
handleKeyOk() {
this.isKey = false;
}
//监测点列表
getCheckList() {
this.getCheckStatus();
this.loading = true;
const data = {
pageNum: this.pageIndex,
pageCount: pageSize,
obj:{
applicationid: this.applicationId,
hostid: this.hostId,
priorityName:this.changeStates,
name:this.searchName
}
};
this.overAllSer.findCheckByType(data).subscribe(
(res) => {
this.checkList = res.data.data;
this.totalNum = res.data.totalNum;
this.loading = false;
}
);
}
changeState(state){
this.tabNum = 1;
this.changeStates = state;
this.getCheckList();
}
//分页
change(e) {
this.pageIndex = e;
this.getCheckList();
}
changeType(item) {
this.pageIndex = 1;
if(item.name == "全部"){
this.changeStates = null;
}
this.applicationId = item.applicationid;
this.getCheckList();
}
//监测点状态
getCheckStatus() {
this.overAllSer.findItemCount(this.hostId).subscribe(
(res) => {
if(res.errCode == 10000){
this.checkStatus = res.data;
}
}
);
}
//删除监测点
deleteCheckItem(item) {
this.modalService.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认删除该监测点吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
const data = {
itemids:[item.itemid],
templateid:item.templateid
};
this.overAllSer.deleteItem(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.success('删除成功');
this.getCheckList();
} else {
this.message.error(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
//图表
showImageModal(data) {
this.isGrapha = true;
this.selectGraphadata = data;
this.getGraphDate();
}
//获取图表数据
getGraphDate(){
const data = {
date: this.datePipe.transform(this.imageSelectDate,'yyyy-MM-dd'),
itemid: this.selectGraphadata.itemid
};
this.overAllSer.findGraphData(data).subscribe(
(res) => {
if (res.errCode == 10000 && res.data.length > 0) {
const result = res.data;
this.chartOptionGrapha = {
title: {
text: this.selectGraphadata.name
},
tooltip: {
trigger: 'axis'
},
xAxis: {
data: result.map((item) => {
return item.time;
})
},
yAxis: {
splitLine: {
show: false
},
axisLabel:{ //Y轴数据
formatter:(value)=>{
return value+ " " +this.selectGraphadata.units; //负数取绝对值变正数
},
},
},
dataZoom: [{
startValue: '2014-06-01'
}, {
type: 'inside'
}],
series: {
type: 'line',
data: result.map((item) => {
return item.value ;
}),
}
};
}
}
);
}
handleImageCancel() {
this.isGrapha = false;
this.chartOptionGrapha = null;
}
//监控项分类
findItemType() {
const data = {
'hostids': []
};
data.hostids.push(this.hostId);
this.overAllSer.findItemType(data).subscribe(
(res) => {
this.itemTypeList = res.data;
const data = {
applicationid:'',
name:'全部'
};
if (null!=res.data){
this.itemTypeList.unshift(data);
}
this.itemTypeValue = '';
}
);
}
//停止/启用监控项 0 启用 1停止
updateItem(itemid, status) {
const data = {
'status': status,
'itemid': itemid
};
this.modalService.confirm({
nzTitle: '',
nzContent: '<b style="color: red;">确认修改监控项状态吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
this.overAllSer.itemUpdate(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.getCheckList();
}
this.message.info(res.errMsg);
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
//删除单个资源
showDeleteConfirm() {
this.modalService.confirm({
nzTitle: '删除',
nzContent: '<b style="color: red;">确认删除该资源吗？</b>',
nzOkText: '确定',
nzOkType: 'danger',
nzOnOk: () => {
const data = {
hostids:[]
};
data.hostids.push(this.hostId);
this.overAllSer.deleteHostPost(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.success('删除成功');
this.router.navigate(['app/main/basic']);
} else {
this.message.error(res.errMsg);
}
}
);
},
nzCancelText: '取消',
nzOnCancel: () => console.log('Cancel')
});
}
} }
src/main/webapp/app/overAll/basic/basic.component.ts
View file @ 9c0a7f77
...@@ -550,7 +550,8 @@ export class BasicComponent implements OnInit { ...@@ -550,7 +550,8 @@ export class BasicComponent implements OnInit {
} }
this.router.navigate(['app/main/'+type], { this.router.navigate(['app/main/'+type], {
queryParams: { queryParams: {
hostId: item.hostid hostId: item.hostid,
equipmentType:item.equipmentType
} }
}); });
} }
......
src/main/webapp/app/overAll/host.component.ts 0 → 100644
View file @ 9c0a7f77
import {OverAllService} from './overAll.service';
import {Injectable} from '@angular/core';
@Injectable()
export class HostComponent {
constructor(private overAllSer:OverAllService) {
}
public findHostDetail(hostId){
return this.overAllSer.findDetailed(hostId).subscribe(
(res) => {
let data = res.data[0];
}
);
}
}
src/main/webapp/app/overAll/modal/database/database.component.ts
View file @ 9c0a7f77
...@@ -240,7 +240,7 @@ export class DatabaseComponent implements OnInit { ...@@ -240,7 +240,7 @@ export class DatabaseComponent implements OnInit {
}; };
this.overAllSer.findChartData(data).subscribe( this.overAllSer.findChartData(data).subscribe(
(res) => { (res) => {
if (res.data.list && res.data.list.length > 0) { if (res.data.list) {
this.setDatabaseChart(res.data); this.setDatabaseChart(res.data);
} }
this.isDatabaseLoading = false; this.isDatabaseLoading = false;
......
src/main/webapp/app/overAll/modal/server/server.component.html
View file @ 9c0a7f77
...@@ -3,6 +3,22 @@ ...@@ -3,6 +3,22 @@
<nz-col nzSpan="12"> <nz-col nzSpan="12">
<div class="padding-10" style="height: 20%;"> <div class="padding-10" style="height: 20%;">
<p class="host-item-title">关键指标</p> <p class="host-item-title">关键指标</p>
<div class="host-item-content" style="height:100%">
<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>
<div class="padding-10" style="height: 40%;"> <div class="padding-10" style="height: 40%;">
<p class="host-item-title">分区</p> <p class="host-item-title">分区</p>
...@@ -13,26 +29,28 @@ ...@@ -13,26 +29,28 @@
<p class="host-item-title">基本信息</p> <p class="host-item-title">基本信息</p>
<div class="host-item-content"> <div class="host-item-content">
<nz-row> <nz-row>
<nz-col nzSpan="8"><span >资源状态：</span></nz-col> <nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col> <nz-col nzSpan="16">{{server?.waringName}}</nz-col>
</nz-row>
<nz-col nzSpan="8"><span >名称：</span></nz-col> <nz-row>
<nz-col nzSpan="16"><span >100</span></nz-col> <nz-col nzSpan="8">名称：</nz-col>
<nz-col nzSpan="16">{{server?.name}}</nz-col>
<nz-col nzSpan="8"><span >IP地址：</span></nz-col> </nz-row>
<nz-col nzSpan="16"><span >100</span></nz-col> <nz-row>
<nz-col nzSpan="8">IP地址：</nz-col>
<nz-col nzSpan="8"><span >设备类型：</span></nz-col> <nz-col nzSpan="16">{{server?.ip}}</nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col> </nz-row>
<nz-row>
<nz-col nzSpan="8"><span >资产编号：</span></nz-col> <nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col> <nz-col nzSpan="16">{{equipmentType}}</nz-col>
</nz-row>
<nz-col nzSpan="8"><span >资源位置：</span></nz-col> <nz-row>
<nz-col nzSpan="16"><span >100</span></nz-col> <nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.no}}</nz-col>
<nz-col nzSpan="8"><span >负责人：</span></nz-col> </nz-row>
<nz-col nzSpan="16"><span >100</span></nz-col> <nz-row>
<nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.person}}</nz-col>
</nz-row> </nz-row>
</div> </div>
</nz-col> </nz-col>
...@@ -40,44 +58,70 @@ ...@@ -40,44 +58,70 @@
<p class="host-item-title">指标列表</p> <p class="host-item-title">指标列表</p>
<div class="host-item-content"> <div class="host-item-content">
<nz-row> <nz-row>
<nz-col nzSpan="16" >CPU利用率(%)：</nz-col> <nz-col nzSpan="16">CPU利用率(%)：</nz-col>
<nz-col nzSpan="8" >100</nz-col> <nz-col nzSpan="8">{{hostObj.cpu}}</nz-col>
</nz-row>
<nz-col nzSpan="16" >Ping延时(ms)：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="16" >内存利用率(%)：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="16" >CPU个数：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="16" >接口数：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="16" >物理内存容量(GB)：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="16" >MAC地址：</nz-col> <nz-row>
<nz-col nzSpan="8" >100</nz-col> <nz-col nzSpan="16">Ping延时(ms)：</nz-col>
<nz-col nzSpan="8">100</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="16">内存利用率(%)：</nz-col>
<nz-col nzSpan="8">{{hostObj.used}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="16">CPU个数：</nz-col>
<nz-col nzSpan="8">100</nz-col>
</nz-row> </nz-row>
<nz-row>
<nz-col nzSpan="16">接口数：</nz-col>
<nz-col nzSpan="8">100</nz-col>
</nz-row>
</div> </div>
</nz-col> </nz-col>
</nz-row> </nz-row>
</div> </div>
</nz-col> </nz-col>
<nz-col nzSpan="12"> <nz-col nzSpan="12">
<div class="padding-10" style="height: 50%;"> <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">
<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="选择时间" [(ngModel)]="timeTypeTrend"
(ngModelChange)="changeTrend($event)">
<ng-container *ngFor="let time of timeList">
<nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
</ng-container>
</nz-select>
</div>
<div class="host-item-title"> <div class="host-item-title">
指标趋势 指标趋势
</div> </div>
<div class="host-item-content">图表</div> <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%;"> <div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title"> <div class="host-item-title">
可用性历史趋势 可用性历史趋势
</div> </div>
<div class="host-item-content">图表</div> <div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="timeTypeHistory"
(ngModelChange)="changeHistory($event)">
<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]="isHistoryLoading">
<div echarts [options]="chartHistoryOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</div> </div>
</nz-col> </nz-col>
</nz-row> </nz-row>
......
src/main/webapp/app/overAll/modal/server/server.component.ts
View file @ 9c0a7f77
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {CommonService} from '../../../shared/common/common.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {OverAllService} from '../../overAll.service';
import {HostComponent} from '../../host.component';
import {HostFlow} from '../../../app.constants';
@Component({ @Component({
selector: 'smart-server', selector: 'smart-server',
...@@ -7,9 +13,197 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,9 +13,197 @@ import { Component, OnInit } from '@angular/core';
}) })
export class ServerComponent implements OnInit { export class ServerComponent implements OnInit {
constructor() { } hostId; //主机ID
equipmentType; //主机类型
server;
targetFlow = HostFlow; //主机指标
timeList = [
{'label': '最近一小时', value: '0'},
{'label': '最近一天', value: '2'},
{'label': '最近三天', value: '3'},
{'label': '最近一周', value: '4'},
];
timeTypeTrend;
timeTypeHistory;
isTrendLoading = false;
chartTrendOption;
isHistoryLoading = false;
chartHistoryOption;
trendObj = { //指标趋势
type: 'total_flow',
startTime: '',
endTime: ''
};
historyObj = {
startTime: '',
endTime: ''
};
hostObj = {
disk: null,
used: null,
cpu: null,
losed: null,
};
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService,
private hostCom: HostComponent) {
this.routerInfo.queryParams.subscribe(queryParams => {
this.hostId = queryParams.hostId;
this.equipmentType = queryParams.equipmentType;
});
}
ngOnInit() { ngOnInit() {
this.getDetail();
this.getTrend();
}
getDetail() {
const data = {
hostId: this.hostId,
};
this.overAllSer.findDetailed(this.hostId).subscribe(
(res) => {
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;
} else {
this.hostObj.used = 0;
}
}
);
//cpu使用率
this.overAllSer.cupUsed(data).subscribe(
(res) => {
if (res.data) {
this.hostObj.cpu = res.data;
} 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;
}
}
);
}
//获取趋势数据
getTrend() {
const data = {
type: this.trendObj.type,
hostid: this.hostId,
startTime: this.trendObj.startTime,
endTime: this.trendObj.endTime
};
this.overAllSer.findChartByKey(data).subscribe(
(res) => {
this.setTrendChart(res.data);
}
);
}
//设置指标趋势
setTrendChart(data) {
this.chartTrendOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series: data.map(e => {
return e.value;
})
};
this.isTrendLoading = false;
}
//获取历史趋势
getHistory() {
}
//设置指标趋势
setHistoryChart(data) {
this.chartHistoryOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series: data.map(e => {
return e.value;
})
};
this.isHistoryLoading = false;
}
changeTrend(e){
this.isTrendLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.trendObj.startTime = timeObj.startTime;
this.trendObj.endTime = timeObj.endTime;
this.getTrend();
}
changeHistory(e){
this.isHistoryLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.historyObj.startTime = timeObj.startTime;
this.historyObj.endTime = timeObj.endTime;
this.getHistory();
} }
} }
src/main/webapp/app/overAll/modal/switch/switch.component.html
View file @ 9c0a7f77
...@@ -2,38 +2,38 @@ ...@@ -2,38 +2,38 @@
<nz-col nzSpan="8"> <nz-col nzSpan="8">
<div class="padding-10" style="height: 30%;"> <div class="padding-10" style="height: 30%;">
<p class="host-item-title">关键指标</p> <p class="host-item-title">关键指标</p>
<div class="host-item-content"> <div class="host-item-content" style="height: 100%;">
</div> </div>
</div> </div>
<div class="padding-10" style="height: 35%;"> <div class="padding-10" style="height: 35%;">
<p class="host-item-title">基本信息</p> <p class="host-item-title">基本信息</p>
<div class="host-item-content"> <div class="host-item-content" style="height: 100%;">
<nz-row> <nz-row>
<nz-col nzSpan="8">资源状态：</nz-col> <nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{switch?.waringName}}</nz-col>
<nz-col nzSpan="8">名称：</nz-col> <nz-col nzSpan="8">名称：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{switch?.name}}</nz-col>
<nz-col nzSpan="8">IP地址：</nz-col> <nz-col nzSpan="8">IP地址：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{switch?.ip}}</nz-col>
<nz-col nzSpan="8">设备类型：</nz-col> <nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">交换机</nz-col>
<nz-col nzSpan="8">资产编号：</nz-col> <nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{switch?.inventory?.no}}</nz-col>
<nz-col nzSpan="8">负责人：</nz-col> <nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{switch?.inventory?.person}}</nz-col>
</nz-row> </nz-row>
</div> </div>
</div> </div>
<div class="padding-10" style="height: 35%;"> <div class="padding-10" style="height: 35%;">
<p class="host-item-title">指标列表</p> <p class="host-item-title">指标列表</p>
<div class="host-item-content"> <div class="host-item-content" style="height: 100%;">
<nz-row > <nz-row>
<nz-col nzSpan="8">CPU利用率(%)：</nz-col> <nz-col nzSpan="8">CPU利用率(%)：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">100</nz-col>
...@@ -50,17 +50,55 @@ ...@@ -50,17 +50,55 @@
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">100</nz-col>
</nz-row> </nz-row>
</div> </div>
</div> </div>
</nz-col> </nz-col>
<nz-col nzSpan="16"> <nz-col nzSpan="16">
<div class="padding-10" style="height: 50%;"> <div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title">指标趋势</div> <div class="host-item-title">指标趋势</div>
<div class="host-item-content">图表</div> <div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTimeTarget(null)" [(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="选择时间"
(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> </div>
<div class="padding-10" style="height: 50%;"> <div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title">网卡流量</div> <div class="host-item-title">网卡流量</div>
<div class="host-item-content">图表</div> <div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择接口"
(ngModelChange)="changeTimeFlow(null)" [(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">
<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">
<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> </div>
</nz-col> </nz-col>
</nz-row> </nz-row>
......
src/main/webapp/app/overAll/modal/switch/switch.component.ts
View file @ 9c0a7f77
...@@ -13,31 +13,48 @@ import {OverAllService} from '../../overAll.service'; ...@@ -13,31 +13,48 @@ import {OverAllService} from '../../overAll.service';
export class SwitchComponent implements OnInit { export class SwitchComponent implements OnInit {
hostId; //主机ID hostId; //主机ID
switch;
targetFlow = HostFlow; //主机指标 targetFlow = HostFlow; //主机指标
timeList = [ timeList = [
{'label': '最近一小时', value: '0'}, {'label': '最近一小时', value: '0'},
{'label': '最近一天', value: '1'}, {'label': '最近一天', value: '2'},
{'label': '最近三天', value: '3'}, {'label': '最近三天', value: '3'},
{'label': '最近一周', value: '4'}, {'label': '最近一周', value: '4'},
]; ];
timeTarget; timeTypeTrend = '0';
timeFlow; timeTypeFLow = '0';
interfaceList = []; //接口数组 interfaceList = []; //接口数组
interface;
unit;
unitList = UnitList; // 单位 unitList = UnitList; // 单位
isNetworkLoading = false;
chartNetworkOption;
isTrendLoading = false;
chartTrendOption;
netWorkdObj = { //网卡图表参数
itemName: '',
unit: 'Mbps',
startTime: '',
endTime: '',
};
trendObj = {
type: 'total_flow',
startTime: '',
endTime: ''
};
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute, constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService) { private message: NzMessageService, private overAllSer: OverAllService) {
this.routerInfo.queryParams.subscribe(queryParams => { this.routerInfo.queryParams.subscribe(queryParams => {
this.hostId = queryParams.hostId; this.hostId = queryParams.hostId;
this.overAllSer.findDetailed(this.hostId).subscribe( this.overAllSer.findDetailed(this.hostId).subscribe(
(res) => { (res) => {
let data = res.data[0]; this.switch = res.data[0];
} }
); );
}); });
...@@ -45,54 +62,152 @@ export class SwitchComponent implements OnInit { ...@@ -45,54 +62,152 @@ export class SwitchComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.overAllSer.findNetworkCard(this.hostId).subscribe( this.overAllSer.findNetworkCard(this.hostId).subscribe(
(res)=>{ (res) => {
this.interfaceList = res.data; this.interfaceList = res.data;
this.netWorkdObj.itemName = this.interfaceList[0];
this.changeTimeFlow('0');
} }
) );
this.changeTimeTarget('0');
} }
//网卡流量 //网卡流量
findNetwork() { findNetwork() {
const data = { const data = {
itemName:'', itemName: this.netWorkdObj.itemName,
hostid:this.hostId, hostid: this.hostId,
startTime:'', startTime: this.netWorkdObj.startTime,
endTime:'', endTime: this.netWorkdObj.endTime,
unit:this.unit unit: this.netWorkdObj.unit
} };
this.overAllSer.findNetworkFlow(data).subscribe( this.overAllSer.findNetworkFlow(data).subscribe(
(res)=>{ (res) => {
this.setNetWorkChart(res.data);
}
);
}
//设置网卡流量
setNetWorkChart(data) {
let arr = [];
const objSend = {
name: '发送速率',
stack: '网卡流量',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#2cfef7'
}
} }
) },
data: [],
};
const objReceived = {
name: '接受速率',
stack: '网卡流量',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#b6d0f0'
}
}
},
data: [],
};
data.forEach(e => {
objSend.data.push(e.sentValue);
objReceived.data.push(e.sentValue);
});
arr.push(objSend, objReceived);
this.chartNetworkOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series: arr,
};
this.isNetworkLoading = false;
} }
//指标趋势 //指标趋势
findChart(){ findChart() {
const data = { const data = {
type:'', type: this.trendObj.type,
hostid :this.hostId, hostid: this.hostId,
startTime:'', startTime: this.trendObj.startTime,
endTime:'' endTime: this.trendObj.endTime
} };
this.overAllSer.findChartByKey(data).subscribe( this.overAllSer.findChartByKey(data).subscribe(
(res)=>{ (res) => {
this.setTrendChart(res.data);
}
);
}
//设置指标趋势
setTrendChart(data) {
this.chartTrendOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
} }
) },
type: 'value'
},
series: data.map(e => {
return e.value;
})
};
this.isTrendLoading= false;
} }
/**********指标趋势**************/ /**********指标趋势**************/
changeTimeTarget() { changeTimeTarget(e) {
const timeObj = this.commonSer.getTimeByType(this.timeFlow); this.isTrendLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.trendObj.startTime = timeObj.startTime;
this.trendObj.endTime = timeObj.endTime;
this.findChart();
} }
/**********指标趋势**************/ /**********指标趋势**************/
/**********网卡流量**************/ /**********网卡流量**************/
changeTimeFlow() { changeTimeFlow(e) {
const timeObj = this.commonSer.getTimeByType(this.timeFlow); this.isNetworkLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.netWorkdObj.startTime = timeObj.startTime;
this.netWorkdObj.endTime = timeObj.endTime;
this.findNetwork();
} }
/**********网卡流量**************/ /**********网卡流量**************/
} }
src/main/webapp/app/shared/common/common.service.ts
View file @ 9c0a7f77
...@@ -143,6 +143,7 @@ export class CommonService implements OnInit { ...@@ -143,6 +143,7 @@ export class CommonService implements OnInit {
* @param timeType 0：最近一小时 1：今天 2：昨天(最近一天) 3：最近三天 4：最近一周 5：最近一个月 * @param timeType 0：最近一小时 1：今天 2：昨天(最近一天) 3：最近三天 4：最近一周 5：最近一个月
*/ */
getTimeByType(timeType){ getTimeByType(timeType){
console.log(timeType);
const nowDate = new Date().getTime(); const nowDate = new Date().getTime();
let day1, day2; //当作变量使用 let day1, day2; //当作变量使用
let obj = {startTime:'',endTime:''}; let obj = {startTime:'',endTime:''};
......
src/main/webapp/content/scss/darkBlue.scss
View file @ 9c0a7f77
...@@ -169,4 +169,17 @@ $fontColor: #b7d1f1; ...@@ -169,4 +169,17 @@ $fontColor: #b7d1f1;
top: 10px; top: 10px;
z-index: 9; z-index: 9;
} }
.width-host {
position: relative;
width: 80%;
margin: 0 auto;
background-color: #5489b2;
height: 23px;
.space{
height: 23px;
background-color: #4ccf46;
transition: all 500ms;
}
}
} }
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