Frontend Dashboard

Table of Contents

1. Overview
2. Run Locally
3. Deploy to Azure VM
4. Configuration
5. How It Works

---

Overview

The Angular frontend provides an interactive dashboard that:

• Tests all 14 regions simultaneously
• Shows real-time latency results
• Displays WebSocket, HTTP, and Blob measurements
• Color-codes results (green/yellow/red)

Run Locally

cd ui
npm install
ng serve

Open http://localhost:4200

Deploy to Azure VM

The frontend is hosted on the Southeast Asia VM:

cd deploy
bash deploy-frontend.sh

Access at: http://<southeastasia-vm-ip>

Configuration

Region endpoints are configured in ui/src/assets/regions-db.json:

{
  "id": "indonesiacentral",
  "displayName": "Indonesia Central",
  "city": "Jakarta",
  "wsUrl": "ws://48.193.41.29:8080",
  "blobUrl": "https://latencyindonesiacentral.z45.web.core.windows.net/latency-test.json"
}

How It Works

1. WebSocket: Opens persistent connection, sends timestamp, measures echo RTT
2. HTTP Ping: Sends HEAD request to /ping, measures response time
3. Blob: Sends HEAD request to storage static website endpoint

---

← Analyze Results Next: Cleanup →