Skip to content

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

服务器

parent f91ff121
Hide whitespace changes
Inline Side-by-side
Showing with 252 additions and 30 deletions
src/main/webapp/app/alarm/now-alarm/now-alarm.component.ts
View file @ 954cc6d9
......@@ -24,6 +24,12 @@ import {WorkService} from '../../work/work.service';
padding: 2px 4px;
border-radius: 4px;
}
.tag-warn span.select-border {
border: 1px solid #6097b7;
border-radius: 5px;
padding: 2px;
margin-right: 5px;
}
:host ::ng-deep .tag-warn .ant-tag{
margin-right: 0px;
}
......@@ -51,7 +57,6 @@ export class NowAlarmComponent implements OnInit, OnDestroy {
}
ngOnInit() {
this.search(null);
this.getType();
this.time_ = setInterval(()=>{
this.search(null);
......@@ -76,6 +81,7 @@ export class NowAlarmComponent implements OnInit, OnDestroy {
(res)=>{
if(res.errCode == 10000){
this.warnCountList = res.data;
this.search(this.warnCountList[0].hostid);
}else{
this.message.info(res.errMsg);
}
......
src/main/webapp/app/overAll/basic/basic-detail/basic-detail.component.html
View file @ 954cc6d9
......@@ -22,10 +22,225 @@
</div>
<nz-spin [nzSpinning]="isSpinning">
<!-- 交换机 -->
<smart-switch></smart-switch>
<!-- 服务器-->
<!-- <smart-server></smart-server>-->
<!-- 数据库-->
<!-- <smart-database></smart-database>-->
<div class="tabset">
<div class="tabset-btn">
<button (click)="showCheckModal()" nz-button nzType="default">添加监测点</button>
<button (click)="showDeleteConfirm()" nz-button nzType="default">删除资源</button>
</div>
<div class="releative" #checkEle>
<div #colorEle class="checkTags tag-form">
<span [ngClass]="{'select-border': changeStates == '正常'}" (click)="changeState('正常')">
<nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
<i *ngIf="!checkStatus.normal && checkStatus.normal !=0"
class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>{{checkStatus.normal}}
</span>
<span [ngClass]="{'select-border': changeStates == '告警'}" (click)="changeState('告警')"> <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<i *ngIf="!checkStatus.warning && checkStatus.warning !=0"
class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{checkStatus.warning}}
</span>
<span [ngClass]="{'select-border': changeStates == '严重'}" (click)="changeState('严重')"> <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
<i *ngIf="!checkStatus.high && checkStatus.high !=0" class="anticon anticon-spin anticon-loading"
style="font-size: 15px;"></i>
{{checkStatus.high}}
</span>
<span [ngClass]="{'select-border': changeStates == '禁用'}" (click)="changeState('禁用')"> <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
<i *ngIf="!checkStatus.disabled && checkStatus.disabled !=0"
class="anticon anticon-spin anticon-loading" style="font-size: 15px;"></i>
{{checkStatus.disabled}}
</span>
</div>
<nz-tabset [nzSelectedIndex]="tabNum" class="tabs-smart">
<nz-tab nzTitle="资源详情">
<section>
<p class="padding-8-0">{{hostName}}</p>
<div nz-row nzGutter="24">
<div nz-col nzSpan="12">
<nz-collapse>
<nz-collapse-panel [nzHeader]="panel1.name" [nzActive]="panel1.active"
[nzDisabled]="panel1.disabled">
<div nz-row>
<div class="releative" nz-col nzSpan="12">
<div echarts [options]="chartOption1"
style="height: 220px;width: 100%"></div>
<div class="posiabsolutStr">
<p>{{responseTimeStr}}</p>
<p>ms</p>
</div>
</div>
<div class="releative" nz-col nzSpan="12">
<div echarts [options]="chartOption2"
style="height: 220px;width: 100%;"></div>
<div class="posiabsolutStr">
<p>{{losedStr}}</p>
<p>%</p>
</div>
</div>
</div>
</nz-collapse-panel>
</nz-collapse>
</div>
<div nz-col nzSpan="12">
<nz-collapse>
<nz-collapse-panel [nzHeader]="panel2.name" [nzActive]="panel2.active"
[nzDisabled]="panel2.disabled">
<div nz-row>
<div class="releative" nz-col nzSpan="12">
<div echarts [options]="chartOption3"
style="height: 220px;width: 100%;"></div>
<div class="posiabsolutStr">
<p>{{cpuUsedStr}}</p>
<p>%</p>
</div>
</div>
<div class="releative" nz-col nzSpan="12">
<div echarts [options]="chartOption4"
style="height: 220px;width: 100%"></div>
<div class="posiabsolutStr">
<p>{{usedStr}}</p>
<p>%</p>
</div>
</div>
</div>
</nz-collapse-panel>
</nz-collapse>
</div>
</div>
<div nz-row style="margin: 30px 0;">
<nz-collapse>
<nz-collapse-panel [nzHeader]="panel3.name" [nzActive]="panel3.active"
[nzDisabled]="panel3.disabled">
<div nz-col nzSpan="20">
<div echarts [options]="secondOptionLeft" class="demo-chart"></div>
</div>
<!--<div nz-col nzSpan="8">-->
<!--<div echarts [options]="secondOptionRight" class="demo-chart"></div>-->
<!--</div>-->
</nz-collapse-panel>
</nz-collapse>
</div>
<!--<div nz-row>-->
<!--<nz-table #basicTable [nzData]="dataSet" [nzFrontPagination]="false" [nzTotal]="totalNumInOut" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="changeInoutInfo($event)" [nzLoading]="inOutLoading">-->
<!--<thead>-->
<!--<tr>-->
<!--<th>状态</th>-->
<!--<th>接口</th>-->
<!--<th>进流量</th>-->
<!--<th>出流量</th>-->
<!--<th>状态变更时间</th>-->
<!--&lt;!&ndash;<th nzWidth="150px">图表</th>&ndash;&gt;-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<tr *ngFor="let data of basicTable.data">-->
<!--<td>{{data.state}}</td>-->
<!--<td>{{data.name}}</td>-->
<!--<td>{{data.in}}</td>-->
<!--<td>{{data.out}}</td>-->
<!--<td>{{data.changeState}}</td>-->
<!--&lt;!&ndash;<td>图表</td>&ndash;&gt;-->
<!--</tr>-->
<!--</tbody>-->
<!--</nz-table>-->
<!--</div>-->
</section>
</nz-tab>
<nz-tab nzTitle="监测点列表">
<div class="padding-8-0">
<input (keyup.enter)="getCheckList()" style="width: 200px;" type="text" nz-input [(ngModel)]="searchName" placeholder="输入监测点名称">
<button (click)="getCheckList()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
</div>
<div class="padding-15-0">
<nz-radio-group [(ngModel)]="itemTypeValue" [nzButtonStyle]="'solid'">
<label *ngFor="let item of itemTypeList" (click)="changeType(item)" nz-radio-button [nzValue]="item.applicationid">{{item.name}}</label>
</nz-radio-group>
</div>
<nz-table #checkTable [nzData]="checkList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
<thead>
<tr>
<th nzWidth="20%">监测点名称</th>
<th nzWidth="10%">最新数据</th>
<th nzWidth="15%">最新数据时间</th>
<th nzWidth="10%">监测点分类</th>
<th nzWidth="10%">更新时间间隔</th>
<th nzWidth="5%">图表</th>
<th nzWidth="15%">状态</th>
<th nzWidth="5%">信息</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of checkTable.data">
<td class="tag-form">
<ng-container *ngIf="data.status == 0">
<nz-tag *ngIf="data.priority == 4 || data.priority == 5" class="tag-red" [nzColor]="color.red"></nz-tag>
<nz-tag *ngIf="data.priority == 2 || data.priority == 3" class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
<ng-container *ngIf="data.priority != 2 && data.priority != 3 && data.priority != 4 && data.priority != 5">
<nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
</ng-container>
</ng-container>
<ng-container *ngIf="data.status == 1">
<nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
</ng-container>{{data.name}}
</td>
<td>
<span>{{data.lastvalue}}</span>
</td>
<td>{{data.lastclock}}</td>
<td>{{data.itemType}}</td>
<td>{{data.delay}}</td>
<td class="main-color cursor main-color">
<span *ngIf="data.value_type == 0 || data.value_type == 3" (click)="showImageModal(data)">图表</span>
</td>
<td class="handle cursor main-color">
<ng-container *ngIf="!data.flags">
<span (click)="showEditModal(data)">编辑监测点</span>
<span (click)="deleteCheckItem(data)">删除监测点</span>
<br>
<span *ngIf="data.triggerCount == 0" (click)="showAddThresholdModal(data)">添加阈值</span>
<span *ngIf="data.triggerCount > 0" (click)="showEditThresholdModal(data)">编辑阈值</span>
</ng-container>
<span *ngIf="data.status == 0 && data.state==0" (click)="updateItem(data.itemid,1)" style="color: green">已启用</span>
<span *ngIf="data.status == 0 && data.state==1" (click)="updateItem(data.itemid,1)" style="color: red">不支持的</span>
<span *ngIf="data.status == 1 && data.state==0" (click)="updateItem(data.itemid,0)" style="color: red">停用的</span>
<span *ngIf="data.status == 1 && data.state==1" (click)="updateItem(data.itemid,0)" style="color: green">停用的</span>
</td>
<td>
<ng-container *ngIf="data.error">
<nz-tooltip [nzTitle]="data.error">
<span class="color-red" nz-tooltip><i class="anticon anticon-warning"></i></span>
</nz-tooltip>
</ng-container>
<ng-container *ngIf="data.info">
<nz-tooltip [nzTitle]="data.info">
<span class="color-yellow" nz-tooltip><i
class="anticon anticon-warning"></i></span>
</nz-tooltip>
</ng-container>
</td>
</tr>
</tbody>
</nz-table>
</nz-tab>
<nz-tab #thirdTabs nzTitle="历史告警" >
<smart-warn-list #warnList></smart-warn-list>
</nz-tab>
</nz-tabset>
</div>
</div>
</nz-spin>
<!--监测点-->
<smart-basi-check #smartCheck (done)="getList()"></smart-basi-check>
<!--阈值-->
<smart-threshold #smartThreshold (done)="getList()"></smart-threshold>
<nz-modal [nzFooter]="null" nzWidth="1080" [(nzVisible)]="isGrapha" nzTitle="" (nzOnCancel)="handleImageCancel()">
<div class="releative">
<div class="time-select">
<nz-date-picker [(ngModel)]="imageSelectDate" (ngModelChange)="getGraphDate()"
[nzSize]="size"></nz-date-picker>
</div>
<div echarts [options]="chartOptionGrapha" style="height: 520px;width: 100%"></div>
</div>
</nz-modal>
src/main/webapp/app/overAll/modal/server/server.component.html
View file @ 954cc6d9
......@@ -33,21 +33,21 @@
<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 echarts [options]="chartDiskOption" style="height: 150px;width: 100%"></div>
<div class="text-center margin-bottom-10">
<span style="border: 1px solid #d8c5c5;padding: 4px 8px;border-radius: 3px;">{{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-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-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-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>
......@@ -57,7 +57,7 @@
<nz-row>
<nz-col class="padding-right-10" nzSpan="12">
<p class="host-item-title">基本信息</p>
<div class="host-item-content">
<div class="host-item-content" style="height: 300px;">
<nz-row>
<nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16">{{server?.waringName}}</nz-col>
......@@ -86,7 +86,7 @@
</nz-col>
<nz-col class="padding-left-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<div class="host-item-content" style="height: 300px;">
<nz-row>
<nz-col nzSpan="16">CPU利用率(%)：</nz-col>
<nz-col nzSpan="8">{{hostObj.cpu}}</nz-col>
......@@ -94,20 +94,20 @@
<nz-row>
<nz-col nzSpan="16">Ping延时(ms)：</nz-col>
<nz-col nzSpan="8">100</nz-col>
<nz-col nzSpan="8">{{hostObj.response}}</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-col nzSpan="16">接口数：</nz-col>
<nz-col nzSpan="8">100</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-col nzSpan="16">接口数：</nz-col>-->
<!-- <nz-col nzSpan="8">100</nz-col>-->
<!-- </nz-row>-->
</div>
</nz-col>
......@@ -135,7 +135,7 @@
</div>
<div class="host-item-content">
<nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
<div echarts [options]="chartTrendOption" style="height:360px;width: 100%"></div>
</nz-spin>
</div>
</div>
......
src/main/webapp/app/overAll/modal/server/server.component.ts
View file @ 954cc6d9
......@@ -134,6 +134,7 @@ export class ServerComponent implements OnInit {
(res) => {
this.hostObj.disk = res.data.disks;
if (this.hostObj.disk.length > 0) {
this.diskType = 0;
this.setDiskChart(0);
}
}
......@@ -149,7 +150,6 @@ export class ServerComponent implements OnInit {
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
......@@ -168,7 +168,7 @@ export class ServerComponent implements OnInit {
},
labelLine: {
normal: {
show: false
show: true
}
},
data: [
......@@ -178,6 +178,7 @@ export class ServerComponent implements OnInit {
}
]
};
this.isDiskLoading = false;
}
//获取趋势数据
......
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