merge

src/packages/commons/pipe/JSONParsePipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'ofJSONParse'
+})
+export class JSONParsePipe implements PipeTransform {
+  transform(value: string) {
+    return JSON.parse(value);
+  }
+}

src/packages/commons/pipe/pipe.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+
+import { JSONParsePipe } from './JSONParsePipe';
+
+export const PIPES = [JSONParsePipe];
+
+@NgModule({
+  declarations: PIPES,
+  exports: PIPES,
+})
+export class PipeModule {}

src/packages/noauth/component/list/list.component.html

@@ -11,16 +11,16 @@
         </tr>
     </ng-template>
     <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
-        <tr [pSelectableRow]="rowData.data" [pRowToggler]="rowData">
+        <tr [pSelectableRow]="rowData" [pRowToggler]="rowData">
             <td>
                 <a href="#">
                     <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                 </a>
             </td>
-            <td>{{rowData.data.tempProbeKey}}</td>
+            <td>{{rowData.tempProbeKey}}</td>
-            <td>{{rowData.meta.host.name}}</td>
+            <td>{{rowData.descriptions.host.name}}</td>
-            <td>{{rowData.meta.host.os}}</td>
+            <td>{{rowData.descriptions.host.os}}</td>
-            <td>{{rowData.data.createDate | date: 'dd/MM/yyyy'}}</td>
+            <td>{{rowData.createDate | date: 'dd/MM/yyyy'}}</td>
         </tr>
     </ng-template>
     <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
@@ -30,39 +30,39 @@
 
                     <div class="ui-g-12 ui-md-6">
                         <div class="ui-g-12">
-                            <b>Platform:</b> {{rowData.meta.host.platform}}
+                            <b>Platform:</b> {{rowData.descriptions.host.platform}}
                         </div>
 
                         <div class="ui-g-12">
-                            <b>Platform family:</b> {{rowData.meta.host.platformFamily}}
+                            <b>Platform family:</b> {{rowData.descriptions.host.platformFamily}}
                         </div>
                         <div class="ui-g-12">
-                            <b>Kernel:</b> {{rowData.meta.host.kernelVersion}}
+                            <b>Kernel:</b> {{rowData.descriptions.host.kernelVersion}}
                         </div>
                         <div class="ui-g-12">
-                            <b>HostID:</b> {{rowData.meta.host.hostID}}
+                            <b>HostID:</b> {{rowData.descriptions.host.hostID}}
                         </div>
                     </div>
 
                     <div class="ui-g-12 ui-md-6">
                         <div class="ui-g">
                             <div class="ui-g-12">
-                                <b>NIC:</b> {{rowData.meta.network.name}}
+                                <b>NIC:</b> {{rowData.descriptions.network.name}}
                             </div>
                             <div class="ui-g-12">
-                                <b>Network Address:</b> {{rowData.meta.network.address}}
+                                <b>Network Address:</b> {{rowData.descriptions.network.address}}
                             </div>
                             <div class="ui-g-12">
-                                <b>Gateway:</b> {{rowData.meta.network.gateway}}
+                                <b>Gateway:</b> {{rowData.descriptions.network.gateway}}
                             </div>
                             <div class="ui-g-12">
-                                <b>Mac Address:</b> {{rowData.meta.network.macAddress}}
+                                <b>Mac Address:</b> {{rowData.descriptions.network.macAddress}}
                             </div>
                         </div>
                     </div>
                     <div class="ui-g-12" dir="rtl">
-                        <button class="ui-button-danger ui-button-width-fit" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false, rowData.data)"></button>
+                        <button class="ui-button-danger ui-button-width-fit" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false, rowData)"></button>
-                        <button class=" ui-button-width-fit" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true, rowData.data)"></button>            
+                        <button class=" ui-button-width-fit" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true, rowData)"></button>            
                     </div>
                 </div>
             </td>

src/packages/noauth/component/list/list.component.ts

@@ -1,103 +1,25 @@
-import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, Input, Output, EventEmitter, AfterContentInit } from '@angular/core';
-import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
-import { Router } from '@angular/router';
-import { Store, select } from '@ngrx/store';
-import { AuthSelector } from 'packages/member/store';
-import { RPCClientError } from '@loafer/ng-rpc/protocol';
-import { Domain } from '@overflow/commons-typescript/model/domain';
-import * as ListStore from '../../store/noauth-probe';
-import { NoAuthProbeSelector } from '../../store';
 import { NoAuthProbe } from '@overflow/commons-typescript/model/noauth';
 import { ConfirmationService, Message } from 'primeng/primeng';
 import { MessageService } from 'primeng/components/common/messageservice';
-import { Subscription } from 'rxjs/Subscription';
-
-class NoauthProbeDesc {
-  host: {
-    name: string;
-    os: string;
-    platform: string;
-    platformFamily: string;
-    platformVersion: string;
-    kernelVersion: string;
-    hostID: string;
-  };
-  network: {
-    name: string;
-    address: string;
-    gateway: string;
-    macAddress: string;
-  };
-}
-
-class NoauthProbeResult {
-  id: number;
-  data: NoAuthProbe;
-  meta: NoauthProbeDesc;
-}
-
 
 @Component({
   selector: 'of-noauth-list',
   templateUrl: './list.component.html',
   providers: [ConfirmationService, MessageService]
 })
-export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
+export class ListComponent {
-  noAuthProbesSubscription$: Subscription;
+  @Input() noauthProbes: NoAuthProbe[];
-  noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes')));
+  @Output() accept = new EventEmitter<NoAuthProbe>();
-  noauthProbes: NoauthProbeResult[];
+  @Output() deny = new EventEmitter<NoAuthProbe>();
   msgs: Message[];
 
-
   constructor(
-    private router: Router,
-    private store: Store<ListStore.State>,
     private confirmationService: ConfirmationService,
     private messageService: MessageService
   ) {
   }
 
-  ngOnInit() {
-    this.noAuthProbesSubscription$ = this.noAuthProbes$.subscribe(
-      (result: NoAuthProbe[]) => {
-        if (result) {
-          this.arrangeData(result);
-        }
-      },
-      (error: RPCClientError) => {
-        console.log(error.response.message);
-      }
-    );
-  }
-
-  ngAfterContentInit() {
-    this.store.select(AuthSelector.select('domain')).subscribe(
-      (domain: Domain) => {
-        this.store.dispatch(new ListStore.ReadAllByDomain(domain));
-      }
-    );
-  }
-
-  ngOnDestroy() {
-    this.noAuthProbesSubscription$.unsubscribe();
-  }
-
-  arrangeData(list) {
-    if (!list || list.length === 0) {
-      return;
-    }
-    this.noauthProbes = [];
-    for (const np of list) {
-      const desc: NoauthProbeDesc = JSON.parse(np.description);
-      const result: NoauthProbeResult = {
-        id: np.id,
-        data: np,
-        meta: desc
-      };
-      this.noauthProbes.push(result);
-    }
-  }
-
   onAcceptOrDeny(isAccept: boolean, selected: NoAuthProbe) {
     console.log(selected);
     this.msgs = [];
@@ -111,18 +33,10 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
       message: message,
       icon: isAccept ? 'fa-check' : 'fa fa-trash',
       accept: () => {
-        isAccept ? this.handleAccept(selected) : this.handleDeny(selected);
+        isAccept ? this.accept.emit(selected) : this.deny.emit(selected);
       },
       reject: () => {
       }
     });
   }
-
-  handleAccept(selected) {
-    this.store.dispatch(new ListStore.Accept(selected));
-  }
-
-  handleDeny(selected) {
-    this.store.dispatch(new ListStore.Deny(selected));
-  }
 }

src/packages/noauth/container/index.ts

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

src/packages/noauth/container/list/list-container.component.html

@@ -0,0 +1 @@
+<of-noauth-list [noauthProbes]="noauthProbes$ | async" (accept)="accept($event)" (deny)="deny($event)"></of-noauth-list>

src/packages/noauth/container/list/list-container.component.spec.ts

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

src/packages/noauth/container/list/list-container.component.ts

@@ -0,0 +1,59 @@
+import { Component, OnInit } from '@angular/core';
+import { AfterContentInit, OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
+import { Store, select } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
+
+import { AuthSelector } from 'packages/member/store';
+import { Domain } from '@overflow/commons-typescript/model/domain';
+import * as ListStore from '../../store/noauth-probe';
+import { NoAuthProbeSelector } from '../../store';
+import { NoAuthProbe } from '@overflow/commons-typescript/model/noauth';
+import { ConfirmationService } from 'primeng/primeng';
+import { MessageService } from 'primeng/components/common/messageservice';
+
+@Component({
+  selector: 'of-noauth-list-container',
+  templateUrl: './list-container.component.html',
+  providers: [ConfirmationService, MessageService]
+})
+export class ListContainerComponent implements OnInit, AfterContentInit, OnDestroy {
+  noauthProbes$: Observable<NoAuthProbe[]>;
+
+  constructor(
+    private store: Store<ListStore.State>,
+  ) {
+
+  }
+
+  ngOnInit() {
+    this.noauthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes'))).map((_noauthProbes: NoAuthProbe[]) => {
+      if (null === _noauthProbes) {
+        return null;
+      }
+      _noauthProbes.forEach(_noauthProbe => {
+        _noauthProbe.descriptions = JSON.parse(_noauthProbe.description);
+      });
+      return _noauthProbes;
+    });
+  }
+
+  ngAfterContentInit() {
+    this.store.select(AuthSelector.select('domain')).subscribe(
+      (domain: Domain) => {
+        this.store.dispatch(new ListStore.ReadAllByDomain(domain));
+      }
+    );
+  }
+
+  ngOnDestroy() {
+  }
+
+  accept(selected) {
+    this.store.dispatch(new ListStore.Accept(selected));
+  }
+
+  deny(selected) {
+    this.store.dispatch(new ListStore.Deny(selected));
+  }
+}

src/packages/noauth/noauth.module.ts

@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
+import { PipeModule } from 'packages/commons/pipe/pipe.module';
+
 import { NoAuthProbeStoreModule } from './noauth-probe-store.module';
 import { NoAuthProbeRPCModule } from './noauth-probe-rpc.module';
 import { NoAuthProbeLoggerModule } from './noauth-probe-logger.module';
 import { COMPONENTS } from './component';
+import { CONTAINER_COMPONENTS } from './container';
+
 import { SERVICES } from './service';
-import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
 
 @NgModule({
   imports: [
@@ -14,12 +18,15 @@ import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module';
     NoAuthProbeRPCModule,
     NoAuthProbeLoggerModule,
     PrimeNGModules,
+    PipeModule,
   ],
   declarations: [
     COMPONENTS,
+    CONTAINER_COMPONENTS,
   ],
   exports: [
     COMPONENTS,
+    CONTAINER_COMPONENTS,
   ],
   providers: [
     SERVICES,