diff options
author | 2019-12-06 15:17:58 +0800 | |
---|---|---|
committer | 2019-12-06 15:18:08 +0800 | |
commit | 062d590f790d0c9cc1e625d21cc004520cd37bd7 (patch) | |
tree | 885748384132cf4e3aad608f553aceb56f965a50 /usecaseui-portal | |
parent | 7d078fad22472cedc7bf7dc872ea60c283828ef1 (diff) |
feat: Added drop-down loading function to the select box of task processing component
Change-Id: I26183b4e2ff2070a1e3e770aa827655ebc3643ea
Issue-ID: USECASEUI-368
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
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) { |