Browse files

Add UI control to auto-refresh graphs

  • Loading branch information...
1 parent e93035f commit 684b2f7e29799fe4cf3738b623988c114ef98c60 @ktheory ktheory committed Apr 3, 2012
Showing with 76 additions and 10 deletions.
  1. +2 −1 Jimfile
  2. +3 −0 config/settings.yml.example
  3. +33 −0 public/js/default.js
  4. +31 −0 public/js/refresh.js
  5. +4 −9 views/index.haml
  6. +3 −0 views/stylesheets/screen.scss
View
3 Jimfile
@@ -11,7 +11,8 @@
"jscolor",
"extensions",
"graph",
- "app"
+ "app",
+ "refresh"
]
}
}
View
3 config/settings.yml.example
@@ -7,6 +7,9 @@ tmp_dir: /tmp
fonts:
- DroidSans
- DejaVuSans
+auto_refresh:
+ enabled: true # checked by default?
+ interval: 60 # seconds
default_options:
title: "New Graph"
from: -7d
View
33 public/js/default.js
@@ -13255,3 +13255,36 @@ var app = Sammy('body', function() {
$(function() {
app.run();
});
+
+Graphiti = window.Graphiti || {};
+
+Graphiti.startRefresh = function(seconds){
+ this.refreshTimer = setInterval(function(){
+ $('#graphs-pane div.graph img.ggraph').each(function() {
+ var jqt = $(this);
+ var src = jqt.attr('src');
+ //src = src.substr(0,src.indexOf('_timestamp_'));
+ //src += '_timestamp_=' + new Date().getTime() + "000#.png";
+ src.replace(/(^.*_timestamp_=).*/, function (match, _1) { return _1 + new Date().getTime() + "000#.png"; })
+ jqt.attr('src',src);
+ });
+ }, seconds * 1000);
+};
+
+Graphiti.stopRefresh = function(){
+ clearInterval(this.refreshTimer);
+};
+
+Graphiti.setRefresh = function(){
+ if ($('#auto-refresh').prop('checked')) {
+ console.log("starting");
+ this.startRefresh($('#auto-refresh').data('interval'));
+ } else {
+ console.log("stop");
+ this.stopRefresh();
+ }
+};
+
+$(Graphiti.setRefresh.bind(Graphiti));
+$("#auto-refresh").change(Graphiti.setRefresh.bind(Graphiti));
+
View
31 public/js/refresh.js
@@ -0,0 +1,31 @@
+Graphiti = window.Graphiti || {};
+
+Graphiti.startRefresh = function(seconds){
+ this.refreshTimer = setInterval(function(){
+ $('#graphs-pane div.graph img.ggraph').each(function() {
+ var jqt = $(this);
+ var src = jqt.attr('src');
+ //src = src.substr(0,src.indexOf('_timestamp_'));
+ //src += '_timestamp_=' + new Date().getTime() + "000#.png";
+ src.replace(/(^.*_timestamp_=).*/, function (match, _1) { return _1 + new Date().getTime() + "000#.png"; })
+ jqt.attr('src',src);
+ });
+ }, seconds * 1000);
+};
+
+Graphiti.stopRefresh = function(){
+ clearInterval(this.refreshTimer);
+};
+
+Graphiti.setRefresh = function(){
+ if ($('#auto-refresh').prop('checked')) {
+ console.log("starting");
+ this.startRefresh($('#auto-refresh').data('interval'));
+ } else {
+ console.log("stop");
+ this.stopRefresh();
+ }
+};
+
+$(Graphiti.setRefresh.bind(Graphiti));
+$("#auto-refresh").change(Graphiti.setRefresh.bind(Graphiti));
View
13 views/index.haml
@@ -26,6 +26,10 @@
%a{href: '/graphs/new'}
+ New Graph
#container
+ #view-controls
+ %label{for: 'auto-refresh'}
+ %input#auto-refresh{:name => 'auto-refresh', :type => 'checkbox', :checked => Graphiti.settings.auto_refresh['enabled'], 'data-interval' => Graphiti.settings.auto_refresh['interval']}
+ Refresh every #{Graphiti.settings.auto_refresh['interval']} seconds
#loading-pane.pane
%h2 ... Loading ...
#dashboards-pane.pane{style: 'display:none;'}
@@ -235,15 +239,6 @@
Graphiti = window.Graphiti || {};
Graphiti.graphite_base_url = "#{settings.graphite_base_url}";
Graphiti.defaultGraph = #{Yajl::Encoder.encode(default_graph)};
- setInterval(function(){
- $('#graphs-pane div.graph img.ggraph').each(function() {
- var jqt = $(this);
- var src = jqt.attr('src');
- src = src.substr(0,src.indexOf('_timestamp_'));
- src += '_timestamp_=' + new Date().getTime() + "000#.png";
- jqt.attr('src',src);
- });
- }, 60000);
- if Graphiti.production?
%script{src: '/js/default.min.js'}
View
3 views/stylesheets/screen.scss
@@ -59,6 +59,9 @@ body.bp {
}
}
}
+#view-controls {
+ text-align: right;
+}
#editor-pane {
.save {
@include border-radius(4px);

0 comments on commit 684b2f7

Please sign in to comment.