pxe-server/webapp/templates/dashboard.html

{% extends "base.html" %}
{% block title %}Dashboard - PXE Server Manager{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Dashboard</h1>
  <div class="header-actions">
    <a href="{{ url_for('images_import') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-box-arrow-in-down"></i> Image Import
    </a>
    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#newImageModal">
      <i class="bi bi-plus-lg"></i> New image type
    </button>
    <button class="btn btn-outline-secondary btn-sm" onclick="location.reload()">
      <i class="bi bi-arrow-clockwise"></i> Refresh
    </button>
  </div>
</div>

<!-- At-a-glance stats -->
<div class="dashboard-grid mb-4">
  {% set services_up = services | selectattr('active') | list | length %}
  {% set services_total = services | list | length %}
  <div class="stat-card {{ 'success' if services_up == services_total else 'danger' }}">
    <div class="label"><i class="bi bi-hdd-network"></i> Services running</div>
    <div class="value">{{ services_up }} / {{ services_total }}</div>
  </div>
  {% set images_total = images | list | length %}
  <div class="stat-card info">
    <div class="label"><i class="bi bi-hdd-stack"></i> Image types</div>
    <div class="value">{{ images_total }}</div>
  </div>
  {% set images_ready = images | selectattr('has_content') | list | length %}
  <div class="stat-card success">
    <div class="label"><i class="bi bi-check2-circle"></i> Images with content</div>
    <div class="value">{{ images_ready }}</div>
  </div>
  {% set unattend_missing = images | rejectattr('has_unattend') | list | length %}
  <div class="stat-card {{ 'warning' if unattend_missing else 'success' }}">
    <div class="label"><i class="bi bi-file-earmark-code"></i> Missing unattend.xml</div>
    <div class="value">{{ unattend_missing }}</div>
  </div>
</div>

<!-- Services -->
<div class="card">
  <div class="card-header">
    <span><i class="bi bi-hdd-network"></i> PXE Services</span>
  </div>
  <div class="card-body p-0">
    <div class="table-container">
      <table class="table mb-0">
        <thead>
          <tr>
            <th>Service</th>
            <th>Status</th>
            <th>State</th>
          </tr>
        </thead>
        <tbody>
          {% for svc in services %}
          <tr>
            <td>
              <strong>{{ svc.name }}</strong>
            </td>
            <td>
              <span class="status-dot {{ 'active' if svc.active else 'inactive' }}"></span>
              {{ "Running" if svc.active else "Stopped" }}
            </td>
            <td><span class="mono">{{ svc.state }}</span></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Images -->
<div class="card">
  <div class="card-header">
    <span><i class="bi bi-hdd-stack"></i> Deployment Images</span>
    <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#newImageModal">
      <i class="bi bi-plus-lg"></i> New image type
    </button>
  </div>
  <div class="card-body p-0">
    <div class="table-container">
      <table class="table mb-0">
        <thead>
          <tr>
            <th>Image</th>
            <th>Deploy Content</th>
            <th>unattend.xml</th>
            <th>Path</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for img in images %}
          <tr>
            <td>
              <strong>{{ img.friendly_name }}</strong><br>
              <small class="text-muted mono">{{ img.image_type }}</small>
            </td>
            <td>
              {% if img.has_content %}
                <span class="badge bg-success">Present</span>
              {% else %}
                <span class="badge bg-secondary">Empty</span>
              {% endif %}
            </td>
            <td>
              {% if img.has_unattend %}
                <span class="badge bg-success">Exists</span>
              {% else %}
                <span class="badge bg-warning">Missing</span>
              {% endif %}
            </td>
            <td><span class="mono">{{ img.deploy_path }}</span></td>
            <td class="actions text-end">
              <a href="{{ url_for('image_config', image_type=img.image_type) }}"
                 class="btn btn-sm btn-outline-secondary btn-row-action">
                <i class="bi bi-gear"></i> Config
              </a>
              <a href="{{ url_for('unattend_editor', image_type=img.image_type) }}"
                 class="btn btn-sm btn-outline-primary btn-row-action">
                <i class="bi bi-file-earmark-code"></i> Unattend
              </a>
              <button type="button" class="btn btn-sm btn-outline-secondary btn-row-action"
                      data-bs-toggle="modal" data-bs-target="#cloneImageModal"
                      data-src-key="{{ img.image_type }}"
                      data-src-friendly="{{ img.friendly_name }}">
                <i class="bi bi-files"></i> Clone
              </button>
              <button type="button" class="btn btn-sm btn-outline-danger btn-row-action"
                      data-bs-toggle="modal" data-bs-target="#deleteImageModal"
                      data-src-key="{{ img.image_type }}"
                      data-src-friendly="{{ img.friendly_name }}">
                <i class="bi bi-trash"></i> Delete
              </button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- New image type modal -->
<div class="modal fade" id="newImageModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="post" action="{{ url_for('images_new') }}">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Create image type</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="form-field">
            <label class="form-label">Key</label>
            <input type="text" class="form-control mono" name="key"
                   pattern="[a-z][a-z0-9-]{1,63}" required
                   placeholder="gea-shopfloor-newtype">
            <div class="form-text">Lowercase + hyphens. Used as directory name + URL path. 2-64 chars, must start with a letter.</div>
          </div>
          <div class="form-field">
            <label class="form-label">Friendly name</label>
            <input type="text" class="form-control" name="friendly_name" required
                   placeholder="GE Aerospace Shop Floor (newtype)">
          </div>
          <div class="alert alert-info small">
            Empty image type. Populate via Image Import or Clone afterwards.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Create</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Clone image modal -->
<div class="modal fade" id="cloneImageModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="post" id="cloneForm">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Clone image type</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <p>Source: <strong id="cloneSrcFriendly"></strong> <span class="mono" id="cloneSrcKey"></span></p>
          <div class="form-field">
            <label class="form-label">New key</label>
            <input type="text" class="form-control mono" name="dst_key"
                   pattern="[a-z][a-z0-9-]{1,63}" required>
          </div>
          <div class="form-field">
            <label class="form-label">Friendly name (optional)</label>
            <input type="text" class="form-control" name="friendly_name"
                   placeholder="leave blank for &lsquo;<src> (copy)&rsquo;">
          </div>
          <div class="alert alert-info small">
            Copies Deploy/ tree (Control + Tools + unattend) and preserves
            symlinks to shared dirs (Out-of-box Drivers, Operating Systems,
            Packages). Disk usage stays low because shared content is not
            duplicated.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">Clone</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Delete image modal -->
<div class="modal fade" id="deleteImageModal" tabindex="-1">
  <div class="modal-dialog">
    <form method="post" id="deleteForm">
      <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Delete image type</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <p>Remove <strong id="deleteSrcFriendly"></strong> <span class="mono" id="deleteSrcKey"></span> from the registry.</p>
          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="delete_content" value="1" id="deleteContentCheck">
            <label class="form-check-label" for="deleteContentCheck">
              Also wipe on-disk Deploy/Tools/etc (symlinked shared dirs are unlinked, not followed)
            </label>
          </div>
          <div class="alert alert-warning small">
            Removing from registry hides the image from the UI and Ansible
            playbook list. Existing PXE-imaged clients are unaffected. Wiping
            content is irreversible.
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-danger">Delete</button>
        </div>
      </div>
    </form>
  </div>
</div>

{% endblock %}

{% block extra_scripts %}
<script>
document.addEventListener('show.bs.modal', function(e) {
    var btn = e.relatedTarget;
    if (!btn) return;
    var srcKey = btn.getAttribute('data-src-key') || '';
    var srcFriendly = btn.getAttribute('data-src-friendly') || '';
    if (e.target.id === 'cloneImageModal') {
        e.target.querySelector('#cloneSrcKey').textContent = srcKey;
        e.target.querySelector('#cloneSrcFriendly').textContent = srcFriendly;
        document.getElementById('cloneForm').action = "{{ url_for('images_clone', image_type='__K__') }}".replace('__K__', encodeURIComponent(srcKey));
    } else if (e.target.id === 'deleteImageModal') {
        e.target.querySelector('#deleteSrcKey').textContent = srcKey;
        e.target.querySelector('#deleteSrcFriendly').textContent = srcFriendly;
        document.getElementById('deleteForm').action = "{{ url_for('images_delete', image_type='__K__') }}".replace('__K__', encodeURIComponent(srcKey));
    }
});
</script>
{% endblock %}