map tree design

src/packages/infra/component/map/map.component.html

@@ -1,7 +1,7 @@
 <div class="ui-g">
   <h1>Map</h1>
   <p-dialog header="Discovery" [width]="800" [(visible)]="display">
-      <of-discovery-setting (close)="closeDialog()"></of-discovery-setting>
+    <of-discovery-setting (close)="closeDialog()"></of-discovery-setting>
   </p-dialog>
   <div class="ui-g-12 ui-g-nopad">
     <div class="ui-g">
@@ -9,21 +9,49 @@
         <button pButton type="button" class="ui-button-large ui-button-width-fit" icon="ui-icon-play-arrow" label="Discovery" (click)="showDialog()"></button>
       </div>
       <div class="ui-g-12 ui-md-7 ui-g-nopad">
-          <div style="float: right;">
+        <div style="float: right;">
-              <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;" (click)="expandAll()"></button>
+          <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;"
-              <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;" (click)="collapseAll()"></button>
+            (click)="expandAll()"></button>
-          </div>
+          <button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;"
-          <div style="float: right; margin: 30px 15px 0 0;">
+            (click)="collapseAll()"></button>
-            <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
+        </div>
-            <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Dwon 
+        <div style="float: right; margin: 30px 15px 0 0;">
-            <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn 
+          <i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
-            <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error 
+          <i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Dwon
-          </div>
+          <i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn
+          <i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error
+        </div>
       </div>
     </div>
   </div>
   <div class="ui-g-12 ui-g-nopad">
-    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree" ></p-tree>
+    <p-tree [value]="infraTree" selectionMode="single" [(selection)]="selectedTree">
+
+      <ng-template let-node pTemplate="default">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="infra">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="probe">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="host">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="service">
+        <div>{{node.label}}</div>
+      </ng-template>
+
+      <ng-template let-node pTemplate="sensor">
+        <p-button label="{{node.label}}"></p-button>
+      </ng-template>
+
+    </p-tree>
   </div>
 </div>
 

src/packages/infra/component/map/map.component.ts

@@ -144,21 +144,18 @@ export class MapComponent implements OnInit, AfterContentInit {
     //   for (const itt of this.infraTree) {
 
     //   }
-
-
     // }
 
     for (const sensor of sensorList) {
       const st = {
         label: 'Sensors - ' + sensor.crawler.name,
-        expandedIcon: 'fa-folder-open',
+        type: 'sensor',
-        collapsedIcon: 'fa-folder',
         obj: sensor,
         expanded: true
       };
 
       // FIXME:: target test id ....
-      const tt = this.targetTreeMap.get(3);
+      const tt = this.targetTreeMap.get(4);
       // const tt = this.targetTreeMap.get(sensor.target.id);
       if (tt !== undefined && tt !== null) {
         tt.children.push(st);
@@ -206,6 +203,7 @@ export class MapComponent implements OnInit, AfterContentInit {
 
     const infraTree =  {
       label: 'Infra',
+      type: 'infra',
       expandedIcon: 'fa-folder-open',
       collapsedIcon: 'fa-folder',
       expanded: true,
@@ -216,6 +214,7 @@ export class MapComponent implements OnInit, AfterContentInit {
 
       const tp = {
         label: 'Probe - ' + key,
+        type: 'probe',
         expandedIcon: 'fa-folder-open',
         collapsedIcon: 'fa-folder',
         expanded: this.DEFAULT_EXPANDED.valueOf(),
@@ -228,6 +227,7 @@ export class MapComponent implements OnInit, AfterContentInit {
 
         const th = {
           label: 'Host - ' + ih.ip,
+          type: 'host',
           expandedIcon: 'fa-folder-open',
           collapsedIcon: 'fa-folder',
           expanded: this.DEFAULT_EXPANDED.valueOf(),
@@ -246,6 +246,7 @@ export class MapComponent implements OnInit, AfterContentInit {
           for (let i = 0 ; i < ifsl.length; ++i) {
             const ts = {
               label: 'Service - ' + ifsl[i].vendor.name,
+              type: 'service',
               expandedIcon: 'fa-folder-open',
               collapsedIcon: 'fa-folder',
               expanded: this.DEFAULT_EXPANDED.valueOf(),
@@ -376,18 +377,21 @@ export class MapComponent implements OnInit, AfterContentInit {
 const testInfraList = [
   {
     label: 'Infra',
+    type: 'infra',
     expandedIcon: 'fa-folder-open',
     collapsedIcon: 'fa-folder',
     expanded: true,
     children: [
       {
         label: 'Zone - 192.168.1.0/24',
+        type: 'zone',
         expandedIcon: 'fa-folder-open',
         collapsedIcon: 'fa-folder',
         expanded: true,
         children: [
           {
             label: 'Host - 192.168.1.106 - Snoop Host',
+            type: 'host',
             expandedIcon: 'fa-folder-open',
             collapsedIcon: 'fa-folder',
             expanded: true,