{% extends "baseTemplate/index.html" %}
{% load static %}
{# Disk, network and process view, with the network throughput chart. #}

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

{% block styles %}
<style>
  .cp-meter       { height:6px; border-radius:var(--cp-radius-pill);
                    background:var(--cp-border); overflow:hidden; }
  .cp-meter__fill { height:100%; border-radius:var(--cp-radius-pill);
                    background:var(--cp-primary); transition:width .4s ease; }
  .cp-meter__fill.is-warn   { background:var(--cp-accent); }
  .cp-meter__fill.is-danger { background:var(--cp-danger); }
  .cp-mono        { font-family:var(--cp-font-mono); font-size:.8rem; }
  .cp-chart-wrap  { position:relative; height:260px; }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Resource usage</h1>
      <p class="text-muted mb-0 small">
        Filesystems, network interfaces and the heaviest processes on {{ hostname }}.
      </p>
    </div>
    <div class="d-flex align-items-center gap-2">
      <div class="btn-group btn-group-sm" role="group" aria-label="History window">
        <button type="button" class="btn" ng-repeat="w in windows"
                ng-class="minutes === w.value ? 'btn-primary' : 'btn-outline-secondary'"
                ng-click="setWindow(w.value)" ng-bind="w.label"></button>
      </div>
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="load()" ng-disabled="busy">
        <i class="fas fa-rotate me-1"></i>Refresh
      </button>
    </div>
  </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="row g-3 mb-3">
    <div class="col-12 col-xl-7">
      <div class="card h-100">
        <div class="card-header fw-semibold">Network throughput</div>
        <div class="card-body">
          <div class="cp-chart-wrap"><canvas id="cpNetworkChart"></canvas></div>
          <div class="d-flex flex-wrap gap-4 mt-3 small" ng-cloak>
            <span>Received total: <strong ng-bind="current.network.receivedHuman"></strong></span>
            <span>Sent total: <strong ng-bind="current.network.sentHuman"></strong></span>
            <span>Disk read: <strong ng-bind="diskIO.readHuman"></strong></span>
            <span>Disk written: <strong ng-bind="diskIO.writeHuman"></strong></span>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-5">
      <div class="card h-100">
        <div class="card-header fw-semibold">Filesystems</div>
        <div class="card-body">
          <div class="mb-3" ng-repeat="part in partitions" ng-cloak>
            <div class="d-flex justify-content-between small">
              <span class="cp-mono" ng-bind="part.mountpoint"></span>
              <span class="text-muted">
                <span ng-bind="part.usedHuman"></span> / <span ng-bind="part.totalHuman"></span>
                (<span ng-bind="part.percent | number:0"></span>%)
              </span>
            </div>
            <div class="cp-meter mt-1">
              <div class="cp-meter__fill" ng-class="tone(part.percent)"
                   ng-style="{width: bar(part.percent)}"></div>
            </div>
            <div class="small text-muted mt-1">
              <span ng-bind="part.device"></span> &middot; <span ng-bind="part.fstype"></span>
              &middot; <span ng-bind="part.freeHuman"></span> free
            </div>
          </div>
          <p class="text-muted small mb-0" ng-show="!partitions.length" ng-cloak>
            No filesystems were reported.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-12 col-xl-5">
      <div class="card h-100">
        <div class="card-header fw-semibold">Network interfaces</div>
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr><th scope="col">Interface</th><th scope="col">Addresses</th>
                  <th scope="col" class="text-end">State</th></tr>
            </thead>
            <tbody ng-cloak>
              <tr ng-repeat="nic in interfaces">
                <td class="cp-mono" ng-bind="nic.name"></td>
                <td class="cp-mono small">
                  <div ng-repeat="addr in nic.addresses" ng-bind="addr.address"></div>
                </td>
                <td class="text-end">
                  <span class="badge" ng-class="nic.isUp ? 'text-bg-success' : 'text-bg-secondary'"
                        ng-bind="nic.isUp ? 'up' : 'down'"></span>
                </td>
              </tr>
              <tr ng-show="!interfaces.length">
                <td colspan="3" class="text-muted text-center py-3">No interfaces reported.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="col-12 col-xl-7">
      <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between">
          <span class="fw-semibold">Heaviest processes</span>
          <div class="btn-group btn-group-sm" role="group" aria-label="Sort processes">
            <button type="button" class="btn"
                    ng-class="sortBy === 'cpu' ? 'btn-primary' : 'btn-outline-secondary'"
                    ng-click="setSort('cpu')">By CPU</button>
            <button type="button" class="btn"
                    ng-class="sortBy === 'memory' ? 'btn-primary' : 'btn-outline-secondary'"
                    ng-click="setSort('memory')">By memory</button>
          </div>
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-hover align-middle mb-0">
            <thead>
              <tr>
                <th scope="col">PID</th><th scope="col">Process</th><th scope="col">User</th>
                <th scope="col" class="text-end">CPU %</th>
                <th scope="col" class="text-end">Memory</th>
              </tr>
            </thead>
            <tbody ng-cloak>
              <tr ng-repeat="proc in processes">
                <td class="cp-mono" ng-bind="proc.pid"></td>
                <td ng-bind="proc.name"></td>
                <td class="text-muted small" ng-bind="proc.user"></td>
                <td class="text-end" ng-bind="proc.cpu_percent"></td>
                <td class="text-end">
                  <span ng-bind="proc.rssHuman"></span>
                  <span class="text-muted small">(<span ng-bind="proc.memory_percent"></span>%)</span>
                </td>
              </tr>
              <tr ng-show="!processes.length">
                <td colspan="5" class="text-muted text-center py-3">No process data available.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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