feat: TN change modification

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: I7bed0f4b43e0f978b5e109bfd198c4cad2205463
Issue-ID: USECASEUI-527

6 files changed, 430 insertions, 145 deletions

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 fe7e5a1e..07e6c98c 100644
--- a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
+++ b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
@@ -18,20 +18,20 @@
             "activity_factor": "60",

             "resource_sharing_level": "shared",

             "max_number_of_ues": "10000",

-            "area_traffic_cap_ul":"222",

-            "area_traffic_cap_dl":"444",

-            "serviceProfile_Availability":"",

-            "serviceProfile_PLMNIdList":"",

-            "serviceProfile_Reliability":"test-Reliability",

-            "serviceProfile_ULThptPerUE":"1000",

-            "serviceProfile_DLThptPerUE":"2000",

-            "serviceProfile_ULThptPerSlice":"3000",

-            "serviceProfile_DLThptPerSlice":"4000",

-            "serviceProfile_MaxPktSize":"10000",

-            "serviceProfile_MaxNumberofConns":"12345",

-            "serviceProfile_TermDensity":"500",

-            "serviceProfile_Jitter":"10",

-            "serviceProfile_SurvivalTime":"10"

+            "area_traffic_cap_ul": "222",

+            "area_traffic_cap_dl": "444",

+            "serviceProfile_Availability": "",

+            "serviceProfile_PLMNIdList": "",

+            "serviceProfile_Reliability": "test-Reliability",

+            "serviceProfile_ULThptPerUE": "1000",

+            "serviceProfile_DLThptPerUE": "2000",

+            "serviceProfile_ULThptPerSlice": "3000",

+            "serviceProfile_DLThptPerSlice": "4000",

+            "serviceProfile_MaxPktSize": "10000",

+            "serviceProfile_MaxNumberofConns": "12345",

+            "serviceProfile_TermDensity": "500",

+            "serviceProfile_Jitter": "10",

+            "serviceProfile_SurvivalTime": "10"

         },

         "nst_info": {

             "nst_id": "46da8cf8-0878-48ac-bea3-f2200959411a",

@@ -47,29 +47,53 @@
             "sliceProfile_AN_uEMobilityLevel": "stationary",

             "an_latency": "10",

             "sliceProfile_AN_maxNumberofUEs": "10000",

-            "sliceProfile_AN_maxNumberofPDUSession":"10000",

+            "sliceProfile_AN_maxNumberofPDUSession": "10000",

             "sliceProfile_AN_activityFactor": "60",

             "sliceProfile_AN_expDataRateDL": "300",

             "sliceProfile_AN_expDataRateUL": "300",

             "sliceProfile_AN_areaTrafficCapDL": "300",

             "sliceProfile_AN_areaTrafficCapUL": "300",

-            "sliceProfile_AN_overallUserDensity":"test_an_overalluser_density_01",

-            "an_enableNSSISelection":false,

-            "sliceProfile_AN_ipAddress":"test_an_ip_address_01",

-            "sliceProfile_AN_logicInterfaceId":"test_an_logical_link_01",

-            "sliceProfile_AN_nextHopInfo":"sliceProfile_AN_nextHopInfo",

-            "an_script_name":"test_an_01",

+            "sliceProfile_AN_overallUserDensity": "test_an_overalluser_density_01",

+            "an_enableNSSISelection": false,

+            "sliceProfile_AN_ipAddress": "2.2.2.2",

+            "sliceProfile_AN_logicInterfaceId": "23432",

+            "sliceProfile_AN_nextHopInfo": "sliceProfile_AN_nextHopInfo",

+            "an_script_name": "test_an_01",

             "an_coverage_area_ta_list": ["北京;北京市;海淀区", "北京;北京市;西城区", "北京;北京市;昌平区"],

             "tn_bh_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411b",

             "tn_bh_suggest_nssi_name": "eMBB TNinstance2",

             "tn_bh_latency": "10",

             "tn_bh_bandwidth": "300",

-            "tn_bh_script_name":"test_tn_01",

-            "sliceProfile_TN_BH_jitte":"test_tn_jitter_01",

+            "tn_bh_script_name": "test_tn_01",

+            "sliceProfile_TN_BH_jitte": "test_tn_jitter_01",

             "sliceProfile_TN_BH_pLMNIdList": "test_sliceProfile_TN_BH_pLMNIdList",

             "sliceProfile_TN_BH_sST": "test_sliceProfile_TN_BH _sST",

-            "sliceProfile_TN_BH_sNSSAI":"test_tn_service_snssai_01",

-            "tn_bh_enableNSSISelection":false,

+            "sliceProfile_TN_BH_sNSSAI": "test_tn_service_snssai_01",

+            "sliceProfile_TN_resourceSharingLevel": "shared",

+            "tn_connection_links": ["123213"],

+            "tn_connection_links_option": [{

+                    "id": "123213",

+                    "AN": "1an",

+                    "CN": "1cn",

+                    "TN": "1tn",

+                    "properties": "1pp"

+                },

+                {

+                    "id": "123214",

+                    "AN": "2an",

+                    "CN": "2cn",

+                    "TN": "2tn",

+                    "properties": "2pp"

+                },

+                {

+                    "id": "123215",

+                    "AN": "3an",

+                    "CN": "3cn",

+                    "TN": "3tn",

+                    "properties": "3pp"

+                }

+            ],

+            "tn_bh_enableNSSISelection": false,

             "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411c",

             "cn_suggest_nssi_name": "eMBB CNinstance3",

             "cn_service_snssai": "cn_1-010101",

@@ -82,14 +106,14 @@
             "cn_exp_data_rate_ul": "300",

             "cn_area_traffic_cap_dl": "300",

             "cn_area_traffic_cap_ul": "300",

-            "cn_script_name":"test_cn_01",

-            "sliceProfile_CN_maxNumberofPDUSession":"10000",

-            "sliceProfile_CN_overallUserDensity":"test_cn_overalluser_density_01",

-            "cn_enableNSSISelection":true,

+            "cn_script_name": "test_cn_01",

+            "sliceProfile_CN_maxNumberofPDUSession": "10000",

+            "sliceProfile_CN_overallUserDensity": "test_cn_overalluser_density_01",

+            "cn_enableNSSISelection": true,

             "sliceProfile_CN_coverageAreaTAList": "",

-            "sliceProfile_CN_ipAddress":"1.1.1.1",

-            "sliceProfile_CN_logicInterfaceId":"2222",

-            "sliceProfile_CN_nextHopInfo":"nexthopj"

+            "sliceProfile_CN_ipAddress": "1.1.1.1",

+            "sliceProfile_CN_logicInterfaceId": "2222",

+            "sliceProfile_CN_nextHopInfo": "nexthopj"

         }

 

     }

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 e9ee0ecc..45dd8dc5 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
@@ -34,7 +34,8 @@
         </nz-list-item>
         <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8">
           <p class="listitem_subtitle" nz-col nzSpan="24">Matching Shared NSSI：</p>
-          <nz-card *ngFor="let item of slicingSubnet,let i = index" nzType="inner" nz-col nzSpan="24" [nzTitle]="item.title">
+          <nz-card *ngFor="let item of slicingSubnet,let i = index" nzType="inner" nz-col nzSpan="24"
+            [nzTitle]="item.title">
             <div nz-row [nzGutter]="8">
               <div nz-col nzSpan="12">
                 NSSI ID：
@@ -75,6 +76,7 @@
   <button nz-button nzType="primary" [nzLoading]='loading' (click)="handleOk()">OK</button>
 </ng-template>
 <app-subnet-params-model [showModel]="isShowParams" *ngIf="isShowParams" [detailData]="params" [title]="paramsTitle"
-  (cancel)="isShowParams=$event" (paramsDataChange)="changeParams($event)">
+  (cancel)="isShowParams=$event" (paramsDataChange)="changeParams($event)"
+  (noPassParaChange)="noPassParaChange($event)">
 </app-subnet-params-model>
 <app-notification #notification [isServicesList]="false" [parentComponent]="'slicing'"></app-notification>
\ 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 f5e5ac3c..7ac86c85 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
@@ -72,6 +72,7 @@ export class SlicingTaskModelComponent implements OnInit {
   isShowParams: boolean;
   paramsTitle: string;
   params: any;
+  noPassPara: string[];
   // 获取数据loading
   isSpinning: boolean = false;
   loading: boolean = false;
@@ -181,7 +182,22 @@ export class SlicingTaskModelComponent implements OnInit {
               'sliceProfile_AN_logicInterfaceId',
               'sliceProfile_AN_nextHopInfo'
           ]), an_coverage_area_ta_list: area};
-      this.slicingSubnet[1].params = this.pick(nsi_nssi_info, ['tn_bh_latency', 'tn_bh_bandwidth', 'tn_bh_script_name', 'sliceProfile_TN_BH_jitte', 'sliceProfile_TN_BH_sNSSAI',"tn_bh_enableNSSISelection"]);
+      this.slicingSubnet[1].params = this.pick(nsi_nssi_info, [
+        'tn_bh_latency', 
+        'tn_bh_bandwidth', 
+        'tn_bh_script_name', 
+        'sliceProfile_TN_BH_jitte', 
+        'sliceProfile_TN_BH_sNSSAI',
+        'tn_bh_enableNSSISelection', 
+        'sliceProfile_TN_resourceSharingLevel',
+        'sliceProfile_CN_logicInterfaceId',
+        'sliceProfile_CN_ipAddress',
+        'sliceProfile_CN_nextHopInfo',
+        'sliceProfile_AN_ipAddress',
+        'sliceProfile_AN_logicInterfaceId',
+        'sliceProfile_AN_nextHopInfo',
+        'tn_connection_links', 
+        'tn_connection_links_option']);
       this.slicingSubnet[2].params = {...this.pick(nsi_nssi_info, [
         'cn_service_snssai',
         'cn_resource_sharing_level',
@@ -369,7 +385,9 @@ export class SlicingTaskModelComponent implements OnInit {
     const index = this.paramsTitle === 'An' ? 0 : (this.paramsTitle === 'Tn' ? 1 : 2);
     this.slicingSubnet[index].params = params
   }
-
+  noPassParaChange (noPassPara: string[]): void {
+    this.noPassPara = noPassPara
+  }
   handleCancel(bool: boolean = false) {
     this.showDetail = false;
     this.cancel.emit({ showDetail: this.showDetail, bool });
@@ -377,6 +395,15 @@ export class SlicingTaskModelComponent implements OnInit {
   handleOk() {
     this.loading = true;
     const { selectedServiceId, selectedServiceName, slicingSubnet, checkDetail, businessRequirement, NSTinfo } = this;
+    // slicingSubnet[1] is about Tn,
+    // Delete parameters that do not need to be passed
+		this.noPassPara.forEach((item) => {
+			for (let val in slicingSubnet[1].params) {
+				if (val === item) {
+					delete slicingSubnet[1].params[val]
+				}	
+			}
+    })
     const nsi_nssi_info: object = {
       suggest_nsi_id: selectedServiceId,
       suggest_nsi_name: selectedServiceName,
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
index cde444bf..31c19d49 100644
--- 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
@@ -1,33 +1,101 @@
 <nz-modal [(nzVisible)]="showModel" [nzTitle]="title + 'Parameter'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
-	nzWidth="700px">
+	nzWidth="960px">
 	<div class="subnet_params_container">
 		<form nz-form *ngIf="title === 'Tn'">
 			<nz-form-item *ngFor="let item of transferFormItems">
-				<nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]="item.key" [ngStyle]="labelStyle(item.required)">
+				<nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]="item.key"
+					[ngStyle]="labelStyle(item.required)">
 					{{item.title}}
 				</nz-form-label>
-				<nz-form-control [nzSpan]="12">
-					<input nz-input
-						   [(ngModel)]="formData[item.key]"
-						   [name]="item.key"
-						   [id]="item.key"
-						   [readOnly]="item.title === 'S-NSSAI'"
-						   [disabled]="item.title === 'S-NSSAI'"
-						   [placeholder]="inputHolder(item.title)"
-					/>
-					<div class="validation_alert" *ngIf="item.required">{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
+				<nz-form-control [nzSpan]="16">
+					<input nz-input [(ngModel)]="formData[item.key]" [name]="item.key" [id]="item.key"
+						[readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'"
+						[placeholder]="inputHolder(item.title)" *ngIf="specialParaTN.indexOf(item.title)===-1" />
+					<nz-radio-group [name]=" item.key" [(ngModel)]="formData[item.key]"
+						*ngIf="item.title==='Resource Sharing Level'" (ngModelChange)="changeResourceShare()">
+						<label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
+							{{ option.title }}
+						</label>
+					</nz-radio-group>
+					<nz-input-group *ngIf="(item.title === 'AN Endpoint') && EndpointEnable">
+						<div *ngFor="let option of item.options;let i=index">
+							<div class="tn_endpoint_input">
+								<input nz-input [id]="option.key" [name]="option.key"
+									[title]="ANEndpointInputs[option.key]" [(ngModel)]="ANEndpointInputs[option.key]"
+									[placeholder]="option.holder" style="width:32%;margin-right:1%"
+									[disabled]="item.disable" />
+								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
+									{{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
+								</div>
+								<div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
+									{{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
+								</div>
+								<div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
+									{{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
+								</div>
+							</div>
+						</div>
+					</nz-input-group>
+					<nz-input-group *ngIf="(item.title === 'CN Endpoint') && EndpointEnable">
+						<div *ngFor="let option of item.options;let i=index">
+							<div class="tn_endpoint_input">
+								<input nz-input [id]="option.key" [name]="option.key"
+									[title]="CNEndpointInputs[option.key]" [(ngModel)]="CNEndpointInputs[option.key]"
+									[placeholder]="option.holder" style="width:32%;margin-right:1%"
+									[disabled]="item.disable" />
+								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
+									{{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
+								</div>
+								<div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
+									{{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
+								</div>
+								<div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
+									{{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
+								</div>
+							</div>
+						</div>
+					</nz-input-group>
+					<!-- connection links table -->
+					<div *ngIf="item.title === 'Connection Links'">
+						<nz-table #basicTable [nzData]="[{}]" nzShowPagination="false">
+							<thead>
+								<tr>
+									<th *ngFor="let val of item.header" class="subnet_td">{{val.title}}</th>
+									<th class="subnet_td"> action </th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr *ngFor="let t of formData[item.options.key]">
+									<td *ngFor="let val of item.header" class="subnet_td">
+										{{t[val.key]}}
+									</td>
+									<td nzShowCheckbox="true" [nzChecked]="t.checked"
+										(nzCheckedChange)="changeLinkCheck(t.id, $event)" [nzDisabled]="item.disable"
+										class="subnet_td">
+										<!-- <input type="checkbox" ng-model="t.checked" ng-change="nzCheckedChange(t.id)"> -->
+									</td>
+								</tr>
+							</tbody>
+						</nz-table>
+					</div>
+					<div class="validation_alert" *ngIf="item.required">
+						{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
 				</nz-form-control>
 			</nz-form-item>
 		</form>
 		<form nz-form *ngIf="title === 'An' || title === 'Cn'">
 			<nz-form-item *ngFor="let item of coreFormItems">
-				<nz-form-label [nzSpan]="(item.key === 'an_coverage_area_ta_list' || item.title === 'Endpoint')?7:13" [nzRequired]="item.required" *ngIf=" item.title !== 'Endpoint' || EndpointEnable " [ngStyle]="labelStyle(item.required)">
+				<nz-form-label [nzSpan]="(item.key === 'an_coverage_area_ta_list' || item.title === 'Endpoint')?7:13"
+					[nzRequired]="item.required" *ngIf=" item.title !== 'Endpoint' || EndpointEnable "
+					[ngStyle]="labelStyle(item.required)">
 					{{ item.title }}
 				</nz-form-label>
-				<nz-form-control [nzSpan]="item.title === 'Endpoint'?14:8" *ngIf="item.key !== 'an_coverage_area_ta_list'">
+				<nz-form-control [nzSpan]="item.title === 'Endpoint'?14:8"
+					*ngIf="item.key !== 'an_coverage_area_ta_list'">
 					<input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="formData[item.key]"
 						[readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'"
-						*ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Endpoint' " [placeholder]="inputHolder(item.title)"/>
+						*ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Endpoint' "
+						[placeholder]="inputHolder(item.title)" />
 					<nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]"
 						*ngIf="item.title === 'Resource Sharing Level'">
 						<label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
@@ -38,22 +106,22 @@
 						<nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options">
 						</nz-option>
 					</nz-select>
-					<div class="validation_alert" *ngIf="item.required">{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
+					<div class="validation_alert" *ngIf="item.required">
+						{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
 					<!-- 2020.08.17  Add 3 parameters for Endpoint-->
 					<!-- Comment: The following code-->
 					<nz-input-group *ngIf="item.title === 'Endpoint' && EndpointEnable">
 						<div *ngFor="let option of item.options;let i=index">
 							<div class="endpoint_input">
-								<input nz-input
-								   [id]="option.key"
-								   [name]="option.key"
-								   [title]="EndpointInputs[option.key]"
-								   [(ngModel)]="EndpointInputs[option.key]"
-								   [placeholder]="option.holder"
-								   style="width:32%;margin-right:1%" />
-								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">{{validateEndPoint(option.title, EndpointInputs[option.key])}}</div>
-								<div class="end_alert_logical"  *ngIf="option.title === 'logical_link'">{{validateEndPoint(option.title, EndpointInputs[option.key])}}</div>
-								<div class="end_alert_nexthop"  *ngIf="option.title === 'nexthop_info'">{{validateEndPoint(option.title, EndpointInputs[option.key])}}</div>
+								<input nz-input [id]="option.key" [name]="option.key"
+									[title]="EndpointInputs[option.key]" [(ngModel)]="EndpointInputs[option.key]"
+									[placeholder]="option.holder" style="width:32%;margin-right:1%" />
+								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
+									{{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
+								<div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
+									{{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
+								<div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
+									{{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
 							</div>
 						</div>
 					</nz-input-group>
@@ -61,11 +129,11 @@
 				</nz-form-control>
 				<div *ngIf="title === 'An' && item.key === 'an_coverage_area_ta_list'">
 					<div *ngFor="let area of areaList; let i = index">
-						<nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0" class="subnet_params_area"
-										 *ngFor="let item of area; let ind = index">
+						<nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0"
+							class="subnet_params_area" *ngFor="let item of area; let ind = index">
 							<nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
-									   (nzOpenChange)="handleChange(area, item)"
-									   (ngModelChange)=" handleChangeSelected(area, item) ">
+								(nzOpenChange)="handleChange(area, item)"
+								(ngModelChange)=" handleChangeSelected(area, item) ">
 								<nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
 								</nz-option>
 							</nz-select>
@@ -74,12 +142,12 @@
 							<div class="validation_alert_area">{{checkArea(area)}}</div>
 						</nz-form-control>
 						<nz-form-control [nzSpan]="1" [nzOffset]="2">
-							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="!i"
-									(click)="creatAreaList()">
+							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button"
+								*ngIf="!i" (click)="creatAreaList()">
 								<i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
 							</button>
-							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="i"
-									(click)="deleteAreaList(i)">
+							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button"
+								*ngIf="i" (click)="deleteAreaList(i)">
 								<i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
 							</button>
 						</nz-form-control>
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
index 335b377c..a8674691 100644
--- 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
@@ -1,34 +1,47 @@
-.subnet_params_container{

+.subnet_params_container {

     padding-left: 3%;

-    .subnet_params_area{

+

+    .subnet_td {

+        width: 100px;

+    }

+

+    .subnet_params_area {

         margin-right: 5px;

     }

-    .ant-btn-icon-only{

+

+    .ant-btn-icon-only {

         padding: 0 5px !important;

     }

-    .subnet_params_button{

+

+    .subnet_params_button {

         margin-top: 7px;

         margin-left: 10px;

     }

-    .subnet_params_icon{

+

+    .subnet_params_icon {

         font-size: 14px;

     }

 }

+

 .ant-form-item-label {

     text-align: left;

 }

+

 .validation_alert {

     color: red;

     position: absolute;

     top: 0;

     margin-top: 15px;

 }

+

 .validation_alert_area {

     color: red;

     margin-left: 6px;

 }

+

 .endpoint_input {

     position: relative;

+

     .end_alert_ip {

         position: absolute;

         color: red;

@@ -36,16 +49,44 @@
         margin-top: 30px;

         margin-left: 6px;

     }

+

     .end_alert_logical {

         position: absolute;

         color: red;

         top: 0;

         margin: 30px 0 0 126px;

     }

+

     .end_alert_nexthop {

         position: absolute;

         color: red;

         top: 0;

         margin: 30px 0 0 246px;

     }

+}

+

+.tn_endpoint_input {

+    position: relative;

+

+    .end_alert_ip {

+        position: absolute;

+        color: red;

+        top: 0;

+        margin-top: 30px;

+        margin-left: 6px;

+    }

+

+    .end_alert_logical {

+        position: absolute;

+        color: red;

+        top: 0;

+        margin: 30px 0 0 196px;

+    }

+

+    .end_alert_nexthop {

+        position: absolute;

+        color: red;

+        top: 0;

+        margin: 30px 0 0 396px;

+    }

 }
\ No newline at end of file
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
index 119f87d4..862e2a1f 100644
--- 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
@@ -16,17 +16,25 @@ export class SubnetParamsModelComponent implements OnInit {
 	@Input() title: string;
 	@Output() cancel = new EventEmitter<boolean>();
 	@Output() paramsDataChange = new EventEmitter<any>();
+	@Output() noPassParaChange = new EventEmitter<any>();
 
-	transferFormItems = TRANSFRER_FORM_ITEMS;
+	transferFormItems: any[] = TRANSFRER_FORM_ITEMS;
 	regxpIP =  /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; // check for correct ip address
 	formData: any;
 	coreFormItems : any = [];
 	areaList: any[] = [];
     // 2020.08.17  Add 3 parameters for Endpoint, Comment: The following code
     NexthopInfoOptions = NexthopInfo_Options;
-    EndpointInputs: object = {};
+	EndpointInputs: object = {};
+	ANEndpointInputs: object = {};
+	CNEndpointInputs: object = {};
+	ANkeyList: string[] = [];
+	CNkeyList: string[] = [];
 	EndpointEnable: boolean = true;  // Whether to enable the three parameters of Endpoint
 	keyList: string[] = []; // keys of endPoint
+	specialParaTN: string[] = ['Resource Sharing Level', 'Connection Links', 'AN Endpoint', 'CN Endpoint'];
+	// Parameters not passed to the back end
+	notPassPara: string[] = ['tn_connection_links'];
     //  Comment: Above code
 
 	constructor(
@@ -39,44 +47,119 @@ export class SubnetParamsModelComponent implements OnInit {
 	 }
 
 	ngOnChanges() {
-		if(this.title){
+		if (this.title) {
 			this.formData = JSON.parse(JSON.stringify(this.detailData));
 			if (this.title === 'An' || this.title === 'Cn') {
 				this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[];
 				this.keyList = this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).options.map((val) => {return val.key});
-				if(this.formData !==undefined && Object.keys(this.formData).length!==0){
-				this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)})
-				}
-				if(this.EndpointEnable){
-				this.EndpointInputs = this.Util.pick(this.formData, this.keyList)// no?
-				}else{
-				this.coreFormItems.map((item,index)=>{
-				if(item.title === 'Endpoint'){
-				this.coreFormItems.splice(index,1)
 				}
+			else if (this.title === 'Tn') {
+				this.ANkeyList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options.map((val) => {return val.key})
+				this.CNkeyList = this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).options.map((val) => {return val.key})
+				this.keyList = this.ANkeyList.concat(this.CNkeyList)
+				this.formData['tn_connection_links_option'].forEach((item) => { // add init selection status
+					if (this.formData['tn_connection_links']!== null && this.formData['tn_connection_links'].indexOf(item.id) !== -1) {
+						item.checked = true
+					} else {
+						item.checked = false
+					}
 				})
+				this.judgeTn() // init judge
+			}
+			// If the endpoint related parameters from the back end are incomplete, delete the endpoint item
+			if(this.formData !==undefined && Object.keys(this.formData).length!==0) {
+				this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)})
+			}
+			if(this.EndpointEnable){
+				if (this.title === 'An' || this.title === 'Cn') {
+					this.EndpointInputs = this.Util.pick(this.formData, this.keyList)
+				} else if (this.title === 'Tn') {
+					this.ANEndpointInputs = this.Util.pick(this.formData, this.ANkeyList)
+					this.CNEndpointInputs = this.Util.pick(this.formData, this.CNkeyList)
+			} else {
+				if (this.title === 'An' || this.title === 'Cn') {
+					this.coreFormItems.map((item,index)=>{
+						if (item.title === 'Endpoint') {
+							this.coreFormItems.splice(index,1)
+						}
+					})
+				} else if (this.title === 'Tn') {
+					this.transferFormItems.map((item,index)=>{
+						if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
+							this.coreFormItems.splice(index,1)
+						}
+					})
 				}
 			}
-
+			//-------> Comment: Above code
+			if (this.title === 'An') {
+					this.AreaFormatting();
+			}
+			}
 		}
-        //-------> Comment: Above code
-		if (this.title === 'An') {
-		  	this.AreaFormatting();
+	}
+	changeResourceShare () {
+		this.judgeTn()
+	}
+
+	judgeTn (): void {
+		if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'non-shared') {
+			this.formData['tn_connection_links_option'].forEach ((item) => {
+				item.checked = false
+			})
+			this.formData['tn_connection_links'] = null
+			this.transferFormItems.forEach((item) => {
+				if (item.title === 'Connection Links') {
+					item.disable = true
+					this.notPassPara = ['tn_connection_links', 'tn_connection_links_option']
+				} else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
+					item.required = true
+					item.disable = false
+				}
+			})
+		} else if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'shared') {
+			this.transferFormItems.forEach((item) => {
+				if (item.title === 'Connection Links') {
+					item.disable = false
+				} else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
+					if (this.formData['tn_connection_links']!==null && this.formData['tn_connection_links'].length !== 0) {
+						item.disable = true
+						item.required = false
+						this.notPassPara = ['tn_connection_links_option']
+						this.notPassPara = this.notPassPara.concat(this.ANkeyList, this.CNkeyList)
+						console.log('not', this.notPassPara)
+					} else if (this.formData['tn_connection_links']!==null && this.formData['tn_connection_links'].length === 0) {
+						item.disable = false
+						item.required = true
+					}
+				}
+			})
 		}
 	}
-	validateEndPoint (key: string, value: any): string {
-		if (this.Util.isEmpty(value)) {
-			return 'can not be empty';
+
+	validateEndPoint (key: string, value: any, required: boolean): string {
+		if (required) {
+			if (this.Util.isEmpty(value)) {
+				return 'can not be empty';
+			}
 		}
 		if (key === 'ip_address') {
 			if (!this.regxpIP.test(value)) {
-				return 'xxx.xxx.xxx.xxx';
+				if (value !== '') {
+					return 'xxx.xxx.xxx.xxx';
+				} else {
+					return ''
+				}
 			} else {
 				return '';
 			}
 		} else if (key === 'logical_link') {
 			if (!this.Util.isInteger(value)){
-				return 'integer only'
+				if (value !== ''){
+					return 'integer only'
+				} else {
+					return ''
+				}
 			} else {
 				return ''
 			}
@@ -85,21 +168,15 @@ export class SubnetParamsModelComponent implements OnInit {
 		}
 	}
 
-	// onInput ($event:any, title: string) {
-	// 	if (!$event) {
-	// 		return;
-	// 	}
-	// 	const target = $event.target;
-	// 	if (title === 'ip_address') {
-	// 	    // only number and '.' can be inputted
-	// 		const regexp = /[^\d^\.]+/g;
-	// 		target.value = target.value.replace(regexp, '');
-	// 	} else if (title === 'logical_link') {
-	// 	    // only number can be inputted
-	// 		const regxp = /[^\d]/g;
-	// 		target.value = target.value.replace(regxp, '');
-	// 	}
-	// }
+	changeLinkCheck (id: string, e: boolean) : void{ // update the selection state
+		this.formData['tn_connection_links_option'].find((item) => {
+			return item.id === id
+		}).checked = e
+		const checkedList = this.formData['tn_connection_links_option'].filter((item) => {return item.checked === true})
+		this.formData['tn_connection_links'] = checkedList.map((item) => {return item.id}) //  get the selected id
+		this.judgeTn()
+	}
+
 	AreaFormatting () {
 		let areaList = [...this.formData.an_coverage_area_ta_list];
 		this.areaList = areaList.map ( (item: any) => {
@@ -180,13 +257,13 @@ export class SubnetParamsModelComponent implements OnInit {
 		}
 	}
 
-	handleCancel() {
+	handleCancel() : void{
 		this.showModel = false
 		this.cancel.emit(this.showModel)
 	}
 	
 	// prompt text for each item of area_list
-	checkArea (area: any) {
+	checkArea (area: any) : string{
 		if (area.every((item) => {return item.selected === ''})) {
 			return 'empty';
 		}
@@ -209,31 +286,56 @@ export class SubnetParamsModelComponent implements OnInit {
 		return true;
 	}
 
-	endCheckBeforeSubmit () : Array<any>{
+	endCheckBeforeSubmit (endpoint, required) : Array<any>{
 		// check params of Endpoint
-		let result: Array<any> = [true, ''];
-		const endPointList = this.coreFormItems&&this.coreFormItems.length!==0?this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).options:{};
-		let ipKey = '';
-		let logicalKey = '';
-		for (let item of endPointList) {
-			if (item.title === 'ip_address') {
-				ipKey = item.key
-			} else if (item.title === 'logical_link') {
-				logicalKey = item.key
+			console.log('end', endpoint)
+			let result: Array<any> = [true, ''];
+			let endPointList;
+			if (this.title === 'An' || this.title === 'Cn') {
+				endPointList = this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).options
+			} else {
+				endPointList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options
 			}
-		}
-		for (let prop in this.EndpointInputs) {
-			if (prop === ipKey) {
-				if (!this.regxpIP.test(this.EndpointInputs[prop])) {
-					result = [false, 'Illegal IpAddress']
-				}
-			} else if (prop === logicalKey) {
-				if (!this.Util.isInteger(this.EndpointInputs[prop])) {
-					result = [false, 'LogicalID can only be an integer']
+			let ipKey = '';
+			let logicalKey = '';
+			let nextKey = ''
+			for (let item of endPointList) {
+				if (item.title === 'ip_address') {
+					ipKey = item.key
+				} else if (item.title === 'logical_link') {
+					logicalKey = item.key
+				} else if (item.title === 'nexthop_info') {
+					nextKey = item.key
 				}
 			}
-		} 
-		return result;
+			for (let prop in endpoint) {
+				if (prop === ipKey) {
+					if (required) {
+						if (endpoint[prop] === '') {
+							result = [false, 'Endpoint can not be empty']
+						} else if (!this.regxpIP.test(endpoint[prop])) {
+							result = [false, 'Illegal IpAddress']
+						} 
+					} else if (!this.regxpIP.test(endpoint[prop]) && endpoint[prop] !== '') {
+						result = [false, 'Illegal IpAddress']
+					}
+				} else if (prop === logicalKey) {
+					if (required) {
+						if (endpoint[prop] === '') {
+							result = [false, 'logical can not be empty']
+						} else if (!this.Util.isInteger(endpoint[prop])) {
+							result = [false, 'LogicalID can only be an integer']				
+						}
+					} else if (!this.Util.isInteger(endpoint[prop]) && endpoint[prop] !== '') {
+						result = [false, 'LogicalID can only be an integer']
+					}
+				} else if (prop === nextKey) {
+					if (required && endpoint[prop] === '') {
+						result = [false, 'Endpoint can not be empty']
+					}	
+				}
+			} 
+			return result;
 	}
 
 	inputHolder (title: string): string {
@@ -257,15 +359,36 @@ export class SubnetParamsModelComponent implements OnInit {
 
 	handleOk(): void {
 		// Verify that items of EndPoint is correct
-		let endCheckResult = this.endCheckBeforeSubmit()
-		if (!endCheckResult[0]) {
-			this.message.error(endCheckResult[1].toString());
-			return;
-		}
-		// replace the params about endPoint
-		for (let prop in this.formData) {
-			if (typeof this.EndpointInputs[prop] !== 'undefined') {
-				this.formData[prop] = this.EndpointInputs[prop];
+		if (this.EndpointEnable) {
+			let endCheckResult = []
+			if (this.title === 'An' || this.title === 'Cn') {
+				endCheckResult = this.endCheckBeforeSubmit(this.EndpointInputs, this.coreFormItems.find((item) => {return item.title === 'Endpoint'}).required)
+			} else if (this.title === 'Tn') {
+				const ANendCheckResult = this.endCheckBeforeSubmit(this.ANEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).required)
+				const CNendCheckResult = this.endCheckBeforeSubmit(this.CNEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).required)
+				if (ANendCheckResult[0] && CNendCheckResult[0]) {
+					endCheckResult[0] = true
+				} else {
+					if (ANendCheckResult[0] === false) {
+						endCheckResult = ANendCheckResult
+					} else {
+						endCheckResult = CNendCheckResult
+					}
+				}
+			}
+			if (!endCheckResult[0]) {
+				this.message.error(endCheckResult[1].toString());
+				return;
+			}
+			// replace the params about endPoint
+			for (let prop in this.formData) {
+				if ((this.title === 'An' || this.title === 'Cn') && typeof this.EndpointInputs[prop] !== 'undefined') {
+					this.formData[prop] = this.EndpointInputs[prop];
+				} else if (this.title === 'Tn' && typeof this.ANEndpointInputs[prop] !== 'undefined') {
+					this.formData[prop] = this.ANEndpointInputs[prop];
+				} else if (this.title === 'Tn' && typeof this.CNEndpointInputs[prop] !== 'undefined') {
+					this.formData[prop] = this.CNEndpointInputs[prop];
+				}
 			}
 		}
 		let params: object;
@@ -282,8 +405,7 @@ export class SubnetParamsModelComponent implements OnInit {
 		} else {
 			params = {...this.formData};
 		}
-		// Verify that each item is not empty, include special handeling of area_list
-		console.log(params)
+		// Verify that each item exclude endpoint is not empty, include special handeling of area_list
 		let checkParams = params
 		if (this.title === 'An' || this.title === 'Cn') {
 			checkParams = this.coreFormItems.filter((item) => {
@@ -296,6 +418,7 @@ export class SubnetParamsModelComponent implements OnInit {
 		}
 		if (this.Util.deepCheck(checkParams) && this.areaCheckBeforeSubmit(params)) {
 			this.paramsDataChange.emit(params);
+			this.noPassParaChange.emit(this.notPassPara)
 			this.handleCancel();
 		} else {
 			this.message.error('Please complete the form');