From 3769e0d1a58092208c050451f57001d26c88e91e Mon Sep 17 00:00:00 2001 From: Nawaz Dhandala Date: Mon, 29 Dec 2025 22:13:09 +0000 Subject: [PATCH] Add metrics and traces pages with detailed features and branding updates - 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. --- Home/Routes.ts | 56 +++++ Home/Views/Partials/hero-cards/dashboards.ejs | 2 +- Home/Views/Partials/hero-cards/exceptions.ejs | 2 +- Home/Views/Partials/hero-cards/incidents.ejs | 2 +- Home/Views/Partials/hero-cards/metrics.ejs | 2 +- Home/Views/Partials/hero-cards/monitoring.ejs | 2 +- .../Views/Partials/hero-cards/status-page.ejs | 2 +- Home/Views/Partials/hero-cards/traces.ejs | 2 +- Home/Views/dashboards.ejs | 209 +++++++++++++++++ Home/Views/exceptions.ejs | 210 ++++++++++++++++++ Home/Views/metrics.ejs | 209 +++++++++++++++++ Home/Views/traces.ejs | 209 +++++++++++++++++ Internal/Docs/ProductBranding.md | 8 +- 13 files changed, 904 insertions(+), 11 deletions(-) create mode 100644 Home/Views/dashboards.ejs create mode 100644 Home/Views/exceptions.ejs create mode 100644 Home/Views/metrics.ejs create mode 100644 Home/Views/traces.ejs diff --git a/Home/Routes.ts b/Home/Routes.ts index b44704f932..d2f914b628 100755 --- a/Home/Routes.ts +++ b/Home/Routes.ts @@ -1192,6 +1192,62 @@ const HomeFeatureSet: FeatureSet = { }, ); + app.get( + "/product/metrics", + (_req: ExpressRequest, res: ExpressResponse) => { + const seo: PageSEOData & { fullCanonicalUrl: string } = getSEOForPath( + "/product/metrics", + res.locals["homeUrl"] as string, + ); + res.render(`${ViewsPath}/metrics`, { + enableGoogleTagManager: IsBillingEnabled, + seo, + }); + }, + ); + + app.get( + "/product/traces", + (_req: ExpressRequest, res: ExpressResponse) => { + const seo: PageSEOData & { fullCanonicalUrl: string } = getSEOForPath( + "/product/traces", + res.locals["homeUrl"] as string, + ); + res.render(`${ViewsPath}/traces`, { + enableGoogleTagManager: IsBillingEnabled, + seo, + }); + }, + ); + + app.get( + "/product/exceptions", + (_req: ExpressRequest, res: ExpressResponse) => { + const seo: PageSEOData & { fullCanonicalUrl: string } = getSEOForPath( + "/product/exceptions", + res.locals["homeUrl"] as string, + ); + res.render(`${ViewsPath}/exceptions`, { + enableGoogleTagManager: IsBillingEnabled, + seo, + }); + }, + ); + + app.get( + "/product/dashboards", + (_req: ExpressRequest, res: ExpressResponse) => { + const seo: PageSEOData & { fullCanonicalUrl: string } = getSEOForPath( + "/product/dashboards", + res.locals["homeUrl"] as string, + ); + res.render(`${ViewsPath}/dashboards`, { + enableGoogleTagManager: IsBillingEnabled, + seo, + }); + }, + ); + app.get( "/incident-management", (_req: ExpressRequest, res: ExpressResponse) => { diff --git a/Home/Views/Partials/hero-cards/dashboards.ejs b/Home/Views/Partials/hero-cards/dashboards.ejs index cd606667a6..acadd603b9 100644 --- a/Home/Views/Partials/hero-cards/dashboards.ejs +++ b/Home/Views/Partials/hero-cards/dashboards.ejs @@ -1,6 +1,6 @@
- +
diff --git a/Home/Views/Partials/hero-cards/exceptions.ejs b/Home/Views/Partials/hero-cards/exceptions.ejs index dd0b1972b8..13124d58c0 100644 --- a/Home/Views/Partials/hero-cards/exceptions.ejs +++ b/Home/Views/Partials/hero-cards/exceptions.ejs @@ -1,6 +1,6 @@
- +
diff --git a/Home/Views/Partials/hero-cards/incidents.ejs b/Home/Views/Partials/hero-cards/incidents.ejs index 76e4890b8c..33beb5c8db 100644 --- a/Home/Views/Partials/hero-cards/incidents.ejs +++ b/Home/Views/Partials/hero-cards/incidents.ejs @@ -1,6 +1,6 @@
- +
diff --git a/Home/Views/Partials/hero-cards/metrics.ejs b/Home/Views/Partials/hero-cards/metrics.ejs index aade6a4f9e..fd77477d11 100644 --- a/Home/Views/Partials/hero-cards/metrics.ejs +++ b/Home/Views/Partials/hero-cards/metrics.ejs @@ -1,6 +1,6 @@
- +
diff --git a/Home/Views/Partials/hero-cards/monitoring.ejs b/Home/Views/Partials/hero-cards/monitoring.ejs index eae3d92e5b..836b3cdd45 100644 --- a/Home/Views/Partials/hero-cards/monitoring.ejs +++ b/Home/Views/Partials/hero-cards/monitoring.ejs @@ -1,6 +1,6 @@
- +
diff --git a/Home/Views/Partials/hero-cards/status-page.ejs b/Home/Views/Partials/hero-cards/status-page.ejs index 30798ca169..a688cd3048 100644 --- a/Home/Views/Partials/hero-cards/status-page.ejs +++ b/Home/Views/Partials/hero-cards/status-page.ejs @@ -1,6 +1,6 @@
- +
diff --git a/Home/Views/Partials/hero-cards/traces.ejs b/Home/Views/Partials/hero-cards/traces.ejs index 6e0f5ee0c4..1830d80c7a 100644 --- a/Home/Views/Partials/hero-cards/traces.ejs +++ b/Home/Views/Partials/hero-cards/traces.ejs @@ -1,6 +1,6 @@
- +
diff --git a/Home/Views/dashboards.ejs b/Home/Views/dashboards.ejs new file mode 100644 index 0000000000..296b9b3e84 --- /dev/null +++ b/Home/Views/dashboards.ejs @@ -0,0 +1,209 @@ + + + + + + + OneUptime | Dashboards - Visualize All Your Data + + <%- include('head', { + enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false +}) -%> + + + + <%- include('nav') -%> + +
+ +
+ +
+
+
+
+
+ + +
+ +
+
+
+ +
+ + + + + Custom Dashboards +
+ +

+ Visualize all your data +

+

+ Build beautiful, real-time dashboards that bring together metrics, logs, traces, and status information in one unified view. +

+ + +
+
+ + + + Drag & drop builder +
+
+ + + + Real-time updates +
+
+ + + + Multiple data sources +
+
+ + + + Shareable links +
+
+ +
+ + Get started + + + + + + Request Demo + + +
+
+ + +
+
+
+
+ OneUptime custom dashboard builder +
+
+
+
+
+
+ + <%- include('logo-roll') -%> + + +
+
+
+
+
+ +
+
+
+ + + + Dashboard Builder +
+

+ Build dashboards your way +

+

+ Create custom dashboards with powerful widgets. Combine data from any source and share insights across your organization. +

+
+ + +
+ +
+
+ + + +
+

Drag & Drop Builder

+

Easily create dashboards with our intuitive drag-and-drop interface. No coding required.

+
+ + +
+
+ + + +
+

Rich Visualizations

+

Choose from line charts, bar graphs, pie charts, tables, gauges, and more visualization types.

+
+ + +
+
+ + + +
+

Real-time Updates

+

Dashboards update in real-time as new data comes in. Always see the latest state of your systems.

+
+ + +
+
+ + + +
+

Multiple Data Sources

+

Combine metrics, logs, traces, and status data in a single dashboard. One view for everything.

+
+ + +
+
+ + + +
+

Easy Sharing

+

Share dashboards with your team or create public links. Control access with fine-grained permissions.

+
+ + +
+
+ + + +
+

Templates

+

Start from pre-built templates for common use cases. Customize them to fit your specific needs.

+
+
+
+
+ + <%- include('cta') -%> +
+ + <%- include('footer') -%> + + + diff --git a/Home/Views/exceptions.ejs b/Home/Views/exceptions.ejs new file mode 100644 index 0000000000..34c8380b6b --- /dev/null +++ b/Home/Views/exceptions.ejs @@ -0,0 +1,210 @@ + + + + + + + OneUptime | Exception Tracking - Catch and Fix Bugs Early + + <%- include('head', { + enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false +}) -%> + + + + <%- include('nav') -%> + +
+ +
+ +
+
+
+
+
+ + +
+ +
+
+
+ +
+ + + + + Error Tracking +
+ +

+ Catch and fix bugs early +

+

+ Track exceptions across your entire stack. Get detailed stack traces, context, and intelligent grouping to fix issues faster. +

+ + +
+
+ + + + Stack traces +
+
+ + + + Smart grouping +
+
+ + + + Release tracking +
+
+ + + + Real-time alerts +
+
+ +
+ + Get started + + + + + + Request Demo + + +
+
+ + +
+
+
+
+ OneUptime Exception tracking dashboard +
+
+
+
+
+
+ + <%- include('logo-roll') -%> + + +
+
+
+
+
+ +
+
+
+ + + + Exception Tracking +
+

+ Never miss a critical error +

+

+ Get notified the moment errors occur. Understand the impact, identify the root cause, and deploy fixes with confidence. +

+
+ + +
+ +
+
+ + + +
+

Full Stack Traces

+

Get complete stack traces with source code context. See exactly where errors occur and why.

+
+ + +
+
+ + + +
+

Intelligent Grouping

+

Similar errors are automatically grouped together. Focus on unique issues, not duplicates.

+
+ + +
+
+ + + + +
+

Release Tracking

+

Track which releases introduced new errors. Quickly identify and roll back problematic deployments.

+
+ + +
+
+ + + +
+

Real-time Alerts

+

Get notified instantly when new errors occur or error rates spike. Never be caught off guard.

+
+ + +
+
+ + + +
+

User Context

+

See which users are affected by errors. Understand impact and prioritize fixes accordingly.

+
+ + +
+
+ + + +
+

AI-Powered Insights

+

Get AI-generated root cause analysis and fix suggestions. Resolve issues faster with intelligent assistance.

+
+
+
+
+ + <%- include('cta') -%> +
+ + <%- include('footer') -%> + + + diff --git a/Home/Views/metrics.ejs b/Home/Views/metrics.ejs new file mode 100644 index 0000000000..3fa7989933 --- /dev/null +++ b/Home/Views/metrics.ejs @@ -0,0 +1,209 @@ + + + + + + + OneUptime | Metrics - Performance Insights & Real-time Monitoring + + <%- include('head', { + enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false +}) -%> + + + + <%- include('nav') -%> + +
+ +
+ +
+
+
+
+
+ + +
+ +
+
+
+ +
+ + + + + OpenTelemetry Native +
+ +

+ Real-time performance insights +

+

+ Collect, visualize, and analyze metrics from any source. Monitor application performance, infrastructure health, and custom business metrics. +

+ + +
+
+ + + + Custom dashboards +
+
+ + + + Anomaly detection +
+
+ + + + Smart alerting +
+
+ + + + PromQL compatible +
+
+ +
+ + Get started + + + + + + Request Demo + + +
+
+ + +
+
+
+
+ OneUptime Metrics dashboard displaying real-time performance data +
+
+
+
+
+
+ + <%- include('logo-roll') -%> + + +
+
+
+
+
+ +
+
+
+ + + + Powerful Metrics +
+

+ Everything you need for metrics monitoring +

+

+ From infrastructure to application metrics, OneUptime provides comprehensive visibility into your entire stack. +

+
+ + +
+ +
+
+ + + +
+

Real-time Visualization

+

Live charts and graphs that update in real-time, giving you instant visibility into your system's performance.

+
+ + +
+
+ + + +
+

Intelligent Alerting

+

Set up smart alerts based on thresholds, anomalies, or custom conditions. Get notified before issues impact users.

+
+ + +
+
+ + + +
+

Custom Retention

+

Configure data retention per metric type. Keep critical data longer while optimizing storage costs.

+
+ + +
+
+ + + +
+

Any Data Source

+

Ingest metrics from OpenTelemetry, Prometheus, StatsD, and custom sources. One platform for all your metrics.

+
+ + +
+
+ + + +
+

Trend Analysis

+

Identify patterns and trends in your metrics over time. Make data-driven decisions with historical insights.

+
+ + +
+
+ + + +
+

Custom Dashboards

+

Build custom dashboards with drag-and-drop widgets. Create views tailored to your team's needs.

+
+
+
+
+ + <%- include('cta') -%> +
+ + <%- include('footer') -%> + + + diff --git a/Home/Views/traces.ejs b/Home/Views/traces.ejs new file mode 100644 index 0000000000..f110329a65 --- /dev/null +++ b/Home/Views/traces.ejs @@ -0,0 +1,209 @@ + + + + + + + OneUptime | Distributed Tracing - End-to-End Request Visibility + + <%- include('head', { + enableGoogleTagManager: typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false +}) -%> + + + + <%- include('nav') -%> + +
+ +
+ +
+
+
+
+
+ + +
+ +
+
+
+ +
+ + + + + OpenTelemetry Native +
+ +

+ End-to-end distributed tracing +

+

+ Follow requests across services, identify bottlenecks, and debug issues faster with comprehensive distributed tracing. +

+ + +
+
+ + + + Span visualization +
+
+ + + + Service maps +
+
+ + + + Latency analysis +
+
+ + + + Error correlation +
+
+ +
+ + Get started + + + + + + Request Demo + + +
+
+ + +
+
+
+
+ OneUptime Traces showing distributed request flow +
+
+
+
+
+
+ + <%- include('logo-roll') -%> + + +
+
+
+
+
+ +
+
+
+ + + + Distributed Tracing +
+

+ See the complete request journey +

+

+ Understand how requests flow through your distributed system. Identify slow services, failed calls, and optimization opportunities. +

+
+ + +
+ +
+
+ + + +
+

Service Maps

+

Visualize dependencies between services. Understand your architecture and identify critical paths at a glance.

+
+ + +
+
+ + + +
+

Latency Breakdown

+

See exactly where time is spent in each request. Drill down into spans to find performance bottlenecks.

+
+ + +
+
+ + + +
+

Error Tracking

+

Instantly identify which service caused an error. Get full context with stack traces and span attributes.

+
+ + +
+
+ + + +
+

Powerful Search

+

Find traces by service, operation, duration, status, or any custom attribute. Filter and analyze at scale.

+
+ + +
+
+ + + +
+

Cross-Service Context

+

Automatically propagate trace context across services. See the full picture without manual correlation.

+
+ + +
+
+ + + +
+

Logs & Metrics Correlation

+

Link traces with related logs and metrics. Jump from a slow trace to the exact log lines that explain why.

+
+
+
+
+ + <%- include('cta') -%> +
+ + <%- include('footer') -%> + + + diff --git a/Internal/Docs/ProductBranding.md b/Internal/Docs/ProductBranding.md index 2783ddb7d1..47fd393835 100644 --- a/Internal/Docs/ProductBranding.md +++ b/Internal/Docs/ProductBranding.md @@ -86,7 +86,7 @@ This document details the colors, icons, and product information used in the hom - **Color:** Purple - **Tailwind Classes:** `bg-purple-50`, `ring-purple-200`, `text-purple-600` - **Glow Class:** `hero-glow-purple` -- **Link:** `/product/apm` +- **Link:** `/product/metrics` - **Icon:** Line chart / heartbeat ```html @@ -99,7 +99,7 @@ This document details the colors, icons, and product information used in the hom - **Color:** Yellow - **Tailwind Classes:** `bg-yellow-50`, `ring-yellow-200`, `text-yellow-600` - **Glow Class:** `hero-glow-yellow` -- **Link:** `/product/apm` +- **Link:** `/product/traces` - **Icon:** Waterfall / span diagram ```html @@ -114,7 +114,7 @@ This document details the colors, icons, and product information used in the hom - **Color:** Orange - **Tailwind Classes:** `bg-orange-50`, `ring-orange-200`, `text-orange-600` - **Glow Class:** `hero-glow-rose` (uses rose glow effect) -- **Link:** `/product/apm` +- **Link:** `/product/exceptions` - **Icon:** Bug ```html @@ -142,7 +142,7 @@ This document details the colors, icons, and product information used in the hom - **Color:** Indigo - **Tailwind Classes:** `bg-indigo-50`, `ring-indigo-200`, `text-indigo-600` - **Glow Class:** `hero-glow-indigo` -- **Link:** `/product/coming-soon` +- **Link:** `/product/dashboards` - **Icon:** Pie chart ```html