diff options
Diffstat (limited to 'usecaseui-portal')
7 files changed, 525 insertions, 147 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'); diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts index e974a851..a46ff010 100644 --- a/usecaseui-portal/src/constants/constants.ts +++ b/usecaseui-portal/src/constants/constants.ts @@ -133,7 +133,7 @@ export const TRANSFRER_FORM_ITEMS = [ {
title: 'S-NSSAI',
key: 'sliceProfile_TN_BH_sNSSAI',
- required: true
+ required: true,
},
{
title: 'Latency (ms)',
@@ -149,7 +149,100 @@ export const TRANSFRER_FORM_ITEMS = [ title: 'MaxBandwidth',
key: 'tn_bh_bandwidth',
required: true
- },
+ },
+ {
+ title: 'Resource Sharing Level', // select
+ key: 'sliceProfile_TN_resourceSharingLevel', // :new
+ required: true,
+ options: [
+ {
+ title: 'Shared',
+ key: 'shared'
+ },
+ {
+ title: 'Non-shared',
+ key: 'non-shared'
+ }
+ ]
+ },
+ {
+ title: 'Connection Links',// table
+ key: 'tn_connection_links', // :new
+ required: false, // combined
+ 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'
+ }
+ ]
+ },
+ {
+ title:'AN Endpoint', // input group
+ key:"an_Endpoint",
+ required: false,
+ disable: false,
+ options: [
+ {
+ title: 'ip_address',
+ key: 'sliceProfile_AN_ipAddress',
+ holder: 'IpAddress'
+ },
+ {
+ title: 'logical_link',
+ key: 'sliceProfile_AN_logicInterfaceId',
+ holder: 'LogicId'
+ },
+ {
+ title: 'nexthop_info',
+ key: 'sliceProfile_AN_nextHopInfo',
+ holder: 'NextHop'
+ }
+ ]
+ },
+ {
+ title:'CN Endpoint',
+ key:"cn_Endpoint",
+ required: false,
+ disable: false,
+ options: [
+ {
+ title: 'ip_address',
+ key: 'sliceProfile_CN_ipAddress',
+ holder: 'IpAddress'
+ },
+ {
+ title: 'logical_link',
+ key: 'sliceProfile_CN_logicInterfaceId',
+ holder: 'LogicId'
+ },
+ {
+ title: 'nexthop_info',
+ key: 'sliceProfile_CN_nextHopInfo',
+ holder: 'NextHop'
+ }
+ ]
+ },
]
export const CORE_FORM_ITEMS = {
|