Build AngularJs component for usecase-ui

Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3
Issue-ID: USECASEUI-154
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

5 files changed, 556 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/home/home.component.css b/usecaseui-portal/src/app/home/home.component.css
new file mode 100644
index 00000000..d2e51e40
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.css
@@ -0,0 +1,157 @@
+/*
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+*/
+.title {
+  font: 700 18px/18px "思源黑体";
+  color: #4c5e70;
+  margin-bottom: 18px;
+}
+hr {
+  border: none;
+  height: 2px;
+  background-color: #dce1e7;
+  margin-bottom: 20px;
+}
+.content .services {
+  float: left;
+  background-color: #fff;
+  width: 30%;
+  height: 628px;
+  border-radius: 5px;
+  padding: 28px 22px;
+}
+.content .services h4 {
+  font: 600 16px/16px "Arial";
+  color: #3d4d65;
+  margin-bottom: 58px;
+}
+.content .services h3 {
+  font: 400 48px/48px "Arial";
+  color: #3fa8eb;
+  text-align: center;
+}
+.content .services h3 span {
+  font-size: 14px;
+}
+.content .services p {
+  font: 400 14px/14px "Arial";
+  color: #54657e;
+  text-align: center;
+  margin-bottom: 48px;
+}
+.content .services .tip {
+  background-color: #eceff4;
+  color: #3d4d65;
+  font-size: 16px;
+  margin: 0 20px;
+  height: 35px;
+  line-height: 35px;
+  border-radius: 5px;
+}
+.content .rightcontent {
+  float: left;
+  padding-left: 15px;
+  width: 70%;
+}
+.content .rightcontent .rt-content {
+  height: 220px;
+  margin-bottom: 18px;
+}
+.content .rightcontent .rt-content .poerformance {
+  float: left;
+  background-color: #fff;
+  height: 100%;
+  width: 50%;
+  border-radius: 5px;
+  padding: 28px 26px;
+}
+.content .rightcontent .rt-content .poerformance h4 {
+  font: 600 16px/16px "Arial";
+  color: #3d4d65;
+  margin-bottom: 34px;
+}
+.content .rightcontent .rt-content .poerformance div {
+  height: 57px;
+  position: relative;
+  margin-bottom: 10px;
+}
+.content .rightcontent .rt-content .poerformance div h3 {
+  font: 600 25px/25px "Arial";
+  color: #3d4d65;
+  margin-bottom: 10px;
+}
+.content .rightcontent .rt-content .poerformance div p {
+  font: 400 12px/12px "Arial";
+  color: #54657e;
+}
+.content .rightcontent .rt-content .poerformance div img {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.content .rightcontent .rt-content .alarm {
+  float: left;
+  background-color: #fff;
+  height: 100%;
+  width: 48%;
+  margin-left: 2%;
+  border-radius: 5px;
+  position: relative;
+  padding: 28px 26px;
+}
+.content .rightcontent .rt-content .alarm h4 {
+  position: absolute;
+  font: 600 16px/16px "Arial";
+  color: #3d4d65;
+}
+.content .rightcontent .rb-content {
+  height: 390px;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 24px 30px;
+  position: relative;
+}
+.content .rightcontent .rb-content h4 {
+  font: 600 16px/16px "Arial";
+  color: #3d4d65;
+}
+.content .rightcontent .rb-content nz-dropdown {
+  position: absolute;
+  top: 24px;
+  right: 30px;
+}
+.content .rightcontent .rb-content nz-dropdown button {
+  width: 170px;
+  height: 35px;
+  background-color: #eceff4;
+  text-align: left;
+  border-color: #cad3df;
+}
+.content .rightcontent .rb-content nz-dropdown button span {
+  display: inline-block;
+  width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+.content .rightcontent .rb-content nz-dropdown button i {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+.content .rightcontent .rb-content #pfVmChartLine {
+  width: 100%;
+  height: 318px;
+}
diff --git a/usecaseui-portal/src/app/home/home.component.html b/usecaseui-portal/src/app/home/home.component.html
new file mode 100644
index 00000000..b2fa5eb4
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.html
@@ -0,0 +1,63 @@
+<!--
+    Copyright (C) 2018 CMCC, Inc. and others. All rights reserved.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+-->
+<h3 class="title"> {{"Overall trend" | translate}}</h3>
+<hr>
+<div class="content">
+  <div class="services">
+    <h4>{{"SERVICES" | translate}}</h4>
+    <h3>{{serviceNumber}} <span>{{"services" | translate}}</span> </h3>
+    <p>{{serviceNumber}} {{"services has been created" | translate}}</p>
+    <app-pie [initData]="serviceChartInit" [chartData]="serviceChartData"></app-pie>
+    <p class="tip">View the details</p>
+  </div>
+
+  <div class="rightcontent">
+    <div class="rt-content">
+      <div class="poerformance">
+        <h4>{{"PERFORMANCE" | translate}}</h4>
+        <div class="pfVnf">
+          <h3 class="pfVnfNum">126</h3>
+          <p>Performance VNF</p>
+          <img src="../../assets/images/VNF.png" alt="VNF">
+        </div>
+        <div class="pfVmPm">
+          <h3 class="pfVmPmNum">286</h3>
+          <p>Performance VM/PM</p>
+          <img src="../../assets/images/VM.png" alt="VM/PM">
+        </div>
+      </div>
+      <div class="alarm">
+        <h4>{{"Alarm" | translate}}</h4>
+        <app-pie [initData]="alarmChartInit" [chartData]="alarmChartData"></app-pie>
+      </div>
+    </div>
+
+    <div class="rb-content">
+      <h4>{{"VM Performance" | translate}}</h4>
+      <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
+        <button nz-button nz-dropdown><span>{{vmPerformanceNameSelected}}</span> <i class="anticon anticon-down"></i></button>
+        <ul nz-menu>
+          <li nz-menu-item (click)="vmPerformanceNameSelect(item)" *ngFor="let item of vmPerformanceNames">
+            <a>{{item}}</a>
+          </li>
+        </ul>
+      </nz-dropdown>
+      <app-line [initData]="performanceChartInit" [chartData]="performanceChartData"></app-line>
+    </div>
+  </div>
+
+</div>
+
diff --git a/usecaseui-portal/src/app/home/home.component.less b/usecaseui-portal/src/app/home/home.component.less
new file mode 100644
index 00000000..89abafa6
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.less
@@ -0,0 +1,145 @@
+.title {
+    font: 700 18px/18px "思源黑体";
+    color: #4c5e70;
+    margin-bottom: 18px; 
+}
+hr {
+    border: none;
+    height: 2px;
+    background-color: #dce1e7;
+    margin-bottom: 20px;
+}
+.content {
+    .services {
+        float: left;
+        background-color: #fff;
+        width: 30%;
+        height: 628px;
+        border-radius: 5px;
+        padding: 28px 22px;
+        h4 {
+            font: 600 16px/16px "Arial";
+            color: #3d4d65;
+            margin-bottom: 58px;
+        }
+        h3 {
+            font: 400 48px/48px "Arial";
+            color: #3fa8eb;
+            text-align: center;
+            span {
+                font-size: 14px;
+            }
+        }
+        p {
+            font: 400 14px/14px "Arial";
+            color: #54657e;
+            text-align: center;
+            margin-bottom: 48px;
+        }
+        .tip {
+            background-color: #eceff4;
+            color: #3d4d65;
+            font-size: 16px;
+            margin: 0 20px;
+            height: 35px;
+            line-height: 35px;
+            border-radius: 5px;
+        }
+    }
+    .rightcontent {
+        float: left;
+        padding-left: 15px;
+        width: 70%;
+        .rt-content {
+            height: 220px;
+            margin-bottom: 18px;
+            .poerformance {
+                float: left;              
+                background-color: #fff;
+                height: 100%;
+                width: 50%;
+                border-radius: 5px;
+                padding: 28px 26px;
+                h4 {
+                    font: 600 16px/16px "Arial";
+                    color: #3d4d65;
+                    margin-bottom: 34px;  
+                }
+                div {
+                    height: 57px;
+                    position: relative;
+                    margin-bottom: 10px;
+                    h3 {
+                        font: 600 25px/25px "Arial";
+                        color: #3d4d65;
+                        margin-bottom: 10px;
+                    }
+                    p {
+                        font: 400 12px/12px "Arial"; 
+                        color: #54657e
+                    }
+                    img {
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                    }
+                }
+            }
+            .alarm {
+                float: left;
+                background-color: #fff;
+                height: 100%;
+                width: 48%;
+                margin-left: 2%;
+                border-radius: 5px;
+                position: relative;
+                padding: 28px 26px;
+                h4 {
+                    position: absolute;
+                    font: 600 16px/16px "Arial";
+                    color: #3d4d65; 
+                }
+            }
+        }
+        .rb-content {
+            height: 390px;
+            background-color: #fff;
+            border-radius: 5px;
+            padding: 24px 30px;
+            position: relative;
+            h4 {
+                font: 600 16px/16px "Arial";
+                color: #3d4d65; 
+            }
+            nz-dropdown {
+                position: absolute;
+                top: 24px;
+                right: 30px;
+                button {
+                    width: 170px;
+                    height: 35px;
+                    background-color: #eceff4;
+                    text-align: left;
+                    border-color: #cad3df;
+                    span {
+                        display: inline-block;
+                        width: 120px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        font-size: 14px;
+                    }
+                    i {
+                        position: absolute;
+                        top: 12px;
+                        right: 12px;
+                    }
+                }
+                //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
+            }
+            #pfVmChartLine {
+                width: 100%;
+                height: 318px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/home/home.component.spec.ts b/usecaseui-portal/src/app/home/home.component.spec.ts
new file mode 100644
index 00000000..490e81bd
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
new file mode 100644
index 00000000..39fab25d
--- /dev/null
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -0,0 +1,166 @@
+import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import { MyhttpService } from '../myhttp.service';
+import { slideToRight } from '../animates';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.less'],
+  animations: [ slideToRight ]
+})
+export class HomeComponent implements OnInit {
+  @HostBinding('@routerAnimate') routerAnimateState;
+
+  constructor(private myhttp: MyhttpService) { }
+
+  ngOnInit() {
+    this.getHomeAllData();
+  }
+  
+  // alarm饼图
+  alarmChartData:Object;
+  alarmChartInit:Object = {
+    height: 164,
+    option:{
+      legend: {
+        orient: 'vertical',
+        left: '0px',
+        bottom: '0px',
+        data: ['Active','Closed']
+      },
+      color:["#fb6e6e","#526b75"],
+      series:[{
+        name:"告警信息",
+        radius : '55%',
+        label:{
+          normal:{
+            show: false,
+          },
+          emphasis: {
+            show: true,
+            formatter:'{b}\n{c},{d}%',
+          }
+        }
+      }]
+    }
+  };
+
+  // services饼图
+  serviceNumber:number = 0;
+  serviceChartData:Object;
+  serviceChartInit:Object = {
+    height: 300,
+    option:{
+      legend: {
+        orient: 'vertical',
+        left: '0px',
+        bottom: '0px',
+        data: ['Active','Closed']
+      },
+      color:["#3fa8eb","#1abb9b","#a4ead7"],
+      series:[{
+        name:"服务信息",
+        radius : ['45%','65%'],
+        avoidLabelOverlap: false,
+        label:{
+          normal:{
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            show: true,
+            formatter:'{b}\n{c}',
+            textStyle: {
+                fontSize: '20',
+                fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+              show: false
+          }
+        },        
+      }]
+    }
+  };
+
+  // Performance线图
+  performanceChartData:Object;
+  performanceChartInit:Object = {
+    height:320,
+    option:{
+      legend: {
+        bottom: '0px',
+        data: ['CPU','Memory']
+      },
+      series : [
+        {
+            name: 'CPU',
+            type: 'line',
+            data:[20,23,14,12,34,25,22,42,52,35,34,13,13]
+        },
+        {
+            name: 'Memory',
+            type: 'line',
+            data:[10,23,24,22,14,15,32,12,12,32,14,23,23]
+        }
+      ]
+    }
+  };
+  getPerformanceChartData(){
+    let paramsObj = {
+      vmPerformanceName:this.vmPerformanceNameSelected
+    }
+    this.myhttp.getHomePerformanceChartData(paramsObj)
+      .subscribe((data)=>{
+        this.performanceChartData = {
+          series:[
+            {data:data.CPU},
+            {data:data.Memory}
+          ]
+        }
+      },(err)=>{
+        console.log(err);
+      })
+  }
+
+  // vm筛选框
+  vmPerformanceNames = ['performanceNameOne'];
+  vmPerformanceNameSelected = this.vmPerformanceNames[0];
+  vmPerformanceNameSelect(item){
+    if(this.vmPerformanceNameSelected != item){
+      console.log(item);
+      this.vmPerformanceNameSelected = item;
+      this.getPerformanceChartData()
+    } 
+  }
+
+  // 获取数据
+  getHomeAllData(){
+    this.myhttp.getAllHomeData()
+    .subscribe(
+      (data)=>{
+        console.log(data);
+        this.alarmChartData ={
+          series:[{
+            data:data.alarm.chartdata
+          }]
+        };
+        this.serviceNumber = data.services.number;
+        this.serviceChartData ={
+          series:[{
+            data:data.services.chartdata
+          }]
+        };
+        this.vmPerformanceNames = data.Vm_performance.names;
+        this.vmPerformanceNameSelected = this.vmPerformanceNames[0];
+        this.getPerformanceChartData();
+      },
+      (err)=>{
+        console.log(err);
+      }
+    )
+  }
+
+}