mirror of
https://github.com/OneUptime/oneuptime.git
synced 2026-04-06 00:32:12 +02:00
5e04a8c13c
- Reduced the size of SVG icons from h-7 w-7 to h-5 w-5 in on-call.ejs, status-page.ejs, traces.ejs, workflows.ejs. - Adjusted the container sizes for icons from h-14 w-14 to h-10 w-10 and changed rounded styles from rounded-2xl to rounded-xl for a more uniform appearance. - Ensured that all relevant icons and their containers maintain a consistent design language throughout the application.
1222 lines
76 KiB
Plaintext
1222 lines
76 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" id="home">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
|
|
|
<head>
|
|
<title>OneUptime | Distributed Tracing - End-to-End Request Visibility</title>
|
|
<meta name="description"
|
|
content="Trace requests across microservices with distributed tracing. Identify bottlenecks, debug issues, and optimize performance with OneUptime Traces.">
|
|
<%- 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-white" id="traces-hero-section">
|
|
<!-- Subtle grid pattern background -->
|
|
<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
|
|
|
|
<!-- Grid glow effect that follows cursor - yellow color -->
|
|
<div id="traces-grid-glow" class="absolute inset-0 -z-9 pointer-events-none" style="opacity: 0; transition: opacity 0.3s ease-out; background: linear-gradient(to right, rgba(234, 179, 8, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(234, 179, 8, 0.3) 1px, transparent 1px); background-size: 4rem 4rem; -webkit-mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%); mask-image: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, transparent 100%);"></div>
|
|
|
|
<div class="py-20 sm:py-28 lg:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-3xl text-center">
|
|
<!-- Minimal badge -->
|
|
<p class="text-sm font-medium text-yellow-600 mb-4">OpenTelemetry Native</p>
|
|
|
|
<h1 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
|
|
End-to-end distributed tracing
|
|
</h1>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600 max-w-2xl mx-auto">
|
|
Follow requests across services, identify bottlenecks, and debug issues faster with comprehensive distributed tracing.
|
|
</p>
|
|
|
|
<div class="mt-10 flex items-center justify-center gap-x-6">
|
|
<a href="/accounts/register"
|
|
class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 transition-colors">
|
|
Get started
|
|
</a>
|
|
<a href="/enterprise/demo" class="text-sm font-semibold text-gray-900 hover:text-gray-600 transition-colors">
|
|
Request demo <span aria-hidden="true">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Subtle feature list -->
|
|
<div class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm text-gray-500">
|
|
<span>Span visualization</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Service maps</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Latency analysis</span>
|
|
<span class="hidden sm:inline text-gray-300">|</span>
|
|
<span>Error correlation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clean hero image -->
|
|
<div class="mt-16 sm:mt-20">
|
|
<div class="relative mx-auto max-w-5xl">
|
|
<div class="rounded-xl bg-gray-900/5 p-1.5 ring-1 ring-gray-900/10">
|
|
<img src="/img/traces.png" alt="OneUptime Traces dashboard" width="2432" height="1442"
|
|
class="rounded-lg shadow-lg">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('logo-roll') -%>
|
|
|
|
<!-- How It Works Section -->
|
|
<div class="relative bg-gray-50 py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="mx-auto max-w-2xl text-center mb-16">
|
|
<p class="text-sm font-medium text-yellow-600 uppercase tracking-wide mb-3">How It Works</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Start tracing requests in minutes
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600">
|
|
Get end-to-end visibility into your distributed system with our simple OpenTelemetry-native setup.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl">
|
|
<!-- Connecting line for desktop -->
|
|
<div class="hidden lg:block relative">
|
|
<div class="absolute top-8 left-[calc(12.5%+24px)] right-[calc(12.5%+24px)] h-px bg-yellow-200"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Step 1 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-yellow-500 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-yellow-600 ring-2 ring-yellow-500">1</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Instrument</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Add OpenTelemetry SDK to your services with auto-instrumentation.</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-yellow-500 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-yellow-600 ring-2 ring-yellow-500">2</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Export</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Configure the exporter to send traces to OneUptime's endpoint.</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-yellow-500 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-yellow-600 ring-2 ring-yellow-500">3</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Visualize</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Explore service maps and trace waterfalls instantly.</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center">
|
|
<div class="relative inline-flex items-center justify-center h-16 w-16 rounded-full bg-yellow-500 text-white mb-6 shadow-sm">
|
|
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span class="absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-semibold text-yellow-600 ring-2 ring-yellow-500">4</span>
|
|
</div>
|
|
<h3 class="text-base font-semibold text-gray-900 mb-2">Optimize</h3>
|
|
<p class="text-sm text-gray-600 leading-relaxed">Find bottlenecks, fix issues, and improve performance.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Why OneUptime Section -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section header -->
|
|
<div class="mx-auto max-w-2xl text-center mb-20">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-yellow-50 px-4 py-1.5 text-sm font-medium text-yellow-700 ring-1 ring-inset ring-yellow-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-yellow-700">Why OneUptime Traces</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl lg:text-5xl">
|
|
See the complete request journey
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
Understand how requests flow through your distributed system. Identify slow services, failed calls, and optimization opportunities with powerful trace analysis.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature blocks -->
|
|
<div class="space-y-24">
|
|
|
|
<!-- Feature 1: Service Maps -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200">
|
|
<svg class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-yellow-600 uppercase tracking-wide">Service Maps</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Automatic service maps</h3>
|
|
<p class="mt-4 text-lg text-gray-600">Visualize dependencies between services automatically. Understand your architecture at a glance and identify critical paths and potential single points of failure.</p>
|
|
<ul class="mt-6 space-y-3">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-yellow-500 flex-shrink-0" 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>
|
|
Auto-discovered dependencies
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-yellow-500 flex-shrink-0" 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>
|
|
Real-time health indicators
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-yellow-500 flex-shrink-0" 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>
|
|
Traffic flow visualization
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
|
|
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>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Service Map Visual -->
|
|
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
|
|
<!-- Browser mockup header -->
|
|
<div class="flex items-center gap-2 pb-4 border-b border-gray-100 mb-6">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
|
</div>
|
|
<div class="flex-1 mx-4">
|
|
<div class="bg-gray-100 rounded-md px-3 py-1.5 text-xs text-gray-500 text-center">Service Dependency Map</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service nodes with connections -->
|
|
<div class="relative h-64">
|
|
<!-- Connection lines (SVG) -->
|
|
<svg class="absolute inset-0 w-full h-full" viewBox="0 0 400 220">
|
|
<!-- API Gateway to Services -->
|
|
<path d="M200 30 L100 100" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2" class="animate-pulse"/>
|
|
<path d="M200 30 L300 100" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2" class="animate-pulse"/>
|
|
<path d="M200 30 L200 100" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2" class="animate-pulse"/>
|
|
<!-- Services to Database -->
|
|
<path d="M100 130 L150 190" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
|
|
<path d="M200 130 L200 190" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
|
|
<path d="M300 130 L250 190" stroke="#06b6d4" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
|
|
</svg>
|
|
|
|
<!-- API Gateway Node (Top) -->
|
|
<div class="absolute left-1/2 top-0 -translate-x-1/2">
|
|
<div class="bg-cyan-500 text-white rounded-lg px-4 py-2 text-xs font-medium shadow-lg shadow-cyan-500/30">
|
|
API Gateway
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Nodes (Middle Row) -->
|
|
<div class="absolute left-[15%] top-[35%]">
|
|
<div class="bg-white border-2 border-cyan-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-700 shadow-md">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
|
User Service
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute left-1/2 top-[35%] -translate-x-1/2">
|
|
<div class="bg-white border-2 border-cyan-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-700 shadow-md">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
|
Order Service
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute right-[15%] top-[35%]">
|
|
<div class="bg-white border-2 border-cyan-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-700 shadow-md">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-yellow-500"></div>
|
|
Payment Service
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Database Nodes (Bottom Row) -->
|
|
<div class="absolute left-[25%] bottom-2">
|
|
<div class="bg-gray-100 border border-gray-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-600">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
|
</svg>
|
|
Users DB
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute left-1/2 bottom-2 -translate-x-1/2">
|
|
<div class="bg-gray-100 border border-gray-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-600">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
|
</svg>
|
|
Orders DB
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute right-[25%] bottom-2">
|
|
<div class="bg-gray-100 border border-gray-300 rounded-lg px-3 py-2 text-xs font-medium text-gray-600">
|
|
<div class="flex items-center gap-2">
|
|
<svg class="w-3 h-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
|
|
</svg>
|
|
Redis Cache
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 2: Latency Breakdown -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Waterfall Trace View -->
|
|
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
|
|
<!-- Browser mockup header -->
|
|
<div class="flex items-center gap-2 pb-4 border-b border-gray-100 mb-4">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
|
</div>
|
|
<div class="flex-1 mx-4">
|
|
<div class="bg-gray-100 rounded-md px-3 py-1.5 text-xs text-gray-500 text-center">Trace Waterfall - GET /api/orders</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timeline header -->
|
|
<div class="flex items-center justify-between text-xs text-gray-400 mb-3 px-2">
|
|
<span>0ms</span>
|
|
<span>100ms</span>
|
|
<span>200ms</span>
|
|
<span>300ms</span>
|
|
<span>400ms</span>
|
|
</div>
|
|
|
|
<!-- Trace spans -->
|
|
<div class="space-y-2">
|
|
<!-- Parent span -->
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-24 text-xs text-gray-600 truncate font-medium">api-gateway</div>
|
|
<div class="flex-1 h-6 bg-gray-100 rounded relative">
|
|
<div class="absolute left-0 top-0 h-full bg-cyan-500 rounded" style="width: 100%"></div>
|
|
<span class="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] text-white font-medium">385ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Child span 1 -->
|
|
<div class="flex items-center gap-3 pl-4">
|
|
<div class="w-20 text-xs text-gray-600 truncate">auth-service</div>
|
|
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
|
<div class="absolute left-[2%] top-0 h-full bg-teal-400 rounded" style="width: 15%"></div>
|
|
<span class="absolute left-[5%] top-1/2 -translate-y-1/2 text-[10px] text-white font-medium">45ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Child span 2 -->
|
|
<div class="flex items-center gap-3 pl-4">
|
|
<div class="w-20 text-xs text-gray-600 truncate">order-service</div>
|
|
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
|
<div class="absolute left-[18%] top-0 h-full bg-cyan-400 rounded" style="width: 55%"></div>
|
|
<span class="absolute left-[35%] top-1/2 -translate-y-1/2 text-[10px] text-white font-medium">210ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grandchild span -->
|
|
<div class="flex items-center gap-3 pl-8">
|
|
<div class="w-16 text-xs text-gray-500 truncate">db-query</div>
|
|
<div class="flex-1 h-4 bg-gray-100 rounded relative">
|
|
<div class="absolute left-[25%] top-0 h-full bg-amber-400 rounded" style="width: 35%"></div>
|
|
<span class="absolute left-[35%] top-1/2 -translate-y-1/2 text-[10px] text-gray-700 font-medium">142ms</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Child span 3 -->
|
|
<div class="flex items-center gap-3 pl-4">
|
|
<div class="w-20 text-xs text-gray-600 truncate">payment-svc</div>
|
|
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
|
<div class="absolute left-[75%] top-0 h-full bg-teal-500 rounded" style="width: 20%"></div>
|
|
<span class="absolute left-[78%] top-1/2 -translate-y-1/2 text-[10px] text-white font-medium">78ms</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary footer -->
|
|
<div class="mt-4 pt-3 border-t border-gray-100 flex items-center justify-between text-xs">
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-gray-500">Total: <span class="font-medium text-gray-700">385ms</span></span>
|
|
<span class="text-gray-500">Spans: <span class="font-medium text-gray-700">5</span></span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
|
<span class="text-gray-500">Success</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-1 lg:order-2">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200">
|
|
<svg class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-yellow-600 uppercase tracking-wide">Latency Analysis</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Detailed latency breakdown</h3>
|
|
<p class="mt-4 text-lg text-gray-600">See exactly where time is spent in each request. Drill down from a slow endpoint to the exact database query or external API call causing the issue.</p>
|
|
<ul class="mt-6 space-y-3">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" 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>
|
|
Waterfall span visualization
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" 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>
|
|
Sub-millisecond precision
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-amber-500 flex-shrink-0" 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>
|
|
Critical path highlighting
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 3: Error Tracking -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="relative">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200">
|
|
<svg class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-yellow-600 uppercase tracking-wide">Error Tracking</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Error tracking with full context</h3>
|
|
<p class="mt-4 text-lg text-gray-600">Instantly identify which service caused an error. Get full context with stack traces, span attributes, and the exact sequence of events leading to failure.</p>
|
|
<ul class="mt-6 space-y-3">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-red-500 flex-shrink-0" 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>
|
|
Error span highlighting
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-red-500 flex-shrink-0" 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>
|
|
Full stack traces
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-red-500 flex-shrink-0" 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>
|
|
Root cause analysis
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
|
|
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>
|
|
</div>
|
|
<div class="mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Error Spans in Trace View -->
|
|
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
|
|
<!-- Browser mockup header -->
|
|
<div class="flex items-center gap-2 pb-4 border-b border-gray-100 mb-4">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
|
</div>
|
|
<div class="flex-1 mx-4">
|
|
<div class="bg-gray-100 rounded-md px-3 py-1.5 text-xs text-gray-500 text-center">Error Trace - POST /api/checkout</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error trace spans -->
|
|
<div class="space-y-2 mb-4">
|
|
<!-- Parent span -->
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-24 text-xs text-gray-600 truncate font-medium">checkout-svc</div>
|
|
<div class="flex-1 h-6 bg-gray-100 rounded relative">
|
|
<div class="absolute left-0 top-0 h-full bg-cyan-500 rounded" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Child span - OK -->
|
|
<div class="flex items-center gap-3 pl-4">
|
|
<div class="w-20 text-xs text-gray-600 truncate">cart-service</div>
|
|
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
|
<div class="absolute left-[2%] top-0 h-full bg-teal-400 rounded" style="width: 20%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Child span - ERROR -->
|
|
<div class="flex items-center gap-3 pl-4">
|
|
<div class="w-20 text-xs text-red-600 truncate font-medium">payment-svc</div>
|
|
<div class="flex-1 h-5 bg-gray-100 rounded relative">
|
|
<div class="absolute left-[25%] top-0 h-full bg-red-500 rounded border-2 border-red-600" style="width: 45%"></div>
|
|
<div class="absolute left-[27%] top-1/2 -translate-y-1/2 flex items-center gap-1">
|
|
<svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
<span class="text-[10px] text-white font-medium">ERROR</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grandchild span - ERROR source -->
|
|
<div class="flex items-center gap-3 pl-8">
|
|
<div class="w-16 text-xs text-red-500 truncate">stripe-api</div>
|
|
<div class="flex-1 h-4 bg-gray-100 rounded relative">
|
|
<div class="absolute left-[30%] top-0 h-full bg-red-400 rounded" style="width: 35%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error details panel -->
|
|
<div class="bg-red-50 border border-red-200 rounded-lg p-3">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<svg class="w-4 h-4 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
<span class="text-xs font-semibold text-red-800">PaymentDeclinedException</span>
|
|
</div>
|
|
<div class="text-[11px] text-red-700 font-mono bg-red-100 rounded px-2 py-1.5">
|
|
Card declined: insufficient funds<br/>
|
|
<span class="text-red-500">at StripeClient.charge() line 142</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Summary footer -->
|
|
<div class="mt-3 pt-3 border-t border-gray-100 flex items-center justify-between text-xs">
|
|
<span class="text-gray-500">Trace ID: <span class="font-mono text-gray-600">a1b2c3d4</span></span>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
|
<span class="text-red-600 font-medium">Failed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature 4: Logs & Metrics Correlation -->
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<div class="order-2 lg:order-1 mt-12 lg:mt-0">
|
|
<div class="relative">
|
|
<!-- Subtle background -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Correlated Logs and Traces View -->
|
|
<div class="relative bg-white rounded-2xl border border-gray-200 shadow-lg p-6">
|
|
<!-- Browser mockup header -->
|
|
<div class="flex items-center gap-2 pb-4 border-b border-gray-100 mb-4">
|
|
<div class="flex gap-1.5">
|
|
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
|
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
|
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
|
</div>
|
|
<div class="flex-1 mx-4">
|
|
<div class="bg-gray-100 rounded-md px-3 py-1.5 text-xs text-gray-500 text-center">Trace & Log Correlation</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Split view: Trace on left, Logs on right -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- Trace panel -->
|
|
<div class="bg-gray-50 rounded-lg p-3">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<div class="w-5 h-5 rounded bg-cyan-500 flex items-center justify-center">
|
|
<svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs font-semibold text-gray-700">Trace Spans</span>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-16 text-[10px] text-gray-500 truncate">api-gateway</div>
|
|
<div class="flex-1 h-3 bg-gray-200 rounded">
|
|
<div class="h-full bg-cyan-500 rounded" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 pl-2">
|
|
<div class="w-14 text-[10px] text-gray-500 truncate">user-svc</div>
|
|
<div class="flex-1 h-2.5 bg-gray-200 rounded">
|
|
<div class="h-full bg-teal-400 rounded" style="width: 40%; margin-left: 5%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 pl-2">
|
|
<div class="w-14 text-[10px] text-cyan-600 font-medium truncate">order-svc</div>
|
|
<div class="flex-1 h-2.5 bg-gray-200 rounded relative">
|
|
<div class="h-full bg-cyan-400 rounded border border-cyan-600" style="width: 50%; margin-left: 45%"></div>
|
|
<div class="absolute right-1 top-1/2 -translate-y-1/2 w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs panel -->
|
|
<div class="bg-gray-900 rounded-lg p-3">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<div class="w-5 h-5 rounded bg-indigo-500 flex items-center justify-center">
|
|
<svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<span class="text-xs font-semibold text-gray-300">Correlated Logs</span>
|
|
</div>
|
|
<div class="space-y-1 font-mono text-[9px]">
|
|
<div class="text-gray-400"><span class="text-gray-500">10:42:01</span> <span class="text-green-400">INFO</span> Request received</div>
|
|
<div class="text-gray-400"><span class="text-gray-500">10:42:01</span> <span class="text-green-400">INFO</span> Auth validated</div>
|
|
<div class="bg-indigo-900/50 rounded px-1 py-0.5 text-indigo-300 border-l-2 border-indigo-500"><span class="text-gray-500">10:42:02</span> <span class="text-cyan-400">DEBUG</span> Order created #1234</div>
|
|
<div class="bg-indigo-900/50 rounded px-1 py-0.5 text-indigo-300 border-l-2 border-indigo-500"><span class="text-gray-500">10:42:02</span> <span class="text-cyan-400">DEBUG</span> Inventory checked</div>
|
|
<div class="text-gray-400"><span class="text-gray-500">10:42:03</span> <span class="text-green-400">INFO</span> Response sent</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Correlation indicator -->
|
|
<div class="mt-4 pt-3 border-t border-gray-100">
|
|
<div class="flex items-center justify-center gap-3">
|
|
<div class="flex items-center gap-1.5 px-3 py-1.5 bg-indigo-50 rounded-full">
|
|
<svg class="w-3.5 h-3.5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
|
|
</svg>
|
|
<span class="text-[10px] font-medium text-indigo-700">Trace ID: a1b2c3d4 linked to 5 logs</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="order-1 lg:order-2">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200">
|
|
<svg class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
|
</svg>
|
|
</div>
|
|
<span class="text-sm font-semibold text-yellow-600 uppercase tracking-wide">Correlation</span>
|
|
</div>
|
|
<h3 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">Seamless logs & metrics correlation</h3>
|
|
<p class="mt-4 text-lg text-gray-600">Jump from a trace to the exact log lines and metrics that explain what happened. Full correlation across all your telemetry data in one click.</p>
|
|
<ul class="mt-6 space-y-3">
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" 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>
|
|
One-click log correlation
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" 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>
|
|
Metrics context in spans
|
|
</li>
|
|
<li class="flex items-center gap-3 text-gray-600">
|
|
<svg class="h-5 w-5 text-indigo-500 flex-shrink-0" 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>
|
|
Unified observability
|
|
</li>
|
|
</ul>
|
|
<a href="/accounts/register" class="inline-flex items-center gap-1.5 px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors mt-8">
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- More Features Section -->
|
|
<div class="relative bg-white py-24 sm:py-32 overflow-hidden">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<!-- Section header -->
|
|
<div class="mx-auto max-w-2xl text-center">
|
|
<div class="inline-flex items-center gap-2 rounded-full bg-yellow-50 px-4 py-1.5 text-sm font-medium text-yellow-700 ring-1 ring-inset ring-yellow-600/20 mb-6">
|
|
<svg class="h-4 w-4 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span class="text-sm font-medium text-yellow-700">Advanced capabilities</span>
|
|
</div>
|
|
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
|
|
Advanced features, built for you
|
|
</h2>
|
|
<p class="mt-6 text-lg leading-8 text-gray-600">
|
|
From sampling to retention, we've built every feature you need for comprehensive distributed tracing.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature cards grid -->
|
|
<div class="mx-auto mt-16 max-w-7xl">
|
|
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
<!-- Card 1: Intelligent Sampling -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-yellow-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-yellow-50 ring-1 ring-yellow-200">
|
|
<svg class="h-6 w-6 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Intelligent Sampling</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Head-based and tail-based sampling to capture important traces while controlling costs. Keep 100% of errors and slow requests.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Powerful Search -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-blue-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 ring-1 ring-blue-200">
|
|
<svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Powerful Search</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Find traces by service, operation, duration, status code, or any custom attribute. Filter and analyze millions of traces in seconds.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: OpenTelemetry Native -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-indigo-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-indigo-50 ring-1 ring-indigo-200">
|
|
<svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="mt-6 text-xl font-semibold text-gray-900">OpenTelemetry Native</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">First-class support for OpenTelemetry. Use the standard SDK and instrumentation libraries for any language or framework.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Custom Attributes -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 ring-1 ring-amber-200">
|
|
<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Custom Attributes</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Add business context to your traces. Tag with user IDs, order IDs, or any custom attributes for powerful filtering and analysis.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 5: Compliance -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-emerald-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-50 ring-1 ring-emerald-200">
|
|
<svg class="h-6 w-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Enterprise Compliance</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">SOC 2/3, ISO, GDPR, HIPAA compliant. Data residency in US or EU. PII redaction for sensitive span attributes.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 6: Data Export -->
|
|
<div class="group relative">
|
|
<div class="relative h-full rounded-2xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:border-pink-200 hover:shadow-lg">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-pink-50 ring-1 ring-pink-200">
|
|
<svg class="h-6 w-6 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="mt-6 text-xl font-semibold text-gray-900">Data Export</h3>
|
|
<p class="mt-4 text-gray-600 leading-relaxed">Export traces to your data warehouse for long-term analysis. You own your data with complete portability and no vendor lock-in.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Notifications Section -->
|
|
<div class="relative overflow-hidden bg-white py-24 sm:py-32">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
|
|
<!-- Content -->
|
|
<div class="relative">
|
|
<p class="text-sm font-medium text-yellow-600 uppercase tracking-wide mb-3">Team Notifications</p>
|
|
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">
|
|
Alerts delivered where your team already works
|
|
</h2>
|
|
<p class="mt-4 text-lg text-gray-600 leading-relaxed">
|
|
Get instant trace notifications in Slack and Microsoft Teams. Investigate latency issues, create incidents, and collaborate without context switching.
|
|
</p>
|
|
|
|
<!-- Integration cards -->
|
|
<div class="mt-10 space-y-3">
|
|
<!-- Slack -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z" fill="#E01E5A"/>
|
|
<path d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z" fill="#36C5F0"/>
|
|
<path d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z" fill="#2EB67D"/>
|
|
<path d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" fill="#ECB22E"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Slack</h3>
|
|
<p class="text-sm text-gray-500">Interactive trace investigation actions</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Microsoft Teams -->
|
|
<div class="flex items-center gap-4 p-4 rounded-xl bg-gray-50 border border-gray-100">
|
|
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white shadow-sm ring-1 ring-gray-200">
|
|
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
|
|
<path d="M20.16 7.8h-4.736c.103.317.159.654.159 1.005v7.029a3.588 3.588 0 01-3.583 3.583h-4.8v.777c0 .998.81 1.806 1.806 1.806h8.339l2.869 1.912a.452.452 0 00.703-.376V21.2h.646c.997 0 1.806-.809 1.806-1.806v-9.788A1.806 1.806 0 0020.16 7.8z" fill="#5059C9"/>
|
|
<circle cx="18.5" cy="4.5" r="2.5" fill="#5059C9"/>
|
|
<path d="M13.5 6H3.806A1.806 1.806 0 002 7.806v9.388c0 .997.81 1.806 1.806 1.806h2.611v3.336a.452.452 0 00.703.376L10.5 20h3a3.5 3.5 0 003.5-3.5v-7A3.5 3.5 0 0013.5 6z" fill="#7B83EB"/>
|
|
<circle cx="10" cy="3" r="3" fill="#7B83EB"/>
|
|
<path d="M6 11h6M6 14h4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="text-sm font-semibold text-gray-900">Microsoft Teams</h3>
|
|
<p class="text-sm text-gray-500">Native adaptive cards integration</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features list -->
|
|
<div class="mt-8 grid grid-cols-2 gap-4">
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-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>
|
|
Real-time delivery
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-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>
|
|
Latency alerts
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-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>
|
|
Rich formatting
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-gray-600">
|
|
<svg class="h-4 w-4 text-green-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>
|
|
Action buttons
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slack Demo -->
|
|
<div class="relative" id="traces-slack-demo">
|
|
<!-- Decorative background elements -->
|
|
<div class="absolute -inset-4 bg-gray-100/50 rounded-3xl blur-2xl"></div>
|
|
|
|
<!-- Slack Window -->
|
|
<div class="relative bg-[#1a1d21] rounded-2xl shadow-2xl overflow-hidden max-w-md mx-auto ring-1 ring-white/10">
|
|
<!-- Slack window header -->
|
|
<div class="bg-[#0f1114] px-4 py-3 flex items-center justify-between border-b border-white/5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex gap-2">
|
|
<div class="w-3 h-3 rounded-full bg-[#ff5f57] shadow-sm shadow-red-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#febc2e] shadow-sm shadow-yellow-500/50"></div>
|
|
<div class="w-3 h-3 rounded-full bg-[#28c840] shadow-sm shadow-green-500/50"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 bg-[#1a1d21] px-3 py-1 rounded-md">
|
|
<svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
|
|
</svg>
|
|
<span class="text-white text-sm font-semibold">traces</span>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-7 h-7 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center ring-2 ring-green-500 ring-offset-1 ring-offset-[#0f1114]">
|
|
<span class="text-white text-xs font-bold">T</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages area -->
|
|
<div class="bg-[#1a1d21] px-4 py-4" id="traces-slack-messages">
|
|
<!-- Original trace alert message -->
|
|
<div class="group relative">
|
|
<div class="flex items-start gap-3">
|
|
<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-10 h-10 rounded-lg flex-shrink-0 shadow-lg" />
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-white text-sm hover:underline cursor-pointer">OneUptime</span>
|
|
<span class="bg-[#4a3f7a] text-purple-200 text-[10px] px-1.5 py-0.5 rounded font-medium">APP</span>
|
|
<span class="text-gray-500 text-xs">11:42 AM</span>
|
|
</div>
|
|
|
|
<!-- Trace alert card -->
|
|
<div class="mt-3 bg-[#0f1114] rounded-lg overflow-hidden ring-1 ring-white/5">
|
|
<div class="h-1 bg-gradient-to-r from-yellow-500 to-amber-500"></div>
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-medium">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
|
|
Slow Trace
|
|
</span>
|
|
</div>
|
|
<h4 class="text-white font-semibold mt-2 font-mono text-sm">GET /api/orders</h4>
|
|
<p class="text-gray-400 text-sm mt-1">p99 latency: 4.2s (threshold: 2s)</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 mt-3 pt-3 border-t border-white/5">
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
|
</svg>
|
|
order-service
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Detected 2m ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="mt-3 flex flex-wrap gap-2" id="traces-slack-buttons">
|
|
<button onclick="tracesInvestigate()" id="traces-btn-investigate" class="inline-flex items-center gap-2 px-3 py-2 bg-[#007a5a] hover:bg-[#148567] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-green-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
Investigate
|
|
</button>
|
|
<button onclick="tracesCreateIncident()" id="traces-btn-incident" class="inline-flex items-center gap-2 px-3 py-2 bg-[#1264a3] hover:bg-[#1d74b8] rounded-md text-xs font-semibold text-white transition-all shadow-lg shadow-blue-900/20">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
Create Incident
|
|
</button>
|
|
<button onclick="tracesResolve()" id="traces-btn-resolve" class="inline-flex items-center gap-2 px-3 py-2 bg-[#2e3136] hover:bg-[#3a3d42] border border-gray-600 rounded-md text-xs font-semibold text-white transition-all">
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
Resolve
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Reactions -->
|
|
<div class="mt-3 flex items-center gap-2" id="traces-slack-reactions">
|
|
<div class="inline-flex items-center gap-1 px-2 py-1 bg-[#2e3136] rounded-full text-xs border border-gray-600 hover:border-gray-500 cursor-pointer transition-colors">
|
|
<span>👀</span>
|
|
<span class="text-gray-300">2</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thread replies container -->
|
|
<div id="traces-slack-thread" class="mt-4 space-y-3"></div>
|
|
|
|
<!-- Thread count indicator -->
|
|
<div id="traces-thread-indicator" class="hidden mt-3 flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 cursor-pointer">
|
|
<div class="flex -space-x-1" id="traces-thread-avatars"></div>
|
|
<span id="traces-thread-count"></span>
|
|
<span class="text-gray-500">Last reply 1m ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message input -->
|
|
<div class="bg-[#1a1d21] px-4 pb-4">
|
|
<div class="bg-[#2e3136] rounded-lg px-4 py-3 flex items-center gap-3 ring-1 ring-white/5">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
<span class="text-gray-500 text-sm">Message #traces</span>
|
|
<div class="ml-auto flex items-center gap-2">
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<svg class="w-5 h-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
let tracesInvestigateClicked = false;
|
|
let tracesIncidentClicked = false;
|
|
let tracesResolveClicked = false;
|
|
let tracesReplyCount = 0;
|
|
const tracesAvatars = [];
|
|
|
|
function updateTracesThreadIndicator() {
|
|
const indicator = document.getElementById('traces-thread-indicator');
|
|
const countEl = document.getElementById('traces-thread-count');
|
|
const avatarsEl = document.getElementById('traces-thread-avatars');
|
|
|
|
if (tracesReplyCount > 0) {
|
|
indicator.classList.remove('hidden');
|
|
indicator.classList.add('flex');
|
|
countEl.textContent = tracesReplyCount + (tracesReplyCount === 1 ? ' reply' : ' replies');
|
|
avatarsEl.innerHTML = tracesAvatars.slice(-3).map(a =>
|
|
a.isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="O" class="w-5 h-5 rounded-full ring-2 ring-[#1a1d21]" />`
|
|
: `<div class="w-5 h-5 rounded-full ${a.bg} flex items-center justify-center ring-2 ring-[#1a1d21]">
|
|
<span class="text-white text-[8px] font-bold">${a.initial}</span>
|
|
</div>`
|
|
).join('');
|
|
}
|
|
}
|
|
|
|
function addTracesReaction(emoji) {
|
|
const reactions = document.getElementById('traces-slack-reactions');
|
|
const newReaction = document.createElement('div');
|
|
newReaction.className = 'inline-flex items-center gap-1 px-2 py-1 bg-blue-500/20 rounded-full text-xs border border-blue-500/50 cursor-pointer transition-colors animate-bounce-in';
|
|
newReaction.innerHTML = `<span>${emoji}</span><span class="text-blue-300">1</span>`;
|
|
newReaction.style.animation = 'bounceIn 0.3s ease-out';
|
|
reactions.appendChild(newReaction);
|
|
}
|
|
|
|
function addTracesThreadReply(avatar, name, time, message, isBot) {
|
|
const thread = document.getElementById('traces-slack-thread');
|
|
const reply = document.createElement('div');
|
|
reply.className = 'flex items-start gap-2.5 pl-3 border-l-2 border-yellow-500/30';
|
|
reply.style.animation = 'fadeSlideIn 0.3s ease-out';
|
|
|
|
const avatarClass = avatar;
|
|
const initial = name.charAt(0);
|
|
|
|
if (!isBot) {
|
|
tracesAvatars.push({ bg: `bg-gradient-to-br ${avatar}`, initial: name.charAt(0) });
|
|
} else {
|
|
tracesAvatars.push({ bg: '', initial: 'O', isBot: true });
|
|
}
|
|
tracesReplyCount++;
|
|
updateTracesThreadIndicator();
|
|
|
|
const avatarHtml = isBot
|
|
? `<img src="/img/OneUptimePNG/1.png" alt="OneUptime" class="w-8 h-8 rounded-lg flex-shrink-0 shadow-md" />`
|
|
: `<div class="w-8 h-8 rounded-lg bg-gradient-to-br ${avatarClass} flex items-center justify-center flex-shrink-0 shadow-md"><span class="text-white text-xs font-bold">${initial}</span></div>`;
|
|
|
|
reply.innerHTML = `
|
|
${avatarHtml}
|
|
<div class="flex-1 bg-[#0f1114] rounded-lg p-3 ring-1 ring-white/5">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-semibold text-white text-sm">${name}</span>
|
|
${isBot ? '<span class="bg-[#4a3f7a] text-purple-200 text-[9px] px-1 py-0.5 rounded font-medium">APP</span>' : ''}
|
|
<span class="text-gray-500 text-[11px]">${time}</span>
|
|
</div>
|
|
<p class="text-gray-300 text-sm mt-1 leading-relaxed">${message}</p>
|
|
</div>
|
|
`;
|
|
thread.appendChild(reply);
|
|
}
|
|
|
|
window.tracesInvestigate = function() {
|
|
if (tracesInvestigateClicked) return;
|
|
tracesInvestigateClicked = true;
|
|
|
|
const btn = document.getElementById('traces-btn-investigate');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Analyzing...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" 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><span>Investigated</span>';
|
|
btn.classList.remove('bg-[#007a5a]', 'hover:bg-[#148567]', 'shadow-green-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-green-500/50', 'text-green-400');
|
|
|
|
addTracesReaction('🔍');
|
|
addTracesThreadReply('from-yellow-400 to-yellow-600', 'OneUptime AI', '11:42 AM', '🔍 <strong class="text-white">Root cause identified:</strong><br/><span class="text-gray-400">db-service: Slow query detected<br/><code class="text-amber-400">SELECT * FROM orders WHERE...</code> (3.8s)<br/>→ Missing index on <code class="text-amber-400">customer_id</code> column</span>', true);
|
|
}, 800);
|
|
};
|
|
|
|
window.tracesCreateIncident = function() {
|
|
if (tracesIncidentClicked) return;
|
|
tracesIncidentClicked = true;
|
|
|
|
const btn = document.getElementById('traces-btn-incident');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Creating...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" 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><span>Created</span>';
|
|
btn.classList.remove('bg-[#1264a3]', 'hover:bg-[#1d74b8]', 'shadow-blue-900/20');
|
|
btn.classList.add('bg-[#2e3136]', 'border', 'border-blue-500/50', 'text-blue-400');
|
|
|
|
addTracesReaction('🚨');
|
|
addTracesThreadReply('from-green-400 to-green-600', 'OneUptime', '11:44 AM', '🎫 Incident <strong class="text-white">INC-2847</strong> created<br/><span class="text-gray-400">→ Linked trace: trace-8f3a2b1c<br/>→ Assigned to: Backend Team</span>', true);
|
|
}, 800);
|
|
};
|
|
|
|
window.tracesResolve = function() {
|
|
if (tracesResolveClicked) return;
|
|
tracesResolveClicked = true;
|
|
|
|
const btn = document.getElementById('traces-btn-resolve');
|
|
btn.disabled = true;
|
|
btn.classList.add('opacity-70');
|
|
btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg><span>Resolving...</span>';
|
|
|
|
setTimeout(() => {
|
|
btn.innerHTML = '<svg class="w-4 h-4" 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><span>Resolved</span>';
|
|
btn.classList.remove('bg-[#2e3136]', 'border-gray-600', 'hover:bg-[#3a3d42]');
|
|
btn.classList.add('bg-green-600/20', 'border', 'border-green-500/50', 'text-green-400');
|
|
|
|
addTracesReaction('🎉');
|
|
addTracesThreadReply('from-amber-400 to-amber-600', 'David Kim', '11:58 AM', 'Added index on customer_id column. Query now runs in 45ms. Deploying migration.', false);
|
|
|
|
setTimeout(() => {
|
|
addTracesThreadReply('from-green-400 to-green-600', 'OneUptime', '11:58 AM', '✅ Latency alert resolved<br/><span class="text-gray-400">p99 latency back to normal: 180ms</span>', true);
|
|
}, 1000);
|
|
}, 800);
|
|
};
|
|
})();
|
|
</script>
|
|
</div>
|
|
</div>
|
|
|
|
<%- include('./Partials/enterprise-ready') -%>
|
|
<%- include('features-table') -%>
|
|
<%- include('cta') -%>
|
|
</main>
|
|
|
|
<%- include('footer') -%>
|
|
<%- include('./Partials/video-script') -%>
|
|
|
|
<style>
|
|
@keyframes fadeSlideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes bounceIn {
|
|
0% { opacity: 0; transform: scale(0.8); }
|
|
50% { transform: scale(1.1); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Grid glow effect for traces hero section
|
|
(function() {
|
|
const heroSection = document.getElementById('traces-hero-section');
|
|
const gridGlow = document.getElementById('traces-grid-glow');
|
|
|
|
if (heroSection && gridGlow) {
|
|
heroSection.addEventListener('mousemove', (e) => {
|
|
const rect = heroSection.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
|
|
gridGlow.style.setProperty('--mouse-x', x + '%');
|
|
gridGlow.style.setProperty('--mouse-y', y + '%');
|
|
gridGlow.style.opacity = '1';
|
|
});
|
|
|
|
heroSection.addEventListener('mouseleave', () => {
|
|
gridGlow.style.opacity = '0';
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|