From de9d2e95b43991fccee342ebed03b006f6fed844 Mon Sep 17 00:00:00 2001 From: zhangab Date: Tue, 23 Oct 2018 11:32:03 +0800 Subject: Build AngularJs component for usecase-ui Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab --- .../onboard-vnf-vm/onboard-vnf-vm.component.css | 59 +++ .../onboard-vnf-vm/onboard-vnf-vm.component.html | 61 +++ .../onboard-vnf-vm/onboard-vnf-vm.component.less | 50 ++ .../onboard-vnf-vm.component.spec.ts | 25 + .../onboard-vnf-vm/onboard-vnf-vm.component.ts | 61 +++ .../services-list/services-list.component.css | 132 ++++++ .../services-list/services-list.component.html | 185 ++++++++ .../services-list/services-list.component.less | 127 +++++ .../services-list/services-list.component.spec.ts | 25 + .../services-list/services-list.component.ts | 511 +++++++++++++++++++++ .../src/app/services/services.component.html | 18 + .../src/app/services/services.component.less | 0 .../src/app/services/services.component.spec.ts | 25 + .../src/app/services/services.component.ts | 15 + 14 files changed, 1294 insertions(+) create mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css create mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html create mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less create mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts create mode 100644 usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts create mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.css create mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.html create mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.less create mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts create mode 100644 usecaseui-portal/src/app/services/services-list/services-list.component.ts create mode 100644 usecaseui-portal/src/app/services/services.component.html create mode 100644 usecaseui-portal/src/app/services/services.component.less create mode 100644 usecaseui-portal/src/app/services/services.component.spec.ts create mode 100644 usecaseui-portal/src/app/services/services.component.ts (limited to 'usecaseui-portal/src/app/services') diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css new file mode 100644 index 00000000..a1cc6455 --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css @@ -0,0 +1,59 @@ +/* + 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; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; +} +.list nz-table tbody td span.onboarding { + font-size: 12px; + color: #147dc2; +} +.list nz-table tbody td span.onboarded { + font-size: 14px; + color: #147dc2; +} +.list nz-table tbody td span.updating { + font-size: 12px; + color: blue; +} +.list nz-table tbody td span.deleting { + font-size: 12px; + color: red; +} +.list nz-table tbody td span.invalid { + font-size: 14px; + color: purple; +} +.list nz-table tbody td i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; +} +.list nz-table tbody td i.anticon:hover { + color: #147dc2; +} diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html new file mode 100644 index 00000000..d5286a3a --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -0,0 +1,61 @@ + +

Onboard VNF

+
+
+ + + + NO + Name + Type + Version + Status + Action + + + + + + {{i+1}} + {{item.name}} + {{item.type}} + {{item.version}} + + {{item.status}} + + + + + + + + + + +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less new file mode 100644 index 00000000..ab118737 --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -0,0 +1,50 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; + nz-table { + tbody { + td { + span.onboarding { + font-size: 12px; + color: #147dc2; + } + span.onboarded { + font-size: 14px; + color: #147dc2; + } + span.updating { + font-size: 12px; + color: blue; + } + span.deleting { + font-size: 12px; + color: red; + } + span.invalid { + font-size: 14px; + color: purple; + } + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + } + } + } +} \ No newline at end of file diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts new file mode 100644 index 00000000..0e49f656 --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OnboardVnfVmComponent } from './onboard-vnf-vm.component'; + +describe('OnboardVnfVmComponent', () => { + let component: OnboardVnfVmComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OnboardVnfVmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OnboardVnfVmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts new file mode 100644 index 00000000..c42b3ce3 --- /dev/null +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { MyhttpService } from '../../myhttp.service'; +import { slideToRight } from '../../animates'; + +@Component({ + selector: 'app-onboard-vnf-vm', + templateUrl: './onboard-vnf-vm.component.html', + styleUrls: ['./onboard-vnf-vm.component.less'], + animations: [ slideToRight ] +}) +export class OnboardVnfVmComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + constructor(private myhttp: MyhttpService) { } + + ngOnInit() { + this.getTableData(); + } + + + //表格数据 + tableData = []; + pageIndex = 1; + pageSize = 10; + total = 100; + loading = false; + sortName = null; + sortValue = null; + getTableData(){ + // 查询参数: 当前页码，每页条数，排序方式 + let paramsObj = { + pageIndex:this.pageIndex, + pageSize:this.pageSize, + nameSort:this.sortValue + } + this.myhttp.getOnboardTableData(paramsObj) + .subscribe((data)=>{ + console.log(data); + this.total = data.body.total; + this.tableData = data.body.tableList; + },(err)=>{ + console.log(err); + }) + } + sort(sort: { key: string, value: string }): void { + console.log(sort); + this.sortName = sort.key; + this.sortValue = sort.value; + this.getTableData(); + } + searchData(reset:boolean = false){ + console.log(reset) + this.getTableData(); + } + updataService(){ + console.log("updataService!"); + } + deleteService(){ + console.log("deleteService!"); + } + +} 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 new file mode 100644 index 00000000..eaf8fddb --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.css @@ -0,0 +1,132 @@ +/* + 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; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.action { + margin-bottom: 20px; +} +.action span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; +} +.action nz-dropdown { + vertical-align: middle; +} +.action nz-dropdown :hover { + border-color: #147dc2; +} +.action nz-dropdown button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; +} +.action nz-dropdown button span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; +} +.action nz-dropdown button i { + position: absolute; + top: 10px; + right: 10px; +} +.action .create { + float: right; + height: 30px; + padding: 0 10px; +} +.action .create span { + color: #fff; + font-weight: 400; +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; +} +.list nz-table tbody td span.active { + font-size: 14px; + color: #147dc2; +} +.list nz-table tbody td span.closed { + font-size: 14px; + color: red; +} +.list nz-table tbody td span.onboarding { + font-size: 12px; + color: #147dc2; +} +.list nz-table tbody td span.updating { + font-size: 12px; + color: blue; +} +.list nz-table tbody td span.deleting { + font-size: 12px; + color: red; +} +.list nz-table tbody td span.creating { + font-size: 12px; + color: green; +} +.list nz-table tbody td i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; +} +.list nz-table tbody td i.anticon:hover { + color: #147dc2; +} +.list nz-table tbody tr.childtr td { + font-size: 12px; + color: #147dc2; +} +.detailComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} +.createComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} 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 new file mode 100644 index 00000000..e0866524 --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -0,0 +1,185 @@ + +

Services List

+
+
+ Customer: + + + + + +    + Service Type: + + + + + + + +

Content one

+

Content two

+

Content three

+ + + + Service: + + + + + + +
+ SOTN VPN: + + + + + SITE: + + + + +
+
+ SD-WAN: + + + +
+ +
+
+ + + + NO + + Service Instance Id + Name + Type + Status + Action + + + + + + {{i+1}} + + {{data.serviceId}} + {{data.name}} + {{data.type}} + + {{data.status}} + + + + + + + + + + + + {{item.serviceId}} + {{item.name}} + {{item.type}} + + + + + + + + NO. + Instance ID + Instance Name + + Description + Status + Action + + + + + + {{pageSize*(pageIndex-1) + i+1}} + {{item.sotnvpnSer['service-instance-id']}} + {{item.sotnvpnSer['service-instance-name']}} + + {{item.sotnvpnSer.description}} + + {{item.sotnvpnSer.status}} + {{item.sotnvpnSer.status}} + + + + + + + + + + +
+ +
+ +
+
+ + +
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 new file mode 100644 index 00000000..7e8ff80e --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -0,0 +1,127 @@ +.title { + font: 700 18px/18px "思源黑体"; + color: #4c5e70; + margin-bottom: 18px; +} +hr { + border: none; + height: 2px; + background-color: #dce1e7; + margin-bottom: 20px; +} +.action { + margin-bottom: 20px; + span { + display: inline-block; + font: 700 14px "Arial"; + color: #4c5e70; + } + nz-dropdown { + vertical-align: middle; + :hover{ + border-color: #147dc2; + } + button { + width: 165px; + height: 30px; + background-color: #eceff4; + text-align: left; + border-color: #9fa9ab; + span { + font-weight: 400; + display: inline-block; + width: 120px; + overflow: hidden; + text-overflow: ellipsis; + padding-top: 2px; + } + i { + position: absolute; + top: 10px; + right: 10px; + } + } + //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的 + } + .create { + float: right; + height: 30px; + padding: 0 10px; + span { + color: #fff; + font-weight: 400; + } + } +} +.list { + background-color: #fff; + border-radius: 5px; + padding: 10px; + nz-table { + tbody { + td { + span.active { + font-size: 14px; + color: #147dc2; + } + span.closed { + font-size: 14px; + color: red; + } + span.onboarding{ + font-size: 12px; + color: #147dc2; + } + span.updating{ + font-size: 12px; + color: blue; + } + span.deleting { + font-size: 12px; + color: red; + } + span.creating { + font-size: 12px; + color: green; + } + i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px; + &:hover{ + color: #147dc2; + } + } + } + tr.childtr { + td { + font-size: 12px; + color: #147dc2; + } + } + } + } +} + +.detailComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} +.createComponent { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100vh; + background-color: #f3f3f3; + overflow-y: auto; + padding: 20px 32px; + z-index: 3; +} diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts new file mode 100644 index 00000000..61440dc3 --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServicesListComponent } from './services-list.component'; + +describe('ServicesListComponent', () => { + let component: ServicesListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ServicesListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ServicesListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 00000000..d893070d --- /dev/null +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -0,0 +1,511 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { MyhttpService } from '../../myhttp.service'; +import { slideToRight } from '../../animates'; +import { NzModalService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-services-list', + templateUrl: './services-list.component.html', + styleUrls: ['./services-list.component.less'], + animations: [ slideToRight ] +}) +export class ServicesListComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; + constructor(private myhttp: MyhttpService, private modalService: NzModalService) { } + + ngOnInit() { + this.getallCustomers(); + this.getTemplateSubTypes(); + this.inputNamests(); + } + // 筛选框（下拉框）customer servicetype + customerList = []; + customerSelected = {name:null,id:null}; + serviceTypeList = []; + serviceTypeSelected = {name:null,id:null}; + + // 获取所有customer + getallCustomers(){ + this.myhttp.getAllCustomers() + .subscribe((data)=>{ + this.customerList = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}}); + this.customerSelected = this.customerList[0]; + this.choseCustomer(this.customerSelected); + // console.log(this.customers) + }) + } + + choseCustomer(item){ + this.customerSelected = item; + this.myhttp.getServiceTypes(this.customerSelected) + .subscribe((data)=>{ + this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}}); + this.serviceTypeSelected = this.serviceTypeList[0]; + this.choseServiceType(this.serviceTypeSelected); + // console.log(this.listServiceTypes); + }) + } + choseServiceType(item){ + this.serviceTypeSelected = item; + this.getTableData(); + } + + // 模态框（对话框） 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();//分类 + } + // 模板 + templates = []; templates1;templates2;templates3; + 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") + }) + } + + getAlltemplates(){ //获取所有模板类型 + this.myhttp.getAllServiceTemplates() + .subscribe((data)=>{ + console.log(data) + this.templates = data; + this.template1 = data[0]; + this.template2 = data[1]; + this.template3 = data[2]; + // this.filterTemplates();//分类 + },(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; + createData:Object={}; + handleOk2(): 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.createData = this.templateTypeSelected == "SOTN" ? data1 : data2; + this.createshow = true; + } + // handleCancel(): void { + // console.log('Button cancel clicked!'); + // this.isVisible2 = false; + // } + + + //表格数据 + tableData = []; + pageIndex = 1; + pageSize = 10; + total = 100; + loading = false; + sortName = null; + sortValue = null; + getTableData(){ + // 查询参数: customer serviceType 当前页码，每页条数，排序方式 + let paramsObj = { + customer:this.customerSelected, + serviceType:this.serviceTypeSelected, + pageIndex:this.pageIndex, + pageSize:this.pageSize, + serviceIdSort:this.sortValue + } + this.myhttp.getServicesTableData(paramsObj) + .subscribe((data)=>{ + console.log(data); + this.total = data.body.total; + this.tableData = data.body.tableList; + },(err)=>{ + console.log(err); + }) + } + sort(sort: { key: string, value: string }): void { + console.log(sort); + this.sortName = sort.key; + this.sortValue = sort.value; + this.getTableData(); + } + searchData(reset:boolean = false){ + console.log(reset) + this.getTableData(); + } + + scaleService(){ + console.log("scaleService!"); + } + 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); + + console.log(this.tableData2) + },(err)=>{ + console.log(err); + }) + } + + // 显示详情 + detailshow = false; + detailData:Object; + showDetail(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; + } + }) + this.detailshow = true; + this.detailData = service; + console.log(service); + } + // 删除 确认模态框 + deleteInstace(service){ + // 创建确认框 + this.modalService.confirm({ + nzTitle : 'Are you sure delete this instance?', + nzContent : `Instance ID: ${service.sotnvpnSer["service-instance-id"]}`, + 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 params = { + globalSubscriberId:this.customerSelected.id, + serviceType:this.serviceTypeSelected, + serviceInstanceId:item["service-instance-id"] + } + return new Promise((res,rej)=>{ + this.myhttp.deleteInstance(params) + .subscribe((data)=>{ + let obj = {serviceId:params.serviceInstanceId,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(); + }) + }) + }) + console.log(deletePros) + Promise.all(deletePros).then(()=>{ + Promise.all(querypros).then((data)=>{ + console.log(data); + service.sotnvpnSer.rate = 100; + service.sotnvpnSer.status = "deleted"; + setTimeout(()=>{ + this.getTableData(); + },1000) + }) + }) + + }, + nzCancelText: 'No', + nzOnCancel : () => console.log('Cancel') + }); + } + + + closeCreate(obj){ + if(!obj){ + this.createshow = false; //关闭创建窗口 + return 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)=>{ + console.log(data) + newData = { //主表格中新创建的服务数据 + 'service-instance-id':data["serviceId"], + 'service-instance-name':obj.vpnbody.service.name, + description:obj.vpnbody.service.description, + status:"creating", + rate:0, + } + this.tableData2 = [{sotnvpnSer:newData},...this.tableData2]; + let updata = (prodata)=>{ + newData.rate = Math.floor(prodata.progress/3); + } + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + 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)=>{ + console.log(data); + let updata = (prodata)=>{ + allprogress[prodata.operationId] = prodata.progress; + let average = ((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) + newData.rate = Math.floor(average/3) + stageNum; + } + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + querypros.push(this.queryProgress(queryParams,updata)) + }) + }) + + return new Promise((res)=>{ + Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕 + Promise.all(querypros).then((data)=>{ + console.log(data); + res("site--begin"); + }) + }) + }) + }).then((data)=>{ + console.log(data); + stageNum = newData.rate; //阶段进度值更新； + let allprogress = {}; + let querypros = []; //所有查询 + let createPros = obj.sitebody.map((group)=>{ //所有创建 + return this.createService(group).then((data)=>{ + console.log(data); + let updata = (prodata)=>{ + allprogress[prodata.operationId] = prodata.progress; + let average =((arr)=>{return eval(arr.join("+"))/arr.length})(Object.values(allprogress)) + newData.rate = Math.floor(average/3) + stageNum; + } + let queryParams = {serviceId:data["serviceId"],operationId:data["operationId"]}; + querypros.push(this.queryProgress(queryParams,updata)) + }) + }) + console.log(createPros); + Promise.all(createPros).then(()=>{ //所有创建好之后querypros中查询进度才全都添加完毕 + Promise.all(querypros).then((data)=>{ + console.log(data); + newData.rate = 100; + newData.status = "completed"; + setTimeout(()=>{ + this.getTableData(); + },1000) + }) + }) + }) + + } + + createService(params){ + let mypromise = new Promise((res,rej)=>{ + this.myhttp.createInstance(params) + .subscribe((data)=>{ + + res(data.service); + }) + }) + return mypromise; + } + + queryProgress(obj,callback){ + let mypromise = new Promise((res,rej)=>{ + // let data = { + // operationStatus:{ + // "operationId": "XXXXXX", + // "operation": "create|delete|update|scale", + // "result": "finished|error|processing", + // "reason": "", + // "userId": "", + // "operationContent": "Be creating pop.", + // "progress": 0, + // "operateAt": "", + // "finishedAt": "" + // } + // } + let requery = ()=>{ + this.myhttp.getProgress(obj) + .subscribe((data)=>{ + if(data.operationStatus.progress==undefined){ + console.log(data); + setTimeout(()=>{ + requery(); + },5000) + return false; + } + if(data.operationStatus.progress < 100){ + callback(data.operationStatus); + setTimeout(()=>{ + requery(); + },5000) + }else { + res(data.operationStatus); + } + }) + // setTimeout(()=>{ + // console.log(data.operationStatus.progress) + // data.operationStatus.progress++; + // if(data.operationStatus.progress<100){ + // callback(data.operationStatus); + // requery() + // }else{ + // callback(data.operationStatus); + // res(data.operationStatus) + // } + // },100) + } + requery(); + }) + return mypromise; + } + + + // 名字转换参数匹配 --> 传给子组件用 + namesTranslate:Object; + inputNamests(){ + this.myhttp.inputNamesTransform() + .subscribe((data)=>{ + this.namesTranslate = data; + }) + } + +} diff --git a/usecaseui-portal/src/app/services/services.component.html b/usecaseui-portal/src/app/services/services.component.html new file mode 100644 index 00000000..c4fddfc0 --- /dev/null +++ b/usecaseui-portal/src/app/services/services.component.html @@ -0,0 +1,18 @@ + +

+ services works! +

diff --git a/usecaseui-portal/src/app/services/services.component.less b/usecaseui-portal/src/app/services/services.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/services/services.component.spec.ts b/usecaseui-portal/src/app/services/services.component.spec.ts new file mode 100644 index 00000000..2e76b9f9 --- /dev/null +++ b/usecaseui-portal/src/app/services/services.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ServicesComponent } from './services.component'; + +describe('ServicesComponent', () => { + let component: ServicesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ServicesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ServicesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/services/services.component.ts b/usecaseui-portal/src/app/services/services.component.ts new file mode 100644 index 00000000..eec235b4 --- /dev/null +++ b/usecaseui-portal/src/app/services/services.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-services', + templateUrl: './services.component.html', + styleUrls: ['./services.component.less'] +}) +export class ServicesComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} -- cgit 1.2.3-korg