diff options
Diffstat (limited to 'usecaseui-portal')
13 files changed, 243 insertions, 63 deletions
diff --git a/usecaseui-portal/src/app/app-routing.module.ts b/usecaseui-portal/src/app/app-routing.module.ts index 558b4428..04a6bc80 100644 --- a/usecaseui-portal/src/app/app-routing.module.ts +++ b/usecaseui-portal/src/app/app-routing.module.ts @@ -19,6 +19,7 @@ import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { ManagementComponent } from './management/management.component'; +import { FcapsComponent } from './fcaps/fcaps.component'; import { ServicesComponent } from './services/services.component'; import { ServicesListComponent } from './services/services-list/services-list.component'; import { OnboardVnfVmComponent } from './services/onboard-vnf-vm/onboard-vnf-vm.component'; @@ -40,6 +41,7 @@ const ServicesChildRoutes: Routes = [ const routes: Routes = [ { path: 'home', component: HomeComponent}, { path: 'management', component: ManagementComponent}, + { path: 'fcaps', component: FcapsComponent}, // { path: 'services', component: ServicesComponent, children:ServicesChildRoutes}, //Temporarily not a sub-routing structure { path: 'services/services-list', component: ServicesListComponent}, { path: 'services/onboard-vnf-vm', component: OnboardVnfVmComponent}, diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index be4454f2..9c69124f 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -69,6 +69,7 @@ import { PerformanceDetailsComponent } from './components/performance-details/pe import { E2eDetailComponent } from './components/e2e-detail/e2e-detail.component'; import { CustomerComponent } from './components/customer/customer.component'; import { ManagemencsService } from './managemencs.service'; +import { FcapsComponent } from './fcaps/fcaps.component'; @NgModule({ providers : [ @@ -106,6 +107,7 @@ import { ManagemencsService } from './managemencs.service'; E2eDetailComponent, CustomerComponent , PerformanceDetailsComponent, + FcapsComponent ], imports: [ BrowserModule, diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts index ee76dfee..bc2beb63 100644 --- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts +++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts @@ -33,8 +33,8 @@ export class BarComponent implements OnInit { ngOnInit() { this.initOpts = { renderer: 'canvas', - height: 200, - width: 280, + height: this.initData.height, + width: this.initData.width, }; this.barOption = { diff --git a/usecaseui-portal/src/app/components/customer/customer.component.html b/usecaseui-portal/src/app/components/customer/customer.component.html index 9bf6c5ab..6693354b 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.html +++ b/usecaseui-portal/src/app/components/customer/customer.component.html @@ -14,6 +14,17 @@ limitations under the License. --> <div class="content"> + <div class="chearts"> + <div class="Cu"> + <p>Instance Count of Customer</p> + <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie> + <div class="legend"></div><span>users</span> + </div> + <div class="type"> + <p>Instance Count of Service Type</p> + <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar> + </div> + </div> <div class="customer"> <div class="customer_title"> <div class="customers"> @@ -28,22 +39,8 @@ </div> <div class="customer_list"> <ul> - <li class="active"><img src="./assets/images/customer05.png" alt=""><span>name</span><i + <li *ngFor ="let item of AllCustomersdata,let i = index" [ngClass]="{active: chose ==i}" (click)="choseCustomer(i,item)"><img src="./assets/images/customer05.png" alt=""><span>{{item.name}}</span><i class="anticon anticon-delete" nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> - <li><img src="./assets/images/customer05.png" alt=""><span>name</span><i class="anticon anticon-delete" - nzType="info"></i></li> </ul> </div> </div> @@ -61,25 +58,14 @@ <button nz-button nzType="primary" class="services_addbut">Add</button> </div> <div class="services_list"> + <div class="border_size"></div> <div style="padding:0 20px;"> - <ul> - <li><span>Type1</span><i class="anticon anticon-delete" nzType="info"></i></li> - <li><span>Type2</span><i class="anticon anticon-delete" nzType="info"></i></li> - <li><span>Type3</span><i class="anticon anticon-delete" nzType="info"></i></li> - </ul> + <ul> + <li *ngFor = "let item of AllServiceTypes" ><span>{{item.type}}</span><i class="anticon anticon-delete" nzType="info"></i></li> + </ul> </div> </div> </div> </div> - <div class="chearts"> - <div class="Cu"> - <p>Instance Count of Customer</p> - <app-pie [initData]="CUChartInit" [chartData]="CUChartData"></app-pie> - <div class="legend"></div><span>users</span> - </div> - <div class="type"> - <p>Instance Count of Service Type</p> - <app-bar [initData]="serviceInit" [chartData]="serviceData"></app-bar> - </div> - </div> + </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/components/customer/customer.component.less b/usecaseui-portal/src/app/components/customer/customer.component.less index f591cc4b..abfcb5c0 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.less +++ b/usecaseui-portal/src/app/components/customer/customer.component.less @@ -34,9 +34,10 @@ } .customer { height: 580px; - margin-right: 2.5%; + overflow: hidden; + width: 32%; + margin-right: 1.5%; border-radius: 5px; - width: 31%; background-color: #fff; box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); display: inline-block; @@ -107,10 +108,10 @@ } .services_type { + overflow: hidden; height: 580px; - margin-right: 2.5%; border-radius: 5px; - width: 31%; + width: 32%; background-color: #fff; box-shadow: 0 2px 23px 0 rgba(0, 0, 0, 0.1), 0 2px 49px 0 rgba(0, 0, 0, 0.06); display: inline-block; @@ -129,6 +130,7 @@ img { width: 50px; float: right; + margin-right: -10px; margin-top: 5px; } } @@ -158,28 +160,38 @@ background-color: #0DA9E2; } } + .services_list { background:linear-gradient(to right, #E5F6FF, #CFEEFA); height: 530px; - li { - height: 50px; - line-height: 3.5; - width: 100%; - border-bottom: 2px #FFFFFF dashed; - i { - float: right; - clear: both; - padding-top: 17px; + .border_size{ + position: absolute; + margin-left: -8px; + width: 0; + height: 0; + border-top: 24px solid transparent; + border-bottom: 24px solid transparent; + border-right: 10px solid #E5F6FF; + } + li { + height: 50px; + line-height: 3.5; + width: 100%; + border-bottom: 2px #FFFFFF dashed; + i { + float: right; + clear: both; + padding-top: 17px; + } } } - - } } } .chearts { display: inline-block; - width: 31%; + width: 32%; + margin-right: 1.5%; vertical-align: top; >div{ padding: 20px 20px; diff --git a/usecaseui-portal/src/app/components/customer/customer.component.ts b/usecaseui-portal/src/app/components/customer/customer.component.ts index 3008ae02..dff15f81 100644 --- a/usecaseui-portal/src/app/components/customer/customer.component.ts +++ b/usecaseui-portal/src/app/components/customer/customer.component.ts @@ -14,6 +14,7 @@ limitations under the License. */ import { Component, OnInit } from '@angular/core'; +import { ManagemencsService } from '../../managemencs.service'; @Component({ selector: 'app-customer', @@ -21,10 +22,39 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./customer.component.less'] }) export class CustomerComponent implements OnInit { - - constructor() { } + public chose = ''; + + constructor(private managemencs: ManagemencsService) { } ngOnInit() { + this.getAllCustomers(); + this.getCustomersPie(); + } + AllCustomersdata = []; + AllServiceTypes = []; + customerber = []; + // Get all customers + active; + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + this.AllCustomersdata = data.map((item)=>{return {name:item["subscriber-name"],id:item["global-customer-id"]}}); + this.active = this.AllCustomersdata[0].id + this.getServiceTypes(this.active); + this.getCustomersColumn(this.active); + }) + + } + // Get all servicetype + getServiceTypes(item){ + this.managemencs.getServiceTypes(item).subscribe((data) => { + this.AllServiceTypes = data.map((item) => {return {type:item["service-type"],id:item["global-customer-id"]}}); + }) + } + // Switch user data + choseCustomer(index,item){ + this.chose = index; + this.getServiceTypes(item); + this.getCustomersColumn(item); } customeradd = false; servicesadd = false; @@ -100,20 +130,25 @@ export class CustomerComponent implements OnInit { }] } }; - // getHomeAlarmData() { - // this.myhttp.getHomeAlarmData() - // .subscribe((data) => { - // this.alarmChartData = { - // series: [{ - // data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }] - // }] - // }; - // }) - // } + // get customers chart pie + getCustomersPie(){ + this.managemencs.getCustomersPie().subscribe((data)=>{ + this.CUChartData = { + series: [{ + data: data + }] + } + console.log(this.CUChartData) + }, (err) => { + console.log(err); + }); + } // service bar serviceData: Object; serviceInit: Object = { + height: 200, + width:280, option: { tooltip: { show: true, @@ -274,4 +309,29 @@ export class CustomerComponent implements OnInit { ] } } + name_s = []; + value_s = []; + getCustomersColumn(item){ + this.name_s = []; + this.value_s = []; + this.managemencs.getCustomersColumn(item).subscribe((data)=>{ + data.forEach((item)=>{ + this.name_s.push(item.name); + this.value_s.push(item.value); + }) + this.serviceData = { + yAxis:[{ + data:this.name_s + }], + series :[{ + data:this.value_s + }] + } + console.log(this.serviceData) + }) + } + + + + } diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.html b/usecaseui-portal/src/app/fcaps/fcaps.component.html new file mode 100644 index 00000000..edd2111a --- /dev/null +++ b/usecaseui-portal/src/app/fcaps/fcaps.component.html @@ -0,0 +1,3 @@ +<iframe src="http://172.30.1.80:5601" frameborder="0" style="height:100vh;width:100%;"></iframe> +<!-- <iframe src="http://dl_es:5601/app/kibana#/dashboard/a0db79a0-624e-11e9-88e5-b7b07490dd67?_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A86400000)%2Ctime%3A(from%3Anow-1y%2Cmode%3Aquick%2Cto%3Anow))" frameborder="0" style="height:100vh;width:100%;"></iframe> --> +<!-- <iframe src="http://dl_es:5601/app/kibana#/dashboard/a0db79a0-624e-11e9-88e5-b7b07490dd67?embed=true&_g=(refreshInterval%3A(pause%3A!f%2Cvalue%3A86400000)%2Ctime%3A(from%3Anow-1y%2Cmode%3Aquick%2Cto%3Anow))" style="height:100vh;width:100%;"></iframe> --> diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.less b/usecaseui-portal/src/app/fcaps/fcaps.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/fcaps/fcaps.component.less diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts b/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts new file mode 100644 index 00000000..42bdbc0f --- /dev/null +++ b/usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FcapsComponent } from './fcaps.component'; + +describe('FcapsComponent', () => { + let component: FcapsComponent; + let fixture: ComponentFixture<FcapsComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FcapsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FcapsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/fcaps/fcaps.component.ts b/usecaseui-portal/src/app/fcaps/fcaps.component.ts new file mode 100644 index 00000000..7f9ab7f4 --- /dev/null +++ b/usecaseui-portal/src/app/fcaps/fcaps.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-fcaps', + templateUrl: './fcaps.component.html', + styleUrls: ['./fcaps.component.less'] +}) +export class FcapsComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts index bd4c5176..65bbc606 100644 --- a/usecaseui-portal/src/app/home/home.component.ts +++ b/usecaseui-portal/src/app/home/home.component.ts @@ -235,7 +235,15 @@ export class HomeComponent implements OnInit { // services servicesBarChartData: Object; serviceBarChartInit: Object = { + height: 40, + width: 160, option: { + tooltip:{ + + }, + grid: { + + }, xAxis: { // data: [], type: 'value', @@ -246,6 +254,13 @@ export class HomeComponent implements OnInit { show: false }, }, + yAxis: { + type: 'category', + show: false, + axisTick: { + show: false + } + }, series: [{ type: 'bar', name: 'a', diff --git a/usecaseui-portal/src/app/managemencs.service.ts b/usecaseui-portal/src/app/managemencs.service.ts index 2bf06233..686d6180 100644 --- a/usecaseui-portal/src/app/managemencs.service.ts +++ b/usecaseui-portal/src/app/managemencs.service.ts @@ -1,8 +1,51 @@ import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import {baseUrl} from './dataInterface'; + @Injectable() export class ManagemencsService { - constructor() { } + constructor(private http: HttpClient) { } + baseUrl = baseUrl.baseUrl + + /* location */ + url = { + customers:this.baseUrl + "/customers/customers_list.json?", + serviceType:this.baseUrl + "/serviceTypes.json?*_*", + CustomersPir:this.baseUrl + "/customers/customersber.json?", + CustomersColumn:this.baseUrl + "/customers/customersber.json?", + + } + + + /* line up */ + // url = { + // customers:this.baseUrl + "/uui-lcm/customers",/* get */ + // serviceType:this.baseUrl + "/uui-lcm/customers/"+"*_*"+"/service-subscriptions",/* get */ + // CustomersPir:this.baseUrl + "/uui-lcm/serviceNumByCustomer",/* get */ + // CustomersColumn:this.baseUrl + "/uui-lcm/serviceNumByServiceType/"+"*_*",/* get */ + // } + + // Get all customers + getAllCustomers() { + return this.http.get<any>(this.url.customers); + } + // get all servicetype + getServiceTypes(customer) { + let url = this.url.serviceType.replace("*_*", customer.id); + console.log(url) + return this.http.get<any>(url); + } + // get Customer Pir + getCustomersPie(){ + return this.http.get<any>(this.url.CustomersPir); + } + // get Customer ber + getCustomersColumn(customer){ + let url = this.url.CustomersColumn.replace("*_*", customer.id); + return this.http.get<any>(url); + } } diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/management/management.component.ts index 5cc6be7b..4228245a 100644 --- a/usecaseui-portal/src/app/management/management.component.ts +++ b/usecaseui-portal/src/app/management/management.component.ts @@ -15,6 +15,7 @@ */ import { Component, OnInit , HostBinding} from '@angular/core'; import { showHideAnimate, slideToRight } from '../animates'; +import { ManagemencsService } from '../managemencs.service'; @Component({ selector: 'app-management', @@ -27,14 +28,30 @@ import { showHideAnimate, slideToRight } from '../animates'; export class ManagementComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; //Routing animation - constructor() { } + constructor(private managemencs: ManagemencsService) { } ngOnInit() { + this.getAllCustomers(); } show = "show"; hide = "hide"; custerhide = false; + AllCustomersdata = []; + // Get all customers + getAllCustomers() { + this.managemencs.getAllCustomers().subscribe((data) => { + if(data.length > 0){ + this.show = "hide"; + this.hide = "show"; + this.custerhide = false; + }else{ + this.show = "show"; + this.hide = "hide"; + this.custerhide = true; + } + }) + } customershow(){ this.show = "show"; this.hide = "hide"; |