Added monitor and user management logic

Change-Id: Iedca2ea71126529864baeec067b46050a1e0a67d
Issue-ID: USECASEUI-228
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

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";