Modify the code for the updated table interface， fix the bug of submitting an and cn

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

9 files changed, 189 insertions, 106 deletions

diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index 1a2c9893..e5f55253 100644
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -59,7 +59,8 @@ export class SlicingTaskServices {
         //monitor 5G

         fetchTraffic: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData",

         fetchOnlineusers: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers",

-        fetchBandwidth: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/bandwidth"

+        fetchBandwidth: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/bandwidth",

+        getConnectionLinkTable: this.baseUrl + "/connectionlinktable" // :todo

     }

 

 

@@ -218,6 +219,10 @@ export class SlicingTaskServices {
         let url = this.url.fetchBandwidth.replace("{queryTimestamp}", time);

         return this.Http.httpAxios("post", url, service_list, failedCallback);

     }

+    getConnectionLinkTable( failedCallback?:any ) { // :todo

+        let url = this.url.getConnectionLinkTable;

+        return this.Http.httpAxios("get", url, null, failedCallback);

+    }

 

 }

 

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 216a5497..03f3aed5 100644
--- a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
+++ b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
@@ -70,29 +70,7 @@
             "sliceProfile_TN_BH_sST": "test_sliceProfile_TN_BH _sST",

             "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_connection_links": "233errt4545",

             "tn_bh_enableNSSISelection": false,

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

             "cn_suggest_nssi_name": "eMBB CNinstance3",

diff --git a/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json b/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json
new file mode 100644
index 00000000..613b8072
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json
@@ -0,0 +1,71 @@
+{
+    "result_header": {
+        "result_code": "200",
+        "result_message": "5Gslicingorderqueryresult."
+    },
+    "result_body": {
+        "record_number": 2,
+        "connection_links_list": [{
+                "linkId": "233errt4545",
+                "anInfo": {
+                    "ipAddress": "1.1.1.1",
+                    "logicId": "dff34444",
+                    "nextHop": "sddsweedffsdsssss"
+                },
+                "cnInfo": {
+                    "ipAddress": "1.1.1.1",
+                    "logicId": "dff34444",
+                    "nextHop": "sddsweedffsdsssss"
+                },
+                "properties": {
+                    "latency": "20",
+                    "jitter": "dffd",
+                    "maxBandwidth": "200",
+                    "resourceSharingLevel": "shared"
+                },
+                "test": {
+                    "test1": "1111",
+                    "test2": "2222"
+                }
+            },
+            {
+                "linkId": "233errt4546",
+                "anInfo": {
+                    "ipAddress": "2.2.2.2",
+                    "logicId": "dff344442",
+                    "nextHop": "sddsweedffsdsssss2"
+                },
+                "cnInfo": {
+                    "ipAddress": "1.1.1.12",
+                    "logicId": "dff344442",
+                    "nextHop": "sddsweedffsdsssss2"
+                },
+                "properties": {
+                    "latency": "202",
+                    "jitter": "dffd2",
+                    "maxBandwidth": "2002",
+                    "resourceSharingLevel": "shared2"
+                }
+            },
+            {
+                "linkId": "233errt4547",
+                "anInfo": {
+                    "ipAddress": "2.2.2.23",
+                    "logicId": "dff3444423",
+                    "nextHop": "sddsweedffsdsssss23"
+                },
+                "cnInfo": {
+                    "ipAddress": "1.1.1.123",
+                    "logicId": "dff3444423",
+                    "nextHop": "sddsweedffsdsssss23"
+                },
+                "properties": {
+                    "latency": "2023",
+                    "jitter": "",
+                    "maxBandwidth": "20023",
+                    "resourceSharingLevel": "shared23"
+                }
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index e25beea3..cc8ab96f 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -117,6 +117,7 @@ module.exports =
         "/uui-slicing/nsmf/resource/nssi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list",
         "/uui-slicing/nsmf/resource/nssi/instanceStatus/:instanceStatus/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list_activated",
         "/uui-slicing/nsmf/resource/nssi/:nssiId/details":"/getSlicingNssiDetail",
+        "/uui-slicing/nsmf/connectionlinktable": "/tn_connectionLinkTable", // :todo
         ///////<-------------CSMF slicing_business--------->/////
         "/uui-slicing/csmf/5gSlicing/orders/status/:status/pageNo/:pageNo/pageSize/:pageSize": "/csmf_slicing_businessData",
         "/POST/uui-slicing/csmf/5gSlicing": "/csmf_slicing_purchase",
diff --git a/usecaseui-portal/src/app/shared/utils/utils.ts b/usecaseui-portal/src/app/shared/utils/utils.ts
index 0633778c..a8fdd76f 100644
--- a/usecaseui-portal/src/app/shared/utils/utils.ts
+++ b/usecaseui-portal/src/app/shared/utils/utils.ts
@@ -130,4 +130,8 @@ export class Util {
             return iter;
         }, {});
       }
+
+    intersection(inputs: any[]) : any[]{
+        return inputs.reduce((a, b) => a.filter(c => b.includes(c)))
+    }
 }
\ 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 ef8b6cce..aa5cebe0 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
@@ -193,8 +193,7 @@ export class SlicingTaskModelComponent implements OnInit {
         'sliceProfile_AN_ipAddress',
         'sliceProfile_AN_logicInterfaceId',
         'sliceProfile_AN_nextHopInfo',
-        'tn_connection_links', 
-        'tn_connection_links_option']);
+        'tn_connection_links']);
       this.slicingSubnet[2].params = {...this.pick(nsi_nssi_info, [
         'cn_service_snssai',
         'cn_resource_sharing_level',
@@ -391,13 +390,15 @@ export class SlicingTaskModelComponent implements OnInit {
     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]
-				}	
-			}
-    })
+    if (this.noPassPara.length !== 0 ) {
+      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 6e5b5b0e..6a9ebf6c 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
@@ -57,26 +57,28 @@
 					</nz-input-group>
 					<!-- connection links table -->
 					<div *ngIf="item.title === 'Connection Links'">
-						<nz-table #basicTable [nzData]="this.formData[item.options.key]" nzShowPagination="true"
-							nzPageSize="2">
+						<nz-table #basicTable [nzData]="connectionLinkTable" nzShowPagination="true" nzPageSize="2">
 							<thead>
 								<tr>
-									<th *ngFor="let val of item.header" class="subnet_td">{{val.title}}</th>
+									<th *ngFor="let val of connectionTableHeader" class="subnet_td">{{val}}</th>
 									<th class="subnet_td"> action </th>
 								</tr>
 							</thead>
 							<tbody>
 								<tr *ngFor="let t of basicTable.data">
-									<td *ngFor="let val of item.header" class="subnet_td">
-										{{t[val.key]}}
+									<td *ngFor="let val of connectionTableHeader" class="subnet_td">
+										<div *ngIf="isObject(t[val])">
+											<div *ngFor="let key of objectKeys(t[val])">
+												{{key}}: {{t[val][key]}}
+											</div>
+										</div>
+										<div *ngIf="!isObject(t[val])">
+											{{t[val]}}
+										</div>
 									</td>
-									<!-- <td nzShowCheckbox="true" [nzChecked]="t.checked"
-										(nzCheckedChange)="changeLinkCheck(t.id, $event)" [nzDisabled]="item.disable"
-										class="subnet_td">
-									</td> -->
 									<td>
-										<input type="radio" name="linkcheck" [value]="t.id"
-											(click)="changeLinkCheck(t.id)" [checked]="t.checked"
+										<input type="radio" name="linkcheck" [value]="t.linkId"
+											(click)="changeLinkCheck(t.linkId)" [checked]="t.checked"
 											[disabled]="item.disable" class="table_radio" />
 									</td>
 								</tr>
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 589a507e..6d5d7739 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
@@ -2,9 +2,9 @@
     padding-left: 3%;

 

     ::ng-deep .ant-table {

-        width: 600px !important;

+        width: 100% !important;

         overflow: scroll !important;

-        height: 200px;

+        height: 400px;

     }

 

     .table_radio {

@@ -12,7 +12,7 @@
     }

 

     .subnet_td {

-        min-width: 100px;

+        min-width: 180px;

     }

 

     .subnet_params_area {

@@ -49,32 +49,6 @@
     margin-left: 6px;

 }

 

-.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 126px;

-    }

-

-    .end_alert_nexthop {

-        position: absolute;

-        color: red;

-        top: 0;

-        margin: 30px 0 0 246px;

-    }

-}

-

 .tn_endpoint_input {

     position: relative;

 

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 792e8dce..d6798064 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
@@ -3,6 +3,8 @@ import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options }
 import { NzMessageService } from "ng-zorro-antd";
 import { stringify } from '@angular/core/src/util';
 import { Util } from '../../../../../../shared/utils/utils';
+import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices';
+
 
 @Component({
 	selector: 'app-subnet-params-model',
@@ -29,16 +31,20 @@ export class SubnetParamsModelComponent implements OnInit {
 	CNEndpointInputs: object = {};
 	ANkeyList: string[] = [];
 	CNkeyList: string[] = [];
-	EndpointEnable: boolean = true;  // Whether to enable the three parameters of Endpoint
+	EndpointEnable: boolean = false;  // 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'];
+	connectionLinkTable: any[] = [];
+	connectionTableHeader: string[] = [];
+	objectKeys = Object.keys;
     //  Comment: Above code
 
 	constructor(
 		private message: NzMessageService,
-		private Util: Util
+		private Util: Util,
+		private http: SlicingTaskServices
 		) {
 		}
 
@@ -50,56 +56,100 @@ export class SubnetParamsModelComponent implements OnInit {
 			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:[];
-				}
+			}
 			else if (this.title === 'Tn') {
+				this.getConnectionLinkTable();
 				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 (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== '' && this.formData['tn_connection_links'] !== null && item.id === this.formData['tn_connection_links']) {
-						item.checked = true
-					} else {
-						item.checked = false
-					}
-				})
-				console.log(this.formData['tn_connection_links_option'])
-				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 === 'Tn') {
+				if (typeof this.formData !== 'undefined' && Object.keys(this.formData).length !== 0) {
+					this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)})
+				}
+				if(this.EndpointEnable){
 					this.ANEndpointInputs = this.Util.pick(this.formData, this.ANkeyList)
 					this.CNEndpointInputs = this.Util.pick(this.formData, this.CNkeyList)
-			} else {
-				if (this.title === 'Tn') {
+				} else {
 					this.transferFormItems.map((item,index)=>{
 						if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
-							this.coreFormItems.splice(index,1)
+							this.transferFormItems.splice(index,1)
 						}
 					})
 				}
 			}
+			// If the endpoint related parameters from the back end are incomplete, delete the endpoint item
 			//-------> Comment: Above code
 			if (this.title === 'An') {
 					this.AreaFormatting();
 			}
-			}
 		}
 	}
+
+	addCheckStatus () {
+		this.connectionLinkTable.forEach((item) => {
+			if (item.hasOwnProperty('linkId') && typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== '' && this.formData['tn_connection_links'] !== null && item['linkId'] === this.formData['tn_connection_links']) {
+				item.checked = true
+			} else {
+				item.checked = false
+			}
+		})
+	}
+
 	changeResourceShare () {
 		this.judgeTn()
 	}
 
+	isObject (val) {
+		if (Object.prototype.toString.call(val) === '[object Object]') {
+			return true
+		} else {
+			return false
+		}
+	}
+
+	getConnectionLinkTable (): void{
+		this.http.getConnectionLinkTable(this.getConnetionFailed).then ((res) => {
+			this.connectionLinkTable = res.result_body.connection_links_list
+			this.addCheckStatus() // add init check status for connection link table
+			this.judgeTn() // init judge
+			this.getTableHeader()
+		})
+	}
+
+	getTableHeader (): void { // Find the common key of all data
+		let keyList :any[] = this.connectionLinkTable.map((item) => {
+			return Object.keys(item)
+		})
+		this.connectionTableHeader = this.Util.intersection(keyList).filter((item) => {
+			return item !== 'checked'
+		})
+		// Filter redundant items in table data
+		this.connectionLinkTable.forEach((item) => {
+			for (let key in item) {
+				if (key !== 'linkId' && key !== 'checked' && this.connectionTableHeader.indexOf(key) === -1) {
+					delete item[key]
+				} else {
+					// Filter out the null values in each item
+					for (let i in item[key]) {
+						if (i === 'jitter' && (item[key][i] === '' || item[key][i] === 'null' || item[key][i] === null)) {
+							delete item[key][i]
+						}
+					}
+				}
+			}
+		})
+	}
+
+	getConnetionFailed () {
+		console.log('failed')
+	}
+
 	judgeTn (): void {
 		if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'non-shared') {
-			this.formData['tn_connection_links_option'].forEach ((item) => {
+			this.connectionLinkTable.forEach ((item) => {
 				item.checked = false
 			})
 			this.formData['tn_connection_links'] = null
-			this.notPassPara = ['tn_connection_links', 'tn_connection_links_option']
+			this.notPassPara = ['tn_connection_links']
 			this.transferFormItems.forEach((item) => {
 				if (item.title === 'Connection Links') {
 					item.disable = true
@@ -113,16 +163,16 @@ export class SubnetParamsModelComponent implements OnInit {
 				if (item.title === 'Connection Links') {
 					item.disable = false
 				} else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
-					if (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links']!==null && this.formData['tn_connection_links'] !== '') {
+					if (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== null && this.formData['tn_connection_links'] !== '') {
 						item.disable = true
 						item.required = false
-						this.notPassPara = ['tn_connection_links_option']
+						this.notPassPara = []
 						this.notPassPara = this.notPassPara.concat(this.ANkeyList, this.CNkeyList)
 					} else { //:todo
 						this.formData['tn_connection_links'] = ''
 						item.disable = false
 						item.required = true
-						this.notPassPara = ['tn_connection_links_option']
+						this.notPassPara = []
 					}
 				}
 			})
@@ -161,14 +211,13 @@ export class SubnetParamsModelComponent implements OnInit {
 	}
 
 	changeLinkCheck (id: string) : void{ // update the selection state
-		this.formData['tn_connection_links_option'].forEach((item) => {
-			if (item.id === id) {
+		this.connectionLinkTable.forEach((item) => {
+			if (item['linkId'] === id) {
 				item.checked = true
 			} else {
 				item.checked = false
 			}
 		})
-		console.log(this.formData['tn_connection_links_option'])
 		this.formData['tn_connection_links'] = id //  get the selected id
 		this.judgeTn()
 	}
@@ -409,9 +458,7 @@ export class SubnetParamsModelComponent implements OnInit {
                     }
             }
         }
-        console.log(requireKeyList)
         checkParams = this.Util.pick(params, requireKeyList)
-        console.log(checkParams)
 		if (this.Util.deepCheck(checkParams) && this.areaCheckBeforeSubmit(params)) {
 			this.paramsDataChange.emit(params);
 			this.noPassParaChange.emit(this.notPassPara)