summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html68
-rw-r--r--usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts174
-rw-r--r--usecaseui-portal/src/app/components/performance-details/performance-details.component.ts4
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css4
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html31
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less2
-rw-r--r--usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts118
7 files changed, 186 insertions, 215 deletions
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
index 8a1e64da..3789c598 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.html
@@ -14,44 +14,42 @@
limitations under the License.
-->
<div class="content">
- <!-- <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
+ <!-- <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="Alarm Chart" (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
<app-line [initData]="alarmChartInitBig" [chartData]="alarmChartDataBig"></app-line>
</nz-modal> -->
<div class="chart">
- <div class="select">
- <span>Report Time: </span>
- <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
-
- <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button>
- </div>
+ <div class="select">
+ <span>Report Time: </span>
+ <nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
+
+ <button class="search" nz-button [nzType]="'primary'" (click) = "getPerformanceFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
+ </div>
</div>
<div class="tablelist">
- <nz-table #nzTable [nzData]="dataSet" [nzPageSize]="10" nzShowSizeChanger [nzPageSizeOptions]="[5,10,15,20]" nzSize="middle">
- <thead (nzSortChange)="sort($event)" nzSingleSort>
- <tr>
- <th nzWidth="5%">NO</th>
- <th nzWidth="20%">Source Name</th>
- <th nzWidth="10%">Priority</th>
- <th nzWidth="20%">SpecificProblem</th>
- <th nzWidth="20%">Report Time</th>
- <th nzWidth="15%">Status</th>
- <th nzWidth="10%">Action</th>
- </tr>
- </thead>
- <tbody>
- <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td>{{i+1}}</td>
- <td>{{item.name}}</td>
- <td>{{item.age}}</td>
- <td>{{item.address}}</td>
- <td>{{item.address}}</td>
- <td>{{item.address}}</td>
- <td><a class="action" (click)="detailShow(i+1)"><i class="details"></i></a></td>
- </tr>
- <!-- </ng-template> -->
- </tbody>
- </nz-table>
+ <nz-table #nzTable [nzData]="list" [nzPageSize]="10" nzShowSizeChanger [nzPageSizeOptions]="[5,10,15,20]"
+ nzSize="middle">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="5%">NO</th>
+ <th nzWidth="20%">Source Name</th>
+ <th nzWidth="20%">Event Name</th>
+ <th nzWidth="20%">ReportingEntityName</th>
+ <!-- <th nzWidth="20%">Report Time</th> -->
+ <th nzWidth="10%">Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> -->
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td>{{i+1}}</td>
+ <td>{{item.sourceName}}</td>
+ <td>{{item.eventName}}</td>
+ <td>{{item.reportingEntityName}}</td>
+ <!-- <td>{{item.sequence}}</td> -->
+ <td><a class="action" (click)="detailShow(item)"><i class="details"></i></a></td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </nz-table>
</div>
- </div>
- \ No newline at end of file
+</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
index 6eaf19f4..c3153c8e 100644
--- a/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
+++ b/usecaseui-portal/src/app/components/graphiclist/graphiclist.component.ts
@@ -1,147 +1,75 @@
+/*
+ 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.
+*/
import { Component, OnInit, Input, Output, EventEmitter, HostBinding } from '@angular/core';
+import { MyhttpService } from '../../myhttp.service';
import * as addDays from 'date-fns/add_days';
+import { DatePipe } from "@angular/common"
@Component({
selector: 'app-graphiclist',
templateUrl: './graphiclist.component.html',
- styleUrls: ['./graphiclist.component.less']
+ styleUrls: ['./graphiclist.component.less'],
+ providers: [DatePipe]
})
export class GraphiclistComponent implements OnInit {
+ public startTime: string = '';
+ public endTime: string = '';
+ public currentPage: number = 1;
+ public pageSize: number = 10;
+ list: any;
+ constructor( private datePipe: DatePipe,
+ private myhttp: MyhttpService) { }
+ isVisibleMiddle = false;
- constructor() { }
- // isVisibleMiddle = false;
-
- // showModalMiddle(): void {
- // this.isVisibleMiddle = true;
- // }
- // handleOkMiddle(): void {
- // console.log('click ok');
- // this.isVisibleMiddle = false;
- // }
- // handleCancelMiddle(): void {
- // this.isVisibleMiddle = false;
- // }
+ showModalMiddle(): void {
+ this.isVisibleMiddle = true;
+ }
+ handleOkMiddle(): void {
+ // console.log('click ok');
+ this.isVisibleMiddle = false;
+ }
+ handleCancelMiddle(): void {
+ this.isVisibleMiddle = false;
+ }
ngOnInit() {
+ this.getPerformanceFormData();
}
-
- // 筛选框(下拉框)
- MeasurementList = ['aaaa','bbbb','cccc','dddddDDDD'];
- MeasurementSelected = "Measurement";
- ReportTimeList = ['aaaa','bbbb','cccc','ddddd'];
- ReportTimeSelected = "ReportTime";
- choseMeasurement(item){
- console.log(item);
- this.MeasurementSelected = item;
+ ngOnchanges(changes){
+ this.getPerformanceFormData();
+ console.log(this.vnfname)
+
}
- choseReportTime(item){
- console.log(item);
- this.ReportTimeSelected = item;
+ getPerformanceFormData() {
+ this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.vnfname, this.startTime, this.endTime).subscribe((data) => {
+ console.log(data)
+ this.list = data.alarms;
+ })
}
// Date screening
dateRange = [ addDays(new Date(), -30), new Date() ];
onChange(result: Date): void {
- console.log('onChange: ', result);
- }
+ this.startTime = this.datePipe.transform(result[0], 'yyyy-MM-dd-HH:mm:ss');
+ this.endTime = this.datePipe.transform(result[1], 'yyyy-MM-dd-HH:mm:ss');
+}
sort(e){
}
- //表格数据
- dataSet = [
- {
- name : 'John Brown',
- age : 32,
- expand : false,
- address : 'New York No. 1',
- description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.'
- },
- {
- name : 'Aim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'Bim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'Cim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'Jim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'Xim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'Jim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'Jim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'Jim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'Jim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'cim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'bim Green',
- age : 42,
- expand : false,
- address : 'London No. 1',
- description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.'
- },
- {
- name : 'aoe Black',
- age : 32,
- expand : false,
- address : 'Sidney No. 1',
- description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.'
- }
- ];
-
+ @Input () vnfname;
@Output() detailData = new EventEmitter();
detailShow(id){
let prems = {
diff --git a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
index 9f70824b..2e174474 100644
--- a/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
+++ b/usecaseui-portal/src/app/components/performance-details/performance-details.component.ts
@@ -14,11 +14,11 @@ export class PerformanceDetailsComponent implements OnInit {
constructor(private myhttp:MyhttpService) { }
ngOnInit() {
- this.getAlarmDetailData(7);
+ this.getAlarmDetailData(this.detailId);
}
ngOnChanges(changes){
- console.log(changes);
+ // console.log(changes);
}
datailheaderdata: any = {};
dataillistdata: any = [];
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
index cbb5bfdd..414beebf 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.css
@@ -43,13 +43,13 @@ hr {
top: 10px;
right: 10px;
}
-.select .submit {
+.select .search {
margin-left: 20px;
vertical-align: middle;
height: 30px;
padding: 0 10px;
}
-.select .submit span {
+.select .search span {
color: #fff;
font-weight: 400;
}
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
index 824599e7..d308d808 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.html
@@ -1,3 +1,18 @@
+<!--
+ 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">
<span (click)="performanceShow()" style="cursor:pointer;">Performance VNF</span>
<span (click)="graphicShow()" *ngIf="graphicshow">> Graphic list </span>
@@ -14,25 +29,25 @@
</li>
</ul>
</nz-dropdown>
- <button class="submit" nz-button [nzType]="'primary'" (click)="submit()"><i class="anticon anticon-plus-circle-o"></i><span>Submit</span></button>
+ <button class="search" nz-button [nzType]="'primary'" (click)="getperformanceSsourceNames()"><i class="anticon anticon-search"></i><span>Search</span></button>
</div>
<div class="content" [@showHideAnimate]="state">
<div class="vnfs">
- <div class="vnf" *ngFor="let item of vnfsData" (click)="graphicShow()">
- <img src="../../../assets/images/VNF3.png" alt="VNF3">
- <h3>Mfvs_MMEManaxxdeafsfdf</h3>
- <div class="intro">
- Mfvs_MMEMa naxxdfdafa fafad a afeaf sfdff doafe oghaiod aaafeageageagfdavzvdagewag
+ <div class="vnf" *ngFor="let item of vnfsData">
+ <img src="../../../assets/images/VNF3.png" title="VF" (click)="graphicShow2(item)">
+ <h3>{{item.name}}</h3>
+ <div class="intro">
+ {{item.text}}
</div>
</div>
<div class="empty" *ngFor="let empty of emptys"></div>
</div>
<div class="pages">
- <nz-pagination [(nzPageIndex)]="current" [nzTotal]="500" [nzSize]="'small'" [nzPageSize]="10" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination>
+ <nz-pagination [(nzPageIndex)]="namecurrentPage" [nzTotal]="vnfsdataTotal" [nzSize]="'small'" [(nzPageSize)]="namepageSize" [nzPageSizeOptions]="[10,15,20,25,30]" nzShowSizeChanger nzShowQuickJumper></nz-pagination>
</div>
</div>
<div [@showHideAnimate]="state2">
- <app-graphiclist (detailData)="detailShow($event)"></app-graphiclist>
+ <app-graphiclist (detailData)="detailShow($event)" [vnfname] = "vnfname"></app-graphiclist>
</div>
<div [@showHideAnimate]="state3">
<app-performance-details [detailId]="detailId"></app-performance-details>
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
index 977ef5c0..6cc5b0fc 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.less
@@ -43,7 +43,7 @@ hr {
}
//下拉框中的样式在style.less中,下拉框是在body中额外临时生成的
}
- .submit {
+ .search {
margin-left: 20px;
vertical-align: middle;
height: 30px;
diff --git a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
index d2e8d991..3e08c2d4 100644
--- a/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
+++ b/usecaseui-portal/src/app/performance/performance-vnf/performance-vnf.component.ts
@@ -1,64 +1,85 @@
+/*
+ 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.
+*/
import { Component, OnInit, HostBinding } from '@angular/core';
import { slideToRight, showHideAnimate } from '../../animates';
+import { MyhttpService } from '../../myhttp.service';
@Component({
selector: 'app-performance-vnf',
templateUrl: './performance-vnf.component.html',
styleUrls: ['./performance-vnf.component.less'],
- animations: [ slideToRight, showHideAnimate ]
+ animations: [slideToRight, showHideAnimate],
})
export class PerformanceVnfComponent implements OnInit {
@HostBinding('@routerAnimate') routerAnimateState;
- constructor() { }
+ public sourceNameList: Array<any> = ['---auto---'];
+ public namecurrentPage: number = 1;
+ public namepageSize: number = 10;
+ public sourceName: string = '';
+ public vnfsdataTotal: number;
+
+ constructor(
+ private myhttp: MyhttpService) { }
ngOnInit() {
- let _this = this;
- setTimeout(function(){
- // 在路由切换时加载图片造成动画卡顿,先完成动画再加载图片
- _this.vnfsData = [
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"},
- {name:"aaa",text:"oahgieango"}
- ];
- _this.emptys = new Array(15-_this.vnfsData.length);
- },300)
+ this.getqueryAllSourceNames();
+ this.getperformanceSsourceNames()
}
- // 筛选框(下拉框)
- sourceNameList = ['aaaa','bbbb','cccc','dddddDDDDDDDDDDDDDDD'];
+
sourceNameSelected = this.sourceNameList[0];
- ReportingEntityNameList = ['aaaa','bbbb','cccc','ddddd'];
- ReportingEntityNameSelected = this.ReportingEntityNameList[0];
- choseSourceName(item){
- console.log(item);
- this.sourceNameSelected = item;
+ getqueryAllSourceNames() {
+ this.myhttp.getqueryAllSourceNames().subscribe((data) => {
+ // console.log(data)
+ for (let i = 0; i < data.length; i++) {
+ this.sourceNameList.push(data[i]);
+ }
+ this.sourceNameSelected = this.sourceNameList[0];
+ })
}
- choseReportingEntityName(item){
+ choseSourceName(item) {
console.log(item);
- this.ReportingEntityNameSelected = item;
+ this.sourceNameSelected = item;
+ if (item == "---auto---") {
+ this.sourceName = '';
+ } else {
+ this.sourceName = item;
+ }
}
- submit(){
-
+ getperformanceSsourceNames() {
+ this.myhttp.getperformanceSsourceNames(this.namecurrentPage, this.namepageSize, this.sourceName).subscribe((data) => {
+ this.vnfsData = data.vnfdata;
+ this.vnfsdataTotal = data.total;
+ if (Number.isInteger(this.vnfsData.length / 5)) {
+ this.emptys = new Array(0);
+ } else {
+ this.emptys = new Array(5 - this.vnfsData.length % 5);
+ }
+ // console.log(this.emptys);
+ })
}
- // vnfs数据
+ // vnfs data
vnfsData = [];
- emptys = []; //补空盒子用
- // 分页
- current = 1; //当前页码
+ emptys = []; //Fill the box
- //详情页标题显示
+ //Detail page title display
graphicshow = false;
detailshow = false;
- // 显示隐藏动画
+ // Show hidden animation
state = "show";
state2 = "hide";
state3 = "hide";
@@ -69,24 +90,33 @@ export class PerformanceVnfComponent implements OnInit {
this.graphicshow = false;
this.detailshow = false;
}
- graphicShow() {
+ // Selected name
+
+ graphicShow(item) {
this.state = 'hide';
this.state2 = 'show';
this.state3 = 'hide';
this.graphicshow = true;
this.detailshow = false;
}
- // 选中id
- detailId:number;
- detailShow(prems) {
+ vnfname: number;
+ graphicShow2(item){
+ this.state = 'hide';
+ this.state2 = 'show';
+ this.state3 = 'hide';
+ this.graphicshow = true;
+ this.detailshow = false;
+ this.vnfname = item.name;
+ }
+ // Selected id
+ detailId: number;
+ detailShow(item) {
this.state = 'hide';
this.state2 = 'hide';
this.state3 = 'show';
this.graphicshow = true;
this.detailshow = true;
- console.log(prems);
- this.detailId = prems.id;
+ this.detailId = item.id;
}
-
}