templates/pages/cluster.html
{% extends "layout/main.html" %}
{% block content %}
<div class="row">
<div class="col-md-12 col-sm-12">
{% include "partials/cluster.html" %}
</div>
<div class="col-md-12 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-12">
<h4>Cache Usage</h4>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<canvas id="cacheUsage" width="300" height="300"></canvas>
</div>
<div class="col-sm-12 center-block" id="cacheUsageLegend"></div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-sm-12">
<h4>Hits & Misses</h4>
</div>
<div class="col-sm-12">
<canvas id="hitsAndMisses" width="300" height="300"></canvas>
</div>
<div class="col-sm-12" id="hitsAndMissesLegend"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h4>Cache Information</h4>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-md-6">Current Items (Total)</div>
<div class="col-md-6">{{cluster.stats.currItems}} ( {{cluster.stats.totalItems}} )</div>
</div>
<div class="row">
<div class="col-md-6">Hits</div>
<div class="col-md-6">{{cluster.stats.getHits}}</div>
</div>
<div class="row">
<div class="col-md-6">Misses</div>
<div class="col-md-6">{{cluster.stats.getMisses}}</div>
</div>
<div class="row">
<div class="col-md-6">Request Rate ( hits, misses )</div>
<div class="col-md-6">{{cluster.stats.getRequestRate}} cache requests / second</div>
</div>
<div class="row">
<div class="col-md-6">Hit Rate</div>
<div class="col-md-6">{{cluster.stats.getHitRate}} cache requests / second</div>
</div>
<div class="row">
<div class="col-md-6">Miss Rate</div>
<div class="col-md-6">{{cluster.stats.getMissRate}} cache requests / second</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascripts %}
<script type="application/javascript">
var cacheDatasets = [
{
value: parseFloat( "{{ cluster.stats.bytesUsedPercentage }}" ),
color: "#D46234",
highlight: "#B04419",
label: "Used: {{ cluster.stats.bytes }} ({{cluster.stats.bytesUsedPercentage }}%)",
id: 'used'
},
{
value: parseFloat( "{{ cluster.stats.bytesFreePercentage }}" ),
color: "#60EF60",
highlight: "#8AF68A",
label: "Free: {{ cluster.stats.bytesFree }} ({{cluster.stats.bytesFreePercentage }}%)",
id: 'free'
}
];
var cacheOptions = {
tooltipTemplate: "{% verbatim %}<%if (label){%><%= label %><%}%>{% endverbatim %}",
legendTemplate: "{% verbatim %}<ul class=\"legend\"><% for (var i=0; i<cacheDatasets.length; i++){%><li><div class=\"legend-container\"><div class=\"legend <%=cacheDatasets[i].id.toLowerCase()%>\"></div><%if(cacheDatasets[i].label){%><%=cacheDatasets[i].label%><%}%></div></li><%}%></ul>{% endverbatim %}"
};
var pieChart = new Chart( $( "#cacheUsage" ).get( 0 ).getContext( "2d" ) ).Pie( cacheDatasets, cacheOptions );
//append the legend
$( '#cacheUsageLegend' ).html( pieChart.generateLegend() );
var hitsData = {
labels: [""],
datasets: [
{
label: "Hits: {{ cluster.stats.getHits }} ({{ cluster.stats.getHitsPercentage }}%)",
fillColor: "#60EF60",
highlightFill: "#8AF68A",
data: ["{{ cluster.stats.getHits }}"],
id: "hits"
},
{
label: "Misses: {{ cluster.stats.getMisses }} ({{ cluster.stats.getMissesPercentage }}%)",
fillColor: "#D46234",
highlightFill: "#B04419",
data: ["{{ cluster.stats.getMisses }}"],
id: "misses"
}
]
};
var hitsOptions = {
tooltipTemplate: "{% verbatim %}<%if (label){%><%= label %><%}%>{% endverbatim %}",
legendTemplate: "{% verbatim %}<ul class=\"legend\"><% for (var i=0; i<hitsData.datasets.length; i++){%><li><div class=\"legend-container\"><div class=\"legend <%=hitsData.datasets[i].id.toLowerCase()%>\"></div><%if(hitsData.datasets[i].label){%><%=hitsData.datasets[i].label%><%}%></div></li><%}%></ul>{% endverbatim %}"
};
var barChart = new Chart( $( "#hitsAndMisses" ).get( 0 ).getContext( "2d" ) ).Bar( hitsData, hitsOptions );
//append the legend
$( '#hitsAndMissesLegend' ).html( barChart.generateLegend() );
</script>
{% endblock %}