mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
3769e0d1a5
- Created new metrics.ejs view for performance insights and real-time monitoring. - Created new traces.ejs view for distributed tracing and request visibility. - Updated ProductBranding.md to reflect new links for metrics, traces, and dashboards.
210 lines
14 KiB
Plaintext
210 lines
14 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | Metrics - Performance Insights & Real-time Monitoring</title>
|
|
<meta name="description"
|
|
content="Monitor application and infrastructure metrics in real-time. Track performance, identify bottlenecks, and optimize your systems with OneUptime Metrics.">
|
|
<%- include('head', {
|
|
enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false
|
|
}) -%>
|
|
</head>
|
|
|
|
<body>
|
|
<%- include('nav') -%>
|
|
|
|
<main id="main-content">
|
|
<!-- Hero Section -->
|
|
<div class="relative isolate overflow-hidden bg-gradient-to-b from-gray-50 via-white to-white">
|
|
<!-- Background decorative elements -->
|
|
<div class="absolute inset-0 -z-10 overflow-hidden">
|
|
<div class="absolute -top-40 -right-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-purple-100/60 to-violet-100/40 blur-3xl"></div>
|
|
<div class="absolute -bottom-40 -left-32 h-[500px] w-[500px] rounded-full bg-gradient-to-br from-violet-100/60 to-purple-100/40 blur-3xl"></div>
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-gradient-to-br from-purple-50/40 to-violet-50/30 blur-3xl"></div>
|
|
</div>
|
|
|
|
<!-- Grid pattern overlay -->
|
|
<div class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#8882_1px,transparent_1px),linear-gradient(to_bottom,#8882_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
|
|
|
|
<div class="py-24 sm:py-32 lg:py-40">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-4xl text-center">
|
|
<!-- Badge -->
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-50 border border-purple-100 mb-8">
|
|
<span class="relative flex h-2 w-2">
|
|
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
|
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-purple-500"></span>
|
|
</span>
|
|
<span class="text-sm font-medium text-purple-700">OpenTelemetry Native</span>
|
|
</div>
|
|
|
|
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl">
|
|
Real-time <span class="bg-gradient-to-r from-purple-600 to-violet-600 bg-clip-text text-transparent">performance insights</span>
|
|
</h1>
|
|
<p class="mt-6 text-xl sm:text-2xl leading-8 text-gray-600 max-w-3xl mx-auto">
|
|
Collect, visualize, and analyze metrics from any source. Monitor application performance, infrastructure health, and custom business metrics.
|
|
</p>
|
|
|
|
<!-- Feature highlights row -->
|
|
<div class="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm text-gray-600">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Custom dashboards
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Anomaly detection
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Smart alerting
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-5 w-5 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
PromQL compatible
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 flex items-center justify-center gap-x-6">
|
|
<a href="/accounts/register"
|
|
class="inline-flex items-center gap-2 px-6 py-3 bg-gray-900 text-white font-semibold rounded-xl hover:bg-gray-800 transition-all duration-300 shadow-lg shadow-gray-900/20 hover:shadow-xl hover:-translate-y-0.5">
|
|
Get started
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
|
</svg>
|
|
</a>
|
|
<a href="/enterprise/demo" class="group inline-flex items-center gap-2 text-sm font-semibold text-gray-900 hover:text-purple-600 transition-colors">
|
|
Request Demo
|
|
<span aria-hidden="true" class="group-hover:translate-x-1 transition-transform">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero image -->
|
|
<div class="mt-16 flow-root sm:mt-24">
|
|
<div class="relative">
|
|
<div class="absolute -inset-4 bg-gradient-to-r from-purple-500/20 via-violet-500/20 to-purple-500/20 rounded-2xl blur-2xl"></div>
|
|
<div class="relative -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
|
|
<img src="/img/apm-3.png" alt="OneUptime Metrics dashboard displaying real-time performance data" width="2432" height="1442"
|
|
class="rounded-md shadow-2xl ring-1 ring-gray-900/10">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('logo-roll') -%>
|
|
|
|
<!-- Features Section -->
|
|
<div class="relative bg-gradient-to-b from-white via-purple-50/30 to-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="absolute inset-0 -z-10">
|
|
<div class="absolute top-0 left-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-purple-100/40 to-violet-100/30 blur-3xl"></div>
|
|
<div class="absolute bottom-0 right-1/4 h-[400px] w-[400px] rounded-full bg-gradient-to-br from-violet-100/40 to-purple-100/30 blur-3xl"></div>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-50 border border-purple-100 mb-6">
|
|
<svg class="h-4 w-4 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-purple-700">Powerful Metrics</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
Everything you need for <span class="bg-gradient-to-r from-purple-600 to-violet-600 bg-clip-text text-transparent">metrics monitoring</span>
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
From infrastructure to application metrics, OneUptime provides comprehensive visibility into your entire stack.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Feature 1 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
|
|
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Real-time Visualization</h3>
|
|
<p class="text-gray-600">Live charts and graphs that update in real-time, giving you instant visibility into your system's performance.</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
|
|
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Intelligent Alerting</h3>
|
|
<p class="text-gray-600">Set up smart alerts based on thresholds, anomalies, or custom conditions. Get notified before issues impact users.</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
|
|
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Custom Retention</h3>
|
|
<p class="text-gray-600">Configure data retention per metric type. Keep critical data longer while optimizing storage costs.</p>
|
|
</div>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
|
|
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Any Data Source</h3>
|
|
<p class="text-gray-600">Ingest metrics from OpenTelemetry, Prometheus, StatsD, and custom sources. One platform for all your metrics.</p>
|
|
</div>
|
|
|
|
<!-- Feature 5 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
|
|
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Trend Analysis</h3>
|
|
<p class="text-gray-600">Identify patterns and trends in your metrics over time. Make data-driven decisions with historical insights.</p>
|
|
</div>
|
|
|
|
<!-- Feature 6 -->
|
|
<div class="relative p-8 bg-white rounded-2xl shadow-sm ring-1 ring-gray-200 hover:shadow-lg transition-shadow">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 ring-1 ring-purple-200 mb-6">
|
|
<svg class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-3">Custom Dashboards</h3>
|
|
<p class="text-gray-600">Build custom dashboards with drag-and-drop widgets. Create views tailored to your team's needs.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('cta') -%>
|
|
</main>
|
|
|
|
<%- include('footer') -%>
|
|
</body>
|
|
|
|
</html>
|