Merge pull request #135 from smortex/ui-improvements

Improve UI
riemann · Jun 30, 2024 · 2d479c6 · 2d479c6
2 parents c0b4ab9 + f611ea7
commit 2d479c6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/lib/riemann/dash/public/eventPane.js b/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.

diff --git a/lib/riemann/dash/public/format.js b/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;

diff --git a/lib/riemann/dash/views/css.scss b/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;
   }
 }