From e344e8da8af6c8c4612a6d932f5efad653b95d78 Mon Sep 17 00:00:00 2001
From: Josh Blum
Date: Wed, 27 Mar 2013 03:09:31 -0500
Subject: gras: using jquery ui draggable and resizable
---
python/gras/query/chart_factory.js | 35 ++++++++++++++++++++++++++-
python/gras/query/chart_handler_breakdown.js | 2 +-
python/gras/query/chart_overall_throughput.js | 2 +-
python/gras/query/chart_overhead_compare.js | 2 +-
python/gras/query/main.css | 8 +++++-
python/gras/query/main.html | 2 +-
python/gras/query/main.js | 5 +---
7 files changed, 46 insertions(+), 10 deletions(-)
(limited to 'python')
diff --git a/python/gras/query/chart_factory.js b/python/gras/query/chart_factory.js
index 7c7888d..6132ab2 100644
--- a/python/gras/query/chart_factory.js
+++ b/python/gras/query/chart_factory.js
@@ -11,6 +11,17 @@ var gras_chart_get_registry = function()
];
}
+/***********************************************************************
+ * update after new query event
+ **********************************************************************/
+function gras_chart_factory_update(registry, point)
+{
+ $.each(registry.active_charts, function(index, chart_info)
+ {
+ chart_info.chart.update(point);
+ });
+}
+
/***********************************************************************
* One time setup
**********************************************************************/
@@ -131,7 +142,7 @@ function gras_chart_factory_make(registry, args)
th_title.text(chart.title);
//register the chart
- var chart_info = {chart:chart,args:args};
+ var chart_info = {chart:chart,args:args,panel:chart_box};
registry.active_charts.push(chart_info);
$('#charts_panel').append(chart_box);
@@ -154,6 +165,28 @@ function gras_chart_factory_make(registry, args)
//finish gui building
chart_box.append(tr_title);
chart_box.append(tr);
+
+ //implement draggable and resizable from jquery ui
+ var handle_stop = function(event, ui)
+ {
+ args['width'] = chart_box.width();
+ args['height'] = chart_box.height();
+ args['position'] = chart_box.offset()
+ gras_chart_save(registry);
+ };
+
+ if ('default_width' in chart) chart_box.width(chart.default_width);
+ chart_box.resizable({stop: handle_stop, create: function(event, ui)
+ {
+ if ('width' in args) chart_box.width(args.width);
+ if ('height' in args) chart_box.height(args.height);
+ }});
+
+ chart_box.css('position', 'absolute');
+ chart_box.draggable({stop: handle_stop, create: function(event, ui)
+ {
+ if ('position' in args) chart_box.offset(args.position);
+ }});
}
/***********************************************************************
diff --git a/python/gras/query/chart_handler_breakdown.js b/python/gras/query/chart_handler_breakdown.js
index 8e90fc3..f897c5b 100644
--- a/python/gras/query/chart_handler_breakdown.js
+++ b/python/gras/query/chart_handler_breakdown.js
@@ -14,6 +14,7 @@ function GrasChartHandlerBreakdown(args)
this.chart = new google.visualization.PieChart(args.panel);
this.title = "Handler Breakdown - " + this.block_id;
+ this.default_width = GRAS_CHARTS_STD_WIDTH;
}
GrasChartHandlerBreakdown.prototype.update = function(point)
@@ -29,7 +30,6 @@ GrasChartHandlerBreakdown.prototype.update = function(point)
]);
var options = {
- width:GRAS_CHARTS_STD_WIDTH,
chartArea:{left:5,top:0,right:5,bottom:0,width:"100%",height:"100%"},
};
diff --git a/python/gras/query/chart_overall_throughput.js b/python/gras/query/chart_overall_throughput.js
index 61361dc..7b99fa4 100644
--- a/python/gras/query/chart_overall_throughput.js
+++ b/python/gras/query/chart_overall_throughput.js
@@ -15,6 +15,7 @@ function GrasChartOverallThroughput(args)
this.title = "Overall Throughput vs Time in MIps";
this.history = new Array();
+ this.default_width = 2*GRAS_CHARTS_STD_WIDTH;
}
GrasChartOverallThroughput.prototype.update = function(point)
@@ -38,7 +39,6 @@ GrasChartOverallThroughput.prototype.update = function(point)
var chart_data = google.visualization.arrayToDataTable(data_set);
var options = {
- width:GRAS_CHARTS_STD_WIDTH*2,
legend: {'position': 'bottom'},
};
this.chart.draw(chart_data, options);
diff --git a/python/gras/query/chart_overhead_compare.js b/python/gras/query/chart_overhead_compare.js
index c373142..f4771b6 100644
--- a/python/gras/query/chart_overhead_compare.js
+++ b/python/gras/query/chart_overhead_compare.js
@@ -14,6 +14,7 @@ function GrasChartOverheadCompare(args)
this.chart = new google.visualization.PieChart(args.panel);
this.title = "Overhead Comparison";
+ this.default_width = GRAS_CHARTS_STD_WIDTH;
}
GrasChartOverheadCompare.prototype.update = function(point)
@@ -29,7 +30,6 @@ GrasChartOverheadCompare.prototype.update = function(point)
var data = google.visualization.arrayToDataTable(data_set)
var options = {
- width:GRAS_CHARTS_STD_WIDTH,
chartArea:{left:5,top:0,right:5,bottom:0,width:"100%",height:"100%"},
};
diff --git a/python/gras/query/main.css b/python/gras/query/main.css
index b5f62f1..2665e32 100644
--- a/python/gras/query/main.css
+++ b/python/gras/query/main.css
@@ -31,6 +31,12 @@ margin-right:10px;
margin-left:2px;
}
+#charts_panel
+{
+width:100%;
+height:100%;
+}
+
.chart_total_io_counts li
{
list-style-type:none;
@@ -42,7 +48,7 @@ font-size:90%;
.chart_container
{
-float:left;
+float:none;
}
#page{
diff --git a/python/gras/query/main.html b/python/gras/query/main.html
index a3864a2..04e5a49 100644
--- a/python/gras/query/main.html
+++ b/python/gras/query/main.html
@@ -3,7 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
- <title>GRAS Status Monitor</title>
+ <title>GRAS Query Client</title>
<link rel="stylesheet" type="text/css" href="/main.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
diff --git a/python/gras/query/main.js b/python/gras/query/main.js
index 5faf8fe..8a261f9 100644
--- a/python/gras/query/main.js
+++ b/python/gras/query/main.js
@@ -32,10 +32,7 @@ var gras_query_stats = function(registry)
gras_chart_factory_online(registry);
if (registry.overall_active)
{
- $.each(registry.active_charts, function(index, chart_info)
- {
- chart_info.chart.update(response);
- });
+ gras_chart_factory_update(registry, response);
registry.timeout_handle = window.setTimeout(function()
{
--
cgit