noauth probe design

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

@@ -1,5 +1,78 @@
 <h1>Unauthorized</h1>
-<p-table [value]="noauthProbes" selectionMode="single" [(selection)]="selected" [resizableColumns]="true">
+
+<p-table #dt [value]="noauthProbes" selectionMode="single" dataKey="id">
+    <ng-template pTemplate="header">
+        <tr>
+            <th style="width: 3.25em" pResizableColumn></th>
+            <th style="width: 20em">Probe Key</th>
+            <th>Host Name</th>
+            <th>OS</th>
+            <th style="width: 7em">Created at</th>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
+        <tr [pSelectableRow]="rowData.data" [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.meta.host.name}}</td>
+            <td>{{rowData.meta.host.os}}</td>
+            <td>{{rowData.data.createDate | date: 'dd/MM/yyyy'}}</td>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
+        <tr>
+            <td [attr.colspan]="5">
+                <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
+
+                    <div class="ui-g-12 ui-md-6">
+                        <div class="ui-g-12">
+                            <b>Platform:</b> {{rowData.meta.host.platform}}
+                        </div>
+
+                        <div class="ui-g-12">
+                            <b>Platform family:</b> {{rowData.meta.host.platformFamily}}
+                        </div>
+                        <div class="ui-g-12">
+                            <b>Kernel:</b> {{rowData.meta.host.kernelVersion}}
+                        </div>
+                        <div class="ui-g-12">
+                            <b>HostID:</b> {{rowData.meta.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}}
+                            </div>
+                            <div class="ui-g-12">
+                                <b>Network Address:</b> {{rowData.meta.network.address}}
+                            </div>
+                            <div class="ui-g-12">
+                                <b>Gateway:</b> {{rowData.meta.network.gateway}}
+                            </div>
+                            <div class="ui-g-12">
+                                <b>Mac Address:</b> {{rowData.meta.network.macAddress}}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </td>
+        </tr>
+        <tr>
+            <td [attr.colspan]="5">
+                <button class="ui-button-danger ui-button-width-fit" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false)"></button>
+                <button class=" ui-button-width-fit" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true)"></button>
+            </td>
+        </tr>
+    </ng-template>
+</p-table>
+
+<!-- <p-table [value]="noauthProbes" selectionMode="single" [(selection)]="selected" [resizableColumns]="true">
     <ng-template pTemplate="header" let-columns>
         <tr>
             <th style="width: 3.25em" pResizableColumn></th>
@@ -13,9 +86,9 @@
             <td>
                 <p-tableRadioButton [value]="probe"></p-tableRadioButton>
             </td>
-            <td>{{probe.tempProbeKey}}</td>
+            <td>{{probe.data.tempProbeKey}}</td>
-            <td style="overflow: auto;">{{probe.description}}</td>
+            <td style="overflow: auto;">{{probe.meta.host.name}}</td>
-            <td>{{probe.createDate | date: 'dd/MM/yyyy'}}</td>
+            <td>{{probe.data.createDate | date: 'dd/MM/yyyy'}}</td>
         </tr>
     </ng-template>
 </p-table>
@@ -25,4 +98,4 @@
 </div>
 
 <p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
-<p-growl [(value)]="msgs"></p-growl>
+<p-growl [(value)]="msgs"></p-growl> -->

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

@@ -11,6 +11,31 @@ import { NoAuthProbe } from '../../model';
 import { ConfirmationService, Message } from 'primeng/primeng';
 import { MessageService } from 'primeng/components/common/messageservice';
 
+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',
@@ -18,10 +43,11 @@ import { MessageService } from 'primeng/components/common/messageservice';
 })
 export class ListComponent implements OnInit, AfterContentInit {
   noAuthProbes$ = this.store.pipe(select(NoAuthProbeSelector.select('noAuthProbes')));
-  noauthProbes: NoAuthProbe[];
+  noauthProbes: NoauthProbeResult[];
   selected: NoAuthProbe = null;
   msgs: Message[];
 
+
   constructor(
     private router: Router,
     private store: Store<ListStore.State>,
@@ -30,17 +56,11 @@ export class ListComponent implements OnInit, AfterContentInit {
   ) {
   }
 
-  ngAfterContentInit() {
+  ngOnInit() {
-    this.store.select(AuthSelector.select('domain')).subscribe(
-      (domain: Domain) => {
-        this.store.dispatch(new ListStore.ReadAllByDomain(domain));
-      }
-    );
-
     this.noAuthProbes$.subscribe(
       (result: NoAuthProbe[]) => {
         if (result) {
-          this.noauthProbes = result;
+          this.arrangeData(result);
         }
       },
       (error: RPCClientError) => {
@@ -49,22 +69,28 @@ export class ListComponent implements OnInit, AfterContentInit {
     );
   }
 
-  ngOnInit() {
+  ngAfterContentInit() {
-    // Temporary Data
+    this.store.select(AuthSelector.select('domain')).subscribe(
-    this.noauthProbes = new Array();
+      (domain: Domain) => {
-    for (let i = 0; i < 10; i++) {
+        this.store.dispatch(new ListStore.ReadAllByDomain(domain));
-      const p: NoAuthProbe = {
+      }
-        id: i,
+    );
-        tempProbeKey: 'TempKey' + i,
-        createDate: new Date(),
-        description: 'Description' + i,
-      };
-      this.noauthProbes.push(p);
-    }
   }
 
-  handleSelect(selected: NoAuthProbe) {
+  arrangeData(list) {
-    this.selected = selected;
+    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) {

src/packages/notification/component/notification/notification.component.html

@@ -1,9 +1,9 @@
 <h1>Notifications</h1>
 <div class="ui-g-12" dir="rtl">
     <button type="button" label="Mark all as read" pButton class="ui-button-width-fit" (click)="onMarkAllAsRead()"></button>
-</div>    
+</div>
 
-<p-table [value]="notifications" selectionMode="single"  (onRowSelect)="onRowSelect($event)" [resizableColumns]="true">
+<p-table [value]="notifications" selectionMode="single"  (onRowSelect)="onRowSelect($event)" >
   <ng-template pTemplate="body" let-notification let-rowIndex="rowIndex" >
       <tr [pSelectableRow]="notification" [ngStyle]="notification.confirmDate ? '' : {'background-color': 'lightblue'}">
           <td>{{notification.createDate | date: 'dd/MM/yyyy'}}</td>

src/packages/notification/component/notification/notification.component.ts

@@ -34,6 +34,7 @@ export class NotificationComponent implements OnInit, AfterContentInit {
         this.notification$.subscribe(
             (page: Page) => {
                 if (page !== null) {
+                    console.log(page);
                     this.notifications = page.content;
                     this.totalLength = page.totalElements;
                 }

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

@@ -48,7 +48,6 @@ export class ListComponent implements OnInit, AfterContentInit {
 
   }
 
-
   onRowSelect(event) {
     this.router.navigate(['probe', event.data.id, 'info']);
   }