From f4a35f288fc361350c816bc0655a39e411b212a8 Mon Sep 17 00:00:00 2001 From: snoop Date: Thu, 19 Apr 2018 18:39:15 +0900 Subject: [PATCH] split alert component --- src/app/pages/alert/alert-page.component.html | 50 +------- src/app/pages/alert/alert-page.component.ts | 109 +---------------- src/app/pages/alert/alert-page.module.ts | 4 +- src/packages/alert/alert-logger.module.ts | 10 ++ src/packages/alert/alert-rpc.module.ts | 0 src/packages/alert/alert-store.module.ts | 19 +++ src/packages/alert/alert.constant.ts | 3 + src/packages/alert/alert.module.ts | 35 ++++++ src/packages/alert/component/index.ts | 5 + .../alert/component/list/list.component.css | 0 .../alert/component/list/list.component.html | 49 ++++++++ .../component/list/list.component.spec.ts | 25 ++++ .../alert/component/list/list.component.ts | 115 ++++++++++++++++++ src/packages/alert/model/Alert.ts | 6 + src/packages/alert/model/AlertMetric.ts | 5 + src/packages/alert/model/AlertSystem.ts | 6 + src/packages/alert/model/index.ts | 3 + src/packages/alert/service/index.ts | 0 src/packages/alert/store/index.ts | 0 src/packages/alert/subscriber/index.ts | 0 20 files changed, 286 insertions(+), 158 deletions(-) create mode 100644 src/packages/alert/alert-logger.module.ts create mode 100644 src/packages/alert/alert-rpc.module.ts create mode 100644 src/packages/alert/alert-store.module.ts create mode 100644 src/packages/alert/alert.constant.ts create mode 100644 src/packages/alert/alert.module.ts create mode 100644 src/packages/alert/component/index.ts create mode 100644 src/packages/alert/component/list/list.component.css create mode 100644 src/packages/alert/component/list/list.component.html create mode 100644 src/packages/alert/component/list/list.component.spec.ts create mode 100644 src/packages/alert/component/list/list.component.ts create mode 100644 src/packages/alert/model/Alert.ts create mode 100644 src/packages/alert/model/AlertMetric.ts create mode 100644 src/packages/alert/model/AlertSystem.ts create mode 100644 src/packages/alert/model/index.ts create mode 100644 src/packages/alert/service/index.ts create mode 100644 src/packages/alert/store/index.ts create mode 100644 src/packages/alert/subscriber/index.ts diff --git a/src/app/pages/alert/alert-page.component.html b/src/app/pages/alert/alert-page.component.html index da9b447..9ca6ed3 100644 --- a/src/app/pages/alert/alert-page.component.html +++ b/src/app/pages/alert/alert-page.component.html @@ -4,55 +4,7 @@

Alert

-
-
-
-
All
-
13
-
-
-
Down
-
3
-
-
-
Warn
-
5
-
-
-
Error
-
5
-
-
-
- -
- - -
- -
{{alert.created}}
-
- {{alert.msg}} -
-
{{alert.status}}
-
- - - -   - - - -
-
{{alert.created}}
-
- {{alert.msg}} -
-
{{alert.status}}
-
- - -
+
diff --git a/src/app/pages/alert/alert-page.component.ts b/src/app/pages/alert/alert-page.component.ts index c962163..8403ea3 100644 --- a/src/app/pages/alert/alert-page.component.ts +++ b/src/app/pages/alert/alert-page.component.ts @@ -2,126 +2,19 @@ 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 = 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' - } -]; diff --git a/src/app/pages/alert/alert-page.module.ts b/src/app/pages/alert/alert-page.module.ts index 1a0cd63..e930def 100644 --- a/src/app/pages/alert/alert-page.module.ts +++ b/src/app/pages/alert/alert-page.module.ts @@ -5,13 +5,15 @@ import { AlertPageRoutingModule } from './alert-page-routing.module'; import { AlertPageComponent } from './alert-page.component'; import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module'; +import { AlertModule } from 'packages/alert/alert.module'; @NgModule({ imports: [ CommonModule, AlertPageRoutingModule, // NotificationModule, - PrimeNGModules + PrimeNGModules, + AlertModule ], declarations: [ AlertPageComponent, diff --git a/src/packages/alert/alert-logger.module.ts b/src/packages/alert/alert-logger.module.ts new file mode 100644 index 0000000..a8267ee --- /dev/null +++ b/src/packages/alert/alert-logger.module.ts @@ -0,0 +1,10 @@ +import { NgModule } from '@angular/core'; +import { LoggerModule } from '@loafer/ng-logger'; + + +@NgModule({ + imports: [ + LoggerModule.forFeature({}), + ], +}) +export class AlertLoggerModule { } diff --git a/src/packages/alert/alert-rpc.module.ts b/src/packages/alert/alert-rpc.module.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/packages/alert/alert-store.module.ts b/src/packages/alert/alert-store.module.ts new file mode 100644 index 0000000..9f698df --- /dev/null +++ b/src/packages/alert/alert-store.module.ts @@ -0,0 +1,19 @@ +// import { NgModule } from '@angular/core'; +// import { StoreModule } from '@ngrx/store'; + +// import { EffectsModule } from '@ngrx/effects'; + +// import { +// REDUCERS, +// EFFECTS, +// } from './store'; + +// import { MODULE } from './alert.constant'; + +// @NgModule({ +// imports: [ +// StoreModule.forFeature(MODULE.name, REDUCERS), +// EffectsModule.forFeature(EFFECTS), +// ], +// }) +// export class DiscoveryStoreModule { } diff --git a/src/packages/alert/alert.constant.ts b/src/packages/alert/alert.constant.ts new file mode 100644 index 0000000..ff1301f --- /dev/null +++ b/src/packages/alert/alert.constant.ts @@ -0,0 +1,3 @@ +export const MODULE = { + name: 'alert' + }; diff --git a/src/packages/alert/alert.module.ts b/src/packages/alert/alert.module.ts new file mode 100644 index 0000000..7b33b6f --- /dev/null +++ b/src/packages/alert/alert.module.ts @@ -0,0 +1,35 @@ +import { NgModule, Inject } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + + +// import { InputChipModule } from 'packages/commons/component/input-chip/input-chip.module'; + +// import { DiscoveryStoreModule } from './discovery-store.module'; +// import { DiscoveryRPCModule } from './discovery-rpc.module'; +import { AlertLoggerModule } from './alert-logger.module'; + +import { COMPONENTS } from './component'; +// import { SERVICES } from './service'; +import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module'; + +@NgModule({ + imports: [ + CommonModule, + // InputChipModule, + FormsModule, + PrimeNGModules, + AlertLoggerModule, + ], + declarations: [ + COMPONENTS + ], + exports: [ + COMPONENTS, + ], + providers: [ + // SERVICES, + ], +}) +export class AlertModule { +} diff --git a/src/packages/alert/component/index.ts b/src/packages/alert/component/index.ts new file mode 100644 index 0000000..bd78b54 --- /dev/null +++ b/src/packages/alert/component/index.ts @@ -0,0 +1,5 @@ +import { ListComponent } from './list/list.component'; + +export const COMPONENTS = [ + ListComponent, +]; diff --git a/src/packages/alert/component/list/list.component.css b/src/packages/alert/component/list/list.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/packages/alert/component/list/list.component.html b/src/packages/alert/component/list/list.component.html new file mode 100644 index 0000000..df157c0 --- /dev/null +++ b/src/packages/alert/component/list/list.component.html @@ -0,0 +1,49 @@ +
+
+
+
All
+
13
+
+
+
Down
+
3
+
+
+
Warn
+
5
+
+
+
Error
+
5
+
+
+
+ +
+ + +
+ +
{{alert.created}}
+
+ {{alert.msg}} +
+
{{alert.status}}
+
+ + + +   + + + +
+
{{alert.created}}
+
+ {{alert.msg}} +
+
{{alert.status}}
+
+ + +
\ No newline at end of file diff --git a/src/packages/alert/component/list/list.component.spec.ts b/src/packages/alert/component/list/list.component.spec.ts new file mode 100644 index 0000000..beacd15 --- /dev/null +++ b/src/packages/alert/component/list/list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ListComponent } from './list.component'; + +describe('ListComponent', () => { + let component: ListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/packages/alert/component/list/list.component.ts b/src/packages/alert/component/list/list.component.ts new file mode 100644 index 0000000..e821708 --- /dev/null +++ b/src/packages/alert/component/list/list.component.ts @@ -0,0 +1,115 @@ +import { Component, OnInit } from '@angular/core'; +import { AlertSystem, AlertMetric } from '../../model'; + +@Component({ + selector: 'of-alert-list', + templateUrl: './list.component.html', + styleUrls: ['./list.component.css'] +}) +export class ListComponent implements OnInit { + + metricAlerts: AlertMetric[] = exampleAlerts; + systemAlerts: AlertSystem[] = exampleSystemAlerts; + + bgMap: Map = new Map(); + + + constructor() { } + + 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' + } +]; diff --git a/src/packages/alert/model/Alert.ts b/src/packages/alert/model/Alert.ts new file mode 100644 index 0000000..fdd87c1 --- /dev/null +++ b/src/packages/alert/model/Alert.ts @@ -0,0 +1,6 @@ + +export interface Alert { + created: string; + msg: string; + + } diff --git a/src/packages/alert/model/AlertMetric.ts b/src/packages/alert/model/AlertMetric.ts new file mode 100644 index 0000000..0b6925f --- /dev/null +++ b/src/packages/alert/model/AlertMetric.ts @@ -0,0 +1,5 @@ +import {Alert} from './Alert'; + +export interface AlertMetric extends Alert { + status: string; + } diff --git a/src/packages/alert/model/AlertSystem.ts b/src/packages/alert/model/AlertSystem.ts new file mode 100644 index 0000000..933e283 --- /dev/null +++ b/src/packages/alert/model/AlertSystem.ts @@ -0,0 +1,6 @@ +import {Alert} from './Alert'; + + +export interface AlertSystem extends Alert { + status?: string; // test + } diff --git a/src/packages/alert/model/index.ts b/src/packages/alert/model/index.ts new file mode 100644 index 0000000..b242f4e --- /dev/null +++ b/src/packages/alert/model/index.ts @@ -0,0 +1,3 @@ +export * from './Alert'; +export * from './AlertMetric'; +export * from './AlertSystem'; diff --git a/src/packages/alert/service/index.ts b/src/packages/alert/service/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/packages/alert/store/index.ts b/src/packages/alert/store/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/packages/alert/subscriber/index.ts b/src/packages/alert/subscriber/index.ts new file mode 100644 index 0000000..e69de29