<% content_for :javascripts do %>
  <%= javascript_include_tag "monitor/data.js" %>
<% end %>

<script type="text/javascript" charset="utf-8">
    ThreeScale.service_id = <%= @service.id %>;

    (function(){
      var value, state, $this;
      $(document).ready(function(){
        Monitor.Overview.display();
      });
    })();
</script>

<style type="text/css" media="screen">
  table#api-overview td span.method-name.up {
    background: url(<%= asset_path 'monitor/green.png' %>) no-repeat;
  }

  table#api-overview td span.method-name.down {
    background: url(<%= asset_path 'monitor/red.png' %>) no-repeat;
  }

  table#api-overview td span.method-name.problems {
    background: url(<%= asset_path 'monitor/yellow.png' %>) no-repeat;
  }

  table#api-overview td span {
    display: block;
    height: 19px;
    padding-left: 25px;
  }

  table#api-overview td {
    padding: 5px 2px 5px 4px;
  }

</style>

<h2>Overview</h2>

<table width="100%" class='data api-overview' id='api-overview' style='display:none;'>
  <thead>
    <th>Method</th>
    <th>Availability Status</th>
    <th>Last Response Time</th>
  </thead>
  <tbody>
  </tbody>
</table>
<div id="loading"><h3>Loading...</h3></div>
