cgrates/data/templates/status.html

{{define "title"}}CGRateS Status{{end}}
{{define "content"}}
      <div class="hero-unit">
        <h1>Conected raters</h1>        
          <table id="rater-table" class="table table-striped">
          {{range .}}
          <tr><td>{{.}}</td></tr>
          {{end}}           
          </table>       
        <p><a id="rater-refresh" href="#" class="btn btn-primary btn-large">Refresh</a></p>
      </div>
      
      <div class="row">
        <div class="span7">
          <h2>Memory consumption (KB)</h2>
          <div id="memory-container" style="width:600px;height:300px;"></div>
        </div>        
        <div class="span5">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn" href="#">View details &raquo;</a></p>
        </div>
      </div>
{{end}}

{{define "extrascripts"}}
 <script src="static/js/jquery.flot.min.js" type="text/javascript"></script>
    <script type="text/javascript">
     $(function () {
        // we use an inline data source in the example, usually data would
        // be fetched from a server
        var data = [], totalPoints = 300;
        var limit = [];
        function getMemoryData() {            
            if (data.length >= totalPoints) {
                data = data.slice(1);
                limit = limit.slice(1);                
            }

            $.getJSON("/getmem", function(memValue){              
              now = new Date()
              timeOffsetInHours = (now.getTimezoneOffset()/60) * (-1);
              now.setHours(now.getHours() + timeOffsetInHours);
              data.push([now.getTime(), memValue[0]]); 
              limit.push([now.getTime(), memValue[1]]); 
            });
                        
            return [data, limit];
        }        

        // setup plot
        var options = {
            //series: { shadowSize: 0 }, // drawing is faster without shadows
            yaxis: { min: 0},// max: 10000 },
            xaxis: { mode: "time" }
        };
        getMemoryData()
        var plot = $.plot($("#memory-container"), [  {label: "Current", data:data}, {label: "Footprint", data: limit} ], options);

        function update() {
            getMemoryData()
            plot.setData([ {label: "Current", data:data}, {label: "Footprint", data: limit} ]);
            // since the axes don't change, we don't need to call plot.setupGrid()
            plot.setupGrid()
            plot.draw();
            
            setTimeout(update, 2000); //5 seconds
        }

        update();  
        $("#rater-refresh").click(function(){
          $.getJSON("/raters", function(raters){            
            $("tr", "#rater-table").remove()            
            for(var i=0; i<raters.length; i++){              
              $("#rater-table").append("<tr><td>" + raters[i] + "</td></tr>");
            }
          });
          return false;
        })      
    });
    </script>
{{end}}