From af2965a8484ce0893ef1d1ce5ef6085cf76b0d3e Mon Sep 17 00:00:00 2001 From: wangyuerg Date: Wed, 3 Feb 2021 18:15:46 +0800 Subject: Modify the code for the updated table interface， fix the bug of submitting an and cn MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: wangyuerg Change-Id: I6ff3c3f36979459ea60a0ee0da1caeea7f3a0465 Issue-ID: USECASEUI-527 --- .../src/app/core/services/slicingTaskServices.ts | 7 +- .../src/app/mock/json/slicing_task_auditInfo.json | 24 +---- .../src/app/mock/json/tn_connectionLinkTable.json | 71 +++++++++++++ usecaseui-portal/src/app/mock/routes.js | 1 + usecaseui-portal/src/app/shared/utils/utils.ts | 4 + .../slicing-task-model.component.ts | 19 ++-- .../subnet-params-model.component.html | 24 +++-- .../subnet-params-model.component.less | 32 +----- .../subnet-params-model.component.ts | 113 +++++++++++++++------ usecaseui-portal/src/constants/constants.ts | 28 +---- 10 files changed, 190 insertions(+), 133 deletions(-) create mode 100644 usecaseui-portal/src/app/mock/json/tn_connectionLinkTable.json (limited to 'usecaseui-portal/src') 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 @@
- + - {{val.title}} + {{val}} action - - {{t[val.key]}} + +
+
+ {{key}}: {{t[val][key]}} +
+
+
+ {{t[val]}} +
- - 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) diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts index fecbcda8..909afeb5 100644 --- a/usecaseui-portal/src/constants/constants.ts +++ b/usecaseui-portal/src/constants/constants.ts @@ -175,33 +175,7 @@ export const TRANSFRER_FORM_ITEMS = [ key: 'tn_connection_links', // :new required: false, // combined type: 'table', - options: { - title: 'connection_links_option', - key: 'tn_connection_links_option' - }, - disable: false, - header: [ - { - title: 'ID', - key: 'id' - }, - { - title: 'AN', - key: 'AN' - }, - { - title: 'CN', - key: 'CN' - }, - { - title: 'TN', - key: 'TN' - }, - { - title: 'Properties', - key: 'properties' - } - ] + disable: false }, { title:'AN Endpoint', // input group -- cgit 1.2.3-korg