ing

@overflow/noauth-probe/component/noauth-probe-list.component.html

@@ -1,9 +1,10 @@
-<of-error-message [error]="error" [closable]="false"></of-error-message>
+<h1>Unauthorized</h1>
-<of-block-progressbar [target]="content" [pending]="pending"></of-block-progressbar>
+
+<of-error-message [error]="error$ | async" [closable]="false"></of-error-message>
+<of-block-progressbar [target]="content" [pending]="pending$ | async"></of-block-progressbar>
 
 <p-panel #content [showHeader]="false" class="block-panel">
-  <h1>Unauthorized</h1>
+  <p-table #dt [value]="noauthProbes$ | async" selectionMode="single" dataKey="id">
-  <p-table #dt [value]="noauthProbes" selectionMode="single" dataKey="id">
     <ng-template pTemplate="header">
       <tr>
         <th style="width: 3.25em" pResizableColumn></th>

@overflow/noauth-probe/component/noauth-probe-list.component.ts

@@ -1,25 +1,82 @@
-import { Component, Input, Output, EventEmitter, AfterContentInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, AfterContentInit, OnInit } from '@angular/core';
-import { NoAuthProbe } from '@overflow/commons-typescript/model/noauth';
+import { Store, select } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
 import { ConfirmationService, Message } from 'primeng/primeng';
 
+import { NoAuthProbe } from '@overflow/commons-typescript/model/noauth';
+import { AuthContainerSelector } from '@overflow/shared/auth/store';
+import { DomainMember } from '@overflow/commons-typescript/model/domain';
+
+import { NoAuthProbeService } from '../service/noauth-probe.service';
+
 @Component({
   selector: 'of-noauth-probe-list',
   templateUrl: './noauth-probe-list.component.html',
   providers: [ConfirmationService]
 })
-export class NoAuthProbeListComponent {
+export class NoAuthProbeListComponent implements OnInit {
-  @Input() noauthProbes: NoAuthProbe[];
+  noauthProbes$: Observable<NoAuthProbe[]>;
-  @Input() pending: boolean;
+  pending$: Observable<boolean>;
-  @Input() error: any;
+  error$: Observable<any>;
-
-  @Output() accept = new EventEmitter<NoAuthProbe>();
-  @Output() deny = new EventEmitter<NoAuthProbe>();
 
   constructor(
     private confirmationService: ConfirmationService,
+    private store: Store<any>,
+    private noAuthProbeService: NoAuthProbeService,
   ) {
   }
 
+  ngOnInit() {
+    this.store.pipe(
+      tap(() => {
+        this.pending$ = of(true);
+      }),
+      select(AuthContainerSelector.selectDomainMember),
+      exhaustMap((domainMember: DomainMember) =>
+        this.noAuthProbeService.readAllByDomainID(domainMember.domain.id)
+          .pipe(
+            map((noauthProbes: NoAuthProbe[]) => {
+              this.setNoauthProbes$(noauthProbes);
+            }),
+            catchError(error => {
+              this.setError$(error);
+              return of();
+            })
+          )
+      ),
+      tap(() => {
+        this.pending$ = of(false);
+      }),
+    ).take(1).subscribe();
+
+    // this.noauthProbes$ = this.store.pipe(
+    //   select(AuthContainerSelector.selectDomainMember),
+    //   exhaustMap((domainMember: DomainMember) =>
+    //   this.noAuthProbeService.readAllByDomainID(domainMember.domain.id)
+    //     .pipe(
+    //       map((noauthProbes: NoAuthProbe[]) => {
+    //         this.pending$ = of(false);
+
+    //         if (null === noauthProbes) {
+    //           return null;
+    //         }
+    //         noauthProbes.forEach(noauthProbe => {
+    //           noauthProbe.descriptions = JSON.parse(noauthProbe.description);
+    //         });
+    //         return noauthProbes;
+    //       }),
+    //       catchError(error => {
+    //         this.pending$ = of(false);
+    //         this.error$ = of(error);
+    //         return of(null);
+    //       })
+    //     )
+    // )
+    // );
+
+  }
+
   onAcceptOrDeny(isAccept: boolean, selected: NoAuthProbe) {
     const title = isAccept ?
       'Are you sure to accept this Probe?' : 'Are you sure to deny this Probe';
@@ -31,10 +88,60 @@ export class NoAuthProbeListComponent {
       message: message,
       icon: isAccept ? 'fa-check' : 'fa fa-trash',
       accept: () => {
-        isAccept ? this.accept.emit(selected) : this.deny.emit(selected);
+        if (isAccept) {
+          this.noAuthProbeService.acceptNoAuthProbe(selected.id)
+            .pipe(
+              tap(() => {
+                this.pending$ = of(true);
+              }),
+              map((noauthProbes: NoAuthProbe[]) => {
+                this.setNoauthProbes$(noauthProbes);
+              }),
+              catchError(error => {
+                this.setError$(error);
+                return of();
+              }),
+              tap(() => {
+                this.pending$ = of(false);
+              }),
+          ).take(1).subscribe();
+        } else {
+          this.noAuthProbeService.denyNoauthProbe(selected.id)
+            .pipe(
+              tap(() => {
+                this.pending$ = of(true);
+              }),
+              map((noauthProbes: NoAuthProbe[]) => {
+                this.setNoauthProbes$(noauthProbes);
+              }),
+              catchError(error => {
+                this.setError$(error);
+                return of();
+              }),
+              tap(() => {
+                this.pending$ = of(false);
+              }),
+          ).take(1).subscribe();
+        }
       },
       reject: () => {
       }
     });
   }
+
+  private setNoauthProbes$(noauthProbes: NoAuthProbe[]): void {
+    if (null === noauthProbes) {
+      return;
+    }
+    noauthProbes.forEach(noauthProbe => {
+      noauthProbe.descriptions = JSON.parse(noauthProbe.description);
+    });
+    this.noauthProbes$ = of(noauthProbes);
+  }
+
+  private setError$(error: any): void {
+    this.error$ = of(error);
+  }
+
+
 }

@overflow/noauth-probe/container/noauth-probe-list-container.component.html

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

@overflow/shared/ui/directive/ui-template.directive.ts

@@ -7,11 +7,12 @@ export class UITemplateDirective {
 
   @Input() type: string;
 
-  @Input('ofUITemplate') ofUITemplate: string;
+  // tslint:disable-next-line:no-input-rename
+  @Input('ofUITemplate') name: string;
 
   constructor(public template: TemplateRef<any>) { }
 
   getType(): string {
-    return this.ofUITemplate;
+    return this.name;
   }
 }

src/app/pages/probes/noauth-probe/noauth-probe-page.component.html

@@ -1 +1 @@
-<of-noauth-probe-list-container></of-noauth-probe-list-container>
+<of-noauth-probe-list></of-noauth-probe-list>