summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app
diff options
context:
space:
mode:
authorwangyuerg <wangyuerg@chinamobile.com>2021-01-28 10:34:35 +0800
committerwangyuerg <wangyuerg@chinamobile.com>2021-01-28 10:41:55 +0800
commit186b679ba02d7729801b4d560697d87034b9c8f6 (patch)
treea3dfa487da10a0f5adbc7bad55224595aa9c6547 /usecaseui-portal/src/app
parent14e5467cf340f32afc38cd88be39ee4cba26def9 (diff)
feat: TN change modification
Signed-off-by: wangyuerg <wangyuerg@chinamobile.com> Change-Id: I7bed0f4b43e0f978b5e109bfd198c4cad2205463 Issue-ID: USECASEUI-527
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r--usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json88
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html6
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts31
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html136
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less51
-rw-r--r--usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts263
6 files changed, 430 insertions, 145 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');