packetserver/packetserver/http/templates/job_detail.html

{% extends "base.html" %}

{% block title %}Job {{ job.id }} - {{ job.cmd|truncate(50) }}{% endblock %}

{% block content %}
<h2>Job #{{ job.id }}</h2>

<!-- New: Action buttons (Back + Delete) -->
<div class="mb-4 d-flex justify-content-between align-items-center">
  <a href="/jobs" class="btn btn-outline-secondary">← Back to Jobs</a>

  <button
    type="button"
    class="btn btn-danger"
    data-bs-toggle="modal"
    data-bs-target="#deleteJobModal">
    Delete Job
  </button>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteJobModal" tabindex="-1" aria-labelledby="deleteJobModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-danger text-white">
        <h5 class="modal-title" id="deleteJobModalLabel">Confirm Job Deletion</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to <strong>permanently delete</strong> Job #{{ job.id }}?</p>
        <p class="mb-0">This will remove:</p>
        <ul>
          <li>All command output and errors</li>
          <li>Any artifacts</li>
          <li>Job metadata and history</li>
        </ul>
        <strong class="text-danger">This action cannot be undone.</strong>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button
          type="button"
          class="btn btn-danger"
          hx-delete="/api/v1/jobs/{{ job.id }}"
          hx-target="body"
          hx-swap="innerHTML"
          hx-push-url="true"
          data-bs-dismiss="modal"
          hx-on::after-request="if(event.detail.successful) document.body.innerHTML = '<div class=container mt-5><div class=alert alert-success text-center><h4>Job {{ job.id }} deleted successfully.</h4><a href=/dashboard/jobs class=btn btn-primary mt-3>Back to Jobs</a></div></div>'">
          Yes, Delete Permanently
        </button>
      </div>
    </div>
  </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header">
                Command
                {% if job.cmd|length > 1 or ('bash' in job.cmd and job.cmd|length == 3) %}
                <span class="badge bg-info float-end">Multi-arg</span>
                {% elif job.cmd|length == 1 %}
                <span class="badge bg-secondary float-end">Single arg</span>
                {% endif %}
            </div>
            <div class="card-body">
                {% if job.cmd is string %}
                <!-- Legacy fallback: old jobs stored cmd as single string -->
                <pre><code>{{ job.cmd }}</code></pre>
                <small class="text-muted">Legacy single-string command</small>
                {% else %}
                <!-- Modern list display -->
                <ol class="mb-0 ps-4">
                    {% for arg in job.cmd %}
                    <li class="mb-2">
                        <code>{{ arg | e }}</code>
                    </li>
                    {% endfor %}
                </ol>
                {% if job.cmd[:2] == ['bash', '-c'] %}
                <hr class="my-3">
                <p class="mb-0"><strong>Full command passed to bash -c:</strong></p>
                <pre><code>{{ job.cmd[2] }}</code></pre>
                <small class="text-muted">This job used shell mode</small>
                {% endif %}
                {% endif %}
            </div>
        </div>

        {% if job.output or job.errors %}
        <div class="card mb-4">
            <div class="card-header">
                Output & Errors
            </div>
            <ul class="nav nav-tabs card-header-tabs">
                {% if job.output %}
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#output">Stdout</a>
                </li>
                {% endif %}
                {% if job.errors %}
                <li class="nav-item">
                    <a class="nav-link{% if not job.output %} active{% endif %}" data-bs-toggle="tab" href="#errors">Stderr</a>
                </li>
                {% endif %}
            </ul>
            <div class="card-body tab-content">
                {% if job.output %}
                <div class="tab-pane fade show active" id="output">
                    <pre><code>{{ job.output | b64decode | forceescape }}</code></pre>
                </div>
                {% endif %}
                {% if job.errors %}
                <div class="tab-pane fade{% if job.output %} show{% else %} show active{% endif %}" id="errors">
                    <pre><code>{{ job.errors | b64decode | forceescape }}</code></pre>
                </div>
                {% endif %}
            </div>
        </div>
        {% endif %}

        {% if job.artifacts %}
        <div class="card">
            <div class="card-header">Artifacts</div>
            <div class="card-body">
                <ul class="list-group">
                {% for name, b64 in job.artifacts %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ name }}
                    <a href="data:application/octet-stream;base64,{{ b64 }}" download="{{ name }}" class="btn btn-sm btn-primary">Download</a>
                </li>
                {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">Job Details</div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item"><strong>Status:</strong>
                    {% set status = job.status | upper %}
                    {% if status == "QUEUED" %}
                    <span class="badge bg-secondary">Queued</span>
                    {% elif status == "RUNNING" %}
                    <span class="badge bg-primary">Running</span>
                    {% elif status == "COMPLETED" %}
                    <span class="badge bg-success">Completed</span>
                    {% elif status == "FAILED" %}
                    <span class="badge bg-danger">Failed</span>
                    {% elif status == "CANCELLED" %}
                    <span class="badge bg-warning">Cancelled</span>
                    {% else %}
                    <span class="badge bg-light text-dark">{{ job.status }}</span>
                    {% endif %}
                </li>
                <li class="list-group-item"><strong>Owner:</strong> {{ job.owner }}</li>
                <li class="list-group-item"><strong>Created:</strong> {{ job.created_at.strftime('%b %d, %Y %H:%M') }}</li>
                <li class="list-group-item"><strong>Started:</strong> {% if job.started_at %}{{ job.started_at.strftime('%H:%M:%S') }}{% else %}-{% endif %}</li>
                <li class="list-group-item"><strong>Finished:</strong> {% if job.finished_at %}{{ job.finished_at.strftime('%H:%M:%S') }}{% else %}-{% endif %}</li>
                <li class="list-group-item"><strong>Return Code:</strong> {% if job.return_code is not none %}{{ job.return_code }}{% else %}-{% endif %}</li>
                <li class="list-group-item">
                    <strong>Environment Variables:</strong>
                    {% if job.env %}
                    <ul class="list-unstyled mt-2 mb-0">
                        {% for key, value in job.env.items() %}
                        <li><code>{{ key }}={{ value }}</code></li>
                        {% endfor %}
                    </ul>
                    {% else %}
                    <span class="text-muted">None</span>
                    {% endif %}
                </li>
            </ul>
        </div>
    </div>
</div>

{% endblock %}