prometheus/cadvisor
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #363 from vmarmol/ui

Browse Source 
Dynamically create the filesystem usage.
This commit is contained in:
Vish Kannan 2014-12-16 09:51:22 -08:00
commit d3f5aa5443
3 changed files with 61 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
pages/containers.go
View File

@ -97,8 +97,6 @@ var funcMap = template.FuncMap{
"getMemoryUsagePercent": getMemoryUsagePercent,
"getHotMemoryPercent": getHotMemoryPercent,
"getColdMemoryPercent": getColdMemoryPercent,
"getFsStats": getFsStats,
"getFsUsagePercent": getFsUsagePercent,
}
func printMask(mask string, numCores int) interface{} {
@ -208,17 +206,6 @@ func getColdMemoryPercent(spec *info.ContainerSpec, stats []*info.ContainerStats
return toMemoryPercent((latestStats.Usage)-(latestStats.WorkingSet), spec, machine)
}
func getFsStats(stats []*info.ContainerStats) []info.FsStats {
if len(stats) == 0 {
return []info.FsStats{}
}
return stats[len(stats)-1].Filesystem
}
func getFsUsagePercent(limit, used uint64) uint64 {
return uint64((float64(used) / float64(limit)) * 100)
}
func serveContainersPage(m manager.Manager, w http.ResponseWriter, u *url.URL) error {
start := time.Now()

19
pages/containers_html.go
View File

@ -157,24 +157,7 @@ const containersHtmlTemplate = `
<div class="panel-heading">
<h3 class="panel-title">Filesystem</h3>
</div>
<div class="panel-body">
{{with getFsStats .Stats}}
{{range $i, $e := .}}
<div class="row col-sm-12">
<h4>FS #{{$i}}: {{$e.Device}}</h4>
</div>
<div class="col-sm-9">
<div class="progress">
<div id="fs-{{$i}}-usage-chart"></div>
<div id="progress-{{$i}}" class="progress-bar progress-bar-danger" style="width: {{getFsUsagePercent $e.Limit $e.Usage}}%">
</div>
</div>
</div>
<div class="col-sm-3" id="progress-text-{{$i}}">
{{printSize $e.Limit}} {{printUnit $e.Limit}} ({{getFsUsagePercent $e.Limit $e.Usage}}%)
</div>
{{end}}
{{end}}
<div id="filesystem-usage" class="panel-body">
</div>
</div>
{{end}}

74
pages/static/containers_js.go
View File

@ -1496,9 +1496,9 @@ function drawGauge(elementId, cpuUsage, memoryUsage, fsUsage) {
if (memoryUsage >= 0) {
gauges.push(['Memory', memoryUsage]);
}
for( var i=0; i< fsUsage.length; i++) {
for (var i = 0; i < fsUsage.length; i++) {
if (fsUsage[i] >= 0) {
gauges.push(['FS #'+i, fsUsage[i]]);
gauges.push(['FS #' + (i + 1), fsUsage[i]]);
}
}
// Create and populate the data table.
@ -1726,19 +1726,59 @@ function drawNetworkErrors(elementId, machineInfo, stats) {
drawLineChart(titles, data, elementId, "Errors per second");
}
// Draw the filesystem graph
function drawFileSystemUsage(elementId, machineInfo, stats) {
var curr = stats.stats[stats.stats.length - 1];
// Update the progress bar
for(var i = 0; i < curr.filesystem.length; i++) {
// Update the filesystem usage values.
function drawFileSystemUsage(machineInfo, stats) {
var curr = stats.stats[stats.stats.length - 1];
var el = $("<div>");
for (var i = 0; i < curr.filesystem.length; i++) {
var data = curr.filesystem[i];
var totalUsage = Math.floor((data.usage * 100.0)/data.capacity);
$("#progress-"+i).width(totalUsage+"%");
var repFS = humanizeMetric(data.capacity);
$("#progress-text-"+i).html( repFS[0].toFixed(2) + " " + repFS[1] + " ("+totalUsage+"%)");
var humanized = humanizeMetric(data.capacity);
// Update DOM elements.
var els = window.cadvisor.fsUsage.elements[data.device];
els.progressElement.width(totalUsage + "%");
els.textElement.text(humanized[0].toFixed(2) + " " + humanized[1] + " (" + totalUsage + "%)");
}
}
// Draw the filesystem usage nodes.
function startFileSystemUsage(elementId, machineInfo, stats) {
window.cadvisor.fsUsage = {};
// A map of device name to DOM elements.
window.cadvisor.fsUsage.elements = {};
var curr = stats.stats[stats.stats.length - 1];
var el = $("<div>");
for (var i = 0; i < curr.filesystem.length; i++) {
var data = curr.filesystem[i];
el.append($("<div>")
.addClass("row col-sm-12")
.append($("<h4>")
.text("FS #" + (i + 1) + ": " + data.device)));
var progressElement = $("<div>").addClass("progress-bar progress-bar-danger");
el.append($("<div>")
.addClass("col-sm-9")
.append($("<div>")
.addClass("progress")
.append(progressElement)));
var textElement = $("<div>").addClass("col-sm-3");
el.append(textElement);
window.cadvisor.fsUsage.elements[data.device] = {
'progressElement': progressElement,
'textElement': textElement,
};
}
$("#" + elementId).empty().append(el);
drawFileSystemUsage(machineInfo, stats);
}
// Expects an array of closures to call. After each execution the JS runtime is given control back before continuing.
// This function returns asynchronously
function stepExecute(steps) {
@ -1800,11 +1840,10 @@ function drawCharts(machineInfo, containerInfo) {
// Filesystem.
if (containerInfo.spec.has_filesystem) {
steps.push(function() {
drawFileSystemUsage("filesystem-usage-chart", machineInfo, containerInfo);
drawFileSystemUsage(machineInfo, containerInfo);
});
}
stepExecute(steps);
}
@ -1816,12 +1855,19 @@ function startPage(containerName, hasCpu, hasMemory) {
}
window.charts = {};
window.cadvisor = {};
window.cadvisor.firstRun = true;
// Get machine info, then get the stats every 1s.
getMachineInfo(function(machineInfo) {
setInterval(function() {
getStats(containerName, function(stats){
drawCharts(machineInfo, stats);
getStats(containerName, function(containerInfo){
if (window.cadvisor.firstRun && containerInfo.spec.has_filesystem) {
window.cadvisor.firstRun = false;
startFileSystemUsage("filesystem-usage", machineInfo, containerInfo);
}
drawCharts(machineInfo, containerInfo);
});
}, 1000);
});