summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r--usecaseui-portal/src/app/mock/json/slicing_subnet_context.json72
-rw-r--r--usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json12
-rw-r--r--usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json8
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html49
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts147
5 files changed, 230 insertions, 58 deletions
diff --git a/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json b/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json
index b44d2135..ca33f845 100644
--- a/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json
+++ b/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json
@@ -4,20 +4,84 @@
"result_message":"5G slicing NSSI query based on environment context result."
},
"result_body":{
- "record_number":2,
+ "record_number": 26,
"nssi_service_instances":[
{
"service_instance_order":"1",
"service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZX",
- "service_instance_name":"slicing_core_notwork",
+ "service_instance_name":"slicing_core_notwork1",
"service_type":"slicing_core_notwork",
"environment_context":"cn",
"orchestration_status":"activated"
},
{
"service_instance_order":"2",
- "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZX",
- "service_instance_name":"slicing_core_notwork",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZY",
+ "service_instance_name":"slicing_core_notwork2",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"3",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZZ",
+ "service_instance_name":"slicing_core_notwork3",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"4",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZA",
+ "service_instance_name":"slicing_core_notwork4",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"5",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZB",
+ "service_instance_name":"slicing_core_notwork5",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"6",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZC",
+ "service_instance_name":"slicing_core_notwork6",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"7",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZD",
+ "service_instance_name":"slicing_core_notwork7",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"8",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZE",
+ "service_instance_name":"slicing_core_notwork8",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"9",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZF",
+ "service_instance_name":"slicing_core_notwork9",
+ "service_type":"slicing_core_notwork",
+ "environment_context":"cn",
+ "orchestration_status":"activated"
+ },
+ {
+ "service_instance_order":"10",
+ "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZG",
+ "service_instance_name":"slicing_core_notwork10",
"service_type":"slicing_core_notwork",
"environment_context":"cn",
"orchestration_status":"activated"
diff --git a/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json b/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json
index 62e690a6..24914c3f 100644
--- a/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json
+++ b/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json
@@ -4,11 +4,11 @@
"result_message": "NSSI associated with NSI result."
},
"result_body": {
- "an_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
- "an_suggest_nssi_name": "eMBBANinstance1",
- "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
- "tn_suggest_nssi_name": "eMBBTNinstance1",
- "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
- "cn_suggest_nssi_name": "eMBBCNinstance1"
+ "an_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
+ "an_suggest_nssi_name": "eMBB AN instance1",
+ "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411b",
+ "tn_suggest_nssi_name": "eMBB TN instance2",
+ "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411c",
+ "cn_suggest_nssi_name": "eMBB CN instance3"
}
}
diff --git a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
index 4e570cc9..a3b97c82 100644
--- a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
+++ b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
@@ -35,12 +35,12 @@
"an_latency": "10",
"an_5qi": "8",
"an_coverage_area_ta_list": ["北京;北京市;海淀区", "北京;北京市;西城区", "北京;北京市;昌平区"],
- "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
- "tn_suggest_nssi_name": "eMBB TNinstance1",
+ "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411b",
+ "tn_suggest_nssi_name": "eMBB TNinstance2",
"tn_latency": "10",
"tn_bandwidth": "300",
- "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",
- "cn_suggest_nssi_name": "eMBB CNinstance1",
+ "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411c",
+ "cn_suggest_nssi_name": "eMBB CNinstance3",
"cn_service_snssai": "1-010101",
"cn_resource_sharing_level": "shared",
"cn_ue_mobility_level": "stageary",
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
index afec64a7..19c83728 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html
@@ -8,14 +8,29 @@
</app-basic-info>
<div>
- <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null">
+ <nz-list class="taskmodel_list" nzBordered [nzHeader]="'匹配共享切片实例：'" [nzFooter]="null" *ngIf="slicingInstances">
<nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
<div nz-col nzSpan="12">
切片实例 ID：
- <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="slicingInstanceChange()"
- (nzOpenChange)="getSlicingData($event)">
- <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id"
- [nzLabel]="item.service_instance_id"></nz-option>
+ <nz-select
+ nzShowSearch
+ [(ngModel)]="selectedServiceId"
+ (nzOpenChange)="openSlicingInstance($event)"
+ (nzScrollToBottom)="getNextPageData()"
+ (ngModelChange)="slicingInstanceChange()"
+ >
+ <nz-option
+ nzCustomContent
+ *ngFor="let item of slicingInstances.list"
+ [nzValue]="item.service_instance_id"
+ [nzLabel]="item.service_instance_id"
+ >
+ <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}}
+ </nz-option>
+ <nz-option *ngIf="slicingInstances.isLoading" nzDisabled nzCustomContent>
+ <i class="anticon anticon-loading anticon-spin loading-icon"></i>
+ Loading Data...
+ </nz-option>
</nz-select>
</div>
<div nz-col nzSpan="8">
@@ -33,10 +48,26 @@
<div nz-row [nzGutter]="8">
<div nz-col nzSpan="12">
切片子网实例 ID：
- <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)"
- (nzOpenChange)="getSubnetInstances($event, item)" [nzDisabled]="isDisabled">
- <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id"
- [nzLabel]="item.service_instance_id"></nz-option>
+ <nz-select
+ nzShowSearch
+ [nzDisabled]="isDisabled"
+ [(ngModel)]="item.slicingId"
+ (ngModelChange)="slicingSubnetChange(item)"
+ (nzOpenChange)="openSubnetInstances($event, item)"
+ (nzScrollToBottom)="getNextPageSubnet(item)"
+ >
+ <nz-option
+ nzCustomContent
+ *ngFor="let item of item.instances"
+ [nzValue]="item.service_instance_id"
+ [nzLabel]="item.service_instance_id"
+ >
+ <span>{{item.service_instance_name + ' -- '}}</span> {{item.service_instance_id}}
+ </nz-option>
+ <nz-option *ngIf="item.isLoading" nzDisabled nzCustomContent>
+ <i class="anticon anticon-loading anticon-spin loading-icon"></i>
+ Loading Data...
+ </nz-option>
</nz-select>
</div>
<div nz-col nzSpan="8">
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
index fa27d9e5..9d0e3aec 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
@@ -23,7 +23,7 @@ export class SlicingTaskModelComponent implements OnInit {
// 共享切片实例
selectedServiceId: string;
selectedServiceName: string;
- slicingInstances: any[];
+ slicingInstances: any;
loading: boolean = false;
// 子网实例
slicingSubnet: any[] = [
@@ -32,6 +32,11 @@ export class SlicingTaskModelComponent implements OnInit {
context: 'an',
slicingId: '',
slicingName: '',
+ total: 0,
+ currentPage: '1',
+ pageSize: '10',
+ isLoading: false,
+ flag: false,
instances: []
},
{
@@ -39,6 +44,11 @@ export class SlicingTaskModelComponent implements OnInit {
context: 'tn',
slicingId: '',
slicingName: '',
+ total: 0,
+ currentPage: '1',
+ pageSize: '10',
+ isLoading: false,
+ flag: false,
instances: []
},
{
@@ -46,20 +56,29 @@ export class SlicingTaskModelComponent implements OnInit {
context: 'cn',
slicingId: '',
slicingName: '',
+ total: 0,
+ currentPage: '1',
+ pageSize: '10',
+ isLoading: false,
+ flag: false,
instances: []
}
]
+ isDisabled: boolean = true;
// 子网参数
isShowParams: boolean;
paramsTitle: string;
params: any;
- isDisabled: boolean = true;
+
+
ngOnInit() { }
ngOnChanges() {
if (this.showDetail) {
this.getautidInfo();
+ } else {
+ this.isDisabled = true;
}
}
@@ -110,13 +129,20 @@ export class SlicingTaskModelComponent implements OnInit {
// 共享切片实例
this.selectedServiceId = suggest_nsi_id;
this.selectedServiceName = suggest_nsi_name;
- this.slicingInstances = [{
- service_instance_id: this.selectedServiceId,
- service_instance_name: this.selectedServiceName
- }];
+ this.slicingInstances = {
+ currentPage: '1',
+ pageSize: '10',
+ isLoading: false,
+ total: 0,
+ flag: false,
+ list: [{
+ service_instance_id: this.selectedServiceId,
+ service_instance_name: this.selectedServiceName
+ }]
+ }
// 子网实例
let subnetData = { an_suggest_nssi_id, an_suggest_nssi_name, tn_suggest_nssi_id, tn_suggest_nssi_name, cn_suggest_nssi_id, cn_suggest_nssi_name};
- this.subnetDataFormatting(subnetData);
+ this.subnetDataFormatting(subnetData, 0);
this.slicingSubnet[0].params = { an_latency, an_5qi, an_coverage_area_ta_list }
this.slicingSubnet[1].params = { tn_latency, tn_bandwidth };
this.slicingSubnet[2].params = {
@@ -135,39 +161,63 @@ export class SlicingTaskModelComponent implements OnInit {
})
}
- getSlicingData ( bool: boolean): void {
- this.loading = true;
- if (bool && this.slicingInstances.length === 1) {
- this.http.getSlicingInstance('1', '10').subscribe ( res => {
- this.loading = false;
- const { result_header: { result_code }, result_body: { nsi_service_instances } } = res
- if (+result_code === 200) {
- this.slicingInstances = nsi_service_instances;
- }
- })
+ openSlicingInstance ( bool: boolean): void {
+ const { total, currentPage, pageSize} = this.slicingInstances;
+ if (bool && !total) {
+ this.slicingInstances.list = [];
+ this.getSlicingInstances(currentPage, pageSize)
}
}
+ getNextPageData ():void {
+ const { total, currentPage, pageSize} = this.slicingInstances;
+ if (total - (+currentPage * +pageSize) > 0 ) {
+ if (this.slicingInstances.flag) return;
+ this.slicingInstances.isLoading = true;
+ this.slicingInstances.flag = true
+ setTimeout( () => {
+ this.getSlicingInstances(currentPage, pageSize)
+ }, 2000)
+ this.slicingInstances.currentPage ++ ;
+ }
+ }
+
+ getSlicingInstances(pageNo: string, pageSize: string): void {
+ this.http.getSlicingInstance(pageNo, pageSize).subscribe ( res => {
+ const { result_header: { result_code }, result_body } = res;
+ if (+result_code === 200) {
+ const { nsi_service_instances, record_number } = result_body;
+ this.slicingInstances.total = record_number;
+ this.slicingInstances.list.push(...nsi_service_instances);
+ this.slicingInstances.isLoading = false;
+ this.slicingInstances.flag = false;
+ }
+ })
+ }
+
+
slicingInstanceChange ():void {
this.isDisabled = true;
// 获取切片子网实例数据
this.http.getSlicingSubnetInstance(this.selectedServiceId).subscribe( res => {
- const { result_header: { result_code }, result_body} = res;
+ const { result_header: { result_code }, result_body, record_number} = res;
if (+result_code === 200) {
- this.subnetDataFormatting(result_body)
+ this.subnetDataFormatting(result_body, record_number)
}
})
- this.slicingInstances.forEach (item => {
+ this.slicingInstances.list.forEach (item => {
if (item.service_instance_id === this.selectedServiceId) {
this.selectedServiceName = item.service_instance_name;
}
})
}
- subnetDataFormatting ( subnetData: any): void{
+ subnetDataFormatting ( subnetData: any, total: number): void{
const { an_suggest_nssi_id, an_suggest_nssi_name, tn_suggest_nssi_id, tn_suggest_nssi_name, cn_suggest_nssi_id, cn_suggest_nssi_name } = subnetData;
this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
+ this.slicingSubnet[0].total = total;
+ this.slicingSubnet[0].currentPage = '1';
this.slicingSubnet[0].instances = [{
service_instance_id: an_suggest_nssi_id,
service_instance_name: an_suggest_nssi_name
@@ -175,13 +225,17 @@ export class SlicingTaskModelComponent implements OnInit {
this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
- this.slicingSubnet[1].instances = [{
+ this.slicingSubnet[1].total = total;
+ this.slicingSubnet[1].currentPage = '1';
+ this.slicingSubnet[1].instances = [{
service_instance_id: tn_suggest_nssi_id,
service_instance_name: tn_suggest_nssi_name
- }];
+ }];
this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
+ this.slicingSubnet[2].total = total;
+ this.slicingSubnet[2].currentPage = '1';
this.slicingSubnet[2].instances = [{
service_instance_id: cn_suggest_nssi_id,
service_instance_name: cn_suggest_nssi_name
@@ -197,22 +251,45 @@ export class SlicingTaskModelComponent implements OnInit {
})
this.isDisabled = false;
}
+
+ openSubnetInstances (bool: boolean, instance: any): void {
+ if(bool && !instance.total) {
+ instance.instances = []
+ this.getSubnetInstances(instance)
+ }
+ }
- getSubnetInstances (bool: boolean, instance: any): void {
- if(bool && instance.instances.length === 1) {
- this.http.getSubnetInContext(instance.context, '1', '10').subscribe( res => {
- const { result_header: { result_code }, result_body } = res;
- if (+result_code === 200) {
- this.slicingSubnet.map (item => {
- if (item.context === instance.context) {
- item.instances = result_body.nssi_service_instances;
- }
- })
- }
- })
+ getNextPageSubnet (instance: any): void{
+ const { total, currentPage, pageSize} = instance;
+ if(total - (+currentPage * +pageSize) > 0 ){
+ if (instance.flag) return;
+ instance.isLoading = true;
+ instance.flag = true;
+ setTimeout( () => {
+ this.getSubnetInstances(instance);
+ }, 2000)
+ instance.currentPage ++;
}
}
+ getSubnetInstances (instance: any): void {
+ const { context, currentPage, pageSize } = instance;
+ this.http.getSubnetInContext(context, currentPage, pageSize).subscribe( res => {
+ const { result_header: { result_code }, result_body } = res;
+ if (+result_code === 200) {
+ const { nssi_service_instances, record_number } = result_body;
+ this.slicingSubnet.map (item => {
+ if (item.context === context) {
+ item.total = record_number;
+ item.instances.push(...nssi_service_instances);
+ item.isLoading = false;
+ item.flag = false;
+ }
+ })
+ }
+ })
+ }
+
slicingSubnetChange (instance: any): void {
instance.instances.forEach( item => {
if (instance.slicingId === item.service_instance_id) {