Skip to content

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

数据库测试

parent 5b78d765
Hide whitespace changes
Inline Side-by-side
Showing with 793 additions and 152 deletions
src/main/webapp/app/analysis/resource-alarm/resource-alarm.component.html
View file @ ebc74086
......@@ -33,7 +33,7 @@
</nz-select>
</div>
<div nz-col nzSpan="7">
<nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()" [nzButtonStyle]="'solid'">
<nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()">
<label nz-radio-button nzValue="1">今天</label>
<label nz-radio-button nzValue="2">昨天</label>
<label nz-radio-button nzValue="3">三天</label>
......
src/main/webapp/app/app.constants.ts
View file @ ebc74086
......@@ -4,15 +4,35 @@ export const SERVER_API_URL_COMS = '/coms';
export const SERVER_API_URL = '/zabbixBox';
export const BUILD_TIMESTAMP = process.env.BUILD_TIMESTAMP;
export const pageSize = 10;
//颜色
export const color = {
green:'#58ca13',
yellow:'#ffc029',
red:'#f44e4e',
gray:'#bfbfbf',
black:'#000000'
green: '#58ca13',
yellow: '#ffc029',
red: '#f44e4e',
gray: '#bfbfbf',
black: '#000000'
};
//主题
export const ThemeList = [
{ value:'white',label:'白色主题' },
{ value:'dark',label:'深色主题' },
]
{value: 'white', label: '白色主题'},
{value: 'dark', label: '深色主题'},
];
//流量单位
export const UnitList = [
{'label': 'bps', value: 'bps'},
{'label': 'Kbps', value: 'kbps'},
{'label': 'Mbps', value: 'mbps'},
{'label': 'Gbps', value: 'gbps'},
];
//主机指标
export const HostFlow = [
{'label': 'CPU利用率(%)', value: 'cpu_use'},
{'label': 'Ping延时(ms)', value: 'ping_delay'},
{'label': '丢包数', value: 'packet_loss'},
{'label': '内存利用率(%)', value: 'vm_use'},
{'label': '总流速(Kbps)', value: 'total_flow'},
];
src/main/webapp/app/app.route.ts
View file @ ebc74086
......@@ -42,6 +42,9 @@ import {BTopologyComponent} from './business/b-topology/b-topology.component';
import {EffectAnalysisComponent} from './business/effect-analysis/effect-analysis.component';
import {LogAnalysisComponent} from './business/log-analysis/log-analysis.component';
import {BConfigComponent} from './business/b-config/b-config.component';
import {DatabaseComponent} from './overAll/modal/database/database.component';
import {ServerComponent} from './overAll/modal/server/server.component';
import {SwitchComponent} from './overAll/modal/switch/switch.component';
export const route: Routes = [
{path: '', component: JhiMainComponent,canActivate:[LoginGuard]},
......@@ -91,6 +94,9 @@ export const route: Routes = [
{path: 'effectAnalysis', component: EffectAnalysisComponent,data: { breadcrumb: '效能分析' },},
{path: 'logAnalysis', component: LogAnalysisComponent,data: { breadcrumb: '日志分析' },},
{path: 'bConfig', component: BConfigComponent,data: { breadcrumb: '业务配置' },},
{path: 'database', component: DatabaseComponent,data: { breadcrumb: '数据库' },},
{path: 'server', component: ServerComponent,data: { breadcrumb: '服务器' },},
{path: 'switch', component: SwitchComponent,data: { breadcrumb: '交换机' },},
]
},
]
......
src/main/webapp/app/home/home.component.html
View file @ ebc74086
......@@ -147,5 +147,37 @@
</ng-container>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="16">
<div class="host-item-title">网络拓扑图</div>
<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-row>
<ng-container *ngFor="let flow of flowListNum;">
<nz-row class="table-content">
<nz-col nzSpan="8">{{flow.name}}</nz-col>
<nz-col nzSpan="8">{{flow.send}}</nz-col>
<nz-col nzSpan="8">{{flow.receive}}</nz-col>
</nz-row>
</ng-container>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="8">
<div class="host-item-title">业务系统安全运行天数</div>
<div class="host-item-table" style="height: 500px">
<nz-row class="text-center table-title">
<nz-col nzSpan="12">系统名称</nz-col>
<nz-col nzSpan="12">运行天数</nz-col>
</nz-row>
<ng-container *ngFor="let day of safeRunDayList;">
<nz-row class="table-content">
<nz-col nzSpan="12">{{day.name}}</nz-col>
<nz-col nzSpan="12">{{day.okTimeDay}}</nz-col>
</nz-row>
</ng-container>
</div>
</nz-col>
</nz-row>
</div>
src/main/webapp/app/home/home.component.ts
View file @ ebc74086
......@@ -67,6 +67,7 @@ export class HomeComponent implements OnInit,AfterViewInit {
flowListNum; //接口流量排行 数值
flowListPre; //发送利用率排名 百分比
countOrderList; //cpu内存使用率排名列表
safeRunDayList; //安全运行天数
constructor(
private overAllSer:OverAllService,private message:NzMessageService,
......@@ -87,6 +88,8 @@ export class HomeComponent implements OnInit,AfterViewInit {
this.flowRankNum();
this.flowRankPre();
this.countOrde();
this.findSafeRunDay();
}
ngAfterViewInit(){
......@@ -502,4 +505,18 @@ export class HomeComponent implements OnInit,AfterViewInit {
}
)
}
//业务系统安全运行天数
findSafeRunDay(){
const data = {
pageNum:'1',
pageCount:'10',
startTime:'2018-01-01'
}
this.overAllSer.findSafeRunDayList(data).subscribe(
(res)=>{
this.safeRunDayList = res.data.data;
}
)
}
}
src/main/webapp/app/overAll/basic/basic.component.html
View file @ ebc74086
......@@ -31,19 +31,23 @@
<div nz-col nzSpan="12">
<span>监控设备数：{{deviceNo}}</span>
<span>设备状态：
<span [ngClass]="{'select-border': status == '正常'}" (click)="changeStatus('正常')" style="margin-right: 8px" > <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
<span [ngClass]="{'select-border': status == '正常'}" (click)="changeStatus('正常')" style="margin-right: 8px"> <nz-tag
class="tag-green" [nzColor]="color.green"></nz-tag>
<i *ngIf="!green && green !=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{green}}
</span>
<span [ngClass]="{'select-border': status == '告警'}" (click)="changeStatus('告警')" style="margin-right: 8px"> <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<span [ngClass]="{'select-border': status == '告警'}" (click)="changeStatus('告警')" style="margin-right: 8px"> <nz-tag
class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<i *ngIf="!yellow && yellow != 0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{yellow}}
</span>
<span [ngClass]="{'select-border': status == '严重'}" (click)="changeStatus('严重')" style="margin-right: 8px"> <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
<span [ngClass]="{'select-border': status == '严重'}" (click)="changeStatus('严重')" style="margin-right: 8px"> <nz-tag
class="tag-red" [nzColor]="color.red"></nz-tag>
<i *ngIf="!red && red != 0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{red}}
</span>
<span [ngClass]="{'select-border': status == '禁用'}" (click)="changeStatus('禁用')"> <nz-tag [nzColor]="color.gray"></nz-tag>
<span [ngClass]="{'select-border': status == '禁用'}" (click)="changeStatus('禁用')"> <nz-tag
[nzColor]="color.gray"></nz-tag>
<i *ngIf="!gray && gray!=0" class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{gray}}
</span>
......@@ -69,13 +73,14 @@
</div>
<ng-container *ngIf="!searchStatus">
<nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzFrontPagination]="true" [nzShowPagination]="true" >
<nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzFrontPagination]="true" [nzShowPagination]="true">
<thead>
<tr>
<th [nzChecked]="allChecked"></th>
<th>名称</th>
<th>状态</th>
<th>关联资产</th>
<th>设备类型</th>
<th>可用性</th>
<th>操作</th>
</tr>
......@@ -97,7 +102,7 @@
</ng-container>
<!--子集-->
<ng-container *ngIf="item.level">
<td nzShowCheckbox [nzIndeterminate]="indeterminate"
<td nzShowCheckbox
(nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
<td class="cursor main-color" [nzIndentSize]="item.level*20">
<span (click)="goDetail(item)">{{item.name}}</span>
......@@ -121,6 +126,9 @@
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<td class="cursor">
<span (click)="goEquip(item)">{{item?.equipmentType}}</span>
</td>
<td class="default">
<ng-container *ngIf="item.level">
<ng-container *ngIf="!item.available || item.available == 0">
......@@ -189,8 +197,8 @@
<ul nz-menu nzSelectable>
<li (click)="showTempStop(item)" nz-menu-item><a>临时暂停</a></li>
<li (click)="goDetail(item)" nz-menu-item><a>查看监测点</a></li>
<li (click)="showAlarm(item)" nz-menu-item><a>添加告警</a></li>
<li (click)="showAlarm(item)" nz-menu-item><a>关联资产</a></li>
<li (click)="showAlarm()" nz-menu-item><a>添加告警</a></li>
<li (click)="showAlarm()" nz-menu-item><a>关联资产</a></li>
</ul>
</nz-dropdown>
</ng-container>
......@@ -210,12 +218,13 @@
<td></td>
<td [nzIndentSize]="item.level*20" nzShowExpand [nzExpand]='item.expand'
(nzExpandChange)="getChildren(item)">
<span>{{item.name}} <span style="color: #1b6b5b; margin-left: 10px">主机数量：{{item.hostcount}}</span> </span>
<span>{{item.name}} <span
style="color: #1b6b5b; margin-left: 10px">主机数量：{{item.hostcount}}</span> </span>
</td>
</ng-container>
<!--子集-->
<ng-container *ngIf="item.level">
<td nzShowCheckbox [nzIndeterminate]="indeterminate"
<td nzShowCheckbox
(nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
<td class="cursor main-color" [nzIndentSize]="item.level*20">
<span (click)="goDetail(item)">{{item.name}}</span>
......@@ -239,6 +248,9 @@
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<td class="cursor">
<span (click)="goEquip(item)">{{item?.equipmentType}}</span>
</td>
<td class="default">
<ng-container *ngIf="item.level">
<ng-container *ngIf="!item.available || item.available == 0">
......@@ -294,7 +306,7 @@
</td>
<td class="handle main-color">
<ng-container *ngIf="!item.level">
<span (click)="showBasicEditModal(item)">添加资源</span>
<span (click)="showBasicEditModal()">添加资源</span>
<span (click)="updateGroup(item)">编辑</span>
<span (click)="showDeleteGroupConfirm(item)">删除</span>
</ng-container>
......@@ -306,14 +318,15 @@
<a nz-dropdown>更多 <i class="anticon anticon-down main-color"></i>
</a>
<ul nz-menu nzSelectable>
<li *ngIf="!item.monitorTask" (click)="showTempStop(item)" nz-menu-item><a>临时暂停</a></li>
<li *ngIf="!item.monitorTask" (click)="showTempStop(item)" nz-menu-item>
<a>临时暂停</a></li>
<li (click)="openHost(item)" nz-menu-item><a>
<ng-container *ngIf="item.status == 1">开启</ng-container>
<ng-container *ngIf="item.status == 0">停止</ng-container>
监控
</a></li>
<li nz-menu-item (click)="goDetail(item)"><a>查看监测点</a></li>
<li (click)="showAlarm(item)" nz-menu-item><a>添加告警</a></li>
<li (click)="showAlarm()" nz-menu-item><a>添加告警</a></li>
</ul>
</nz-dropdown>
</ng-container>
......@@ -328,13 +341,16 @@
<ng-container *ngIf="searchStatus">
<nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzFrontPagination]="false" [nzShowPagination]="true" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)">
<nz-table #nzTable [nzData]="dataSet" [nzLoading]="loading" [nzFrontPagination]="false" [nzShowPagination]="true"
[nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount"
(nzPageIndexChange)="change($event)">
<thead>
<tr>
<th [nzChecked]="allChecked"></th>
<th>名称</th>
<th>状态</th>
<th>关联资产</th>
<th>设备类型</th>
<th>可用性</th>
<th>操作</th>
</tr>
......@@ -342,7 +358,7 @@
<tbody>
<ng-container *ngFor="let item of nzTable.data">
<tr>
<td nzShowCheckbox [nzIndeterminate]="indeterminate" (nzCheckedChange)="selectChecked($event,item)"
<td nzShowCheckbox (nzCheckedChange)="selectChecked($event,item)"
[(nzChecked)]="item.checked"></td>
<td class="cursor main-color">
<span (click)="goDetail(item)">{{item.name}}</span>
......@@ -364,6 +380,9 @@
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<td class="cursor">
<span (click)="goEquip(item)">{{item?.equipmentType}}</span>
</td>
<td class="default">
<ng-container *ngIf="!item.available || item.available == 0">
<nz-tag>AGENT</nz-tag>
......@@ -430,7 +449,7 @@
监控
</a></li>
<li nz-menu-item (click)="goDetail(item)"><a>查看监测点</a></li>
<li (click)="showAlarm(item)" nz-menu-item><a>添加告警</a></li>
<li (click)="showAlarm()" nz-menu-item><a>添加告警</a></li>
</ul>
</nz-dropdown>
</td>
......@@ -450,4 +469,4 @@
<!--临时暂停-->
<smart-pause #smartPause (done)="handleOk($event)"></smart-pause>
<!--添加告警-->
<smart-alarm-modal #smartAlarmModal></smart-alarm-modal>
\ No newline at end of file
<smart-alarm-modal #smartAlarmModal></smart-alarm-modal>
src/main/webapp/app/overAll/basic/basic.component.ts
View file @ ebc74086
......@@ -537,4 +537,21 @@ export class BasicComponent implements OnInit {
}
});
}
//前往设备类型页面
goEquip(item){
let type;
if(item.equipmentType == "数据库"){
type = "database";
}else if(item.equipmentType == "交换机"){
type = "switch"
}else{
type = "server"
}
this.router.navigate(['app/main/'+type], {
queryParams: {
hostId: item.hostid
}
});
}
}
src/main/webapp/app/overAll/modal/database/database.component.html
View file @ ebc74086
<div>
<nz-row>
<nz-col nzSpan="12">
<div>
<nz-row>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">数据库</p>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row>
<nz-col nzSpan="14">主键缓存大小(MB)：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">数据库存储引擎：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">最大连接数：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">缓存大小：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">主键命中率(%)：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">X活数：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">当前进程数：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">数据文件请求速率：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">缓存命中率(%)：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<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>
</ng-container>
</nz-row>
</div>
</nz-col>
</nz-row>
</div>
<div>
</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></div>
</nz-col>
</nz-row>
</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>
</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>
src/main/webapp/app/overAll/modal/database/database.component.ts
View file @ ebc74086
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 {AlarmService} from '../../../alarm/alarm.service';
import {AnalysisService} from '../../../analysis/analysis.service';
@Component({
selector: 'smart-database',
templateUrl: './database.component.html',
styles: []
selector: 'smart-database',
templateUrl: './database.component.html',
styles: []
})
export class DatabaseComponent implements OnInit {
constructor() { }
hostId;
charTrendOption;
chartDatabaseOption;
isFlowLoading = false;
isDatabaseLoading = false;
ngOnInit() {
}
databaseList; //数据库列表
databaseType; // 选择的数据库类型
databaseDetail; //指标列表
eventList; //告警列表
indexDetail; //数据库详情指标
obj = {
groupid: null,
startTime: null,
endTime: null,
priorityName: null,
};
timeTypeFlow = '4';
flowObj = {
startTime: null,
endTime: null
};
timeTypeDatabase = '0';
databaseObj = {
startTime: null,
endTime: null
};
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService,
private alarmSer: AlarmService, private analysisSer: AnalysisService) {
this.routerInfo.queryParams.subscribe(queryParams => {
this.hostId = queryParams.hostId;
this.overAllSer.findDetailed(this.hostId).subscribe(
(res) => {
let data = res.data[0];
}
);
});
}
ngOnInit() {
this.findDatabase();
this.findIndexDetail();
this.eventFind();
this.changeTypeFlow();
this.changeTypeDatabase();
}
//查询所有数据库类型
findDatabase() {
this.overAllSer.findAllDatabaseByHost(this.hostId).subscribe(
(res) => {
this.databaseList = res.data;
this.databaseType = this.databaseList[0].type;
this.findTarget();
}
);
}
//指标列表
findTarget() {
const data = {
'hostid': this.hostId,
'databaseType': this.databaseType
};
this.overAllSer.findDatabaseDetailByHost(data).subscribe(
(res) => {
this.databaseDetail = res.data;
}
);
}
//数据库详情指标
findIndexDetail() {
const data = {
hostid: this.hostId
};
this.overAllSer.findIndexDetail(data).subscribe(
(res) => {
this.indexDetail = res.data;
}
);
}
//当前告警
eventFind() {
const data = {
pageCount: 10,
pageNum: 1,
obj: {
isWaring: 'yes',
hostid: this.hostId
}
};
this.alarmSer.eventFind(data).subscribe(
(res) => {
this.eventList = res.data.data;
}
);
}
changeTypeFlow() {
this.isFlowLoading = true;
this.flowObj = this.commonSer.getTimeByType(this.timeTypeFlow);
this.getAlarmTrend();
}
//告警总数趋势
getAlarmTrend() {
const data = {
hostid: this.hostId,
startTime: this.flowObj.startTime,
endTime: this.flowObj.endTime,
};
this.overAllSer.waringTrendByHost(data).subscribe(
(res) => {
if (res.errCode == 10000) {
const response = res.data;
this.setAlarmTrend(response);
} else {
this.message.error(res.errMsg);
}
this.isFlowLoading = false;
}
);
}
//设置告警趋势echarts图表
setAlarmTrend(data) {
this.charTrendOption = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
textStyle: {color: '#ffffff'},
data: ['严重', '告警']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map((e) => {
return e.date;
})
}
],
yAxis: [
{
type: 'value',
minInterval: 1,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} 个'
},
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
boundaryGap: [0, 0.1],
}
],
series: [
{
name: '严重',
type: 'bar',
stack: '严重',
itemStyle: {
normal: {
color: '#e96545'
}
},
data: data.map(e => {
return e.errorcount;
})
},
{
name: '告警',
type: 'bar',
stack: '告警',
itemStyle: {
normal: {
color: '#eede85'
}
},
data: data.map(e => {
return e.waringcount;
})
}
]
};
}
changeTypeDatabase() {
this.isDatabaseLoading = true;
this.databaseObj = this.commonSer.getTimeByType(this.timeTypeDatabase);
this.databaseChart();
}
//数据库图表
databaseChart() {
const data = {
hostid: this.hostId,
startTime: this.databaseObj.startTime,
endTime: this.databaseObj.endTime,
};
this.overAllSer.findChartData(data).subscribe(
(res) => {
if (res.data.list && res.data.list.length > 0) {
this.setDatabaseChart(res.data);
}
this.isDatabaseLoading = false;
}
);
}
//设置数据库图表
setDatabaseChart(data) {
let arr = [];
data.databaseType.forEach(e => {
const obj = {
name: e,
stack: '数据库',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#2cfef7'
}
}
},
data: [],
};
data.list.forEach(f => {
obj.data.push(f[e]);
});
arr.push(obj);
});
this.chartDatabaseOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.list.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series: arr
};
}
}
src/main/webapp/app/overAll/modal/switch/switch.component.ts
View file @ ebc74086
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 {HostFlow, UnitList} from '../../../app.constants';
import {OverAllService} from '../../overAll.service';
@Component({
selector: 'smart-switch',
......@@ -8,19 +12,15 @@ import {CommonService} from '../../../shared/common/common.service';
})
export class SwitchComponent implements OnInit {
targetFlow = [
{'label': 'CPU利用率(%)', value: ''},
{'label': 'Ping延时(ms)', value: ''},
{'label': '丢包数', value: ''},
{'label': '内存利用率(%)', value: ''},
{'label': '总流速(Kbps)', value: ''},
];
hostId; //主机ID
targetFlow = HostFlow; //主机指标
timeList = [
{'label':'最近一小时',value:'0'},
{'label':'最近一天',value:'1'},
{'label':'最近三天',value:'3'},
{'label':'最近一周',value:'4'},
{'label': '最近一小时', value: '0'},
{'label': '最近一天', value: '1'},
{'label': '最近三天', value: '3'},
{'label': '最近一周', value: '4'},
];
timeTarget;
timeFlow;
......@@ -28,29 +28,71 @@ export class SwitchComponent implements OnInit {
interfaceList = []; //接口数组
interface;
unitList = [
{'label':'Kbps',value:''},
{'label':'Mbps',value:''},
{'label':'Gbps',value:''},
];
unit;
unitList = UnitList; // 单位
constructor(private commonSer:CommonService) {
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService) {
this.routerInfo.queryParams.subscribe(queryParams => {
this.hostId = queryParams.hostId;
this.overAllSer.findDetailed(this.hostId).subscribe(
(res) => {
let data = res.data[0];
}
);
});
}
ngOnInit() {
this.overAllSer.findNetworkCard(this.hostId).subscribe(
(res)=>{
this.interfaceList = res.data;
}
)
}
//网卡流量
findNetwork() {
const data = {
itemName:'',
hostid:this.hostId,
startTime:'',
endTime:'',
unit:this.unit
}
this.overAllSer.findNetworkFlow(data).subscribe(
(res)=>{
}
)
}
//指标趋势
findChart(){
const data = {
type:'',
hostid :this.hostId,
startTime:'',
endTime:''
}
this.overAllSer.findChartByKey(data).subscribe(
(res)=>{
}
)
}
/**********指标趋势**************/
changeTimeTarget(){
changeTimeTarget() {
const timeObj = this.commonSer.getTimeByType(this.timeFlow);
}
/**********指标趋势**************/
/**********网卡流量**************/
changeTimeFlow(){
changeTimeFlow() {
const timeObj = this.commonSer.getTimeByType(this.timeFlow);
}
/**********网卡流量**************/
}
src/main/webapp/app/overAll/overAll.service.ts
View file @ ebc74086
......@@ -26,7 +26,7 @@ export class OverAllService {
//获取分组信息 --编辑页面获取分组 1 表示模板 0表示主机
getEditGroups(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/groups/getAllUpdate/'+ params);
return this.http.get(SERVER_API_URL + '/groups/getAllUpdate/' + params);
}
//资源列表--所有类型
......@@ -326,52 +326,52 @@ export class OverAllService {
//创建模板
createTemplates(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/templates/create',data);
return this.http.post(SERVER_API_URL + '/templates/create', data);
}
//修改模板
updateTemplates(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/templates/update',data);
return this.http.post(SERVER_API_URL + '/templates/update', data);
}
//克隆模板
cloneTemplates(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/templates/clone',data);
return this.http.post(SERVER_API_URL + '/templates/clone', data);
}
//删除模板（支持批量删除）
deleteTemplates(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/templates/delete',data);
return this.http.post(SERVER_API_URL + '/templates/delete', data);
}
//查询模板
findTemplates(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/templates/find',data);
return this.http.post(SERVER_API_URL + '/templates/find', data);
}
//添加主机自动发现
createLldrule(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/lldrule/create',data);
return this.http.post(SERVER_API_URL + '/lldrule/create', data);
}
//修改主机自动发现
updateLldrule(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/lldrule/update',data);
return this.http.post(SERVER_API_URL + '/lldrule/update', data);
}
//主机自动发现列表
findPageLldrule(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/lldrule/findPage',data);
return this.http.post(SERVER_API_URL + '/lldrule/findPage', data);
}
//删除主机自动发现
deleteLldrule(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/lldrule/delete',data);
return this.http.post(SERVER_API_URL + '/lldrule/delete', data);
}
//自动发现 详情
findLldrule(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/lldrule/find/'+ params);
return this.http.get(SERVER_API_URL + '/lldrule/find/' + params);
}
//分页查询触发器
......@@ -381,7 +381,7 @@ export class OverAllService {
//主键查询触发器原型
findTriggerById(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/triggerPrototype/find/'+ params);
return this.http.get(SERVER_API_URL + '/triggerPrototype/find/' + params);
}
//删除触发器
......@@ -421,7 +421,7 @@ export class OverAllService {
//主键查询监控项原型
findItemById(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/itemprototype/find/'+ params);
return this.http.get(SERVER_API_URL + '/itemprototype/find/' + params);
}
//创建阈值
......@@ -471,21 +471,68 @@ export class OverAllService {
//发送利用率排名
homeUseOrder(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/home/useOrder/'+params);
return this.http.get(SERVER_API_URL + '/home/useOrder/' + params);
}
//查询业务系统的安全运行天数
findSafeRunDayList(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/itservice/findSafeRunDayList',data);
return this.http.post(SERVER_API_URL + '/itservice/findSafeRunDayList', data);
}
//查询主机cpu内存使用率排名列表
runStateOrder(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/home/runStateOrder/'+params);
return this.http.get(SERVER_API_URL + '/home/runStateOrder/' + params);
}
//查询主机发送接收流量排名列表
homeFlowOrder(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/home/flowOrder/'+params);
return this.http.get(SERVER_API_URL + '/home/flowOrder/' + params);
}
//查询监控项流量排名列表
flowOrderByItem(params1, params2): Observable<any> {
return this.http.get(SERVER_API_URL + '/home/flowOrderByItem/' + params1 + '/' + params2);
}
// 无锡监狱
//查找所有有数据的网口
findNetworkCard(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/hostSwitch/findNetworkCard/' + params);
}
//查询网卡流量图表接口
findNetworkFlow(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/hostSwitch/findNetworkFlow', data);
}
//根据类型查询图表数据(右上角指标趋势)
findChartByKey(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/hostSwitch/findChartByKey', data);
}
//根据数据库类型查找数据库详细指标
findDatabaseDetailByHost(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/itemDatabase/findDatabaseDetailByHost', data);
}
//查找数据库详情指标
findIndexDetail(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/itemDatabase/findIndexDetail', data);
}
//查找数据库详情指标
findChartData(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/itemDatabase/findChartData', data);
}
//根据主机查询所有的数据库类型
findAllDatabaseByHost(params): Observable<any> {
return this.http.get(SERVER_API_URL + '/itemDatabase/findAllDatabaseByHost/' + params);
}
//根据主机查询告警总数趋势图表
waringTrendByHost(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/statistics/waringTrendByHost', data);
}
}
src/main/webapp/app/shared/common/common.service.ts
View file @ ebc74086
......@@ -140,7 +140,7 @@ export class CommonService implements OnInit {
/**
* 根据type 查询时间段
* @param timeType 0 最近一小时 1 今天 2 昨天(最近一天) 3 最近三天 4 最近一周 5 最近一个月
* @param timeType 0：最近一小时 1：今天 2：昨天(最近一天) 3：最近三天 4：最近一周 5：最近一个月
*/
getTimeByType(timeType){
const nowDate = new Date().getTime();
......
src/main/webapp/content/scss/darkBlue.scss
View file @ ebc74086
$dark:#193250;
.dark{
.container{
$dark: #193250;
$fontColor: #b7d1f1;
.dark {
//UI框架
.ant-table-thead > tr > th {
background-color: #203d5b;
color: #aaa;
}
.ant-layout-sider {
background-color: $dark;
}
.layout .ant-menu-submenu > .ant-menu {
background-color: #234163;
}
.gray-font-color {
color: $fontColor;
}
.blue-font-color {
color: #7bcefb;
}
.container {
height: 100%;
padding: 0 16px;
background-image: url("../../content/images/dark-bg-img.png");
background-size: cover;
}
.layout .ant-menu{
background-color: $dark;
}
.ant-layout-sider{
.layout .ant-menu {
background-color: $dark;
}
.layout .ant-menu-submenu > .ant-menu{
background-color: #234163;
}
nz-header{
nz-header {
background: $dark;
padding: 0 16px;
border-bottom: 1px solid $dark;
}
.ant-btn {
background-color: #255fb2;
color: #f5f5f5;
}
input[type="text"], input[type="password"], input[type="number"], textarea,
.ant-select {
background-color: #243f5b;
border: 1px solid #6c8cad;
}
.ant-radio-button-wrapper {
background: none;
color: $fontColor;
}
.ant-radio-button-wrapper-checked {
background: #193250;
color: $fontColor;
border-color: $fontColor
}
.ant-select-dropdown {
background-color: #215a87;
}
.ant-select-selection {
background-color: #215a87;
color: $fontColor;
}
.ant-select-dropdown-menu-item {
color: $fontColor;
background-color: #215a87;
}
//自己写的
//主机详情
.host-item-title{
.host-item-title {
background-color: $dark;
color: #f2f2f2;
padding:10px 15px;
padding: 10px 15px;
height: 50px;
line-height: 30px;
}
.host-item-content{
background-color: rgba(0,0,0,.2);
.database-name {
border: 1px solid #b7d1f1;
color: #b7d1f1;
padding: 2px 5px;
border-radius: 5px;
font-size: 12px;
}
.host-item-content {
background-color: rgba(0, 0, 0, .2);
color: #b7cfea;
padding: 10px;
height: 400px;
nz-row{
nz-col:nth-child(2n +1){
color: #ffffff;
position: relative;
nz-row {
nz-col:nth-child(2n +1) {
color: $fontColor;
text-align: right;
margin-bottom: 10px;
}
nz-col:nth-child(2n){
nz-col:nth-child(2n) {
color: #7bcefb;
text-align: left;
margin-bottom: 10px;
}
}
}
.host-item-table{
background-color: rgba(0,0,0,.2);
.host-item-table {
background-color: rgba(0, 0, 0, .2);
color: #b7cfea;
padding: 10px;
height: 400px;
nz-col{
nz-col {
padding: 5px 10px;
}
.table-title{
background-color: rgba(0,0,0,.4);
nz-col{
border:1px solid #597cb5;
.table-title {
background-color: rgba(0, 0, 0, .4);
nz-col {
border: 1px solid #597cb5;
}
}
.table-content{
.table-content {
border-bottom: 1px solid #597cb5;
}
}
.dataChart {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
font-size: 12px;
p {
margin-bottom: 10px;
}
p:nth-child(2n) {
text-align: right;
border-bottom: 1px solid #b7d1f1;
}
p:nth-child(2n +1) {
text-align: left;
}
}
.time-group {
position: absolute;
right: 10px;
top: 10px;
z-index: 9;
}
}
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