{% extends 'base.html' %}

{% block title %}Health Monitor - ePortal{% if current_unit() %} [{{ current_unit().title }}]{% endif %}{% endblock %}

{# A canvas is pixels, so the table beside it is both the chart's text
   alternative and the only route to a slice's drill-down that is not a click. #}
{% macro distribution_chart(chart_id, name, slice_column, chart_data) %}
  <div class="chart-container">
    {# Announcing the canvas too would read every figure twice. #}
    <canvas id="{{ chart_id }}" aria-hidden="true"></canvas>
    {% if not chart_data['data'] %}
    {# A table of the chart's figures with no figures in it is column headings
       and nothing else -- and with the canvas hidden it would be all this
       section says.  The name is repeated here because the caption goes with
       the table and the visible title is drawn in canvas pixels. #}
    <p>{{ name }}: no servers to report.</p>
    {% else %}
    {# Wide data scrolls inside its own container so the page still reflows;
       focusable, or only a mouse could reach the scrolled-off columns, and
       named, or that stop announces as a group with nothing to say. #}
    <div class="table-responsive" role="region" tabindex="0" aria-labelledby="{{ chart_id }}-caption">
    <table class="table table-sm">
      {# Chart.js draws the name inside the canvas, out of reach of anyone the
         canvas is hidden from. #}
      <caption id="{{ chart_id }}-caption" class="visually-hidden">{{ name }}</caption>
      <thead>
        <tr>
          <th scope="col">{{ slice_column }}</th>
          <th scope="col">Servers</th>
        </tr>
      </thead>
      <tbody>
        {% for point in chart_data['data'] %}
        <tr>
          <th scope="row" class="fw-normal"><a href="{{ point['url'] }}">{{ chart_data['labels'][loop.index0] }}</a></th>
          <td>{{ point['value'] }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% endif %}
  </div>
{% endmacro %}

{% block head %}
  {{ super() }}
  <link href="{{ url_for('static', filename='vendor/tom-select/tom-select.bootstrap5.min.css', v='2.4.3') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='vendor/fa-assets/vendor/bootstrap-daterangepicker/daterangepicker.css', v='1.3.22') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='eportal-css/health_monitor.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
  <h1 class="h3">Health Monitor</h1>
  {% block filters %}
    <ul class="nav nav-tabs actions-nav">
        <li class="dropdown">
          <a class="dropdown-toggle filter-button" data-bs-toggle="dropdown" href="#" role="button" tabindex="0" aria-expanded="false">
              Add Filter
          </a>
          <ul class="dropdown-menu field-filters">
              {% for k in filter_groups %}
              <li>
                  {# href, so the option is focusable and Enter reaches the
                     click handler; dropdown-item, so the menu answers the
                     arrow keys Bootstrap binds on the toggle. #}
                  <a class="dropdown-item filter filter-option" href="#">{{ k }}</a>
              </li>
              {% endfor %}
          </ul>
        </li>
        <li class="active">
          <a>Selected servers: <b>{{ selected_servers }}</b> of <b>{{ total_servers }}</b></a>
        </li>
    </ul>
    <form id="filter_form" method="GET" action="{{ return_url }}">
        {% for arg_name, arg_value in extra_args.items() %}
        <input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
        {% endfor %}
        {% if sort_column is not none %}
        <input type="hidden" name="sort" value="{{ sort_column }}">
        {% endif %}
        <div class="float-end">
            <button type="submit" class="btn btn-primary hidden-elem">Apply</button>
            {% if active_filters %}
            <a href="{{ clear_search_url }}" class="btn btn-secondary">Reset Filters</a>
            {% endif %}
        </div>
        <table class="filters"></table>
    </form>
    <div class="clearfix"></div>
  {% endblock %}

  <div class="mt-5">&nbsp;</div>
  <div class="dashboard-row">
    {% block uptime_info %}
      {{ distribution_chart('uptime-distribution-chart', 'Uptime distribution', 'Uptime', uptime_distribution_data) }}
      <div class="uptime-stats">
        <div class="table-responsive" role="region" tabindex="0" aria-labelledby="uptime-summary-caption">
        <table class="table table-sm uptime-info">
          <caption id="uptime-summary-caption" class="visually-hidden">Uptime across the selected servers</caption>
          {% for label, key in [('Max uptime', 'max'), ('Average uptime', 'average'), ('Median uptime', 'median')] %}
          <tr>
            <th scope="row" class="fw-normal">{{ label }}:</th>
            <td>{{ uptime[key] }}</td>
          </tr>
          {% endfor %}
        </table>
        </div>
      </div>
    {% endblock %}
    {% block arch_distribution %}
      {{ distribution_chart('arch-distribution-chart', 'CPU arch distribution', 'CPU architecture', arch_distribution_data) }}
    {% endblock %}
  </div>

  <div class="mt-5">&nbsp;</div>
  {% block os_distribution %}
    <h2 id="os-distribution-heading" class="h5 text-center">OS distribution (top 10)</h2>
    <div class="table-responsive" role="region" tabindex="0" aria-labelledby="os-distribution-heading">
    <table class="table table-bordered table-striped os-distribution">
      <thead>
        <tr>
          <th scope="col">Distro name</th>
          <th scope="col" title="KCare servers with activity in the last 30 days">KCare active servers</th>
          <th scope="col" title="KCare servers with no activity in the last 30 days">KCare silent servers</th>
          <th scope="col" title="LibCare servers with activity in the last 30 days">LibCare active servers</th>
          <th scope="col" title="LibCare servers with no activity in the last 30 days">LibCare silent servers</th>
        </tr>
      </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>
    </div>
  {% endblock os_distribution %}

  {% block kernel_distribution %}
  <h2 id="kernel-distribution-heading" class="h5 text-center">Kernel distribution (top 10)</h2>
  <div class="table-responsive" role="region" tabindex="0" aria-labelledby="kernel-distribution-heading">
  <table class="table table-bordered table-striped kernel-distribution">
    <thead>
    <tr>
      <th scope="col">Kernel version</th>
      <th scope="col" title="KCare servers with activity in the last 30 days">KCare active servers</th>
      <th scope="col" title="KCare servers with no activity in the last 30 days">KCare silent servers</th>
    </tr>
    </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>
  </div>
  {% 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>
  <script src="{{ url_for('static', filename='vendor/fa-assets/vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
  <script src="{{ url_for('static', filename='vendor/tom-select/tom-select.popular.min.js', v='2.4.3') }}"></script>
  <script src="{{ url_for('static', filename='vendor/fa-assets/admin/js/form.js', v='1.0.2') }}"></script>
  <script src="{{ url_for('static', filename='vendor/fa-assets/admin/js/filters.js', v='1.0.6') }}"></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 %}