ing

src/app/commons/component/sidebar/menu-element.ts

@@ -66,7 +66,7 @@ export const menus = [
     {
         'name': 'App.Alert',
         'icon': 'warning',
-        'link': '',
+        'link': '/alert',
         'open': true,
     },
     {

src/app/pages/alert/alert-page-routing.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AlertPageComponent } from './alert-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AlertPageComponent,
+    children: [
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AlertPageRoutingModule { }

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

@@ -0,0 +1 @@
+<div>alert page</div>

src/app/pages/alert/alert-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertPageComponent } from './alert-page.component';
+
+describe('AlertPageComponent', () => {
+  let component: AlertPageComponent;
+  let fixture: ComponentFixture<AlertPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlertPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'of-pages-alert',
+  templateUrl: './alert-page.component.html',
+  styleUrls: ['./alert-page.component.scss']
+})
+export class AlertPageComponent implements OnInit {
+
+
+  constructor(private route: ActivatedRoute, private router: Router) {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/alert/alert-page.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AlertPageRoutingModule } from './alert-page-routing.module';
+import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { AlertPageComponent } from './alert-page.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AlertPageRoutingModule,
+    MaterialModule,
+    // NotificationModule,
+  ],
+  declarations: [
+    AlertPageComponent,
+  ]
+})
+export class AlertPageModule { }

src/app/pages/pages-routing.module.ts

@@ -21,6 +21,7 @@ const routes: Routes = [
       { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' },
       { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' },
       { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' },
+      { path: 'alert', loadChildren: './alert/alert-page.module#AlertPageModule' },
       { path: 'settings/member', loadChildren: './settings/member/member-page.module#MemberPageModule' },
     ]
   }

src/packages/probe/component/detail/detail.component.html

@@ -1,10 +1,10 @@
-<!-- <div><h3>{{probeAlias}}</h3></div>
+<div><h3>{{probe.displayName}}</h3></div>
 
 <div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
-  <mat-card [style.padding]="'15px 50px'">Status: UP</mat-card>
+  <mat-card [style.padding]="'15px 50px'">Status: {{probe.status.name}}</mat-card>
   <div>
-    <button *ngIf="!isUpState" mat-raised-button color="primary" (click)="handleStartStop()">Start</button>
-    <button *ngIf="isUpState" mat-raised-button color="accent" (click)="handleStartStop()">Stop</button>
+    <button *ngIf="probe.status.id === 1" mat-raised-button color="primary" (click)="handleStartStop()">Start</button>
+    <button *ngIf="probe.status.id === 2" mat-raised-button color="accent" (click)="handleStartStop()">Stop</button>
     
     <button mat-raised-button color="warn" (click)="handleRemove()">Remove</button>
   </div>
@@ -20,5 +20,4 @@
   <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
     <of-info-table [title]="'Title3'" [data]="probeInfo"></of-info-table>
   </mat-card>
-</div> -->
-<div>aaa</div>
+</div>

src/packages/probe/component/detail/detail.component.ts

@@ -15,84 +15,27 @@ import { RPCError } from 'packages/core/rpc/error';
 })
 export class DetailComponent implements OnInit, AfterContentInit {
 
-  probe$ = this.store.pipe(select(DetailSelector.select('probe')));
+  probe$ = this.detailStore.pipe(select(DetailSelector.select('probe')));
   probe: Probe = null;
+  networkInfo = null;
+  deviceInfo = null;
+  probeInfo = null;
 
-  probeAlias = '';
-  probeId = undefined;
-  isUpState = false;
-
-  networkInfo = [
-    {
-      key: 'IP',
-      value: '192.168.1.1'
-    },
-    {
-      key: 'NIC',
-      value: 'enps30'
-    },
-    {
-      key: 'Targets',
-      value: '12'
-    },
-  ];
-
-  deviceInfo = [
-    {
-      key: 'OS',
-      value: 'Linux'
-    },
-    {
-      key: 'CPU',
-      value: 'intel7...'
-    },
-    {
-      key: 'Memory',
-      value: '16GB'
-    },
-    {
-      key: '...',
-      value: '...'
-    },
-  ];
-
-  probeInfo = [
-    {
-      key: 'Authorized at',
-      value: String(new Date())
-    },
-    {
-      key: 'Authorized by',
-      value: 'insanity'
-    },
-    {
-      key: 'Installed at',
-      value: String(new Date())
-    },
-  ];
 
   constructor(
     private route: ActivatedRoute,
     private router: Router,
     public dialog: MatDialog,
-    private store: Store<DetailStore.State>
+    private detailStore: Store<DetailStore.State>
   ) { }
 
   ngOnInit() {
-    this.probeId = this.route.snapshot.paramMap.get('id');
-    this.probeAlias = 'Probe Alias 블라블라';
-  }
-
-  ngAfterContentInit() {
-    this.store.dispatch(
-      new DetailStore.Read(
-        { id: this.probeId }
-      )
-    );
     this.probe$.subscribe(
       (probe: Probe) => {
-        console.log(probe);
-        this.probe = probe;
+        if (probe != null) {
+          this.probe = probe;
+          this.arrangeInfo();
+        }
       },
       (error: RPCError) => {
         console.log(error.message);
@@ -100,8 +43,66 @@ export class DetailComponent implements OnInit, AfterContentInit {
     );
   }
 
+  ngAfterContentInit() {
+    const probeId = this.route.snapshot.paramMap.get('id');
+    this.detailStore.dispatch(
+      new DetailStore.Read(
+        { id: probeId }
+      )
+    );
+  }
+
+  arrangeInfo() {
+    this.networkInfo = [
+      {
+        key: 'IP',
+        value: '192.168.1.1'
+      },
+      {
+        key: 'NIC',
+        value: 'enps30'
+      },
+      {
+        key: 'Targets',
+        value: '12'
+      },
+    ];
+    this.deviceInfo = [
+      {
+        key: 'OS',
+        value: 'Linux'
+      },
+      {
+        key: 'CPU',
+        value: 'intel7...'
+      },
+      {
+        key: 'Memory',
+        value: '16GB'
+      },
+      {
+        key: '...',
+        value: '...'
+      },
+    ];
+    this.probeInfo = [
+      {
+        key: 'Authorized at',
+        value: String(new Date())
+      },
+      {
+        key: 'Authorized by',
+        value: 'insanity'
+      },
+      {
+        key: 'Installed at',
+        value: String(new Date())
+      },
+    ];
+  }
+
   handleStartStop() {
-    this.isUpState = !this.isUpState;
+    // this.isUpState = !this.isUpState;
   }
 
   handleRemove() {

src/packages/probe/service/probe.service.ts

@@ -24,9 +24,6 @@ export class ProbeService {
   }
 
   public read(id: string): Observable<Probe> {
-    const param = {
-      id: id,
-    };
-    return this.rpcClient.call<Probe>('ProbeService.read', param);
+    return this.rpcClient.call<Probe>('ProbeService.read', id);
   }
 }