{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Admin/reseller-only: every site currently carrying a hard
   (cgroups v2) resource limit, with its live usage. Package
   f2-cgroups-panel's own admin page -- not the serverStatus app's. {% endcomment %}

{% block title %}Resource usage by site{% endblock %}

{% block content %}
<div ng-controller="resourceUsageBySiteController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Resource usage by site</h1>
      <p class="text-muted mb-0 small">
        Every website with a hard (cgroups v2) resource limit, and its
        current live usage. A site with no hard limit configured is not
        listed here.
      </p>
    </div>
    <button type="button" class="btn btn-outline-secondary" ng-click="load()" ng-disabled="busy">
      <i class="fas fa-rotate me-1"></i>Refresh
    </button>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>

  <div class="alert alert-warning py-2 px-3 small" ng-show="!busy &amp;&amp; !hardStatus.available" ng-cloak>
    <i class="fas fa-triangle-exclamation me-1"></i>
    Hard limits are not available on this server<span ng-if="hardStatus.reason">: <span ng-bind="hardStatus.reason"></span></span>.
  </div>

  <div class="card">
    <div class="card-body">

      <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
        <div class="input-group" style="max-width:320px">
          <span class="input-group-text"><i class="fas fa-magnifying-glass"></i></span>
          <input type="search" class="form-control" placeholder="Filter by domain or package"
                 ng-model="search" aria-label="Filter sites">
        </div>
        <span class="text-muted small ms-auto" ng-cloak>
          <span ng-bind="(rows | filter:search).length"></span> of
          <span ng-bind="rows.length"></span> shown
        </span>
      </div>

      <div ng-show="busy" class="text-center py-4" ng-cloak>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Loading...
      </div>

      <div ng-show="!busy && !rows.length" class="text-center text-muted py-5" ng-cloak>
        <i class="fas fa-microchip fa-2x mb-2 d-block"></i>
        No site currently has a hard resource limit configured.
      </div>

      <div class="table-responsive" ng-show="!busy && rows.length" ng-cloak>
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th scope="col" role="button" ng-click="sortBy('domain')">
                Domain <i class="fas" ng-class="sortIcon('domain')"></i></th>
              <th scope="col" role="button" ng-click="sortBy('packageName')">
                Package <i class="fas" ng-class="sortIcon('packageName')"></i></th>
              <th scope="col" class="text-end" role="button" ng-click="sortBy('cpuPercent')">
                CPU limit <i class="fas" ng-class="sortIcon('cpuPercent')"></i></th>
              <th scope="col" class="text-end" role="button" ng-click="sortBy('memoryMB')">
                Mem limit <i class="fas" ng-class="sortIcon('memoryMB')"></i></th>
              <th scope="col" class="text-end" role="button" ng-click="sortBy('tasks')">
                Task limit <i class="fas" ng-class="sortIcon('tasks')"></i></th>
              <th scope="col" class="text-end" role="button" ng-click="sortBy('ioWeight')">
                I/O weight <i class="fas" ng-class="sortIcon('ioWeight')"></i></th>
              <th scope="col" class="text-end" role="button" ng-click="sortBy('usageCpuUsec')">
                CPU used <i class="fas" ng-class="sortIcon('usageCpuUsec')"></i></th>
              <th scope="col" class="text-end" role="button" ng-click="sortBy('usageMemoryBytes')">
                Mem used <i class="fas" ng-class="sortIcon('usageMemoryBytes')"></i></th>
              <th scope="col" class="text-end" role="button" ng-click="sortBy('usageTasks')">
                Tasks running <i class="fas" ng-class="sortIcon('usageTasks')"></i></th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in rows | filter:search | orderBy:sortField:sortReverse">
              <td><strong ng-bind="row.domain"></strong></td>
              <td><span class="badge text-bg-secondary" ng-bind="row.packageName || '—'"></span></td>
              <td class="text-end" ng-bind="row.cpuPercent ? row.cpuPercent + '%' : 'Unlimited'"></td>
              <td class="text-end" ng-bind="row.memoryMB ? row.memoryMB + ' MB' : 'Unlimited'"></td>
              <td class="text-end" ng-bind="row.tasks ? row.tasks : 'Unlimited'"></td>
              <td class="text-end" ng-bind="row.ioWeight ? row.ioWeight : 'Unlimited'"></td>
              <td class="text-end" ng-bind="(row.usageCpuUsec / 1000000).toFixed(1) + ' s'"></td>
              <td class="text-end" ng-bind="humanBytes(row.usageMemoryBytes)"></td>
              <td class="text-end" ng-bind="row.usageTasks"></td>
              <td class="text-end text-nowrap">
                <a class="btn btn-sm btn-outline-secondary"
                   ng-href="/websites/resourceLimits?domain={$ row.domain $}" title="Manage">
                  <i class="fas fa-sliders"></i>
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'websiteFunctions/resourceUsageBySite.js' %}"></script>
{% endblock %}