Add server status page

src/bitrate.js

@@ -0,0 +1,11 @@
+export function formatBitrate(bitrate) {
+  if (bitrate > 1000000000) {
+    return `${(bitrate / 1000000000).toFixed(2)} Gb/s`;
+  } else if (bitrate > 1000000) {
+    return `${(bitrate / 1000000).toFixed(2)} Mb/s`;
+  } else if (bitrate > 1000) {
+    return `${(bitrate / 1000).toFixed(2)} Kb/s`;
+  } else {
+    return `${bitrate} b/s`;
+  }
+}

src/reducers/index.js

@@ -2,12 +2,14 @@ import { combineReducers } from 'redux';
 import { routerReducer } from 'react-router-redux'
 import subscribe from './subscribe';
 import filter_subscribe from './filter_subscribe';
+import server from './server';
 import torrents from './torrents';
 import files from './files';
 
 const root = combineReducers({
   subscribe,
   filter_subscribe,
+  server,
   torrents,
   files,
   router: routerReducer

src/reducers/server.js

@@ -0,0 +1,16 @@
+import {
+  UPDATE_RESOURCES,
+  RESOURCES_REMOVED
+} from '../actions/resources';
+
+export default function server(state = {}, action) {
+  switch (action.type) {
+    case UPDATE_RESOURCES:
+      if (action.resources.length !== 1 ||
+          action.resources[0].type !== "server") {
+        return state;
+      }
+      return { ...state, ...action.resources[0] };
+  }
+  return state;
+}

src/ui/main.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
-import { Route } from 'react-router';
+import { Route, DefaultRoute } from 'react-router';
 import TorrentTable from './torrent_table';
 import AddTorrent from './add_torrent';
 import TorrentDetails from './torrent_details';
+import Server from './server';
 
 export default class Main extends Component {
   render() {
@@ -14,6 +15,7 @@ export default class Main extends Component {
         <div className="col-md-4">
           <Route path="/add-torrent" component={AddTorrent} />
           <Route path="/torrents/:ids" component={TorrentDetails} />
+          <Route path="/" component={Server} />
         </div>
       </div>
     );

src/ui/server.js

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { formatBitrate } from '../bitrate';
+
+function Server({ server }) {
+  if (!server.id) {
+    // TODO: websocket status?
+    return null;
+  }
+  return (
+    <div>
+      <h3>Server</h3>
+      <dl>
+        <dt>Running since</dt>
+        {/* TODO: pretty print dates */}
+        <dd>{server.started}</dd>
+        <dt>Rate up</dt>
+        <dd>{formatBitrate(server.rate_up)}</dd>
+        <dt>Rate down</dt>
+        <dd>{formatBitrate(server.rate_down)}</dd>
+        {/* TODO: Editable */}
+        <dt>Throttle up</dt>
+        <dd>{formatBitrate(server.throttle_up)}</dd>
+        <dt>Throttle down</dt>
+        <dd>{formatBitrate(server.throttle_down)}</dd>
+      </dl>
+    </div>
+  );
+}
+
+export default connect(state => ({ server: state.server }))(Server);

src/ui/torrent_table.js

@@ -1,18 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { activeTorrents, selectTorrent, selectop } from '../torrent_state';
-
-function formatBitrate(bitrate) {
-  if (bitrate > 1000000000) {
-    return `${(bitrate / 1000000000).toFixed(2)} Gb/s`;
-  } else if (bitrate > 1000000) {
-    return `${(bitrate / 1000000).toFixed(2)} Mb/s`;
-  } else if (bitrate > 1000) {
-    return `${(bitrate / 1000).toFixed(2)} Kb/s`;
-  } else {
-    return `${bitrate} b/s`;
-  }
-}
+import { formatBitrate } from '../bitrate';
 
 class TorrentTable extends Component {
   render() {