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>

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) {