Add display of stats descriptions to govarnishstat.

cmd/govarnishstat/table.go

@@ -61,7 +61,7 @@ th {
 
 tr:hover {background-color: WhiteSmoke;}
 
-tr.hidden { display: none; }
+.hidden { display: none; }
 
 table.uptime {
     float: left;
@@ -91,6 +91,25 @@ table.hitrate {
     margin: 0 10px;
     float: right;
 }
+
+#tooltip {
+    position: absolute;
+    border-style: dotted;
+    font-family: monospace,monospace;
+}
+
+#tipName {
+    font-weight: bold;
+}
+
+.tiptext {
+    margin-bottom: 0.5rem;
+}
+
+#longDesc {
+    display:block;
+    max-width: 24em;
+}
 </style>
 
 <script type="text/javascript">
@@ -109,6 +128,10 @@ var dot = ".&nbsp;&nbsp;&nbsp;"
 var uptime_mgt
 var uptime_child
 var suffix = ["&nbsp;", "K", "M", "G", "T", "P", "E", "Z", "Y"]
+var tbl_built = false
+var tooltip
+var tipName
+var shortDesc
 
 function Metadata(short, long, level, format, semantics) {
 	this.short = short
@@ -223,13 +246,18 @@ function getD9ns() {
 			if (d9n.level != "INFO") {
 				row.classList.add("hidden")
 			}
+			row.addEventListener("mouseover", showDesc)
+			row.addEventListener("mouseout", hideDesc)
 		}
+		tbl_built = true
 	};
 }
 
 function getStats() {
 	var ws = new WebSocket(addr + "/stats")
 	ws.onmessage = function (evt) {
+		if (!tbl_built)
+			return
 		var stats = JSON.parse(evt.data)
 		var row = document.getElementById(stats.name)
 		var cells = row.cells
@@ -373,6 +401,23 @@ function keyUp(evt) {
 	}
 }
 
+function showDesc(evt) {
+	var row = evt.currentTarget
+	var name = row.id
+	var meta = metadata[name]
+	console.log(name + ": " + meta.long)
+	tipName.innerHTML = name + " [" + meta.level + "]"
+	shortDesc.innerHTML = meta.short
+	longDesc.innerHTML = meta.long
+	tooltip.style.top = tbody.offsetTop + row.offsetTop + "px"
+	tooltip.style.left = (row.offsetWidth * 1.01 + row.offsetLeft) + "px"
+	tooltip.classList.remove("hidden")
+}
+
+function hideDesc(evt) {
+	tooltip.classList.add("hidden")
+}
+
 window.onload = function() {
 	var tbl = document.getElementById("statsTbl")
 	tbody = tbl.getElementsByTagName('tbody')[0];
@@ -392,6 +437,9 @@ window.onload = function() {
 	document.addEventListener("keyup", keyUp);
 	scaling_checkbox = document.getElementById("scaling")
 	scaling_checkbox.onclick = toggleFormatting
+	tooltip = document.getElementById("tooltip")
+	tipName = document.getElementById("tipName")
+	shortDesc = document.getElementById("shortDesc")
 }
 </script>
 
@@ -441,6 +489,17 @@ window.onload = function() {
 			</tr>
 		</thead>
 		<tbody>
+		<div id="tooltip" class="hidden">
+			<div class="tiptext">
+				<span id="tipName"></span>
+			</div>
+			<div class="tiptext">
+				<span id="shortDesc"></span>
+			</div>
+			<div class="tiptext">
+				<span id="longDesc"></span>
+			</div>
+		</div>
 		</tbody>
 	</table>
 	</div>
@@ -463,5 +522,7 @@ window.onload = function() {
 		</div>
 	</div>
 </div>
+
+
 </body>
 </html>`