split alert component

src/app/pages/alert/alert-page.component.html

@@ -4,55 +4,7 @@
             <div class="card no-margin">
                 <h1>Alert</h1>
 
-                <div class="ui-g form-group">
+                <of-alert-list></of-alert-list>
-                    <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>

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<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'
-  }
-];

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,

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 { }

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 { }

src/packages/alert/alert.constant.ts

@@ -0,0 +1,3 @@
+export const MODULE = {
+    name: 'alert'
+  };

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 {
+}

src/packages/alert/component/index.ts

@@ -0,0 +1,5 @@
+import { ListComponent } from './list/list.component';
+
+export const COMPONENTS = [
+    ListComponent,
+];

src/packages/alert/component/list/list.component.html

@@ -0,0 +1,49 @@
+<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>

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<ListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<string, string> = 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'
+  }
+];

src/packages/alert/model/Alert.ts

@@ -0,0 +1,6 @@
+
+export interface Alert {
+    created: string;
+    msg: string;
+
+  }

src/packages/alert/model/AlertMetric.ts

@@ -0,0 +1,5 @@
+import {Alert} from './Alert';
+
+export interface AlertMetric extends Alert {
+    status: string;
+  }

src/packages/alert/model/AlertSystem.ts

@@ -0,0 +1,6 @@
+import {Alert} from './Alert';
+
+
+export interface AlertSystem extends Alert {
+    status?: string; // test
+  }

src/packages/alert/model/index.ts

@@ -0,0 +1,3 @@
+export * from './Alert';
+export * from './AlertMetric';
+export * from './AlertSystem';