gauge view: render tabs (d5c1425c) · Commits · github_fork / Clip

lib/fnordmetric/gauges/numeric_gauge.rb

+11 −0

Original line number	Diff line number	Diff line
		@@ -19,6 +19,17 @@ class FnordMetric::NumericGauge < FnordMetric::MultiGauge
		series_count_metrics[_series][_tick].values_at(_ticks)
		end

		timeline_widget(
		:tab => "Overview 2",
		:title => "Totals Random",
		:ticks => @opts[:ticks],
		:series => @opts[:series],
		:series_titles => Hash[@opts[:series].map{\|s\| [s, s]}],
		:height => 350
		).on(:values_at) do \|_series, _ticks, _tick\|
		series_count_metrics[_series][_tick].values_at(_ticks)
		end

		end

		def react(event)

web/fnordmetric.gauge_view.js

+45 −4

Original line number	Diff line number	Diff line
		@@ -2,6 +2,7 @@ FnordMetric.views.gaugeView = (function(gauge_name, conf){
		var widgets = [];
		var widget_objs = {};
		var viewport = null;
		var tabs = [];

		function load(_viewport){
		viewport = _viewport;
		@@ -9,12 +10,19 @@ FnordMetric.views.gaugeView = (function(gauge_name, conf){
		viewport.append('<div class="navbar"></div>');
		viewport.append('<h1>' + gauge_name + '</h1>');
		viewport.append('<h3>Loading...</h3>');
		viewport.append('<div class="gauge_viewport loading"></div>');
		viewport.append('<div class="gauge_viewport"></div>');

		$('h1', viewport).html(conf.title);
		$('h3', viewport).html(conf.title);
		$('.gauge_viewport', viewport).html(conf.template);
		$('.gauge_viewport', viewport).removeClass('loading');

		for(_wkey in conf.widgets){
		if(!conf.widgets[_wkey].tab){
		conf.widgets[_wkey].tab = "Overview"
		}
		if(tabs.indexOf(conf.widgets[_wkey].tab) == -1){
		tabs.push(conf.widgets[_wkey].tab)
		}
		}

		FnordMetric.ui.navbar($('.navbar', viewport), {
		breadcrumb: [
		@@ -26,7 +34,10 @@ FnordMetric.views.gaugeView = (function(gauge_name, conf){
		]
		});

		renderTabs();
		renderWidgets(conf.widgets);

		renderTab(tabs[0]);
		};

		function announce(evt){
		@@ -37,12 +48,42 @@ FnordMetric.views.gaugeView = (function(gauge_name, conf){
		}
		}

		function renderTabs(){
		var tab_elem = $('<ul>').addClass('ui_tabs tabs');
		viewport.append(tab_elem);
		for(ind in tabs){

		tab_elem.append($('<li>')
		.attr('data-tab', tabs[ind])
		.append($('<a href="#">')
		.html(tabs[ind])
		.click(function(){ renderTab($(this).html()); })
		)
		)

		viewport.append($('<div>')
		.addClass('tab')
		.attr('data-tab', tabs[ind])
		.css('display', 'none')
		)

		}
		}

		function renderTab(tab_name){
		$('.tab', viewport).hide()
		.filter('.tab[data-tab="' + tab_name + '"]').show();

		$('ul.tabs li', viewport).removeClass('active')
		.filter('li[data-tab="' + tab_name + '"]').addClass('active');
		}

		function renderWidgets(_widgets){
		for(wkey in _widgets){
		var widget = _widgets[wkey];
		//widget["elem"] = $(widget["render_target"], viewport);
		widget["elem"] = $('<div class="widget"></div>');
		$('.viewport_inner').append(widget["elem"]);
		$('.tab[data-tab="' + widget.tab + '"]', '.viewport_inner').append(widget["elem"]);
		widgets[wkey] = widget;
		resizeWidget(wkey);
		renderWidget(wkey);

Admin message