AutoRefresh support

assets/javascripts/models/overview.js.coffee

@@ -1,27 +1,43 @@
 class Nutcracker.Models.Overview extends Backbone.Model
-  initialize: ->
-    clientConnections = _(@get("clusters").pluck("client_connections")).sum()
-
-    serverConnections = 0
-    for nodesCollection in @get("clusters").pluck("nodes")
-      serverConnections += nodesCollection.serverConnections()
-
-    @set "serverConnections", serverConnections
-    @set "clientConnections", clientConnections
-
+  url: "/overview.json"
+
+  initialize: => 
+    @postInit()
+
   nodes: =>
     new Backbone.Collection(_(@get("clusters").pluck("nodes")).chain()
       .pluck("models")
       .uniq((o)-> o.server_name)
       .flatten()
       .value()
     )
+
+  fetch: =>
+    super and @postInit()
 
+    # reload the app
+    if window.location.hash == ""
+      Nutcracker.router.navigate('/',trigger: true)
+    else
+      Nutcracker.router.navigate(window.location.hash,trigger: true)
+
   clusters: =>
     @get "clusters"
+
+  postInit: =>
+    clientConnections = _(@get("clusters").pluck("client_connections")).sum()
+
+    serverConnections = 0
+    for nodesCollection in @get("clusters").pluck("nodes")
+      serverConnections += nodesCollection.serverConnections()
+
+    @set "serverConnections", serverConnections
+    @set "clientConnections", clientConnections
+    @set "initializeTime", new Date
+
 
   set: ( attributes, options ) ->
     if attributes.clusters? and attributes.clusters not instanceof Nutcracker.Collections.Clusters
       attributes.clusters = new Nutcracker.Collections.Clusters attributes.clusters
 
-    Backbone.Model.prototype.set.call(@, attributes, options)
+    Backbone.Model.prototype.set.call(@, attributes, options)

assets/javascripts/views/cluster.js.coffee

@@ -1,6 +1,6 @@
 class Nutcracker.Views.Cluster extends Backbone.View
   template: JST['cluster']
-
+      
   render: ->
     @curIndex = @collection.indexOf(@model)
     @nextCluster = @collection.at @curIndex+1

assets/javascripts/views/footer.js.coffee

@@ -2,7 +2,10 @@ class Nutcracker.Views.Footer extends Backbone.View
   className: "container navbar navbar-fixed-bottom navbar-inverse"
   template: JST['footer']
 
-  render: ->
+  render: =>
     @$el.html @template({@model})
+    @$el.find('#lastUpdate').html("Last updated: " + humanize.relativeTime(@model.get("initializeTime")/1000))
+    setTimeout(@render,1000)
     this
+
 

assets/javascripts/views/navbar.js.coffee

@@ -1,28 +1,52 @@
 class Nutcracker.Views.Navbar extends Backbone.View
   className: "navbar navbar-inverse navbar-fixed-top"
   template: JST['navbar']
-
-  initialize: =>
-    Backbone.history.bind "all", @routeChange
+  events: 'click .auto-refresh-button' : 'autoRefresh'
 
-  render: ->
-    $(@el).html @template {@model}
-    this
+  initialize: =>
+    Backbone.history.bind "all", @resetButtons
+    @listenTo(@model,'change', @render)
+    @autoRefreshInterval = null
 
-  resetButtons: ->
-    @$el.find("li").removeClass 'active'
+  resetButtons: =>
+    @$el.find("li").removeClass('active')
+
+    if @autoRefreshInterval
+      @$("#auto-refresh-drop-down").addClass('active')
+      @$("#auto-refresh-value-#{@autoRefreshInterval}").addClass('active')
+    else
+      @$("#auto-refresh-drop-down").removeClass("active")
+      @$("#auto-refresh-drop-down").find('.active').removeClass("active")
+
+    url = window.location.href 
+    if /#\/config$/.test url
+      @activate '#config'
+    else if /#\/clusters\//.test url
+      @activate '#clusters'
+    else if /#\/nodes\//.test url
+      @activate '#nodes'
+    else
+      @activate '#overview'
+
+  autoRefresh: ( event ) =>
+    interval = parseInt($(event.currentTarget).attr('value'))
+    @autoRefreshTimer and clearInterval @autoRefreshTimer
 
+    if interval == @autoRefreshInterval
+      @autoRefreshInterval = null 
+    else
+      @autoRefreshInterval = interval
+      @autoRefreshTimer = setInterval =>
+         @model.fetch()
+        ,@autoRefreshInterval*1000
+
+    @resetButtons()
+    event.preventDefault()
+
   activate: ( id )=>
     @$(id).addClass 'active'
 
-  routeChange: (route, object, action, args) =>
+  render: =>
+    @$el.html @template {@model}
     @resetButtons()
-    if /showOverview/g.test action
-      @activate '#overview'
-    if /showConfig/.test action
-      @activate '#config'
-    else if /showCluster/ig.test action
-      @activate '#clusters'
-    else if /showNode/gi.test action
-      @activate '#nodes'
-
+    this

assets/templates/footer.jst.eco

@@ -1 +1 @@
-Last Update <%=humanize.relativeTime(@model.get('timestamp'))%>
+<div id="lastUpdate"></div>

assets/templates/navbar.jst.eco

@@ -15,7 +15,7 @@
           <li id="config" ><a href="#/config">Config </a></li>
           <li class="divider-vertical"></li>
           <li id="clusters" class="dropdown">
-            <a class="dropdown-toggle" id="drop4" style="padding-top: 12px;" role="button" data-toggle="dropdown" href="#">Clusters <b class="caret"></b></a>
+            <a class="dropdown-toggle" id="drop4" style="padding-top: 10px;" role="button" data-toggle="dropdown" href="#">Clusters <b class="caret"></b></a>
             <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
               <li class='divider'></li>
               <% for cluster in @model.get("clusters").models: %>
@@ -29,7 +29,7 @@
 
           <li class="divider-vertical"></li>
           <li id="nodes" class="dropdown">
-            <a class="dropdown-toggle" id="drop5" style="padding-top: 12px;" role="button" data-toggle="dropdown" href="#">Nodes <b class="caret"></b></a>
+            <a class="dropdown-toggle" id="drop5" style="padding-top: 10px;" role="button" data-toggle="dropdown" href="#">Nodes <b class="caret"></b></a>
             <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop5">
               <li class='divider'></li>
               <% for node in @model.nodes().models: %>
@@ -46,9 +46,30 @@
 
         <ul class="nav pull-right">
           <li class="divider-vertical"></li>
-          <li class="no-hl"><a>Version <%[email protected]("version")%></a></li>
+          <li id="auto-refresh-drop-down" class="dropdown">
+            <a class="dropdown-toggle" id="auto-refresh-drop" style="padding-top: 10px;" role="button" data-toggle="dropdown" href="#">Auto Refresh </a>
+            <ul id="auto-refresh-menu" class="dropdown-menu" role="menu" aria-labelledby="auto-refresh-drop">
+              <li id="auto-refresh-value-30" role="presentation" style="font-size: 15px">
+                <a class="auto-refresh-button" value="30" role="menuitem" tabindex="-1" href="">30 Seconds</a>
+              </li>
+              <li class='divider'></li>
+              <li id="auto-refresh-value-60" role="presentation" style="font-size: 15px">
+                <a class="auto-refresh-button" value="60" role="menuitem" tabindex="-1" href="">60 Seconds</a>
+              </li>
+              <li class='divider'></li>
+              <li id="auto-refresh-value-300" role="presentation" style="font-size: 15px">
+                <a class="auto-refresh-button" value="300" role="menuitem" tabindex="-1" href="">5 Minutes</a>
+              </li>
+              <li class='divider'></li>
+              <li id="auto-refresh-value-3600" role="presentation" style="font-size: 15px">
+                <a class="auto-refresh-button" value="3600" role="menuitem" tabindex="-1" href="">1 Hour</a>
+              </li>
+            </ul>
+          </li>
           <li class="divider-vertical"></li>
         </ul>
+
+
       </div><!-- /.nav-collapse -->
     </div>
   </div><!-- /navbar-inner -->