Vortex Status Dashboard

Real-time monitoring dashboard for Vortex's critical third-party service dependencies.

Features

• RPC Endpoint Monitoring: Tracks availability for Pendulum and Moonbeam networks (including backup endpoints)
• Squid Router API: Monitors functionality through route requests
• Indexer Synchronization: Checks Pendulum indexer freshness
• Performance Metrics: Monitors average block times across networks
• Historical Data: View metrics across different time ranges (1 hour, 1 day, 7 days)

Prerequisites

• Bun v1.3.1 or higher

Project Structure

This is a Bun monorepo with two workspaces:

• backend/ - TypeScript/Bun backend service for metrics collection
• frontend/ - React/TypeScript frontend dashboard

Setup

Install Dependencies

From the root directory, install all dependencies for both backend and frontend:

bun install

Backend Configuration

1. Navigate to the backend directory:

cd backend

2. Configure environment variables:

Copy .env.example to .env and configure the required values:

cp .env.example .env

Required environment variables:

• PORT: Server port (default: 3000)
• SUPABASE_URL: Supabase project URL (optional, for data persistence)
• SUPABASE_SERVICE_KEY: Supabase service key (optional, for data persistence)
• SUPABASE_BUCKET_NAME: Supabase storage bucket name (default: metrics-data)

Frontend Configuration

1. Navigate to the frontend directory:

cd frontend

2. Configure environment variables:

Copy .env.example to .env and configure:

cp .env.example .env

Set VITE_API_URL to your backend URL (e.g., http://localhost:3000)

Development

Run Both Services

From the root directory:

bun run dev

This will start both the backend and frontend in development mode with hot reload.

Run Services Individually

Backend only:

bun run dev:backend

Frontend only:

bun run dev:frontend

Production

Start both services in production mode:

bun run start

Or individually:

bun run start:backend
bun run start:frontend

Build

Build both projects:

bun run build

Or individually:

bun run build:backend
bun run build:frontend

API Endpoints

• GET /metrics - Returns current metrics data
• GET /config - Returns configuration for time bins
• GET /health - Health check endpoint that returns server status

Architecture

The dashboard consists of two main components:

1. Backend: TypeScript/Bun application that:

   • Collects metrics from various sources every 30 seconds
   • Aggregates data into short-term and long-term bins
   • Persists data to Supabase (optional)
   • Exposes metrics via REST API

2. Frontend: React/TypeScript application that:

   • Fetches and displays metrics in real-time
   • Provides interactive visualizations using Tremor components
   • Allows users to switch between different time ranges

Development Notes

This project uses Bun as the JavaScript runtime and package manager. Bun provides fast installation, execution, and hot reload capabilities for both backend and frontend development.