summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/home
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/home')
-rw-r--r--usecaseui-portal/src/app/home/home.component.css157
-rw-r--r--usecaseui-portal/src/app/home/home.component.html63
-rw-r--r--usecaseui-portal/src/app/home/home.component.less145
-rw-r--r--usecaseui-portal/src/app/home/home.component.spec.ts25
-rw-r--r--usecaseui-portal/src/app/home/home.component.ts166
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);
+ }
+ )
+ }
+
+}