TelemetryFlow Landing Zone (Official Website)
2.9K
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.
This repository contains everything needed to run the TelemetryFlow online presence:
| Component | Domain | Description |
|---|---|---|
| Landing Page | telemetryflow.id | Professional website with feature showcase, architecture diagrams, and demo access |
| Demo Dashboard | demo.telemetryflow.id | Live 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) |
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
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | Vue 3 + TypeScript | Dashboard SPA |
| Charts | ECharts 5.x | Data visualization |
| UI | Naive UI + UnoCSS | Component library & CSS |
| State | Pinia | State management |
| Build | Vite 6.x + Turborepo | Fast builds & monorepo |
| Backend | NestJS | API server (platform) |
| Storage | ClickHouse + PostgreSQL | Telemetry & config data |
| Cache | Redis + BullMQ | Caching & job queues |
| Infra | Docker Compose + Nginx | Container orchestration |
| SSL | Certbot + Cloudflare DNS | Let's Encrypt wildcard certs |
| Deploy | Ansible | Remote deployment automation |
# Install dependencies
pnpm install
# Start development server (with mock data)
pnpm dev
The dashboard will be available at http://localhost:3100
# Build for production
pnpm build
# Preview production build
pnpm preview
# Type checking
pnpm type-check
# 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
The demo dashboard uses basic authentication:
| Variable | Default | Description |
|---|---|---|
TELEMETRYFLOW_VIZ_ADMIN | admin | Admin username |
TELEMETRYFLOW_VIZ_PASSWORD | Admin@654123 | Admin password |
Note: Change these for production deployments.
TelemetryFlow-Website supports multi-domain deployment:
telemetryflow.iddemo.telemetryflow.idcd 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.
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.
| Variable | Default | Description |
|---|---|---|
TELEMETRYFLOW_API_URL | http://localhost:4318 | TFO-Collector HTTP endpoint |
TELEMETRYFLOW_GRPC_URL | http://localhost:4317 | TFO-Collector gRPC endpoint |
TELEMETRYFLOW_WS_URL | ws://localhost:4319 | WebSocket endpoint for streaming |
TELEMETRYFLOW_USE_MOCK | true | Enable mock data for development |
TELEMETRYFLOW_REFRESH_INTERVAL | 5000 | Data refresh interval (ms) |
See .env.example for the full list of configuration options.
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
Full documentation is available in the docs/ directory:
| Route | Description |
|---|---|
/ | Home - Overview dashboard |
/metrics | Metrics Explorer |
/logs | Log Viewer |
/traces | Trace List with Monitor Tab |
/traces/:id | Trace Detail (Waterfall, Flame Graph, Node Graph) |
/exemplars | Exemplars View |
/dashboards | Dashboard List |
/dashboards/builder | Dashboard Builder |
/alerts | Alert List |
/alerts/rules | Alert Rules Management |
/correlations | Cross-signal Correlation |
/settings | Settings |
The dashboard connects to TFO-Collector (TelemetryFlow Collector), which provides:
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
See CONTRIBUTING.md for guidelines.
Apache-2.0 - Copyright (c) 2024-2026 Telemetri Data Indonesia. All rights reserved.
Content type
Image
Digest
sha256:bc0b5abb1…
Size
32.3 MB
Last updated
about 1 month ago
docker pull telemetryflow/telemetryflow-landing:demo-20260809