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 --- .../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 ++++++++++++++++++++ 4 files changed, 485 insertions(+) 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 (limited to 'usecaseui-portal/src/app/views/services/sotn-management/order-service') 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); + } + +} -- cgit 1.2.3-korg