Merge pull request #135 from smortex/ui-improvements

Improve UI

Author: jamtur01

lib/riemann/dash/public/eventPane.js

@@ -5,17 +5,19 @@ var eventPane = (function() {
   var fixedFields = ['host', 'service', 'time', 'state', 'metric', 'ttl', 'description', 'tags'];
   var fixedTemplate =
     _.template(
-      '<div class="host">{{-host}}</div>' +
-      '<div class="service">{{-service}}</div>' +
-      '<div class="state {{-state}}">{{-state}}</div>' +
-      '<div class="metric">{{-metric}}</div>' +
+      '<div>' +
+      '<span class="host">{{-host}}</span>' +
+      '<span class="service">{{-service}}</span>' +
+      '<span class="state {{-state}}">{{-state}}</span>' +
+      '<span class="metric">{{-metric}}</span>' +
       '<time class="absolute">{{-time}}</time>' +
-      '<div class="ttl">{{-ttl}}</div>' +
-      '<div class="tags">{{-tags}}</div>' +
-      '<div class="description">{{-description}}</description>');
+      '<span class="ttl">{{-ttl}}</span>' +
+      '<span class="tags">{{-tags}}</span>' +
+      '</div>' +
+      '<pre class="description">{{-description}}</pre>');
 
   var rowTemplate =
-        _.template("<tr><td>{{-field}}</td><td>{{-value}}</td></tr>");
+        _.template('<tr><td class="field-name">{{-field}}</td><td>{{-value}}</td></tr>');
 
   // Hide the pane
   var hide = function() {
@@ -45,14 +47,18 @@ var eventPane = (function() {
             tags: "nil",
             description: "nil"})));
 
-    var table = el.append('<table></table>');
+    var table = '<table>'
 
     // Remaining fields
     _.each(event, function(value, field) {
       if (! _.contains(fixedFields, field)) {
-        table.append(rowTemplate({field: field, value: value}));
+        table += rowTemplate({field: field, value: value});
       }
     });
+
+    table += '</table>';
+
+    el.append(table);
   };
 
   // Hide on escape.

lib/riemann/dash/public/format.js

@@ -6,7 +6,11 @@ var format = (function() {
 		}
     precision = precision || 2;
     var base = Math.pow(10, precision);
-    var val =  Math.round(number * base) / base;
+    var val;
+    if (Math.round(number) == number)
+      val = number;
+    else
+      val = number.toFixed(precision);
 
     if(!commas) {
       return val;

lib/riemann/dash/views/css.scss

@@ -147,7 +147,6 @@ html,table {
   }
 
   * {
-    float: left;
     padding: 3px;
   }
 
@@ -168,12 +167,19 @@ html,table {
 
   .tags:before {
     color: $grey;
-    content: "tags: ";
+    content: "tags ";
+  }
+
+  .field-name {
+    color: $grey;
+    text-align: right;
   }
 
   .description {
+    float: left;
     clear: both;
     white-space: pre-wrap;
+    margin: 3px;
   }
 }