361 lines
15 KiB
Plaintext
361 lines
15 KiB
Plaintext
{% extends "base" %}
|
|
|
|
{% block title %}#{{ artifact.id }} · {{ package.name }}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
/* ── Artifact layout ────────────────────────── */
|
|
.artifact-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 220px;
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.artifact-layout { grid-template-columns: 1fr; }
|
|
.artifact-sidebar { order: -1; }
|
|
}
|
|
|
|
/* ── Artifact header ────────────────────────── */
|
|
.artifact-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
.artifact-header h1 {
|
|
font-family: var(--mono);
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
margin: 0 0 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.artifact-trigger-line {
|
|
font-size: 13px;
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ── Steps list ─────────────────────────────── */
|
|
.steps-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.step-card { overflow: hidden; }
|
|
|
|
.step-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 14px;
|
|
cursor: pointer;
|
|
background: var(--surface);
|
|
border-radius: var(--radius);
|
|
transition: background .1s;
|
|
user-select: none;
|
|
}
|
|
.step-card.open .step-header {
|
|
border-radius: var(--radius) var(--radius) 0 0;
|
|
background: var(--surface2);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.step-header:hover { background: var(--surface2); }
|
|
|
|
.step-name {
|
|
flex: 1;
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
}
|
|
.step-duration {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
.step-chevron {
|
|
color: var(--muted);
|
|
transition: transform .2s;
|
|
flex-shrink: 0;
|
|
}
|
|
.step-card.open .step-chevron { transform: rotate(90deg); }
|
|
|
|
/* ── Log output ─────────────────────────────── */
|
|
.step-log {
|
|
display: none;
|
|
background: #080808;
|
|
border: 1px solid var(--border);
|
|
border-top: none;
|
|
border-radius: 0 0 var(--radius) var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.step-card.open .step-log { display: block; }
|
|
|
|
.log-line {
|
|
display: flex;
|
|
gap: 0;
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
}
|
|
.log-line:hover { background: rgba(255,255,255,.03); }
|
|
.log-num {
|
|
min-width: 48px;
|
|
padding: 0 12px;
|
|
text-align: right;
|
|
color: var(--muted);
|
|
user-select: none;
|
|
border-right: 1px solid #1a1a1a;
|
|
flex-shrink: 0;
|
|
}
|
|
.log-text {
|
|
padding: 0 16px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
flex: 1;
|
|
}
|
|
.log-text.err { color: var(--red); }
|
|
.log-text.warn { color: var(--yellow); }
|
|
|
|
/* ── Sidebar ────────────────────────────────── */
|
|
.sidebar-card { overflow: hidden; margin-bottom: 12px; }
|
|
.sidebar-card-title {
|
|
font-size: 11px;
|
|
font-family: var(--mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: .8px;
|
|
color: var(--muted);
|
|
padding: 10px 14px 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--surface2);
|
|
}
|
|
.sidebar-card-body { padding: 12px 14px; }
|
|
.sidebar-stat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 4px 0;
|
|
font-size: 13px;
|
|
}
|
|
.sidebar-stat-label { color: var(--text-dim); }
|
|
.sidebar-stat-value { font-family: var(--mono); font-size: 12px; }
|
|
|
|
/* ── Navigation between artifacts ──────────── */
|
|
.artifact-nav {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 20px;
|
|
}
|
|
.artifact-nav a {
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
padding: 5px 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
color: var(--text-dim);
|
|
transition: border-color .15s, color .15s;
|
|
}
|
|
.artifact-nav a:hover { color: var(--text); border-color: #3a3a3a; text-decoration: none; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
|
|
<div class="breadcrumb">
|
|
<a href="/packages/">packages</a>
|
|
<span class="breadcrumb-sep">/</span>
|
|
<a href="/packages/{{ package.name }}">{{ package.name }}</a>
|
|
<span class="breadcrumb-sep">/</span>
|
|
<a href="/packages/{{ package.name }}/~artifact/">artifacts</a>
|
|
<span class="breadcrumb-sep">/</span>
|
|
<span>#{{ artifact.id }}</span>
|
|
</div>
|
|
|
|
<div class="artifact-header">
|
|
<h1>
|
|
#{{ artifact.id }}
|
|
{% if artifact.status == "success" %}
|
|
<span class="badge badge-success"><span class="dot"></span>passed</span>
|
|
{% elif artifact.status == "failure" %}
|
|
<span class="badge badge-failure"><span class="dot"></span>failed</span>
|
|
{% elif artifact.status == "running" %}
|
|
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
|
{% elif artifact.status == "pending" %}
|
|
<span class="badge badge-pending"><span class="dot"></span>queued</span>
|
|
{% else %}
|
|
<span class="badge badge-unknown"><span class="dot"></span>{{ artifact.status }}</span>
|
|
{% endif %}
|
|
</h1>
|
|
<p class="artifact-trigger-line">
|
|
{{ artifact.trigger | default(value="Triggered manually") }}
|
|
{% if artifact.commit_sha %} · <span class="mono" style="font-size:12px">{{ artifact.commit_sha }}</span>{% endif %}
|
|
{% if artifact.branch %} on <strong>{{ artifact.branch }}</strong>{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="artifact-layout">
|
|
|
|
<!-- Steps + logs -->
|
|
<div>
|
|
{% if artifact.steps and artifact.steps | length > 0 %}
|
|
<p class="section-title">Steps</p>
|
|
<div class="steps-list">
|
|
{% for step in artifact.steps %}
|
|
<div class="card step-card {% if step.status == 'failure' or loop.first %}open{% endif %}" id="step-{{ loop.index }}">
|
|
<div class="step-header" onclick="toggleStep(this)">
|
|
<span class="step-status">
|
|
{% if step.status == "success" %}
|
|
<span style="color:var(--green)">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</span>
|
|
{% elif step.status == "failure" %}
|
|
<span style="color:var(--red)">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
</span>
|
|
{% elif step.status == "running" %}
|
|
<span style="color:var(--accent)" class="dot-pulse">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
</span>
|
|
{% elif step.status == "skipped" %}
|
|
<span style="color:var(--muted)">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
</span>
|
|
{% else %}
|
|
<span style="color:var(--muted)">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
|
|
</span>
|
|
{% endif %}
|
|
</span>
|
|
<span class="step-name">{{ step.name }}</span>
|
|
{% if step.duration %}<span class="step-duration">{{ step.duration }}</span>{% endif %}
|
|
<svg class="step-chevron" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</div>
|
|
<div class="step-log">
|
|
{% if step.log_lines and step.log_lines | length > 0 %}
|
|
{% for line in step.log_lines %}
|
|
<div class="log-line">
|
|
<span class="log-num">{{ loop.index }}</span>
|
|
<span class="log-text {% if line.level == 'error' %}err{% elif line.level == 'warn' %}warn{% endif %}">{{ line.text | default(value=line) | escape }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
{% elif step.log %}
|
|
{% for raw_line in step.log | split(pat="\n") %}
|
|
<div class="log-line">
|
|
<span class="log-num">{{ loop.index }}</span>
|
|
<span class="log-text">{{ raw_line | escape }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="log-line">
|
|
<span class="log-num">1</span>
|
|
<span class="log-text dim">No output.</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="card" style="padding:32px;text-align:center;color:var(--text-dim);font-size:13px">
|
|
No steps recorded for this artifact.
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="artifact-nav">
|
|
{% if artifact.prev_id %}
|
|
<a href="/packages/{{ package.name }}/~artifact/{{ artifact.prev_id }}">← #{{ artifact.prev_id }}</a>
|
|
{% endif %}
|
|
{% if artifact.next_id %}
|
|
<a href="/packages/{{ package.name }}/~artifact/{{ artifact.next_id }}">#{{ artifact.next_id }} →</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="artifact-sidebar">
|
|
|
|
<div class="card sidebar-card">
|
|
<div class="sidebar-card-title">Summary</div>
|
|
<div class="sidebar-card-body">
|
|
<div class="sidebar-stat">
|
|
<span class="sidebar-stat-label">Status</span>
|
|
<span>
|
|
{% if artifact.status == "success" %}
|
|
<span class="badge badge-success"><span class="dot"></span>passed</span>
|
|
{% elif artifact.status == "failure" %}
|
|
<span class="badge badge-failure"><span class="dot"></span>failed</span>
|
|
{% elif artifact.status == "running" %}
|
|
<span class="badge badge-running"><span class="dot dot-pulse"></span>running</span>
|
|
{% else %}
|
|
<span class="badge badge-unknown">{{ artifact.status }}</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% if artifact.duration %}
|
|
<div class="sidebar-stat">
|
|
<span class="sidebar-stat-label">Duration</span>
|
|
<span class="sidebar-stat-value">{{ artifact.duration }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if artifact.created_at %}
|
|
<div class="sidebar-stat">
|
|
<span class="sidebar-stat-label">Started</span>
|
|
<span class="sidebar-stat-value">{{ artifact.created_at }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if artifact.finished_at %}
|
|
<div class="sidebar-stat">
|
|
<span class="sidebar-stat-label">Finished</span>
|
|
<span class="sidebar-stat-value">{{ artifact.finished_at }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if artifact.steps %}
|
|
<div class="sidebar-stat">
|
|
<span class="sidebar-stat-label">Steps</span>
|
|
<span class="sidebar-stat-value">{{ artifact.steps | length }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if artifact.commit_sha or artifact.branch %}
|
|
<div class="card sidebar-card">
|
|
<div class="sidebar-card-title">Commit</div>
|
|
<div class="sidebar-card-body">
|
|
{% if artifact.branch %}
|
|
<div class="sidebar-stat">
|
|
<span class="sidebar-stat-label">Branch</span>
|
|
<span class="sidebar-stat-value">{{ artifact.branch }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if artifact.commit_sha %}
|
|
<div class="sidebar-stat">
|
|
<span class="sidebar-stat-label">SHA</span>
|
|
<span class="sidebar-stat-value">{{ artifact.commit_sha | truncate(length=8, end="") }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if artifact.commit_message %}
|
|
<div style="font-size:12px;color:var(--text-dim);margin-top:8px;line-height:1.5">{{ artifact.commit_message }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div style="margin-top:4px">
|
|
<a href="/packages/{{ package.name }}/~artifact/" style="font-size:12px;font-family:var(--mono)">← all artifacts</a>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function toggleStep(header) {
|
|
const card = header.closest('.step-card');
|
|
card.classList.toggle('open');
|
|
}
|
|
</script>
|
|
{% endblock %}
|