hosts_app/templates/server_list.html

{% extends "base.html" %}
{% block title %}Lista serwerów - /etc/hosts Manager{% endblock %}

{% block extra_css %}
{{ super() }}
<style>
  .tooltip-inner {
    max-width: 300px;
    text-align: left;
  }
  .badge-status {
    font-size: 0.73em;
  }
  .action-btns a, .action-btns button {
    margin-right: 4px;
  }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
  <div class="card shadow-sm">
    <div class="card-header">
      <h2 class="mb-0">Lista serwerów</h2>
    </div>
    <div class="card-body table-responsive">
      <table class="table table-striped align-middle">
        <thead>
          <tr>
            <th>ID</th>
            <th>Nazwa serwera</th>
            <th>Użytkownik</th>
            <th>Port</th>
            <th>Typ</th>
            <th>Uwierzytelnianie</th>
            <th>Plik /etc/hosts</th>
            <th>Auto Deploy</th>
            <th>Auto Backup</th>
            <th>Wyłącz CIDR</th>
            <th>Akcje</th>
          </tr>
        </thead>
        <tbody>
          {% for h in hosts %}
          <tr>
            <td>{{ h.id }}</td>
            <td data-bs-toggle="tooltip" title="{{ h.raw_ip }}">
              {% if h.use_daemon and h.type == 'linux' and h.daemon_url %}
                {{ h.resolved_daemon }}
              {% else %}
                {{ h.resolved_hostname }}
              {% endif %}
            </td>
            <td>{{ '-' if h.use_daemon and h.type == 'linux' else h.username }}</td>
            <td>{{ '-' if h.use_daemon and h.type == 'linux' else h.port }}</td>
            <td>
              <span class="badge bg-secondary">{{ 'Linux (daemon)' if h.use_daemon else h.type.capitalize() }}</span>
            </td>
            <td>{{ '- linux daemon -' if h.use_daemon else h.auth_method|capitalize }}</td>
            <td>{{ h.preferred_hostfile.title if h.preferred_hostfile else '(Default)' }}</td>
            <td>
              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}">
                <input type="hidden" name="setting" value="auto_deploy">
                <input type="checkbox" name="enabled" value="1" onchange="this.form.submit()" {% if h.auto_deploy_enabled %}checked{% endif %}>
              </form>
            </td>
            <td>
              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}">
                <input type="hidden" name="setting" value="auto_backup">
                <input type="checkbox" name="enabled" value="1" onchange="this.form.submit()" {% if h.auto_backup_enabled %}checked{% endif %}>
              </form>
            </td>
            <td>
              <form method="POST" action="{{ url_for('update_host_automation', id=h.id) }}">
                <input type="hidden" name="setting" value="disable_regex">
                <input type="checkbox" name="enabled" value="1" onchange="this.form.submit()" {% if h.disable_regex_deploy %}checked{% endif %}>
              </form>
            </td>
            <td class="action-btns">
              <a href="{{ url_for('edit_server', id=h.id) }}" class="btn btn-sm btn-primary">Edytuj</a>
              {% if h.use_daemon and h.type == 'linux' %}
              <button class="btn btn-sm btn-info test-daemon-btn" data-host-id="{{ h.id }}">Testuj</button>
              {% else %}
              <a href="{{ url_for('test_server_connection', id=h.id) }}" class="btn btn-sm btn-info">Testuj</a>
              {% endif %}
              <a href="{{ url_for('server_backup', host_id=h.id) }}" class="btn btn-sm btn-success">Backup</a>
              <form method="GET" action="{{ url_for('delete_server', id=h.id) }}" class="d-inline">
                <button class="btn btn-sm btn-danger">Usuń</button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="text-center mt-4">
    <a href="{{ url_for('add_server') }}" class="btn btn-primary">Dodaj nowy serwer</a>
    <a href="{{ url_for('import_servers') }}" class="btn btn-secondary">Importuj z CSV</a>
    <a href="{{ url_for('export_servers_to_csv') }}" class="btn btn-secondary">Eksportuj do CSV</a>
  </div>
</div>

<!-- Modal z informacjami -->
<div class="modal fade" id="serverInfoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Informacje o serwerze</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p><strong>Serwer:</strong> <span id="modal-hostname"></span></p>
        <label><strong>CPU:</strong></label>
        <div class="progress mb-2">
          <div id="modal-cpu" class="progress-bar" role="progressbar"></div>
        </div>
        <label><strong>Pamięć:</strong></label>
        <div class="progress mb-2">
          <div id="modal-mem" class="progress-bar bg-warning" role="progressbar"></div>
        </div>
        <label><strong>Dysk:</strong></label>
        <div class="progress mb-2">
          <div id="modal-disk" class="progress-bar bg-success" role="progressbar"></div>
        </div>
        <p><strong>Czas działania:</strong> <span id="modal-uptime"></span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zamknij</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
  function secondsToDhms(seconds) {
    const d = Math.floor(seconds / (3600*24));
    const h = Math.floor(seconds % (3600*24) / 3600);
    const m = Math.floor(seconds % 3600 / 60);
    const s = Math.floor(seconds % 60);
    return `${d} dni, ${h} godz, ${m} min, ${s} sek`;
  }

  document.querySelectorAll('.test-daemon-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      fetch(`/server-info/${this.dataset.hostId}`)
        .then(res => res.json())
        .then(data => {
          if (data.error) return alert(`Błąd: ${data.error}`);
          document.querySelector('#modal-hostname').textContent = data.hostname;
          document.querySelector('#modal-ip').textContent = data.ip;
          document.querySelector('#modal-cpu').style.width = data.cpu + '%';
          document.querySelector('#modal-cpu').textContent = data.cpu + '%';
          document.querySelector('#modal-mem').style.width = data.mem + '%';
          document.querySelector('#modal-mem').textContent = data.mem + '%';
          document.querySelector('#modal-disk').style.width = data.disk + '%';
          document.querySelector('#modal-disk').textContent = data.disk + '%';
          document.querySelector('#modal-uptime').textContent = secondsToDhms(data.uptime_seconds);
          new bootstrap.Modal(document.getElementById('serverInfoModal')).show();
        })
        .catch(() => alert('Błąd podczas pobierania danych.'));
    });
  });
</script>
{% endblock %}