@thotischner/observability-mcp 1.4.0 → 1.4.1

package/dist/ui/index.html

@@ -122,6 +122,7 @@
     .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
     .badge-ok  { background: var(--success-soft); color: var(--success); border: 1px solid rgba(74,222,128,0.25); }
     .badge-err { background: var(--danger-soft);  color: var(--danger);  border: 1px solid rgba(239,91,110,0.30); }
+    .hidden { display: none !important; }
 
     .nav { display: flex; gap: 2px; margin-left: var(--sp-6); }
     .nav-btn {
@@ -490,6 +491,7 @@
       <button class="nav-btn active" data-page="dashboard" onclick="showPage('dashboard')">Dashboard</button>
       <button class="nav-btn" data-page="sources" onclick="showPage('sources')">Sources</button>
       <button class="nav-btn" data-page="services" onclick="showPage('services')">Services</button>
+      <button class="nav-btn" data-page="connectors" onclick="showPage('connectors')">Connectors</button>
       <button class="nav-btn" data-page="health" onclick="showPage('health')">Health</button>
       <button class="nav-btn" data-page="settings" onclick="showPage('settings')">Settings</button>
     </div>
@@ -549,6 +551,40 @@
       <div class="card"><div class="card-header"><h2>Discovered Services</h2></div><div id="services-list"><div class="empty">Loading...</div></div></div>
     </div>
 
+    <!-- ===== Connectors ===== -->
+    <div class="page" id="page-connectors">
+      <div class="card" style="padding:0;">
+        <div class="tabs">
+          <button class="tab-btn active" onclick="showTab('installed')">Installed</button>
+          <button class="tab-btn" onclick="showTab('hub')">Connector Hub</button>
+          <button class="tab-btn" onclick="showTab('upload')">Upload bundle</button>
+        </div>
+
+        <!-- Installed Tab -->
+        <div class="tab-content active" id="tab-installed" style="padding:20px;">
+          <div class="card-header" style="margin-bottom:12px"><h2>Installed connectors</h2><button class="btn btn-ghost btn-sm" onclick="loadConnectors()">Refresh</button></div>
+          <div id="conn-installed"><div class="empty">Loading...</div></div>
+        </div>
+
+        <!-- Connector Hub Tab -->
+        <div class="tab-content" id="tab-hub" style="padding:20px;">
+          <div class="card-header" style="margin-bottom:12px"><h2>Available from the Connector Hub</h2>
+            <a class="btn btn-ghost btn-sm" href="https://thotischner.github.io/observability-mcp/hub/" target="_blank" rel="noopener">Open Hub ↗</a></div>
+          <div id="conn-hub"><div class="empty">Loading...</div></div>
+        </div>
+
+        <!-- Upload bundle Tab -->
+        <div class="tab-content" id="tab-upload" style="padding:20px;">
+          <div class="card-header" style="margin-bottom:12px"><h2>Upload a connector bundle</h2></div>
+          <p class="empty" style="margin:0 0 12px">Install a signed connector <code>.tgz</code> directly — handy for air-gapped environments. The bundle is always verified against the configured trust root before it is loaded.</p>
+          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
+            <input type="file" id="conn-upload-file" accept=".tgz,.tar.gz,application/octet-stream">
+            <button class="btn btn-primary btn-sm" onclick="uploadConnector(this)">Upload &amp; install</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- ===== Health ===== -->
     <div class="page" id="page-health">
       <div id="health-cards" style="display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px;">
@@ -744,12 +780,88 @@ function showPage(name) {
   document.querySelector(`.nav-btn[data-page="${name}"]`).classList.add('active');
   if(name==='settings') loadSettingsData();
   if(name==='health') loadHealthData();
+  if(name==='connectors') loadConnectors();
+}
+
+function escHtml(s){return String(s==null?'':s).replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));}
+
+async function loadConnectors(){
+  const inst=document.getElementById('conn-installed');
+  const hub=document.getElementById('conn-hub');
+  try {
+    const d=await(await fetch('/api/connectors')).json();
+    const cs=(d.connectors||[]);
+    inst.innerHTML = cs.length ? cs.map(c=>{
+      const caps=Object.entries(c.capabilities||{}).filter(([,v])=>v).map(([k])=>k).join(', ')||'—';
+      return `<div class="card" style="margin:0 0 10px">
+        <div class="card-header"><h2 style="font-size:15px">${escHtml(c.displayName)}
+          <span class="badge">${escHtml(c.source)}</span>
+          ${c.version?`<span class="badge">v${escHtml(c.version)}</span>`:''}</h2></div>
+        <div style="color:var(--text-muted);font-size:13px">${escHtml(c.description)||'<em>no description</em>'}</div>
+        <div style="font-size:12px;color:var(--text-muted);margin-top:6px">type <code>${escHtml(c.name)}</code> · signals ${(c.signalTypes||[]).map(escHtml).join(', ')||'—'} · ${escHtml(caps)}</div>
+      </div>`;
+    }).join('') : '<div class="empty">No connectors loaded.</div>';
+  } catch(e){ inst.innerHTML='<div class="empty">Failed to load connectors.</div>'; }
+
+  try {
+    const d=await(await fetch('/api/hub/catalog')).json();
+    if(d.error){ hub.innerHTML=`<div class="empty">Hub catalog unreachable (${escHtml(d.url)}).<br>Set <code>HUB_CATALOG_URL</code> for a mirror. ${escHtml(d.error)}</div>`; return; }
+    const cs=(d.connectors||[]);
+    hub.innerHTML = cs.length ? cs.map(c=>{
+      const v=(c.versions&&c.versions[0])||{};
+      const ver=c.latest||v.version||'';
+      const status = c.installed
+        ? `<span class="badge badge-ok">installed${c.installedVersion?` v${escHtml(c.installedVersion)}`:''}</span>`
+        : (c.builtin?'<span class="badge">builtin</span>':'<span class="badge">available</span>');
+      const cmd = c.builtin
+        ? `# ${escHtml(c.displayName)} ships in the server image — no install needed.`
+        : `curl -fsSL -o plugin-signing.pub.pem https://raw.githubusercontent.com/ThoTischner/observability-mcp/main/docs/plugin-signing.pub.pem\nomcp plugin install ${escHtml(c.name)}@${escHtml(ver)} --trust-root plugin-signing.pub.pem`;
+      const id='ci-'+c.name;
+      return `<div class="card" style="margin:0 0 10px">
+        <div class="card-header"><h2 style="font-size:15px">${escHtml(c.displayName)}
+          <span class="badge">${escHtml(c.tier)}</span> ${status}</h2>
+          ${c.installed||c.builtin?'':`<span style="display:flex;gap:6px"><button class="btn btn-primary btn-sm" onclick="installConnector('${escHtml(c.name)}',this)">Install</button><button class="btn btn-ghost btn-sm" onclick="document.getElementById('${id}').classList.toggle('hidden')">CLI…</button></span>`}</div>
+        <div style="color:var(--text-muted);font-size:13px">${escHtml(c.description)}</div>
+        <div style="font-size:12px;color:var(--text-muted);margin-top:6px">type <code>${escHtml(c.name)}</code> · signals ${(c.signalTypes||[]).map(escHtml).join(', ')||'—'} · latest <code>${escHtml(ver)||'—'}</code></div>
+        <pre id="${id}" class="hidden" style="margin-top:8px;background:var(--surface-2);padding:10px;border-radius:6px;font-size:12px;overflow:auto">${escHtml(cmd)}</pre>
+      </div>`;
+    }).join('') : '<div class="empty">Catalog empty.</div>';
+  } catch(e){ hub.innerHTML='<div class="empty">Failed to reach the hub catalog.</div>'; }
+}
+
+async function installConnector(name, btn){
+  if(btn){ btn.disabled=true; btn.textContent='Installing…'; }
+  try {
+    const r=await fetch('/api/connectors/install',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name})});
+    const d=await r.json().catch(()=>({}));
+    if(r.ok){ toast(`Installed ${name}${d.version?(' v'+d.version):''}`); loadConnectors(); loadTypes(); }
+    else if(r.status===403){ toast('UI install disabled — use the CLI tab, or set ENABLE_UI_INSTALL=true + PLUGIN_TRUST_ROOT.'); if(btn){btn.disabled=false;btn.textContent='Install';} }
+    else { toast('Install failed: '+(d.error||r.status)); if(btn){btn.disabled=false;btn.textContent='Install';} }
+  } catch(e){ toast('Install error: '+e.message); if(btn){btn.disabled=false;btn.textContent='Install';} }
+}
+async function uploadConnector(btn){
+  const inp=document.getElementById('conn-upload-file');
+  const f=inp&&inp.files&&inp.files[0];
+  if(!f){ toast('Choose a connector .tgz first'); return; }
+  if(btn){ btn.disabled=true; btn.textContent='Uploading…'; }
+  try {
+    const r=await fetch('/api/connectors/upload',{method:'POST',headers:{'Content-Type':'application/octet-stream'},body:f});
+    const d=await r.json().catch(()=>({}));
+    if(r.ok){ toast(`Installed ${d.name||'connector'}${d.version?(' v'+d.version):''}`); inp.value=''; loadConnectors(); loadTypes(); }
+    else if(r.status===403){ toast('UI install disabled — set ENABLE_UI_INSTALL=true + PLUGIN_TRUST_ROOT.'); }
+    else { toast('Upload failed: '+(d.error||r.status)); }
+  } catch(e){ toast('Upload error: '+e.message); }
+  finally { if(btn){btn.disabled=false;btn.textContent='Upload & install';} }
 }
 function showTab(name) {
-  document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));
-  document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
-  document.getElementById('tab-'+name).classList.add('active');
-  event.target.classList.add('active');
+  // Scope to the tab group's card so independent tab sets (Settings,
+  // Connectors) don't reset each other.
+  const scope = (event && event.target.closest('.card')) || document;
+  scope.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));
+  scope.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
+  const el = document.getElementById('tab-'+name);
+  if (el) el.classList.add('active');
+  if (event && event.target) event.target.classList.add('active');
   if(name==='metrics') populateMetricsSourceSelect();
 }
 function closeModal(id) { document.getElementById(id).classList.remove('open'); }
@@ -1124,6 +1236,9 @@ async function loadInfo(){
   }catch{/* server too old or /api/info disabled */}
 }
 
+// Show the endpoint the user is actually reaching the server through
+// (localhost, a port-forward, or an ingress) — not a hardcoded host.
+document.getElementById('mcp-url').textContent = window.location.origin + '/mcp';
 (async()=>{await loadTypes();await refresh();await loadInfo();setInterval(refresh,15000);})();
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thotischner/observability-mcp",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Unified observability gateway for AI agents — one MCP server for Prometheus, Loki, and any backend",
   "type": "module",
   "license": "MIT",
@@ -9,6 +9,10 @@
     "type": "git",
     "url": "https://github.com/ThoTischner/observability-mcp"
   },
+  "homepage": "https://github.com/ThoTischner/observability-mcp#readme",
+  "bugs": {
+    "url": "https://github.com/ThoTischner/observability-mcp/issues"
+  },
   "keywords": [
     "mcp",
     "observability",
@@ -18,7 +22,8 @@
     "anomaly-detection"
   ],
   "bin": {
-    "observability-mcp": "./dist/index.js"
+    "observability-mcp": "./dist/index.js",
+    "omcp": "./dist/cli/index.js"
   },
   "files": [
     "dist",
@@ -26,7 +31,7 @@
   ],
   "scripts": {
     "dev": "tsx watch src/index.ts",
-    "build": "tsc && cp -r src/ui dist/ui",
+    "build": "tsc && rm -rf dist/ui && cp -r src/ui dist/ui",
     "start": "node dist/index.js"
   },
   "dependencies": {
@@ -41,7 +46,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^25.7.0",
     "openapi-types": "^12.1.3",
-    "tsx": "^4.19.0",
+    "tsx": "^4.22.0",
     "typescript": "^6.0.3"
   },
   "overrides": {