From cadb80cf7915567fafc68a8a2579e7d2d2e7c6c5 Mon Sep 17 00:00:00 2001
From: sbengo <serigna@gmail.com>
Date: Fri, 22 Oct 2021 06:43:09 +0200
Subject: [PATCH] Added UI Output section

This PR tries to add the UI Output component to view runtime stats on
output and some fixes on backend to allow control of output status

UI detail:

- Renamed runtime to runtime device
- Created new runtime output section
---
 pkg/agent/agent.go                            |  10 +-
 pkg/agent/output/influx.go                    |  86 ++--
 pkg/webui/apirt-output.go                     |   8 +-
 src/common/elapsedseconds.pipe.ts             |  10 +-
 .../components/table/ng-table.component.ts    |   8 +
 .../ng-table/components/table/ng-table.html   |  15 +-
 src/home/home.html                            |   7 +-
 src/home/home.ts                              |   7 +-
 src/main.module.ts                            |   6 +-
 .../runtime_device.component.ts}              |  18 +-
 .../runtime_device.data.ts}                   |   4 +-
 .../runtime_device.service.ts}                |   2 +-
 .../runtime_deviceeditor.css}                 |   0
 .../runtime_deviceview.html}                  |   2 +-
 .../runtime_output.component.ts               | 372 ++++++++++++++++++
 src/runtime_output/runtime_output.data.ts     |  67 ++++
 src/runtime_output/runtime_output.service.ts  | 100 +++++
 src/runtime_output/runtime_outputeditor.css   |  76 ++++
 src/runtime_output/runtime_outputview.html    |  36 ++
 19 files changed, 771 insertions(+), 63 deletions(-)
 rename src/{runtime/runtime.component.ts => runtime_device/runtime_device.component.ts} (96%)
 rename src/{runtime/runtime.data.ts => runtime_device/runtime_device.data.ts} (98%)
 rename src/{runtime/runtime.service.ts => runtime_device/runtime_device.service.ts} (99%)
 rename src/{runtime/runtimeeditor.css => runtime_device/runtime_deviceeditor.css} (100%)
 rename src/{runtime/runtimeview.html => runtime_device/runtime_deviceview.html} (99%)
 create mode 100644 src/runtime_output/runtime_output.component.ts
 create mode 100644 src/runtime_output/runtime_output.data.ts
 create mode 100644 src/runtime_output/runtime_output.service.ts
 create mode 100644 src/runtime_output/runtime_outputeditor.css
 create mode 100644 src/runtime_output/runtime_outputview.html

diff --git a/pkg/agent/agent.go b/pkg/agent/agent.go
index 24d22621..49dfd15e 100644
--- a/pkg/agent/agent.go
+++ b/pkg/agent/agent.go
@@ -195,14 +195,14 @@ func GetOutputJSONInfo(id string) ([]byte, error) {
 }
 
 // GetDeviceStats returns a map with the basic info of each device.
-func GetOutputStats() map[string]*output.InfluxStats {
-	outstats := make(map[string]*output.InfluxStats)
+func GetOutputStats() map[string]*output.SinkDB {
+	out := make(map[string]*output.SinkDB)
 	mutex.RLock()
+	defer mutex.RUnlock()
 	for k, v := range outputdb {
-		outstats[k] = v.GetBasicStats()
+		out[k] = v.GetSinkDBBasicStats()
 	}
-	mutex.RUnlock()
-	return outstats
+	return out
 }
 
 // GetDeviceStats returns a map with the basic info of each device.
diff --git a/pkg/agent/output/influx.go b/pkg/agent/output/influx.go
index 34fec19c..8458751c 100644
--- a/pkg/agent/output/influx.go
+++ b/pkg/agent/output/influx.go
@@ -37,13 +37,14 @@ type SinkDB struct {
 	smutex      sync.Mutex
 	statsData   sync.RWMutex
 
-	dummy    bool
-	iChan    chan *client.BatchPoints
-	client   client.Client
-	OutInfo  string
-	PingTime time.Duration
-	Node     *bus.Node `json:"-"`
-	Active   bool
+	dummy               bool
+	iChan               chan *client.BatchPoints
+	client              client.Client
+	OutInfo             string
+	PingTime            time.Duration
+	Node                *bus.Node `json:"-"`
+	Active              bool
+	EnqueueOnWriteError bool
 }
 
 // DummyDB a BD struct needed if no database configured
@@ -102,6 +103,13 @@ func (db *SinkDB) GetBasicStats() *InfluxStats {
 	return db.Stats
 }
 
+// GetBasicStats get basic info for this device
+func (db *SinkDB) GetSinkDBBasicStats() *SinkDB {
+	db.statsData.RLock()
+	defer db.statsData.RUnlock()
+	return db
+}
+
 // GetBasicStats get basic info for this device
 func (db *SinkDB) getBasicStats() *InfluxStats {
 	stat := db.stats.ThSafeCopy()
@@ -110,6 +118,8 @@ func (db *SinkDB) getBasicStats() *InfluxStats {
 
 // GetResetStats return outdb stats and reset its counters
 func (db *SinkDB) GetResetStats() *InfluxStats {
+	db.statsData.RLock()
+	defer db.statsData.RUnlock()
 	if db.dummy == true {
 		log.Debug("Reseting Influxstats for DUMMY DB ")
 		return &InfluxStats{}
@@ -365,29 +375,45 @@ func (db *SinkDB) sendBatchPoint(data *client.BatchPoints, enqueueonerror bool)
 			nf += len(fields)
 		}
 	}
-	// keep trying until we get it (don't drop the data)
-	startSend := time.Now()
-	err := db.client.Write(*data)
-	elapsedSend := time.Since(startSend)
-
-	bufferPercent = (float32(len(db.iChan)) * 100.0) / float32(db.cfg.BufferSize)
-	log.Infof("Buffer OUTPUT [%s] : %.2f%%", db.cfg.ID, bufferPercent)
-	if err != nil {
-		db.stats.WriteErrUpdate(elapsedSend, bufferPercent)
-		log.Errorf("ERROR on Write batchPoint in DB %s (%d points) | elapsed : %s | Error: %s ", db.cfg.ID, np, elapsedSend.String(), err)
-		// If the queue is not full we will resend after a while
+	// Check if the output is active
+	if !db.Active {
+		// Enqueue on error is active, try to store data on buffer
 		if enqueueonerror {
-			log.Debug("queing data again...")
 			if len(db.iChan) < db.cfg.BufferSize {
 				db.iChan <- data
+				bufferPercent = (float32(len(db.iChan)) * 100.0) / float32(db.cfg.BufferSize)
+				log.Infof("Buffer OUTPUT [%s] : %.2f%%", db.cfg.ID, bufferPercent)
+				db.stats.WriteErrUpdate(0, bufferPercent)
 				time.Sleep(time.Duration(db.cfg.TimeWriteRetry) * time.Second)
 			}
+		} else {
+			// Drop data if enqueue on error is false and output is not active
+			log.Infof("Skipped point on output %s, output is not active and enqueue on error is false", db.cfg.ID)
 		}
 	} else {
-		log.Debugf("OK on Write batchPoint in DB %s (%d points) | elapsed : %s ", db.cfg.ID, np, elapsedSend.String())
-		db.stats.WriteOkUpdate(int64(np), int64(nf), elapsedSend, bufferPercent)
-	}
+		// keep trying until we get it (don't drop the data)
+		startSend := time.Now()
+		err := db.client.Write(*data)
+		elapsedSend := time.Since(startSend)
 
+		bufferPercent = (float32(len(db.iChan)) * 100.0) / float32(db.cfg.BufferSize)
+		log.Infof("Buffer OUTPUT [%s] : %.2f%%", db.cfg.ID, bufferPercent)
+		if err != nil {
+			db.stats.WriteErrUpdate(elapsedSend, bufferPercent)
+			log.Errorf("ERROR on Write batchPoint in DB %s (%d points) | elapsed : %s | Error: %s ", db.cfg.ID, np, elapsedSend.String(), err)
+			// If the queue is not full we will resend after a while
+			if enqueueonerror {
+				log.Debug("queing data again...")
+				if len(db.iChan) < db.cfg.BufferSize {
+					db.iChan <- data
+					time.Sleep(time.Duration(db.cfg.TimeWriteRetry) * time.Second)
+				}
+			}
+		} else {
+			log.Debugf("OK on Write batchPoint in DB %s (%d points) | elapsed : %s ", db.cfg.ID, np, elapsedSend.String())
+			db.stats.WriteOkUpdate(int64(np), int64(nf), elapsedSend, bufferPercent)
+		}
+	}
 }
 
 func (db *SinkDB) resetBuffer(length int) {
@@ -410,14 +436,14 @@ func (db *SinkDB) startSenderGo(r int, wg *sync.WaitGroup) {
 	defer wg.Done()
 
 	time.Sleep(5)
-	EnqueueOnWriteError := db.cfg.EnqueueOnWriteError
+	db.EnqueueOnWriteError = db.cfg.EnqueueOnWriteError
 
 	log.Infof("beginning Influx Sender thread: [%s]", db.cfg.ID)
 	for {
 		select {
 		case data := <-db.iChan:
 			if !db.Active {
-				log.Warn("skip send: Output not active")
+				db.sendBatchPoint(data, db.EnqueueOnWriteError)
 				continue
 			}
 			if data == nil {
@@ -429,18 +455,26 @@ func (db *SinkDB) startSenderGo(r int, wg *sync.WaitGroup) {
 				continue
 			}
 
-			db.sendBatchPoint(data, EnqueueOnWriteError)
+			db.sendBatchPoint(data, db.EnqueueOnWriteError)
 		case val := <-db.Node.Read:
 			log.Infof("Received Message...%s: %+v", val.Type, val.Data)
 			switch val.Type {
 			case "resetbuffer":
+				db.statsData.Lock()
 				db.resetBuffer(db.cfg.BufferSize)
+				db.statsData.Unlock()
 			case "flushbuffer":
+				db.statsData.Lock()
 				db.flushBuffer()
+				db.statsData.Unlock()
 			case "setactive":
+				db.statsData.Lock()
 				db.Active = val.Data.(bool)
+				db.statsData.Unlock()
 			case "enqueue_policy_change":
-				EnqueueOnWriteError = val.Data.(bool)
+				db.statsData.Lock()
+				db.EnqueueOnWriteError = val.Data.(bool)
+				db.statsData.Unlock()
 			case "exit":
 				log.Infof("invoked Force Exit")
 				//need to flush all data
diff --git a/pkg/webui/apirt-output.go b/pkg/webui/apirt-output.go
index cfefec45..03425150 100644
--- a/pkg/webui/apirt-output.go
+++ b/pkg/webui/apirt-output.go
@@ -29,13 +29,12 @@ func NewAPIRtOutput(m *macaron.Macaron) error {
 func RTOutputBufferAction(ctx *Context) {
 	id := ctx.Params(":id")
 	action := ctx.Params(":action")
-	log.Infof("activating runtime on device %s", id)
+	log.Infof("apply action: %s on output %s runtime", action, id)
 	out, err := agent.GetOutput(id)
 	if err != nil {
 		ctx.JSON(404, err.Error())
 		return
 	}
-	log.Infof("activating runtime on device %s", id)
 	out.Action(action)
 	ctx.JSON(200, "OK")
 }
@@ -49,14 +48,13 @@ func RTGetOutputInfo(ctx *Context) {
 			ctx.JSON(404, err.Error())
 			return
 		}
-
 		log.Infof("get runtime data from id %s", id)
 		ctx.RawAsJSON(200, json)
 
 		//get only one device info
 	} else {
-		devstats := agent.GetOutputStats()
-		ctx.JSON(200, &devstats)
+		outputs := agent.GetOutputStats()
+		ctx.JSON(200, &outputs)
 	}
 	return
 }
diff --git a/src/common/elapsedseconds.pipe.ts b/src/common/elapsedseconds.pipe.ts
index 3985f441..fc29dca2 100644
--- a/src/common/elapsedseconds.pipe.ts
+++ b/src/common/elapsedseconds.pipe.ts
@@ -3,11 +3,11 @@ import {Pipe, PipeTransform} from '@angular/core';
 @Pipe({ name: 'elapsedseconds' })
 export class ElapsedSecondsPipe implements PipeTransform {
   transform(value: any, ...args: string[]): string {
-    if (typeof args === 'undefined' || args.length !== 1) {
+    if (typeof args === 'undefined' || args.length < 1) {
       throw new Error('ElapsedSecondsPipe: missing required decimals');
     }
 
-    return this.toSeconds(value, args[0] ,0);
+    return this.toSeconds(value, args[0], args[1], 0);
   }
   //from kbn.js in grafana project
   toFixed(value , decimals )  {
@@ -44,9 +44,13 @@ export class ElapsedSecondsPipe implements PipeTransform {
      }
   }
 
-  toSeconds(size , decimals, scaledDecimals) {
+  toSeconds(size , decimals, units = "seconds", scaledDecimals) {
     if (size === null) { return ""; }
 
+    if (units == "ns") {
+      size = size * 1.e-9
+    }
+
     // Less than 1 µs, devide in ns
     if (Math.abs(size) < 0.000001) {
       return this.toFixedScaled(size * 1.e9, decimals, scaledDecimals - decimals, -9, " ns");
diff --git a/src/common/ng-table/components/table/ng-table.component.ts b/src/common/ng-table/components/table/ng-table.component.ts
index 51e79770..36b8d727 100755
--- a/src/common/ng-table/components/table/ng-table.component.ts
+++ b/src/common/ng-table/components/table/ng-table.component.ts
@@ -31,6 +31,7 @@ export class NgTableComponent {
   @Input() public showCustom: boolean = false;
   @Input() public showConnection: boolean = false;
   @Input() public showStatus: boolean = false;
+  @Input() public showOutput: boolean = false;
   @Input() public editMode: boolean = false;
   @Input() public exportType: string;
   @Input() public extraActions: Array<any>;
@@ -112,6 +113,13 @@ export class NgTableComponent {
       let test = new ElapsedSecondsPipe().transform(html,'3');
       html = test.toString();
     }
+    if  (transform === "elapsednanoseconds") {
+      let test = new ElapsedSecondsPipe().transform(html,'3','ns');
+      html = test.toString();
+    }
+    if  (transform === "percent") {
+      html = html.toString() + " %"
+    }
     if (typeof html === 'object') {
       var test: any = '<ul class="list-unstyled">';
       for (var item of html) {
diff --git a/src/common/ng-table/components/table/ng-table.html b/src/common/ng-table/components/table/ng-table.html
index f4ff7306..2bc3ee36 100644
--- a/src/common/ng-table/components/table/ng-table.html
+++ b/src/common/ng-table/components/table/ng-table.html
@@ -22,7 +22,7 @@
                 </th>
                 </ng-container>
             </ng-container>
-            <th *ngFor="let column of columns" [ngTableSorting]="config" [column]="column" (sortChanged)="onChangeTable($event)" ngClass="{{column.className || ''}}" style="vertical-align: middle; text-align: center; width:auto !important; white-space:nowrap" container=body [tooltip]="column.tooltipInfo ? tooltipValues : ( column.tooltip ? column.name : '')">
+            <th *ngFor="let column of columns" [ngTableSorting]="config" [column]="column" (sortChanged)="onChangeTable($event)" ngClass="{{column.className || ''}}" style="vertical-align: middle; text-align: center; width:auto !important; white-space:nowrap" container=body [tooltip]="column.tooltipInfo ? tooltipValues : ( column.tooltip ? column.tooltip : column.name)">
                 <ng-template #tooltipValues>
                     <ng-container>
                         <h6> {{column.title}} </h6>
@@ -52,7 +52,7 @@ <h6> {{column.title}} </h6>
     </thead>
     <tbody>
         <tr *ngIf="showFilterRow ">
-            <td *ngIf="(tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view') && showStatus === false" style="width:100px ">
+            <td *ngIf="(tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view') && showStatus === false && showOutput === false" style="width:100px ">
             </td>
             <td *ngIf="tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view'" style="width:100px ">
             </td>
@@ -65,7 +65,7 @@ <h6> {{column.title}} </h6>
             <td *ngIf="editMode==true ">
                 <i [ngClass]="checkItems(row.ID) ? [ 'glyphicon glyphicon-unchecked text-danger'] : [ 'glyphicon glyphicon-check text-success'] " (click)="selectItem(row) "></i>
             </td>
-            <td *ngIf="(tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view') && showStatus === false">
+            <td *ngIf="(tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view') && showStatus === false && showOutput === false">
                 <i *ngFor="let action of roleActions" [ngClass]="action.icon" [tooltip]="action.tooltip" (click)="customClick(action.name, row)" style="padding-left:5px">
                 </i>
             </td>
@@ -84,6 +84,13 @@ <h6> {{column.title}} </h6>
         </span>
                 <label style="display: inline; margin-right: 2px " container=body [tooltip]="row.DeviceConnected ? 'Connected' : 'Not connected' " [ngClass]="row.DeviceConnected ? 'glyphicon glyphicon-globe label label-success' :
         'glyphicon glyphicon-warning-sign label label-danger' "></label>
+            </td>
+            <td *ngIf="showOutput==true " style="min-width: 50px ">
+                <span style="padding-left: 12px ">
+          <label style="display: inline; margin-right: 2px " container=body [tooltip]="row.Active ? 'Active' : 'Not active' " [ngClass]="row.Active ? 'glyphicon glyphicon-play label label-success' :
+          'glyphicon glyphicon-pause label label-danger' "></label>
+        </span>
+    
             </td>
             <ng-container *ngIf="checkRows ">
                 <td style="width: 80px; text-align: center; padding-top: 15px; " [ngClass]="row.valid===true? [ 'bg-success'] : [ 'bg-warning'] ">
@@ -120,7 +127,7 @@ <h6> Metric:{{column.name}}</h6>
                         <label  *ngIf="i.type=='boolean-label'"role="button"  [tooltip]= "i.tooltip" container=body (click)="extraActionClick(row,i.action,i.property) " [ngClass]="row[i.property] ? [ 'label label-success'] : [ 'label label-danger'] " [innerHtml]="row[i.property] ? i['enabled'] : i['disabled'] "></label>
                         <button *ngIf="i.type=='boolean'" [tooltip]= "i.tooltip" container=body (click)="extraActionClick(row,i.action,i.property) " [ngClass]="row[i.property] ? [ 'btn btn-success'] : [ 'btn btn-danger'] " [innerHtml]="row[i.property] ? i['enabled'] : i['disabled'] "></button>                     
                         <label *ngIf="i.type=='button-label'" role="button"  [tooltip]= "i.tooltip" container=body class="label label-primary " (click)="extraActionClick(row,i.action)" [innerHtml]="i['text']"></label>
-                        <button *ngIf="i.type=='button'" [tooltip]= "i.tooltip" container=body class="btn btn-primary " (click)="extraActionClick(row,i.action)" [innerHtml]="i['text']"></button>
+                        <button *ngIf="i.type=='button'" [tooltip]= "i.tooltip" container=body class="btn btn-{{i.color? i.color : 'primary'}}" (click)="extraActionClick(row,i.action)" [innerHtml]="i['text']"></button>
                     </ng-container>
                 </td>
             </ng-template>
diff --git a/src/home/home.html b/src/home/home.html
index 551c8bfb..e7ded67e 100644
--- a/src/home/home.html
+++ b/src/home/home.html
@@ -112,9 +112,12 @@
                             <ng-template ngSwitchCase="snmpdevice">
                              <snmpdevs></snmpdevs>
                            </ng-template>
-                            <ng-template ngSwitchCase="runtime">
-                              <runtime #RuntimeComponent></runtime>
+                            <ng-template ngSwitchCase="runtime-device">
+                              <runtime-device #RuntimeDeviceComponent></runtime-device>
                             </ng-template>
+                            <ng-template ngSwitchCase="runtime-output">
+                                <runtime-output #RuntimeOutputComponent></runtime-output>
+                              </ng-template>
                             <ng-template ngSwitchCase="varcatalog">
                               <varcatalog></varcatalog>
                             </ng-template>
diff --git a/src/home/home.ts b/src/home/home.ts
index c1c7868f..a2dab50f 100644
--- a/src/home/home.ts
+++ b/src/home/home.ts
@@ -25,7 +25,7 @@ export class Home {
   @ViewChild('importFileModal') public importFileModal : ImportFileModal;
   @ViewChild('exportBulkFileModal') public exportBulkFileModal : ExportFileModal;
   @ViewChild('aboutModal') public aboutModal : AboutModal;
-  @ViewChild('RuntimeComponent') public rt : any;
+  @ViewChild('RuntimeDeviceComponent') public rt : any;
   nativeWindow: any
   response: string;
   api: string;
@@ -44,7 +44,8 @@ export class Home {
   ];
 
   runtimeItems : Array<any> = [
-  {'title': 'Device status', 'selector' : 'runtime'},
+  {'title': 'Device status', 'selector' : 'runtime-device'},
+  {'title': 'Output status', 'selector' : 'runtime-output'},
   ];
 
   mode : boolean = false;
@@ -56,7 +57,7 @@ export class Home {
   constructor(private winRef: WindowRef,public router: Router, public httpAPI: HttpService, private _blocker: BlockUIService, public homeService: HomeService) {
     this.nativeWindow = winRef.nativeWindow;
     this.getFooterInfo();
-    this.item_type= "runtime";
+    this.item_type= "runtime-device";
   }
 
   link(url: string) {
diff --git a/src/main.module.ts b/src/main.module.ts
index 654e61c4..bfb484b5 100644
--- a/src/main.module.ts
+++ b/src/main.module.ts
@@ -30,7 +30,8 @@ import { InfluxMeasCfgComponent } from './influxmeas/influxmeascfg.component';
 import { MeasGroupCfgComponent } from './measgroup/measgroupcfg.component';
 import { MeasFilterCfgComponent } from './measfilter/measfiltercfg.component';
 import { InfluxServerCfgComponent } from './influxserver/influxservercfg.component';
-import { RuntimeComponent } from './runtime/runtime.component';
+import { RuntimeDeviceComponent } from './runtime_device/runtime_device.component';
+import { RuntimeOutputComponent } from './runtime_output/runtime_output.component';
 import { CustomFilterCfgComponent } from './customfilter/customfiltercfg.component';
 import { BlockUIService } from './common/blockui/blockui-service';
 
@@ -83,7 +84,8 @@ import { SpinnerComponent } from './common/spinner';
     CustomFilterCfgComponent,
     VarCatalogCfgComponent,
     TableListComponent,
-    RuntimeComponent,
+    RuntimeDeviceComponent,
+    RuntimeOutputComponent,
     GenericModal,
     AboutModal,
     ExportFileModal,
diff --git a/src/runtime/runtime.component.ts b/src/runtime_device/runtime_device.component.ts
similarity index 96%
rename from src/runtime/runtime.component.ts
rename to src/runtime_device/runtime_device.component.ts
index 8453e29c..1747b3bd 100644
--- a/src/runtime/runtime.component.ts
+++ b/src/runtime_device/runtime_device.component.ts
@@ -1,31 +1,31 @@
 
 import { ChangeDetectionStrategy, Component, ViewChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
-import { RuntimeService } from './runtime.service';
+import { RuntimeDeviceService } from './runtime_device.service';
 import { ItemsPerPageOptions } from '../common/global-constants';
 
 import { SpinnerComponent } from '../common/spinner';
 import { SnmpDeviceService } from '../snmpdevice/snmpdevicecfg.service';
 
 import { TestConnectionModal } from '../common/test-connection-modal';
-import { RuntimeComponentConfig, TableRole, ExtraActions, CounterDef } from './runtime.data';
+import { RuntimeDeviceComponentConfig, TableRole, ExtraActions, CounterDef } from './runtime_device.data';
 
 declare var _: any;
 @Component({
-  selector: 'runtime',
-  providers: [RuntimeService, SnmpDeviceService],
-  templateUrl: './runtimeview.html',
-  styleUrls: ['./runtimeeditor.css'],
+  selector: 'runtime-device',
+  providers: [RuntimeDeviceService, SnmpDeviceService],
+  templateUrl: './runtime_deviceview.html',
+  styleUrls: ['./runtime_deviceeditor.css'],
 })
 
 
-export class RuntimeComponent implements OnDestroy {
+export class RuntimeDeviceComponent implements OnDestroy {
   @ViewChild('viewTestConnectionModal') public viewTestConnectionModal: TestConnectionModal;
 
   itemsPerPageOptions: any = ItemsPerPageOptions;
   public isRefreshing: boolean = true;
 
-  public defaultConfig : any = RuntimeComponentConfig;
+  public defaultConfig : any = RuntimeDeviceComponentConfig;
   public tableRole : any = TableRole;
   public extraActions: any = ExtraActions;
   public oneAtATime: boolean = true;
@@ -86,7 +86,7 @@ export class RuntimeComponent implements OnDestroy {
     className: ['table-striped', 'table-bordered']
   };
 
-  constructor(public runtimeService: RuntimeService, builder: FormBuilder, private ref: ChangeDetectorRef, public snmpDeviceService: SnmpDeviceService) {
+  constructor(public runtimeService: RuntimeDeviceService, builder: FormBuilder, private ref: ChangeDetectorRef, public snmpDeviceService: SnmpDeviceService) {
     this.editmode = 'list';
     this.reloadData();
   }
diff --git a/src/runtime/runtime.data.ts b/src/runtime_device/runtime_device.data.ts
similarity index 98%
rename from src/runtime/runtime.data.ts
rename to src/runtime_device/runtime_device.data.ts
index 0bf43067..81abe003 100644
--- a/src/runtime/runtime.data.ts
+++ b/src/runtime_device/runtime_device.data.ts
@@ -1,6 +1,6 @@
-export const RuntimeComponentConfig: any =
+export const RuntimeDeviceComponentConfig: any =
   {
-    'name' : 'Runtime',
+    'name' : 'Runtime Device',
     'table-columns' : [
       { title: 'ID', name: 'ID' },
       { title: 'TagMap', name: 'TagMap', tooltip: 'Num Measurements configured' },
diff --git a/src/runtime/runtime.service.ts b/src/runtime_device/runtime_device.service.ts
similarity index 99%
rename from src/runtime/runtime.service.ts
rename to src/runtime_device/runtime_device.service.ts
index dfc3ddc4..299dc756 100644
--- a/src/runtime/runtime.service.ts
+++ b/src/runtime_device/runtime_device.service.ts
@@ -5,7 +5,7 @@ import { Observable } from 'rxjs/Observable';
 declare var _:any;
 
 @Injectable()
-export class RuntimeService {
+export class RuntimeDeviceService {
 
     constructor(public httpAPI: HttpService) {
     }
diff --git a/src/runtime/runtimeeditor.css b/src/runtime_device/runtime_deviceeditor.css
similarity index 100%
rename from src/runtime/runtimeeditor.css
rename to src/runtime_device/runtime_deviceeditor.css
diff --git a/src/runtime/runtimeview.html b/src/runtime_device/runtime_deviceview.html
similarity index 99%
rename from src/runtime/runtimeview.html
rename to src/runtime_device/runtime_deviceview.html
index 3121285c..4de623a4 100644
--- a/src/runtime/runtimeview.html
+++ b/src/runtime_device/runtime_deviceview.html
@@ -1,4 +1,4 @@
-<h2>Runtime</h2>
+<h2>Runtime Device</h2>
 <h4 class="info-mode">{{ editmode | uppercase}} </h4>
 <hr>
 <test-connection-modal #viewTestConnectionModal titleName='Test connection for:'>
diff --git a/src/runtime_output/runtime_output.component.ts b/src/runtime_output/runtime_output.component.ts
new file mode 100644
index 00000000..89d4b338
--- /dev/null
+++ b/src/runtime_output/runtime_output.component.ts
@@ -0,0 +1,372 @@
+
+import { ChangeDetectionStrategy, Component, ViewChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import { RuntimeOutputService } from './runtime_output.service';
+import { ItemsPerPageOptions } from '../common/global-constants';
+
+import { SpinnerComponent } from '../common/spinner';
+import { SnmpDeviceService } from '../snmpdevice/snmpdevicecfg.service';
+
+import { TestConnectionModal } from '../common/test-connection-modal';
+import { RuntimeComponentConfig, TableRole, ExtraActions } from './runtime_output.data';
+
+declare var _: any;
+@Component({
+  selector: 'runtime-output',
+  providers: [RuntimeOutputService, SnmpDeviceService],
+  templateUrl: './runtime_outputview.html',
+  styleUrls: ['./runtime_outputeditor.css'],
+})
+
+
+export class RuntimeOutputComponent implements OnDestroy {
+  @ViewChild('viewTestConnectionModal') public viewTestConnectionModal: TestConnectionModal;
+
+  itemsPerPageOptions: any = ItemsPerPageOptions;
+  public isRefreshing: boolean = true;
+
+  public defaultConfig : any = RuntimeComponentConfig;
+  public tableRole : any = TableRole;
+  public extraActions: any = ExtraActions;
+  public oneAtATime: boolean = true;
+  editmode: string; //list , create, modify
+  isRequesting: boolean = false;
+  runtime_outputs: Array<any>;
+
+  mySubscription: any;
+  filter: string;
+  measActive: number = 0;
+  runtime_dev: any;
+  subItem: any;
+  islogLevelChanged: boolean = false;
+  maxrep: any = '';
+
+  //TABLE
+  private data: Array<any> = [];
+  public activeOutputs: number;
+  public noConnectedDevices: number;
+  public dataTable: Array<any> = [];
+  public finalData: Array<Array<any>> = [];
+  public columns: Array<any> = [];
+  public finalColumns: Array<Array<any>> = [];
+  public tmpcolumns: Array<any> = [];
+
+  public refreshRuntime: any = {
+    'Running': false,
+    'LastUpdate': new Date()
+  }
+  public intervalStatus: any
+
+  public rows: Array<any> = [];
+  public page: number = 1;
+  public itemsPerPage: number = 20;
+  public maxSize: number;
+  public numPages: number = 1;
+  public length: number = 0;
+  public myFilterValue: any;
+  public activeFilter: boolean = false;
+  public deactiveFilter: boolean = false;
+  public noConnectedFilter: boolean = false;
+
+  //Set config
+  public config: any = {
+    paging: true,
+    sorting: { columns: this.columns },
+    filtering: { filterString: '' },
+    className: ['table-striped', 'table-bordered']
+  };
+
+  constructor(public runtimeOutputService: RuntimeOutputService, builder: FormBuilder, private ref: ChangeDetectorRef, public snmpDeviceService: SnmpDeviceService) {
+    this.editmode = 'list';
+    this.reloadData();
+  }
+
+
+  public changePage(page: any, data: Array<any> = this.data): Array<any> {
+    //Check if we have to change the actual page
+    let maxPage = Math.ceil(data.length / this.itemsPerPage);
+    if (page.page > maxPage && page.page != 1) this.page = page.page = maxPage;
+
+    let start = (page.page - 1) * page.itemsPerPage;
+    let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
+    return data.slice(start, end);
+  }
+
+  public changeSort(data: any, config: any): any {
+    if (!config.sorting) {
+      return data;
+    }
+    let columns = this.config.sorting.columns || [];
+    let columnName: string = void 0;
+    let sort: string = void 0;
+
+    for (let i = 0; i < columns.length; i++) {
+      if (columns[i].sort !== '' && columns[i].sort !== false) {
+        columnName = columns[i].name;
+        sort = columns[i].sort;
+      }
+    }
+
+    if (!columnName) {
+      return data;
+    }
+
+    // simple sorting
+    return data.sort((previous: any, current: any) => {
+      if (previous[columnName] > current[columnName]) {
+        return sort === 'desc' ? -1 : 1;
+      } else if (previous[columnName] < current[columnName]) {
+        return sort === 'asc' ? -1 : 1;
+      }
+      return 0;
+    });
+  }
+
+  public changeFilter(data: any, config: any): any {
+    let filteredData: Array<any> = data;
+    this.columns.forEach((column: any) => {
+      if (column.filtering) {
+        filteredData = filteredData.filter((item: any) => {
+          return item[column.name].match(column.filtering.filterString);
+        });
+      }
+    });
+
+    if (!config.filtering) {
+      return filteredData;
+    }
+
+    if (config.filtering.columnName) {
+      return filteredData.filter((item: any) =>
+        item[config.filtering.columnName].match(this.config.filtering.filterString));
+    }
+
+    let tempArray: Array<any> = [];
+    console.log("GOT DATA", this.data)
+    filteredData.forEach((item: any) => {
+      let flag = false;
+      this.columns.forEach((column: any) => {
+        console.log(item, column.name)
+        console.log(item[column.name])
+        if (item[column.name] === null) {
+          item[column.name] = '--'
+        }
+        if (item[column.name].toString().match(this.config.filtering.filterString)) {
+          flag = true;
+        }  
+      });
+      if (flag) {
+        tempArray.push(item);
+      }
+    });
+    filteredData = tempArray;
+    return filteredData;
+  }
+
+  changeItemsPerPage(items) {
+    if (items) this.itemsPerPage = parseInt(items);
+    else this.itemsPerPage = this.length;
+    let maxPage = Math.ceil(this.length / this.itemsPerPage);
+    if (this.page > maxPage) this.page = maxPage;
+    this.onChangeTable(this.config);
+  }
+
+  public onChangeTable(config: any, page: any = { page: this.page, itemsPerPage: this.itemsPerPage }): any {
+    if (config.filtering) {
+      Object.assign(this.config.filtering, config.filtering);
+    }
+    if (config.sorting) {
+      Object.assign(this.config.sorting, config.sorting);
+    }
+    let filteredData = this.changeFilter(this.data, this.config);
+    let sortedData = this.changeSort(filteredData, this.config);
+    this.rows = page && this.config.paging ? this.changePage(page, sortedData) : sortedData;
+    this.length = sortedData.length;
+    this.activeOutputs = sortedData.filter((item) => { return item.Active }).length
+    this.noConnectedDevices = sortedData.filter((item) => { if (item.Active === true && item.DeviceConnected === false) return true }).length
+  }
+
+  public onExtraActionClicked(data: any) {
+    switch (data.action) {
+      case 'SetActive':
+        this.changeActiveOutput(data.row.ID, !data.row.Active)
+        break;
+      case 'SetEnqueuePolicy':
+          this.changeEnqueuePolicy(data.row.ID, !data.row.EnqueueOnWriteError)
+          break;
+      case 'FlushBuffer':
+        this.flushBuffer(data.row.ID);
+        break;
+      case 'ResetBuffer':
+          this.resetBuffer(data.row.ID);
+          break;
+      default:
+        break;
+    }
+    console.log(data);
+  }
+
+  onResetFilter(): void {
+    this.page = 1;
+    this.myFilterValue = "";
+    this.config.filtering = { filtering: { filterString: '' } };
+    this.onChangeTable(this.config);
+  }
+
+
+  tableCellParser (data: any, type: string) {
+    if (type === "MULTISTRINGPARSER") {
+      var test: any = '<ul class="list-unstyled">';
+      for (var i of data) {
+          test +="<li>"
+          test +="<span class=\"badge\">"+ ( i["IType"] === 'T' ? "Tag" : "Field" ) +"</span><b>"+ i["IName"] + " :</b>" +  i["Value"];
+          test += "</li>";
+      }
+      test += "</ul>"
+      return test
+    }
+    return ""
+  }
+
+  showTable(id: number) {
+    this.columns = [];
+    this.measActive = id;
+    this.myFilterValue = "";
+    this.config.filtering = { filtering: { filterString: '' } };
+    //Reload data and column table
+    this.data = this.finalData[id];
+    this.columns = this.finalColumns[id];
+    //Reload config to enable sort
+    this.config.sorting = { columns: this.columns };
+    this.onChangeTable(this.config);
+  }
+
+  changeActiveOutput(id, event) {
+    console.log("ID,event", id, event);
+
+    this.runtimeOutputService.changeOutputActive(id, event)
+      .subscribe(
+      data => {
+        _.forEach(this.runtime_outputs, function (d, key) {
+          console.log(d, key)
+          if (d.ID == id) {
+            d.Active = !d.Active;
+            return false
+          }
+        })
+        console.log(this.runtime_outputs);
+      },
+      err => console.error(err),
+      () => console.log('DONE')
+      );
+  }
+
+  changeEnqueuePolicy(id, event) {
+    console.log("ID,event", id, event);
+    this.runtimeOutputService.changeEnqueuePolicy(id, event)
+      .subscribe(
+      data => {
+        _.forEach(this.runtime_outputs, function (d, key) {
+          console.log(d, key)
+          if (d.ID == id) {
+            d.EnqueueOnWriteError = !d.EnqueueOnWriteError;
+            return false
+          }
+        })
+      },
+      err => console.error(err),
+      () => console.log('DONE')
+      );
+  }
+
+  showTestConnectionModal(row: any) {
+    this.snmpDeviceService.getDevicesById(row.ID)
+      .subscribe(data => {
+        this.viewTestConnectionModal.show(data);
+      },
+      err => console.error(err),
+    );
+  }
+
+  flushBuffer(id) {
+    console.log("ID", id);
+    this.runtimeOutputService.flushbuffer(id)
+      .subscribe(
+      data => {
+        console.log("buffer flushed done")
+      },
+      err => console.error(err),
+      () => console.log('DONE')
+      );
+  }
+
+  resetBuffer(id) {
+    console.log("ID", id);
+    this.runtimeOutputService.resetbuffer(id)
+      .subscribe(
+      data => {
+        console.log("buffer reset done")
+      },
+      err => console.error(err),
+      () => console.log('DONE')
+      );
+  }
+
+  reloadData() {
+    this.itemsPerPage = 20;
+    this.isRequesting = true;
+    if (this.mySubscription) {
+      this.mySubscription.unsubscribe();
+    }
+    clearInterval(this.intervalStatus);
+    this.editmode = "list"
+    this.columns = this.defaultConfig['table-columns']
+    this.filter = null;
+    // now it's a simple subscription to the observable
+    this.mySubscription = this.runtimeOutputService.getOutputRuntime(null)
+      .subscribe(
+      data => {
+        this.mySubscription = null;
+        this.runtime_outputs = data
+        this.data = this.runtime_outputs;
+        this.config.sorting.columns = this.columns,
+          this.isRequesting = false;
+        this.activeFilter = this.deactiveFilter = this.noConnectedFilter = false;
+        this.onChangeTable(this.config);
+      },
+      err => console.error(err),
+      () => console.log('DONE')
+      );
+  }
+
+  toogleActiveFilter(option: string) {
+    if (this.activeFilter === false && option === 'active') {
+      this.noConnectedFilter = false;
+      this.deactiveFilter = false;
+      this.activeFilter = true;
+      this.data = this.runtime_outputs.filter((item) => { if (item.Active === true) return true })
+    } else if (this.deactiveFilter === false && option === 'deactive') {
+      this.noConnectedFilter = false;
+      this.activeFilter = false;
+      this.deactiveFilter = true;
+      this.data = this.runtime_outputs.filter((item) => { if (item.Active === false) return true })
+    } else if (this.noConnectedFilter === false && option === 'noconnected') {
+      this.noConnectedFilter = true;
+      this.activeFilter = false;
+      this.deactiveFilter = false;
+      this.data = this.runtime_outputs.filter((item) => { if (item.DeviceConnected === false && item.Active === true) return true })
+    } else {
+      this.data = this.runtime_outputs;
+      this.noConnectedFilter = false;
+      this.activeFilter = false;
+      this.deactiveFilter = false;
+    }
+    this.onChangeTable(this.config);
+  }
+
+  ngOnDestroy() {
+    clearInterval(this.intervalStatus);
+    if (this.mySubscription) this.mySubscription.unsubscribe();
+  }
+
+}
diff --git a/src/runtime_output/runtime_output.data.ts b/src/runtime_output/runtime_output.data.ts
new file mode 100644
index 00000000..41b1e116
--- /dev/null
+++ b/src/runtime_output/runtime_output.data.ts
@@ -0,0 +1,67 @@
+export const RuntimeComponentConfig: any =
+  {
+    'name' : 'Runtime Output',
+    'table-columns' : [
+      { title: 'Output ID', name: 'ID' },
+      { title: 'FieldSent', name: 'FieldSent', tooltip: 'Num of fields sent' },
+      { title: 'FieldSentMax', name: 'FieldSentMax', tooltip: 'Max num of fields sent' },
+      { title: 'BufferPercentUsed (%)', name: 'BufferPercentUsed', tooltip: 'Buffer % used', transform: 'percent' },
+      { title: 'PSent', name: 'PSent', tooltip: 'Num of points sent' },
+      { title: 'PSentMax', name: 'PSentMax', tooltip: 'Max num of points sent' },
+      { title: 'WriteErrors', name: 'WriteErrors', tooltip: 'Num of writes errors' },
+      { title: 'WriteSent', name: 'WriteSent', tooltip: 'Num of writes sent' },
+      { title: 'WriteTime', name: 'WriteTime', tooltip: 'Write time', transform: 'elapsednanoseconds' },
+      { title: 'WriteTimeMax', name: 'WriteTimeMax', tooltip: 'Max write time', transform: 'elapsednanoseconds' }
+    ],
+  }; 
+
+export const TableRole : string = 'runtime';
+
+export const ExtraActions: Object = {
+  data: [
+    { 
+      title: 'SetActive', content: [
+        { 
+          type: 'boolean',
+          enabled: '<i class="glyphicon glyphicon-pause"></i>',
+          disabled: '<i class="glyphicon glyphicon-play"></i>',
+          property: 'Active',
+          action: "SetActive"
+        }
+      ] 
+    },
+    { 
+      title: 'Set Enqueue On Error', content: [
+        { 
+          type: 'boolean',
+          enabled: '<span>Not enqueue</span>',
+          disabled: '<span>Enqueue</span>',
+          property: 'EnqueueOnWriteError',
+          action: "SetEnqueuePolicy"
+        }
+      ] 
+    },
+    { 
+      title: 'Flush Buffer', content: [
+        {
+          type: 'button', 
+          text: '<span>Flush</span>',
+          tooltip: 'Flushes current points on buffer to Output',
+          action: 'FlushBuffer'
+        }
+      ] 
+    },
+    { 
+      title: 'Reset Buffer', content: [
+        {
+          type: 'button',
+          color: 'warning',
+          text: '<span>Reset</span>',
+          tooltip: 'Removes current points on buffer',
+          action: 'ResetBuffer'
+        }
+      ] 
+    }
+  ],
+  "position": "last"
+};
diff --git a/src/runtime_output/runtime_output.service.ts b/src/runtime_output/runtime_output.service.ts
new file mode 100644
index 00000000..d85c4e03
--- /dev/null
+++ b/src/runtime_output/runtime_output.service.ts
@@ -0,0 +1,100 @@
+import { HttpService } from '../core/http.service';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+declare var _:any;
+
+@Injectable()
+export class RuntimeOutputService {
+
+    constructor(public httpAPI: HttpService) {
+    }
+
+
+    getOutputRuntime(filter_s: string) {
+        // return an observable
+        return this.httpAPI.get('/api/rt/output/info')
+        .map( (responseData) => {
+            return responseData.json();
+        })
+        .map((runtime_outputs) => {
+            let result = [];
+            console.log(runtime_outputs)
+            if (runtime_outputs) {
+                _.forEach(runtime_outputs,function(value,key){
+                    let tmp : any = {};
+                  tmp.ID = key;
+                  _.forEach(value, function(val,key) {
+                    if (key == "Stats") {
+                        _.forEach(val, function(val2, key) {
+                            tmp[key] = val2;
+                        })
+                    } else {
+                        tmp[key] = val;
+                    }
+                  });
+                  result.push(tmp);
+                  //result.push({'ID': key, 'value' :value});
+                });
+            }
+            return result;
+        });
+    }
+
+    getOutputRuntimeById(id : string) {
+        // return an observable
+        return this.httpAPI.get('/api/rt/output/info/'+id)
+        .map( (responseData) =>
+            responseData.json()
+    )};
+
+    /* Actions */
+    // Active / Deactive
+
+    changeOutputActive(id : string, event : boolean) {
+        // return an observable
+        console.log(event)
+        if (event) {
+            return this.httpAPI.get('/api/rt/output/buffer/'+id+'/active/')
+            .map( (responseData) =>
+                responseData.json()
+            )
+        } else {
+            return this.httpAPI.get('/api/rt/output/buffer/'+id+'/deactive/')
+            .map( (responseData) =>
+                responseData.json()
+            )
+        }
+    };
+
+    changeEnqueuePolicy(id : string, event : boolean) {
+        // return an observable
+        if (event) {
+            return this.httpAPI.get('/api/rt/output/buffer/'+id+'/enqueue/')
+            .map( (responseData) =>
+                responseData.json()
+            )
+        } else {
+            return this.httpAPI.get('/api/rt/output/buffer/'+id+'/not_enqueue/')
+            .map( (responseData) =>
+                responseData.json()
+            )
+        }
+    };
+
+    flushbuffer(id : string) {
+        // return an observable
+        return this.httpAPI.get('/api/rt/output/buffer/'+id+'/flushbuffer/')
+        .map( (responseData) =>
+            responseData.json()
+        )
+    };
+
+    resetbuffer(id : string) {
+        // return an observable
+        return this.httpAPI.get('/api/rt/output/buffer/'+id+'/resetbuffer/')
+        .map( (responseData) =>
+            responseData.json()
+        )
+    };
+}
diff --git a/src/runtime_output/runtime_outputeditor.css b/src/runtime_output/runtime_outputeditor.css
new file mode 100644
index 00000000..a158fbaf
--- /dev/null
+++ b/src/runtime_output/runtime_outputeditor.css
@@ -0,0 +1,76 @@
+
+html {
+  font-family: sans-serif;
+}
+
+.info-mode {
+  border-left: 5px solid #1b809e;
+  padding-left: 5px;
+}
+
+/*form {
+  padding: 10px;
+  max-width: 320px;
+}
+
+label {
+  margin-top: 16px;
+//  float: left;
+  display: block;
+}*/
+
+.refresh-transition {
+  -webkit-transition: all 1s linear !important;
+  -moz-transition: all 1s linear !important;
+  -o-transition: all 1s linear !important;
+  transition: all 1s linear !important;
+}
+
+.customClass {
+  color: #880000;
+  background-color: #ffff66;
+  box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+
+.info {
+  color: #337ab7;
+  float: left;
+  padding-left: 10px;
+}
+
+select,input {
+    display: inline;
+    width: 320px;
+    height: 27px;
+    padding: 2px 12px;
+    font-size: 14px;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button-default {
+  margin-top: 4px;
+  color: #fff;
+  background-color: #337ab7;
+  border: 1px solid #2e6da4;
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 1em;
+  font-weight: 300;
+}
+
+button[disabled] {
+  background-color: #337ab7;
+  border-color: #2e6da4;
+  opacity: .65;
+  cursor: not-allowed;
+}
+
+control-messages {
+  color: #E82C0C;
+
+  margin: 6px 0;
+}
diff --git a/src/runtime_output/runtime_outputview.html b/src/runtime_output/runtime_outputview.html
new file mode 100644
index 00000000..418ed515
--- /dev/null
+++ b/src/runtime_output/runtime_outputview.html
@@ -0,0 +1,36 @@
+<h2>Runtime Output</h2>
+<h4 class="info-mode">{{ editmode | uppercase}} </h4>
+<hr>
+<test-connection-modal #viewTestConnectionModal titleName='Test connection for:'>
+</test-connection-modal>
+<p [ngSwitch]="editmode">
+    <ng-template ngSwitchCase="list">
+        <div class="row">
+            <div class="col-md-9 text-left">
+                <label [tooltip]="'Refresh'" container="body" style="margin-top:10px; border-right: 1px solid; padding-right: 5px;"><i class="glyphicon glyphicon-refresh" (click)="reloadData()"></i></label>
+                <label [tooltip]="'Clear Filter'" container="body" (click)="onResetFilter()" style="margin-top: 10px"><i class="glyphicon glyphicon-trash text-primary"></i></label>
+                <input *ngIf="config.filtering" placeholder="Filter all columns" required="false" [(ngModel)]="myFilterValue" [ngTableFiltering]="config.filtering" class="form-control select-pages" (tableChanged)="onChangeTable(config)" />
+                <label style="font-size:100%" [ngClass]="length > 0 ? ['label label-info'] : ['label label-warning']">{{length}} Results</label>
+            </div>
+            <div class="col-md-3 text-right">
+                <span style="margin-left: 20px"> Items per page: </span>
+                <select class="select-pages" style="width:auto" [ngModel]="itemsPerPage || 'All'" (ngModelChange)="changeItemsPerPage($event)">
+                    <option *ngFor="let option of itemsPerPageOptions" style="padding-left:2px" [value]="option.value">{{option.title}}</option>
+                </select>
+            </div>
+        </div>
+        <div class="row well" *ngIf="isRequesting === false" style="margin-top: 10px; padding: 10px 0px 10px 15px;">
+            <span> Status: </span>
+            <label style="font-size:100%" [ngClass]="['label label-success']" (click)="toogleActiveFilter('active')" container="body" tooltip="Filter actived outputs">{{activeOutputs}} Actived <i [ngClass]="activeFilter === true ? ['glyphicon glyphicon-ok'] : ['glyphicon glyphicon-unchecked']"></i></label>
+            <label style="font-size:100%;margin-left:15px" [ngClass]="['label label-danger']" (click)="toogleActiveFilter('deactive')" container="body" tooltip="Filter deactived outputs">{{length - activeOutputs}} Deactived <i [ngClass]="deactiveFilter === true ? ['glyphicon glyphicon-ok'] : ['glyphicon glyphicon-unchecked']"></i></label>
+            <label *ngIf="noConnectedOutputs > 0" [ngClass]="['label label-warning']" style="margin-left:15px; font-size:100%" (click)="toogleActiveFilter('noconnected')" tooltip="Filter actived but no connected outputs"><i class="glyphicon glyphicon-warning-sign"></i> Warning {{noConnectedOutputs}} {{noConnectedOutputs > 1 ? 'outputs' : 'device'}} trying to connect... <i [ngClass]="noConnectedFilter === true ? ['glyphicon glyphicon-ok'] : ['glyphicon glyphicon-unchecked']"></i></label>
+        </div>
+        <br>
+        <my-spinner [isRunning]="isRequesting"></my-spinner>
+        <ng-table *ngIf="isRequesting === false" [config]="config" (tableChanged)="onChangeTable(config)" (extraActionClicked)="onExtraActionClicked($event)" (viewedItem)="initRuntimeInfo($event.ID,null, true)" (editedItem)="editMeasGroup($event)" (removedItem)="removeItem($event)"
+        (testedConnection)="showTestConnectionModal($event)" [showCustom]="false" [showOutput]="true" [rows]="rows" [columns]="columns" [extraActions]="extraActions">
+    </ng-table>
+    <pagination *ngIf="config.paging" class="pagination-sm" [(ngModel)]="page" [totalItems]="length" [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="onChangeTable(config, $event)" (numPages)="numPages = $event">
+    </pagination>
+    <pre *ngIf="config.paging" class="card card-block card-header">Page: {{page}} / {{numPages}}</pre>
+</ng-template>
\ No newline at end of file