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 --- usecaseui-portal/src/app/app-routing.module.ts | 9 +- usecaseui-portal/src/app/app.component.html | 4 + usecaseui-portal/src/app/app.module.ts | 10 +- .../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 +++++++++++++++++++ .../monitor-service/monitor-service.component.html | 43 +++ .../monitor-service/monitor-service.component.less | 98 ++++++ .../monitor-service.component.spec.ts | 25 ++ .../monitor-service/monitor-service.component.ts | 330 +++++++++++++++++++++ .../order-service/order-service.component.html | 204 +++++++++++++ .../order-service/order-service.component.less | 59 ++++ .../order-service/order-service.component.spec.ts | 25 ++ .../order-service/order-service.component.ts | 197 ++++++++++++ .../sotn-management/sotn-management.component.html | 17 ++ .../sotn-management/sotn-management.component.less | 3 + .../sotn-management.component.spec.ts | 25 ++ .../sotn-management/sotn-management.component.ts | 25 ++ 19 files changed, 1812 insertions(+), 2 deletions(-) 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 create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.html create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.less create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.ts (limited to 'usecaseui-portal/src/app') diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index 8c8bf2e8..e3be9e84 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -30,6 +30,10 @@ import { PerformanceVnfComponent } from './views/performance/performance-vnf/per import { PerformanceVmComponent } from './views/performance/performance-vm/performance-vm.component'; import { CcvpnNetworkComponent } from './views/ccvpn-network/ccvpn-network.component'; +import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component'; +import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component'; +import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component'; +import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component'; import { TestComponent } from './test/test.component'; @@ -50,7 +54,10 @@ const routes: Routes = [ { path: 'fcaps/5gslicing', component: Monitor5gComponent }, { path: 'services/services-list', component: ServicesListComponent }, { path: 'services/slicing-management', component: SlicingManagementComponent }, - // { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent }, + { path: 'services/sotn-management', component: SotnManagementComponent }, + { path: 'services/order-service', component: OrderServiceComponent }, + { path: 'services/manage-service', component: ManageServiceComponent }, + { path: 'services/monitor-service', component: MonitorServiceComponent }, { path: 'onboard-vnf-vm', component: OnboardVnfVmComponent }, { path: 'alarm', component: AlarmComponent }, { path: 'performance', component: PerformanceComponent }, diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html index c64bf307..32e3fc08 100644 --- a/usecaseui-portal/src/app/app.component.html +++ b/usecaseui-portal/src/app/app.component.html @@ -61,6 +61,10 @@
  • {{"i18nTextDefine_ServicesList" | translate}}
    • + +
  • + {{"i18nTextDefine_SotnEline" | translate}} +
  • {{"i18nTextDefine_Mangement_5g" | translate}} diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index 5fa37be6..8868cad6 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -103,6 +103,10 @@ import { NsiModelComponent } from './views/services/slicing-management/slicing-r import { NssiModelComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-model/nssi-model.component'; import { CsmfSlicingBusinessManagementComponent } from './views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component'; import { BusinessOrderComponent } from './views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component'; +import { SotnManagementComponent } from './views/services/sotn-management/sotn-management.component'; +import { OrderServiceComponent } from './views/services/sotn-management/order-service/order-service.component'; +import { ManageServiceComponent } from './views/services/sotn-management/manage-service/manage-service.component'; +import { MonitorServiceComponent } from './views/services/sotn-management/monitor-service/monitor-service.component'; @NgModule({ providers: [ @@ -168,7 +172,11 @@ import { BusinessOrderComponent } from './views/services/slicing-management/csmf BusinessOrderComponent, MdonsCreationComponent, MdonsDetailComponent, - DisableControlDirective + DisableControlDirective, + SotnManagementComponent, + OrderServiceComponent, + ManageServiceComponent, + MonitorServiceComponent ], imports: [ BrowserModule, 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; + } +} diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html new file mode 100644 index 00000000..358f60df --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.html @@ -0,0 +1,43 @@ +
    +
    + + + + + + + + + + + +
    + {{"i18nTextDefine_subscriptionType" | translate}} + + + + + + + {{"i18nTextDefine_serviceInstance" | translate}} + + + + + + Topology + + + + +
    +
    + +
    +
    +
    +
    +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less new file mode 100644 index 00000000..9ebe3741 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.less @@ -0,0 +1,98 @@ +#mynetwork { + width: 100%; + height: calc(~"100vh - 300px"); + border: 1px solid lightgray; + margin-right: 40px; + background-color: #333333; +} + + +:host ::ng-deep .ant-form-item-label label { + color: var(--on-primary) ; + background-color:var(--primary); +} + +:host ::ng-deep .ant-select-dropdown-menu-item{ + color: var(--on-primary) ; + background-color:var(--primary); + +} +:host ::ng-deep .ant-select-selection__rendered { + background-color:var(--primary); + +} +:host ::ng-deep .ant-select-selection--single { + background-color:var(--primary); + +} + +:host ::ng-deep .ant-select-selection-selected-value { + + color: var(--on-primary) !important ; + +} + +@media only screen and (min-width: 600px) { +.flexDiv { + display: flex!important; +} +} +@media only screen and (min-width: 768px) { +.flexDiv { + display: flex!important; +} +} + +.font-size{ + font-size: 17px; +} +.font-weight{ + font-weight:bold; +} + +.refreshBtn{ + right: 580px; + position: absolute; + top: 35px; + z-index: 1 +} + +:host ::ng-deep .ant-form-item-label label { + color: var(--on-primary) ; +} + +:host ::ng-deep .ant-select-selection__placeholder +{ + color: var(--on-primary); +} + +:host ::ng-deep .ant-select-arrow { + + + color: var(--on-primary); + font-size: 12px; +} + + +.popup-table-row +{ + color: aqua; +} + +.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/monitor-service/monitor-service.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.spec.ts new file mode 100644 index 00000000..21012f6d --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MonitorServiceComponent } from './monitor-service.component'; + +describe('MonitorServiceComponent', () => { + let component: MonitorServiceComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ MonitorServiceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(MonitorServiceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts new file mode 100644 index 00000000..5e003ff3 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/monitor-service/monitor-service.component.ts @@ -0,0 +1,330 @@ +import { Component, OnInit } from '@angular/core'; +import { Network, DataSet, Node, Edge, IdType } from 'vis'; + +@Component({ + selector: 'app-monitor-service', + templateUrl: './monitor-service.component.html', + styleUrls: ['./monitor-service.component.less'] +}) +export class MonitorServiceComponent implements OnInit { + + selectedSubscriptionType:string = "SOTN"; + serviceSubscriptionList:any = [{ + serviceType:"SOTN" + }]; + selectedServiceInstance:string = "SiteService-5011"; + serviceInstanceList:any = [ + { + serviceInstance: "SiteService-5011", + serviceInstancename: "SiteService-5011" + }, + { + serviceInstance: "ISAAC-IS0333", + serviceInstancename: "ISAAC-IS0333" + } + ]; + selectedTopology:string = 'Network Topology'; + serviceTopologyList:any = [ + { + topologyType:"Network Topology" + }, + { + topologyType:"Resource Topology" + } + ]; + + title = 'Network'; + public nodes: Node; + public edges: Edge; + public network: Network; + public serviceList: any; + public tempNode: any; + public tempEdge: any; + public selectedNode: any; + public selectedNodeIds: any; + public x: any; + public abc = []; + container: any; + networkOptions = { + layout: { + randomSeed: 15 + }, + nodes: { + borderWidth: 13, + size: 30, + color: { + border: '#54bd55', + background: '#666666' + }, + font: { color: '#eeeeee' } + }, + edges: { + color: 'lightgray' + }, + + interaction: { + tooltipDelay: 200, + hideEdgesOnDrag: true, + navigationButtons: false, + keyboard: true, + hover: true + }, + }; + + node1:any = { + "nodes": [ + { + "id": "1", + "shape": "circularImage", + "image": "./assets/images/edge.png", + "label": "Node", + "color": "Green", + "dataNode": { + "ethtSvcName": "sotn-021-VS-monitored", + "colorAware": "true", + "cbs": "100", + "couplingFlag": "true", + "ebs": "evpl", + "cir": "200000", + "eir": "0" + } + }, + { + "id": "2", + "shape": "circularImage", + "image": "./assets/images/logicallink.png", + "label": "Logical Link", + "color": "Green", + "dataNode": { + "ethtSvcName": "sotn-021-VS-monitored", + "colorAware": "true", + "cbs": "100", + "couplingFlag": "true", + "ebs": "evpl", + "cir": "200000", + "eir": "0" + } + }, + { + "id": "3", + "shape": "circularImage", + "image": "./assets/images/edge.png", + "label": "Node", + "color": "Green", + "dataNode": { + "zipcode": "100095", + "siteName": "hubtravel", + "description": "desc", + "location": "laptop-5", + "cvlan": "100" + } + } + ], + "edges": [ + { + "from": "1", + "to": "2" + }, + { + "from": "2", + "to": "3" + } + ] + } + + node2:any = { + "nodes": [ + { + "id": "1", + "shape": "circularImage", + "image": "./assets/images/tpoint.png", + "label": "Termination Point", + "color": "Green", + "dataNode": {} + }, + { + "id": "2", + "shape": "circularImage", + "image": "./assets/images/edge.png", + "label": "Node", + "color": "Green", + "dataNode": { + "ethtSvcName": "sotn-021-VS-monitored", + "colorAware": "true", + "cbs": "100", + "couplingFlag": "true", + "ebs": "evpl", + "cir": "200000", + "eir": "0" + } + }, + { + "id": "3", + "shape": "circularImage", + "image": "./assets/images/logicallink.png", + "label": "Logical Link", + "color": "Green", + "dataNode": { + "ethtSvcName": "sotn-021-VS-monitored", + "colorAware": "true", + "cbs": "100", + "couplingFlag": "true", + "ebs": "evpl", + "cir": "200000", + "eir": "0" + } + }, + { + "id": "4", + "shape": "circularImage", + "image": "./assets/images/edge.png", + "label": "Node", + "color": "Green", + "dataNode": { + "zipcode": "100095", + "siteName": "hubtravel", + "description": "desc", + "location": "laptop-5", + "cvlan": "100" + } + }, + { + "id": "5", + "shape": "circularImage", + "image": "./assets/images/tpoint.png", + "label": "Termination Point", + "color": "Green", + "dataNode": { + "accessltpid": "155", + "siteName": "hubtravel", + "description": "desc", + "accessnodeid": "10.10.10.10", + "cvlan": "100" + } + } + ], + "edges": [ + { + "from": "1", + "to": "2" + }, + { + "from": "2", + "to": "3" + }, + { + "from": "3", + "to": "4" + }, + { + "from": "4", + "to": "5" + } + ] + } + + constructor() { } + + intervalData: any; + returnResponse: boolean = true; + + //Get SubscriptionType + getSubscribeTypes() { + this.getTopologyInfo('Network Topology'); + } + + getTopologyInfo (topo) { + this.selectedTopology = topo; + this.getData(); + this.refreshData(); + } + + //Get subscription instanceID by calling With Subscription Type + getServiceInstanceList(subscriptionType) { + this.getSelectedsubscriptionInfo(subscriptionType); + } + ngOnInit() { + this.container = document.getElementById('mynetwork'); + this.getSubscribeTypes(); + } + + refreshData() { + + var data1 = { + nodes: this.serviceList.nodes, + edges: this.serviceList.edges + }; + + var network = new Network(this.container, data1, this.networkOptions); + + + network.on('select', function (selection) { + this.selectedNodeIds = selection.nodes[0]; // array of selected node's ids + var filteredNode = data1.nodes.filter(item => ( + item.id == this.selectedNodeIds + )); + var t1 = '
    \ + Node Information\ + \ + \ + \ + \ + \ + \ + \ + \ + '; + Object.entries(filteredNode[0].dataNode).forEach(entry => { + if( entry[1] !== "null") + { + t1 += '\ + \ + \ + \ + '; + } + }); + t1 += '\ +
    SpecificationValue
    '+ entry[0] + ':'+ entry[1] + '
    \ +
    \ + '; + document.getElementById('nodeDetails').innerHTML = t1; + }); + network.on("afterDrawing", function (this) { + network.fit(); + }); + } + + getData () + { + if (this.selectedTopology == 'Network Topology') { + this.serviceList = this.node1; + } else { + this.serviceList = this.node2; + } + } + // Getting sitedata Based On Type and ID + getSelectedsubscriptionInfo(s) { + this.getData(); + this.refreshData(); + if (this.intervalData) { + clearInterval(this.intervalData); + } + } + + ngOnDestroy() { + console.log('clear interval'); + if (this.intervalData) { + clearInterval(this.intervalData); + } + + } + + ngOnDelete() { + console.log('clear interval'); + if (this.intervalData) { + clearInterval(this.intervalData); + } + } + +} diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html new file mode 100644 index 00000000..4adf3747 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.html @@ -0,0 +1,204 @@ +
    + + + + + + + + + + + + {{data.name | translate}} + + + +
    + +
    +
    +
    +
    + + {{ "i18nTextDefine_Name" | translate}} + + + + +
    +
    + + {{ "i18nTextDefine_Description" | translate}} + + + + +
    +
    +
    +
    +     + +
    +
    +
    +
    + + {{ "i18nTextDefine_Name" | translate}} + + + + + + {{ "i18nTextDefine_Description" | translate}} + + + + + + COS + + + + + + Dual Link + + + + + + Tenant ID + + + + + + VPN Type + + + + + + CBS + + + + + + EBS + + + + +
    +
    + + Color Aware + + + + + + Re-route + + + + + + Coupling Flag + + + + + + CIR + + + + + + Strat Time + + + + + + End Time + + + + + + EIR + + + + + + SLS + + + + +
    +
    +
    +
    +     + +
    +
    +
    +
    + + VLAN + + + + +
    +
    + + TP ID + + + + +
    +
    + + + + + +
    +
    + + + + VLAN + TP Id + + + + + {{ data.sotnuni_cVLAN }} + {{ data.sotnuni_tpId }} + + Delete + + + + +
    +
    +     +
    + + +     + +     +
    \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less new file mode 100644 index 00000000..5ac5c07d --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.less @@ -0,0 +1,59 @@ + +.main { + min-height: calc(~"100vh - 165px"); +} +nz-table +{ + th,tr,td,nz-spin,div,span + { + background: var(--primary); + color: var(--on-primary) ; + .action + { + margin-left:10px; + } + } + td{ + border-bottom: 1px solid #F7F8FC; + padding:5px; + } + th{ + padding:5px; + font-weight:bold; + color: var(--on-primary) ; + } + tr{ + border-left-color: var(--primary); + } + + +} +.tdCls{ + font-weight:bold; + color: var(--on-primary) ; + background-color:var(--primary) ; + overflow: hidden; + height:21px; + } +.sotn-form{ + display: flex; + flex-direction: column; + width: 45%; +} +.crt-btn{ + + display: flex; + justify-content: flex-end; +} +.form-lable-font{ + font-weight: bold; + color: deepskyblue; +} +.mar-0x{ + margin:0; +} + +.labelcls{ + color: var(--on-primary); +} + diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts new file mode 100644 index 00000000..d135a250 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { OrderServiceComponent } from './order-service.component'; + +describe('OrderServiceComponent', () => { + let component: OrderServiceComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ OrderServiceComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(OrderServiceComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts new file mode 100644 index 00000000..5a6bf6a2 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/order-service/order-service.component.ts @@ -0,0 +1,197 @@ +import { Component, OnInit } from '@angular/core'; +import { + FormBuilder, + FormGroup, + Validators +} from '@angular/forms'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'app-order-service', + templateUrl: './order-service.component.html', + styleUrls: ['./order-service.component.less'] +}) +export class OrderServiceComponent implements OnInit { + + validateForm: FormGroup; + validateForm1: FormGroup; + validateForm2: FormGroup; + l2vpn:object = {}; + siteData:object = {}; + tipMsg: String = "serviceCreationInitiated"; + displayMsg:boolean = false; + displayMsg2:boolean = false; + buttonDisabled:boolean = false; + intervalData:any; + baseUrl:string = '/api/usecaseui-server/v1'; + expandDataSet = [ + { rowIdx: 1, name: 'Service', expand: true }, + { rowIdx: 2, name: 'VPN', expand: true }, + { rowIdx: 3, name: 'UNI', expand: true } + ]; + uni = { + sotnuni_cVLAN:"asdf", + sotnuni_tpId:"asdf" + }; + sotnUni = [ + { + sotnuni_cVLAN:"asdf", + sotnuni_tpId:"saf" + } + ]; + + constructor(private fb: FormBuilder, private http: HttpClient, private message: NzMessageService) { } + + ngOnInit() { + this.validateForm = this.fb.group({ + name:[null, [Validators.required]], + description:[null, [Validators.required]], + l2vpn_name:[null, [Validators.required]], + l2vpn_dualLink:[null, [Validators.required]], + l2vpn_description:[null, [Validators.required]], + l2vpn_SLS:[null, [Validators.required]], + l2vpn_COS:[null, [Validators.required]], + l2vpn_tenantId:[null, [Validators.required]], + l2vpn_vpnType:[null, [Validators.required]], + l2vpn_cbs:[null, [Validators.required]], + l2vpn_ebs:[null, [Validators.required]], + l2vpn_colorAware:[null, [Validators.required]], + l2vpn_reroute:[null, [Validators.required]], + l2vpn_couplingFlag:[null, [Validators.required]], + l2vpn_cir:[null, [Validators.required]], + l2vpn_eir:[null, [Validators.required]], + l2vpn_startTime:[null, [Validators.required]], + l2vpn_endTime:[null, [Validators.required]], + sotnuni_cVLAN:[null, [Validators.required]], + sotnuni_tpId:[null, [Validators.required]], + }); + // this.validateForm1 = this.fb.group({ + // l2vpn_name:[null, [Validators.required]], + // l2vpn_dualLink:[null, [Validators.required]], + // l2vpn_description:[null, [Validators.required]], + // l2vpn_SLS:[null, [Validators.required]], + // l2vpn_COS:[null, [Validators.required]], + // l2vpn_tenantId:[null, [Validators.required]], + // l2vpn_vpnType:[null, [Validators.required]], + // l2vpn_cbs:[null, [Validators.required]], + // l2vpn_ebs:[null, [Validators.required]], + // l2vpn_colorAware:[null, [Validators.required]], + // l2vpn_reroute:[null, [Validators.required]], + // l2vpn_couplingFlag:[null, [Validators.required]], + // l2vpn_cir:[null, [Validators.required]], + // l2vpn_eir:[null, [Validators.required]], + // l2vpn_startTime:[null, [Validators.required]], + // l2vpn_endTime:[null, [Validators.required]], + // }); + // this.validateForm2 = this.fb.group({ + // sotnuni_cVLAN:[null, [Validators.required]], + // sotnuni_tpId:[null, [Validators.required]], + // }); + } + + numberOnly(event): boolean { + const charCode = (event.which) ? event.which : event.keyCode; + if (charCode > 31 && (charCode < 48 || charCode > 57)) { + } + return true; + } + + addUNI () { + this.sotnUni.push(this.uni); + // this.uni = {}; + } + + selectOrderSiteData(): void { + if (!this.validateVpnAndUni() || + !this.validateServices() ) { + this.displayMsg = true; + this.message.error("Please fill all mandatory fields"); + var comp = this; + setTimeout(function () { + comp.displayMsg = false; + }, 5000); + } else { + this.putnewSotnSiteData() + } + } + + validateServices (): boolean { + if (this.siteData["name"] == null || + this.siteData["description"] == null) { + return false; + } + return true; + } + + validateVpnAndUni (): boolean { + if (this.l2vpn["l2vpn_COS"] == null || + this.l2vpn["l2vpn_dualLink"] == null || + this.l2vpn["l2vpn_description"] == null || + this.l2vpn["l2vpn_name"] == null || + this.l2vpn["l2vpn_tenantId"] == null || + this.l2vpn["l2vpn_vpnType"] == null || + this.l2vpn["l2vpn_cbs"] == null || + this.l2vpn["l2vpn_ebs"] == null || + this.l2vpn["l2vpn_colorAware"] == null || + this.l2vpn["l2vpn_cir"] == null || + this.l2vpn["l2vpn_startTime"] == null || + this.l2vpn["l2vpn_endTime"] == null || + this.l2vpn["l2vpn_eir"] == null || + this.l2vpn["l2vpn_SLS"] == null || + this.sotnUni.length == 0 || + this.l2vpn["l2vpn_reroute"] == null) { + return false; + } + return true; + } + + putnewSotnSiteData() { + console.log("order service data===>", this.siteData) + let comp = this; + this.message.info('Instantiation In Progress'); + this.buttonDisabled = true; + let body = JSON.stringify(this.siteData); + const httpOptions = { + headers: new HttpHeaders({ + 'Content-Type': 'application/json', + }) + }; + let url1 = this.baseUrl + '/uui-lcm/Sotnservices'; + // this.http.post(url1, body, httpOptions).subscribe((data) => { + // let comp = this; + // this.message.info('Instantiation In Progress'); + // comp.displayMsg2 = true; + // this.intervalData = setInterval(() => { + // let url2 = this.baseUrl + "/uui-lcm/Sotnservices/serviceStatus/service-instance/" + data.service.serviceId; + // this.http.get(url2, {}).subscribe((data) => { + // if (data.status == "1") { + // clearInterval(comp.intervalData); + // comp.displayMsg2 = true; + // comp.message.success('Service Created'); + // comp.goToPage(); + // } + // else { + // comp.message.info('Instantiation In Progress'); + // comp.displayMsg2 = true; + // } + // }, (err) => { + // console.log(err); + // }); + // }, 1000); + // }, (err) => { + // console.log(err); + // }); + setTimeout(() => { + comp.message.success("Service Created"); + comp.goToPage(); + }, 3000); + } + + goToPage(): void { + setTimeout(function () { + // document.getElementById('manageService').click(); + }, 1000); + } + +} diff --git a/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.html b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.html new file mode 100644 index 00000000..12fcb851 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.html @@ -0,0 +1,17 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.less b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.less new file mode 100644 index 00000000..dae93f22 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.less @@ -0,0 +1,3 @@ +.slicing-content{ + padding: 20px; + } \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.spec.ts b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.spec.ts new file mode 100644 index 00000000..071a6789 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SotnManagementComponent } from './sotn-management.component'; + +describe('SotnManagementComponent', () => { + let component: SotnManagementComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SotnManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SotnManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.ts b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.ts new file mode 100644 index 00000000..84886f31 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/sotn-management/sotn-management.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit, HostBinding } from '@angular/core'; +import { slideToRight } from '../../../shared/utils/animates'; + +@Component({ + selector: 'app-sotn-management', + templateUrl: './sotn-management.component.html', + styleUrls: ['./sotn-management.component.less'], + animations: [slideToRight] +}) +export class SotnManagementComponent implements OnInit { + + @HostBinding('@routerAnimate') routerAnimateState; + + currentTab = 'Order Service'; + + constructor() { } + + ngOnInit() { + } + + handleTabChange($event): void { + console.log($event,"$event"); + this.currentTab = $event.tab._title; + } +} -- cgit 1.2.3-korg