From 5b7fb6bcc97fa6c9aa4566cd35fedf9ebbe57379 Mon Sep 17 00:00:00 2001 From: Victor Marmol Date: Tue, 16 Dec 2014 09:34:33 -0800 Subject: [PATCH] Dynamically create the filesystem usage. Fixes #357. --- pages/containers.go | 13 ------ pages/containers_html.go | 19 +-------- pages/static/containers_js.go | 74 ++++++++++++++++++++++++++++------- 3 files changed, 61 insertions(+), 45 deletions(-) diff --git a/pages/containers.go b/pages/containers.go index 11cb81a84d..68d9e21492 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 97f1e9e850..4efeebd693 100644 --- a/pages/containers_html.go +++ b/pages/containers_html.go @@ -157,24 +157,7 @@ const containersHtmlTemplate = `

Filesystem

-
- {{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 fb9b3f1d5e..51494abbe2 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); });