diff options
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> + + <span class="action" (click)="editUpdateSite(i+1)" *ngIf="sitenum[i]"><i class="anticon anticon-edit"></i></span> + + <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 { |