Rough table view

dashboard/css/app.css

@@ -1,3 +1,5 @@
+* { box-sizing: border-box; }
+
 body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 16px;
@@ -9,10 +11,44 @@ body {
     /*background-color: #ccc;*/
 }
 
+.header {
+    width: 100%;
+    height: 30px;
+}
+    .header > div {
+        float: left;
+        line-height: 30px;
+        text-align: center;
+        font-weight: 600;
+        border-right: #666 1px solid;
+    }
+
+.col-name      { width: 200px; }
+.col-processed { width: 100px; }
+.col-errors    { width: 100px; }
+.col-min       { width: 100px; }
+.col-median    { width: 100px; }
+.col-max       { width: 100px; }
+
 .daemon {
     margin-top: 40px;
     height: 150px;
 }
+    .daemon .stats {
+        width: 100%;
+        height: 30px;
+    }
+        .daemon .stats > div {
+            float: left;
+            line-height: 30px;
+            text-align: right;
+            padding-right: 5px;
+            border-right: #666 1px solid;
+        }
+        .daemon .stats > div.col-name {
+            text-align: left;
+            font-weight: 600;
+        }
     .daemon .left-block {
         float: left;
         width: 330px;

dashboard/js/app.jsx

@@ -42,7 +42,41 @@ var Dashboard = React.createClass({
 
     render: function() {
         return (
+            <div className="dashboard">
+                <Header />
                 <div className="daemons">{this.renderDaemons()}</div>
+            </div>
+        );
+    }
+});
+
+var Header = React.createClass({
+    render: function() {
+        return (
+            <div className="header">
+                <div className="col-name">Daemon</div>
+                <div className="col-processed">Processed</div>
+                <div className="col-errors">Errors</div>
+                <div className="col-min">Min</div>
+                <div className="col-median">Median</div>
+                <div className="col-max">Max</div>
+            </div>
+        );
+    }
+});
+
+var StatsRow = React.createClass({
+    render: function() {
+        var value = this.props.value;
+        return (
+            <div className="stats">
+                <div className="col-name">{this.props.name}</div>
+                <div className="col-processed">{value.processed}</div>
+                <div className="col-errors">{value.errors}</div>
+                <div className="col-min">{formatDuration(value.min)}</div>
+                <div className="col-median">{formatDuration(value.median)}</div>
+                <div className="col-max">{formatDuration(value.max)}</div>
+            </div>
         );
     }
 });
@@ -52,16 +86,11 @@ var Daemon = React.createClass({
         var last = this.props.points[this.props.points.length - 1];
         return (
             <div className="daemon">
+                <StatsRow name={this.props.name} value={last} />
                 <div className="left-block">
-                    <h1>{this.props.name}</h1>
+                    <LineChart points={this.props.points} />
-                    <dl>
-                        <dt>Processed:</dt><dd>{last.processed}</dd>
-                        <dt>Errors:</dt><dd>{last.errors}</dd>
-                        <dt>Median:</dt><dd>{formatDuration(last.median)}</dd>
-                    </dl>
                 </div>
                 <BoxPlot points={this.props.points} />
-                <LineChart points={this.props.points} />
             </div>
         );
     }
@@ -161,7 +190,7 @@ var BoxPlot = React.createClass({
 var LineChart = React.createClass({
     render: function() {
         var points = this.props.points,
-            maxHeight = 140,
+            maxHeight = 90,
             padding = 5,
             colors = {processed: "#46f", errors: "#f64"};
 
@@ -200,7 +229,7 @@ var LineChart = React.createClass({
 
         return (
             <div className="linechart">
-                <svg width="455" height="150">
+                <svg width="300" height="100">
                     {makePath(points, "processed")}
                     {makePath(points, "errors")}
                 </svg>