The Dashing framework you love, evolved for the modern DevOps era.
MetricWall is a drop-in replacement and spiritual successor to the legendary Shopify/Dashing. We kept the best part (the simple Ruby DSL for fetching data) and rewrote the rest to fix the "dead tech" issues of the past.
Unlike the original or other forks like Smashing, MetricWall is not just a display tool—it's a monitoring solution.
Why MetricWall?
-
⚡ Modern Core: Replaces the obsolete Batman.js/CoffeeScript frontend with a blazing fast Vue 3 & Vite engine.
- ✅ PHASE 2 COMPLETE - All 9 widgets rewritten in Vue 3
- ✅ Dashboard grid with drag-and-drop support
-
💾 Data Persistence: Built-in SQLite support. Your graphs won't flatline/reset to zero every time you restart the server.
- ✅ PHASE 1 COMPLETE - SQLite schema, API endpoints, cleanup jobs
-
🔔 Active Monitoring: Define thresholds in your jobs and trigger Webhooks (Slack, Telegram, Discord) automatically.
- ⏳ PHASE 3 PLANNED - Alert configuration and webhook integration
-
🔄 Backward Compatible: Works with your existing Dashing/Smashing
.rbjob files.- ✅ VERIFIED - All Dashing DSL commands work unchanged
# Build and start
docker-compose up --build
# Visit dashboard
open http://localhost:9292See DOCKER.md for detailed Docker usage.
# Install dependencies
bundle install
# Start the server
bundle exec rackup config.ru -p 9292Or use the CLI (after gem installation):
# Install the gem
gem build metricwall.gemspec
gem install metricwall-*.gem
# Create a new project
metricwall new my-dashboard
# Start the server
cd my-dashboard
bundle install
metricwall startOpen your browser and navigate to:
http://localhost:9292
You should see the sample dashboard with live-updating widgets!
metricwall/
├── lib/
│ └── metricwall/
│ ├── app.rb # Sinatra app with SSE streaming
│ ├── cli.rb # CLI for scaffolding
│ └── version.rb # Version info
├── dashboards/
│ └── sample.erb # Sample dashboard HTML
├── jobs/
│ └── sample.rb # Sample background job
├── public/
│ └── 404.html # 404 error page
├── config.ru # Rack configuration
├── Gemfile # Ruby dependencies
└── README.md # This file
Jobs are Ruby files in the jobs/ directory that run periodically and push data to widgets:
# jobs/sample.rb - Contoh fetching data dari API eksternal
require 'net/http'
require 'json'
# Fetch Bitcoin price dari CoinGecko (free, no auth)
SCHEDULER.every '30s' do
uri = URI('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd&include_24hr_change=true')
response = Net::HTTP.get(uri)
data = JSON.parse(response)
btc_price = data['bitcoin']['usd'].to_i
send_event('bitcoin', { current: btc_price, last: btc_price - 100 })
endDashboards are HTML/ERB files in the dashboards/ directory with EventSource-based live updates:
<!-- dashboards/sample.erb -->
<!DOCTYPE html>
<html>
<head>
<title>MetricWall Dashboard</title>
<style>/* Smashing-style grid layout */</style>
</head>
<body>
<div class="grid-smashing">
<div class="card green" id="bitcoin">
<div class="title">Bitcoin</div>
<div class="big-number">--</div>
<div class="delta">
<span class="arrow">↑</span>
<span class="change-text">+$100</span>
</div>
<div class="small">USD</div>
</div>
<!-- more cards... -->
</div>
<script>
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
updateCard(data); // Auto-update widget values
};
</script>
</body>
</html>Set an auth token via environment variable or in config.ru:
# config.ru
MetricWall::App.set :auth_token, ENV['AUTH_TOKEN'] || 'your_secret_token'Then include it in API requests:
curl -X POST http://localhost:9292/widgets/my_widget \
-H "Content-Type: application/json" \
-d '{"auth_token": "your_secret_token", "value": 100}'See sumber/PLAN.md for the detailed technical roadmap.
Current Status: Phase 2 (Vue.js Frontend) - COMPLETE ✅
-
✅ Phase 1 (Week 1-3) - Backend Core & SQLite
- Sinatra app with SSE streaming
- Rufus scheduler integration
- SQLite persistence layer with cleanup jobs
- API endpoints for history & stats
- Docker containerization (SQLite-ready)
-
✅ Phase 2 (Week 1-4) - Vue.js Frontend
- Vite project setup with dev server
- BaseWidget wrapper component
- 9 Widget types: Number, Text, Meter, Clock, Graph, List, Image, Iframe, Comments
- DashboardGrid with vue-grid-layout
- Widget registry system for dynamic loading
- Full SSE integration for real-time updates
-
⏳ Phase 3 (Week 1-3) - Alerting & Webhooks
- Historical data API (already in Phase 1)
- Alert configuration system
- Slack/Telegram webhook integration
- Alert badges on widgets
-
⏳ Phase 4 - Go Agent & Packaging
- System metrics agent (CPU, memory, disk, network)
- Cross-platform builds (Linux/macOS/Windows)
- Package formats (deb, rpm, brew, Docker)
The following technologies from the original Dashing/Smashing are deprecated and will not be carried forward:
| Technology | Status | Replacement |
|---|---|---|
| Batman.js | ❌ DEPRECATED | Vue.js 3 (Phase 2) |
| CoffeeScript | ❌ DEPRECATED | TypeScript/JavaScript (Phase 2) |
| Sprockets | ❌ DEPRECATED | Vite (Phase 2) |
| Rickshaw.js | ❌ DEPRECATED | Chart.js / Apache ECharts (Phase 2) |
| jQuery Knob | ❌ DEPRECATED | Vue3 Knob / Custom SVG (Phase 2) |
| YAML History | SQLite3 (Now in Phase 1) |
✅ SQLite3 - Persistent data storage with automatic daily cleanup (30-day retention) ✅ Sinatra + Thin - Fast, lightweight backend for job scheduling & SSE streaming ✅ Rufus Scheduler - Reliable periodic job execution
🔄 Vue.js 3 - Modern, reactive frontend components 🔄 Vite - Lightning-fast build tool with HMR (Hot Module Replacement) 🔄 TypeScript - Type-safe frontend code 🔄 Chart.js / ECharts - Modern charting libraries for graphs
MIT License - see LICENSE file for details.