{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% trans "Monitoring" %}{% endblock %}

{% block page_header %}
  {% include "horizon/common/_page_header.html" with title=_("Monitoring") %}
{% endblock page_header %}

{% block main %}
  <div id="monitoring_panel">
    <script type="text/javascript">
    // primitive auto-reload every 30 seconds
    function makeReloadInterval() {
      return setInterval(function(){location.reload();}, 30000);
    }
    reloadInterval = makeReloadInterval()
    function toggleRefresh() {
      checkbox = document.getElementById("checkBox_auto_refresh")
      if (!checkbox.checked) {
        clearInterval(reloadInterval)
      }
      else {
        reloadInterval = makeReloadInterval()
      }
    }
    </script>
    <input id="checkBox_auto_refresh" type="checkbox" checked onclick="toggleRefresh()">
    <label for="checkBox_auto_refresh">
      Auto refresh (every 30 seconds)
    </label>
    {{ monitoring_table.render }}
  </div>
  <script type="text/javascript">
  // color non-zero errors/warnings red/yellow
  table_rows = document.getElementById("monitoring").childNodes[5];
  num_rows = (table_rows.childNodes.length - 1)/2;
  for (i = 0; i < num_rows; i++) {
    row = table_rows.childNodes[1 + 2*i];
    if (row.className != "odd empty") {  // ignore the row indicating no items
      if (row.childNodes[1].innerHTML.trim() != "-") {
        row.childNodes[1].style.backgroundColor = "rgba(255, 0, 0, 0.5)";
      }
      if (row.childNodes[2].innerHTML.trim() != "-") {
        row.childNodes[2].style.backgroundColor = "rgba(255, 255, 0, 0.5)";
      }
    }
  }
  </script>
{% endblock %}