diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model')
4 files changed, 106 insertions, 82 deletions
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) |