summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-12-10 16:53:06 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-12-10 16:53:20 +0800
commitbff56675c3a12bafe443fbb52f5d9eea99461db7 (patch)
tree29aafcabdc95c69e4abfd12a921c64919bed2c4f /usecaseui-portal/src/app/views
parent8f0482631540bc23eeb83c6d28ee05dd19057443 (diff)
feat:opmizite of slicing business page & 5G slicing monitor page
Change-Id: I8fc683a7a423605ef13b7eab43a2e816114df07e Issue-ID: USECASEUI-369 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views')
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.html4
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.less41
-rw-r--r--usecaseui-portal/src/app/views/fcaps/monitor-5g/monitor-5g.component.ts15
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html8
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts2
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html7
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts2
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html7
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less4
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts16
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts18
11 files changed, 84 insertions, 40 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 ca3c1eff..921e5edb 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
@@ -1,4 +1,4 @@
-<div>
+<div class="monitor-content">
<h1>Slicing business Monitor</h1>
<div nz-row>
<div nz-col nzSpan="12" class="monitorDate">
@@ -13,7 +13,7 @@
></nz-date-picker>
</div>
</div>
- <div nz-row nzType="flex" nzGutter="16" class="charts">
+ <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>
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 a100638b..f740102b 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
@@ -1,20 +1,25 @@
-.monitorDate{
- //margin-left: 2%;
- margin-top: 30px;
-}
-.businessmonitor_imagecontainer {
- width: 100%;
- margin-bottom: 20px;
-}
-.charts{
- margin: 30px 0 10px 0;
-}
-.col-boxshadow{
- padding: 25px;
- margin: 0 10px;
- border-radius: 5px;
- box-shadow: #a9a9a92e 0px 0px 15px 10px;
- h4{
- font-size: 18px;
+.monitor-content {
+ h1{
+ padding: 20px;
+ }
+ .monitorDate {
+ margin-left: 20px;
+ margin-top: 30px;
+ }
+ .businessmonitor_imagecontainer {
+ width: 100%;
+ margin-bottom: 20px;
+ }
+ .charts {
+ margin: 30px 0 10px 10px !important;
+ }
+ .col-boxshadow {
+ padding: 25px;
+ margin: 0 1%;
+ border-radius: 5px;
+ box-shadow: #a9a9a92e 0px 0px 15px 10px;
+ h4 {
+ font-size: 18px;
+ }
}
} \ 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 e1eee188..0ad68c55 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
@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { SlicingTaskServices } from '.././../../core/services/slicingTaskServices';
import { pieChartconfig, lineChartconfig } from './monitorEchartsConfig';
+import *as moment from 'moment';
@Component({
selector: 'app-monitor-5g',
templateUrl: './monitor-5g.component.html',
@@ -90,6 +91,8 @@ export class Monitor5gComponent implements OnInit {
this.myhttp.getFetchTraffic(service_list, time).subscribe(res => {
const { result_header: { result_code }, result_body: { slicing_usage_traffic_list } } = res;
if (+result_code === 200 && slicing_usage_traffic_list.length > 0) {
+ this.trafficData = [];
+ this.trafficLegend = [];
slicing_usage_traffic_list.forEach((item) => {
this.trafficData.push({
name: item.service_id,
@@ -120,8 +123,12 @@ export class Monitor5gComponent implements OnInit {
this.myhttp.getFetchOnlineusers(service_list, time).subscribe(res => {
const { result_header: { result_code }, result_body: { slicing_online_user_list } } = res;
if (+result_code === 200) {
+ this.onlineuserXAxis = [];
+ this.onlineusersData = [];
+ this.onlineuserLegend = [];
slicing_online_user_list[0].online_user_list.map((key) => {
- this.onlineuserXAxis.push(key.timestamp)
+ let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+ this.onlineuserXAxis.push(date)
});
slicing_online_user_list.forEach((item) => {
this.onlineuserLegend.push(item.service_id);
@@ -148,8 +155,12 @@ export class Monitor5gComponent implements OnInit {
this.myhttp.getFetchBandwidth(service_list, time).subscribe(res => {
const { result_header: { result_code }, result_body: { slicing_total_bandwidth_list } } = res;
if (+result_code === 200) {
+ this.bandwidthXAxis = [];
+ this.bandwidthData = [];
+ this.bandwidthLegend = [];
slicing_total_bandwidth_list[0].total_bandwidth_list.map((key) => {
- this.bandwidthXAxis.push(key.timestamp)
+ let date = moment(Number(key.timestamp)).format('YYYY-MM-DD/HH:mm').split("/")[1];
+ this.bandwidthXAxis.push(date)
});
slicing_total_bandwidth_list.forEach((item) => {
this.bandwidthLegend.push(item.service_id);
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
index 47bd9e59..c6f41171 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.html
@@ -1,15 +1,18 @@
+<nz-spin [nzSpinning]="isSpinning">
<nz-list class="taskmodel_list" nzBordered [nzHeader]="'Carry Slicing Businress List :'" [nzFooter]="null">
<nz-table
#businessTable
[nzData]="businessList"
[nzShowPagination]="false"
nzHideOnSinglePage
+ class="model-table-padding"
>
<thead>
<tr>
<th>Service Instance Id</th>
<th>Service Instance Name</th>
<th>Service Type</th>
+ <th>S-NSSAI</th>
<th>Status</th>
<th width="100px">Detail</th>
</tr>
@@ -36,12 +39,14 @@
[nzData]="nssiList"
[nzShowPagination]="false"
nzHideOnSinglePage
+ class="model-table-padding"
>
<thead>
<tr>
<th>Service Instance Id</th>
<th>Service Instance Name</th>
<th>Service Type</th>
+ <th>Environment Context</th>
<th>Status</th>
<th width="100px">Detail</th>
</tr>
@@ -61,4 +66,5 @@
</ng-template>
</tbody>
</nz-table>
-</nz-list> \ No newline at end of file
+</nz-list>
+</nz-spin> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
index 070a483f..c34787d9 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts
@@ -18,6 +18,7 @@ export class NsiModelComponent implements OnInit {
@Input() nsiId;
businessList: any[];
nssiList: any[];
+ isSpinning: boolean = true;
ngOnInit() {
this.getNsiDetail()
}
@@ -25,6 +26,7 @@ export class NsiModelComponent implements OnInit {
this.myhttp.getSlicingNsiDetail(this.nsiId).subscribe(res => {
const {result_header: {result_code}, result_body: {hosted_business_list,included_nssi_list} } = res;
if (+result_code === 200) {
+ this.isSpinning = false;
this.businessList = hosted_business_list;
this.nssiList = included_nssi_list;
}
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
index 6be39ea0..a5da344e 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.html
@@ -1,9 +1,11 @@
-<nz-list class="taskmodel_list" nzBordered [nzHeader]="'Carry Slicing Nsi List £º'" [nzFooter]="null">
+<nz-spin [nzSpinning]="isSpinning">
+ <nz-list class="taskmodel_list" nzBordered [nzHeader]="'Carry Slicing Nsi List :'" [nzFooter]="null">
<nz-table
#nssiTable
[nzData]="nsiList"
[nzShowPagination]="false"
nzHideOnSinglePage
+ class="model-table-padding"
>
<thead>
<tr>
@@ -28,4 +30,5 @@
</ng-template>
</tbody>
</nz-table>
-</nz-list> \ No newline at end of file
+</nz-list>
+</nz-spin> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts
index 52e0f23d..d1af5457 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component.ts
@@ -16,6 +16,7 @@ export class NssiModelComponent implements OnInit {
}
@Input() nssiId;
nsiList: any[];
+ isSpinning: boolean = true;
ngOnInit() {
this.getNssiDetail()
}
@@ -23,6 +24,7 @@ export class NssiModelComponent implements OnInit {
this.myhttp.getSlicingNssiDetail(this.nssiId).subscribe(res => {
const {result_header: {result_code}, result_body: {hosted_nsi_list} } = res;
if (+result_code === 200) {
+ this.isSpinning = false;
this.nsiList = hosted_nsi_list;
}
})
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
index 9ece597e..5a11ab1d 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
@@ -1,15 +1,17 @@
+<nz-spin [nzSpinning]="isSpinning">
<app-basic-info
[businessRequirement]="businessRequirement"
[NSTinfo]="NSTinfo"
[taskModel]="taskModel"
>
</app-basic-info>
-<nz-list class="taskmodel_list" nzBordered [nzHeader]="'Slicing NSI £º'" [nzFooter]="null">
+ <nz-list class="taskmodel_list" nzBordered [nzHeader]="'Slicing NSI :'" [nzFooter]="null">
<nz-table
#basicTable
[nzData]="nsiInfo"
[nzShowPagination]="false"
nzHideOnSinglePage
+ class="model-table-padding"
>
<thead>
<tr>
@@ -34,4 +36,5 @@
</ng-template>
</tbody>
</nz-table>
-</nz-list> \ No newline at end of file
+</nz-list>
+</nz-spin> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
index 6e097cd8..8b137891 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.less
@@ -1,3 +1 @@
-.taskmodel_list{
- margin-bottom: 20px;
-} \ No newline at end of file
+
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
index 8115a79b..253e1c32 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.ts
@@ -18,9 +18,10 @@ export class SlicingBusinessModelComponent implements OnInit {
@Input() businessId;
businessRequirement: any[];
- NSTinfo: any[];
- nsiInfo: any[];
+ NSTinfo: any[] = [];
+ nsiInfo: any[] = [];
taskModel: boolean = false;
+ isSpinning: boolean = true;
ngOnInit() {
console.log(this.businessId, "id");
this.getDetail()
@@ -28,11 +29,14 @@ export class SlicingBusinessModelComponent implements OnInit {
getDetail() {
this.myhttp.getSlicingBusinessDetail(this.businessId).subscribe(res => {
- const {result_header: {result_code}, result_body: {business_demand_info,nst_info,nsi_info} } = res;
+ const { result_body, result_header: { result_code } } = res;
if (+result_code === 200) {
- // business_demand_info.coverage_area_ta_list.map((item)=>{
- // item.replace(";"," ")
- // });
+ this.isSpinning = false;
+ const {business_demand_info,business_demand_info: { coverage_area_ta_list },nst_info,nsi_info} = result_body;
+ business_demand_info.area = coverage_area_ta_list.map(item => {
+ item = item.split(';').join('-');
+ return item
+ });
this.businessRequirement = [business_demand_info];
this.NSTinfo = [nst_info];
this.nsiInfo = [nsi_info];
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
index 515a4d3d..a524b8bb 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
@@ -20,7 +20,9 @@ export class SlicingBusinessTableComponent implements OnInit {
this.getBusinessList()
}
ngOnDestroy() {
- clearInterval(this.progressingTimer);
+ this.progressingTimer.forEach((item) => {
+ clearInterval(item.timer);
+ })
}
selectedValue:string = BUSINESS_STATUS[0];
listOfData: any[] = [];
@@ -30,7 +32,7 @@ export class SlicingBusinessTableComponent implements OnInit {
loading = false;
isSelect: boolean = false;
statusOptions: any[] = BUSINESS_STATUS;
- progressingTimer :any;
+ progressingTimer :any[] = [];
getBusinessList (): void{
@@ -175,11 +177,19 @@ export class SlicingBusinessTableComponent implements OnInit {
.subscribe((data) => {
if (data.result_body.operation_progress < 100) {
callback(data.result_body);
- this.progressingTimer = setTimeout(()=>{
+ let progressSetTimeOut = setTimeout(() => {
requery();
},5000);
+ this.progressingTimer.push({
+ id:obj.serviceId,
+ timer:progressSetTimeOut
+ })
} else {
- clearInterval(this.progressingTimer);
+ this.progressingTimer.forEach((item) => {
+ if(item.serviceId === obj.serviceId){
+ clearInterval(item.timer);
+ }
+ });
res(data.result_body);
}
})