<!--
 Copyright European Organization for Nuclear Research (CERN)

 Licensed under the Apache License, Version 2.0 (the "License");
 You may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0

 Authors:
 - Ralph Vigne <ralph.vigne@cern.ch> 2015
-->

$var title: HTTP Monitoring Overview
$var script: <script src="/static/http_monitoring_index.js"></script><link rel="stylesheet" href="/static/http_monitoring.css"></link><script src="/static/http_monitoring_utils.js"></script>

<!-- div class="row">
  <ul class="tabs top-menu" data-tab>
    <li class="tab-title mall-2 large-2 columns active"><a href="https://rucio-ui-dev.cern.ch/webstats"     tabindex="0">Overview</a></li>
    <li class="tab-title large-2 columns"><a href="https://rucio-ui-dev.cern.ch/webstats/accounts"   tabindex="1">Accounts Summary</a></li>
    <li class="tab-title small-2 large-2 columns"><a href="https://rucio-ui-dev.cern.ch/webstats/resources"  tabindex="2">Resources Summary</a></li>
    <li class="tab-title small-2 large-2 columns"><a href="https://rucio-ui-dev.cern.ch/webstats/usiapiclasses" tabindex="3">API Classes Summary</a></li>
    <li class="tab-title small-2 large-2 columns"><a href="https://rucio-ui-dev.cern.ch/webstats/useragents" tabindex="3">User Agents Summary</a></li>
    <li class="tab-title small-2 large-2 columns"><a href="https://rucio-ui-dev.cern.ch/webstats/scripts"    tabindex="4">Scripts Summary</a></li>
  </ul>
</div>

<ul class="example-orbit" data-orbit data-options="timer_speed: 5000">
  <li>
    <div class="row">
      <div class="large-12 column rucio-slider-header">Hits</div>
    </div>
    <div class="row">
      <ul class="small-block-grid-1 large-block-grid-2">
        <li>
          <div class="chart-wrapper" id="accounts">
              <div class="chart hits">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        </li>
        <li>
          <div class="chart-wrapper" id="resources">
              <div class="chart hits">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        </li>
        <li>
          <div class="chart-wrapper" id="apiclasses">
              <div class="chart hits">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        <li>
      </ul>
    </div>
  </li>
  <li>
    <div class="row">
      <div class="large-12 column rucio-slider-header">Bandwidth</div>
    </div>
    <div class="row">
      <ul class="small-block-grid-1 large-block-grid-2">
        <li>
          <div class="chart-wrapper" id="accounts">
              <div class="chart mb">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        </li>
        <li>
          <div class="chart-wrapper" id="resources">
              <div class="chart mb">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        </li>
        <li>
          <div class="chart-wrapper" id="apiclasses">
              <div class="chart mb">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        <li>
      </ul>
    </div>
  </li>
  <li>
    <div class="row">
      <div class="large-12 column rucio-slider-header">Response time</div>
    </div>
    <div class="row">
      <ul class="small-block-grid-1 large-block-grid-2">
        <li>
          <div class="chart-wrapper" id="accounts">
              <div class="chart sec">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        </li>
        <li>
          <div class="chart-wrapper" id="resources">
              <div class="chart sec">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        </li>
        <li>
          <div class="chart-wrapper" id="apiclasses">
              <div class="chart sec">
                <img class='spinner' alt="Loading" src="/media/spinner.gif"/>
              </div>
              <a href="/webstats/accounts" class="button expand show-details">Details</a>
          </div>
        <li>
      </ul>
    </div>
  </li>
</ul -->
