diff options
Diffstat (limited to 'usecaseui-portal/src/app/services/services-list')
4 files changed, 430 insertions, 292 deletions
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css index eaf8fddb..63426fd9 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.css +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css @@ -108,6 +108,31 @@ hr { font-size: 12px; color: #147dc2; } +.list nz-table.table2 tr td { + padding: 10px 8px; +} +.list nz-table.table2 tr td span.action { + color: #3fa8eb; + cursor: pointer; + padding: 5px; +} +.list nz-table.table2 tr td span.cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.list nz-table.table2 tr td span.deleting { + color: red; + font-size: 12px; + display: block; + height: 12px; +} +.list nz-table.table2 tr td span.creating { + color: #3fa8eb; + font-size: 12px; + display: block; + height: 12px; +} .detailComponent { position: absolute; left: 0; 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 e0866524..c18d294a 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 @@ -39,34 +39,40 @@ <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button> <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> - <p>Content one</p> - <p>Content two</p> - <p>Content three</p> - </nz-modal> - <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button> - <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()"> <span style="display:inline-block;width:70px;">Service: </span> <nz-select style="width: 165px;" [(ngModel)]="templateTypeSelected" nzAllowClear (ngModelChange)="choseTemplateType()"> <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> --> <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option> <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option> + <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option> + <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option> </nz-select> <hr> - <span>SOTN VPN: </span> - <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear > - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> + <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'"> + <span>SOTN VPN: </span> + <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> - <span> SITE: </span> - <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear > - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - - <div *ngIf="templateTypeSelected == 'CCVPN'"> - <br> - <span style="display:inline-block;width:70px;">SD-WAN: </span> - <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear > + <br><br> + <span style="display:inline-block;width:70px;"> SITE: </span> + <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + + <div *ngIf="templateTypeSelected == 'CCVPN'"> + <br> + <span style="display:inline-block;width:70px;">SD-WAN: </span> + <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear > + <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> + </nz-select> + </div> + </div> + + <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'"> + <span style="display:inline-block;width:70px;">TEMPLATE: </span> + <nz-select style="width: 165px;" [(ngModel)]="template4" nzAllowClear > <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> </nz-select> </div> @@ -101,76 +107,40 @@ <tbody> <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> <tr> - <td>{{i+1}}</td> - <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td> - <td>{{data.serviceId}}</td> - <td>{{data.name}}</td> - <td>{{data.type}}</td> + <td>{{pageSize*(pageIndex-1) + i+1}}</td> + <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td> + <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> + <td>{{data["service-instance-name"] || data.nsName}}</td> + <td>{{data.serviceDomain}}</td> <td> <span [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding', - 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status}}</span> - <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress> + 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status || "Active"}}</span> + <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Updating' " [nzPercent]="data.rate"></nz-progress> + <!-- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> --> </td> <td> - <i class="anticon anticon-setting" (click)="scaleService()"></i> - <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> - <i class="anticon anticon-delete" (click)="deleteService()"></i> + <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i> + <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> --> + <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-pause" (click)="stopService(data)"></i> + <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="restartService(data)"></i> + <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i> + <i class="anticon anticon-delete" (click)="deleteService(data)"></i> + <!-- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" + (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span> + <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" + (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> --> </td> </tr> - <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children"> + <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances"> <td></td> <td></td> - <td>{{item.serviceId}}</td> - <td>{{item.name}}</td> - <td colspan="3">{{item.type}}</td> + <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> + <td>{{data["service-instance-name"] || data.nsName}}</td> + <td colspan="3">{{item.serviceDomain}}</td> </tr> </ng-template> </tbody> </nz-table> - <nz-table *ngIf="1" - #nzTable2 [nzData]="tableData2" - nzShowSizeChanger - [nzFrontPagination]="true" - [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" - [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' - nzSize="middle" - [nzScroll]="{ y: '58vh' }"> - <thead nzSingleSort> - <tr> - <th nzWidth="5%">NO.</th> - <th nzWidth="20%"> Instance ID </th> - <th nzWidth="20%">Instance Name</th> - <!-- <th nzWidth="10%">Type</th> --> - <th nzWidth="25%">Description</th> - <th nzWidth="15%">Status</th> - <th nzWidth="10%">Action</th> - </tr> - </thead> - <tbody> - <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> --> - <tr *ngFor="let item of nzTable2.data; let i = index; "> - <td>{{pageSize*(pageIndex-1) + i+1}}</td> - <td>{{item.sotnvpnSer['service-instance-id']}}</td> - <td>{{item.sotnvpnSer['service-instance-name']}}</td> - <!-- <td>{{item.type}}</td> --> - <td>{{item.sotnvpnSer.description}}</td> - <td> - <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span> - <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span> - <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> - </td> - <td> - <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" - (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span> - <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" - (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> - </td> - </tr> - <!-- </ng-template> --> - </tbody> - </nz-table> </div> <div class="detailComponent" *ngIf="detailshow"> @@ -183,3 +153,10 @@ (closeCreate)="closeCreate($event)"> </app-ccvpn-creation> </div> +<div class="createComponent" *ngIf="createshow2"> + <app-e2e-creation + [createParams]="createData" + (nsCloseCreate)="nsCloseCreate($event)" + (e2eCloseCreate)="e2eCloseCreate($event)"> + </app-e2e-creation> +</div> diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index 7e8ff80e..8f83cc9d 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -1,3 +1,18 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ .title { font: 700 18px/18px "思源黑体"; color: #4c5e70; @@ -103,6 +118,32 @@ hr { } } +.list nz-table.table2 tr td { + padding: 10px 8px; +} +.list nz-table.table2 tr td span.action { + color: #3fa8eb; + cursor: pointer; + padding: 5px; +} +.list nz-table.table2 tr td span.cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} +.list nz-table.table2 tr td span.deleting { + color: red; + font-size: 12px; + display: block; + height: 12px; +} +.list nz-table.table2 tr td span.creating { + color: #3fa8eb; + font-size: 12px; + display: block; + height: 12px; +} + .detailComponent { position: absolute; left: 0; 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 d893070d..9ea28d4b 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 @@ -1,3 +1,18 @@ +/* + Copyright (C) 2018 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ import { Component, OnInit, HostBinding } from '@angular/core'; import { MyhttpService } from '../../myhttp.service'; import { slideToRight } from '../../animates'; @@ -13,18 +28,18 @@ export class ServicesListComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; constructor(private myhttp: MyhttpService, private modalService: NzModalService) { } + ngOnInit() { this.getallCustomers(); - this.getTemplateSubTypes(); this.inputNamests(); } - // 筛选框（下拉框）customer servicetype + // customer servicetype customerList = []; customerSelected = {name:null,id:null}; serviceTypeList = []; - serviceTypeSelected = {name:null,id:null}; + serviceTypeSelected = {name:null}; - // 获取所有customer + // getallCustomers(){ this.myhttp.getAllCustomers() .subscribe((data)=>{ @@ -50,108 +65,71 @@ export class ServicesListComponent implements OnInit { this.getTableData(); } - // 模态框（对话框） create + + // Create modal box 2 (dialog box) create ------------------------------- isVisible = false; showModal(): void { this.isVisible = true; - } - handleOk(): void { - console.log('Button ok clicked!'); - this.isVisible = false; - } - handleCancel(): void { - console.log('Button cancel clicked!'); - this.isVisible = false; - this.isVisible2 = false; - } - - // 创建模态框2（对话框） create ------------------------------- - isVisible2 = false; - showModal2(): void { - this.isVisible2 = true; - this.templates1 = []; //多次创建会push累积名字，从新置空 - this.templates2 = []; - this.templates3 = []; this.getAlltemplates(); } - // 服务 + // templateTypeSelected = "SOTN"; choseTemplateType(){ - // this.filterTemplates();//分类 + this.getAlltemplates(); } - // 模板 - templates = []; templates1;templates2;templates3; + // + templates = []; template1={name:null}; template2={name:null}; template3={name:null}; - // 模板分类数据,创建、获取实例分类共用 - templateSubTypes = {}; //子类，sotnvpn、site、sdwan - getTemplateSubTypes(){ - this.myhttp.getServicesCategory() - .subscribe((data)=>{ - this.templateSubTypes = data; - },(err)=>{ - console.log("getTemplateTypes err") - }) - } + template4={name:null}; - getAlltemplates(){ //获取所有模板类型 - this.myhttp.getAllServiceTemplates() + getAlltemplates(){ // + this.myhttp.getAllServiceTemplates(this.templateTypeSelected) .subscribe((data)=>{ console.log(data) this.templates = data; - this.template1 = data[0]; - this.template2 = data[1]; - this.template3 = data[2]; - // this.filterTemplates();//分类 + if(this.templateTypeSelected=="Network Service"){ + this.templates = data.map((item)=>{return {name:item.packageInfo.csarName,id:item.csarId,packageInfo:item.packageInfo}}); + } + this.template1 = this.templates[0]; + this.template2 = this.templates[1]; + this.template3 = this.templates[2]; + this.template4 = this.templates[0]; + },(err)=>{ }) } - // filterTemplates(){ //模板类型分类，本地配置文件 - // this.templates1 = []; - // this.templates2 = []; - // this.templates3 = []; - // this.templates.forEach((item)=>{ - // this.templateSubTypes[this.templateTypeSelected].sotnvpn.find((d)=>{ - // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID - // })?this.templates1.push(item):null; - // this.templateSubTypes[this.templateTypeSelected].site.find((d)=>{ - // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID - // })?this.templates2.push(item):null; - // if(this.templateTypeSelected=="CCVPN"){ - // this.templateSubTypes[this.templateTypeSelected].sdwan.find((d)=>{ - // return d["model-invariant-id"] == item.uuid && d["model-version-id"] == item.invariantUUID - // })?this.templates3.push(item):null; - // } - // }) - // this.template1 = this.templates1[0]; - // this.template2 = this.templates2[0]; - // if(this.templates3[0]){ - // this.template3 = this.templates3[0]; - // } - // } - // 确定、取消 + + // createshow = false; + createshow2 = false; createData:Object={}; - handleOk2(): void { + handleOk(): void { console.log('Button ok clicked!'); - this.isVisible2 = false; - let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}}; - let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}}; + this.isVisible = false; + + if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){ + let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}}; + let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}}; + this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2; + this.createshow = true; + }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){ + this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4}; + this.createshow2 = true; + } - this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2; - this.createshow = true; } - // handleCancel(): void { - // console.log('Button cancel clicked!'); - // this.isVisible2 = false; - // } + handleCancel(): void { + console.log('Button cancel clicked!'); + this.isVisible = false; + } - //表格数据 + //tableData tableData = []; pageIndex = 1; pageSize = 10; @@ -160,10 +138,10 @@ export class ServicesListComponent implements OnInit { sortName = null; sortValue = null; getTableData(){ - // 查询参数: customer serviceType 当前页码，每页条数，排序方式 + // params: customer serviceType pageIndex，pageSize，sortName let paramsObj = { - customer:this.customerSelected, - serviceType:this.serviceTypeSelected, + customer:this.customerSelected.id, + serviceType:this.serviceTypeSelected.name, pageIndex:this.pageIndex, pageSize:this.pageSize, serviceIdSort:this.sortValue @@ -194,119 +172,54 @@ export class ServicesListComponent implements OnInit { updataService(){ console.log("updataService!"); } - deleteService(){ - console.log("deleteService!"); - } - - //表格数据 - tableData2 = []; - getTableData2(){ - let params = { - customerId:this.customerSelected.id, - serviceType:this.serviceTypeSelected - } - this.myhttp.getInstanceTableData(params) - .subscribe((data)=>{ - this.pageIndex = 1; - this.tableData2 = []; - console.log(data) - // data.results.forEach((item)=>{ - // item["sotnvpnSer"] = item["service-subscription"]["service-instances"]["service-instance"].find((d)=>{ - // return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{ - // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"] - // })?item["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{ - // return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"] - // })?item["Type"]="CCVPN":null - // }) - - // if(item["sotnvpnSer"]){ - // this.tableData2.push(item); - // } - // }) - - //---------数据结构有问题，模拟只有一组数据情况---------// - data["sotnvpnSer"] = data["service-instance"].find((d)=>{ - return this.templateSubTypes["SOTN"].sotnvpn.find((m)=>{ - return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"] - })?d["Type"]="SOTN":null || this.templateSubTypes["CCVPN"].sotnvpn.find((m)=>{ - return d["model-invariant-id"]==m["model-invariant-id"] && d["model-version-id"]==m["model-version-id"] - })?d["Type"]="CCVPN":null - }) - let inputParams = JSON.parse(data["sotnvpnSer"]["input-parameters"]).service.parameters.requestInputs; - let descriptionName = Object.keys(inputParams).find((item)=>{ return item.endsWith("_description")}); - data["sotnvpnSer"]["description"] = inputParams[descriptionName]; - data["sotnvpnSer"]["status"] = "Active"; - this.tableData2.push(data); + stopService(data){ - console.log(this.tableData2) - },(err)=>{ - console.log(err); - }) } + restartService(data){ - // 显示详情 + } + // detailshow = false; detailData:Object; - showDetail(service){ + serviceDetail(service){ service["siteSer"]=[]; service["sdwanSer"]=[]; service["customer"]=this.customerSelected; service["serviceType"] = this.serviceTypeSelected; - // service["service-subscription"]["service-instances"]["service-instance"].forEach((item)=>{ - // this.templateSubTypes[service.Type].site.find((d)=>{ - // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] - // })?service["siteSer"].push(item):null; - // if(service.Type=="CCVPN"){ - // this.templateSubTypes[service.Type].sdwan.find((d)=>{ - // return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] - // })?service["sdwanSer"].push(item):null; - // } - // }) - service["service-instance"].forEach((item)=>{ - this.templateSubTypes[service.sotnvpnSer.Type].site.find((d)=>{ - return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] - })?service["siteSer"].push(item):null; - if(service.sotnvpnSer.Type=="CCVPN"){ - this.templateSubTypes[service.sotnvpnSer.Type].sdwan.find((d)=>{ - return d["model-invariant-id"] == item["model-invariant-id"] && d["model-version-id"] == item["model-version-id"] - })?service["sdwanSer"].push(item):null; + + service.childServiceInstances.forEach((item)=>{ + if(item.serviceDomain=="SITE"){ + service.siteSer.push(item); + }else if(item.serviceDomain=="SDWAN"){ + service.sdwanSer.push(item); } }) this.detailshow = true; this.detailData = service; console.log(service); } - // 删除 确认模态框 - deleteInstace(service){ - // 创建确认框 + // deleteService(){ + // console.log("deleteService!"); + // } + + + // + deleteService(service){ this.modalService.confirm({ nzTitle : 'Are you sure delete this instance?', - nzContent : `Instance ID: <b class="deleteModelContent"> ${service.sotnvpnSer["service-instance-id"]}</b>`, + nzContent : `Instance ID: <b class="deleteModelContent"> ${service["service-instance-id"]}</b>`, nzOkText : 'Yes', nzOkType : 'danger', nzOnOk : () => { console.log(service); - let allprogress = {}; //所有进度值，以operationId为键 - let querypros = []; //所有查询 - service.sotnvpnSer.rate = 0; - service.sotnvpnSer.status = "deleting"; - // let deletePros = service["service-subscription"]["service-instances"]["service-instance"].map((item)=>{ - // let id = item["service-instance-id"]; - // return new Promise((res,rej)=>{ - // this.myhttp.deleteInstance(id) - // .subscribe((data)=>{ - // let obj = {serviceId:id,operationId:data.operationId} - // let updata = (prodata)=>{ - // allprogress[prodata.operationId] = prodata.progress; - // let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); - // service.sotnvpnSer["rate"]=average; - // } - // querypros.push(this.queryProgress(obj,updata)); - // res(); - // }) - // }) - // }) - let deletePros = service["service-instance"].map((item)=>{ + let allprogress = {}; // + let querypros = []; // + service.rate = 0; + service.status = "Deleting"; + + service["childServiceInstances"].push({"service-instance-id":service["service-instance-id"]}) + + let deletePros = service["childServiceInstances"].map((item)=>{ let params = { globalSubscriberId:this.customerSelected.id, serviceType:this.serviceTypeSelected, @@ -319,7 +232,7 @@ export class ServicesListComponent implements OnInit { let updata = (prodata)=>{ allprogress[prodata.operationId] = prodata.progress; let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)); - service.sotnvpnSer["rate"]=average; + service["rate"]=average; } querypros.push(this.queryProgress(obj,updata)); res(); @@ -330,11 +243,16 @@ export class ServicesListComponent implements OnInit { Promise.all(deletePros).then(()=>{ Promise.all(querypros).then((data)=>{ console.log(data); - service.sotnvpnSer.rate = 100; - service.sotnvpnSer.status = "deleted"; - setTimeout(()=>{ - this.getTableData(); - },1000) + service.rate = 100; + service.status = "completed"; + let hasUndone = this.tableData.some((item)=>{ + return item.rate < 100; + }) + if(!hasUndone){ + setTimeout(()=>{ + this.getTableData(); + },1000) + } }) }) @@ -344,35 +262,34 @@ export class ServicesListComponent implements OnInit { }); } - + //ccvpn sotn createservice + parentServiceInstanceId=""; closeCreate(obj){ if(!obj){ - this.createshow = false; //关闭创建窗口 + this.createshow = false; //close return false; } - this.createshow = false; //关闭创建窗口 + this.createshow = false; console.log(obj); - let newData; //主表格中新创建的服务数据 - let stageNum = 0; //不同阶段进度，用于后续服务进度相加； - // -------------------------------------------------------------------------- - // obj.groupbody.map((group)=>{ //所有创建 - // return this.createService(group) - // }) - // obj.sitebody.map((group)=>{ //所有创建 - // console.log(group) - // return this.createService(group) - // }) - // ----------------------------------------------------------------------------- - this.createService(obj.vpnbody).then((data)=>{ + let newData; //Newly created service data for the main table + let stageNum = 0; //Different stages of progress, used to add up subsequent service progress; + + let createParams = "?customerId="+this.customerSelected.id + + "&serviceType="+this.serviceTypeSelected.name + + "&serviceDomain="+this.templateTypeSelected + + "&parentServiceInstanceId="; + this.createService(obj.vpnbody,createParams).then((data)=>{ console.log(data) - newData = { //主表格中新创建的服务数据 + this.parentServiceInstanceId = data["serviceId"]; //------------updata parentServiceInstanceId + newData = { // 'service-instance-id':data["serviceId"], 'service-instance-name':obj.vpnbody.service.name, - description:obj.vpnbody.service.description, - status:"creating", + serviceDomain:this.templateTypeSelected, + childServiceInstances:[], + status:"Creating", rate:0, } - this.tableData2 = [{sotnvpnSer:newData},...this.tableData2]; + this.tableData = [newData,...this.tableData]; let updata = (prodata)=>{ newData.rate = Math.floor(prodata.progress/3); } @@ -380,11 +297,17 @@ export class ServicesListComponent implements OnInit { return this.queryProgress(queryParams,updata); }).then((data)=>{ console.log(data); - stageNum = newData.rate; //阶段进度值更新； - let allprogress = {}; //所有进度值，以operationId为键 - let querypros = []; //所有查询 - let createPros = obj.groupbody.map((group)=>{ //所有创建 - return this.createService(group).then((data)=>{ + stageNum = newData.rate; //Phase progress value update; + let allprogress = {}; // + let querypros = []; //All the query + // Additional parameters + let createParams = "?customerId="+this.customerSelected.id + + "&serviceType="+this.serviceTypeSelected.name + + "&serviceDomain="+"SDWAN" + + "&parentServiceInstanceId="+this.parentServiceInstanceId; + + let createPros = obj.groupbody.map((group)=>{ // + return this.createService(group,createParams).then((data)=>{ console.log(data); let updata = (prodata)=>{ allprogress[prodata.operationId] = prodata.progress; @@ -397,7 +320,7 @@ export class ServicesListComponent implements OnInit { }) return new Promise((res)=>{ - Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕 + Promise.all(createPros).then(()=>{ //All queries in querypros are added only once created Promise.all(querypros).then((data)=>{ console.log(data); res("site--begin"); @@ -406,11 +329,16 @@ export class ServicesListComponent implements OnInit { }) }).then((data)=>{ console.log(data); - stageNum = newData.rate; //阶段进度值更新； + stageNum = newData.rate; //Phase progress value update; let allprogress = {}; - let querypros = []; //所有查询 - let createPros = obj.sitebody.map((group)=>{ //所有创建 - return this.createService(group).then((data)=>{ + let querypros = []; //All the query + // Additional parameters + let createParams = "?customerId="+this.customerSelected.id + + "&serviceType="+this.serviceTypeSelected.name + + "&serviceDomain="+"SITE" + + "&parentServiceInstanceId="+this.parentServiceInstanceId; + let createPros = obj.sitebody.map((group)=>{ + return this.createService(group,createParams).then((data)=>{ console.log(data); let updata = (prodata)=>{ allprogress[prodata.operationId] = prodata.progress; @@ -422,23 +350,125 @@ export class ServicesListComponent implements OnInit { }) }) console.log(createPros); - Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕 + Promise.all(createPros).then(()=>{ // Promise.all(querypros).then((data)=>{ console.log(data); newData.rate = 100; newData.status = "completed"; - setTimeout(()=>{ - this.getTableData(); - },1000) + let hasUndone = this.tableData.some((item)=>{ + return item.rate < 100; + }) + if(!hasUndone){ + setTimeout(()=>{ + this.getTableData(); + },1000) + } }) }) }) } - createService(params){ + e2eCloseCreate(obj){ + if(!obj){ + this.createshow2 = false; // + return false; + } + this.createshow2 = false; // + console.log(obj); + let newData; // + let createParams = "?customerId="+this.customerSelected.id + + "&serviceType="+this.serviceTypeSelected.name + + "&serviceDomain="+this.templateTypeSelected + + "&parentServiceInstanceId="; + this.createService(obj,createParams).then((data)=>{ + console.log(data); + newData = { // + 'service-instance-id':data["serviceId"], + 'service-instance-name':obj.name, + serviceDomain:this.templateTypeSelected, + childServiceInstances:[], + status:"Creating", + rate:0, + } + + this.tableData = [newData,...this.tableData]; + let updata = (prodata)=>{ + newData.rate = prodata.progress; + } + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + return this.queryProgress(queryParams,updata); + }).then((data)=>{ + console.log(data); + newData.rate = 100; + newData.status = "completed"; + let hasUndone = this.tableData.some((item)=>{ + return item.rate < 100; + }) + if(!hasUndone){ + setTimeout(()=>{ + this.getTableData(); + },1000) + } + }) + + } + + nsCloseCreate(obj){ + if(!obj){ + this.createshow2 = false; // + return false; + } + this.createshow2 = false; // + console.log(obj); + let newData; // + // step1 + this.myhttp.nsCreateInstance(obj.step1) + .subscribe((data)=>{ + console.log(data); + newData = { // + 'service-instance-id':data.nsInstanceId, + 'service-instance-name':obj.step1.nsName, + serviceDomain:this.templateTypeSelected, + childServiceInstances:[], + status:"Creating", + rate:0, + } + this.tableData = [newData,...this.tableData]; + let createParams = "?ns_instance_id=" + data.nsInstanceId + + "&customerId="+this.customerSelected.id + + "&serviceType="+this.serviceTypeSelected.name + + "&serviceDomain="+"SITE" + + "&parentServiceInstanceId="+this.parentServiceInstanceId; + // step2 + this.createNsService(createParams,obj.step2).then((jobid)=>{ + + let updata = (prodata)=>{ + newData.rate = prodata.responseDescriptor.progress; + } + + return this.queryNsProgress(jobid,updata); + }).then((data)=>{ + console.log(data); + newData.rate = 100; + newData.status = "completed"; + let hasUndone = this.tableData.some((item)=>{ + return item.rate < 100; + }) + if(!hasUndone){ + setTimeout(()=>{ + this.getTableData(); + },1000) + } + }) + + + }) + } + + createService(requestBody,createParams){ let mypromise = new Promise((res,rej)=>{ - this.myhttp.createInstance(params) + this.myhttp.createInstance(requestBody,createParams) .subscribe((data)=>{ res(data.service); @@ -446,6 +476,15 @@ export class ServicesListComponent implements OnInit { }) return mypromise; } + createNsService(id,obj){ + let mypromise = new Promise((res,rej)=>{ + this.myhttp.nsCreateInstance2(id,obj) + .subscribe((data)=>{ + res(data.jobId); + }) + }) + return mypromise; + } queryProgress(obj,callback){ let mypromise = new Promise((res,rej)=>{ @@ -497,9 +536,65 @@ export class ServicesListComponent implements OnInit { }) return mypromise; } + queryNsProgress(jobid,callback){ + let mypromise = new Promise((res,rej)=>{ + // let data = { + // "jobId": "string", + // "responseDescriptor": { + // "status": "string", + // "progress": 0, + // "statusDescription": "string", + // "errorCode": "string", + // "responseId": "string", + // "responseHistoryList": [ + // { + // "status": "string", + // "progress": "string", + // "statusDescription": "string", + // "errorCode": "string", + // "responseId": "string" + // } + // ] + // } + // } + let requery = (responseId)=>{ + this.myhttp.getNsProgress(jobid,responseId) + .subscribe((data)=>{ + if(data.responseDescriptor.progress==undefined){ + console.log(data); + setTimeout(()=>{ + requery(data.responseDescriptor.responseId); + },5000) + return false; + } + if(data.responseDescriptor.progress < 100){ + callback(data); + setTimeout(()=>{ + requery(data.responseDescriptor.responseId); + },5000) + }else { + res(data); + } + }) + // setTimeout(()=>{ + // console.log(data.responseDescriptor.progress) + // data.responseDescriptor.progress++; + // if(data.responseDescriptor.progress<100){ + // callback(data); + // requery(data.responseDescriptor.responseId) + // }else{ + // callback(data); + // res(data) + // } + // },100) + } + requery(0); + }) + return mypromise; + } - // 名字转换参数匹配 --> 传给子组件用 + // --> namesTranslate:Object; inputNamests(){ this.myhttp.inputNamesTransform() |