feat: Completed the interaction logic in the task processing component

Change-Id: Ia3b6a4adb00a3c4b1d51ba6e2f63e7713881090e
Issue-ID: USECASEUI-352
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

12 files changed, 302 insertions, 33 deletions

diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts
index be380b85..f618acdf 100644
--- a/usecaseui-portal/src/app/app.module.ts
+++ b/usecaseui-portal/src/app/app.module.ts
@@ -89,7 +89,8 @@ import { SlicingResourceManagementComponent } from './views/services/slicing-man
 import { SlicingTaskModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component';
 import { SlicingBusinessManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component'
 import { NsiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-management.component'
-import { NssiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-management.component'
+import { NssiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-management.component';
+import { SubnetParamsModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component'
 
 @NgModule({
   providers: [
@@ -144,7 +145,8 @@ import { NssiManagementComponent } from './views/services/slicing-management/sli
     SlicingTaskModelComponent,
     SlicingBusinessManagementComponent,
     NsiManagementComponent,
-    NssiManagementComponent
+    NssiManagementComponent,
+    SubnetParamsModelComponent
   ],
   imports: [
     BrowserModule,
diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index fa0a42fd..165bb80e 100644
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -24,7 +24,10 @@ export class SlicingTaskServices {
     url = {

         slicingTaskList: this.baseUrl + "/task/business/pageNo/{pageNo}/pageSize/{pageSize}",

         taskProcessingStatus: this.baseUrl + '/task/{processingStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}',

-        auditInfo: this.baseUrl + '/task/{taskId}/auditInfo'

+        auditInfo: this.baseUrl + '/task/{taskId}/auditInfo',

+        slicingInstance: this.baseUrl + '/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}',

+        slicingSubnetInstance: this.baseUrl + '/resource/nsi/{nsiId}/nssiInstances',

+        subnetInContext: this.baseUrl + '/resource/nssi/{environmentContext}/instances/pageNo/{pageNo}/pageSize/{pageSize}',

     }

 

 

@@ -49,6 +52,23 @@ export class SlicingTaskServices {
         const url = this.url.auditInfo.replace('{taskId}', taskId);

         return this.http.get<any>(url);

     }

+    getSlicingInstance (pageNo: string, pageSize: string){

+        const url = this.url.slicingInstance

+                        .replace("{pageNo}", pageNo)

+                        .replace("{pageSize}", pageSize);

+        return this.http.get<any>(url);

+    }

+    getSlicingSubnetInstance(nsiId: string){

+        const url = this.url.slicingSubnetInstance.replace('{nsiId}', nsiId);

+        return this.http.get<any>(url);

+    }

+    getSubnetInContext (context: string, pageNo: string, pageSize: string) {

+        const url = this.url.subnetInContext

+                        .replace('{environmentContext}', context)

+                        .replace('{pageNo', pageNo)

+                        .replace('{pageSize}', pageSize);

+        return this.http.get<any>(url);

+    }

 }

 

 

diff --git a/usecaseui-portal/src/app/mock/json/slicing_instance.json b/usecaseui-portal/src/app/mock/json/slicing_instance.json
new file mode 100644
index 00000000..11c7f7bf
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_instance.json
@@ -0,0 +1,22 @@
+{

+	"result_header": {

+		"result_code": "200",

+		"result_message": "5G slicing NSI service instances result."

+	},

+	"result_body": {

+		"record_number": 2,

+		"nsi_service_instances": [

+			{

+				"service_instance_order": "1",

+				"service_instance_id": "46da8cf8-0878-48ac-bea3-f2200959411a",

+				"service_instance_name": "eMBB instancel"

+			},

+			{

+				"service_instance_order": "2",

+				"service_instance_id": "46da8cf8-0878-48bc-bea3-f2200959411a",

+				"service_instance_name": "eMBB instance2"

+			}

+		]

+	}

+}

+

diff --git a/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json b/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json
new file mode 100644
index 00000000..b44d2135
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json
@@ -0,0 +1,27 @@
+{

+	"result_header":{

+		"result_code":"200",

+		"result_message":"5G slicing NSSI query based on environment context result."

+	},

+	"result_body":{

+		"record_number":2,

+		"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_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_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
new file mode 100644
index 00000000..62e690a6
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json
@@ -0,0 +1,14 @@
+{

+    "result_header": {

+        "result_code": "200",

+        "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"

+    }

+}

diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index fe982ca5..4f91b651 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -91,10 +91,13 @@ module.exports =
         "/POST/uui-lcm/vf-packages": "/POST_uui-lcm_vf-packages",
         "/POST/uui-lcm/:jsonData": "/POST_uui-lcm_create",
 
-        ///////<-------------slicing-tesk-management--------->/////
+        ///////<-------------slicing--------->/////
         "/uui-slicing/nsmf/task/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_list",
         "/uui-slicing/nsmf/task/:processingStatus/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_processing_status",
         "/uui-slicing/nsmf/task/:taskId/auditInfo": "/slicing_task_auditInfo",
+        "/uui-slicing/nsmf/resource/nsi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_instance",
+        "/uui-slicing/nsmf/resource/nsi/:nsiId/nssiInstances": "/slicing_subnet_instance",
+        "/uui-slicing/nsmf/resource/nssi/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_subnet_context",
 
         ///////<-------------general interface--------->/////
         "/api/*": "/$1",
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 89d64f51..3aca68fb 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
@@ -55,15 +55,19 @@
       <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
         <div nz-col nzSpan="12">
           切片实例 ID：
-          <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)">
-            <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+          <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>
         </div>
         <div nz-col nzSpan="8">
-          切片实例名称：{{selectedServiceName}}
+          切片实例名称：{{ selectedServiceName }}
         </div>
         <div nz-col nzSpan="4">
-          <button nz-button nzType="primary" (click)="resetService()">
+          <button nz-button nzType="primary" (click)="resetSlicingInstance()">
             <i nz-icon class="anticon anticon-plus"></i>
           </button>
         </div>
@@ -74,23 +78,26 @@
           <div nz-row [nzGutter]="8">
             <div nz-col nzSpan="12">
               切片子网实例 ID：
-              <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="serviceIdChange($event)">
-                <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option>
+              <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)" (nzOpenChange)="getSubnetInstances($event, item)">
+                <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option>
               </nz-select>
             </div>
             <div nz-col nzSpan="8">
               切片子网实例名称：{{item.slicingName}}
             </div>
             <div nz-col nzSpan="4">
-              <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon
-                  class="anticon anticon-plus"></i></button>
-              <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting"
-                  nzTheme="outline"></i></button>
+              <button nz-button nzType="primary" (click)="restSubnetInstance(item)"> 
+                <i nz-icon class="anticon anticon-plus"></i>
+              </button>
+              <button nz-button nzType="primary" (click)="showParamsModel(item)"> 
+                <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i>
+              </button>
             </div>
           </div>
         </nz-card>
       </nz-list-item>
     </nz-list>
   </div>
+  <app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle" (cancel)="isShowParams=$event"></app-subnet-params-model>
 
 </nz-modal>
\ No newline at end of file
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 8d61029e..88eb586a 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
@@ -26,24 +26,36 @@ export class SlicingTaskModelComponent implements OnInit {
   // 共享切片实例
   selectedServiceId: string;
   selectedServiceName: string;
+  slicingInstances: any[];
+  loading: boolean = false;
   // 子网实例
   slicingSubnet: any[] =  [
     {
       title: '无线域',
+      context: 'an',
       slicingId: '',
-      slicingName: ''
+      slicingName: '',
+      instances: []
     },
     {
       title: '传输域',
+      context: 'tn',
       slicingId: '',
-      slicingName: ''
+      slicingName: '',
+      instances: []
     },
     {
       title: '核心网域',
+      context: 'cn',
       slicingId: '',
-      slicingName: ''
+      slicingName: '',
+      instances: []
     }
   ]
+  // 子网参数
+  isShowParams: boolean;
+  paramsTitle: string;
+  params: any;
 
   ngOnInit() { }
   
@@ -66,7 +78,23 @@ export class SlicingTaskModelComponent implements OnInit {
           tn_suggest_nssi_id, 
           tn_suggest_nssi_name, 
           cn_suggest_nssi_id, 
-          cn_suggest_nssi_name } = nsi_nssi_info;
+          cn_suggest_nssi_name,
+          an_latency,
+          an_5qi,
+          an_coverage_area_ta_list, 
+          tn_latency,
+          tn_bandwidth,
+          cn_service_snssai,
+          cn_resource_sharing_level,
+          cn_ue_mobility_level,
+          cn_latency,
+          cn_max_number_of_ues,
+          cn_activity_factor,
+          cn_exp_data_rate_dl,
+          cn_exp_data_rate_ul,
+          cn_area_traffic_cap_dl,
+          cn_area_traffic_cap_ul
+        } = nsi_nssi_info;
         // 处理配置审核详情数据
         this.checkDetail = [{ task_id, task_name, create_timer, processing_status, service_snssai }];
         // 业务需求信息数据
@@ -75,38 +103,124 @@ 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.slicingSubnet[0].slicingId = an_suggest_nssi_id;
         this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
+        this.slicingSubnet[0].instances = [{
+          service_instance_id: an_suggest_nssi_id,
+          service_instance_name: an_suggest_nssi_name
+        }];
+        this.slicingSubnet[0].params = { an_latency, an_5qi, an_coverage_area_ta_list } 
+
         this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
         this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
+        this.slicingSubnet[1].instances = [{
+          service_instance_id: tn_suggest_nssi_id,
+          service_instance_name: tn_suggest_nssi_name
+        }]; 
+        this.slicingSubnet[1].params = { tn_latency, tn_bandwidth };
+
         this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
         this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
+        this.slicingSubnet[2].instances = [{
+          service_instance_id: cn_suggest_nssi_id,
+          service_instance_name: cn_suggest_nssi_name
+        }];
+        this.slicingSubnet[2].params = { 
+          cn_service_snssai,
+          cn_resource_sharing_level,
+          cn_ue_mobility_level,
+          cn_latency,
+          cn_max_number_of_ues,
+          cn_activity_factor,
+          cn_exp_data_rate_dl,
+          cn_exp_data_rate_ul,
+          cn_area_traffic_cap_dl,
+          cn_area_traffic_cap_ul 
+        };
       }
     })
   }
 
+  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;
+        }
+      })
+    }
+  }
 
+  slicingInstanceChange ():void {
+    // 获取切片子网实例数据
+    this.http.getSlicingSubnetInstance(this.selectedServiceId).subscribe( res => {
+      const { result_header: { result_code }, result_body} = res;
+      if (+result_code === 200) {
+        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 } = result_body;
+        this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
+        this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
+        this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
+        this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
+        this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
+        this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
+      }
+    }) 
+    this.slicingInstances.forEach (item => {
+      if (item.service_instance_id === this.selectedServiceId) {
+        this.selectedServiceName = item.service_instance_name;
+      }
+    })
+  }
 
+  resetSlicingInstance (): void {
+    this.selectedServiceId = '';
+    this.selectedServiceName = '';
+    this.slicingSubnet.map( item => {
+      item.slicingId = '';
+      item.slicingName = '';
+    })
+  }
 
+  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;
+            }
+          })
+        }
+      })
+    }
+  }
 
+  slicingSubnetChange (instance: any): void {
+    instance.instances.forEach( item => {
+      if (instance.slicingId === item.service_instance_id) {
+        instance.slicingName = item.service_instance_name; 
+      }
+    })
+  }
 
-  serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c'];
-  serviceData: {} = {
-    "46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela",
-    "46da8cf8-0878-48ac-bea3-f2200959411b": "eMBB instancelb",
-    "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc",
-  };
-
-
-
-  serviceIdChange(value: string): void {
-    this.selectedServiceName = this.serviceData[value];
-    console.log(this.selectedServiceName, "=====")
+  restSubnetInstance (instance: any): void {
+    instance.slicingId = '';
+    instance.slicingName = '';
   }
-  resetService() {
-    this.selectedServiceId = "";
-    this.serviceIdChange(this.selectedServiceId);
+
+  showParamsModel (item: any): void {
+    this.isShowParams = true;
+    this.paramsTitle = item.title;
+    this.params = item.params
   }
 
   handleCancel() {
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
new file mode 100644
index 00000000..04042d7f
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
@@ -0,0 +1,2 @@
+<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="750px">
+</nz-modal>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts
new file mode 100644
index 00000000..b5325d85
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubnetParamsModelComponent } from './subnet-params-model.component';
+
+describe('SubnetParamsModelComponent', () => {
+  let component: SubnetParamsModelComponent;
+  let fixture: ComponentFixture<SubnetParamsModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SubnetParamsModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubnetParamsModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
new file mode 100644
index 00000000..ec8790ab
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { WIRELESS_FORM_ITEMS, TRANSFRER_FORM_ITEMS } from '../.../../../../../../../../constants/constants'
+
+@Component({
+	selector: 'app-subnet-params-model',
+	templateUrl: './subnet-params-model.component.html',
+	styleUrls: ['./subnet-params-model.component.less']
+})
+export class SubnetParamsModelComponent implements OnInit {
+
+	@Input() showModel: boolean;
+	@Input() detailData: any;
+	@Input() title: string;
+	@Output() cancel = new EventEmitter<boolean>();
+
+	transferFormItems = TRANSFRER_FORM_ITEMS;
+
+	constructor() { }
+
+	ngOnInit() {
+
+	}
+
+	handleCancel() {
+		this.showModel = false
+		this.cancel.emit(this.showModel)
+	}
+
+	handleOk(): void {
+		this.handleCancel()
+	}
+
+}