{% extends 'admin/master.html' %}
{% import 'admin/lib.html' as lib with context %}
{% import 'admin/model/layout.html' as model_layout with context %}

{% block head %}
  {{ super() }}
  {{ lib.form_css() }}
  <link href="{{ url_for('static', filename='eportal-css/health_monitor.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
  {% block filters %}
    <ul class="nav nav-tabs actions-nav">
        <li class="dropdown">
          {{ model_layout.filter_options() }}
        </li>
        <li class="active">
          <a>Selected servers: <b>{{ selected_servers }}</b> of <b>{{ total_servers }}</b></a>
        </li>
    </ul>
    {{ model_layout.filter_form() }}
  {% endblock %}

  <div class="mt-5">&nbsp;</div>
  <div class="dashboard-row">
    {% block uptime_info %}
      <div class="chart-container">
        <canvas id="uptime-distribution-chart"></canvas>
      </div>
      <div class="uptime-stats">
        <table class="table table-condensed uptime-info">
          <tr>
            <td>{{ _gettext('Max uptime' + ':') }}</td>
            <td>{{ uptime['max'] }}</td>
          </tr>
          <tr>
            <td>{{ _gettext('Average uptime') + ':' }}</td>
            <td>{{ uptime['average'] }}</td>
          </tr>
          <tr>
            <td>{{ _gettext('Median uptime') + ':' }}</td>
            <td>{{ uptime['median'] }}</td>
          </tr>
        </table>
      </div>
    {% endblock %}
    {% block arch_distribution %}
      <div class="chart-container">
        <canvas id="arch-distribution-chart"></canvas>
      </div>
    {% endblock %}
  </div>

  <div class="mt-5">&nbsp;</div>
  {% block os_distribution %}
    <p class="h5 text-center">OS distribution (top 10)</p>
    <table class="table table-bordered table-striped os-distribution">
      <thead>
        <th>Distro name</th>
        <th title="KCare servers with activity in the last 30 days">KCare active servers</th>
        <th title="KCare servers with no activity in the last 30 days">KCare silent servers</th>
        <th title="LibCare Servers with activity in the last 30 days">LibCare active servers</th>
        <th title="LibCare with no activity in the last 30 days">LibCare silent servers</th>
      </thead>
      <tbody>
        {% for distro, kc_active_count, kc_silent_count, lc_active_count, lc_silent_count in os_distribution %}
        <tr class="{% if loop.last %}table-row--total{% endif %}">
          <td>{{ distro }}</td>
          <td>{{ kc_active_count }}</td>
          <td>{{ kc_silent_count }}</td>
          <td>{{ lc_active_count }}</td>
          <td>{{ lc_silent_count }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endblock os_distribution %}

  {% block kernel_distribution %}
  <p class="h5 text-center">Kernel distribution (top 10)</p>
  <table class="table table-bordered table-striped kernel-distribution">
    <thead>
    <th>Kernel version</th>
    <th title="KCare servers with activity in the last 30 days">KCare active servers</th>
    <th title="KCare servers with no activity in the last 30 days">KCare silent servers</th>
    </thead>
    <tbody>
    {% for kernel, kc_active_count, kc_silent_count in kernel_distribution %}
    <tr class="{% if loop.last %}table-row--total{% endif %}">
      <td>{{ kernel }}</td>
      <td>{{ kc_active_count }}</td>
      <td>{{ kc_silent_count }}</td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
  {% endblock kernel_distribution %}
{% endblock %}

{% block tail %}
  {{ super() }}
  <div id="filter-groups-data" class="hidden-elem">{{ filter_groups|tojson|safe }}</div>
  <div id="active-filters-data" class="hidden-elem">{{ active_filters|tojson|safe }}</div>
  <div id="uptime-distribution-data" class="hidden-elem">{{ uptime_distribution_data|tojson|safe }}</div>
  <div id="arch-distribution-data" class="hidden-elem">{{ arch_distribution_data|tojson|safe }}</div>
  {{ lib.form_js() }}
  <script src="{{ admin_static.url(filename='admin/js/filters.js', v='1.0.0') }}"></script>
  <script src="{{ url_for('static', filename='vendor/chart.umd.js', v='4.4.8') }}"></script>
  <script src="{{ url_for('static', filename='eportal-js/health_monitor.js') }}"></script>
{% endblock %}