{% extends ../../../templates/base.html %}

{% block title %}[{{instance.hostname}}:{{instance.pg_port}}] - Dashboard{% end %}

{% block content %}

<div class="row row-dashboard">
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        Informations
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <table class="table-dashboard-info">
        <tbody>
        <tr>
          <th>OS:</th>
          <td id="os_version">{{ dashboard['os_version'] }}</td>
        </tr>
        <tr>
          <th>CPU:</th>
          <td id="cpu">{{ dashboard['n_cpu'] }}</td>
        </tr>
        <tr>
          <th>Memory:</th>
          <td id="memory" data-type="size">{{ dashboard['memory']['total'] * 1000 }}</td>
        </tr>
        <tr>
          <th>Databases size:</th>
          <td id="size">{{ dashboard['databases']['total_size'] }}</td>
        </tr>
        <tr>
          <th>Number of database:</th>
          <td id="nb_db">{{ dashboard['databases']['databases'] }}</td>
        </tr>
        <tr>
          <th>Uptime:</th>
          <td id="pg_uptime">{{ dashboard['pg_uptime'] }}</td>
        </tr>
        <tr>
          <th>Current time:</th>
          <td id="time">{{ dashboard['databases']['time'] }}</td>
        </tr>
        </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        TPS <div class="pull-right">Commit:<span id="tps_commit" class="label label-success">0</span> Rollback: <span id="tps_rollback" class="label label-danger">0</span></div>
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div id="canvas-tps-holder" class="canvas-wrapper">
          <canvas id="chart-tps" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        Loadaverage <div class="pull-right"><span id="loadaverage" class="label label-primary">{{dashboard['loadaverage']}}</span></div>
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div id="canvas-loadaverage-holder" class="canvas-wrapper">
          <canvas id="chart-loadaverage" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        CPU usage
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div id="canvas-cpu-holder" class="canvas-wrapper">
          <canvas id="chart-cpu" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        Memory usage
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div id="canvas-memory-holder" class="canvas-wrapper">
          <canvas id="chart-memory" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        Cache Hit ratio
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div id="canvas-hitratio-holder" class="canvas-wrapper">
          <canvas id="chart-hitratio" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        Buffers <div class="pull-right"><span id="buffers_delta" class="label label-primary">{{buffers_delta}}</span></div>
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div id="canvas-buffers-holder" class="canvas-wrapper">
          <canvas id="chart-buffers" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        Active backends <div class="pull-right"><span id="backends" class="label label-primary">{{dashboard['active_backends']['nb']}}</span></div>
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div id="canvas-backends-holder" class="canvas-wrapper">
          <canvas id="chart-backends" />
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-lg-4 col-xl-3">
    <div class="panel panel-default panel-dashboard">
      <div class="panel-heading">
        Notifications
      </div>
      <!-- /.panel-heading -->
      <div class="panel-body" id="divNotif10">
        <div class="row text-center"><div class="progress"><div class="progress-bar progress-bar-striped" style="width: 100%;">Please wait ...</div></div></div>
      </div>
    </div>
  </div>
</div>
<!-- <script src="/js/Chart.js"></script> -->
<script src="/js/Chart.min.js"></script>
<script src="/js/dashboard/temboard.dashboard.js"></script>
<script src="/js/filesize.min.js"></script>
<script>
  var memorydata = {
    labels: [ "Active", "Cached", "Free" ],
    datasets: [
      {
        data: [{{dashboard['memory']['active']}}, {{dashboard['memory']['cached']}}, {{dashboard['memory']['free']}}],
        backgroundColor: ["#cc2936", "#29cc36","#eeeeee"]
      }
    ]
  };

  var cpudata = {
    labels: ["IO Wait", "Steal", "User", "System", "IDLE"],
    datasets: [
      {
        data: [{{dashboard['cpu']['iowait']}}, {{dashboard['cpu']['steal']}}, {{dashboard['cpu']['user']}}, {{dashboard['cpu']['system']}}, {{dashboard['cpu']['idle']}}],
        backgroundColor: ["#cc2936", "#cbff00", "#29cc36", "#cbff00", "#eeeeee"]
      }
    ]
  };

  var hitratiodata = {
    labels: ["Hit", "Read"],
    datasets: [
      {
        data: [{{dashboard['hitratio']}}, {{readratio}}],
        backgroundColor: ["#29cc36", "#cc2936"]
      }
    ]
  };
  var jdata_history = JSON.parse('{% raw history %}');
  for (var p in jdata_history)
  {
    var updchart = false;
    if (p == (jdata_history.length - 1))
    {
      updchart = true;
    }
    update_tps(jdata_history[p], updchart);
    update_loadaverage(jdata_history[p], updchart);
    update_backends(jdata_history[p], updchart);
    update_buffers(jdata_history[p], updchart);
  }
  var xsession = "{{xsession}}";
  var agent_address = "{{instance.agent_address}}";
  var agent_port = "{{instance.agent_port}}";
  window.setInterval(function () {refresh_dashboard(agent_address, agent_port, xsession)}, 2000);

  $(document).ready(function() {
    $('[data-type=size]').each(function(){
      if ($(this).html() != 'None')
        $(this).html(filesize($(this).html()));
    });
  });
</script>
{% end %}