summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-12-19 15:20:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-12-19 15:21:02 +0800
commita2cd3a3f639dc40fb4d55125de9fbe6db9960d1f (patch)
tree46f46d45e778d4f0766900f4dec6446ad101f303
parent1c006f9d6141e264961f0fed4cbd27b931580dd5 (diff)
feat:Optimize monitoring interface chart loading of slicing monitor page
Change-Id: I065fef0815a944824baa41d6925aed455a85fcec Issue-ID: USECASEUI-370 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html21
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less7
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts8
3 files changed, 29 insertions, 7 deletions
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
index 921e5edb..3f51dbc9 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html
@@ -15,16 +15,25 @@
</div>
<div nz-row nzType="flex" class="charts">
<div nz-col nzSpan="6" class="gutter-row col-boxshadow">
- <h4>Slicing Use Traffic</h4>
- <app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
+ <nz-spin [nzSpinning]="isSpinningTraffic">
+ <h4>Slicing Use Traffic</h4>
+ <app-pie [initData]="trafficChartInit" [chartData]="trafficChartData"></app-pie>
+ <div *ngIf="!isSpinningTraffic && trafficData.length === 0" class="nodata">NO Data</div>
+ </nz-spin>
</div>
<div nz-col nzSpan="8" class="gutter-row col-boxshadow">
- <h4>Number Of Online Users</h4>
- <app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line>
+ <nz-spin [nzSpinning]="isSpinningOnlineuser">
+ <h4>Number Of Online Users</h4>
+ <app-line [initData]="onlineuserChartInit" [chartData]="onlineuserChartData"></app-line>
+ <div *ngIf="!isSpinningOnlineuser && onlineusersData.length === 0" class="nodata">NO Data</div>
+ </nz-spin>
</div>
<div nz-col nzSpan="8" class="gutter-row col-boxshadow">
- <h4>Slicing Total Bandwidth</h4>
- <app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line>
+ <nz-spin [nzSpinning]="isSpinningBandwidth">
+ <h4>Slicing Total Bandwidth</h4>
+ <app-line [initData]="bandwidthChartInit" [chartData]="bandwidthChartData"></app-line>
+ <div *ngIf="!isSpinningBandwidth && bandwidthData.length === 0" class="nodata">NO Data</div>
+ </nz-spin>
</div>
</div>
<div class="slicing-resource-table">
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
index f740102b..1445978f 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less
@@ -15,11 +15,18 @@
}
.col-boxshadow {
padding: 25px;
+ position: relative;
margin: 0 1%;
border-radius: 5px;
box-shadow: #a9a9a92e 0px 0px 15px 10px;
h4 {
font-size: 18px;
}
+ .nodata{
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%);
+ }
}
} \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
index 21132892..bfee94f4 100644
--- a/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
+++ b/usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts
@@ -19,6 +19,9 @@ export class Monitor5gComponent implements OnInit {
total: number = 0;
loading = false;
selectDate: number = 0;
+ isSpinningTraffic: boolean =true;
+ isSpinningOnlineuser: boolean =true;
+ isSpinningBandwidth: boolean =true;
trafficData: any[] = [];
trafficLegend: any[] = [];
@@ -83,7 +86,7 @@ export class Monitor5gComponent implements OnInit {
service_list:[]
};
this.listOfData.forEach(item => {
- requestBody.service_list.push({ service_id: item.service_instance_id });
+ requestBody.service_list.push({ service_id: item.service_snssai });
});
this.fetchTrafficData(requestBody, time);
this.fetchOnlineusersData(requestBody, time);
@@ -91,6 +94,7 @@ export class Monitor5gComponent implements OnInit {
}
fetchTrafficData(service_list, time) {
this.myhttp.getFetchTraffic(service_list, time).subscribe(res => {
+ this.isSpinningTraffic = false;
const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res;
if (+result_code === 200 && slicing_usage_traffic_list.length > 0) {
this.trafficData = [];
@@ -123,6 +127,7 @@ export class Monitor5gComponent implements OnInit {
}
fetchOnlineusersData(service_list, time) {
this.myhttp.getFetchOnlineusers(service_list, time).subscribe(res => {
+ this.isSpinningOnlineuser = false;
const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res;
if (+result_code === 200) {
this.onlineuserXAxis = [];
@@ -155,6 +160,7 @@ export class Monitor5gComponent implements OnInit {
}
fetchBandwidthData(service_list, time) {
this.myhttp.getFetchBandwidth(service_list, time).subscribe(res => {
+ this.isSpinningBandwidth = false;
const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res;
if (+result_code === 200) {
this.bandwidthXAxis = [];