summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/services/services-list
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/services/services-list')
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.css25
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html131
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less41
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts525
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()