<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>
</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>
<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>
<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>
<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>
@Input() detailParams;
@Input() upDateShow;
@Output() closeDetail = new EventEmitter();
+ @Output() closeUpdate = new EventEmitter();
tabBarStyle = {
"height": "58px",
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
// 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);
}
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数据
//筛选 分离 site数据
inputs["sdwansiteresource_list"].map((item, index) => {
this.siteTableData.push(item);
+ this.sitenum.push(false);
});
let sdwansiteresource_list = inputs["sdwansiteresource_list"][0];
}
}
});
+ 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) {
}
});
this.siteWanData.push(this.siteWanParams);
+ this.siteWanData.map((item, index) => {
+ this.tabInputShowWanPort[index] = true;
+ });
}
//sotnVpn detail show
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];
});
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)=>{
}
];
- 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();
}
})
}
+ 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 = []; //
Code Review / usecase-ui.git / commitdiff