overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added alert page

Browse Source
This commit is contained in:
snoop 2018-04-19 17:55:08 +09:00
parent c205f405d6
commit 5c97f26763
3 changed files with 169 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/pages/alert/alert-page.component.html
View File

@ -3,7 +3,62 @@
<div class="ui-g-12">
<div class="card no-margin">
<h1>Alert</h1>
<div class="ui-g form-group">
<div class="ui-g-12 ui-md-2">
<div class="ui-g">
<div class="ui-g-6">All</div>
<div class="ui-g-6">13</div>
</div>
<div class="ui-g" [ngStyle]="{'background-color': bgMap.get('Down')}">
<div class="ui-g-6">Down</div>
<div class="ui-g-6">3</div>
</div>
<div class="ui-g" [ngStyle]="{'background-color': bgMap.get('Warn')}">
<div class="ui-g-6">Warn</div>
<div class="ui-g-6">5</div>
</div>
<div class="ui-g" [ngStyle]="{'background-color': bgMap.get('Error')}">
<div class="ui-g-6">Error</div>
<div class="ui-g-6">5</div>
</div>
</div>
</div>
<div class="ui-g form-group" [style]="{width: '700px'}">
<p-dataList [value]="metricAlerts" [paginator]="true" [rows]="5" styleClass="cars-datalist">
<ng-template let-alert pTemplate="alert">
<div [ngStyle]="{'border-bottom': '1px solid #bdbdbd','background-color': bgMap.get(alert.status)}" class="clearfix car-item">
<div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.created}}</div>
<div class="car-details" style="display:inline-block;vertical-align:middle">
{{alert.msg}}
</div>
<div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.status}}</div>
</div>
</ng-template>
</p-dataList>
&nbsp;
<p-dataList [value]="systemAlerts" [paginator]="true" [rows]="5" styleClass="cars-datalist">
<ng-template let-alert pTemplate="alert">
<div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
<div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.created}}</div>
<div class="car-details" style="display:inline-block;vertical-align:middle">
{{alert.msg}}
</div>
<div width="48" style="display:inline-block;margin:24px;vertical-align:middle">{{alert.status}}</div>
</div>
</ng-template>
</p-dataList>
</div>
</div>
</div>
</div>
</div>

111
src/app/pages/alert/alert-page.component.ts
View File

@ -1,16 +1,127 @@
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
export interface Alert {
created: string;
msg: string;
}
export interface MetricAlert extends Alert {
status: string;
}
export interface SystemAlert extends Alert {
status?: string; // test
}
@Component({
selector: 'of-pages-alert',
templateUrl: './alert-page.component.html',
})
export class AlertPageComponent implements OnInit {
metricAlerts: MetricAlert[] = exampleAlerts;
systemAlerts: SystemAlert[] = exampleSystemAlerts;
bgMap: Map<string, string> = new Map();
constructor(private route: ActivatedRoute, private router: Router) {
}
ngOnInit() {
this.bgMap.set('Warn', '#ffc107');
this.bgMap.set('Error', '#f30000');
this.bgMap.set('Down', '#607D8B');
}
}
const exampleSystemAlerts = [
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
{
created: '2018-04-19',
msg: 'Geek 님이 새로운 Probe를 설치했습니다.',
},
];
const exampleAlerts = [
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Warn'
},
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Down'
},
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Error'
},
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Warn'
},
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Warn'
},
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Warn'
},
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Warn'
},
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Warn'
},
{
created: '2018-04-19',
msg: 'Host 192.168.1.106 disk < 5%',
status: 'Warn'
}
];

3
src/app/pages/alert/alert-page.module.ts
View File

@ -4,11 +4,14 @@ import { CommonModule } from '@angular/common';
import { AlertPageRoutingModule } from './alert-page-routing.module';
import { AlertPageComponent } from './alert-page.component';
import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
@NgModule({
imports: [
CommonModule,
AlertPageRoutingModule,
// NotificationModule,
PrimeNGModules
],
declarations: [
AlertPageComponent,