govarnishstat: Refactor and implement scale toggling.

cmd/govarnishstat/table.go

@@ -95,25 +95,39 @@ table.hitrate {
 
 <script type="text/javascript">
 var addr = "ws://" + location.hostname + ":" + location.port
+var metadata = {}
 var tbody
+var colClassList = []
 var show0 = false
 var show0_checkbox
 var formatting = true
+var scaling_checkbox
 var verbosity = "INFO"
 var verbose_select
+var dot = ".&nbsp;&nbsp;&nbsp;"
+var uptime_mgt
+var uptime_child
+var suffix = ["&nbsp;", "K", "M", "G", "T", "P", "E", "Z", "Y"]
+
+function Metadata(short, long, level, format, semantics) {
+	this.short = short
+	this.long = long
+	this.level = level
+	this.format = format
+	this.semantics = semantics
+}
 
-function format_num(cell, val) {
-	if (cell.classList.contains("float")) {
-		cell.innerHTML = val.toFixed(2) + "&nbsp;"
+function format_num(cell, classList) {
+	var val = cell.getAttribute("data-raw")
+	if (classList.contains("avg")) {
+		cell.innerHTML = parseFloat(val).toFixed(2) + "&nbsp;"
 		return
 	}
 	cell.innerHTML = val + "&nbsp;"
 }
 
-function format_duration(cell, val) {
-	if (cell.classList.contains("float")) {
-		return
-	}
+function format_duration(cell) {
+	var val = cell.getAttribute("data-raw")
 	var days = Math.floor(val/86400).toFixed(0)
 	var hours = (Math.floor((val % 86400)/3600)).toFixed(0)
 	if (hours < 10) {
@@ -130,10 +144,10 @@ function format_duration(cell, val) {
 	cell.innerHTML = days + "+" + hours + ":" + mins + ":" + secs + "&nbsp;"
 }
 
-function format_bytes(cell, val) {
-	var suffix = ["&nbsp;", "K", "M", "G", "T", "P", "E", "Z", "Y"]
+function format_bytes(cell, classList) {
+	var val = parseFloat(cell.getAttribute("data-raw"))
 	var i
-	if (cell.classList.contains("int") && val < 1024) {
+	if (classList.contains("int") && val < 1024) {
 		cell.innerHTML = val.toFixed(0) + "&nbsp;"
 		return
 	}
@@ -142,34 +156,41 @@ function format_bytes(cell, val) {
 	cell.innerHTML = val.toFixed(2) + suffix[i]
 }
 
-function format_bitmap(cell, val, bitmap) {
-	if (!cell.classList.contains("int")) {
+function format(cell, format, semantics, cur0, classList) {
+	if (classList.contains("avg")) {
+		switch (format) {
+		case "b":
+		case "d":
 			return
 		}
-	if (!formatting) {
-		format_num(cell, val)
+		if ((cur0 && !classList.contains("moving")) ||
+		    (semantics == "g" && classList.contains("uptime"))) {
+			cell.innerHTML = dot
 			return
 		}
-	cell.innerHTML = bitmap + "&nbsp;"
-}
-
-function format(cell, val) {
-	if (!formatting) {
-		format_num(cell, val)
-		return
 	}
-	if (cell.classList.contains("d")) {
-		format_duration(cell, val)
+	if (format == "b") {
+		cell.innerHTML = cell.getAttribute("data-raw") + "&nbsp;"
 		return
 	}
-	if (cell.classList.contains("B")) {
-		format_bytes(cell, val)
+	if (formatting)
+		switch (format) {
+		case "d":
+			format_duration(cell)
 			return
-	}
-	if (cell.classList.contains("b")) {
+		case "B":
+			format_bytes(cell, classList)
 			return
 		}
-	format_num(cell, val)
+	format_num(cell, classList)
+}
+
+function format_row(row) {
+	var meta = metadata[row.id]
+	var cur0 = row.cells[1].getAttribute("data-raw") == "0"
+	for (i = 1; i <= 6; i++)
+		format(row.cells[i], meta.format, meta.semantics, cur0,
+		       colClassList[i])
 }
 
 function getD9ns() {
@@ -186,29 +207,19 @@ function getD9ns() {
 			var avg100Cell = row.insertCell(5)
 			var avg1000Cell = row.insertCell(6)
 
-			curCell.classList.add("int", d9ns[i].format,
-				d9ns[i].semantics)
-			changeCell.classList.add("float", d9ns[i].format,
-				d9ns[i].semantics)
-			avgCell.classList.add("float", d9ns[i].format,
-				d9ns[i].semantics)
-			avg10Cell.classList.add("float", d9ns[i].format,
-				d9ns[i].semantics)
-			avg100Cell.classList.add("float", d9ns[i].format,
-				d9ns[i].semantics)
-			avg1000Cell.classList.add("float", d9ns[i].format,
-				d9ns[i].semantics)
-
-			if (d9ns[i].semantics == "g") {
+			var d9n = d9ns[i]
+			metadata[d9n.name] = new Metadata(d9n.short, d9n.long,
+			                                  d9n.level, d9n.format,
+			                                  d9n.semantics)
+			if (d9n.semantics == "g") {
 				avgCell.innerHTML = ".&nbsp;&nbsp;&nbsp;"
 			}
-			row.id = d9ns[i].name
-			nameCell.innerHTML = d9ns[i].name
+			row.id = d9n.name
+			nameCell.innerHTML = d9n.name
 			nameCell.className = "name"
 
-			row.id = d9ns[i].name
-			row.classList.add(d9ns[i].level)
-			if (d9ns[i].level != "INFO") {
+			row.classList.add(d9n.level)
+			if (d9n.level != "INFO") {
 				row.classList.add("hidden")
 			}
 		}
@@ -220,32 +231,30 @@ function getStats() {
 	ws.onmessage = function (evt) {
 		var stats = JSON.parse(evt.data)
 		var row = document.getElementById(stats.name)
-		row.setAttribute("data-raw", stats.value)
 		var cells = row.cells
-		if (cells[1].classList.contains("b")) {
-			format_bitmap(cells[1], stats.value, stats.bitmap)
+		if (metadata[row.id].semantics != "b") {
+			cells[1].setAttribute("data-raw", stats.value)
 		}
 		else {
-			format(cells[1], stats.value)
-		}
-		format(cells[2], stats.change)
-		if (!cells[3].classList.contains("g")) {
-			format(cells[3], stats.avg)
+			cells[1].setAttribute("data-raw", stats.bitmap)
 		}
-		format(cells[4], stats.avg10)
-		format(cells[5], stats.avg100)
-		format(cells[6], stats.avg1000)
+		cells[2].setAttribute("data-raw", stats.change)
+		cells[3].setAttribute("data-raw", stats.avg)
+		cells[4].setAttribute("data-raw", stats.avg10)
+		cells[5].setAttribute("data-raw", stats.avg100)
+		cells[6].setAttribute("data-raw", stats.avg1000)
 		if (!show0 && stats.value == 0) {
 			row.classList.add("hidden")
 		}
+		format_row(row)
 
 		if (stats.name == "MGT.uptime") {
-			var cell = document.getElementById("uptime_mgt")
-			format_duration(cell, stats.value)
+			uptime_mgt.setAttribute("data-raw", stats.value)
+			format_duration(uptime_mgt)
 		}
 		if (stats.name == "MAIN.uptime") {
-			var cell = document.getElementById("uptime_chld")
-			format_duration(cell, stats.value)
+			uptime_child.setAttribute("data-raw", stats.value)
+			format_duration(uptime_child)
 		}
 		ws.send("ACK");
 	};
@@ -321,6 +330,12 @@ function toggleShow0() {
 	resetVisibility()
 }
 
+function toggleFormatting() {
+	formatting = !formatting
+	for (i = 0; i < tbody.rows.length; i++)
+		format(tbody.rows[i])
+}
+
 function keyUp(evt) {
 	var k = evt.which || evt.keyCode;
 	switch(k) {
@@ -357,14 +372,21 @@ function keyUp(evt) {
 window.onload = function() {
 	var tbl = document.getElementById("statsTbl")
 	tbody = tbl.getElementsByTagName('tbody')[0];
+	var headrow = document.getElementById("headrow")
+	for (i = 0; i < headrow.cells.length; i++)
+		colClassList[i] = headrow.cells[i].classList
 	getD9ns()
 	getStats()
 	getHitrate()
+	uptime_mgt = document.getElementById("uptime_mgt")
+	uptime_child = document.getElementById("uptime_child")
 	verbose_select = document.getElementById("verbosity")
 	verbose_select.addEventListener("change", setVerbosity);
 	show0_checkbox = document.getElementById("show0")
 	show0_checkbox.onclick = toggleShow0
 	document.addEventListener("keyup", keyUp);
+	scaling_checkbox = document.getElementById("scaling")
+	scaling_checkbox.onclick = toggleFormatting
 }
 </script>
 
@@ -380,7 +402,7 @@ window.onload = function() {
 		</tr>
 		<tr class="top">
 			<td class="top">Uptime child:</td>
-			<td class="top" id="uptime_chld"></td>
+			<td class="top" id="uptime_child"></td>
 		</tr>
 		</table>
 
@@ -403,14 +425,14 @@ window.onload = function() {
 	<br />
 	<table id="statsTbl">
 		<thead>
-			<tr>
+			<tr id="headrow">
 				<th class="name">NAME</th>
-				<th>CURRENT&nbsp;</th>
-				<th>CHANGE&nbsp;</th>
-				<th>AVERAGE&nbsp;</th>
-				<th>AVG_10&nbsp;</th>
-				<th>AVG_100&nbsp;</th>
-				<th>AVG_1000&nbsp;</th>
+				<th class="int">CURRENT&nbsp;</th>
+				<th class="avg current">CHANGE&nbsp;</th>
+				<th class="avg uptime">AVERAGE&nbsp;</th>
+				<th class="avg moving">AVG_10&nbsp;</th>
+				<th class="avg moving">AVG_100&nbsp;</th>
+				<th class="avg moving">AVG_1000&nbsp;</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -430,6 +452,10 @@ window.onload = function() {
 		<p>Current=0</p>
 		<input type="checkbox" id="show0">Show
 		</div>
+		<div class="controls">
+		<p>&nbsp;</p>
+		<input type="checkbox" id="scaling" checked>Scaling
+		</div>
 	</div>
 </div>
 </body>