diff --git a/pages/containers.go b/pages/containers.go
index 11cb81a8..68d9e214 100644
--- a/pages/containers.go
+++ b/pages/containers.go
@@ -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()
diff --git a/pages/containers_html.go b/pages/containers_html.go
index 97f1e9e8..4efeebd6 100644
--- a/pages/containers_html.go
+++ b/pages/containers_html.go
@@ -157,24 +157,7 @@ const containersHtmlTemplate = `
- {{with getFsStats .Stats}}
- {{range $i, $e := .}}
-
-
FS #{{$i}}: {{$e.Device}}
-
-
-
- {{printSize $e.Limit}} {{printUnit $e.Limit}} ({{getFsUsagePercent $e.Limit $e.Usage}}%)
-
- {{end}}
- {{end}}
+
{{end}}
diff --git a/pages/static/containers_js.go b/pages/static/containers_js.go
index fb9b3f1d..51494abb 100644
--- a/pages/static/containers_js.go
+++ b/pages/static/containers_js.go
@@ -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 = $("");
+ 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 = $("
");
+ for (var i = 0; i < curr.filesystem.length; i++) {
+ var data = curr.filesystem[i];
+ el.append($("
")
+ .addClass("row col-sm-12")
+ .append($("
")
+ .text("FS #" + (i + 1) + ": " + data.device)));
+
+ var progressElement = $("").addClass("progress-bar progress-bar-danger");
+ el.append($("
")
+ .addClass("col-sm-9")
+ .append($("
")
+ .addClass("progress")
+ .append(progressElement)));
+
+ var textElement = $("
").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);
});