From da268f1671a7ab212df976096393e4b5bee57f7a Mon Sep 17 00:00:00 2001
From: asepharyana <superaseph@gmail.com>
Date: Wed, 22 Jul 2026 18:10:38 +0700
Subject: [PATCH] feat: enhance observability with dynamic links, Docker API
 integration, and health checks

---
 infra/compose/observability.yml      |   7 ++
 infra/compose/traefik.yml            |   8 +-
 infra/dashboard/index.html           | 128 +++++++++++++++++++------
 infra/dashboard/nginx.conf           | 134 ++++++++++++++++-----------
 infra/docker/dashboard.Dockerfile    |   3 +-
 infra/nats/nats.conf                 |  12 ---
 infra/otel/otel-collector-config.yml |   5 +
 7 files changed, 194 insertions(+), 103 deletions(-)

diff --git a/infra/compose/observability.yml b/infra/compose/observability.yml
index 825dd9d..d8dbb9a 100644
--- a/infra/compose/observability.yml
+++ b/infra/compose/observability.yml
@@ -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:
diff --git a/infra/compose/traefik.yml b/infra/compose/traefik.yml
index 1ceeed6..bb1aff3 100644
--- a/infra/compose/traefik.yml
+++ b/infra/compose/traefik.yml
@@ -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']
diff --git a/infra/dashboard/index.html b/infra/dashboard/index.html
index 0a2a0dd..7dd3758 100644
--- a/infra/dashboard/index.html
+++ b/infra/dashboard/index.html
@@ -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) {
diff --git a/infra/dashboard/nginx.conf b/infra/dashboard/nginx.conf
index 35e01f0..0d4393a 100644
--- a/infra/dashboard/nginx.conf
+++ b/infra/dashboard/nginx.conf
@@ -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;
+    }
 }
diff --git a/infra/docker/dashboard.Dockerfile b/infra/docker/dashboard.Dockerfile
index 5fa2289..e38cc5b 100644
--- a/infra/docker/dashboard.Dockerfile
+++ b/infra/docker/dashboard.Dockerfile
@@ -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;"]
diff --git a/infra/nats/nats.conf b/infra/nats/nats.conf
index 2d74c93..6e6e6ec 100644
--- a/infra/nats/nats.conf
+++ b/infra/nats/nats.conf
@@ -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
diff --git a/infra/otel/otel-collector-config.yml b/infra/otel/otel-collector-config.yml
index d7e3c64..0287a3d 100644
--- a/infra/otel/otel-collector-config.yml
+++ b/infra/otel/otel-collector-config.yml
@@ -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]