#!charts#


<style type="text/css">
   @import url("css/dashboard.css");
</style>


<script src="js/sessions.js"></script>

<div class="lead">System Utilization</div>

<div class="row-fluid">
  <div class="span4 shadow-container">
    <div id="systemCPUGage" class="primary-justgage"></div>
  </div>
  <div class="span4 shadow-container">
    <div id="systemMemoryGage" class="primary-justgage"></div>
  </div>
  <div class="span4 shadow-container">
    <div id="systemLoadGage" class="primary-justgage"></div>
  </div>
</div>

<script>
  var cpuGage = new JustGage({
    id: "systemCPUGage", 
    title: "CPU Usage", 
    label: "percent",
    value: #cpu_usage#, 
    min: 0,
    max: 100
  }); 
  var memoryGage = new JustGage({
    id: "systemMemoryGage", 
    title: "Memory Usage", 
    label: "percent",
    value: #memory_usage#, 
    min: 0,
    max: 100
  }); 
  var loadGage = new JustGage({
    id: "systemLoadGage", 
    title: "Load Average", 
    label: "of #cores# cores",
    value: #system_load#, 
    min: 0,
    max: #cores#
  });
  
  // update every 60 seconds
  setInterval(function() {
    $.ajax({
        url: "update-dashboard-gages",
        type: "GET",
        dataType: "json",
        success: function(data) {
          cpuGage.refresh(data.cpu_usage);
          memoryGage.refresh(data.memory_usage);
          loadGage.refresh(data.system_load);
        }
    })
  }, 60000);
  
</script>


<div class="spacer15"></div>

<div class="lead">System History</div>

<div class="row-fluid">
  <div class="span6">
  <div id="rsessions-chart"></div>
  </div>
  <div class="span6">
  <div id="cpu-chart"></div>
  </div>
</div>
<div class="row-fluid">
  <div class="span6">
  <div id="memory-chart"></div>
  </div> 
  <div class="span6">
  <div id="load-chart"></div>
  </div>
</div>

<script>

$(function() { 
  var charts = new RStudioAdminCharts("dashboard-stats", "-1day");
  charts.addRSessionsChart("rsessions-chart", 
                           { caption: "Active Sessions", mini: true});
  charts.addSystemCpuChart("cpu-chart", 
                           { caption: "CPU Usage", mini: true });
  charts.addSystemMemoryChart("memory-chart", 
                              { caption: "Memory Usage", mini: true}); 
  charts.addSystemLoadChart("load-chart", 
                            #cores#,
                            { caption: "Load Average", mini: true});
                                                
  // update chart data every 60 seconds
  setInterval(function() { charts.updateData(); }, 60000)
});

</script>