<div>
  <h1 class="text-danger">
    <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Health
  </h1>

  <div class="row">

    <div class="col-md-6">
      <div>
        <nvd3 options="healthCtrl.graph.averageResponseTime.options" data="healthCtrl.graph.averageResponseTime.data" api="healthCtrl.graph.averageResponseTime.api"></nvd3>
      </div>
      <ul class="list-group">
        <li class="list-group-item">
          <span>Total response time :</span><span class="badge">{{healthCtrl.health.total_response_time}}</span>
        </li>
      </ul>
      <ul class="list-group">
        <li class="list-group-item">
          <span>PID :</span><span class="badge">{{healthCtrl.health.pid}}</span>
        </li>
        <li class="list-group-item">
          <span>Uptime :</span><span class="badge">{{healthCtrl.health.uptime}}</span>
        </li>
      </ul>
    </div>

    <div class="col-md-6">
      <div>
        <nvd3 options="healthCtrl.graph.totalStatusCodeCount.options" data="healthCtrl.graph.totalStatusCodeCount.data" api="healthCtrl.graph.totalStatusCodeCount.api"></nvd3>
      </div>
      <ul class="list-group">
        <li class="list-group-item">
          <span>Total count :</span><span class="badge">{{healthCtrl.health.total_count}}</span>
        </li>
        <li class="list-group-item">
          <span>Count :</span><span class="badge">{{healthCtrl.health.count}}</span>
        </li>
      </ul>
    </div>

  </div>

  <div ng-if="healthCtrl.health.recent_errors">
    <h3>Recent HTTP Errors</h3>
    <table class="table table-striped table-bordered">
      <tr>
        <td>Status</td>
        <td>Request</td>
        <td>Time</td>
      </tr>
      <tr ng-repeat="entry in healthCtrl.health.recent_errors"
          ng-class="{'text-danger': entry.status_code >= 500}">
        <td>{{ entry.status_code }} &mdash; {{ entry.status }}</td>
        <td>
          <span class="badge">{{ entry.method }}</span>
          &nbsp;
          {{ entry.host }}{{ entry.path }}
        </td>
        <td>
          <span title="{{ entry.time }}">
            {{ entry.time_formatted }}
          </span>
        </td>
      </tr>
      <tr ng-if="healthCtrl.health.recent_errors.length == 0">
        <td colspan="3">
          <p class="text-muted text-center">No entries</p>
        </td>
      </tr>
    </table>
  </div>

</div>
