xos/gui/src/app/components/vtr/vtr-dashboard.html

<style>
  .row + .row {
    margin-top: 20px;
  }
</style>
<div class="row">
  <div class="col-xs-12">
    <h1>Virtual Truck Roll Dashboard</h1>
    <p>Use this page to run test against your subscribers</p>
    <blockquote>Please note that this is a reference implementation that is intended to demontrate all the possible capabilities. <br/>In a real scenario you may want to integrate the API provided by this service in your help desk software.</blockquote>
  </div>
</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.name 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" required />
    </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>
</form>
<div class="row">
  <div class="col-xs-12 animate-vertical" ng-show="vm.loader">
    <div class="loader"></div>
  </div>
</div>
<div class="row" ng-hide="!vm.truckroll.result_code">
  <div class="col-xs-12">
    <label>Result Code</label>
  </div>
  <div class="col-xs-12">
    <pre>{{vm.truckroll.result_code}}</pre>
  </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>
<div class="row" ng-hide="!vm.truckroll.backend_status">
  <div class="col-xs-12">
    <label>Backend Status</label>
  </div>
  <div class="col-xs-12">
    <pre>{{vm.truckroll.backend_status}}</pre>
  </div>
</div>

<div class="row" ng-show="vm.error">
  <div class="col-xs-12">
    <div class="alert alert-danger">
      {{vm.error}}
    </div>
  </div>
</div>