123 lines
3.5 KiB
HTML
123 lines
3.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<style>
|
|
.ctr-toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.ctr-search-wrap {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
max-width: 360px;
|
|
position: relative;
|
|
}
|
|
.ctr-search-wrap i {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--text3);
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
}
|
|
.ctr-search {
|
|
width: 100%;
|
|
padding: 9px 12px 9px 34px;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
color: var(--text);
|
|
font-family: var(--font);
|
|
font-size: 13px;
|
|
}
|
|
.ctr-search:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
.ctr-search::placeholder { color: var(--text3); }
|
|
.ctr-sort-select {
|
|
padding: 9px 12px;
|
|
background: var(--surface2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
color: var(--text);
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.ctr-filter-meta {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--text3);
|
|
margin-left: auto;
|
|
}
|
|
.ct-uptime {
|
|
font-family: var(--mono);
|
|
font-size: 11px;
|
|
color: var(--cyan);
|
|
white-space: nowrap;
|
|
}
|
|
.ct-uptime.stopped { color: var(--text3); }
|
|
</style>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title"><i class="fas fa-layer-group"></i> All Containers</div>
|
|
<div style="display:flex;gap:8px;align-items:center;">
|
|
<span class="card-meta" id="all-ctr-meta">—</span>
|
|
<button class="btn btn-ghost btn-sm" onclick="toggleExtraColumns('all')" id="all-toggle-btn">
|
|
<i class="fas fa-eye"></i> Show more
|
|
</button>
|
|
<button class="btn btn-ghost btn-sm" onclick="loadAllContainers()"><i class="fas fa-sync-alt"></i> Refresh</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ctr-toolbar">
|
|
<div class="ctr-search-wrap">
|
|
<i class="fas fa-search"></i>
|
|
<input type="search" class="ctr-search" id="ctr-search"
|
|
placeholder="Search by name, image, owner, port…"
|
|
oninput="applyContainersFilter()" autocomplete="off">
|
|
</div>
|
|
<select class="ctr-sort-select" id="ctr-sort" onchange="applyContainersFilter()" title="Sort containers">
|
|
<option value="name">Sort: Name (A→Z)</option>
|
|
<option value="created_desc">Sort: Newest first</option>
|
|
<option value="created_asc">Sort: Oldest first</option>
|
|
<option value="cpu_desc">Sort: CPU (high→low)</option>
|
|
<option value="cpu_asc">Sort: CPU (low→high)</option>
|
|
<option value="uptime_desc">Sort: Longest uptime</option>
|
|
</select>
|
|
<span class="ctr-filter-meta" id="ctr-filter-meta"></span>
|
|
</div>
|
|
|
|
<div style="overflow-x:auto;">
|
|
<table class="ct-table">
|
|
<thead>
|
|
<tr>
|
|
<th>NAME</th>
|
|
<th>OWNER</th>
|
|
<th>STATUS</th>
|
|
<th>UP TIME</th>
|
|
<th>CPU</th>
|
|
<th>MEMORY</th>
|
|
<th>NET I/O</th>
|
|
<th class="col-extra all-extra" style="display:none;">DISK I/O</th>
|
|
<th class="col-extra all-extra" style="display:none;">IMAGE</th>
|
|
<th class="col-extra all-extra" style="display:none;">PORTS</th>
|
|
<th>ACTIONS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="all-containers-body">
|
|
<tr><td colspan="11"><div class="empty-state"><i class="fas fa-spinner fa-spin"></i> Loading…</div></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|