summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-05-05 10:10:50 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-05-05 10:12:48 +0800
commitd0d32650fb14e4e556155475f21f00d6ab1d3ae0 (patch)
treeafe3a2b06c258ba59f74065e782df3ca3b35ca0f /usecaseui-portal
parent76cafb66f1897b971736a9c9bdf2e8f0fd5a9579 (diff)
Added monitor and user management logic
Change-Id: Iedca2ea71126529864baeec067b46050a1e0a67d Issue-ID: USECASEUI-228 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/app-routing.module.ts2
-rw-r--r--usecaseui-portal/src/app/app.module.ts2
-rw-r--r--usecaseui-portal/src/app/components/charts/bar/bar.component.ts4
-rw-r--r--usecaseui-portal/src/app/components/customer/customer.component.html48
-rw-r--r--usecaseui-portal/src/app/components/customer/customer.component.less44
-rw-r--r--usecaseui-portal/src/app/components/customer/customer.component.ts84
-rw-r--r--usecaseui-portal/src/app/fcaps/fcaps.component.html3
-rw-r--r--usecaseui-portal/src/app/fcaps/fcaps.component.less0
-rw-r--r--usecaseui-portal/src/app/fcaps/fcaps.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/fcaps/fcaps.component.ts15
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts15
-rw-r--r--usecaseui-portal/src/app/managemencs.service.ts45
-rw-r--r--usecaseui-portal/src/app/management/management.component.ts19
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";