summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/alarm
diff options
context:
space:
mode:
Diffstat (limited to 'usecaseui-portal/src/app/alarm')
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.html28
-rw-r--r--usecaseui-portal/src/app/alarm/alarm.component.ts331
2 files changed, 208 insertions, 151 deletions
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.html b/usecaseui-portal/src/app/alarm/alarm.component.html
index 378cebc2..7fbbc039 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.html
+++ b/usecaseui-portal/src/app/alarm/alarm.component.html
@@ -51,24 +51,32 @@
<span>Report Time: </span>
<nz-range-picker [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
- <!-- <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button> -->
- <button class="search" nz-button [nzType]="'primary'"><i class="anticon anticon-search"></i><span>Search</span></button>
+ <button class="search" nz-button [nzType]="'primary'" (click)="getAlarmFormData()"><i class="anticon anticon-search"></i><span>Search</span></button>
</div>
</div>
<div class="content" [@showHideAnimate]="state">
<div class="title">
<ul>
- <li><h5>All</h5> <p>{{alarmList.all }}</p></li>
- <li><h5>Closed</h5> <p>{{alarmList.closed }}</p></li>
- <li><h5>Active</h5> <p>{{alarmList.activeNum }}</p></li>
+ <li>
+ <h5>All</h5>
+ <p>{{alarmList.all }}</p>
+ </li>
+ <li>
+ <h5>Closed</h5>
+ <p>{{alarmList.closed }}</p>
+ </li>
+ <li>
+ <h5>Active</h5>
+ <p>{{alarmList.activeNum }}</p>
+ </li>
</ul>
</div>
<div class="chart">
<h3>Alarm Chart</h3>
<nz-radio-group [(ngModel)]="size">
- <label nz-radio-button nzValue="day"> day </label>
- <label nz-radio-button nzValue="month">month</label>
- </nz-radio-group>
+ <label nz-radio-button nzValue="day" (click)="day()"> day </label>
+ <label nz-radio-button nzValue="month" (click)="month()">month</label>
+ </nz-radio-group>
<div class="AlarmChart" [ngClass]="{'alarmChart-active':alarmShow}">
<app-line [initData]="alarmChartInit" [chartData]="alarmChartData"></app-line>
</div>
@@ -96,12 +104,12 @@
<td>{{item.specificProblem}}</td>
<td>{{item.sequence}}</td>
<td>{{item.status}}</td>
- <td class="action"><a (click)="detailShow()"><i class="details"></i></a></td>
+ <td class="action"><a (click)="detailShow(item)"><i class="details"></i></a></td>
</tr>
</tbody>
</nz-table>
</div>
</div>
<div [@showHideAnimate]="state2">
-<app-details></app-details>
+<app-details [detailId]="detailId"></app-details>
</div> \ No newline at end of file
diff --git a/usecaseui-portal/src/app/alarm/alarm.component.ts b/usecaseui-portal/src/app/alarm/alarm.component.ts
index d4372113..3f563b6e 100644
--- a/usecaseui-portal/src/app/alarm/alarm.component.ts
+++ b/usecaseui-portal/src/app/alarm/alarm.component.ts
@@ -13,108 +13,188 @@
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 { Component, OnInit, Input, Output, EventEmitter, HostBinding, Pipe, PipeTransform } from '@angular/core';
import { MyhttpService } from '../myhttp.service';
-import * as addDays from 'date-fns/add_days';
import { showHideAnimate, slideToRight } from '../animates';
-
+import { DatePipe } from "@angular/common"
@Component({
selector: 'app-alarm',
templateUrl: './alarm.component.html',
styleUrls: ['./alarm.component.less'],
animations: [
showHideAnimate, slideToRight
- ]
+ ],
+ providers: [DatePipe]
})
export class AlarmComponent implements OnInit {
size = 'day';
@HostBinding('@routerAnimate') routerAnimateState; //Routing animation
- public currentPage:number=1;
- public pageSize:number=5;
- public sourceName:string='';
- public priority:string ='';
- public startTime:string ='';
- public endTime:string ='';
- public vfStatus:string ='';
+ public currentPage: number = 1;
+ public pageSize: number = 5;
+ public sourceName: string = '';
+ public priority: string = '';
+ public startTime: string = '';
+ public endTime: string = '';
+ public vfStatus: string = '';
+ public sourceNameList:Array<any> =['---auto---'];
list: any;
- sourcenames:any;
+ sourcenames: any;
constructor(
- private myhttp:MyhttpService) { }
- ngOnInit() {
- // this.getAlarmFormData();
- // this. getSourceNames();
- // this.getstatuscount();
- }
+ private datePipe: DatePipe,
+ private myhttp: MyhttpService) { }
+ ngOnInit() {
+ this.getAlarmFormData();
+ this.getSourceNames();
+ // this.getstatuscount();
+ }
// Filter box
- sourceNameList = [];
- sourceNameSelected = this.sourceNameList;
+ sourceNameSelected = this.sourceNameList[0];
- priorityList = ['---auto---','Critical','Major','Minor','Warning'];
+ priorityList = ['---auto---', 'Critical', 'Major', 'Minor', 'Warning'];
prioritySelected = this.priorityList[0];
-
- statusList = ['---auto---','active','Close'];
+
+ statusList = ['---auto---', 'active', 'Close'];
statusSelected = this.statusList[0];
-
- choseSourceName(item){
- console.log(item,'item1');
+
+ choseSourceName(item) {
+ if(item == "---auto---"){
+ this.sourceName = '';
+ }else{
+ this.sourceName = item;
+ }
this.sourceNameSelected = item;
- return this.sourceName = item;
+
}
- chosePriority(item){
- console.log(item);
+ chosePriority(item) {
this.prioritySelected = item;
- return this.priority = item;
+ if(item == "---auto---"){
+ this.priority = '';
+ }else{
+ this.priority = item;
+ }
}
- choseStatus(item){
- console.log(item);
+ choseStatus(item) {
this.statusSelected = item;
- return this.vfStatus = item;
+ if(item == "---auto---"){
+ this.vfStatus = '';
+ }else{
+ this.vfStatus = item;
+ }
+ }
+ getSourceNames() {
+ this.myhttp.getSourceNames().subscribe((data) => {
+ for(let i=0;i<data.length;i++){
+ this.sourceNameList.push(data[i]);
+ }
+ this.sourceNameSelected = this.sourceNameList[0];
+ })
}
- // getSourceNames(){
- // this.myhttp.getSourceNames().subscribe((data)=>{
- // this.sourceNameList=data;
- // console.log(data,'datass');
- // })
- // }
// Date screening
- dateRange = [ addDays(new Date(), -30), new Date() ];
+ dateRange = [(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){
+
+ sort(e) {
}
// total
alarmList = {
- all:200,
- closed:0,
- activeNum:0
+ all: 200,
+ closed: 0,
+ activeNum: 0
}
// total data
- // getstatuscount(){
- // this.myhttp.getstatuscount().subscribe((data)=>{
- // this.alarmList.activeNum = data[0];
- // this.alarmList.closed = data[1];
-
- // })
- // }
+ getstatuscount(){
+ this.myhttp.getstatuscount().subscribe((data)=>{
+ this.alarmList.activeNum = data[0];
+ this.alarmList.closed = data[1];
+ })
+ }
+ getAlarmFormData() {
+
+ this.myhttp.getAlarmFormData(this.currentPage, this.pageSize, this.sourceName, this.priority, this.startTime, this.endTime, this.vfStatus).subscribe((data) => {
+ this.list = data.alarms;
+ })
+ this.getAlarmChartData(event);
+ }
+ getAlarmChartData(event) {
+ let paramsObj = {
+ alarmSourceName: this.sourceName,
+ startTime: this.startTime,
+ endTime: this.endTime
+ }
+ this.myhttp.getHomePerformanceChartData(paramsObj)
+ .subscribe((data) => {
+ this.alarmChartData = {
+ series: [
+ { data: data.CPU },
+ { data: data.CPU },
+ { data: data.Memory }
+ ]
+ }
+ }, (err) => {
+ console.log(err);
+ })
+ }
+ // day alarmchartdata
+ day() {
+ let paramsObj = {
+ alarmSourceName: this.sourceName,
+ day:"day"
+ }
+ this.myhttp.getHomePerformanceChartData(paramsObj)
+ .subscribe((data) => {
+ this.alarmChartData = {
+ series: [
+ { data: data.CPU },
+ { data: data.CPU },
+ { data: data.Memory }
+ ]
+ }
+ }, (err) => {
+ console.log(err);
+ })
+ }
+ month() {
+ let paramsObj = {
+ alarmSourceName: this.sourceName,
+ day:"month"
+ }
+ this.myhttp.getHomePerformanceChartData(paramsObj)
+ .subscribe((data) => {
+ this.alarmChartData = {
+ series: [
+ { data: data.CPU },
+ { data: data.CPU },
+ { data: data.Memory }
+ ]
+ }
+ }, (err) => {
+ console.log(err);
+ })
+ }
//Line chart
alarmShow = false;
- alarmChartData:Object;
- alarmChartInit:Object = {
- height:380,
- option:{
+ alarmChartData: Object;
+ alarmChartInit: Object = {
+ height: 380,
+ option: {
legend: {
bottom: '0px',
data: ['All', 'Active', 'Closed']
},
+ tooltip: {
+ trigger: 'axis',
+ },
dataZoom: [
{
type: 'slider',
@@ -124,91 +204,78 @@ export class AlarmComponent implements OnInit {
height: 10,
end: 40
}
- ],
+ ],
series: [
{
- name: 'All',
- type: 'line',
- smooth: true,
- showSymbol: false,
- areaStyle: {
- opacity: 0.8
- },
- //timeframe_one
- data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65,38, 52, 64, 58, 69, 87, 76, 33, 64, 87,40, 45, 38, 52, 64, 58, 69, 87, 76,40, 45, 38, 52, 64, 58, 69, 87, 76],
- itemStyle: {
- color: "#526b75"
- },
- lineStyle: {
- width: 1,
- opacity: 0.5
- }
+ name: 'All',
+ type: 'line',
+ smooth: true,
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8
+ },
+ //timeframe_one
+ data: [40, 45, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 45, 76, 88, 56, 33, 76, 45, 65, 38, 52, 64, 58, 69, 87, 76, 33, 64, 87, 40, 45, 38, 52, 64, 58, 69, 87, 76, 40, 45, 38, 52, 64, 58, 69, 87, 76],
+ itemStyle: {
+ color: "#526b75"
+ },
+ lineStyle: {
+ width: 1,
+ opacity: 0.5
+ }
},
{
- name: 'Active',
- type: 'line',
- smooth: true,
- showSymbol: false,
- areaStyle: {
- opacity: 0.8
- },
- //timeframe_two
- data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12,32, 43, 23, 45, 63, 24, 54, 22],
- itemStyle: {
- color: "#fb6e6e"
- },
- lineStyle: {
- width: 1,
- opacity: 0.5
- }
+ name: 'Active',
+ type: 'line',
+ smooth: true,//将图变得平缓
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8
+ },
+ //timeframe_two
+ data: [32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12, 32, 43, 23, 45, 63, 24, 54, 22, 32, 42, 42, 22, 23, 43, 32, 34, 42, 33, 42, 12, 32, 43, 23, 45, 63, 24, 54, 22],
+ itemStyle: {
+ color: "#fb6e6e"
+ },
+ lineStyle: {
+ width: 1,
+ opacity: 0.5
+ }
},
{
- name: 'Closed',
- type: 'line',
- smooth: true,//
- showSymbol: false,
- areaStyle: {
- opacity: 0.8
- },
- //timeframe_two
- data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5,12, 23, 13, 25, 33, 14, 34, 12, 125],
- itemStyle: {
- color: "#3fa8eb"
- },
- lineStyle: {
- width: 1,
- opacity: 0.5
- }
+ name: 'Closed',
+ type: 'line',
+ smooth: true,//
+ showSymbol: false,
+ areaStyle: {
+ opacity: 0.8
+ },
+ //timeframe_two
+ data: [12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 12, 22, 12, 12, 13, 23, 12, 24, 22, 13, 22, 5, 12, 23, 13, 25, 33, 14, 34, 12, 125],
+ itemStyle: {
+ color: "#3fa8eb"
+ },
+ lineStyle: {
+ width: 1,
+ opacity: 0.5
+ }
}
]
}
};
- getAlarmChartData(){
- let paramsObj = {
- alarmSourceName:this.sourceNameSelected
- }
- this.myhttp.getHomePerformanceChartData(paramsObj)
- .subscribe((data)=>{
- this.alarmChartData = {
- series:[
- {data:data.CPU},
- {data:data.CPU},
- {data:data.Memory}
- ]
- }
- },(err)=>{
- console.log(err);
- })
- }
+
//Detail page title display
detailshow = false;
// Show hidden animation
state = "show";
state2 = "hide";
- detailShow() {
+ detailId: number;
+ detailShow(item) {
this.state = 'hide';
this.state2 = 'show';
this.detailshow = true;
+ // console.log(item);
+ this.detailId = item.eventId;
}
detailHide() {
this.state = 'show';
@@ -216,22 +283,4 @@ export class AlarmComponent implements OnInit {
this.detailshow = false;
}
-
-
- getSelects:Object = {
- countAll:0,
- countClose:0,
- countActive:0,
- eventNameList:[],
- sourceIdList:[],
- reportingEntityNameList:[],
- sourceNameList:[],
-};
- // getAlarmFormData(){
- // this.myhttp.getAlarmFormData(this.currentPage,this.pageSize,this.sourceName,this.priority,this.startTime,this.endTime,this.vfStatus).subscribe((data)=>{
- // this.list = data.alarms;
- // // console.log(data,'data');
- // })
- // }
-
}