Modify the code for the updated table interface, fix the bug of submitting an and cn 02/117402/1
authorwangyuerg <wangyuerg@chinamobile.com>
Wed, 3 Feb 2021 10:15:46 +0000 (18:15 +0800)
committerwangyuerg <wangyuerg@chinamobile.com>
Wed, 3 Feb 2021 10:15:59 +0000 (18:15 +0800)
Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: I6ff3c3f36979459ea60a0ee0da1caeea7f3a0465
Issue-ID: USECASEUI-527

usecaseui-portal/src/app/core/services/slicingTaskServices.ts
usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json [new file with mode: 0644]
usecaseui-portal/src/app/mock/routes.js
usecaseui-portal/src/app/shared/utils/utils.ts
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts
usecaseui-portal/src/constants/constants.ts

index 1a2c989..e5f5525 100644 (file)
@@ -59,7 +59,8 @@ export class SlicingTaskServices {
         //monitor 5G\r
         fetchTraffic: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData",\r
         fetchOnlineusers: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers",\r
-        fetchBandwidth: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/bandwidth"\r
+        fetchBandwidth: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/bandwidth",\r
+        getConnectionLinkTable: this.baseUrl + "/connectionlinktable" // :todo\r
     }\r
 \r
 \r
@@ -218,6 +219,10 @@ export class SlicingTaskServices {
         let url = this.url.fetchBandwidth.replace("{queryTimestamp}", time);\r
         return this.Http.httpAxios("post", url, service_list, failedCallback);\r
     }\r
+    getConnectionLinkTable( failedCallback?:any ) { // :todo\r
+        let url = this.url.getConnectionLinkTable;\r
+        return this.Http.httpAxios("get", url, null, failedCallback);\r
+    }\r
 \r
 }\r
 \r
index 216a549..03f3aed 100644 (file)
             "sliceProfile_TN_BH_sST": "test_sliceProfile_TN_BH _sST",\r
             "sliceProfile_TN_BH_sNSSAI": "test_tn_service_snssai_01",\r
             "sliceProfile_TN_resourceSharingLevel": "shared",\r
-            "tn_connection_links": "123213",\r
-            "tn_connection_links_option": [{\r
-                    "id": "123213",\r
-                    "AN": "1an",\r
-                    "CN": "1cn",\r
-                    "TN": "1tn",\r
-                    "properties": "1pp"\r
-                },\r
-                {\r
-                    "id": "123214",\r
-                    "AN": "2an",\r
-                    "CN": "2cn",\r
-                    "TN": "2tn",\r
-                    "properties": "2pp"\r
-                },\r
-                {\r
-                    "id": "123215",\r
-                    "AN": "3an",\r
-                    "CN": "3cn",\r
-                    "TN": "3tn",\r
-                    "properties": "3pp"\r
-                }\r
-            ],\r
+            "tn_connection_links": "233errt4545",\r
             "tn_bh_enableNSSISelection": false,\r
             "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411c",\r
             "cn_suggest_nssi_name": "eMBB CNinstance3",\r
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 (file)
index 0000000..613b807
--- /dev/null
@@ -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
index e25beea..cc8ab96 100644 (file)
@@ -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",
index 0633778..a8fdd76 100644 (file)
@@ -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
index ef8b6cc..aa5cebe 100644 (file)
@@ -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,
index 6e5b5b0..6a9ebf6 100644 (file)
                                        </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>
index 589a507..6d5d773 100644 (file)
@@ -2,9 +2,9 @@
     padding-left: 3%;\r
 \r
     ::ng-deep .ant-table {\r
-        width: 600px !important;\r
+        width: 100% !important;\r
         overflow: scroll !important;\r
-        height: 200px;\r
+        height: 400px;\r
     }\r
 \r
     .table_radio {\r
@@ -12,7 +12,7 @@
     }\r
 \r
     .subnet_td {\r
-        min-width: 100px;\r
+        min-width: 180px;\r
     }\r
 \r
     .subnet_params_area {\r
     margin-left: 6px;\r
 }\r
 \r
-.endpoint_input {\r
-    position: relative;\r
-\r
-    .end_alert_ip {\r
-        position: absolute;\r
-        color: red;\r
-        top: 0;\r
-        margin-top: 30px;\r
-        margin-left: 6px;\r
-    }\r
-\r
-    .end_alert_logical {\r
-        position: absolute;\r
-        color: red;\r
-        top: 0;\r
-        margin: 30px 0 0 126px;\r
-    }\r
-\r
-    .end_alert_nexthop {\r
-        position: absolute;\r
-        color: red;\r
-        top: 0;\r
-        margin: 30px 0 0 246px;\r
-    }\r
-}\r
-\r
 .tn_endpoint_input {\r
     position: relative;\r
 \r
index 792e8dc..d679806 100644 (file)
@@ -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)
index fecbcda..909afeb 100644 (file)
@@ -175,33 +175,7 @@ export const TRANSFRER_FORM_ITEMS = [
         key: 'tn_connection_links', // :new\r
         required: false, // combined\r
         type: 'table',\r
-        options: {\r
-            title: 'connection_links_option',\r
-            key: 'tn_connection_links_option'\r
-        },\r
-        disable: false,\r
-        header: [\r
-            {\r
-                title: 'ID',\r
-                key: 'id'\r
-            },\r
-            {\r
-                title: 'AN',\r
-                key: 'AN'\r
-            },\r
-            {\r
-                title: 'CN',\r
-                key: 'CN'\r
-            },\r
-            {\r
-                title: 'TN',\r
-                key: 'TN'\r
-            },\r
-            {\r
-                title: 'Properties',\r
-                key: 'properties'\r
-            }\r
-        ]\r
+        disable: false\r
     },\r
     {\r
         title:'AN Endpoint', // input group\r