Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div>
<nz-row>
<nz-col nzSpan="12">
<div class="padding-10" style="height: 20%;">
<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 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="noData">
<div class="img-noData" style="min-height: 400px">
<div class="noData" title="暂无数据"></div>
</div>
</ng-container>
<ng-container *ngIf="hostObj.disk.length > 0">
<nz-spin [nzSpinning]="isDiskLoading">
<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-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>
<nz-col class="padding-right-10" nzSpan="12">
<p class="host-item-title">基本信息</p>
<div class="host-item-content" style="height: 300px;">
<nz-row>
<nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16">{{server?.waringName}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">名称：</nz-col>
<nz-col nzSpan="16">{{server?.name}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">IP地址：</nz-col>
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
</nz-row>
<nz-row>
<nz-col nzSpan="8">设备类型：</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-row>
<nz-row>
<nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.person || '-'}}</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col class="padding-left-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<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>
</nz-row>
<nz-row>
<nz-col nzSpan="16">Ping延时(ms)：</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>-->
</div>
</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col nzSpan="12">
<div class="padding-10" style="height: 50%;position: relative">
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(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>
</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>
<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">
可用性历史趋势
</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>
<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>
</div>