Sign inSign up

telemetryflow/telemetryflow-landing

By telemetryflow

Updated about 1 month ago

TelemetryFlow Landing Zone (Official Website)

Image
Developer tools
Monitoring & observability
0

2.9K

telemetryflow/telemetryflow-landing repository overview

TelemetryFlow Logo
TelemetryFlow-Website
(TelemetryFlow Official Website & Demo)

Version License Node pnpm TypeScript Vue Vite ECharts


TelemetryFlow-Website

TelemetryFlow Official Website & Demo - The public-facing website and live demo dashboard for the TelemetryFlow Platform, a Community Enterprise Observability Platform (CEOP) for visualizing Metrics, Logs, Traces, and Exemplars.

What's Inside

This repository contains everything needed to run the TelemetryFlow online presence:

ComponentDomainDescription
Landing Pagetelemetryflow.idProfessional website with feature showcase, architecture diagrams, and demo access
Demo Dashboarddemo.telemetryflow.idLive interactive observability dashboard pre-loaded with sample data
Ansible Automation--Infrastructure-as-code for deploying to remote servers
Docker Compose--Multi-environment container orchestration (local, demo, production)

Platform Features

Observability Dashboard
  • Metrics Explorer - Query and visualize metrics with time series charts
  • Log Viewer - Real-time log streaming with filtering and search
  • Trace Viewer - Distributed tracing with waterfall and flame graph visualization
  • Exemplars - Metric-to-trace correlation links
  • Dashboard Builder - Create custom dashboards with drag-and-drop widgets
  • Alerting - Configure and manage alert rules
  • Correlation Engine - Cross-signal correlation for root cause analysis
Chart Features
  • Multiple chart types - Line, Area, and Bar chart toggles on all visualizations
  • Data points - Interactive data points on line/area charts
  • Zoom functionality - Expand any chart to full-screen modal view
  • Chart synchronization - Linked zooming across related charts
  • Dark/Light mode - Full theme support
Trace Analysis
  • Waterfall View - Hierarchical span timeline with service breakdown
  • Flame Graph - Aggregated latency visualization
  • Node Graph - Service dependency topology with multiple layouts
  • Related Logs - Logs correlated to traces
  • Span Details - Detailed attributes, events, and links
Landing Page
  • Modern Design - Responsive layout with dark/light theme support
  • Interactive Diagrams - Mermaid.js architecture visualization with auto theme-switching
  • Feature Showcase - Comprehensive overview of observability capabilities
  • Live Demo Access - Direct link to demo dashboard with credentials
  • Mobile-Optimized - Fully responsive across all devices

Architecture

flowchart TB
    subgraph Internet["Internet"]
        User["User Browser"]
    end

    subgraph Server["Remote Host (AWS Lightsail)"]
        subgraph Nginx["Nginx Reverse Proxy"]
            R1[":80 / :443"]
        end

        subgraph Landing["tfo_landing_net"]
            LP["tfo-landing<br/>telemetryflow.id"]
        end

        subgraph Demo["tfo_viz_demo_net"]
            VD["tfo-viz-demo<br/>demo.telemetryflow.id"]
        end

        R1 --> LP
        R1 --> VD
    end

    User -->|HTTPS| R1

Tech Stack

LayerTechnologyPurpose
FrontendVue 3 + TypeScriptDashboard SPA
ChartsECharts 5.xData visualization
UINaive UI + UnoCSSComponent library & CSS
StatePiniaState management
BuildVite 6.x + TurborepoFast builds & monorepo
BackendNestJSAPI server (platform)
StorageClickHouse + PostgreSQLTelemetry & config data
CacheRedis + BullMQCaching & job queues
InfraDocker Compose + NginxContainer orchestration
SSLCertbot + Cloudflare DNSLet's Encrypt wildcard certs
DeployAnsibleRemote deployment automation

Getting Started

Prerequisites
  • Node.js >= 20.0.0
  • pnpm >= 9.0.0
  • Docker (for containerized deployments)
Quick Start
# Install dependencies
pnpm install

# Start development server (with mock data)
pnpm dev

The dashboard will be available at http://localhost:3100

Build
# Build for production
pnpm build

# Preview production build
pnpm preview

# Type checking
pnpm type-check
Docker
# Run with Docker Compose (mock mode)
docker compose up -d

# Run local environment (landing + dashboard)
docker compose -f docker-compose.local.yml up -d

# Run full demo (with nginx + SSL)
docker compose -f docker-compose.demo.yml up -d
Default Access

The demo dashboard uses basic authentication:

VariableDefaultDescription
TELEMETRYFLOW_VIZ_ADMINadminAdmin username
TELEMETRYFLOW_VIZ_PASSWORDAdmin@654123Admin password

Note: Change these for production deployments.

Production Deployment

TelemetryFlow-Website supports multi-domain deployment:

  • Landing Page: telemetryflow.id
  • Dashboard Demo: demo.telemetryflow.id
  • API/Future subdomains: Covered by wildcard certificate
cd ansible

# Test connectivity
ansible-playbook playbooks/ping-all.yml

# Deploy full stack (Nginx + Certbot + Landing + Viz)
ansible-playbook playbooks/deploy-stack.yml

# Or via site.yml with tags
ansible-playbook playbooks/site.yml --tags stack

# Deploy individual components
ansible-playbook playbooks/deploy-website.yml
ansible-playbook playbooks/deploy-demo.yml

See Ansible Deployment Guide for full details.

Prerequisites: Domain using Cloudflare DNS, Cloudflare API token with DNS edit permission.

# 1. Configure Cloudflare API credentials
nano config/certbot/cloudflare.ini

# 2. Switch to HTTP-only mode for initial setup
./scripts/switch-nginx-mode.sh init
docker compose -f docker-compose.demo.yml restart nginx

# 3. Generate wildcard SSL certificate
docker compose -f docker-compose.demo.yml run --rm certbot certonly \
  --dns-cloudflare \
  --dns-cloudflare-credentials /etc/letsencrypt/cloudflare.ini \
  --email [email protected] \
  --agree-tos --no-eff-email \
  -d telemetryflow.id \
  -d '*.telemetryflow.id'

# 4. Switch to HTTPS mode and restart
./scripts/switch-nginx-mode.sh https
docker compose -f docker-compose.demo.yml restart nginx

See Wildcard SSL Setup for details.

Individual Domain Certificates (Alternative)
docker compose -f docker-compose.demo.yml run --rm certbot certonly \
  --webroot --webroot-path=/var/www/certbot \
  --email [email protected] \
  --agree-tos --no-eff-email \
  -d telemetryflow.id -d www.telemetryflow.id

docker compose -f docker-compose.demo.yml run --rm certbot certonly \
  --webroot --webroot-path=/var/www/certbot \
  --email [email protected] \
  --agree-tos --no-eff-email \
  -d demo.telemetryflow.id

See SSL Setup Guide for details.

Configuration

VariableDefaultDescription
TELEMETRYFLOW_API_URLhttp://localhost:4318TFO-Collector HTTP endpoint
TELEMETRYFLOW_GRPC_URLhttp://localhost:4317TFO-Collector gRPC endpoint
TELEMETRYFLOW_WS_URLws://localhost:4319WebSocket endpoint for streaming
TELEMETRYFLOW_USE_MOCKtrueEnable mock data for development
TELEMETRYFLOW_REFRESH_INTERVAL5000Data refresh interval (ms)

See .env.example for the full list of configuration options.

Project Structure

telemetryflow-website/
├── ansible/             # Ansible deployment automation
│   ├── playbooks/       # Site, deploy, install playbooks
│   ├── roles/           # docker-install, tfo-stack, tfo-landing, tfo-viz-demo, net-tools
│   ├── inventory.yml    # Host inventory
│   └── group_vars/      # Group & host variables
├── config/              # Infrastructure configuration
│   ├── nginx/           # Nginx reverse proxy configs
│   └── certbot/         # SSL certificate management
├── docs/                # Documentation (organized by topic)
│   ├── guides/          # How-to guides
│   ├── deployment/      # Deployment & infrastructure docs
│   ├── reference/       # Technical reference
│   └── release-notes/   # Release notes
├── frontend/            # Vue 3 frontend application
├── scripts/             # Build & utility scripts
├── website/             # Landing page static site
├── docker-compose.yml          # Main Docker Compose
├── docker-compose.demo.yml     # Demo (build from source)
├── docker-compose.demo-image.yml # Demo (pre-built images)
├── docker-compose.local.yml    # Local development
├── Dockerfile.frontend         # Frontend container
├── Dockerfile.website          # Landing page container
├── Makefile                    # Build automation
└── package.json                # Project manifest

Documentation

Full documentation is available in the docs/ directory:

Pages

RouteDescription
/Home - Overview dashboard
/metricsMetrics Explorer
/logsLog Viewer
/tracesTrace List with Monitor Tab
/traces/:idTrace Detail (Waterfall, Flame Graph, Node Graph)
/exemplarsExemplars View
/dashboardsDashboard List
/dashboards/builderDashboard Builder
/alertsAlert List
/alerts/rulesAlert Rules Management
/correlationsCross-signal Correlation
/settingsSettings

Data Source: TFO-Collector

The dashboard connects to TFO-Collector (TelemetryFlow Collector), which provides:

  • HTTP/JSON API for querying telemetry data
  • gRPC endpoints for high-performance data ingestion
  • WebSocket streaming for real-time updates

Useful Commands

make dev            # Start development server
make build          # Build for production
make docker-build   # Build Docker image
make up             # Start Docker services (mock mode)
make up-demo        # Start demo environment
make check          # Run type-check + lint
make help           # Show all available commands

Contributing

See CONTRIBUTING.md for guidelines.

License

Apache-2.0 - Copyright (c) 2024-2026 Telemetri Data Indonesia. All rights reserved.

Tag summary

Content type

Image

Digest

sha256:bc0b5abb1

Size

32.3 MB

Last updated

about 1 month ago

docker pull telemetryflow/telemetryflow-landing:demo-20260809