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

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

{% block content %}
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel"></h4>
      </div>
      <div class="modal-body" id="ModalBody">
        <img id="imageModal" width="100%"/>
      </div>
      <div class="modal-footer" id="ModalFooter">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>
<div class="row form-group">
  <div class="col-md-12">
    <div id="daterange">
      <i class="fa fa-calendar"></i>
      <span></span>
      <i class="caret"></i>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12 col-xl-6" id="Loadavg"></div>
  <div class="col-md-12 col-xl-6" id="CPU"></div>
  <div class="col-md-12 col-xl-6" id="CtxForks"></div>
  <div class="col-md-12 col-xl-6" id="Memory"></div>
  <div class="col-md-12 col-xl-6" id="Swap"></div>
  <div class="col-md-12 col-xl-6" id="FsSize"></div>
  <div class="col-md-12 col-xl-6" id="FsUsage"></div>
  <div class="col-md-12 col-xl-6" id="TPS"></div>
  <div class="col-md-12 col-xl-6" id="InstanceSize"></div>
  <div class="col-md-12 col-xl-6" id="TblspcSize"></div>
  <div class="col-md-12 col-xl-6" id="Sessions"></div>
  <div class="col-md-12 col-xl-6" id="Blocks"></div>
  <div class="col-md-12 col-xl-6" id="HRR"></div>
  <div class="col-md-12 col-xl-6" id="Checkpoints"></div>
  <div class="col-md-12 col-xl-6" id="WalFilesSize"></div>
  <div class="col-md-12 col-xl-6" id="WalFilesCount"></div>
  <div class="col-md-12 col-xl-6" id="WalFilesRate"></div>
  <div class="col-md-12 col-xl-6" id="WBuffers"></div>
  <div class="col-md-12 col-xl-6" id="Locks"></div>
  <div class="col-md-12 col-xl-6" id="WLocks"></div>
</div>

<script src="/js/dygraph-combined.js"></script>
<script src="/js/dygraph-extra.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/daterangepicker.js"></script>
<script src="/js/monitoring/temboard.monitoring.js"></script>
<script>
api_url = "/server/{{instance.agent_address}}/{{instance.agent_port}}/monitoring"

sync_graphs = [];
data_api_url = api_url+"/data";
interval_api_url = api_url+"/interval";
var dateFormat = 'DD/MM/YYYY HH:mm';

$(document).ready(function() {
  /**
   * Parse location hash to get start and end date
   * If dates are not provided, falls back to the date range corresponding to
   * the last 24 hours.
   */
  var start;
  var end;
  var now = moment();
  var minus24h = now.clone().subtract(24, 'hours');
  var p = getHashParams();
  if (p.start && p.end) {
    start = moment(parseInt(p.start));
    end = moment(parseInt(p.end));
  }
  start = start && start.isValid() ? start : minus24h;
  end = end && end.isValid() ? end : now;

  $("#daterange").daterangepicker({
    startDate: start,
    endDate: end,
    alwaysShowCalendars: true,
    timePicker: true,
    timePickerIncrement: 5,
    timePicker24Hour: true,
    locale: {
      format: dateFormat
    },
    ranges: {
      'Last Hour': [now.clone().subtract(1, 'hours'), now],
      'Last 24 Hours': [minus24h, now],
      'Last 7 Days': [now.clone().subtract(7, 'days'), now],
      'Last 30 Days': [now.clone().subtract(30, 'days'), now],
      'Last 12 Months': [now.clone().subtract(12, 'months'), now]
    }
  });
  updateDateRange(start, end);
  $('#daterange').on('apply.daterangepicker', function(ev, picker) {
    synchronize_zoom(
      picker.startDate,
      picker.endDate,
      data_api_url,
      true
    );
  });

  var graphs = [
    // System
    {id: "Loadavg",title: "Loadaverage",api: "loadavg",options: {colors: [colors.blue, colors.orange, colors.green], ylabel: "Loadaverage"}},
    {id: "CPU",title: "CPU Usage",api: "cpu",options: {colors: [colors.blue, colors.green, colors.red, colors.gray], ylabel: "%", stackedGraph: true}},
    {id: "CtxForks",title: "Context switches and forks per second",api: "ctxforks",options: {colors: [colors.blue, colors.green]}},
    {id: "Memory",title: "Memory usage",api: "memory",options: {colors: [colors.light_gray, colors.green, colors.blue, colors.orange], ylabel: "Memory", labelsKMB: false, labelsKMG2: true, stackedGraph: true}},
    {id: "Swap",title: "Swap usage",api: "swap",options: {colors: [colors.red], ylabel: "Swap", labelsKMB: false, labelsKMG2: true, stackedGraph: true}},
    {id: "FsSize",title: "Filesystems size",api: "fs_size",options: {ylabel: "Size", labelsKMB: false, labelsKMG2: true}},
    {id: "FsUsage",title: "Filesystems usage",api: "fs_usage",options: {ylabel: "%"}},
    // PostgreSQL
    {id: "TPS",title: "Transactions per second",api: "tps",options: {colors: [colors.green, colors.red], ylabel: "Transactions", stackedGraph: true}},
    {id: "InstanceSize",title: "Instance size",api: "instance_size",options: {colors: [colors.blue], ylabel: "Size", stackedGraph: true, labelsKMB: false, labelsKMG2: true}},
    {id: "TblspcSize",title: "Tablespaces size",api: "tblspc_size",options: {ylabel: "Size", stackedGraph: true, labelsKMB: false, labelsKMG2: true}},
    {id: "Sessions",title: "Sessions",api: "sessions",options: {ylabel: "Sessions", stackedGraph: true}},
    {id: "Blocks",title: "Blocks Hit vs Read per second",api: "blocks",options: {colors: [colors.red, colors.green], ylabel: "Blocks"}},
    {id: "HRR",title: "Blocks Hit vs Read ratio",api: "hitreadratio",options: {colors: [colors.blue], ylabel: "%"}},
    {id: "Checkpoints",title: "Checkpoints",api: "checkpoints",options: {ylabel: "Checkpoints", y2label: "Duration", series: {'write_time': {axis: 'y2'},'sync_time': {axis: 'y2'}}}},
    {id: "WalFilesSize",title: "WAL Files size",api: "wal_files_size",options: {colors: [colors.blue, colors.blue2], labelsKMB: false, labelsKMG2: true, ylabel: "Size"}},
    {id: "WalFilesCount",title: "WAL Files",api: "wal_files_count",options: {colors: [colors.blue, colors.blue2], ylabel: "WAL files"}},
    {id: "WalFilesRate",title: "WAL Files written rate",api: "wal_files_rate",options: {colors: [colors.blue], ylabel: "Byte per second", labelsKMB: false, labelsKMG2: true, stackedGraph: true}},
    {id: "WBuffers",title: "Written buffers",api: "w_buffers",options: {ylabel: "Written buffers", stackedGraph: true}},
    {id: "Locks",title: "Locks",api: "locks",options: {ylabel: "Locks"}},
    {id: "WLocks",title: "Waiting Locks",api: "waiting_locks",options: {ylabel: "Waiting Locks"}}
  ];

  for (var i in graphs)
  {
    sync_graphs.push({
      dygraph: new_graph(graphs[i].id, graphs[i].title, graphs[i].api, data_api_url, graphs[i].options, start, end),
      api: graphs[i].api
    });
  }
});

</script>

{% end %}