MythEclipse/asepharyana-hub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance observability with dynamic links, Docker API integration, and health checks

Browse Source
This commit is contained in:
asepharyana
2026-07-22 18:12:44 +07:00
parent 4ef4f615c1
commit da268f1671
7 changed files with 194 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
infra/compose/observability.yml
+7
View File
@@ -49,6 +49,13 @@ services:
- dashboard
ports:
- '8080:8080'
volumes:
- /var/run/docker.sock:/var/run/docker.sock:ro
depends_on:
jaeger:
condition: service_started
otel-collector:
condition: service_started
networks:
app-shared-net:
infra/compose/traefik.yml
+4 -4
View File
@@ -50,10 +50,10 @@ services:
- '--experimental.plugins.blockpath.moduleName=github.com/traefik/plugin-blockpath'
- '--experimental.plugins.blockpath.version=v0.2.1'
- '--ping=true'
- '--tracing.openTelemetry=true'
- '--tracing.openTelemetry.address=otel-collector:4318'
- '--tracing.openTelemetry.insecure=true'
- '--tracing.openTelemetry.grpc=false'
- '--tracing.otel=true'
- '--tracing.otel.address=otel-collector:4318'
- '--tracing.otel.insecure=true'
- '--tracing.otel.grpc=false'
- '--tracing.serviceName=traefik'
healthcheck:
test: ['CMD', 'wget', '--spider', 'http://localhost:8080/ping']
infra/dashboard/index.html
+98 -30
View File
@@ -166,14 +166,11 @@
<!-- Links -->
<div class="card">
<h2>Quick Links</h2>
<div class="links">
<a href="/jaeger" target="_blank">Jaeger UI</a>
<a href="/api/metrics" target="_blank">OTel Metrics</a>
<a href="https://traefik.asepharyana.my.id" target="_blank">Traefik</a>
<a href="https://scraper.asepharyana.my.id" target="_blank">Scraper API</a>
<a href="https://github.com/asepharyana/asepharyana-hub" target="_blank">GitHub</a>
<div class="links" id="quick-links">
<div class="loading">Loading...</div>
</div>
</div>
</div>
<!-- Recent Traces -->
<div class="card" style="grid-column: 1 / -1;">
@@ -184,6 +181,7 @@
<script>
const JAEGER_API = '/api/jaeger';
const DOCKER_API = '/api/docker';
const TRACE_LIMIT = 20;
async function fetchJSON(url) {
@@ -283,39 +281,64 @@ async function loadServices() {
const countEl = document.getElementById('service-count');
const statSvc = document.getElementById('stat-services');
const services = [
{ name: 'traefik', port: 'traefik' },
{ name: 'redis', port: 'redis' },
{ name: 'nats', port: 'nats' },
{ name: 'dapr-placement', port: 'dapr-placement' },
{ name: 'scraper-api', port: 'scraper-api' },
{ name: 'scraper-api-dapr', port: 'scraper-api-dapr' },
{ name: 'otel-collector', port: 'otel-collector' },
{ name: 'jaeger', port: 'jaeger' },
];
let dockerContainers = [];
try {
// Fetch all running containers via Docker API
const containers = await fetchJSON(`${DOCKER_API}/containers/json?all=true`);
// Filter for containers in app-shared-net network
dockerContainers = containers.filter(c => {
const nets = c.NetworkSettings && c.NetworkSettings.Networks;
return nets && nets['app-shared-net'];
});
} catch(e) { /* Docker socket not available */ }
// Try to get services from Jaeger for display
// Also discover services from Jaeger (OTel-instrumented services)
let jaegerServices = [];
try {
const svcRes = await fetchJSON(`${JAEGER_API}/api/services`);
jaegerServices = svcRes.data || [];
} catch(e) { /* ignore */ }
// Determine services to display: prefer Jaeger-reported + infrastructure
const allNames = new Set([...services.map(s => s.name), ...jaegerServices]);
const displayNames = Array.from(allNames).sort();
countEl.textContent = displayNames.length;
statSvc.textContent = displayNames.length;
// Merge: Docker names + Jaeger services, with status from Docker
const dockerMap = new Map();
for (const c of dockerContainers) {
// Docker returns Names as ["/name"] — strip leading /
const name = (c.Names && c.Names[0]) ? c.Names[0].replace(/^\//, '') : c.Id.slice(0, 12);
const state = c.State || 'unknown';
const status = c.Status || '';
const image = c.Image || '';
dockerMap.set(name, { name, state, status, image });
}
listEl.innerHTML = displayNames.map(name => {
// Determine status: Jaeger services are "up", check others via probe
// Simple heuristic: green if in Docker services list, yellow for Jaeger-only
const infraService = services.find(s => s.name === name);
const status = infraService ? 'up' : 'degraded';
const badgeClass = status === 'up' ? 'badge-up' : 'badge-degraded';
const label = status === 'up' ? 'up' : 'unknown';
// Merge Jaeger-only services (those not in Docker network)
for (const svc of jaegerServices) {
if (!dockerMap.has(svc)) {
dockerMap.set(svc, { name: svc, state: 'jaeger', status: 'seen via OTel', image: '' });
}
}
// Sort: running first, then by name
const entries = Array.from(dockerMap.values()).sort((a, b) => {
const order = { running: 0, jaeger: 1, paused: 2, exited: 3, restarting: 3, unknown: 4 };
return (order[a.state] || 4) - (order[b.state] || 4) || a.name.localeCompare(b.name);
});
countEl.textContent = entries.length;
statSvc.textContent = entries.length;
listEl.innerHTML = entries.map(svc => {
let badgeClass, label;
if (svc.state === 'running') {
badgeClass = 'badge-up'; label = 'up';
} else if (svc.state === 'jaeger') {
badgeClass = 'badge-degraded'; label = 'otel';
} else if (svc.state === 'paused') {
badgeClass = 'badge-degraded'; label = 'paused';
} else {
badgeClass = 'badge-down'; label = 'down';
}
return `<div class="service-item">
<span class="name">${escHtml(name)}</span>
<span class="name">${escHtml(svc.name)}</span>
<span class="badge ${badgeClass}">${label}</span>
</div>`;
}).join('');
@@ -354,6 +377,50 @@ async function loadStats() {
} catch(e) { /* ignore - stats may not load */ }
}
async function loadLinks() {
const el = document.getElementById('quick-links');
try {
const containers = await fetchJSON(`${DOCKER_API}/containers/json?all=true`);
const svcNames = containers
.filter(c => {
const nets = c.NetworkSettings && c.NetworkSettings.Networks;
return nets && nets['app-shared-net'];
})
.map(c => (c.Names && c.Names[0]) ? c.Names[0].replace(/^\//, '') : '')
.filter(Boolean);
const links = [
{ href: '/jaeger', label: 'Jaeger UI', icon: '🔍' },
{ href: '/api/metrics', label: 'OTel Metrics', icon: '📊' },
{ href: 'https://github.com/asepharyana/asepharyana-hub', label: 'GitHub', icon: '📦' },
];
// Dynamic links: add if container name matches a known Traefik route pattern
const domains = ['asepharyana.my.id', 'asepharyana.web.id'];
for (const name of svcNames) {
if (name === 'dashboard') {
links.push({ href: `https://dashboard.${domains[0]}`, label: 'Dashboard', icon: '📈' });
} else if (name === 'jaeger') {
// already added above
} else if (name === 'traefik') {
links.push({ href: `https://traefik.${domains[0]}`, label: 'Traefik', icon: '🔒' });
} else if (name.endsWith('-dapr')) {
// skip dapr sidecars — they don't have their own routes
} else if (name !== 'redis' && name !== 'nats' && name !== 'dapr-placement' && name !== 'otel-collector') {
links.push({ href: `https://${name}.${domains[0]}`, label: name, icon: '🔗' });
}
}
el.innerHTML = links.map(l => `<a href="${l.href}" target="_blank">${l.icon} ${escHtml(l.label)}</a>`).join('');
} catch(e) {
// Fallback: show minimal static links if Docker socket unavailable
el.innerHTML = `
<a href="/jaeger" target="_blank">Jaeger UI</a>
<a href="/api/metrics" target="_blank">OTel Metrics</a>
<a href="https://github.com/asepharyana/asepharyana-hub" target="_blank">GitHub</a>`;
}
}
function setHealth(status, label) {
const el = document.getElementById('health-indicator');
el.innerHTML = `<span class="dot" style="background:var(--${status})"></span> ${label}`;
@@ -365,6 +432,7 @@ async function refresh() {
loadTraces(),
loadServices(),
loadStats(),
loadLinks(),
]);
setHealth('green', 'All Systems Operational');
} catch(e) {
infra/dashboard/nginx.conf
+78 -56
View File
@@ -1,70 +1,92 @@
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Dashboard nginx — runs as root to access Docker socket
user root;
worker_processes auto;
pid /var/run/nginx.pid;
pcre_jit on;
# CORS headers for API endpoints
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "GET, OPTIONS";
add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range";
events {
worker_connections 1024;
}
# Security headers
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header Referrer-Policy same-origin;
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
access_log /var/log/nginx/access.log;
sendfile on;
tcp_nopush on;
keepalive_timeout 65;
# Gzip
gzip on;
gzip_types text/html text/css application/javascript application/json;
# Jaeger API proxy
location /api/jaeger/ {
proxy_pass http://jaeger:16686/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_http_version 1.1;
proxy_read_timeout 30s;
}
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
# Jaeger UI
location /jaeger/ {
proxy_pass http://jaeger:16686/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 86400s;
}
# Security headers
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header Referrer-Policy same-origin;
# OTel collector prometheus metrics
location /api/metrics {
proxy_pass http://otel-collector:8889/metrics;
proxy_set_header Host $host;
proxy_read_timeout 10s;
}
# Jaeger API proxy
location /api/jaeger/ {
proxy_pass http://jaeger:16686/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_http_version 1.1;
proxy_read_timeout 30s;
}
# OTel collector health
location /api/health {
proxy_pass http://otel-collector:8888/healthz;
proxy_set_header Host $host;
proxy_read_timeout 5s;
}
# Jaeger UI
location /jaeger/ {
proxy_pass http://jaeger:16686/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 86400s;
}
# Static files (including index.html)
location / {
try_files $uri $uri/ /index.html;
expires 5s;
add_header Cache-Control "public, must-revalidate";
}
# OTel collector prometheus metrics
location /api/metrics {
proxy_pass http://otel-collector:8889/metrics;
proxy_set_header Host $host;
proxy_read_timeout 10s;
}
# Deny hidden files
location ~ /\. {
deny all;
access_log off;
log_not_found off;
}
# OTel collector health
location /api/health {
proxy_pass http://otel-collector:13133/;
proxy_set_header Host $host;
proxy_read_timeout 5s;
}
error_page 404 /index.html;
# Docker API proxy (read-only Unix socket)
location /api/docker/ {
proxy_pass http://unix:/var/run/docker.sock:/;
proxy_set_header Host $host;
proxy_read_timeout 10s;
}
# Static files
location / {
try_files $uri $uri/ /index.html;
expires 5s;
add_header Cache-Control "public, must-revalidate";
}
# Deny hidden files
location ~ /\. {
deny all;
access_log off;
log_not_found off;
}
error_page 404 /index.html;
}
}
infra/docker/dashboard.Dockerfile
+2 -1
View File
@@ -1,5 +1,6 @@
FROM nginx:alpine
COPY infra/dashboard/nginx.conf /etc/nginx/conf.d/default.conf
# Replace default nginx.conf with our custom config (runs as root for Docker socket access)
COPY infra/dashboard/nginx.conf /etc/nginx/nginx.conf
COPY infra/dashboard/index.html /usr/share/nginx/html/index.html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]
infra/nats/nats.conf
-12
View File
@@ -4,20 +4,8 @@
jetstream: true
store_dir: "/data"
# OpenTelemetry tracing
otel {
traces {
exporter: "otlp"
otlp {
endpoint: "otel-collector:4318"
insecure: true
}
}
}
# HTTP monitoring
http_port: 8222
# Limits
max_payload: 1MB
max_pending_size: 64MB
infra/otel/otel-collector-config.yml
+5
View File
@@ -39,7 +39,12 @@ processors:
value: asepharyana-hub
action: upsert
extensions:
health_check:
endpoint: 0.0.0.0:13133
service:
extensions: [health_check]
pipelines:
traces:
receivers: [otlp]