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,2 @@
|
||||
node_modules/
|
||||
dist/
|
||||
@@ -0,0 +1,18 @@
|
||||
FROM node:22-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm ci
|
||||
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
|
||||
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ArtifactAPI</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location /api/ {
|
||||
proxy_pass http://artifactapi:8000;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_buffering off;
|
||||
}
|
||||
|
||||
location /v2/ {
|
||||
proxy_pass http://artifactapi:8000;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_buffering off;
|
||||
}
|
||||
|
||||
location /health {
|
||||
proxy_pass http://artifactapi:8000;
|
||||
}
|
||||
|
||||
location /metrics {
|
||||
proxy_pass http://artifactapi:8000;
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
Generated
+2758
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "artifactapi-ui",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.1.0",
|
||||
"@types/react-dom": "^19.1.0",
|
||||
"@vitejs/plugin-react": "^4.5.0",
|
||||
"typescript": "~5.8.0",
|
||||
"vite": "^6.3.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
.app {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 220px;
|
||||
background: var(--bg-surface);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 20px 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
font-size: 1.5em;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-weight: 700;
|
||||
font-size: 1.05em;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 0 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-nav a {
|
||||
display: block;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--radius);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.sidebar-nav a:hover {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar-nav a.active {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px 0;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 0.75em;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 32px 40px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.5em;
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import { Routes, Route, NavLink } from 'react-router-dom';
|
||||
import { Dashboard } from './pages/Dashboard';
|
||||
import { Remotes } from './pages/Remotes';
|
||||
import { RemoteDetail } from './pages/RemoteDetail';
|
||||
import { Virtuals } from './pages/Virtuals';
|
||||
import { Objects } from './pages/Objects';
|
||||
import { Probe } from './pages/Probe';
|
||||
import './App.css';
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<nav className="sidebar">
|
||||
<div className="sidebar-brand">
|
||||
<span className="brand-icon">⬢</span>
|
||||
<span className="brand-text">ArtifactAPI</span>
|
||||
</div>
|
||||
<div className="sidebar-nav">
|
||||
<NavLink to="/" end>Dashboard</NavLink>
|
||||
<NavLink to="/remotes">Remotes</NavLink>
|
||||
<NavLink to="/virtuals">Virtuals</NavLink>
|
||||
<NavLink to="/probe">Test Remote</NavLink>
|
||||
</div>
|
||||
<div className="sidebar-footer">
|
||||
<span className="version">v3.0-dev</span>
|
||||
</div>
|
||||
</nav>
|
||||
<main className="content">
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/remotes" element={<Remotes />} />
|
||||
<Route path="/remotes/:name" element={<RemoteDetail />} />
|
||||
<Route path="/remotes/:name/objects" element={<Objects />} />
|
||||
<Route path="/virtuals" element={<Virtuals />} />
|
||||
<Route path="/probe" element={<Probe />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { Remote, Virtual, Artifact, OverviewStats, RemoteStatRow, HealthStatus, ProbeResult } from './types';
|
||||
|
||||
const BASE = '';
|
||||
|
||||
async function fetchJSON<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const resp = await fetch(`${BASE}${path}`, {
|
||||
...init,
|
||||
headers: { 'Content-Type': 'application/json', ...init?.headers },
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const text = await resp.text();
|
||||
throw new Error(`${resp.status}: ${text}`);
|
||||
}
|
||||
if (resp.status === 204) return undefined as T;
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
export const api = {
|
||||
health: () => fetchJSON<HealthStatus>('/api/v2/health'),
|
||||
stats: () => fetchJSON<OverviewStats>('/api/v2/stats'),
|
||||
topRemotes: () => fetchJSON<RemoteStatRow[]>('/api/v2/stats/top-remotes'),
|
||||
|
||||
listRemotes: () => fetchJSON<Remote[]>('/api/v2/remotes'),
|
||||
getRemote: (name: string) => fetchJSON<Remote>(`/api/v2/remotes/${name}`),
|
||||
|
||||
listVirtuals: () => fetchJSON<Virtual[]>('/api/v2/virtuals'),
|
||||
getVirtual: (name: string) => fetchJSON<Virtual>(`/api/v2/virtuals/${name}`),
|
||||
|
||||
listObjects: (remote: string, page = 1, perPage = 50) =>
|
||||
fetchJSON<Artifact[]>(`/api/v2/remotes/${remote}/objects?page=${page}&per_page=${perPage}`),
|
||||
|
||||
evictObject: (remote: string, path: string) =>
|
||||
fetchJSON<void>(`/api/v2/remotes/${remote}/objects/${path}`, { method: 'DELETE' }),
|
||||
|
||||
flushRemoteCache: (remote: string) =>
|
||||
fetchJSON<void>(`/api/v2/remotes/${remote}/cache`, { method: 'DELETE' }),
|
||||
|
||||
probe: (remote: string, path: string) =>
|
||||
fetchJSON<ProbeResult>('/api/v2/probe', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ remote, path }),
|
||||
}),
|
||||
};
|
||||
@@ -0,0 +1,80 @@
|
||||
export interface Remote {
|
||||
name: string;
|
||||
package_type: string;
|
||||
base_url: string;
|
||||
description: string;
|
||||
username?: string;
|
||||
immutable_ttl: number;
|
||||
mutable_ttl: number;
|
||||
check_mutable: boolean;
|
||||
patterns: string[];
|
||||
blocklist: string[];
|
||||
mutable_patterns: string[];
|
||||
immutable_patterns: string[];
|
||||
ban_tags_enabled: boolean;
|
||||
ban_tags: string[];
|
||||
quarantine_enabled: boolean;
|
||||
quarantine_days: number;
|
||||
stale_on_error: boolean;
|
||||
releases_remote: string;
|
||||
managed_by: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface Virtual {
|
||||
name: string;
|
||||
package_type: string;
|
||||
description: string;
|
||||
members: string[];
|
||||
managed_by: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface Artifact {
|
||||
id: number;
|
||||
remote_name: string;
|
||||
path: string;
|
||||
content_hash: string;
|
||||
upstream_etag: string;
|
||||
first_seen_at: string;
|
||||
last_fetched_at: string;
|
||||
last_accessed_at: string;
|
||||
fetch_count: number;
|
||||
access_count: number;
|
||||
size_bytes: number;
|
||||
content_type: string;
|
||||
}
|
||||
|
||||
export interface OverviewStats {
|
||||
total_remotes: number;
|
||||
total_objects: number;
|
||||
total_bytes: number;
|
||||
total_blobs_deduped: number;
|
||||
bandwidth_saved_30d: number;
|
||||
}
|
||||
|
||||
export interface RemoteStatRow {
|
||||
name: string;
|
||||
object_count: number;
|
||||
total_bytes: number;
|
||||
requests_30d: number;
|
||||
}
|
||||
|
||||
export interface HealthStatus {
|
||||
status: string;
|
||||
postgres: string;
|
||||
redis: string;
|
||||
s3: string;
|
||||
}
|
||||
|
||||
export interface ProbeResult {
|
||||
status: number;
|
||||
source: string;
|
||||
content_type: string;
|
||||
size_bytes: number;
|
||||
headers: Record<string, string>;
|
||||
duration_ms: number;
|
||||
error: string;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75em;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.badge-default {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.badge-green {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.badge-yellow {
|
||||
background: rgba(234, 179, 8, 0.15);
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.badge-red {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.badge-blue {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: var(--accent);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import './Badge.css';
|
||||
|
||||
interface BadgeProps {
|
||||
children: React.ReactNode;
|
||||
variant?: 'default' | 'green' | 'yellow' | 'red' | 'blue';
|
||||
}
|
||||
|
||||
export function Badge({ children, variant = 'default' }: BadgeProps) {
|
||||
return <span className={`badge badge-${variant}`}>{children}</span>;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
.data-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-elevated);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.data-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.data-table tbody tr:hover {
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.data-table tbody tr.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-table-empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 32px 14px !important;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import './DataTable.css';
|
||||
|
||||
interface Column<T> {
|
||||
key: string;
|
||||
header: string;
|
||||
render: (item: T) => React.ReactNode;
|
||||
width?: string;
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
columns: Column<T>[];
|
||||
data: T[];
|
||||
emptyMessage?: string;
|
||||
onRowClick?: (item: T) => void;
|
||||
}
|
||||
|
||||
export function DataTable<T>({ columns, data, emptyMessage = 'No data', onRowClick }: DataTableProps<T>) {
|
||||
return (
|
||||
<div className="data-table-wrap">
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{columns.map(col => (
|
||||
<th key={col.key} style={col.width ? { width: col.width } : undefined}>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length} className="data-table-empty">
|
||||
{emptyMessage}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
data.map((item, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
onClick={onRowClick ? () => onRowClick(item) : undefined}
|
||||
className={onRowClick ? 'clickable' : ''}
|
||||
>
|
||||
{columns.map(col => (
|
||||
<td key={col.key}>{col.render(item)}</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.stats-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 20px;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.stats-label {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.stats-value {
|
||||
font-size: 1.8em;
|
||||
font-weight: 700;
|
||||
color: var(--text-bright);
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stats-sub {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import './StatsCard.css';
|
||||
|
||||
interface StatsCardProps {
|
||||
label: string;
|
||||
value: string | number;
|
||||
sub?: string;
|
||||
}
|
||||
|
||||
export function StatsCard({ label, value, sub }: StatsCardProps) {
|
||||
return (
|
||||
<div className="stats-card">
|
||||
<div className="stats-label">{label}</div>
|
||||
<div className="stats-value">{value}</div>
|
||||
{sub && <div className="stats-sub">{sub}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
export function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B';
|
||||
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
||||
const val = bytes / Math.pow(1024, i);
|
||||
return `${val.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
|
||||
}
|
||||
|
||||
export function formatNumber(n: number): string {
|
||||
return n.toLocaleString();
|
||||
}
|
||||
|
||||
export function timeAgo(dateStr: string): string {
|
||||
const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000);
|
||||
if (seconds < 60) return `${seconds}s ago`;
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days}d ago`;
|
||||
}
|
||||
|
||||
export function truncateHash(hash: string, len = 12): string {
|
||||
if (hash.startsWith('sha256:')) {
|
||||
return hash.slice(0, 7 + len);
|
||||
}
|
||||
return hash.slice(0, len);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg: #0b0e14;
|
||||
--bg-surface: #111620;
|
||||
--bg-elevated: #1a2030;
|
||||
--border: #252d3d;
|
||||
--text: #c5cdd9;
|
||||
--text-muted: #6b7a90;
|
||||
--text-bright: #e8ecf2;
|
||||
--accent: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--green: #22c55e;
|
||||
--yellow: #eab308;
|
||||
--red: #ef4444;
|
||||
--orange: #f97316;
|
||||
--radius: 8px;
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--accent-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
code, .mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { StrictMode } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { App } from './App';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': 'http://localhost:8000',
|
||||
'/v2': 'http://localhost:8000',
|
||||
'/health': 'http://localhost:8000',
|
||||
'/metrics': 'http://localhost:8000',
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user