summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-05-22 10:17:10 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-05-22 10:17:19 +0800
commit8c1ae160f8f495c4ce0679203972112735faeccf (patch)
treeccd2584c56f296ca27cdbf79fe52a3675af7b922 /usecaseui-portal
parent8170823270d477f5edf9ce6363781c042f8e9b08 (diff)
Fix instance detail for CCVPN
Change-Id: I8f1bbbfa80d48ec91d3929069771638c9f5dbb8a Issue-ID: USECASEUI-222 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css13
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html75
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts167
-rw-r--r--usecaseui-portal/src/app/myhttp.service.ts7
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html1
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts63
-rw-r--r--usecaseui-portal/src/styles.less2
7 files changed, 315 insertions, 13 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
index 272e0b8f..d0479145 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
@@ -39,6 +39,19 @@ hr {
position: relative;
display: inline-block;
}
+.model .submit{
+ position: absolute;
+ width: 90px;
+ height: 35px;
+ top: 10px;
+ right: 85px;
+ color: #fff;
+ font-size: 18px;
+ background: #0DA9E2;
+ border-radius: 4px;
+ border: none!important;
+ border-color: rgba(0,0,0,0)!important;
+}
.model .back,.model .back:hover{
position: absolute;
top: 10px;
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
index 96d5dcb5..cf87ff16 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
@@ -19,6 +19,8 @@
<div class="top-title">
<h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3>
<div class="fl" style="width: 20%">
+ <button class="submit" nz-button (click)="submitUpdate()" *ngIf="upDateShow"><span> {{"i18nTextDefine_Update" | translate}} </span>
+ </button>
<button class="back" nz-button (click)="goback()"></button>
</div>
</div>
@@ -164,7 +166,7 @@
</div>
</div>
<div class="detaildata">
- <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
+ <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle [nzSelectedIndex]="upDateShow == false?0:1">
<nz-tab nzTitle="Service Info">
<div class="service-title" style="clear: both">
<span class="lable" style="width: 60px">name:</span>
@@ -206,7 +208,7 @@
<div class="site">
<div style="height: 10px">
<h3 style="float: left;color: #3C4F8C">Site List</h3>
- <button nz-button (click)="addSite()" class="addListBtn"
+ <button nz-button *ngIf="upDateShow" (click)="addSite()" class="addListBtn"
style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
style="transform: scale(1.2);font-weight: 700"></i>{{"i18nTextDefine_Add" | translate}}
</button>
@@ -236,7 +238,10 @@
<td>{{item.sdwansite_emails}}</td>
<td>
<span class="action" (click)="showSiteDetail(i+1)"><i class="anticon anticon-bars"></i></span>
- <span class="action" (click)="deleteSite(i+1)"><i class="anticon anticon-delete"></i></span>
+ &nbsp;
+ <span class="action" (click)="editUpdateSite(i+1)" *ngIf="sitenum[i]"><i class="anticon anticon-edit"></i></span>
+ &nbsp;
+ <span class="action" (click)="deleteUpdateSite(i+1)" *ngIf="upDateShow"><i class="anticon anticon-delete"></i></span>
</td>
</tr>
@@ -329,5 +334,67 @@
<button nz-button nzType="primary" (click)="detailsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
</div>
</div>
- <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail" (click)="hiddenModel()"></div>
+ <!-- site update model -->
+ <div class="sitemodel" *ngIf="siteAddModelShow">
+ <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+ <div class="inputs">
+ <ul>
+ <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
+ <span>{{item.lableShow}}:</span>
+ <input nz-input [(ngModel)]="siteBaseData[item.lable]"></li>
+ </ul>
+ </div>
+ <div>
+ <h3>Sdwandevice</h3>
+ <div class="inputs">
+ <ul>
+ <li *ngFor="let item of this.templateParameters.site.sdwandevice_list">
+ <span>{{item.lable}}:</span>
+ <input nz-input [(ngModel)]="siteCpeData[item.lable]">
+ </li>
+ </ul>
+ </div>
+ <h3>Sdwansitewan List</h3>
+ <div>
+ <div style="width: 100%;text-align: right">
+ <button nz-button (click)="updateSiteWan()" class="addListBtn"><i class="anticon anticon-plus"
+ style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
+ </button>
+ </div>
+ <table class="siteWanTab">
+ <thead>
+ <tr>
+ <th width="4%"> NO.</th>
+ <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
+ <th width="7%"> Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
+ <tr *ngFor="let item of siteWanData; let i = index;"
+ [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}">
+ <td>{{i+1}}</td>
+ <td *ngFor="let key of getKeys(item);let a = index;">
+ <span *ngIf="!tabInputShowWanPort[i]">{{item[key]}}</span>
+ <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] ">
+ </td>
+ <td>
+ <span class="action" (click)="editUpdateWanPort(i+1,item,siteWanData)"><i
+ class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+ <span class="action" (click)="deleteUpdateWanPort(i+1,item,siteWanData)"><i
+ class="anticon anticon-delete"></i></span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="action">
+ <button nz-button nzType="primary" (click)="updatesite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+ <button nz-button nzType="primary" (click)="updatesite_OK()">{{"i18nTextDefine_Add" | translate}}</button>
+ </div>
+ </div>
+ <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || siteAddModelShow" (click)="hiddenModel()"></div>
</div>
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
index aff3ef9e..484a6d93 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -35,6 +35,7 @@ export class CcvpnDetailComponent implements OnInit {
@Input() detailParams;
@Input() upDateShow;
@Output() closeDetail = new EventEmitter();
+ @Output() closeUpdate = new EventEmitter();
tabBarStyle = {
"height": "58px",
@@ -63,7 +64,7 @@ export class CcvpnDetailComponent implements OnInit {
sotnInfo = {};//sotnmodel The first part of sotnInfo
sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table
sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data
-
+ tabInputShowSdwansitelan = [];//sdwansitelan table input and span
// Site List
siteTableData = [];
siteBaseData = {}; //sitemodel one sdwansiteresource_list
@@ -72,6 +73,8 @@ export class CcvpnDetailComponent implements OnInit {
// Wan Port
siteWanData = []; //sitemodel three wan port Table data
siteWanParams = {}; //wan port Table Detailed parameters of each line of data
+ tabInputShowWanPort = [];//wan port table input and span
+ sitenum = [];
getKeys(item) {
return Object.keys(item);
}
@@ -84,7 +87,9 @@ export class CcvpnDetailComponent implements OnInit {
console.log(this.input_parameters);
this.templateParameters.service = {
name: this.input_parameters.service.name,
- description: this.input_parameters.service.description
+ description: this.input_parameters.service.description,
+ serviceInvariantUuid: this.input_parameters.service["serviceInvariantUuid"],
+ serviceUuid: this.input_parameters.service["serviceUuid"]
};
let inputs = this.input_parameters.service.parameters.requestInputs;
//筛选 分离 sotnvpn数据
@@ -109,6 +114,7 @@ export class CcvpnDetailComponent implements OnInit {
//筛选 分离 site数据
inputs["sdwansiteresource_list"].map((item, index) => {
this.siteTableData.push(item);
+ this.sitenum.push(false);
});
let sdwansiteresource_list = inputs["sdwansiteresource_list"][0];
@@ -188,6 +194,11 @@ export class CcvpnDetailComponent implements OnInit {
}
}
});
+ this.templateParameters.site.sdwandevice_list.map((item, index) => {
+ if (this.getKeys(item).indexOf("lable") == -1) {
+ this.templateParameters.site.sdwandevice_list.splice(index, 1)
+ }
+ });
this.templateParameters.site.sdwansitewan_list.map((item, index) => {
let input = {};
for (var keys in item) {
@@ -199,6 +210,9 @@ export class CcvpnDetailComponent implements OnInit {
}
});
this.siteWanData.push(this.siteWanParams);
+ this.siteWanData.map((item, index) => {
+ this.tabInputShowWanPort[index] = true;
+ });
}
//sotnVpn detail show
@@ -226,7 +240,7 @@ export class CcvpnDetailComponent implements OnInit {
this.isEditSite = num;
console.log(this.siteTableData[num - 1]);
console.log(this.siteCpeData);
- console.log(this.templateParameters.site.sdwandevice_list);
+ console.log(this.templateParameters);
Object.keys(this.siteBaseData).forEach((item) => {
this.siteBaseData[item] = this.siteTableData[num - 1][item];
});
@@ -239,20 +253,130 @@ export class CcvpnDetailComponent implements OnInit {
detailsite_cancel(){
this.siteDetail = false;
}
- deleteSite(num){
+ deleteUpdateSite(num) {
this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1);
+ this.sitenum.splice(num - 1, 1);
console.log(this.siteTableData)
+ console.log(this.sitenum)
}
- addSite(){
+ // site addModel
+ siteAddModelShow = false;
+
+ addSite() {
+ this.siteAddModelShow = true;
+ this.isEditSite = 0;
+ console.log(this.siteWanParams);
+ console.log(this.templateParameters);
+ }
+
+ updatesite_cancel() {
+ Object.keys(this.siteBaseData).forEach((item) => {
+ this.siteBaseData[item] = null;
+ })
+ Object.keys(this.siteCpeData).forEach((item) => {
+ this.siteCpeData[item] = null;
+ })
+ this.siteWanData.forEach((item, index) => {
+ if (index > 0) {
+ this.siteWanData.splice(index, 1);
+ } else {
+ Object.keys(item).forEach((item2) => {
+ item[item2] = null;
+ });
+ this.tabInputShowWanPort[index] = true;
+ }
+
+ });
+ this.siteAddModelShow = false;
+ }
+
+ updatesite_OK() {
+ let inputs = {
+ "sdwandevice_list": [],
+ "sdwansitewan_list": []
+ };
+ inputs = Object.assign(inputs, this.siteBaseData);
+ inputs["sdwandevice_list"][0] = Object.assign({}, this.siteCpeData);
+ inputs["sdwansitewan_list"] = this.siteWanData.map((item) => {
+ return Object.assign({}, item);
+ });
+ console.log(inputs);
+ if (this.isEditSite) {
+ // Edit status does not increase
+ this.siteTableData[this.isEditSite - 1] = inputs;
+ this.siteTableData = [...this.siteTableData]; //Table refresh
+ } else {
+ // this.siteTableData.push(inputs);
+ this.siteTableData = [...this.siteTableData, inputs];
+ this.sitenum = [...this.sitenum, true];
+ }
+
+ Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box
+ this.siteBaseData[item] = null;
+ });
+ Object.keys(this.siteCpeData).forEach((item) => { //Clear modal box
+ this.siteCpeData[item] = null;
+ });
+ this.siteWanData.forEach((item, index) => {
+ if (index > 0) {
+ this.siteWanData.splice(index, 1);
+ this.tabInputShowWanPort.splice(index, 1);
+ } else {
+ Object.keys(item).forEach((item2) => {
+ item[item2] = null;
+ });
+ this.tabInputShowWanPort[index] = true;
+ }
+
+ });
+ console.log(this.siteTableData);
+ this.siteAddModelShow = false;
}
+ //add.edit,detele siteWanPort
+ updateSiteWan() {
+ console.log(this.tabInputShowWanPort)
+ if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited
+ return false;
+ }
+ let addNum = this.siteWanData.length;
+ let inputsData = Object.assign({}, this.siteWanParams);
+ Object.keys(inputsData).forEach((item) => {//Add a new line of empty data
+ if (item != "description") {
+ inputsData[item] = null;
+ }
+ });
+ this.siteWanData[addNum] = inputsData;
+ this.tabInputShowWanPort[addNum] = true;
+ this.siteWanData = [...this.siteWanData]; //Table refresh
+ console.log(this.siteWanData)
+ }
+ editUpdateWanPort(num, item, siteWanData) {
+ console.log(item)
+ if (this.tabInputShowWanPort[num - 1] == false) {
+ this.tabInputShowWanPort[num - 1] = true;
+ } else {
+ this.tabInputShowWanPort[num - 1] = false;
+ }
+ console.log(siteWanData);
+ }
+ deleteUpdateWanPort(num, item, siteWanData) {
+ if (this.siteWanData.length <= 1) {
+ console.log("num>=1", "siteWanData");
+ return false;
+ }
+ this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1);
+ console.log(this.siteWanData)
+ }
- localSite = [];
- outerSite = [];
+ // site节点图形描绘
+ // site分类,根据site查tp pnf --> allotted-resource
+ localSite = [];//本地site
+ outerSite = [];//外部site
getSiteAResource(){
return new Promise((res,rej)=>{
@@ -440,7 +564,34 @@ export class CcvpnDetailComponent implements OnInit {
}
];
- goback(){
+ submitUpdate() {
+ let globalCustomerId = this.detailParams.customer.id;
+ let globalServiceType = this.detailParams.serviceType.name;
+ let servicebody = {
+ service: {
+ name: this.templateParameters.service["name"],
+ description: this.templateParameters.service["description"],
+ serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"],
+ serviceUuid: this.templateParameters.service["serviceUuid"],
+ globalSubscriberId: globalCustomerId, //customer.id
+ serviceType: globalServiceType, //serviceType.value
+ parameters: {
+ locationConstraints: [],
+ },
+ resources: [],
+ requestInputs: {
+ sdwanvpnresource_list: [],
+ sdwansiteresource_list: []
+ }
+ }
+ };
+ servicebody.service.requestInputs.sdwanvpnresource_list = servicebody.service.requestInputs.sdwanvpnresource_list.concat(this.sotnVpnTableData);
+ servicebody.service.requestInputs.sdwansiteresource_list = servicebody.service.requestInputs.sdwansiteresource_list.concat(this.siteTableData);
+ console.log(servicebody);
+ this.closeUpdate.emit(servicebody);
+ }
+
+ goback() {
this.closeDetail.emit();
}
diff --git a/usecaseui-portal/src/app/myhttp.service.ts b/usecaseui-portal/src/app/myhttp.service.ts
index 7426f441..aff92d12 100644
--- a/usecaseui-portal/src/app/myhttp.service.ts
+++ b/usecaseui-portal/src/app/myhttp.service.ts
@@ -48,6 +48,7 @@ export class MyhttpService {
nsProgress: this.baseUrl + "/uui-lcm/jobs/getNsLcmJobStatus/" + "*_*" + "?responseId=0&serviceInstanceId=",
e2eScale: this.baseUrl + "/services/scaleServices/",
e2e_nsdata: this.baseUrl + "/getServiceInstanceById/customerId/",
+ updateccvpn:this.baseUrl + "/uui-lcm/services/updateService/",
allottedResource: this.baseUrl + "/uui-sotn/getAllottedResources",
pnfDetail: this.baseUrl + "/uui-sotn/getPnfInfo/",
@@ -135,6 +136,12 @@ export class MyhttpService {
return this.http.post<any>(this.url.ns_createService2 + params, requestBody);
}
+ updateccvpn(id,requestBody){
+ console.log(id);
+ console.log(requestBody);
+ //return this.http.get<any>(this.url.updateccvpn + id); //local
+ return this.http.put<any>(this.url.updateccvpn + id,requestBody);// online
+ }
// Delete interface
deleteInstance(obj) {
let httpOptions = {
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index b0efa5f4..35504ae0 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -629,6 +629,7 @@
<div class="detailComponent" *ngIf="detailshow">
<app-ccvpn-detail [detailParams]="detailData"
[upDateShow]="upDateShow"
+ (closeUpdate)="closeCCVPNUpdate($event,templateUpdateSuccessFaild)"
(closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail>
</div>
<div class="detailComponent" *ngIf="detailshow2">
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 45652529..22ea733c 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -1003,6 +1003,69 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) {
})
}
+ updateCcvpnNotification(template: TemplateRef<{}>): void {
+ console.log(template,"updateCcvpnNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
+ updateCcvpnSuccessNotification(template: TemplateRef<{}>): void {
+ console.log(template,"updateCcvpnSuccessNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
+
+ closeCCVPNUpdate(obj,templateUpdateSuccessFaild){
+ console.log(obj);
+ this.detailshow = false;
+ this.listDisplay = false;
+ this.upDateShow = false;
+ this.detailData["rate"] = 0;
+ this.detailData["status"] = "In Progress";
+ this.detailData['tips'] = "";
+ this.detailData["statusClass"] = "1005";
+ let id = this.detailData["service-instance-id"];
+ this.myhttp.updateccvpn(id, obj)
+ .subscribe((data) => {
+ if (data.status == "FAILED") {
+ console.log("scale E2e service Failed :" + JSON.stringify(data));
+ this.detailData["status"] = "Failed";
+ this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => {
+ return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language
+ })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
+ return its["sortCode"] == 2002 && its["language"] == this.language
+ })["sortValue"];
+ this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild);
+ return false;
+ }
+ let obj = {
+ serviceId: id,
+ operationId: data.operationId
+ }
+ let updata = (prodata) => {
+ this.detailData["rate"] = prodata.progress;
+ this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => {
+ return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language
+ })["sortValue"] + '\xa0\xa0\xa0' +this.detailData["rate"]+"%";
+ if (this.detailData["rate"] > 100) {
+ this.detailData["status"] = prodata.status;
+ this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => {
+ return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language
+ })["sortValue"]+ '\xa0\xa0\xa0' + this.detailData["status"];
+ }
+ };
+ this.queryProgress(obj, updata).then(() => {
+ this.detailData["rate"] = 100;
+ this.detailData["status"] = "Successful";
+ this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => {
+ return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language
+ })["sortValue"]+ '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
+ return its["sortCode"] == 2001 && its["language"] == this.language
+ })["sortValue"];
+ this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild);
+ })
+ })
+ }
+
deleteService(service,templateDeleteSuccessFaild) {
let allprogress = {}; //
let querypros = []; //
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 3cdc7112..c78d7fcb 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -73,7 +73,7 @@ nz-table {
}
}
-// ����ҳ��������ʽ
+
.detailInformatioin {
nz-table {
.ant-table-small {