Complete rewrite of ArtifactAPI from Python/FastAPI to Go as a single binary. Core engine: - 10 package providers: generic, docker, helm, pypi, npm, rpm, alpine, puppet, terraform, goproxy — each with built-in mutable patterns - Content-addressable storage (SHA256 dedup across all remotes) - Three-tier caching: Redis (TTL/locks) → S3/MinIO (blobs) → upstream - Classifier with allowlist/blocklist per-remote (empty = allow all) - Circuit breaker, conditional revalidation, stale-on-error - Background garbage collection for orphaned blobs - Access logging to PostgreSQL API: - v1 proxy endpoints (backwards compatible) - v2 management API: CRUD remotes/virtuals, object browser, stats, health, SSE events, probe/test endpoint - Virtual repos with index merging (Helm YAML + PyPI HTML) Frontend (React + Vite, separate Dockerfile): - Dashboard with stats, health indicators, top remotes - Remotes list with type filter, remote detail with config/patterns - Object browser with pagination and evict - Test Remote page: probe any remote path, see headers/size/timing - Virtuals page with expandable member lists TUI (Bubble Tea): - Dashboard, remotes list/detail, object browser, virtuals - Vim-style navigation, artifactapi tui --endpoint <url> Infrastructure: - S3 client supports MinIO, Ceph RGW, AWS S3 (minio-go) - PostgreSQL schema with migrations - Docker Compose: API + UI + Postgres 17 + Redis 7 + MinIO - Makefile with Go version check, build/test/lint/fmt/e2e targets - Distroless Docker image (~15MB) Testing: - Unit tests for models, classifier, providers, mergers - E2E tests with testcontainers-go (real Postgres/Redis/MinIO) Terraform config: - All 40 production remotes + helm virtual as HCL - Provider repo: terraform-provider-artifactapi v0.0.1 (separate) --------- Co-authored-by: Ben Vincent <ben@unkin.net> Reviewed-on: #47
This commit was merged in pull request #47.
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.health-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 28px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.health-label {
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid var(--red);
|
||||
color: var(--red);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9em;
|
||||
padding: 32px 0;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { api } from '../api/client';
|
||||
import type { OverviewStats, RemoteStatRow, HealthStatus } from '../api/types';
|
||||
import { StatsCard } from '../components/StatsCard';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { DataTable } from '../components/DataTable';
|
||||
import { formatBytes, formatNumber } from '../components/format';
|
||||
import './Dashboard.css';
|
||||
|
||||
export function Dashboard() {
|
||||
const [stats, setStats] = useState<OverviewStats | null>(null);
|
||||
const [topRemotes, setTopRemotes] = useState<RemoteStatRow[]>([]);
|
||||
const [health, setHealth] = useState<HealthStatus | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([api.stats(), api.topRemotes(), api.health()])
|
||||
.then(([s, tr, h]) => {
|
||||
setStats(s);
|
||||
setTopRemotes(tr || []);
|
||||
setHealth(h);
|
||||
})
|
||||
.catch(e => setError(e.message));
|
||||
}, []);
|
||||
|
||||
if (error) return <div className="error-banner">{error}</div>;
|
||||
if (!stats) return <div className="loading">Loading...</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">Dashboard</h1>
|
||||
|
||||
<div className="stats-row">
|
||||
<StatsCard label="Remotes" value={formatNumber(stats.total_remotes)} />
|
||||
<StatsCard label="Cached Objects" value={formatNumber(stats.total_objects)} />
|
||||
<StatsCard label="Storage Used" value={formatBytes(stats.total_bytes)} />
|
||||
<StatsCard
|
||||
label="Dedup Savings"
|
||||
value={formatNumber(stats.total_blobs_deduped)}
|
||||
sub="shared blobs"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{health && (
|
||||
<div className="health-row">
|
||||
<span className="health-label">Services</span>
|
||||
<Badge variant={health.postgres === 'ok' ? 'green' : 'red'}>
|
||||
postgres: {health.postgres}
|
||||
</Badge>
|
||||
<Badge variant={health.redis === 'ok' ? 'green' : 'red'}>
|
||||
redis: {health.redis}
|
||||
</Badge>
|
||||
<Badge variant={health.s3 === 'ok' ? 'green' : 'red'}>
|
||||
s3: {health.s3}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h2 className="section-title">Top Remotes by Size</h2>
|
||||
<DataTable
|
||||
columns={[
|
||||
{
|
||||
key: 'name',
|
||||
header: 'Name',
|
||||
render: (r: RemoteStatRow) => <Link to={`/remotes/${r.name}`}>{r.name}</Link>,
|
||||
},
|
||||
{
|
||||
key: 'objects',
|
||||
header: 'Objects',
|
||||
render: (r: RemoteStatRow) => formatNumber(r.object_count),
|
||||
width: '120px',
|
||||
},
|
||||
{
|
||||
key: 'size',
|
||||
header: 'Size',
|
||||
render: (r: RemoteStatRow) => formatBytes(r.total_bytes),
|
||||
width: '120px',
|
||||
},
|
||||
{
|
||||
key: 'requests',
|
||||
header: 'Requests (30d)',
|
||||
render: (r: RemoteStatRow) => formatNumber(r.requests_30d),
|
||||
width: '140px',
|
||||
},
|
||||
]}
|
||||
data={topRemotes}
|
||||
emptyMessage="No remotes configured yet"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.objects-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.obj-path {
|
||||
font-size: 0.85em;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.hash-cell {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-evict {
|
||||
background: transparent;
|
||||
border: 1px solid var(--red);
|
||||
color: var(--red);
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8em;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-evict:hover {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.85em;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 5px 12px;
|
||||
font-size: 0.85em;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-sm:hover:not(:disabled) {
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.btn-sm:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { api } from '../api/client';
|
||||
import type { Artifact } from '../api/types';
|
||||
import { DataTable } from '../components/DataTable';
|
||||
import { formatBytes, timeAgo, truncateHash } from '../components/format';
|
||||
import './Objects.css';
|
||||
|
||||
export function Objects() {
|
||||
const { name } = useParams<{ name: string }>();
|
||||
const [artifacts, setArtifacts] = useState<Artifact[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filter, setFilter] = useState('');
|
||||
|
||||
const load = useCallback(() => {
|
||||
if (!name) return;
|
||||
setLoading(true);
|
||||
api.listObjects(name, page, 50)
|
||||
.then(a => setArtifacts(a || []))
|
||||
.finally(() => setLoading(false));
|
||||
}, [name, page]);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const handleEvict = async (path: string) => {
|
||||
if (!name || !confirm(`Evict ${path}?`)) return;
|
||||
await api.evictObject(name, path);
|
||||
load();
|
||||
};
|
||||
|
||||
const filtered = filter
|
||||
? artifacts.filter(a => a.path.toLowerCase().includes(filter.toLowerCase()))
|
||||
: artifacts;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="detail-header">
|
||||
<Link to={`/remotes/${name}`} className="back-link">← {name}</Link>
|
||||
<h1 className="page-title">Cached Objects</h1>
|
||||
</div>
|
||||
|
||||
<div className="objects-toolbar">
|
||||
<input
|
||||
className="search-input"
|
||||
placeholder="Filter by path..."
|
||||
value={filter}
|
||||
onChange={e => setFilter(e.target.value)}
|
||||
/>
|
||||
<span className="result-count">{filtered.length} objects</span>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="loading">Loading...</div>
|
||||
) : (
|
||||
<>
|
||||
<DataTable
|
||||
columns={[
|
||||
{
|
||||
key: 'path',
|
||||
header: 'Path',
|
||||
render: (a: Artifact) => <span className="mono obj-path">{a.path}</span>,
|
||||
},
|
||||
{
|
||||
key: 'size',
|
||||
header: 'Size',
|
||||
render: (a: Artifact) => formatBytes(a.size_bytes),
|
||||
width: '100px',
|
||||
},
|
||||
{
|
||||
key: 'hash',
|
||||
header: 'Hash',
|
||||
render: (a: Artifact) => (
|
||||
<span className="mono hash-cell" title={a.content_hash}>
|
||||
{truncateHash(a.content_hash)}
|
||||
</span>
|
||||
),
|
||||
width: '160px',
|
||||
},
|
||||
{
|
||||
key: 'accessed',
|
||||
header: 'Last Accessed',
|
||||
render: (a: Artifact) => timeAgo(a.last_accessed_at),
|
||||
width: '120px',
|
||||
},
|
||||
{
|
||||
key: 'hits',
|
||||
header: 'Hits',
|
||||
render: (a: Artifact) => a.access_count,
|
||||
width: '70px',
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
render: (a: Artifact) => (
|
||||
<button
|
||||
className="btn-evict"
|
||||
onClick={(e) => { e.stopPropagation(); handleEvict(a.path); }}
|
||||
>
|
||||
Evict
|
||||
</button>
|
||||
),
|
||||
width: '80px',
|
||||
},
|
||||
]}
|
||||
data={filtered}
|
||||
emptyMessage="No cached objects"
|
||||
/>
|
||||
|
||||
<div className="pagination">
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
disabled={page === 1}
|
||||
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="page-info">Page {page}</span>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
disabled={artifacts.length < 50}
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
.probe-description {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.probe-form {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.probe-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.probe-row label {
|
||||
width: 70px;
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.probe-select {
|
||||
flex: 1;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.probe-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.presets {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.presets-label {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preset-btn {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--accent);
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8em;
|
||||
font-family: var(--font-mono);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.preset-btn:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.probe-result {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.probe-ok {
|
||||
border-color: rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
|
||||
.probe-err {
|
||||
border-color: rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
.probe-result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.probe-duration {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
color: var(--text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.probe-error {
|
||||
color: var(--red);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.probe-dl {
|
||||
display: grid;
|
||||
grid-template-columns: 130px 1fr;
|
||||
gap: 6px 12px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.probe-dl dt {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.probe-dl dd {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.probe-header-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.probe-history {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.probe-path-cell {
|
||||
font-size: 0.8em;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,202 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
import type { Remote, ProbeResult } from '../api/types';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { formatBytes } from '../components/format';
|
||||
import './Probe.css';
|
||||
|
||||
const PRESETS: Record<string, { remote: string; path: string }[]> = {
|
||||
'gitea-dl': [
|
||||
{ remote: 'gitea-dl', path: 'gitea/1.23.7/gitea-1.23.7-linux-amd64' },
|
||||
{ remote: 'gitea-dl', path: 'act_runner/0.2.11/act_runner-0.2.11-linux-amd64' },
|
||||
],
|
||||
'github': [
|
||||
{ remote: 'github', path: 'ducaale/xh/releases/download/v0.24.0/xh-v0.24.0-x86_64-unknown-linux-musl.tar.gz' },
|
||||
{ remote: 'github', path: 'mikefarah/yq/releases/download/v4.45.4/yq_linux_amd64' },
|
||||
{ remote: 'github', path: 'neovim/neovim-releases/releases/download/v0.11.2/nvim-linux-x86_64.tar.gz' },
|
||||
],
|
||||
'hashicorp-releases': [
|
||||
{ remote: 'hashicorp-releases', path: 'terraform/1.12.2/terraform_1.12.2_linux_amd64.zip' },
|
||||
],
|
||||
'goproxy': [
|
||||
{ remote: 'goproxy', path: 'golang.org/x/net/@v/list' },
|
||||
{ remote: 'goproxy', path: 'golang.org/x/net/@v/v0.55.0.info' },
|
||||
],
|
||||
};
|
||||
|
||||
export function Probe() {
|
||||
const [remotes, setRemotes] = useState<Remote[]>([]);
|
||||
const [remote, setRemote] = useState('');
|
||||
const [path, setPath] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [result, setResult] = useState<ProbeResult | null>(null);
|
||||
const [history, setHistory] = useState<(ProbeResult & { remote: string; path: string })[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
api.listRemotes().then(r => {
|
||||
setRemotes(r || []);
|
||||
if (r?.length && !remote) setRemote(r[0].name);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const runProbe = async () => {
|
||||
if (!remote || !path) return;
|
||||
setLoading(true);
|
||||
setResult(null);
|
||||
try {
|
||||
const r = await api.probe(remote, path);
|
||||
setResult(r);
|
||||
setHistory(prev => [{ ...r, remote, path }, ...prev].slice(0, 20));
|
||||
} catch (e: unknown) {
|
||||
setResult({
|
||||
status: 0,
|
||||
source: '',
|
||||
content_type: '',
|
||||
size_bytes: 0,
|
||||
headers: {},
|
||||
duration_ms: 0,
|
||||
error: e instanceof Error ? e.message : String(e),
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const applyPreset = (r: string, p: string) => {
|
||||
setRemote(r);
|
||||
setPath(p);
|
||||
};
|
||||
|
||||
const remotePresets = PRESETS[remote] || [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">Test Remote</h1>
|
||||
<p className="probe-description">
|
||||
Probe a remote to test connectivity and caching. The file is fetched and cached but not sent to your browser.
|
||||
</p>
|
||||
|
||||
<div className="probe-form">
|
||||
<div className="probe-row">
|
||||
<label>Remote</label>
|
||||
<select
|
||||
className="type-select probe-select"
|
||||
value={remote}
|
||||
onChange={e => setRemote(e.target.value)}
|
||||
>
|
||||
{remotes.map(r => (
|
||||
<option key={r.name} value={r.name}>
|
||||
{r.name} ({r.package_type})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="probe-row">
|
||||
<label>Path</label>
|
||||
<input
|
||||
className="search-input probe-input"
|
||||
placeholder="e.g. gitea/1.23.7/gitea-1.23.7-linux-amd64"
|
||||
value={path}
|
||||
onChange={e => setPath(e.target.value)}
|
||||
onKeyDown={e => e.key === 'Enter' && runProbe()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button className="btn btn-primary" onClick={runProbe} disabled={loading || !path}>
|
||||
{loading ? 'Probing...' : 'Probe'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{remotePresets.length > 0 && (
|
||||
<div className="presets">
|
||||
<span className="presets-label">Quick tests:</span>
|
||||
{remotePresets.map((p, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className="preset-btn"
|
||||
onClick={() => applyPreset(p.remote, p.path)}
|
||||
>
|
||||
{p.path.split('/').pop()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<div className={`probe-result ${result.status === 200 ? 'probe-ok' : 'probe-err'}`}>
|
||||
<div className="probe-result-header">
|
||||
<Badge variant={result.status === 200 ? 'green' : 'red'}>
|
||||
{result.status}
|
||||
</Badge>
|
||||
<Badge variant={result.source === 'cache' ? 'blue' : 'yellow'}>
|
||||
{result.source || 'error'}
|
||||
</Badge>
|
||||
<span className="probe-duration">{result.duration_ms}ms</span>
|
||||
</div>
|
||||
|
||||
{result.error ? (
|
||||
<div className="probe-error">{result.error}</div>
|
||||
) : (
|
||||
<dl className="probe-dl">
|
||||
<dt>Content-Type</dt>
|
||||
<dd className="mono">{result.content_type}</dd>
|
||||
<dt>Size</dt>
|
||||
<dd className="mono">{formatBytes(result.size_bytes)} ({result.size_bytes.toLocaleString()} bytes)</dd>
|
||||
<dt>Source</dt>
|
||||
<dd>{result.source === 'cache' ? 'Served from cache (S3)' : 'Fetched from upstream'}</dd>
|
||||
<dt>Duration</dt>
|
||||
<dd className="mono">{result.duration_ms}ms</dd>
|
||||
{result.headers && Object.entries(result.headers).map(([k, v]) => (
|
||||
<div key={k} className="probe-header-row">
|
||||
<dt className="mono">{k}</dt>
|
||||
<dd className="mono">{v}</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{history.length > 0 && (
|
||||
<div className="probe-history">
|
||||
<h3 className="section-label">History</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Remote</th>
|
||||
<th>Path</th>
|
||||
<th>Status</th>
|
||||
<th>Source</th>
|
||||
<th>Size</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{history.map((h, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className="clickable"
|
||||
onClick={() => applyPreset(h.remote, h.path)}
|
||||
>
|
||||
<td className="mono">{h.remote}</td>
|
||||
<td className="mono probe-path-cell">{h.path}</td>
|
||||
<td>
|
||||
<Badge variant={h.status === 200 ? 'green' : 'red'}>{h.status}</Badge>
|
||||
</td>
|
||||
<td>
|
||||
<Badge variant={h.source === 'cache' ? 'blue' : 'yellow'}>
|
||||
{h.source || 'err'}
|
||||
</Badge>
|
||||
</td>
|
||||
<td className="mono">{formatBytes(h.size_bytes)}</td>
|
||||
<td className="mono">{h.duration_ms}ms</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
.detail-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
font-size: 0.85em;
|
||||
color: var(--text-muted);
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detail-badges {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95em;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 0.85em;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.detail-dl {
|
||||
display: grid;
|
||||
grid-template-columns: 140px 1fr;
|
||||
gap: 6px 12px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.detail-dl dt {
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-dl dd {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.pattern-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.pattern-list li {
|
||||
font-size: 0.85em;
|
||||
color: var(--text);
|
||||
background: var(--bg-elevated);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.detail-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--accent-hover);
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--red);
|
||||
border: 1px solid var(--red);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: rgba(239, 68, 68, 0.25);
|
||||
}
|
||||
@@ -0,0 +1,129 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { api } from '../api/client';
|
||||
import type { Remote } from '../api/types';
|
||||
import { Badge } from '../components/Badge';
|
||||
import './RemoteDetail.css';
|
||||
|
||||
export function RemoteDetail() {
|
||||
const { name } = useParams<{ name: string }>();
|
||||
const [remote, setRemote] = useState<Remote | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!name) return;
|
||||
api.getRemote(name)
|
||||
.then(setRemote)
|
||||
.catch(e => setError(e.message));
|
||||
}, [name]);
|
||||
|
||||
if (error) return <div className="error-banner">{error}</div>;
|
||||
if (!remote) return <div className="loading">Loading...</div>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="detail-header">
|
||||
<Link to="/remotes" className="back-link">← Remotes</Link>
|
||||
<h1 className="page-title">{remote.name}</h1>
|
||||
<div className="detail-badges">
|
||||
<Badge variant="blue">{remote.package_type}</Badge>
|
||||
{remote.managed_by && <Badge variant="green">managed by {remote.managed_by}</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{remote.description && (
|
||||
<p className="detail-description">{remote.description}</p>
|
||||
)}
|
||||
|
||||
<div className="detail-grid">
|
||||
<div className="detail-section">
|
||||
<h3 className="section-label">Configuration</h3>
|
||||
<dl className="detail-dl">
|
||||
<dt>Base URL</dt>
|
||||
<dd className="mono">{remote.base_url}</dd>
|
||||
<dt>Immutable TTL</dt>
|
||||
<dd className="mono">{remote.immutable_ttl === 0 ? 'forever' : `${remote.immutable_ttl}s`}</dd>
|
||||
<dt>Mutable TTL</dt>
|
||||
<dd className="mono">{remote.mutable_ttl}s</dd>
|
||||
<dt>Conditional Revalidation</dt>
|
||||
<dd>{remote.check_mutable ? 'enabled' : 'disabled'}</dd>
|
||||
<dt>Stale on Error</dt>
|
||||
<dd>{remote.stale_on_error ? 'enabled' : 'disabled'}</dd>
|
||||
{remote.releases_remote && (
|
||||
<>
|
||||
<dt>Releases Remote</dt>
|
||||
<dd>
|
||||
<Link to={`/remotes/${remote.releases_remote}`} className="mono">
|
||||
{remote.releases_remote}
|
||||
</Link>
|
||||
</dd>
|
||||
</>
|
||||
)}
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="detail-section">
|
||||
<h3 className="section-label">Access Control</h3>
|
||||
<dl className="detail-dl">
|
||||
<dt>Patterns</dt>
|
||||
<dd>
|
||||
{remote.patterns?.length
|
||||
? <PatternList patterns={remote.patterns} />
|
||||
: <span className="text-muted">none (proxy all)</span>}
|
||||
</dd>
|
||||
<dt>Blocklist</dt>
|
||||
<dd>
|
||||
{remote.blocklist?.length
|
||||
? <PatternList patterns={remote.blocklist} />
|
||||
: <span className="text-muted">none</span>}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div className="detail-section">
|
||||
<h3 className="section-label">Classification Overrides</h3>
|
||||
<dl className="detail-dl">
|
||||
<dt>Mutable</dt>
|
||||
<dd>
|
||||
{remote.mutable_patterns?.length
|
||||
? <PatternList patterns={remote.mutable_patterns} />
|
||||
: <span className="text-muted">provider defaults only</span>}
|
||||
</dd>
|
||||
<dt>Immutable</dt>
|
||||
<dd>
|
||||
{remote.immutable_patterns?.length
|
||||
? <PatternList patterns={remote.immutable_patterns} />
|
||||
: <span className="text-muted">provider defaults only</span>}
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
{remote.ban_tags_enabled && (
|
||||
<div className="detail-section">
|
||||
<h3 className="section-label">Tag Banning</h3>
|
||||
<dl className="detail-dl">
|
||||
<dt>Banned Tags</dt>
|
||||
<dd><PatternList patterns={remote.ban_tags || []} /></dd>
|
||||
</dl>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="detail-actions">
|
||||
<Link to={`/remotes/${remote.name}/objects`} className="btn btn-primary">
|
||||
Browse Objects
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PatternList({ patterns }: { patterns: string[] }) {
|
||||
return (
|
||||
<ul className="pattern-list">
|
||||
{patterns.map((p, i) => (
|
||||
<li key={i} className="mono">{p}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
.remotes-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 8px 12px;
|
||||
color: var(--text);
|
||||
font-size: 0.9em;
|
||||
outline: none;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.type-select {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 8px 12px;
|
||||
color: var(--text);
|
||||
font-size: 0.9em;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.type-select:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.result-count {
|
||||
font-size: 0.85em;
|
||||
color: var(--text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { api } from '../api/client';
|
||||
import type { Remote } from '../api/types';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { DataTable } from '../components/DataTable';
|
||||
import './Remotes.css';
|
||||
|
||||
const typeColors: Record<string, 'blue' | 'green' | 'yellow' | 'red' | 'default'> = {
|
||||
docker: 'blue',
|
||||
helm: 'green',
|
||||
rpm: 'yellow',
|
||||
pypi: 'blue',
|
||||
npm: 'red',
|
||||
generic: 'default',
|
||||
alpine: 'green',
|
||||
puppet: 'yellow',
|
||||
terraform: 'blue',
|
||||
goproxy: 'green',
|
||||
};
|
||||
|
||||
export function Remotes() {
|
||||
const navigate = useNavigate();
|
||||
const [remotes, setRemotes] = useState<Remote[]>([]);
|
||||
const [filter, setFilter] = useState('');
|
||||
const [typeFilter, setTypeFilter] = useState('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
api.listRemotes()
|
||||
.then(r => setRemotes(r || []))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const types = [...new Set(remotes.map(r => r.package_type))].sort();
|
||||
|
||||
const filtered = remotes.filter(r => {
|
||||
if (typeFilter && r.package_type !== typeFilter) return false;
|
||||
if (filter && !r.name.toLowerCase().includes(filter.toLowerCase())) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">Remotes</h1>
|
||||
|
||||
<div className="remotes-toolbar">
|
||||
<input
|
||||
className="search-input"
|
||||
placeholder="Filter by name..."
|
||||
value={filter}
|
||||
onChange={e => setFilter(e.target.value)}
|
||||
/>
|
||||
<select
|
||||
className="type-select"
|
||||
value={typeFilter}
|
||||
onChange={e => setTypeFilter(e.target.value)}
|
||||
>
|
||||
<option value="">All types</option>
|
||||
{types.map(t => (
|
||||
<option key={t} value={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="result-count">{filtered.length} remotes</span>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="loading">Loading...</div>
|
||||
) : (
|
||||
<DataTable
|
||||
columns={[
|
||||
{
|
||||
key: 'name',
|
||||
header: 'Name',
|
||||
render: (r: Remote) => <span className="mono">{r.name}</span>,
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
header: 'Type',
|
||||
render: (r: Remote) => (
|
||||
<Badge variant={typeColors[r.package_type] || 'default'}>
|
||||
{r.package_type}
|
||||
</Badge>
|
||||
),
|
||||
width: '110px',
|
||||
},
|
||||
{
|
||||
key: 'description',
|
||||
header: 'Description',
|
||||
render: (r: Remote) => r.description || <span className="text-muted">—</span>,
|
||||
},
|
||||
{
|
||||
key: 'ttl',
|
||||
header: 'Mutable TTL',
|
||||
render: (r: Remote) => <span className="mono">{r.mutable_ttl}s</span>,
|
||||
width: '110px',
|
||||
},
|
||||
{
|
||||
key: 'managed',
|
||||
header: 'Managed',
|
||||
render: (r: Remote) =>
|
||||
r.managed_by ? <Badge variant="blue">{r.managed_by}</Badge> : <span className="text-muted">—</span>,
|
||||
width: '100px',
|
||||
},
|
||||
]}
|
||||
data={filtered}
|
||||
emptyMessage="No remotes match"
|
||||
onRowClick={(r) => navigate(`/remotes/${r.name}`)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
.member-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.virtual-detail-panel {
|
||||
margin-top: 20px;
|
||||
padding: 18px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.member-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.member-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.member-priority {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75em;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { api } from '../api/client';
|
||||
import type { Virtual } from '../api/types';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { DataTable } from '../components/DataTable';
|
||||
import './Virtuals.css';
|
||||
|
||||
export function Virtuals() {
|
||||
const [virtuals, setVirtuals] = useState<Virtual[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [expanded, setExpanded] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.listVirtuals()
|
||||
.then(v => setVirtuals(v || []))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="page-title">Virtual Repositories</h1>
|
||||
|
||||
{loading ? (
|
||||
<div className="loading">Loading...</div>
|
||||
) : (
|
||||
<DataTable
|
||||
columns={[
|
||||
{
|
||||
key: 'name',
|
||||
header: 'Name',
|
||||
render: (v: Virtual) => <span className="mono">{v.name}</span>,
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
header: 'Type',
|
||||
render: (v: Virtual) => <Badge variant="green">{v.package_type}</Badge>,
|
||||
width: '110px',
|
||||
},
|
||||
{
|
||||
key: 'members',
|
||||
header: 'Members',
|
||||
render: (v: Virtual) => (
|
||||
<span className="member-count">{v.members?.length || 0} remotes</span>
|
||||
),
|
||||
width: '110px',
|
||||
},
|
||||
{
|
||||
key: 'description',
|
||||
header: 'Description',
|
||||
render: (v: Virtual) => v.description || <span className="text-muted">—</span>,
|
||||
},
|
||||
{
|
||||
key: 'managed',
|
||||
header: 'Managed',
|
||||
render: (v: Virtual) =>
|
||||
v.managed_by ? <Badge variant="blue">{v.managed_by}</Badge> : <span className="text-muted">—</span>,
|
||||
width: '100px',
|
||||
},
|
||||
]}
|
||||
data={virtuals}
|
||||
emptyMessage="No virtual repositories configured"
|
||||
onRowClick={(v) => setExpanded(expanded === v.name ? null : v.name)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{expanded && (
|
||||
<div className="virtual-detail-panel">
|
||||
<h3 className="section-label">Members of {expanded}</h3>
|
||||
<ul className="member-list">
|
||||
{virtuals
|
||||
.find(v => v.name === expanded)
|
||||
?.members?.map((m, i) => (
|
||||
<li key={m}>
|
||||
<span className="member-priority">{i + 1}</span>
|
||||
<a href={`/remotes/${m}`} className="mono">{m}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user