diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
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); } }) |