From 1a1e062712b697023ee093a4b45e95b57a2134e4 Mon Sep 17 00:00:00 2001
From: Gregory Eremin <g@erem.in>
Date: Sun, 8 Feb 2015 21:40:05 +0700
Subject: [PATCH] Cleanup code

---
 Makefile                     |  3 +++
 server/static/app.css        |  1 +
 server/static/app.jsx        | 27 +++++++++++++++++++--------
 server/static/dashboard.tmpl |  5 ++++-
 4 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/Makefile b/Makefile
index a5b769a..391a7e8 100644
--- a/Makefile
+++ b/Makefile
@@ -7,6 +7,9 @@ jsx: check-react
 	jsx --extension jsx server/static/ server/static/
 	rm -rf server/static/.module-cache
 
+watch:
+	jsx --watch --extension jsx server/static/ server/static/
+
 cleanup:
 	find . -name '.DS_Store' | xargs rm -f
 
diff --git a/server/static/app.css b/server/static/app.css
index 37fc7a5..f1ac3b4 100644
--- a/server/static/app.css
+++ b/server/static/app.css
@@ -37,6 +37,7 @@ thead tr {
 .title {
     position: relative;
     width: 350px;
+    max-width: 350px;
 }
 .name {
     max-width: 350px;
diff --git a/server/static/app.jsx b/server/static/app.jsx
index b685e25..436f9b9 100644
--- a/server/static/app.jsx
+++ b/server/static/app.jsx
@@ -1,6 +1,9 @@
 var Chart = React.createClass({
     getInitialState: function() {
-        return {pointsIn: [], pointsOut: []};
+        return {
+            pointsIn: [],
+            pointsOut: []
+        };
     },
 
     componentDidMount: function() {
@@ -26,7 +29,10 @@ var Chart = React.createClass({
             pointsOut.push(pointOut);
         }
 
-        this.setState({pointsIn: pointsIn, pointsOut: pointsOut});
+        this.setState({
+            pointsIn: pointsIn,
+            pointsOut: pointsOut
+        });
     },
 
     calcMaxDouble: function(a, b) {
@@ -59,11 +65,14 @@ var Chart = React.createClass({
     },
 
     render: function() {
-        var viewBox = [0, 0, this.props.width, this.props.height].join(' ');
+        var viewBox = [0, 0, this.props.width, this.props.height].join(' '),
+            dIn = this.buildPathD(this.state.pointsIn),
+            dOut = this.buildPathD(this.state.pointsOut);
+
         return (
             <svg className="chart" viewBox={viewBox}>
-                <path className="in" d={this.buildPathD(this.state.pointsIn)} />
-                <path className="out" d={this.buildPathD(this.state.pointsOut)} />
+                <path className="in" d={dIn} />
+                <path className="out" d={dOut} />
             </svg>
         );
     }
@@ -110,6 +119,7 @@ var QueuesList = React.createClass({
             if (meta.subscriptions === 0) {
                 subscriptionsClasses.push('zero');
             }
+
             return (
                 <tr key={name}>
                     <td className="title">
@@ -151,7 +161,7 @@ var Dashboard = React.createClass({
         clearTimeout(this.timeout);
     },
 
-    loop: function (timeout, func) {
+    loop: function(timeout, func) {
         var loop = this.loop;
         func();
         this.timeout = setTimeout(function(){
@@ -159,10 +169,11 @@ var Dashboard = React.createClass({
         }, timeout);
     },
 
-    refresh: function () {
+    refresh: function() {
         var xhr = new XMLHttpRequest()
             self = this;
-        xhr.open('GET', '/status?rates=please', true);
+
+        xhr.open('GET', this.props.api, true);
         xhr.onreadystatechange = function() {
             if (xhr.readyState === 4) {
                 if (xhr.status === 200) {
diff --git a/server/static/dashboard.tmpl b/server/static/dashboard.tmpl
index 7fe9c60..dae3f97 100644
--- a/server/static/dashboard.tmpl
+++ b/server/static/dashboard.tmpl
@@ -13,7 +13,10 @@
     <div id="dashboard"></div>
     <script>
     React.render(
-        React.createElement(Dashboard, {api: "http://127.0.0.1:{{.port}}/status", interval: 1000}),
+        React.createElement(Dashboard, {
+            api: "http://127.0.0.1:{{.port}}/status?rates=please",
+            interval: 1000
+        }),
         document.getElementById('dashboard')
     );
     </script>