lukaszraczylo/graphql-monitoring-proxy
1
0
Fork 0
mirror of https://github.com/lukaszraczylo/graphql-monitoring-proxy.git synced 2026-06-05 23:03:48 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
86fa0551df875b121fcfcec4be1863fe0d2fae45
graphql-monitoring-proxy/docs/index.html
T

714 lines
52 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GraphQL Monitoring Proxy - High-Performance GraphQL Gateway</title>
<meta
name="description"
content="High-performance GraphQL proxy with monitoring, caching, circuit breaker, rate limiting, and security features. Zero cost monitoring at 100k+ req/s."
/>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class'
}
</script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<style>
body { font-family: "Inter", sans-serif; }
code, pre { font-family: "JetBrains Mono", monospace; }
.theme-transition {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-float { animation: float 3s ease-in-out infinite; }
.glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.dark .glass {
background: rgba(17, 24, 39, 0.7);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(135deg, #e879f9 0%, #818cf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dark .gradient-text {
background: linear-gradient(135deg, #f0abfc 0%, #a5b4fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shadow-modern { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1); }
.dark .shadow-modern { box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4); }
html { scroll-behavior: smooth; }
</style>
<script>
if (localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
</script>
</head>
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 theme-transition">
<!-- Navigation -->
<nav class="fixed w-full glass shadow-modern z-50 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex justify-between h-16 items-center">
<a href="#" class="flex items-center hover:opacity-80 transition-opacity duration-300 gap-2">
<i class="fas fa-diagram-project text-2xl gradient-text"></i>
<span class="text-xl font-bold gradient-text">graphql-monitoring-proxy</span>
</a>
<div class="hidden md:flex space-x-6">
<a href="#features" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium">Features</a>
<a href="#monitoring" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium">Monitoring</a>
<a href="#speed" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium">Speed</a>
<a href="#security" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium">Security</a>
<a href="#resilience" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium">Resilience</a>
<a href="#installation" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium">Install</a>
</div>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 min-w-[44px] min-h-[44px] flex items-center justify-center" aria-label="Toggle theme">
<i class="fas fa-moon dark:hidden text-xl"></i>
<i class="fas fa-sun hidden dark:inline text-xl"></i>
</button>
<a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy" target="_blank" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 min-w-[44px] min-h-[44px] flex items-center justify-center" aria-label="View on GitHub">
<i class="fab fa-github text-xl"></i>
</a>
<button id="mobile-menu-toggle" class="md:hidden text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 min-w-[44px] min-h-[44px] flex items-center justify-center" aria-label="Toggle menu">
<i class="fas fa-bars text-xl" id="menu-open-icon"></i>
<i class="fas fa-times text-xl hidden" id="menu-close-icon"></i>
</button>
</div>
</div>
</div>
<div id="mobile-menu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-700">
<div class="px-4 py-3 space-y-1 bg-white dark:bg-gray-800">
<a href="#features" class="block px-3 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded font-medium">Features</a>
<a href="#monitoring" class="block px-3 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded font-medium">Monitoring</a>
<a href="#speed" class="block px-3 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded font-medium">Speed</a>
<a href="#security" class="block px-3 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded font-medium">Security</a>
<a href="#resilience" class="block px-3 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded font-medium">Resilience</a>
<a href="#installation" class="block px-3 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 rounded font-medium">Install</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative pt-24 sm:pt-32 pb-12 sm:pb-20 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-fuchsia-50 via-violet-50 to-indigo-50 dark:from-gray-900 dark:via-fuchsia-900/20 dark:to-indigo-900/20 theme-transition"></div>
<div class="absolute top-0 -left-4 w-72 h-72 bg-fuchsia-300 dark:bg-fuchsia-500 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-float"></div>
<div class="absolute top-0 -right-4 w-72 h-72 bg-violet-300 dark:bg-violet-500 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-float" style="animation-delay: 1s;"></div>
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-indigo-300 dark:bg-indigo-500 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-float" style="animation-delay: 2s;"></div>
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center">
<div class="mb-8 sm:mb-10 flex justify-center animate-fade-in-up">
<div class="text-8xl sm:text-9xl animate-float">
<i class="fas fa-diagram-project gradient-text"></i>
</div>
</div>
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight animate-fade-in-up" style="animation-delay: 0.1s;">
GraphQL Monitoring<br /><span class="gradient-text">Proxy</span>
</h1>
<p class="text-base sm:text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 sm:mb-10 max-w-3xl mx-auto leading-relaxed px-4 animate-fade-in-up" style="animation-delay: 0.2s;">
Enterprise-grade GraphQL gateway with Prometheus metrics, smart caching, circuit breaker, rate limiting, request coalescing, WebSocket subscriptions, and comprehensive security - all at zero cost.
</p>
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center mb-8 sm:mb-12 px-4 animate-fade-in-up" style="animation-delay: 0.3s;">
<a href="#installation" class="group relative bg-gradient-to-r from-fuchsia-500 to-indigo-600 hover:from-fuchsia-600 hover:to-indigo-700 text-white px-8 py-3 rounded-lg font-medium transition-all duration-300 min-h-[48px] flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-105">
<span class="relative z-10">Get Started</span>
</a>
<a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy" class="group glass hover:shadow-lg text-gray-900 dark:text-gray-100 px-8 py-3 rounded-lg font-medium transition-all duration-300 min-h-[48px] flex items-center justify-center hover:scale-105">
<i class="fab fa-github mr-2"></i>View on GitHub
</a>
</div>
<div class="flex flex-wrap justify-center gap-2 sm:gap-4 text-sm px-4">
<img src="https://img.shields.io/github/v/release/lukaszraczylo/graphql-monitoring-proxy" alt="Version" class="h-5" />
<img src="https://img.shields.io/github/license/lukaszraczylo/graphql-monitoring-proxy" alt="License" class="h-5" />
<img src="https://goreportcard.com/badge/github.com/lukaszraczylo/graphql-monitoring-proxy" alt="Go Report" class="h-5" />
</div>
<div class="mt-12 sm:mt-16 max-w-3xl mx-auto px-4 animate-fade-in-up" style="animation-delay: 0.4s;">
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-fuchsia-500 to-indigo-600 rounded-xl blur opacity-25 group-hover:opacity-50 transition duration-500"></div>
<div class="relative bg-gray-900 rounded-xl p-6 text-left">
<div class="flex items-center gap-2 mb-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="ml-2 text-gray-400 text-sm">terminal</span>
</div>
<pre class="text-gray-100 text-sm sm:text-base overflow-x-auto"><code><span class="text-gray-400"># Run with Docker</span>
<span class="text-fuchsia-400">$</span> docker run -p 8080:8080 -p 9393:9393 \
-e GMP_HOST_GRAPHQL=http://your-graphql:4000/ \
-e GMP_ENABLE_GLOBAL_CACHE=true \
-e GMP_ENABLE_CIRCUIT_BREAKER=true \
ghcr.io/lukaszraczylo/graphql-monitoring-proxy:latest</code></pre>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Performance Stats -->
<section class="py-12 sm:py-16 bg-white dark:bg-gray-900 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="grid sm:grid-cols-4 gap-4 text-center">
<div class="glass p-6 rounded-xl">
<div class="text-4xl font-bold gradient-text mb-2">100k+</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Requests/second</p>
</div>
<div class="glass p-6 rounded-xl">
<div class="text-4xl font-bold gradient-text mb-2">10MB</div>
<p class="text-sm text-gray-600 dark:text-gray-400">RAM usage</p>
</div>
<div class="glass p-6 rounded-xl">
<div class="text-4xl font-bold gradient-text mb-2">0.1%</div>
<p class="text-sm text-gray-600 dark:text-gray-400">CPU usage</p>
</div>
<div class="glass p-6 rounded-xl">
<div class="text-4xl font-bold gradient-text mb-2">$0</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Cost</p>
</div>
</div>
<div class="mt-6 text-center">
<a href="bench/" class="inline-flex items-center text-fuchsia-600 dark:text-fuchsia-400 hover:underline font-medium">
View benchmarks
<i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Features Overview -->
<section id="features" class="py-12 sm:py-16 md:py-20 bg-gray-50 dark:bg-gray-800 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Feature Overview</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Everything you need for production GraphQL</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="glass p-5 rounded-xl group hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-fuchsia-500 to-fuchsia-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-chart-line text-white"></i>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Monitoring</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Prometheus metrics, OpenTelemetry tracing, admin dashboard</p>
</div>
<div class="glass p-5 rounded-xl group hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-violet-500 to-violet-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-bolt text-white"></i>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Speed</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Smart caching, request coalescing, read-only replicas</p>
</div>
<div class="glass p-5 rounded-xl group hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-shield-halved text-white"></i>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Security</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Rate limiting, introspection blocking, user banning</p>
</div>
<div class="glass p-5 rounded-xl group hover:shadow-lg transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-rose-500 to-rose-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
<i class="fas fa-heart-pulse text-white"></i>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Resilience</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Circuit breaker, retry budget, connection recovery</p>
</div>
</div>
</div>
</section>
<!-- Monitoring Section -->
<section id="monitoring" class="py-12 sm:py-16 md:py-20 bg-white dark:bg-gray-900 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">
<i class="fas fa-chart-line gradient-text mr-3"></i>Monitoring
</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Complete observability for your GraphQL API</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-fire mr-2 text-orange-500"></i>
Prometheus Metrics
</h3>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Query execution timing with histograms</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>User ID extraction from JWT tokens</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Operation name and type tracking</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Cache hit/miss ratios</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Success/failure/skipped counters</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Configurable metrics purging</li>
</ul>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-satellite-dish mr-2 text-blue-500"></i>
OpenTelemetry Tracing
</h3>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Distributed tracing support</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Configurable OTLP collector endpoint</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Trace context propagation via headers</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Child span creation for each request</li>
</ul>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg mt-4 text-xs overflow-x-auto"><code>GMP_ENABLE_TRACE=true
GMP_TRACE_ENDPOINT=localhost:4317</code></pre>
</div>
<div class="glass p-6 rounded-xl md:col-span-2">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-desktop mr-2 text-pink-500"></i>
Real-Time Admin Dashboard
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Web-based UI at <code class="text-fuchsia-600 dark:text-fuchsia-400">/admin</code> with auto-refresh every 5 seconds:</p>
<div class="grid sm:grid-cols-3 gap-4 text-sm">
<div>
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">System Health</h4>
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
<li>Backend GraphQL status</li>
<li>Redis connectivity</li>
<li>Response times</li>
</ul>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Live Statistics</h4>
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
<li>Request coalescing rate</li>
<li>Retry budget tokens</li>
<li>Active WebSocket connections</li>
</ul>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Controls</h4>
<ul class="space-y-1 text-gray-600 dark:text-gray-400">
<li>Circuit breaker state</li>
<li>Cache statistics</li>
<li>Reset/clear actions</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Speed Section -->
<section id="speed" class="py-12 sm:py-16 md:py-20 bg-gray-50 dark:bg-gray-800 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">
<i class="fas fa-bolt gradient-text mr-3"></i>Speed
</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Maximize throughput, minimize latency</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-layer-group mr-2 text-amber-500"></i>
Request Coalescing
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Deduplicate concurrent identical queries - only one request hits the backend, response is shared with all waiting clients.</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Reduces backend load 50-80%</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Prevents thundering herd on cache expiry</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Zero latency for primary request</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Enabled by default</li>
</ul>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-database mr-2 text-violet-500"></i>
Smart Caching
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Memory-aware caching with per-user isolation, compression, and flexible TTL control.</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>In-memory with LRU eviction</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Distributed Redis cache support</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Per-query TTL via <code>@cached(ttl: 90)</code></li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Force refresh via <code>@cached(refresh: true)</code></li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Automatic gzip compression</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Per-user cache isolation (security)</li>
</ul>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-plug mr-2 text-emerald-500"></i>
WebSocket Subscriptions
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Native GraphQL subscription support with bidirectional proxying.</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Automatic ping/pong keep-alive</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Configurable message size limits</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Connection statistics in dashboard</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Graceful connection handling</li>
</ul>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg mt-4 text-xs overflow-x-auto"><code>GMP_WEBSOCKET_ENABLE=true
GMP_WEBSOCKET_PING_INTERVAL=30</code></pre>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-code-branch mr-2 text-cyan-500"></i>
Read-Only Replica Support
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Route queries to read replicas, mutations to primary for maximum throughput.</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Automatic query/mutation routing</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Scales read capacity horizontally</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Works with Hasura read replicas</li>
</ul>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg mt-4 text-xs overflow-x-auto"><code>GMP_HOST_GRAPHQL=http://primary:8080/
GMP_HOST_GRAPHQL_READONLY=http://replica:8080/</code></pre>
</div>
</div>
</div>
</section>
<!-- Security Section -->
<section id="security" class="py-12 sm:py-16 md:py-20 bg-white dark:bg-gray-900 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">
<i class="fas fa-shield-halved gradient-text mr-3"></i>Security
</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Protect your GraphQL API from abuse</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-gauge-high mr-2 text-rose-500"></i>
Role-Based Rate Limiting
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Different rate limits per user role with burst control and dynamic config reload.</p>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg text-xs overflow-x-auto"><code>{
"ratelimit": {
"admin": { "req": 1000, "interval": "second", "burst": 2000 },
"premium": { "req": 500, "interval": "second" },
"guest": { "req": 10, "interval": "second" },
"-": { "req": 5, "interval": "second" }
}
}</code></pre>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-eye-slash mr-2 text-indigo-500"></i>
Introspection Blocking
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Block schema introspection to prevent API discovery attacks, with configurable allowlists.</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Blocks __schema, __type, etc.</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Deep nested query inspection</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Allowlist specific introspections</li>
</ul>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg mt-4 text-xs overflow-x-auto"><code>GMP_BLOCK_SCHEMA_INTROSPECTION=true
GMP_ALLOWED_INTROSPECTION="__typename"</code></pre>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-ban mr-2 text-red-500"></i>
User Ban/Unban API
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Block misbehaving users detected by your monitoring system.</p>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg text-xs overflow-x-auto"><code>curl -X POST http://localhost:9090/api/user-ban \
-H 'Content-Type: application/json' \
-d '{"user_id": "1337", "reason": "Scraping"}'</code></pre>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-lock mr-2 text-amber-500"></i>
Additional Security
</h3>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i><strong>Read-only mode:</strong> Block all mutations</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i><strong>URL allowlist:</strong> Restrict accessible endpoints</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i><strong>JWT claim extraction:</strong> User ID and role from tokens</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i><strong>API authentication:</strong> Optional X-API-Key for admin endpoints</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i><strong>Log sanitization:</strong> Automatic redaction of sensitive data</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i><strong>SQL injection prevention:</strong> Parameterized queries</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Resilience Section -->
<section id="resilience" class="py-12 sm:py-16 md:py-20 bg-gray-50 dark:bg-gray-800 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">
<i class="fas fa-heart-pulse gradient-text mr-3"></i>Resilience
</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Handle failures gracefully</p>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-toggle-off mr-2 text-rose-500"></i>
Circuit Breaker
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Prevent cascading failures with automatic detection and recovery.</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Trip on consecutive failures or ratio</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Automatic recovery after timeout</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Serve cached responses when open</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Configurable for timeouts, 5XX, 4XX</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Exponential backoff support</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Health endpoint: <code>/api/circuit-breaker/health</code></li>
</ul>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-coins mr-2 text-amber-500"></i>
Retry Budget
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Prevent retry storms with token bucket rate limiting.</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Token bucket algorithm</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Configurable refill rate</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Prevents overwhelming recovering backends</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Enabled by default</li>
</ul>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg mt-4 text-xs overflow-x-auto"><code>GMP_RETRY_BUDGET_ENABLE=true
GMP_RETRY_BUDGET_TOKENS_PER_SEC=10
GMP_RETRY_BUDGET_MAX_TOKENS=100</code></pre>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-rotate mr-2 text-cyan-500"></i>
Connection Recovery
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Automatic connection pool management and backend health monitoring.</p>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Backend startup readiness probe</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Keep-alive with health checks</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Automatic pool reset on failures</li>
<li class="flex items-start gap-2"><i class="fas fa-check text-green-500 mt-1"></i>Intelligent retry with backoff</li>
</ul>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-triangle-exclamation mr-2 text-orange-500"></i>
Graceful Degradation
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Informative error responses with retry recommendations.</p>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg text-xs overflow-x-auto"><code>{
"errors": [{
"message": "Backend temporarily unavailable",
"extensions": {
"code": "SERVICE_UNAVAILABLE",
"retryable": true,
"retry_after": 60
}
}]
}</code></pre>
</div>
</div>
</div>
</section>
<!-- Maintenance Section -->
<section class="py-12 sm:py-16 md:py-20 bg-white dark:bg-gray-900 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">
<i class="fas fa-wrench gradient-text mr-3"></i>Maintenance
</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Built-in tools for Hasura users</p>
</div>
<div class="max-w-3xl mx-auto">
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
<i class="fas fa-broom mr-2 text-emerald-500"></i>
Hasura Event Cleaner
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Automatically clean up old event logs to prevent database bloat. Runs hourly.</p>
<div class="grid sm:grid-cols-2 gap-4">
<div>
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2 text-sm">Tables Cleaned</h4>
<ul class="space-y-1 text-xs text-gray-600 dark:text-gray-400">
<li><code>hdb_catalog.event_invocation_logs</code></li>
<li><code>hdb_catalog.event_log</code></li>
<li><code>hdb_catalog.hdb_action_log</code></li>
<li><code>hdb_catalog.hdb_cron_event_invocation_logs</code></li>
<li><code>hdb_catalog.hdb_scheduled_event_invocation_logs</code></li>
</ul>
</div>
<div>
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2 text-sm">Configuration</h4>
<pre class="bg-gray-900 text-gray-100 p-3 rounded-lg text-xs overflow-x-auto"><code>GMP_HASURA_EVENT_CLEANER=true
GMP_HASURA_EVENT_CLEANER_OLDER_THAN=14
GMP_HASURA_EVENT_METADATA_DB=postgres://...</code></pre>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Installation Section -->
<section id="installation" class="py-12 sm:py-16 md:py-20 bg-gray-50 dark:bg-gray-800 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Installation</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Deploy in seconds</p>
</div>
<div class="max-w-3xl mx-auto space-y-6">
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 flex items-center">
<i class="fab fa-docker mr-2 text-blue-500"></i>
Docker
</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto"><code>docker pull ghcr.io/lukaszraczylo/graphql-monitoring-proxy:latest</code></pre>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 flex items-center">
<i class="fas fa-download mr-2 text-fuchsia-500"></i>
Binary Download
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">Download from the <a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy/releases/latest" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline">releases page</a>.</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Supported: Darwin ARM64/AMD64, Linux ARM64/AMD64, Windows AMD64</p>
</div>
<div class="glass p-6 rounded-xl">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3 flex items-center">
<i class="fas fa-dharmachakra mr-2 text-indigo-500"></i>
Kubernetes
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">Example manifests available:</p>
<ul class="text-sm text-gray-500 dark:text-gray-400 space-y-1">
<li><a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy/blob/main/static/kubernetes-deployment.yaml" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline">Standalone deployment</a></li>
<li><a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy/blob/main/static/kubernetes-single-deployment.yaml" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline">Combined deployment (proxy + Hasura)</a></li>
<li><a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy/blob/main/static/kubernetes-single-deployment-with-ro.yaml" class="text-fuchsia-600 dark:text-fuchsia-400 hover:underline">Combined with read-only replica</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Endpoints Section -->
<section class="py-12 sm:py-16 md:py-20 bg-white dark:bg-gray-900 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="text-center mb-8 sm:mb-12">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4">Endpoints</h2>
<p class="text-base sm:text-lg text-gray-600 dark:text-gray-300 px-4">Available HTTP endpoints</p>
</div>
<div class="max-w-3xl mx-auto">
<div class="glass p-6 rounded-xl">
<div class="space-y-3">
<div class="flex items-start gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<code class="text-fuchsia-600 dark:text-fuchsia-400 font-medium whitespace-nowrap">:8080/*</code>
<span class="text-gray-600 dark:text-gray-400">GraphQL passthrough endpoint</span>
</div>
<div class="flex items-start gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<code class="text-fuchsia-600 dark:text-fuchsia-400 font-medium whitespace-nowrap">:8080/admin</code>
<span class="text-gray-600 dark:text-gray-400">Admin dashboard UI</span>
</div>
<div class="flex items-start gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<code class="text-fuchsia-600 dark:text-fuchsia-400 font-medium whitespace-nowrap">:9393/metrics</code>
<span class="text-gray-600 dark:text-gray-400">Prometheus metrics</span>
</div>
<div class="flex items-start gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<code class="text-fuchsia-600 dark:text-fuchsia-400 font-medium whitespace-nowrap">:8080/healthz</code>
<span class="text-gray-600 dark:text-gray-400">Health check (with optional backend verification)</span>
</div>
<div class="flex items-start gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<code class="text-fuchsia-600 dark:text-fuchsia-400 font-medium whitespace-nowrap">:8080/livez</code>
<span class="text-gray-600 dark:text-gray-400">Liveness probe</span>
</div>
<div class="flex items-start gap-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
<code class="text-fuchsia-600 dark:text-fuchsia-400 font-medium whitespace-nowrap">:9090/api/*</code>
<span class="text-gray-600 dark:text-gray-400">Management API (user-ban, cache-clear, circuit-breaker)</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 bg-gray-100 dark:bg-gray-800 theme-transition">
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex flex-col sm:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-2">
<i class="fas fa-diagram-project text-xl gradient-text"></i>
<span class="font-semibold gradient-text">graphql-monitoring-proxy</span>
</div>
<div class="flex items-center gap-6">
<a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100">
<i class="fab fa-github text-xl"></i>
</a>
<a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy/issues" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 text-sm">
Issues
</a>
<a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy/releases" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 text-sm">
Releases
</a>
<a href="https://github.com/lukaszraczylo/graphql-monitoring-proxy#configuration" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 text-sm">
Full Docs
</a>
</div>
<p class="text-gray-500 dark:text-gray-400 text-sm">MIT License</p>
</div>
</div>
</footer>
<script>
// Theme toggle
document.getElementById('theme-toggle').addEventListener('click', function() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.theme = 'light';
} else {
document.documentElement.classList.add('dark');
localStorage.theme = 'dark';
}
});
// Mobile menu toggle
document.getElementById('mobile-menu-toggle').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
const openIcon = document.getElementById('menu-open-icon');
const closeIcon = document.getElementById('menu-close-icon');
menu.classList.toggle('hidden');
openIcon.classList.toggle('hidden');
closeIcon.classList.toggle('hidden');
});
// Close mobile menu when clicking a link
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
document.getElementById('mobile-menu').classList.add('hidden');
document.getElementById('menu-open-icon').classList.remove('hidden');
document.getElementById('menu-close-icon').classList.add('hidden');
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink