From f23ed2484b1a51ed11e6d0b104f3c31f63ab8b45 Mon Sep 17 00:00:00 2001 From: seshukm Date: Mon, 24 Feb 2020 21:19:03 +0800 Subject: change for the slice mgmt UI Issue-ID: USECASEUI-387 Signed-off-by: seshukm Change-Id: I57de2b33bc10b2c60c9c7054e4e3a35580bada79 --- .../manage-service/manage-service.component.html | 197 +++++++++++++ .../manage-service/manage-service.component.less | 208 ++++++++++++++ .../manage-service.component.spec.ts | 25 ++ .../manage-service/manage-service.component.ts | 310 +++++++++++++++++++++ 4 files changed, 740 insertions(+) create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.html create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.less create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts (limited to 'usecaseui-portal/src/app/views/services/sotn-management/manage-service') diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.html new file mode 100644 index 00000000..b7d75ad4 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.html @@ -0,0 +1,197 @@ +
+
+ + + + + + + + + + +
+ {{"i18nTextDefine_subscriptionType" | translate}} + + + + + + {{"i18nTextDefine_serviceInstance" | translate}} + + + + + + +
+
+
+ + + + + + {{data.name | translate}} + + + + +
+
+
+ + Name: + + {{summaryInfo.name}} +
+
+
+
+ + Description: + + {{summaryInfo.description}} +
+
+
+ + +
+
+
+ + Name: + + {{vpnInfo.l2vpn_name}} +
+
+ + Description: + + {{vpnInfo.l2vpn_description}} +
+
+ + COS: + + {{vpnInfo.l2vpn_COS}} +
+
+ + Dual Link: + + {{vpnInfo.l2vpn_dualLink}} +
+
+ + Tenant ID: + + {{vpnInfo.l2vpn_tenantId}} +
+
+ + VPN Type: + + {{vpnInfo.l2vpn_vpnType}} +
+
+ + CBC: + + {{vpnInfo.l2vpn_cbs}} +
+
+ + EBC: + + {{vpnInfo.l2vpn_ebs}} +
+
+
+
+ + Color Aware: + + {{vpnInfo.l2vpn_colorAware}} +
+
+ + Re-route: + + {{vpnInfo.l2vpn_reroute}} +
+
+ + Coupling Flag: + + {{vpnInfo.l2vpn_couplingFlag}} +
+
+ + CIR: + + {{vpnInfo.l2vpn_cir}} +
+ +
+ + Start Time: + + {{vpnInfo.l2vpn_startTime}} +
+
+ + End Time: + + {{vpnInfo.l2vpn_endTime}} +
+
+ + EIR: + + {{vpnInfo.l2vpn_eir}} +
+
+ + SLS: + + {{vpnInfo.l2vpn_SLS}} +
+ +
+
+ + +
+
+ + + + UNI + TP Id + + + + + {{ data.sotnuni_cVLAN }} + {{ data.sotnuni_tpId }} + + + +
+
+ + + + + + +
+ +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.less new file mode 100644 index 00000000..92fff32e --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.less @@ -0,0 +1,208 @@ +.main { + min-height: calc(~"100vh - 165px"); +} +.paddingLeft{ + padding-left: 40px; + } + nz-table{ + + + + td{ + border-bottom: 1px solid #F7F8FC; + background-color:var(--primary) ; + color: var(--on-primary) ; + } + .tdCls{ + font-weight:bold; + color: var(--on-primary) ; + background-color:var(--primary) ; + } + .Clscol + { + color: var(--on-primary) ; + } + + .thCls{ + font-weight:bold; + color: var(--on-primary) ; + background-color: var(--th-background); + + border-bottom: 1px solid #F7F8FC; + border-top: 1px solid #F7F8FC; + } + .noPadding + { + padding-left:0px; + padding-right:0px; + } + .costCls{ + margin-left: 40%; + // padding-left: 20px; + color: red; + } + .costCls_mob{ + color: red; + } + .divCls{ + display: inline-block; + width: 40%; + padding-left: 3%; + padding-bottom: 10px; + color : var(--on-lables) ; + } + .spanCls + { + color:#999999; + } + + .textAlignLeft + { + text-align: left; + } + .paddingZero{ + padding:0px; + } + } + + .container + { + height: calc(~"100vh - 120px"); + overflow: auto; + } + + :host ::ng-deep .ant-table-row-expand-icon + { background: var(--primary); + + } + .divCls + { + .spanCls { + color : var(--on-lables) ; + }} + + .inner_data + { + padding-left: 52px; + } + +.paddingLeft{ + padding-left: 40px; +} +nz-table{ + td{ + border-bottom: 1px solid #F7F8FC; + background-color:var(--primary) ; + color: var(--on-primary) ; + } + .tdCls{ + font-weight:bold; + color: var(--on-primary) ; + background-color:var(--primary) ; + overflow: hidden; + height:21px; + } + .clscol + { + color: var(--on-primary) ; + } + + .thCls{ + font-weight:bold; + color: var(--on-primary) ; + background-color: var(--th-background); + + border-bottom: 1px solid #F7F8FC; + border-top: 1px solid #F7F8FC; + height:21px; + } + .noPadding + { + padding-left:0px; + padding-right:0px; + } + + .divCls{ + display: inline-block; + width: 40%; + padding-left: 3%; + padding-bottom: 10px; + color : var(--on-lables) ; + } + .spanCls + { + color:#999999; + } + .costCls + { + color:red; + text-align: center; + font-size: 16px; + font-weight:400; + border:0px; + } + .textAlignLeft + { + text-align: left; + } + .paddingZero{ + padding:0px; + } +} + +.container1 +{ + height: calc(~"100vh - 210px"); + overflow: auto; +} + +:host ::ng-deep .ant-table-row-expand-icon +{ background: var(--primary); + +} +.divCls +{ +.spanCls { + color : var(--on-lables) ; +}} + +@media (max-width: 575px) { + + + .xs-clr-blue{ + color: var(--on-primary) ; + } + .xs-clr-red{ + color: red!important; + } + .xs-flex-col{ + display: flex!important; + flex-direction: column!important; + } + + .text-align-center{ + text-align: center!important + } + .min-hight{ + min-height: calc(~"50vh - 50px")!important; + } + +} + +.divCls{ + display: inline-block; + width: 100%; + padding-bottom: 10px; + color : var(--on-lables) ; + } + + .main { + padding-left:80px + } + .ant-col-sm-6 { + width:100%; + } + + #subscriptionType, #serviceInstance { + width: 250px; + } \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.spec.ts new file mode 100644 index 00000000..2d0b9902 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManageServiceComponent } from './manage-service.component'; + +describe('ManageServiceComponent', () => { + let component: ManageServiceComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ManageServiceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ManageServiceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts new file mode 100644 index 00000000..d3143e82 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/manage-service/manage-service.component.ts @@ -0,0 +1,310 @@ +import { Component, OnInit, SimpleChanges } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; + +@Component({ + selector: 'app-manage-service', + templateUrl: './manage-service.component.html', + styleUrls: ['./manage-service.component.less'] +}) +export class ManageServiceComponent implements OnInit { + + selectedSubscriptionType:string = "SOTN"; + serviceSubscriptionList:any = [{ + serviceType:"SOTN" + }]; + selectedServiceInstance:string = ""; + serviceInstanceList:any = [ + { + serviceInstance: "SiteService-5011", + serviceInstancename: "SiteService-5011" + }, + { + serviceInstance: "ISAAC-IS0333", + serviceInstancename: "ISAAC-IS0333" + } + ]; + graphData: boolean = true; + expandDataSet = [ + { rowIdx: 1, name: 'Service',cost: '', expand: true , mobileExpand:false}, + { rowIdx: 2, name: 'VPN',cost: '', expand: true,mobileExpand:false }, + { rowIdx: 3, name: 'UNI',cost: '', expand: true,mobileExpand:false } + ]; + + summaryInfo:object = {}; + serviceList:object = {}; + vpnInfo = []; + uniInfo = []; + mapped: any; + myKeys = [] as Array; + baseUrl:string = '/api/usecaseui-server/v1' + constructor(private http: HttpClient) { } + + ngOnInit() { + this.getSubscribeTypes(); + } + + //Get SubscriptionType + getSubscribeTypes() { + let url = this.baseUrl + "/uui-lcm/customers/service-subscriptions"; + // this.http.get(url, {}).subscribe((data) => { + // this.serviceSubscriptionList = data.subscriptions; + // this.selectedSubscriptionType = this.serviceSubscriptionList[0].serviceType; + // this.getServiceInstanceList(this.selectedSubscriptionType); + // }, (err) => { + // console.log(err); + // }); + let data = { + "subscriptions": [ + { + "serviceType": "SOTN", + }] + } + this.serviceSubscriptionList = data.subscriptions; + this.selectedSubscriptionType = this.serviceSubscriptionList[0].serviceType; + this.getServiceInstanceList(this.selectedSubscriptionType); + } + + //Get subscription instanceID by calling With Subscription Type + getServiceInstanceList(subscriptionType) { + this.serviceInstanceList = []; + this.selectedServiceInstance=""; + let url = this.baseUrl + "/uui-lcm/Sotnservices/ServiceInstances/"+subscriptionType; + // this.http.get(url,{}).subscribe((data) => { + // this.serviceInstanceList = data.serviceInstanceList; + // this.selectedServiceInstance = data.serviceInstanceList[0].serviceInstance; + // this.getSubscribedSites(data.serviceInstanceList[0]); + // this.graphData = false; + // }, (err) => { + // console.log(err); + // }); + let data = { + "serviceInstanceList": [ + { + "serviceInstance": "ISAAC-IS02", + "serviceInstancename":"SiteService-5011" + }, + { + "serviceInstance": "ISAAC-IS03", + "serviceInstancename":"ISAAC-IS0333" + } + ] + } + this.serviceInstanceList = data.serviceInstanceList; + this.selectedServiceInstance = data.serviceInstanceList[0].serviceInstance; + this.getSubscribedSites(data.serviceInstanceList[0]); + + // var datas= { + // "ethtSvcName":"vpn022", + // "colorAware":"true", + // "cbs":"100", + // "couplingFlag":"true", + // "ebs":"EVPL", + // "cir":"98900", + // "eir":"1000", + // "vpnInformations":[{ + // "vpnThreshold":"1000", + // "vpnBandwidth":"100", + // "vpnType":"Hub-Spoke", + // "vpnId":"a8529dee-523e-4c6b-bc83-e26d68a9911c", + // "vpnName":"vpn022", + // "sites":[ + // { + // "zipCode":"100008", + // "address":"beijing", + // "siteId":"d5b530fe-2271-4ed6-8c09-b7ce368a1f59", + // "siteName":"ISAAC01-hub1", + // "description":"desc" + // } + // ] + // }] + // }; + // this.assignData(datas, false); + var datas = { + "service":{ + "name":"CCVPNServiceV2-36", + "description":"CCVPNServiceV2", + "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6", + "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad", + "globalSubscriberId": "{{customer}}", + "serviceType": "{{service-subscription}}", + "parameters":{ + "locationConstraints":[], + "resources":[], + "requestInputs":{ + "sotnUnderlay":[ + { + l2vpn:[ + { + "l2vpn_COS": "123", + "l2vpn_dualLink": "Yes", + "l2vpn_description": "VPN Description", + "l2vpn_name": "VPN2", + "l2vpn_tenantId": "989933", + "l2vpn_vpnType": "SOTN", + "l2vpn_cbs": "123", + "l2vpn_ebs": "23", + "l2vpn_colorAware": "true", + "l2vpn_reroute": "Yes", + "l2vpn_couplingFlag": "true", + "l2vpn_cir": "100", + "l2vpn_startTime": "28-02-2020", + "l2vpn_endTime": "21-02-2020", + "l2vpn_eir": "1000", + "l2vpn_SLS": "1234" + } + ], + "sotnUni":[ + { + "sotnuni_cVLAN": "Huawei", + "sotnuni_tpId": "Huawei-112233" + }, + { + "sotnuni_cVLAN": "Huawei-1", + "sotnuni_tpId": "Huawei1-554433" + } + ] + } + ] + } + } + } + } + this.assignData(datas, false); + } + + getSubscribedSites(selectedServiceInstance) {} + + deleteSelectedService() + { + + let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance; + + // this.http.delete(url,{}).subscribe((data) => { + // this.serviceInstanceList = []; + // this.selectedServiceInstance = ""; + // this.getServiceInstanceList(this.selectedSubscriptionType); + // }, (err) => { + // console.log(err); + // }); + } + + + ngOnChanges(changes: SimpleChanges) { + console.log("on change"); + if (this.selectedServiceInstance) { + // let url = this.baseUrl + "/uui-lcm/Sotnservices/servicesubscription/"+this.selectedSubscriptionType+'/serviceinstance/'+this.selectedServiceInstance; + // this.http.get(url, {}).subscribe((data) => { + // this.assignData(data, false); + // }, (err) => { + // console.log(err); + // }); + // var data= { + // "ethtSvcName":"vpn022", + // "colorAware":"true", + // "cbs":"100", + // "couplingFlag":"true", + // "ebs":"EVPL", + // "cir":"98900", + // "eir":"1000", + // "vpnInformations":[{ + // "vpnThreshold":"1000", + // "vpnBandwidth":"100", + // "vpnType":"Hub-Spoke", + // "vpnId":"a8529dee-523e-4c6b-bc83-e26d68a9911c", + // "vpnName":"vpn022", + // "sites":[ + // { + // "zipCode":"100008", + // "address":"beijing", + // "siteId":"d5b530fe-2271-4ed6-8c09-b7ce368a1f59", + // "siteName":"ISAAC01-hub1", + // "description":"desc" + // } + // ] + // }] + // }; + var datas = { + "service":{ + "name":"CCVPNServiceV2-36", + "description":"CCVPNServiceV2", + "serviceInvariantUuid":"57c8a933-1364-4f85-b7a9-666d80ecc5b6", + "serviceUuid":"0734e398-a427-49f2-9abe-de8eb02542ad", + "globalSubscriberId": "{{customer}}", + "serviceType": "{{service-subscription}}", + "parameters":{ + "locationConstraints":[], + "resources":[], + "requestInputs":{ + "sotnUnderlay":[ + { + l2vpn:[ + { + "l2vpn_COS": "123", + "l2vpn_dualLink": "Yes", + "l2vpn_description": "VPN Description", + "l2vpn_name": "VPN2", + "l2vpn_tenantId": "989933", + "l2vpn_vpnType": "SOTN", + "l2vpn_cbs": "123", + "l2vpn_ebs": "23", + "l2vpn_colorAware": "true", + "l2vpn_reroute": "Yes", + "l2vpn_couplingFlag": "true", + "l2vpn_cir": "100", + "l2vpn_startTime": "28-02-2020", + "l2vpn_endTime": "21-02-2020", + "l2vpn_eir": "1000", + "l2vpn_SLS": "1234" + } + ], + "sotnUni":[ + { + "sotnuni_cVLAN": "Huawei", + "sotnuni_tpId": "Huawei-112233" + }, + { + "sotnuni_cVLAN": "Huawei-1", + "sotnuni_tpId": "Huawei1-554433" + } + ] + } + ] + } + } + } + } + this.assignData(datas, false); + } + else { + // const httpOptions = { + // headers: new HttpHeaders({ + // 'Content-Type': 'application/json', + // }) + // }; + // let body = JSON.stringify({}); //this.orderServiceData + + // let url = this.baseUrl + "/uui-lcm/Sotnservices/cost"; + // return this.http.post(url,body,httpOptions).subscribe((data) => { + // this.assignData(data, true); + // }, (err) => { + // console.log(err); + // }); + } + } + + assignData(data,isCost) { + this.summaryInfo = data.service; + this.mapped = JSON.parse(JSON.stringify(this.summaryInfo)); + // delete this.mapped.vpninformations; + // delete this.mapped.vpnInformations; + // if(isCost) + // { + // delete this.mapped.cost; + // this.expandDataSet[0].cost = this.summaryInfo["cost"]["serviceCost"]; + // this.expandDataSet[1].cost = this.summaryInfo["cost"]["vpnCost"]; + // } + this.myKeys = Object.keys(this.mapped); + this.vpnInfo = this.summaryInfo["parameters"]["requestInputs"]["sotnUnderlay"][0].l2vpn[0]; + this.uniInfo = this.summaryInfo["parameters"]["requestInputs"]["sotnUnderlay"][0].sotnUni; + } +} -- cgit 1.2.3-korg