byebye server side rendering :) (287e4eb0) · Commits · github_fork / Clip

haml/app.haml

+3 −107

Original line number	Diff line number	Diff line
		@@ -2,15 +2,11 @@
		%html

		%head
		%title=current_namespace.title

		%title= "FnordMetric"
		%script(type="text/javascript" src="#{path_prefix}/vendor/jquery-1.6.1.min.js")
		%script(type="text/javascript" src="#{path_prefix}/vendor/highcharts.js")

		%script(type="text/javascript" src="#{path_prefix}/vendor/raphael.min.js")
		%script(type="text/javascript" src="#{path_prefix}/vendor/raphael.util.js")


		%script(type="text/javascript" src="#{path_prefix}/fnordmetric.js")
		%script(type="text/javascript" src="#{path_prefix}/fnordmetric.util.js")
		%script(type="text/javascript" src="#{path_prefix}/fnordmetric.ui.js")
		@@ -26,110 +22,10 @@
		%script(type="text/javascript" src="#{path_prefix}/fnordmetric.session_view.js")
		%link(type="text/css" rel="stylesheet" href="#{path_prefix}/fnordmetric.css")

		:javascript
		FnordMetric.p = '#{path_prefix}';

		%body
		.topbar{:class => namespaces.count > 1 ? 'shown' : 'hidden'}
		%ul
		-namespaces.each do \|key,namespace\|
		%li{:class => namespace.token == current_namespace.token ? 'active' : nil}
		%a{:href=> "#{path_prefix}/#{namespace.token}"}=h namespace.title

		#wrap
		#sidebar
		%ul

		%li.active.overview
		%span.picto.piechart
		%span.title Dashboard
		%span.meta
		%strong 3.6k events/s

		/ - if current_namespace.active_users_available
		/ %li.sessions
		/ %span.picto.piechart
		/ %span.title Active Users
		/ %span.meta
		/ %strong Fnord
		/ Fnord

		-current_namespace.dashboards.each do \|key,dashboard\|
		%li.dashboard{:rel => dashboard.token}
		%span.picto.piechart
		%span.title= h dashboard.title
		%span.meta
		%strong Fnord
		Fnord

		-current_namespace.gauges.each do \|key,gauge\|
		- next unless gauge.is_a?(FnordMetric::MultiGauge)
		%li.gauge{:rel => gauge.name}
		%span.picto.piechart
		%span.title= h gauge.title
		%span.meta
		%strong Fnord
		Fnord


		#viewport
		.viewport_inner.clearfix


		:javascript
		$(document).ready(function(){

		FnordMetric.init('#{current_namespace.token}', $('.viewport_inner'), 'ws://localhost:4243');

		// fixpaul: move to FnordMetric.views.sidebar

		$('#sidebar li.dashboard').click(function(){
		FnordMetric.renderDashboard($(this).attr('rel'));
		window.location.hash = $(this).attr('rel');
		});

		$('#sidebar li.gauge').click(function(){
		FnordMetric.renderGauge($(this).attr('rel'));
		window.location.hash = 'gauge/' + $(this).attr('rel');
		});

		$('#sidebar li.sessions').click(function(){
		FnordMetric.renderSessionView();
		window.location.hash = '';
		});

		$('#sidebar li.overview').click(function(){
		FnordMetric.renderOverviewView();
		window.location.hash = '';
		});

		$('#sidebar li').click(function(){
		$(this).addClass('active').siblings().removeClass('active');
		});

		function resizeViewport(){
		var viewport_width = window.innerWidth - 220
		$('#viewport').width(viewport_width);
		FnordMetric.resizeView();
		}

		resizeViewport();
		$(window).resize(resizeViewport);

		if(!#{current_namespace.active_users_available.to_s}) {
		$('#tabs li:first').trigger('click');
		}

		window.setTimeout(function(){
		if(window.location.hash){
		if(!!window.location.hash.match(/^#dashboard\/[a-zA-Z_0-9-]+$/)) {
		$('#sidebar li.dashboard[rel="'+window.location.hash.slice(11)+'"]').trigger('click');
		} else if (!!window.location.hash.match(/^#gauge\/[a-zA-Z_0-9-]+$/)){
		$('#sidebar li.gauge[rel="'+window.location.hash.slice(7)+'"]').click();
		}
		}
		}, 200);

		FnordMetric.init($('body'), 'ws://localhost:4243');
		});

lib/fnordmetric/web/app.rb

+1 −1

Original line number	Diff line number	Diff line
		@@ -77,7 +77,7 @@ class FnordMetric::App < Sinatra::Base
		end

		get '/' do
		redirect "#{path_prefix}/#{@namespaces.keys.first}"
		::File.open(::File.expand_path("../../../../pub/fnordmetric.html", __FILE__)).read
		end

		get '/:namespace' do

pub/fnordmetric.html

0 → 100644

+32 −0

Original line number	Diff line number	Diff line
		<!DOCTYPE html>
		<html>
		<head>
		<title>FnordMetric</title>
		<script src='/vendor/jquery-1.6.1.min.js' type='text/javascript'></script>
		<script src='/vendor/highcharts.js' type='text/javascript'></script>
		<script src='/vendor/raphael.min.js' type='text/javascript'></script>
		<script src='/vendor/raphael.util.js' type='text/javascript'></script>
		<script src='/fnordmetric.js' type='text/javascript'></script>
		<script src='/fnordmetric.util.js' type='text/javascript'></script>
		<script src='/fnordmetric.ui.js' type='text/javascript'></script>
		<script src='/fnordmetric.timeline_widget.js' type='text/javascript'></script>
		<script src='/fnordmetric.numbers_widget.js' type='text/javascript'></script>
		<script src='/fnordmetric.bars_widget.js' type='text/javascript'></script>
		<script src='/fnordmetric.pie_widget.js' type='text/javascript'></script>
		<script src='/fnordmetric.toplist_widget.js' type='text/javascript'></script>
		<script src='/fnordmetric.html_widget.js' type='text/javascript'></script>
		<script src='/fnordmetric.overview_view.js' type='text/javascript'></script>
		<script src='/fnordmetric.gauge_view.js' type='text/javascript'></script>
		<script src='/fnordmetric.dashboard_view.js' type='text/javascript'></script>
		<script src='/fnordmetric.session_view.js' type='text/javascript'></script>
		<link href='/fnordmetric.css' rel='stylesheet' type='text/css'>
		</head>
		</html>
		<body></body>
		<script>
		//<![CDATA[
		$(document).ready(function(){
		FnordMetric.init($('body'), 'ws://localhost:4243');
		});
		//]]>
		</script>

pub/fnordmetric.js

+64 −4

Original line number	Diff line number	Diff line
		@@ -3,6 +3,7 @@ var FnordMetric = (function(){
		var canvasElem = false;
		var currentView = false;
		var gaugeLoadRunning = false;
		var gauges = {};

		var socket;

		@@ -15,6 +16,40 @@ var FnordMetric = (function(){
		loadView(FnordMetric.views.gaugeView(_gauge, gauge_conf));
		}

		function renderSidebar(){
		$('#sidebar ul').html();

		for(gkey in gauges){
		$('#sidebar ul').append($('<li class="gauge">')
		.attr('rel', gkey)
		.append('<span class="picto piechart">')
		.append($('<span class="title">').html(gauges[gkey].title))
		.append('<span class="meta">'));
		}

		$('#sidebar li.dashboard').click(function(){
		FnordMetric.renderDashboard($(this).attr('rel'));
		window.location.hash = $(this).attr('rel');
		});

		$('#sidebar li.gauge').click(function(){
		FnordMetric.renderGauge($(this).attr('rel'));
		window.location.hash = 'gauge/' + $(this).attr('rel');
		});

		$('#sidebar li').click(function(){
		$(this).addClass('active').siblings().removeClass('active');
		});

		}

		function addGauge(msg){
		if(!gauges[msg.gauge_key]){
		gauges[msg.gauge_key] = {};
		renderSidebar();
		}
		}

		function renderGaugeAsync(_gauge){
		gaugeLoadRunning = true;
		publish({
		@@ -40,22 +75,34 @@ var FnordMetric = (function(){
		};

		function resizeView(){
		var viewport_width = window.innerWidth - 220
		$('#viewport').width(viewport_width);
		currentView.resize(
		canvasElem.innerWidth(),
		canvasElem.innerHeight()
		);
		};

		function init(_namespace, _canvasElem, _sock_addr){
		canvasElem = _canvasElem;
		FnordMetric.currentNamespace = _namespace;

		function init(_canvasElem, _sock_addr){
		canvasElem = $("<div class='viewport_inner'>");
		canvasElem.addClass('clearfix');

		socket = new WebSocket(_sock_addr);
		socket.onmessage = socketMessage;
		socket.onclose = socketClose;
		socket.onopen = socketOpen;

		renderOverviewView();
		var _wrap_elem = $("<div id='wrap'>")
		.append($("<div id='sidebar'>").append('<ul>'))
		.append($("<div id='viewport'>").append(canvasElem));

		_canvasElem.html(_wrap_elem);

		$(window).resize(resizeView);
		window.setTimeout(navigateViaHash, 200);

		resizeView();
		};

		function publish(obj){
		@@ -68,6 +115,8 @@ var FnordMetric = (function(){

		if((evt._class == "render_response") && gaugeLoadRunning){
		renderGauge(evt._channel, evt.payload);
		} else if((evt._class == "discover_response")){
		addGauge(evt);
		} else {
		if(currentView){ currentView.announce(evt); }
		}
		@@ -75,12 +124,23 @@ var FnordMetric = (function(){

		function socketOpen(){
		console.log("connected...");
		publish({"_class": "discover_request"});
		}

		function socketClose(){
		console.log("socket closed");
		}

		function navigateViaHash(){
		if(window.location.hash){
		if(!!window.location.hash.match(/^#dashboard\/[a-zA-Z_0-9-]+$/)) {
		$('#sidebar li.dashboard[rel="'+window.location.hash.slice(11)+'"]').trigger('click');
		} else if (!!window.location.hash.match(/^#gauge\/[a-zA-Z_0-9-]+$/)){
		$('#sidebar li.gauge[rel="'+window.location.hash.slice(7)+'"]').click();
		}
		}
		}

		return {
		renderDashboard: renderDashboard,
		renderGauge: renderGaugeAsync,

Admin message