probe..

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

@@ -1,4 +1,4 @@
-<div>{{probeId}}</div>
+<div><h3>{{probeAlias}}</h3></div>
 
 <div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between center">
   <mat-card>Status: UP</mat-card>
@@ -10,7 +10,7 @@
   </div>
 </div>
 
-<div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center">
+<div fxLayout="row" fxLayoutWrap fxLayoutGap="10px" fxLayoutAlign="center" [style.margin]="'20px'">
   <mat-card fxFlex="30%" fxFlex.lt-sm="100" fxFlex.sm="30">
     <of-info-table [title]="'Title1'" [data]="data"></of-info-table>
   </mat-card>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { RemoveWarningComponent } from './remove-warning-dialog/remove-warning-dialog.component';
 
 @Component({
   selector: 'of-probe-detail',
@@ -9,6 +10,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 })
 export class DetailComponent implements OnInit {
 
+  probeAlias = '';
   probeId = undefined;
   isUpState = false;
 
@@ -38,6 +40,7 @@ export class DetailComponent implements OnInit {
 
   ngOnInit() {
     this.probeId = this.route.snapshot.paramMap.get('id');
+    this.probeAlias = 'Probe Alias 블라블라';
   }
 
   handleStartStop() {
@@ -45,7 +48,15 @@ export class DetailComponent implements OnInit {
   }
 
   handleRemove() {
-    console.log('remove');
+    const dialogRef = this.dialog.open(RemoveWarningComponent, {
+      width: '250px',
+      data: {  }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result);
+      // 삭제 후 list로 back
+    });
   }
 }
 

src/packages/probe/component/detail/remove-warning-dialog/remove-warning-dialog.component.html

@@ -0,0 +1,5 @@
+<div>레알루다가? 다 지워질건데?</div>
+<div style="margin-top: 50px">
+  <button mat-raised-button color="primary" (click)="onClick(false)">Cancel</button>
+  <button mat-raised-button color="accent" (click)="onClick(true)">Remove</button>
+</div>

src/packages/probe/component/detail/remove-warning-dialog/remove-warning-dialog.component.spec.ts

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

src/packages/probe/component/detail/remove-warning-dialog/remove-warning-dialog.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { MatDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'of-remove-warning-dialog',
+  templateUrl: './remove-warning-dialog.component.html',
+  styleUrls: ['./remove-warning-dialog.component.scss']
+})
+export class RemoveWarningComponent implements OnInit {
+
+  constructor(
+    public dialogRef: MatDialogRef<RemoveWarningComponent>
+  ) { }
+
+  ngOnInit() {
+  }
+
+  onClick(res: boolean) {
+    this.dialogRef.close(res);
+  }
+}

src/packages/probe/component/index.ts

@@ -1,9 +1,11 @@
 import { DetailComponent } from './detail/detail.component';
 import { ListComponent } from './list/list.component';
 import { DownloadComponent } from './download/download.component';
+import { RemoveWarningComponent } from './detail/remove-warning-dialog/remove-warning-dialog.component';
 
 export const COMPONENTS = [
   ListComponent,
   DetailComponent,
   DownloadComponent,
+  RemoveWarningComponent
 ];

src/packages/probe/component/list/list.component.ts

@@ -3,7 +3,9 @@ import { MatTableDataSource, MatSort } from '@angular/material';
 import { AfterContentInit } from '@angular/core/src/metadata/lifecycle_hooks';
 import { Router } from '@angular/router';
 import { Probe } from '../../model';
-
+import { Store } from '@ngrx/store';
+import * as ListStore from '../../store/list';
+import { Domain } from '../../../domain/model';
 
 @Component({
   selector: 'of-probe-list',
@@ -16,11 +18,17 @@ export class ListComponent implements OnInit, AfterContentInit {
   dataSource: MatTableDataSource<Probe>;
   @ViewChild(MatSort) sort: MatSort;
 
-  /**
-   * Set the sort after the view init since this component will
-   * be able to query its view for the initialized sort.
-   */
+  constructor(
+    private router: Router,
+    private store: Store<ListStore.State>
+  ) { }
+
   ngAfterContentInit() {
+    // const domain: Domain = {
+    //   id: 1,
+    // };
+    // this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+
     // temporary data
     const data: Probe[] = new Array();
     for (let i = 0; i < 10; i++) {
@@ -51,8 +59,6 @@ export class ListComponent implements OnInit, AfterContentInit {
     this.dataSource.sort = this.sort;
   }
 
-  constructor(private router: Router) { }
-
   ngOnInit() {
   }
 

src/packages/probe/probe.module.ts

@@ -6,6 +6,7 @@ import { InfoTableModule } from 'app/commons/component/info-table/info-table.mod
 import { COMPONENTS } from './component';
 import { ProbeStoreModule } from './probe-store.module';
 import { SERVICES } from './service';
+import { RemoveWarningComponent } from './component/detail/remove-warning-dialog/remove-warning-dialog.component';
 
 @NgModule({
   imports: [
@@ -23,5 +24,8 @@ import { SERVICES } from './service';
   providers: [
     SERVICES,
   ],
+  entryComponents: [
+    RemoveWarningComponent,
+  ]
 })
 export class ProbeModule { }