Generate tabular console view from JSON data.

web/api/api.go

@@ -24,7 +24,7 @@ import (
 type MetricsService struct {
 	gorest.RestService `root:"/api/" consumes:"application/json" produces:"application/json"`
 
-	query      gorest.EndPoint `method:"GET" path:"/query?{expr:string}&{json:string}" output:"string"`
+	query      gorest.EndPoint `method:"GET" path:"/query?{expr:string}&{as_text:string}" output:"string"`
 	queryRange gorest.EndPoint `method:"GET" path:"/query_range?{expr:string}&{end:int64}&{range:int64}&{step:int64}" output:"string"`
 	metrics    gorest.EndPoint `method:"GET" path:"/metrics" output:"string"`
 

web/api/query.go

@@ -37,7 +37,7 @@ func (serv MetricsService) setAccessControlHeaders(rb *gorest.ResponseBuilder) {
 	rb.AddHeader("Access-Control-Expose-Headers", "Date")
 }
 
-func (serv MetricsService) Query(expr string, formatJson string) string {
+func (serv MetricsService) Query(expr string, asText string) string {
 	exprNode, err := rules.LoadExprFromString(expr)
 	if err != nil {
 		return ast.ErrorToJSON(err)
@@ -48,7 +48,8 @@ func (serv MetricsService) Query(expr string, formatJson string) string {
 	rb := serv.ResponseBuilder()
 	serv.setAccessControlHeaders(rb)
 	var format ast.OutputFormat
-	if formatJson != "" {
+  // BUG(julius): Use Content-Type negotiation.
+	if asText == "" {
 		format = ast.JSON
 		rb.SetContentType(gorest.Application_Json)
 	} else {

web/static/css/graph.css

@@ -107,9 +107,8 @@ input[title=*]:hover:after {
   display: inline;
 }
 
-.console {
-  white-space: pre;
-  overflow: scroll;
+.console_table {
+  margin-top: 5px;
 }
 
 .ui-widget {

web/static/js/graph.js

@@ -293,26 +293,22 @@ Prometheus.Graph.prototype.submitQuery = function() {
   self.queryForm.find("input[name=end]").val(endDate);
 
   if (self.queryXhr) {
-    self.queryXhr.abort()
+    self.queryXhr.abort();
   }
-  var url
-  var data
+  var url;
+  var success;
   if (self.tab[0] == self.graphTab[0]) {
-    url  = self.queryForm.attr("action")
-    data = self.queryForm.serialize()
-    dataType = "json"
-    success = function(json, textStatus) { self.handleGraphResponse(json, textStatus) }
+    url  = self.queryForm.attr("action");
+    success = function(json, textStatus) { self.handleGraphResponse(json, textStatus); };
   } else {
-    url  = '/api/query'
-    data = self.expr.serialize()
-    dataType = "text"
-    success = function(text, textStatus) { self.handleConsoleResponse(text, textStatus) }
+    url  = "/api/query";
+    success = function(text, textStatus) { self.handleConsoleResponse(text, textStatus); };
   }
 
   self.queryXhr = $.ajax({
       method: self.queryForm.attr("method"),
       url: url,
-      dataType: dataType,
+      dataType: "json",
       data: self.queryForm.serialize(),
       success: success,
       error: function(xhr, resp) {
@@ -507,20 +503,39 @@ Prometheus.Graph.prototype.handleGraphResponse = function(json, textStatus) {
   self.updateGraph(true);
 }
 
-Prometheus.Graph.prototype.handleConsoleResponse = function(text, textStatus) {
+Prometheus.Graph.prototype.handleConsoleResponse = function(data, textStatus) {
   var self = this;
-  var body = "<table class=\"table-striped console_table\"></table>";
-  self.consoleTab.removeClass('reload');
-  self.consoleTab.html(body);
+  self.consoleTab.removeClass("reload");
 
-  var elements = text.split("\n");
-  var table = $("#console_table");
-  table.find("tr:gt(0)").remove();
-  for (var i = 0; i < elements.length; i++) {
-    var e = "<tr><td>" + elements[i] + "</td></tr>";
-    table.append(e);
+  var tBody = self.consoleTab.find(".console_table tbody");
+  tBody.empty();
+
+  switch(data.Type) {
+  case "vector":
+    for (var i = 0; i < data.Value.length; i++) {
+      var v = data.Value[i];
+      var tsName = self.metricToTsName(v.Metric);
+      tBody.append("<tr><td>" + tsName + "</td><td>" + v.Value + "</td></tr>")
+    }
+    break;
+  case "matrix":
+    for (var i = 0; i < data.Value.length; i++) {
+      var v = data.Value[i];
+      var tsName = self.metricToTsName(v.Metric);
+      var valueText = "";
+      for (var j = 0; j < v.Values.length; j++) {
+        valueText += v.Values[j].Value + " @" + v.Values[j].Timestamp + "<br/>";
+      }
+      tBody.append("<tr><td>" + tsName + "</td><td>" + valueText + "</td></tr>")
+    }
+    break;
+  case "scalar":
+    tBody.append("<tr><td>scalar</td><td>" + data.Value + "</td></tr>");
+    break;
+  default:
+    alert("Unsupported value type!");
+    break;
   }
-  console.log(table);
 }
 
 function parseGraphOptionsFromUrl() {

web/static/js/graph_template.handlebar

@@ -104,7 +104,16 @@
                 </div>
                 <div class="legend"></div>
               </div>
-              <div id="console{{id}}" class="console reload"></div>
+              <div id="console{{id}}" class="console reload">
+                <table class="table table-condensed table-bordered table-hover console_table">
+                  <thead>
+                    <th>Element</th>
+                    <th>Value</th>
+                  </thead>
+                  <tbody>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </form>
         </div>