Truckroll running
diff --git a/views/ngXosViews/truckroll/src/css/dev.css b/views/ngXosViews/truckroll/src/css/dev.css
new file mode 100644
index 0000000..5842388
--- /dev/null
+++ b/views/ngXosViews/truckroll/src/css/dev.css
@@ -0,0 +1,6 @@
+#xosTruckroll{
+  position: absolute;
+  top: 100px;
+  left: 200px;
+  width: 80%;
+}
\ No newline at end of file
diff --git a/views/ngXosViews/truckroll/src/css/truckroll.css b/views/ngXosViews/truckroll/src/css/truckroll.css
new file mode 100644
index 0000000..4ff5ccf
--- /dev/null
+++ b/views/ngXosViews/truckroll/src/css/truckroll.css
@@ -0,0 +1,56 @@
+.row + .row {
+  margin-top: 20px;
+}
+
+/* LOADER */
+.loader {
+  font-size: 10px;
+  margin: 0 auto;
+  text-indent: -9999em;
+  width: 11em;
+  height: 11em;
+  border-radius: 50%;
+  background: #ffffff;
+  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  position: relative;
+  animation: load3 1.4s infinite linear;
+  transform: translateZ(0);
+}
+.loader:before {
+  width: 50%;
+  height: 50%;
+  background: #105E9E;
+  border-radius: 100% 0 0 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '';
+}
+.loader:after {
+  background: #fff;
+  width: 75%;
+  height: 75%;
+  border-radius: 50%;
+  content: '';
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+@keyframes load3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/views/ngXosViews/truckroll/src/index.html b/views/ngXosViews/truckroll/src/index.html
new file mode 100644
index 0000000..0b6606e
--- /dev/null
+++ b/views/ngXosViews/truckroll/src/index.html
@@ -0,0 +1,33 @@
+<!-- browserSync -->
+<!-- bower:css -->
+<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
+<!-- endbower --><!-- endcss -->
+<!-- inject:css -->
+<link rel="stylesheet" href="/css/dev.css">
+<link rel="stylesheet" href="/css/truckroll.css">
+<!-- endinject -->
+
+<div ng-app="xos.truckroll" id="xosTruckroll">
+    <div ui-view></div>
+</div>
+
+<!-- bower:js -->
+<script src="vendor/jquery/dist/jquery.js"></script>
+<script src="vendor/angular/angular.js"></script>
+<script src="vendor/angular-mocks/angular-mocks.js"></script>
+<script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
+<script src="vendor/angular-cookies/angular-cookies.js"></script>
+<script src="vendor/angular-resource/angular-resource.js"></script>
+<script src="vendor/ng-lodash/build/ng-lodash.js"></script>
+<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
+<!-- endbower --><!-- endjs -->
+<!-- inject:js -->
+<script src="/xosHelpers/src/xosHelpers.module.js"></script>
+<script src="/xosHelpers/src/services/noHyperlinks.interceptor.js"></script>
+<script src="/xosHelpers/src/services/csrfToken.interceptor.js"></script>
+<script src="/xosHelpers/src/services/api.services.js"></script>
+<script src="/api/ng-xoslib.js"></script>
+<script src="/api/ng-xos.js"></script>
+<script src="/api/ng-hpcapi.js"></script>
+<script src="/.tmp/main.js"></script>
+<!-- endinject -->
diff --git a/views/ngXosViews/truckroll/src/js/main.js b/views/ngXosViews/truckroll/src/js/main.js
new file mode 100644
index 0000000..af8e6cb
--- /dev/null
+++ b/views/ngXosViews/truckroll/src/js/main.js
@@ -0,0 +1,71 @@
+'use strict';
+
+angular.module('xos.truckroll', [
+  'ngResource',
+  'ngCookies',
+  'ngLodash',
+  'ui.router',
+  'xos.helpers'
+])
+.config(($stateProvider) => {
+  $stateProvider
+  .state('user-list', {
+    url: '/',
+    template: '<truckroll></truckroll>'
+  });
+})
+.config(function($httpProvider){
+  $httpProvider.interceptors.push('NoHyperlinks');
+})
+.service('Subscribers', function($resource){
+  return $resource('/xos/subscribers/:id');
+})
+.service('Truckroll', function($resource){
+  return $resource('/xoslib/truckroll/:id');
+})
+.directive('truckroll', function(){
+  return {
+    restrict: 'E',
+    scope: {},
+    bindToController: true,
+    controllerAs: 'vm',
+    templateUrl: 'templates/truckroll.tpl.html',
+    controller: function($timeout, Subscribers, Truckroll){
+      Subscribers.query().$promise
+      .then((subscribers) => {
+        this.subscribers = subscribers;
+      });
+
+      this.loader = false;
+
+      this.runTest = () => {
+
+        // clean previous tests
+        delete this.truckroll.result;
+
+        const test = new Truckroll(this.truckroll);
+        this.loader = true;
+        test.$save()
+        .then((res) => {
+          this.waitForTest(res.id);
+        })
+      };
+
+      this.waitForTest = (id) => {
+        Truckroll.get({id: id}).$promise
+        .then((testResult) => {
+          if(testResult.is_synced){
+            this.truckroll = angular.copy(testResult);
+            Truckroll.delete({id: id});
+            this.loader = false;
+          }
+          else{
+            $timeout(() => {
+              this.waitForTest(id);
+            }, 2000)
+          }
+        })
+      };
+    }
+  };
+});
\ No newline at end of file
diff --git a/views/ngXosViews/truckroll/src/templates/truckroll.tpl.html b/views/ngXosViews/truckroll/src/templates/truckroll.tpl.html
new file mode 100644
index 0000000..3454107
--- /dev/null
+++ b/views/ngXosViews/truckroll/src/templates/truckroll.tpl.html
@@ -0,0 +1,86 @@
+<div class="row">
+  <h2>Virtual Truck Roll</h2>
+  <p>Use this page to run test against your subscriber</p>
+</div>
+<form ng-submit="vm.runTest()">
+  <div class="row">
+    <div class="col-xs-12">
+      <label>Target:</label>
+    </div>
+    <div class="col-xs-12">
+      <select class="form-control" ng-model="vm.truckroll.target_id" ng-options="s.id as s.humanReadableName for s in vm.subscribers"></select>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-xs-12">
+      <label>Scope:</label>
+    </div>
+    <div class="col-xs-6">
+      <a 
+      ng-click="vm.truckroll.scope = 'container'"
+      ng-class="{'btn-default': vm.truckroll.scope !== 'container', 'btn-primary': vm.truckroll.scope === 'container'}"
+      class="btn btn-block"
+      >
+        Container
+      </a>
+    </div>
+    <div class="col-xs-6">
+      <a 
+      ng-click="vm.truckroll.scope = 'vm'"
+      ng-class="{'btn-default': vm.truckroll.scope !== 'vm', 'btn-primary': vm.truckroll.scope === 'vm'}"
+      class="btn btn-block"
+      >
+        VM
+      </a>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-xs-12">
+      <label>Test:</label>
+    </div>
+    <div class="col-xs-4">
+      <a 
+      ng-click="vm.truckroll.test = 'ping'"
+      ng-class="{'btn-default': vm.truckroll.test !== 'ping', 'btn-primary': vm.truckroll.test === 'ping'}"
+      class="btn btn-block">Ping</a>
+    </div>
+    <div class="col-xs-4">
+      <a 
+      ng-click="vm.truckroll.test = 'traceroute'"
+      ng-class="{'btn-default': vm.truckroll.test !== 'traceroute', 'btn-primary': vm.truckroll.test === 'traceroute'}"
+      class="btn btn-block">Traceroute</a>
+    </div>
+    <div class="col-xs-4">
+      <a 
+      ng-click="vm.truckroll.test = 'tcpdump'"
+      ng-class="{'btn-default': vm.truckroll.test !== 'tcpdump', 'btn-primary': vm.truckroll.test === 'tcpdump'}"
+      class="btn btn-block">Tcp Dump</a>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-xs-12">
+      <label>Argument:</label>
+    </div>
+    <div class="col-xs-12">
+      <input type="text" class="form-control" ng-model="vm.truckroll.argument"/>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-xs-12" ng-show="!vm.loader">
+      <button class="btn btn-success btn-block">Run test</button>
+    </div>
+    <div class="col-xs-12" ng-show="vm.loader">
+      <div class="loader"></div>
+    </div>
+  </div>
+  <div class="row" ng-hide="!vm.truckroll.result">
+    <div class="col-xs-12">
+      <label>
+        Result:
+      </label>
+    </div>
+    <div class="col-xs-12">
+      <pre>{{vm.truckroll.result}}</pre>
+    </div>
+  </div>
+</form>
\ No newline at end of file