This commit is contained in:
parent
4a1ff75ea9
commit
5c720ebc62
9 changed files with 234 additions and 539 deletions
|
|
@ -212,20 +212,12 @@ impl Default for BaseContext {
|
||||||
}
|
}
|
||||||
|
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
// Shared Template Components (as Askama macros)
|
// Template Structure
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
//
|
//
|
||||||
// Note: Askama's source attribute doesn't support concat! or any other way to
|
// Templates are file-based and located in databuild/web/templates/.
|
||||||
// share template code between structs. So the macro definitions (head, nav, footer)
|
// Common components (head, nav, footer) are defined as macros in base.html
|
||||||
// are duplicated in each template's source string. This is a limitation of
|
// and imported by each page template with: {% import "base.html" as base %}
|
||||||
// proc-macro attribute evaluation order.
|
|
||||||
//
|
|
||||||
// Each template defines three Askama macros:
|
|
||||||
// - head(title): HTML head with CSS styles
|
|
||||||
// - nav(active, graph_label): Navigation bar
|
|
||||||
// - footer(): Closing tags
|
|
||||||
//
|
|
||||||
// The page-specific content is formatted for readability.
|
|
||||||
|
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
// Home Page
|
// Home Page
|
||||||
|
|
|
||||||
198
databuild/web/templates/base.html
Normal file
198
databuild/web/templates/base.html
Normal file
|
|
@ -0,0 +1,198 @@
|
||||||
|
{#
|
||||||
|
Base template macros for DataBuild dashboard.
|
||||||
|
Import these in page templates with: {% import "base.html" as base %}
|
||||||
|
Then call: {% call base::head("Page Title") %}, {% call base::nav(...) %}, {% call base::footer() %}
|
||||||
|
#}
|
||||||
|
|
||||||
|
{% macro head(title) %}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
|
||||||
|
<title>{{ title }}</title>
|
||||||
|
<style>
|
||||||
|
/* View Transitions */
|
||||||
|
@view-transition { navigation: auto }
|
||||||
|
|
||||||
|
/* CSS Variables */
|
||||||
|
:root {
|
||||||
|
--color-brand: #F2994A;
|
||||||
|
--color-brand-light: #fef3e2;
|
||||||
|
--color-text: #333;
|
||||||
|
--color-text-muted: #6b7280;
|
||||||
|
--color-bg: #f9fafb;
|
||||||
|
--color-surface: #fff;
|
||||||
|
--color-border: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Reset */
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0 }
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
|
background: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation */
|
||||||
|
nav {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
padding: .75rem 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
view-transition-name: nav;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: .5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
.logo svg { width: 28px; height: 25px }
|
||||||
|
.logo span { font-family: 'Roboto Slab', serif; font-weight: 600; font-size: 1.125rem }
|
||||||
|
nav .links { display: flex; gap: 1.5rem }
|
||||||
|
nav .links a {
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: .875rem;
|
||||||
|
padding: .25rem 0;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
}
|
||||||
|
nav .links a:hover { color: var(--color-text) }
|
||||||
|
nav .links a.active { color: var(--color-brand); border-bottom-color: var(--color-brand) }
|
||||||
|
nav .graph-label { margin-left: auto; color: var(--color-text-muted); font-size: .875rem }
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem }
|
||||||
|
h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem }
|
||||||
|
|
||||||
|
/* Dashboard Stats */
|
||||||
|
.stats-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
.stat-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.stat-card:hover { border-color: var(--color-brand) }
|
||||||
|
.stat-card .value { font-size: 1.5rem; font-weight: 600 }
|
||||||
|
.stat-card .label { font-size: .75rem; color: var(--color-text-muted) }
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: .5rem;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: .875rem;
|
||||||
|
}
|
||||||
|
th, td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border) }
|
||||||
|
th { background: var(--color-bg); font-weight: 500; color: var(--color-text-muted) }
|
||||||
|
tr:last-child td { border-bottom: none }
|
||||||
|
tr:hover { background: var(--color-bg) }
|
||||||
|
td a { color: var(--color-brand); text-decoration: none }
|
||||||
|
td a:hover { text-decoration: underline }
|
||||||
|
|
||||||
|
/* Pagination */
|
||||||
|
.pagination { display: flex; gap: .5rem; margin-top: 1rem; align-items: center; justify-content: center }
|
||||||
|
.pagination a, .pagination span {
|
||||||
|
padding: .5rem .75rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: .25rem;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-text);
|
||||||
|
font-size: .875rem;
|
||||||
|
}
|
||||||
|
.pagination a:hover { background: var(--color-bg) }
|
||||||
|
.pagination .disabled { color: var(--color-text-muted) }
|
||||||
|
|
||||||
|
/* Status Badges - Want */
|
||||||
|
.status { display: inline-block; padding: .25rem .5rem; border-radius: .25rem; font-size: .75rem; font-weight: 500 }
|
||||||
|
.status-successful, .status-wantsuccessful { background: #dcfce7; color: #166534 }
|
||||||
|
.status-building, .status-wantbuilding { background: #ede9fe; color: #5b21b6 }
|
||||||
|
.status-failed, .status-wantfailed { background: #fee2e2; color: #991b1b }
|
||||||
|
.status-canceled, .status-wantcanceled { background: #f1f5f9; color: #475569 }
|
||||||
|
.status-new, .status-wantnew, .status-queued, .status-wantqueued { background: var(--color-brand-light); color: #92400e }
|
||||||
|
.status-upstreambuilding, .status-wantupstreambuilding { background: #fae8ff; color: #86198f }
|
||||||
|
.status-upstreamfailed, .status-wantupstreamfailed { background: #ffe4e6; color: #be123c }
|
||||||
|
|
||||||
|
/* Status Badges - Partition */
|
||||||
|
.status-live, .status-partitionlive { background: #dcfce7; color: #166534 }
|
||||||
|
.status-partitionbuilding { background: #ede9fe; color: #5b21b6 }
|
||||||
|
.status-partitionfailed { background: #fee2e2; color: #991b1b }
|
||||||
|
.status-idle, .status-partitionidle { background: #e0f2fe; color: #075985 }
|
||||||
|
.status-tainted, .status-partitiontainted { background: #fef3c7; color: #92400e }
|
||||||
|
.status-partitionupstreambuilding { background: #fae8ff; color: #86198f }
|
||||||
|
.status-partitionupstreamfailed { background: #ffe4e6; color: #be123c }
|
||||||
|
|
||||||
|
/* Status Badges - Job Run */
|
||||||
|
.status-succeeded, .status-jobrunsucceeded { background: #dcfce7; color: #166534 }
|
||||||
|
.status-running, .status-jobrunrunning { background: #ede9fe; color: #5b21b6 }
|
||||||
|
.status-jobrunfailed, .status-depmiss, .status-jobrundepmiss { background: #fee2e2; color: #991b1b }
|
||||||
|
.status-jobrunnew { background: var(--color-brand-light); color: #92400e }
|
||||||
|
|
||||||
|
/* Detail Pages */
|
||||||
|
.detail-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem }
|
||||||
|
.detail-header h1 { margin-bottom: 0 }
|
||||||
|
.detail-section {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: .5rem;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.detail-section h2 { font-size: .875rem; font-weight: 500; color: var(--color-text-muted); margin-bottom: .75rem }
|
||||||
|
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem }
|
||||||
|
.detail-item label { display: block; font-size: .75rem; color: var(--color-text-muted); margin-bottom: .25rem }
|
||||||
|
|
||||||
|
/* Partition Lists */
|
||||||
|
.partition-list { list-style: none; font-family: monospace; font-size: .8125rem }
|
||||||
|
.partition-list li { padding: .25rem 0 }
|
||||||
|
.partition-list a { color: var(--color-brand); text-decoration: none }
|
||||||
|
.partition-list a:hover { text-decoration: underline }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro nav(active, graph_label) %}
|
||||||
|
<nav>
|
||||||
|
<a href="/" class="logo">
|
||||||
|
<svg viewBox="0 0 243 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M123.5 77L149.048 121.25H97.9523L123.5 77Z" fill="#F2994A"/>
|
||||||
|
<path d="M224.772 125.035L155.772 125.035L109.52 45.3147L86.7722 45.3147L40.2722 124.463L16.7725 124.463" stroke="#333" stroke-width="20"/>
|
||||||
|
<path d="M86.6196 5.18886L121.12 64.9444L75.2062 144.86L86.58 164.56L178.375 165.256L190.125 185.608" stroke="#333" stroke-width="20"/>
|
||||||
|
<path d="M51.966 184.847L86.4659 125.092L178.632 124.896L190.006 105.196L144.711 25.3514L156.461 5.00002" stroke="#333" stroke-width="20"/>
|
||||||
|
</svg>
|
||||||
|
<span>DataBuild</span>
|
||||||
|
</a>
|
||||||
|
<div class="links">
|
||||||
|
<a href="/wants"{% if active == "wants" %} class="active"{% endif %}>Wants</a>
|
||||||
|
<a href="/partitions"{% if active == "partitions" %} class="active"{% endif %}>Partitions</a>
|
||||||
|
<a href="/job_runs"{% if active == "job_runs" %} class="active"{% endif %}>Job Runs</a>
|
||||||
|
</div>
|
||||||
|
<span class="graph-label">{{ graph_label }}</span>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
{% endmacro %}
|
||||||
|
|
||||||
|
{% macro footer() %}
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
{% endmacro %}
|
||||||
|
|
@ -1,67 +1,7 @@
|
||||||
{% macro head(title) %}<!DOCTYPE html>
|
{% import "base.html" as base %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
<style>
|
|
||||||
@view-transition{navigation:auto}
|
|
||||||
:root{--color-brand:#F2994A;--color-brand-light:#fef3e2;--color-text:#333;--color-text-muted:#6b7280;--color-bg:#f9fafb;--color-surface:#fff;--color-border:#e5e7eb}
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5}
|
|
||||||
nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.75rem 1.5rem;display:flex;align-items:center;gap:2rem;view-transition-name:nav}
|
|
||||||
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--color-text)}
|
|
||||||
.logo svg{width:28px;height:25px}
|
|
||||||
.logo span{font-family:'Roboto Slab',serif;font-weight:600;font-size:1.125rem}
|
|
||||||
nav .links{display:flex;gap:1.5rem}
|
|
||||||
nav .links a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;padding:.25rem 0;border-bottom:2px solid transparent}
|
|
||||||
nav .links a:hover{color:var(--color-text)}
|
|
||||||
nav .links a.active{color:var(--color-brand);border-bottom-color:var(--color-brand)}
|
|
||||||
nav .graph-label{margin-left:auto;color:var(--color-text-muted);font-size:.875rem}
|
|
||||||
main{max-width:1200px;margin:0 auto;padding:1.5rem}
|
|
||||||
h1{font-size:1.5rem;font-weight:600;margin-bottom:1rem}
|
|
||||||
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}
|
|
||||||
.stat-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;padding:1rem;text-decoration:none;color:inherit}
|
|
||||||
.stat-card:hover{border-color:var(--color-brand)}
|
|
||||||
.stat-card .value{font-size:1.5rem;font-weight:600}
|
|
||||||
.stat-card .label{font-size:.75rem;color:var(--color-text-muted)}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro nav(active, graph_label) %}
|
{% call base::head("Home - DataBuild") %}
|
||||||
<nav>
|
{% call base::nav("", base.graph_label) %}
|
||||||
<a href="/" class="logo">
|
|
||||||
<svg viewBox="0 0 243 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M123.5 77L149.048 121.25H97.9523L123.5 77Z" fill="#F2994A"/>
|
|
||||||
<path d="M224.772 125.035L155.772 125.035L109.52 45.3147L86.7722 45.3147L40.2722 124.463L16.7725 124.463" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M86.6196 5.18886L121.12 64.9444L75.2062 144.86L86.58 164.56L178.375 165.256L190.125 185.608" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M51.966 184.847L86.4659 125.092L178.632 124.896L190.006 105.196L144.711 25.3514L156.461 5.00002" stroke="#333" stroke-width="20"/>
|
|
||||||
</svg>
|
|
||||||
<span>DataBuild</span>
|
|
||||||
</a>
|
|
||||||
<div class="links">
|
|
||||||
<a href="/wants"{% if active == "wants" %} class="active"{% endif %}>Wants</a>
|
|
||||||
<a href="/partitions"{% if active == "partitions" %} class="active"{% endif %}>Partitions</a>
|
|
||||||
<a href="/job_runs"{% if active == "job_runs" %} class="active"{% endif %}>Job Runs</a>
|
|
||||||
</div>
|
|
||||||
<span class="graph-label">{{ graph_label }}</span>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro footer() %}
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% call head("Home - DataBuild") %}
|
|
||||||
{% call nav("", base.graph_label) %}
|
|
||||||
|
|
||||||
<h1>Dashboard</h1>
|
<h1>Dashboard</h1>
|
||||||
|
|
||||||
|
|
@ -80,4 +20,4 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% call footer() %}
|
{% call base::footer() %}
|
||||||
|
|
|
||||||
|
|
@ -1,77 +1,7 @@
|
||||||
{% macro head(title) %}<!DOCTYPE html>
|
{% import "base.html" as base %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
<style>
|
|
||||||
@view-transition{navigation:auto}
|
|
||||||
:root{--color-brand:#F2994A;--color-brand-light:#fef3e2;--color-text:#333;--color-text-muted:#6b7280;--color-bg:#f9fafb;--color-surface:#fff;--color-border:#e5e7eb}
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5}
|
|
||||||
nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.75rem 1.5rem;display:flex;align-items:center;gap:2rem;view-transition-name:nav}
|
|
||||||
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--color-text)}
|
|
||||||
.logo svg{width:28px;height:25px}
|
|
||||||
.logo span{font-family:'Roboto Slab',serif;font-weight:600;font-size:1.125rem}
|
|
||||||
nav .links{display:flex;gap:1.5rem}
|
|
||||||
nav .links a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;padding:.25rem 0;border-bottom:2px solid transparent}
|
|
||||||
nav .links a:hover{color:var(--color-text)}
|
|
||||||
nav .links a.active{color:var(--color-brand);border-bottom-color:var(--color-brand)}
|
|
||||||
nav .graph-label{margin-left:auto;color:var(--color-text-muted);font-size:.875rem}
|
|
||||||
main{max-width:1200px;margin:0 auto;padding:1.5rem}
|
|
||||||
h1{font-size:1.5rem;font-weight:600;margin-bottom:1rem}
|
|
||||||
.status{display:inline-block;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500}
|
|
||||||
.status-succeeded,.status-jobrunsucceeded{background:#dcfce7;color:#166534}
|
|
||||||
.status-running,.status-jobrunrunning{background:#ede9fe;color:#5b21b6}
|
|
||||||
.status-failed,.status-jobrunfailed,.status-depmiss,.status-jobrundepmiss{background:#fee2e2;color:#991b1b}
|
|
||||||
.status-new,.status-jobrunnew{background:var(--color-brand-light);color:#92400e}
|
|
||||||
.detail-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
|
|
||||||
.detail-header h1{margin-bottom:0}
|
|
||||||
.detail-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;padding:1rem;margin-bottom:1rem}
|
|
||||||
.detail-section h2{font-size:.875rem;font-weight:500;color:var(--color-text-muted);margin-bottom:.75rem}
|
|
||||||
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
|
|
||||||
.detail-item label{display:block;font-size:.75rem;color:var(--color-text-muted);margin-bottom:.25rem}
|
|
||||||
.partition-list{list-style:none;font-family:monospace;font-size:.8125rem}
|
|
||||||
.partition-list li{padding:.25rem 0}
|
|
||||||
.partition-list a{color:var(--color-brand);text-decoration:none}
|
|
||||||
.partition-list a:hover{text-decoration:underline}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro nav(active, graph_label) %}
|
{% call base::head("Job Run - DataBuild") %}
|
||||||
<nav>
|
{% call base::nav("job_runs", base.graph_label) %}
|
||||||
<a href="/" class="logo">
|
|
||||||
<svg viewBox="0 0 243 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M123.5 77L149.048 121.25H97.9523L123.5 77Z" fill="#F2994A"/>
|
|
||||||
<path d="M224.772 125.035L155.772 125.035L109.52 45.3147L86.7722 45.3147L40.2722 124.463L16.7725 124.463" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M86.6196 5.18886L121.12 64.9444L75.2062 144.86L86.58 164.56L178.375 165.256L190.125 185.608" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M51.966 184.847L86.4659 125.092L178.632 124.896L190.006 105.196L144.711 25.3514L156.461 5.00002" stroke="#333" stroke-width="20"/>
|
|
||||||
</svg>
|
|
||||||
<span>DataBuild</span>
|
|
||||||
</a>
|
|
||||||
<div class="links">
|
|
||||||
<a href="/wants"{% if active == "wants" %} class="active"{% endif %}>Wants</a>
|
|
||||||
<a href="/partitions"{% if active == "partitions" %} class="active"{% endif %}>Partitions</a>
|
|
||||||
<a href="/job_runs"{% if active == "job_runs" %} class="active"{% endif %}>Job Runs</a>
|
|
||||||
</div>
|
|
||||||
<span class="graph-label">{{ graph_label }}</span>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro footer() %}
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% call head("Job Run - DataBuild") %}
|
|
||||||
{% call nav("job_runs", base.graph_label) %}
|
|
||||||
|
|
||||||
<div class="detail-header" style="view-transition-name:job-run-header">
|
<div class="detail-header" style="view-transition-name:job-run-header">
|
||||||
<h1>Job Run: {{ job_run.id }}</h1>
|
<h1>Job Run: {{ job_run.id }}</h1>
|
||||||
|
|
@ -88,8 +18,8 @@
|
||||||
<label>Last Heartbeat</label>
|
<label>Last Heartbeat</label>
|
||||||
<span>
|
<span>
|
||||||
{% match job_run.last_heartbeat_at %}
|
{% match job_run.last_heartbeat_at %}
|
||||||
{% when Some with (ts) %}{{ ts }}
|
{% when Some with (ts) %}{{ ts }}
|
||||||
{% when None %}-
|
{% when None %}-
|
||||||
{% endmatch %}
|
{% endmatch %}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -124,4 +54,4 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% call footer() %}
|
{% call base::footer() %}
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,7 @@
|
||||||
{% macro head(title) %}<!DOCTYPE html>
|
{% import "base.html" as base %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
<style>
|
|
||||||
@view-transition{navigation:auto}
|
|
||||||
:root{--color-brand:#F2994A;--color-brand-light:#fef3e2;--color-text:#333;--color-text-muted:#6b7280;--color-bg:#f9fafb;--color-surface:#fff;--color-border:#e5e7eb}
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5}
|
|
||||||
nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.75rem 1.5rem;display:flex;align-items:center;gap:2rem;view-transition-name:nav}
|
|
||||||
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--color-text)}
|
|
||||||
.logo svg{width:28px;height:25px}
|
|
||||||
.logo span{font-family:'Roboto Slab',serif;font-weight:600;font-size:1.125rem}
|
|
||||||
nav .links{display:flex;gap:1.5rem}
|
|
||||||
nav .links a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;padding:.25rem 0;border-bottom:2px solid transparent}
|
|
||||||
nav .links a:hover{color:var(--color-text)}
|
|
||||||
nav .links a.active{color:var(--color-brand);border-bottom-color:var(--color-brand)}
|
|
||||||
nav .graph-label{margin-left:auto;color:var(--color-text-muted);font-size:.875rem}
|
|
||||||
main{max-width:1200px;margin:0 auto;padding:1.5rem}
|
|
||||||
h1{font-size:1.5rem;font-weight:600;margin-bottom:1rem}
|
|
||||||
table{width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;border-collapse:collapse;font-size:.875rem}
|
|
||||||
th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border)}
|
|
||||||
th{background:var(--color-bg);font-weight:500;color:var(--color-text-muted)}
|
|
||||||
tr:last-child td{border-bottom:none}
|
|
||||||
tr:hover{background:var(--color-bg)}
|
|
||||||
td a{color:var(--color-brand);text-decoration:none}
|
|
||||||
td a:hover{text-decoration:underline}
|
|
||||||
.status{display:inline-block;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500}
|
|
||||||
.status-succeeded,.status-jobrunsucceeded{background:#dcfce7;color:#166534}
|
|
||||||
.status-running,.status-jobrunrunning{background:#ede9fe;color:#5b21b6}
|
|
||||||
.status-failed,.status-jobrunfailed,.status-depmiss,.status-jobrundepmiss{background:#fee2e2;color:#991b1b}
|
|
||||||
.status-new,.status-jobrunnew{background:var(--color-brand-light);color:#92400e}
|
|
||||||
.pagination{display:flex;gap:.5rem;margin-top:1rem;align-items:center;justify-content:center}
|
|
||||||
.pagination a,.pagination span{padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:.25rem;text-decoration:none;color:var(--color-text);font-size:.875rem}
|
|
||||||
.pagination a:hover{background:var(--color-bg)}
|
|
||||||
.pagination .disabled{color:var(--color-text-muted)}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro nav(active, graph_label) %}
|
{% call base::head("Job Runs - DataBuild") %}
|
||||||
<nav>
|
{% call base::nav("job_runs", base.graph_label) %}
|
||||||
<a href="/" class="logo">
|
|
||||||
<svg viewBox="0 0 243 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M123.5 77L149.048 121.25H97.9523L123.5 77Z" fill="#F2994A"/>
|
|
||||||
<path d="M224.772 125.035L155.772 125.035L109.52 45.3147L86.7722 45.3147L40.2722 124.463L16.7725 124.463" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M86.6196 5.18886L121.12 64.9444L75.2062 144.86L86.58 164.56L178.375 165.256L190.125 185.608" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M51.966 184.847L86.4659 125.092L178.632 124.896L190.006 105.196L144.711 25.3514L156.461 5.00002" stroke="#333" stroke-width="20"/>
|
|
||||||
</svg>
|
|
||||||
<span>DataBuild</span>
|
|
||||||
</a>
|
|
||||||
<div class="links">
|
|
||||||
<a href="/wants"{% if active == "wants" %} class="active"{% endif %}>Wants</a>
|
|
||||||
<a href="/partitions"{% if active == "partitions" %} class="active"{% endif %}>Partitions</a>
|
|
||||||
<a href="/job_runs"{% if active == "job_runs" %} class="active"{% endif %}>Job Runs</a>
|
|
||||||
</div>
|
|
||||||
<span class="graph-label">{{ graph_label }}</span>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro footer() %}
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% call head("Job Runs - DataBuild") %}
|
|
||||||
{% call nav("job_runs", base.graph_label) %}
|
|
||||||
|
|
||||||
<h1>Job Runs</h1>
|
<h1>Job Runs</h1>
|
||||||
|
|
||||||
|
|
@ -126,4 +55,4 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% call footer() %}
|
{% call base::footer() %}
|
||||||
|
|
|
||||||
|
|
@ -1,80 +1,7 @@
|
||||||
{% macro head(title) %}<!DOCTYPE html>
|
{% import "base.html" as base %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
<style>
|
|
||||||
@view-transition{navigation:auto}
|
|
||||||
:root{--color-brand:#F2994A;--color-brand-light:#fef3e2;--color-text:#333;--color-text-muted:#6b7280;--color-bg:#f9fafb;--color-surface:#fff;--color-border:#e5e7eb}
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5}
|
|
||||||
nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.75rem 1.5rem;display:flex;align-items:center;gap:2rem;view-transition-name:nav}
|
|
||||||
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--color-text)}
|
|
||||||
.logo svg{width:28px;height:25px}
|
|
||||||
.logo span{font-family:'Roboto Slab',serif;font-weight:600;font-size:1.125rem}
|
|
||||||
nav .links{display:flex;gap:1.5rem}
|
|
||||||
nav .links a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;padding:.25rem 0;border-bottom:2px solid transparent}
|
|
||||||
nav .links a:hover{color:var(--color-text)}
|
|
||||||
nav .links a.active{color:var(--color-brand);border-bottom-color:var(--color-brand)}
|
|
||||||
nav .graph-label{margin-left:auto;color:var(--color-text-muted);font-size:.875rem}
|
|
||||||
main{max-width:1200px;margin:0 auto;padding:1.5rem}
|
|
||||||
h1{font-size:1.5rem;font-weight:600;margin-bottom:1rem}
|
|
||||||
.status{display:inline-block;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500}
|
|
||||||
.status-live,.status-partitionlive{background:#dcfce7;color:#166534}
|
|
||||||
.status-building,.status-partitionbuilding{background:#ede9fe;color:#5b21b6}
|
|
||||||
.status-failed,.status-partitionfailed{background:#fee2e2;color:#991b1b}
|
|
||||||
.status-idle,.status-partitionidle{background:#e0f2fe;color:#075985}
|
|
||||||
.status-tainted,.status-partitiontainted{background:#fef3c7;color:#92400e}
|
|
||||||
.status-upstreambuilding,.status-partitionupstreambuilding{background:#fae8ff;color:#86198f}
|
|
||||||
.status-upstreamfailed,.status-partitionupstreamfailed{background:#ffe4e6;color:#be123c}
|
|
||||||
.detail-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
|
|
||||||
.detail-header h1{margin-bottom:0}
|
|
||||||
.detail-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;padding:1rem;margin-bottom:1rem}
|
|
||||||
.detail-section h2{font-size:.875rem;font-weight:500;color:var(--color-text-muted);margin-bottom:.75rem}
|
|
||||||
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
|
|
||||||
.detail-item label{display:block;font-size:.75rem;color:var(--color-text-muted);margin-bottom:.25rem}
|
|
||||||
.partition-list{list-style:none;font-family:monospace;font-size:.8125rem}
|
|
||||||
.partition-list li{padding:.25rem 0}
|
|
||||||
.partition-list a{color:var(--color-brand);text-decoration:none}
|
|
||||||
.partition-list a:hover{text-decoration:underline}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro nav(active, graph_label) %}
|
{% call base::head("Partition - DataBuild") %}
|
||||||
<nav>
|
{% call base::nav("partitions", base.graph_label) %}
|
||||||
<a href="/" class="logo">
|
|
||||||
<svg viewBox="0 0 243 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M123.5 77L149.048 121.25H97.9523L123.5 77Z" fill="#F2994A"/>
|
|
||||||
<path d="M224.772 125.035L155.772 125.035L109.52 45.3147L86.7722 45.3147L40.2722 124.463L16.7725 124.463" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M86.6196 5.18886L121.12 64.9444L75.2062 144.86L86.58 164.56L178.375 165.256L190.125 185.608" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M51.966 184.847L86.4659 125.092L178.632 124.896L190.006 105.196L144.711 25.3514L156.461 5.00002" stroke="#333" stroke-width="20"/>
|
|
||||||
</svg>
|
|
||||||
<span>DataBuild</span>
|
|
||||||
</a>
|
|
||||||
<div class="links">
|
|
||||||
<a href="/wants"{% if active == "wants" %} class="active"{% endif %}>Wants</a>
|
|
||||||
<a href="/partitions"{% if active == "partitions" %} class="active"{% endif %}>Partitions</a>
|
|
||||||
<a href="/job_runs"{% if active == "job_runs" %} class="active"{% endif %}>Job Runs</a>
|
|
||||||
</div>
|
|
||||||
<span class="graph-label">{{ graph_label }}</span>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro footer() %}
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% call head("Partition - DataBuild") %}
|
|
||||||
{% call nav("partitions", base.graph_label) %}
|
|
||||||
|
|
||||||
<div class="detail-header" style="view-transition-name:partition-header">
|
<div class="detail-header" style="view-transition-name:partition-header">
|
||||||
<h1 style="font-family:monospace;font-size:1.25rem">
|
<h1 style="font-family:monospace;font-size:1.25rem">
|
||||||
|
|
@ -97,8 +24,8 @@
|
||||||
<label>Last Updated</label>
|
<label>Last Updated</label>
|
||||||
<span>
|
<span>
|
||||||
{% match partition.last_updated_timestamp %}
|
{% match partition.last_updated_timestamp %}
|
||||||
{% when Some with (ts) %}{{ ts }}
|
{% when Some with (ts) %}{{ ts }}
|
||||||
{% when None %}-
|
{% when None %}-
|
||||||
{% endmatch %}
|
{% endmatch %}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -138,4 +65,4 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% call footer() %}
|
{% call base::footer() %}
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,7 @@
|
||||||
{% macro head(title) %}<!DOCTYPE html>
|
{% import "base.html" as base %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
<style>
|
|
||||||
@view-transition{navigation:auto}
|
|
||||||
:root{--color-brand:#F2994A;--color-brand-light:#fef3e2;--color-text:#333;--color-text-muted:#6b7280;--color-bg:#f9fafb;--color-surface:#fff;--color-border:#e5e7eb}
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5}
|
|
||||||
nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.75rem 1.5rem;display:flex;align-items:center;gap:2rem;view-transition-name:nav}
|
|
||||||
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--color-text)}
|
|
||||||
.logo svg{width:28px;height:25px}
|
|
||||||
.logo span{font-family:'Roboto Slab',serif;font-weight:600;font-size:1.125rem}
|
|
||||||
nav .links{display:flex;gap:1.5rem}
|
|
||||||
nav .links a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;padding:.25rem 0;border-bottom:2px solid transparent}
|
|
||||||
nav .links a:hover{color:var(--color-text)}
|
|
||||||
nav .links a.active{color:var(--color-brand);border-bottom-color:var(--color-brand)}
|
|
||||||
nav .graph-label{margin-left:auto;color:var(--color-text-muted);font-size:.875rem}
|
|
||||||
main{max-width:1200px;margin:0 auto;padding:1.5rem}
|
|
||||||
h1{font-size:1.5rem;font-weight:600;margin-bottom:1rem}
|
|
||||||
table{width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;border-collapse:collapse;font-size:.875rem}
|
|
||||||
th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border)}
|
|
||||||
th{background:var(--color-bg);font-weight:500;color:var(--color-text-muted)}
|
|
||||||
tr:last-child td{border-bottom:none}
|
|
||||||
tr:hover{background:var(--color-bg)}
|
|
||||||
td a{color:var(--color-brand);text-decoration:none}
|
|
||||||
td a:hover{text-decoration:underline}
|
|
||||||
.status{display:inline-block;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500}
|
|
||||||
.status-live,.status-partitionlive{background:#dcfce7;color:#166534}
|
|
||||||
.status-building,.status-partitionbuilding{background:#ede9fe;color:#5b21b6}
|
|
||||||
.status-failed,.status-partitionfailed{background:#fee2e2;color:#991b1b}
|
|
||||||
.status-idle,.status-partitionidle{background:#e0f2fe;color:#075985}
|
|
||||||
.status-tainted,.status-partitiontainted{background:#fef3c7;color:#92400e}
|
|
||||||
.status-upstreambuilding,.status-partitionupstreambuilding{background:#fae8ff;color:#86198f}
|
|
||||||
.status-upstreamfailed,.status-partitionupstreamfailed{background:#ffe4e6;color:#be123c}
|
|
||||||
.pagination{display:flex;gap:.5rem;margin-top:1rem;align-items:center;justify-content:center}
|
|
||||||
.pagination a,.pagination span{padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:.25rem;text-decoration:none;color:var(--color-text);font-size:.875rem}
|
|
||||||
.pagination a:hover{background:var(--color-bg)}
|
|
||||||
.pagination .disabled{color:var(--color-text-muted)}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro nav(active, graph_label) %}
|
{% call base::head("Partitions - DataBuild") %}
|
||||||
<nav>
|
{% call base::nav("partitions", base.graph_label) %}
|
||||||
<a href="/" class="logo">
|
|
||||||
<svg viewBox="0 0 243 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M123.5 77L149.048 121.25H97.9523L123.5 77Z" fill="#F2994A"/>
|
|
||||||
<path d="M224.772 125.035L155.772 125.035L109.52 45.3147L86.7722 45.3147L40.2722 124.463L16.7725 124.463" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M86.6196 5.18886L121.12 64.9444L75.2062 144.86L86.58 164.56L178.375 165.256L190.125 185.608" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M51.966 184.847L86.4659 125.092L178.632 124.896L190.006 105.196L144.711 25.3514L156.461 5.00002" stroke="#333" stroke-width="20"/>
|
|
||||||
</svg>
|
|
||||||
<span>DataBuild</span>
|
|
||||||
</a>
|
|
||||||
<div class="links">
|
|
||||||
<a href="/wants"{% if active == "wants" %} class="active"{% endif %}>Wants</a>
|
|
||||||
<a href="/partitions"{% if active == "partitions" %} class="active"{% endif %}>Partitions</a>
|
|
||||||
<a href="/job_runs"{% if active == "job_runs" %} class="active"{% endif %}>Job Runs</a>
|
|
||||||
</div>
|
|
||||||
<span class="graph-label">{{ graph_label }}</span>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro footer() %}
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% call head("Partitions - DataBuild") %}
|
|
||||||
{% call nav("partitions", base.graph_label) %}
|
|
||||||
|
|
||||||
<h1>Partitions</h1>
|
<h1>Partitions</h1>
|
||||||
|
|
||||||
|
|
@ -133,4 +59,4 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% call footer() %}
|
{% call base::footer() %}
|
||||||
|
|
|
||||||
|
|
@ -1,80 +1,7 @@
|
||||||
{% macro head(title) %}<!DOCTYPE html>
|
{% import "base.html" as base %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
<style>
|
|
||||||
@view-transition{navigation:auto}
|
|
||||||
:root{--color-brand:#F2994A;--color-brand-light:#fef3e2;--color-text:#333;--color-text-muted:#6b7280;--color-bg:#f9fafb;--color-surface:#fff;--color-border:#e5e7eb}
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5}
|
|
||||||
nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.75rem 1.5rem;display:flex;align-items:center;gap:2rem;view-transition-name:nav}
|
|
||||||
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--color-text)}
|
|
||||||
.logo svg{width:28px;height:25px}
|
|
||||||
.logo span{font-family:'Roboto Slab',serif;font-weight:600;font-size:1.125rem}
|
|
||||||
nav .links{display:flex;gap:1.5rem}
|
|
||||||
nav .links a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;padding:.25rem 0;border-bottom:2px solid transparent}
|
|
||||||
nav .links a:hover{color:var(--color-text)}
|
|
||||||
nav .links a.active{color:var(--color-brand);border-bottom-color:var(--color-brand)}
|
|
||||||
nav .graph-label{margin-left:auto;color:var(--color-text-muted);font-size:.875rem}
|
|
||||||
main{max-width:1200px;margin:0 auto;padding:1.5rem}
|
|
||||||
h1{font-size:1.5rem;font-weight:600;margin-bottom:1rem}
|
|
||||||
.status{display:inline-block;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500}
|
|
||||||
.status-successful,.status-wantsuccessful{background:#dcfce7;color:#166534}
|
|
||||||
.status-building,.status-wantbuilding{background:#ede9fe;color:#5b21b6}
|
|
||||||
.status-failed,.status-wantfailed{background:#fee2e2;color:#991b1b}
|
|
||||||
.status-canceled,.status-wantcanceled{background:#f1f5f9;color:#475569}
|
|
||||||
.status-new,.status-wantnew,.status-queued,.status-wantqueued{background:var(--color-brand-light);color:#92400e}
|
|
||||||
.status-upstreambuilding,.status-wantupstreambuilding{background:#fae8ff;color:#86198f}
|
|
||||||
.status-upstreamfailed,.status-wantupstreamfailed{background:#ffe4e6;color:#be123c}
|
|
||||||
.detail-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
|
|
||||||
.detail-header h1{margin-bottom:0}
|
|
||||||
.detail-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;padding:1rem;margin-bottom:1rem}
|
|
||||||
.detail-section h2{font-size:.875rem;font-weight:500;color:var(--color-text-muted);margin-bottom:.75rem}
|
|
||||||
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
|
|
||||||
.detail-item label{display:block;font-size:.75rem;color:var(--color-text-muted);margin-bottom:.25rem}
|
|
||||||
.partition-list{list-style:none;font-family:monospace;font-size:.8125rem}
|
|
||||||
.partition-list li{padding:.25rem 0}
|
|
||||||
.partition-list a{color:var(--color-brand);text-decoration:none}
|
|
||||||
.partition-list a:hover{text-decoration:underline}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro nav(active, graph_label) %}
|
{% call base::head("Want - DataBuild") %}
|
||||||
<nav>
|
{% call base::nav("wants", base.graph_label) %}
|
||||||
<a href="/" class="logo">
|
|
||||||
<svg viewBox="0 0 243 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M123.5 77L149.048 121.25H97.9523L123.5 77Z" fill="#F2994A"/>
|
|
||||||
<path d="M224.772 125.035L155.772 125.035L109.52 45.3147L86.7722 45.3147L40.2722 124.463L16.7725 124.463" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M86.6196 5.18886L121.12 64.9444L75.2062 144.86L86.58 164.56L178.375 165.256L190.125 185.608" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M51.966 184.847L86.4659 125.092L178.632 124.896L190.006 105.196L144.711 25.3514L156.461 5.00002" stroke="#333" stroke-width="20"/>
|
|
||||||
</svg>
|
|
||||||
<span>DataBuild</span>
|
|
||||||
</a>
|
|
||||||
<div class="links">
|
|
||||||
<a href="/wants"{% if active == "wants" %} class="active"{% endif %}>Wants</a>
|
|
||||||
<a href="/partitions"{% if active == "partitions" %} class="active"{% endif %}>Partitions</a>
|
|
||||||
<a href="/job_runs"{% if active == "job_runs" %} class="active"{% endif %}>Job Runs</a>
|
|
||||||
</div>
|
|
||||||
<span class="graph-label">{{ graph_label }}</span>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro footer() %}
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% call head("Want - DataBuild") %}
|
|
||||||
{% call nav("wants", base.graph_label) %}
|
|
||||||
|
|
||||||
<div class="detail-header" style="view-transition-name:want-header">
|
<div class="detail-header" style="view-transition-name:want-header">
|
||||||
<h1>Want: {{ want.want_id }}</h1>
|
<h1>Want: {{ want.want_id }}</h1>
|
||||||
|
|
@ -138,4 +65,4 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% call footer() %}
|
{% call base::footer() %}
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,7 @@
|
||||||
{% macro head(title) %}<!DOCTYPE html>
|
{% import "base.html" as base %}
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
|
|
||||||
<title>{{ title }}</title>
|
|
||||||
<style>
|
|
||||||
@view-transition{navigation:auto}
|
|
||||||
:root{--color-brand:#F2994A;--color-brand-light:#fef3e2;--color-text:#333;--color-text-muted:#6b7280;--color-bg:#f9fafb;--color-surface:#fff;--color-border:#e5e7eb}
|
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
|
||||||
body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5}
|
|
||||||
nav{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:.75rem 1.5rem;display:flex;align-items:center;gap:2rem;view-transition-name:nav}
|
|
||||||
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--color-text)}
|
|
||||||
.logo svg{width:28px;height:25px}
|
|
||||||
.logo span{font-family:'Roboto Slab',serif;font-weight:600;font-size:1.125rem}
|
|
||||||
nav .links{display:flex;gap:1.5rem}
|
|
||||||
nav .links a{color:var(--color-text-muted);text-decoration:none;font-size:.875rem;padding:.25rem 0;border-bottom:2px solid transparent}
|
|
||||||
nav .links a:hover{color:var(--color-text)}
|
|
||||||
nav .links a.active{color:var(--color-brand);border-bottom-color:var(--color-brand)}
|
|
||||||
nav .graph-label{margin-left:auto;color:var(--color-text-muted);font-size:.875rem}
|
|
||||||
main{max-width:1200px;margin:0 auto;padding:1.5rem}
|
|
||||||
h1{font-size:1.5rem;font-weight:600;margin-bottom:1rem}
|
|
||||||
table{width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:.5rem;border-collapse:collapse;font-size:.875rem}
|
|
||||||
th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--color-border)}
|
|
||||||
th{background:var(--color-bg);font-weight:500;color:var(--color-text-muted)}
|
|
||||||
tr:last-child td{border-bottom:none}
|
|
||||||
tr:hover{background:var(--color-bg)}
|
|
||||||
td a{color:var(--color-brand);text-decoration:none}
|
|
||||||
td a:hover{text-decoration:underline}
|
|
||||||
.status{display:inline-block;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;font-weight:500}
|
|
||||||
.status-successful,.status-wantsuccessful{background:#dcfce7;color:#166534}
|
|
||||||
.status-building,.status-wantbuilding{background:#ede9fe;color:#5b21b6}
|
|
||||||
.status-failed,.status-wantfailed{background:#fee2e2;color:#991b1b}
|
|
||||||
.status-canceled,.status-wantcanceled{background:#f1f5f9;color:#475569}
|
|
||||||
.status-new,.status-wantnew,.status-queued,.status-wantqueued{background:var(--color-brand-light);color:#92400e}
|
|
||||||
.status-upstreambuilding,.status-wantupstreambuilding{background:#fae8ff;color:#86198f}
|
|
||||||
.status-upstreamfailed,.status-wantupstreamfailed{background:#ffe4e6;color:#be123c}
|
|
||||||
.pagination{display:flex;gap:.5rem;margin-top:1rem;align-items:center;justify-content:center}
|
|
||||||
.pagination a,.pagination span{padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:.25rem;text-decoration:none;color:var(--color-text);font-size:.875rem}
|
|
||||||
.pagination a:hover{background:var(--color-bg)}
|
|
||||||
.pagination .disabled{color:var(--color-text-muted)}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro nav(active, graph_label) %}
|
{% call base::head("Wants - DataBuild") %}
|
||||||
<nav>
|
{% call base::nav("wants", base.graph_label) %}
|
||||||
<a href="/" class="logo">
|
|
||||||
<svg viewBox="0 0 243 215" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M123.5 77L149.048 121.25H97.9523L123.5 77Z" fill="#F2994A"/>
|
|
||||||
<path d="M224.772 125.035L155.772 125.035L109.52 45.3147L86.7722 45.3147L40.2722 124.463L16.7725 124.463" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M86.6196 5.18886L121.12 64.9444L75.2062 144.86L86.58 164.56L178.375 165.256L190.125 185.608" stroke="#333" stroke-width="20"/>
|
|
||||||
<path d="M51.966 184.847L86.4659 125.092L178.632 124.896L190.006 105.196L144.711 25.3514L156.461 5.00002" stroke="#333" stroke-width="20"/>
|
|
||||||
</svg>
|
|
||||||
<span>DataBuild</span>
|
|
||||||
</a>
|
|
||||||
<div class="links">
|
|
||||||
<a href="/wants"{% if active == "wants" %} class="active"{% endif %}>Wants</a>
|
|
||||||
<a href="/partitions"{% if active == "partitions" %} class="active"{% endif %}>Partitions</a>
|
|
||||||
<a href="/job_runs"{% if active == "job_runs" %} class="active"{% endif %}>Job Runs</a>
|
|
||||||
</div>
|
|
||||||
<span class="graph-label">{{ graph_label }}</span>
|
|
||||||
</nav>
|
|
||||||
<main>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro footer() %}
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% call head("Wants - DataBuild") %}
|
|
||||||
{% call nav("wants", base.graph_label) %}
|
|
||||||
|
|
||||||
<h1>Wants</h1>
|
<h1>Wants</h1>
|
||||||
|
|
||||||
|
|
@ -124,4 +50,4 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% call footer() %}
|
{% call base::footer() %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue