diff options
| author |   seshukm <seshu.kumar.m@huawei.com> | 2020-02-24 21:19:03 +0800 |
|---|---|---|
| committer |   xu ran <xuranyjy@chinamobile.com> | 2020-02-25 12:43:50 +0000 |
| commit | f23ed2484b1a51ed11e6d0b104f3c31f63ab8b45 (patch) | |
| tree | aaa5883278cf83b1fca026ee3b10b47ce59f48ba | |
| parent | c6b270f19596b513d4a855d40c55ac754b726955 (diff) | |
change for the slice mgmt UI
Issue-ID: USECASEUI-387
Signed-off-by: seshukm <seshu.kumar.m@huawei.com>
Change-Id: I57de2b33bc10b2c60c9c7054e4e3a35580bada79
25 files changed, 1839 insertions, 4 deletions
diff --git a/usecaseui-portal/package.json b/usecaseui-portal/package.json index 5e75e09b..201921a6 100644 --- a/usecaseui-portal/package.json +++ b/usecaseui-portal/package.json @@ -39,6 +39,7 @@ "ng-zorro-antd": "^0.7.1", "ngx-echarts": "^2.2.0", "rxjs": "^5.5.12", + "vis": "^4.21.0", "zone.js": "^0.8.19" }, "devDependencies": { 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 @@ <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/services-list'}"> <a routerLink='services/services-list'> {{"i18nTextDefine_ServicesList" | translate}} </a> </li> + <!-- SOTN ELine --> + <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/sotn-management'}"> + <a routerLink='services/sotn-management'> {{"i18nTextDefine_SotnEline" | translate}} </a> + </li> <!-- 5g slicing management --> <li nz-menu-item [ngClass]="{'activeMenuList': url === 'services/slicing-management'}"> <a routerLink='services/slicing-management'> {{"i18nTextDefine_Mangement_5g" | translate}} </a> 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 @@ +<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; + } +} 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 @@ +<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 id="subscriptionType" class= "colm-s-2" [(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 id="serviceInstance" class= "colm-s-2 " [(ngModel)]="selectedServiceInstance" (ngModelChange)="getSelectedsubscriptionInfo($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> + <nz-form-label class ="colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">Topology</nz-form-label> + </td> + <td> + <nz-select id="serviceInstance" class= "colm-s-2 " [(ngModel)]="selectedTopology" (ngModelChange)="getTopologyInfo($event)" + nzAllowClear nzPlaceHolder="Choose"> + <nz-option *ngFor="let option of serviceTopologyList" [nzValue]="option.topologyType" [nzLabel]="option.topologyType"></nz-option> + </nz-select> + </td> + </tr> + </table> + </div> + + <div class="flexDiv"> + <div id="mynetwork" class="colm-s-3"></div> + <div class="colm-s-4"><div id="nodeDetails"></div></div> + </div> +</div>
\ 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<MonitorServiceComponent>; + + 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 = '<div class="tblDiv">\ + <nz-form-label class="lblCls">Node Information</nz-form-label>\ + <table class="table table-striped table-bordered">\ + <thead>\ + <tr>\ + <th class="clr-primary padding-2p">Specification</th>\ + <th class="clr-primary padding-2p">Value</th>\ + </tr>\ + </thead>\ + <tbody>\ + '; + Object.entries(filteredNode[0].dataNode).forEach(entry => { + if( entry[1] !== "null") + { + t1 += '<tr class="popup-table-row">\ + <td class="popup-table-header clr-primary padding-2p">'+ entry[0] + ':</td>\ + <td class="popup-table-data clr-primary padding-2p">'+ entry[1] + '</td>\ + </tr>\ + '; + } + }); + t1 += '</tbody>\ + </table>\ + </div>\ + '; + 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 @@ +<div theme class="main"> + <nz-table #nzExpandTable [nzData]="expandDataSet" [nzShowPagination]=false> + <tbody> + <tr> + <td width="4%"></td> + <td width="96%"> + <button style="float:right" (click)="selectOrderSiteData()" nz-button nzType="primary">Create Service</button> + </td> + </tr> + <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"> + <form autocomplete="off" [formGroup]="validateForm"> + <ng-template [ngIf]="data.rowIdx == 1"> + <div style="display: flex; justify-content: center; padding: 1%;"> + <div style="width: 100%" class=""> + <div style="display: flex; justify-content: space-around;"> + <div class="sotn-form"> + <nz-form-item class="mar-0x"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name" ><span class="form-lable-font"> {{ "i18nTextDefine_Name" | translate}}</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="name" id="name" [(ngModel)]="siteData.name"> + </nz-form-control> + </nz-form-item> + </div> + <div class="sotn-form "> + <nz-form-item class="mar-0x"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="description"><span class="form-lable-font">{{ "i18nTextDefine_Description" | translate}}</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="description" id="description" [(ngModel)]="siteData.description"> + </nz-form-control> + </nz-form-item> + </div> + </div> + </div> + </div> + </ng-template> + <ng-template [ngIf]="data.rowIdx == 2"> + <div style="display: flex; justify-content: center; padding: 1%;"> + <div style="width: 100%" class=""> + <div style="display: flex; justify-content: space-around;"> + <div class="sotn-form"> + <nz-form-item class="mar-0x"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_name" ><span class="form-lable-font"> {{ "i18nTextDefine_Name" | translate}}</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_name" id="l2vpn_name" [(ngModel)]="l2vpn.l2vpn_name"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_description"><span class="form-lable-font">{{ "i18nTextDefine_Description" | translate}}</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_description" id="l2vpn_description" [(ngModel)]="l2vpn.l2vpn_description"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_COS"><span class="form-lable-font">COS</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_COS" id="l2vpn_COS" [(ngModel)]="l2vpn.l2vpn_COS" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_dualLink"><span class="form-lable-font">Dual Link</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_dualLink" id="l2vpn_dualLink" [(ngModel)]="l2vpn.l2vpn_dualLink" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_tenantId"><span class="form-lable-font">Tenant ID</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_tenantId" id="l2vpn_tenantId" [(ngModel)]="l2vpn.l2vpn_tenantId" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_vpnType"><span class="form-lable-font">VPN Type</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_vpnType" id="l2vpn_vpnType" [(ngModel)]="l2vpn.l2vpn_vpnType" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_cbs"><span class="form-lable-font">CBS</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_cbs" id="l2vpn_cbs" [(ngModel)]="l2vpn.l2vpn_cbs" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_ebs"><span class="form-lable-font">EBS</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_ebs" id="l2vpn_ebs" [(ngModel)]="l2vpn.l2vpn_ebs" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + </div> + <div class="sotn-form "> + <nz-form-item class="mar-0x"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_colorAware" ><span class="form-lable-font">Color Aware</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_colorAware" id="l2vpn_colorAware" [(ngModel)]="l2vpn.l2vpn_colorAware"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_reroute"><span class="form-lable-font">Re-route</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_reroute" id="l2vpn_reroute" [(ngModel)]="l2vpn.l2vpn_reroute"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_couplingFlag"><span class="form-lable-font">Coupling Flag</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_couplingFlag" id="l2vpn_couplingFlag" [(ngModel)]="l2vpn.l2vpn_couplingFlag" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_cir"><span class="form-lable-font">CIR</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_cir" id="l2vpn_cir" [(ngModel)]="l2vpn.l2vpn_cir" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_startTime"><span class="form-lable-font">Strat Time</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <nz-date-picker formControlName="l2vpn_startTime" id="l2vpn_startTime" [(ngModel)]="l2vpn.l2vpn_startTime"></nz-date-picker> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_endTime"><span class="form-lable-font">End Time</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <nz-date-picker formControlName="l2vpn_endTime" id="l2vpn_endTime" [(ngModel)]="l2vpn.l2vpn_endTime"></nz-date-picker> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_eir"><span class="form-lable-font">EIR</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_eir" id="l2vpn_eir" [(ngModel)]="l2vpn.l2vpn_eir" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + <nz-form-item class="mar-0x child"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="l2vpn_SLS"><span class="form-lable-font">SLS</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="l2vpn_SLS" id="l2vpn_SLS" [(ngModel)]="l2vpn.l2vpn_SLS" (keypress)="numberOnly($event)"> + </nz-form-control> + </nz-form-item> + </div> + </div> + </div> + </div> + </ng-template> + <ng-template [ngIf]="data.rowIdx == 3"> + <div style="display: flex; justify-content: center; padding: 1%;"> + <div style="width: 100%" class=""> + <div style="display: flex; justify-content: space-around;"> + <div class="sotn-form"> + <nz-form-item class="mar-0x"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_cVLAN" ><span class="form-lable-font">VLAN</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="sotnuni_cVLAN" id="sotnuni_cVLAN" [(ngModel)]="uni.sotnuni_cVLAN"> + </nz-form-control> + </nz-form-item> + </div> + <div class="sotn-form "> + <nz-form-item class="mar-0x"> + <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sotnuni_tpId" ><span class="form-lable-font">TP ID</span></nz-form-label> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <input nz-input formControlName="sotnuni_tpId" id="sotnuni_tpId" [(ngModel)]="uni.sotnuni_tpId"> + </nz-form-control> + </nz-form-item> + </div> + <div class="sotn-form "> + <nz-form-item class="mar-0x"> + <nz-form-control [nzSm]="14" [nzXs]="24"> + <button (click)="addUNI($event)" nz-button nzType="primary">Add</button> + </nz-form-control> + </nz-form-item> + </div> + </div> + <nz-table #basicTable [nzData]="sotnUni" [nzShowPagination]="false"> + <thead> + <tr> + <th>VLAN</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> + <td> + <a>Delete</a> + </td> + </tr> + </tbody> + </nz-table> + </div> + </div> + </ng-template> + </form> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> +</div>
\ 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<OrderServiceComponent>; + + 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<any>(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<any>(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 @@ +<nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing"> + <nz-tab nzTitle="Order Service"> + <app-order-service + *ngIf="currentTab ==='Order Service'" + ></app-order-service> + </nz-tab> + <nz-tab nzTitle="Manage Service" > + <app-manage-service + *ngIf="currentTab ==='Manage Service'" + ></app-manage-service> + </nz-tab> + <nz-tab nzTitle="Monitor Service"> + <app-monitor-service + *ngIf="currentTab ==='Monitor Service'" + ></app-monitor-service> + </nz-tab> +</nz-tabset>
\ 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<SotnManagementComponent>; + + 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; + } +} diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index 5a49d3d2..244f055a 100644 --- a/usecaseui-portal/src/assets/i18n/cn.json +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -6,6 +6,7 @@ "i18nTextDefine_Monitor_5g": "5G 切片", "i18nTextDefine_Services": "服务", "i18nTextDefine_ServicesList": "服务列表", + "i18nTextDefine_SotnEline": "SOTN Eline", "i18nTextDefine_Mangement_5g": "5G切片管理", "i18nTextDefine_PackageManagement": "包管理", "i18nTextDefine_Alarm": "告警", @@ -138,5 +139,16 @@ "i18nTextDefine_RightPort": "右侧端口", "i18nTextDefine_PartnerNetwork": "伙伴网络", "i18nTextDefine_HostUrl": "主机网址", - "i18nTextDefine_deleteLink": "删除链接" + "i18nTextDefine_deleteLink": "删除链接", + + "sotn-component": "--:", + "i18nTextDefine_subscriptionType": "Service Type", + "i18nTextDefine_serviceInstance": "Service Instance", + "i18nTextDefine_serviceInformation": "Service Information", + "i18nTextDefine_vpnInformation": "VPN Information", + "i18nTextDefine_vpnName": "VPN Name", + "i18nTextDefine_siteInformation": "Site Information", + "i18nTextDefine_siteName": "Site Name", + "i18nTextDefine_city": "City", + "i18nTextDefine_postalCode": "Postal Code" } diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index b25413e4..94fc3df7 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -6,6 +6,7 @@ "i18nTextDefine_Monitor_5g": "5G Slicing", "i18nTextDefine_Services": "Services", "i18nTextDefine_ServicesList": "Lifecycle Management", + "i18nTextDefine_SotnEline": "SOTN Eline", "i18nTextDefine_Mangement_5g": "5G Slicing Management", "i18nTextDefine_PackageManagement": "Package Management", "i18nTextDefine_Alarm": "Alarm", @@ -137,5 +138,16 @@ "i18nTextDefine_RightPort": "Right Port", "i18nTextDefine_PartnerNetwork": "Partner Network", "i18nTextDefine_HostUrl": "Host Url", - "i18nTextDefine_DeleteLink": "Delete Link" + "i18nTextDefine_DeleteLink": "Delete Link", + + "sotn-component": "--:", + "i18nTextDefine_subscriptionType": "Service Type", + "i18nTextDefine_serviceInstance": "Service Instance", + "i18nTextDefine_serviceInformation": "Service Information", + "i18nTextDefine_vpnInformation": "VPN Information", + "i18nTextDefine_vpnName": "VPN Name", + "i18nTextDefine_siteInformation": "Site Information", + "i18nTextDefine_siteName": "Site Name", + "i18nTextDefine_city": "City", + "i18nTextDefine_postalCode": "Postal Code" } diff --git a/usecaseui-portal/src/assets/images/edge.png b/usecaseui-portal/src/assets/images/edge.png Binary files differnew file mode 100644 index 00000000..95ee21bd --- /dev/null +++ b/usecaseui-portal/src/assets/images/edge.png diff --git a/usecaseui-portal/src/assets/images/logicallink.png b/usecaseui-portal/src/assets/images/logicallink.png Binary files differnew file mode 100644 index 00000000..bfeccb43 --- /dev/null +++ b/usecaseui-portal/src/assets/images/logicallink.png diff --git a/usecaseui-portal/src/assets/images/tpoint.png b/usecaseui-portal/src/assets/images/tpoint.png Binary files differnew file mode 100644 index 00000000..18e4e4cb --- /dev/null +++ b/usecaseui-portal/src/assets/images/tpoint.png |
