diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/sotn-management/manage-service')
4 files changed, 740 insertions, 0 deletions
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 @@ +<div class="main"> + <div class="divCls"> + <table> + <tr> + <td> + <nz-form-label class="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">{{"i18nTextDefine_subscriptionType" | translate}}</nz-form-label> + </td> + <td> + <nz-select class="colm-s-2" id="subscriptionType" [(ngModel)]="selectedSubscriptionType" (ngModelChange)="getServiceInstanceList($event)" nzAllowClear + nzPlaceHolder="Choose"> + <nz-option *ngFor="let option of serviceSubscriptionList" [nzValue]="option.serviceType" [nzLabel]="option.serviceType"></nz-option> + </nz-select> + </td> + <td style="width: 5%"></td> + <td> + <nz-form-label class="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">{{"i18nTextDefine_serviceInstance" | translate}}</nz-form-label> + </td> + <td> + <nz-select class="colm-s-2" id="serviceInstance" [(ngModel)]="selectedServiceInstance" (ngModelChange)="getSubscribedSites($event)" nzAllowClear + nzPlaceHolder="Choose"> + <nz-option *ngFor="let option of serviceInstanceList" [nzValue]="option.serviceInstance" [nzLabel]="option.serviceInstancename"></nz-option> + </nz-select> + </td> + <td style="width: 5%"></td> + <td> + <button *ngIf="((selectedSubscriptionType|lowercase) == 'sotn' && selectedServiceInstance !='' )" nz-button nzType="primary" + (click)="deleteSelectedService()">{{"i18nTextDefine_delete" | translate}}</button> + </td> + </tr> + </table> + </div> + <div class="desktop view"> + <nz-table #nzExpandTable [nzData]="expandDataSet" [nzShowPagination]=false> + <tbody> + <ng-template ngFor let-data [ngForOf]="nzExpandTable.data"> + <tr> + <td width="4%" class="tdCls" nzShowExpand [(nzExpand)]="data.expand"></td> + <td width="96%" class="tdCls">{{data.name | translate}}</td> + </tr> + <tr [nzExpand]="data.expand"> + <td class="noPadding" colspan="2"> + <ng-template [ngIf]="data.rowIdx == 1"> + <div style="display: flex; justify-content: center; padding: 1%;"> + <div style="width: 45%" class=""> + <div style="padding: 1%"> + <span> + <b>Name: </b> + </span> + <span>{{summaryInfo.name}}</span> + </div> + </div> + <div style="width: 45%" class=""> + <div style="padding: 1%"> + <span> + <b>Description: </b> + </span> + <span>{{summaryInfo.description}}</span> + </div> + </div> + </div> + </ng-template> + <ng-template [ngIf]="data.rowIdx == 2"> + <div style="display: flex; justify-content: center; padding: 1%;"> + <div style="width: 45%" class=""> + <div style="padding: 1%"> + <span> + <b>Name: </b> + </span> + <span>{{vpnInfo.l2vpn_name}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>Description: </b> + </span> + <span>{{vpnInfo.l2vpn_description}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>COS: </b> + </span> + <span>{{vpnInfo.l2vpn_COS}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>Dual Link: </b> + </span> + <span>{{vpnInfo.l2vpn_dualLink}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>Tenant ID: </b> + </span> + <span>{{vpnInfo.l2vpn_tenantId}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>VPN Type: </b> + </span> + <span>{{vpnInfo.l2vpn_vpnType}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>CBC: </b> + </span> + <span>{{vpnInfo.l2vpn_cbs}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>EBC: </b> + </span> + <span>{{vpnInfo.l2vpn_ebs}}</span> + </div> + </div> + <div style="width: 45%" class=""> + <div style="padding: 1%"> + <span> + <b>Color Aware: </b> + </span> + <span>{{vpnInfo.l2vpn_colorAware}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>Re-route: </b> + </span> + <span>{{vpnInfo.l2vpn_reroute}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>Coupling Flag: </b> + </span> + <span>{{vpnInfo.l2vpn_couplingFlag}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>CIR: </b> + </span> + <span>{{vpnInfo.l2vpn_cir}}</span> + </div> + + <div style="padding: 1%"> + <span> + <b>Start Time: </b> + </span> + <span>{{vpnInfo.l2vpn_startTime}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>End Time: </b> + </span> + <span>{{vpnInfo.l2vpn_endTime}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>EIR: </b> + </span> + <span>{{vpnInfo.l2vpn_eir}}</span> + </div> + <div style="padding: 1%"> + <span> + <b>SLS: </b> + </span> + <span>{{vpnInfo.l2vpn_SLS}}</span> + </div> + + </div> + </div> + </ng-template> + <ng-template [ngIf]="data.rowIdx == 3"> + <div style="display: flex; justify-content: center; padding: 1%;"> + <div style="width: 90%" class=""> + <nz-table #basicTable [nzData]="uniInfo" [nzShowPagination]="false"> + <thead> + <tr> + <th>UNI</th> + <th>TP Id</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let data of basicTable.data"> + <td>{{ data.sotnuni_cVLAN }}</td> + <td>{{ data.sotnuni_tpId }}</td> + </tr> + </tbody> + </nz-table> + </div> + </div> + </ng-template> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + </div> + <!-- <app-sotn-order-service *ngIf="((selectedSubscriptionType|lowercase) == 'sotn' && selectedServiceInstance !='' )" [subscriptionType]="selectedSubscriptionType" + [serviceInstanceId]="selectedServiceInstance"></app-sotn-order-service> + <app-ordered-service *ngIf="((selectedSubscriptionType|lowercase) == 'sdwan' && selectedServiceInstance !='' )"></app-ordered-service> --> +</div>
\ 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<ManageServiceComponent>; + + 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<any>; + 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<any>(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<any>(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<any>(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<any>(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<any>(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; + } +} |