Flesh out server info page

src/bitrate.js

@@ -25,3 +25,15 @@ export function formatBitrate(bitrate) {
     return `${bitrate} b/s`;
   }
 }
+
+export function formatAmount(amount) {
+  if (amount > Rates["GiB/s"]) {
+    return `${(amount / Rates["GiB/s"]).toFixed(2)} GiB`;
+  } else if (amount > Rates["MiB/s"]) {
+    return `${(amount / Rates["MiB/s"]).toFixed(2)} MiB`;
+  } else if (amount > Rates["KiB/s"]) {
+    return `${(amount / Rates["KiB/s"]).toFixed(2)} KiB`;
+  } else {
+    return `${amount} bytes`;
+  }
+}

src/ui/add_torrent.js

@@ -177,6 +177,7 @@ class AddTorrent extends Component {
       <Card>
         <CardBlock>
           <TorrentOptions
+            id="new-torrent"
             start={start}
             startChanged={start => this.setState({ start })}
             priority={priority}

src/ui/server.js

@@ -1,44 +1,100 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import { formatBitrate } from '../bitrate';
+import { formatBitrate, formatAmount } from '../bitrate';
 import { ws_disconnect } from '../socket';
 import date from '../date';
+import Throttle from './throttle';
+import { updateResource } from '../actions/resources';
 
-const throttle = _ => _ === null ? "Unlimited" : formatBitrate(_);
+const ratio = (up, down) => {
-
+  const ratio = up / down;
-function Server({ server }) {
+  if (isNaN(ratio)) {
-  if (!server.id) {
+    return <dd>0</dd>;
-    return null;
   }
   return (
-    <div>
+    <dd>
-      <h3>
+      {`${
-        Server
+        ratio.toFixed(3)
-        <button
+      } (${
-          className="btn btn-sm btn-outline-danger pull-right"
+        formatAmount(up)
-          onClick={() => {
+      } up, ${
-            localStorage.removeItem("autoconnect");
+        formatAmount(down)
-            localStorage.removeItem("password");
+      } down)`}
-            ws_disconnect();
+    </dd>
-          }}
-        >Disconnect</button>
-      </h3>
-      <dl>
-        <dt>Running since</dt>
-        <dd>{date(moment(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>{throttle(server.throttle_up)}</dd>
-        <dt>Throttle down</dt>
-        <dd>{throttle(server.throttle_down)}</dd>
-      </dl>
-    </div>
   );
+};
+
+class Server extends Component {
+  componentDidMount() {
+    this.interval = setInterval(this.forceUpdate, 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    const { server, dispatch } = this.props;
+    if (!server.id) {
+      return null;
+    }
+    return (
+      <div>
+        <h3>
+          Synapse
+          <button
+            className="btn btn-sm btn-outline-danger pull-right"
+            onClick={() => {
+              localStorage.removeItem("autoconnect");
+              localStorage.removeItem("password");
+              ws_disconnect();
+            }}
+          >Disconnect</button>
+        </h3>
+        <dl>
+          <dt>Running since</dt>
+          <dd>{date(moment(server.started))}</dd>
+          <dt>Current network use</dt>
+          <dd>
+            {`${
+            formatBitrate(server.rate_up)
+            } up, ${
+            formatBitrate(server.rate_down)
+            } down`}
+          </dd>
+          <dt>Global download throttle</dt>
+          <dd>
+            <Throttle
+              prop={"dl-throttle-server"}
+              global={false}
+              limit={server.throttle_down}
+              onChange={throttle_down => dispatch(updateResource({
+                id: server.id,
+                throttle_down
+              }))}
+            />
+          </dd>
+          <dt>Global upload throttle</dt>
+          <dd>
+            <Throttle
+              prop={"ul-throttle-server"}
+              global={false}
+              limit={server.throttle_up}
+              onChange={throttle_up => dispatch(updateResource({
+                id: server.id,
+                throttle_up
+              }))}
+            />
+          </dd>
+          <dt>Lifetime ratio</dt>
+          {ratio(server.transferred_up, server.transferred_down)}
+          <dt>Session ratio</dt>
+          {ratio(server.ses_transferred_up, server.ses_transferred_down)}
+        </dl>
+      </div>
+    );
+  }
 }
 
 export default connect(state => ({ server: state.server }))(Server);

src/ui/throttle.js

@@ -0,0 +1,101 @@
+import React, { Component } from 'react';
+import {
+  FormGroup,
+  Label,
+  Input
+} from 'reactstrap';
+import { convertFromBitrate, convertToBitrate } from '../bitrate';
+
+export default class Throttle extends Component {
+  constructor() {
+    super();
+    this.setLimit = this.setLimit.bind(this);
+    this.setUnit = this.setUnit.bind(this);
+    this.state = { unit: "MiB/s" };
+  }
+
+  setLimit(limit) {
+    const { onChange } = this.props;
+    const { unit } = this.state;
+    const converted = limit <= 0 || limit === null ?
+      limit : convertToBitrate(limit, unit);
+    onChange && onChange(converted);
+  }
+
+  setUnit(unit) {
+    const limit = convertFromBitrate(this.props.limit, this.state.unit);
+    this.setState({ unit });
+    this.setLimit(limit);
+  }
+
+  render() {
+    const { global, limit, legend, prop } = this.props;
+    const { unit } = this.state;
+    return (
+      <div>
+        <FormGroup tag="fieldset">
+          <legend>{legend}</legend>
+          {typeof global === "undefined" || global &&
+            <FormGroup check className="form-check-inline">
+              <Label for={`${prop}-global`} check>
+                <Input
+                  type="radio"
+                  name={prop}
+                  id={`${prop}-global`}
+                  onChange={e => this.setLimit(null)}
+                  checked={limit === null}
+                /> Global
+              </Label>
+            </FormGroup>
+          }
+          <FormGroup check className="form-check-inline">
+            <Label for={`${prop}-unlimited`} check>
+              <Input
+                type="radio"
+                name={prop}
+                id={`${prop}-unlimited`}
+                onChange={e => this.setLimit(-1)}
+                checked={limit === -1}
+              /> Unlimited
+            </Label>
+          </FormGroup>
+          <FormGroup check className="form-check-inline">
+            <Label for={`${prop}-custom`} check>
+              <Input
+                type="radio"
+                name={prop}
+                id={`${prop}-custom`}
+                onChange={e => this.setLimit(1)}
+                checked={limit !== -1 && limit !== null}
+              /> Custom
+            </Label>
+          </FormGroup>
+        </FormGroup>
+        {limit !== -1 && limit !== null &&
+          <div className="row">
+            <FormGroup className="col-md-6">
+              <Input
+                type="number"
+                value={convertFromBitrate(limit, unit)}
+                onChange={e => this.setLimit(parseFloat(e.target.value))}
+              />
+            </FormGroup>
+            <FormGroup className="col-md-6">
+              <Input
+                type="select"
+                id="unit"
+                value={unit}
+                onChange={e => this.setUnit(e.target.value)}
+              >
+                <option value="b/s">b/s</option>
+                <option value="KiB/s">KiB/s</option>
+                <option value="MiB/s">MiB/s</option>
+                <option value="GiB/s">GiB/s</option>
+              </Input>
+            </FormGroup>
+          </div>
+        }
+      </div>
+    );
+  }
+}

src/ui/torrent_details.js

@@ -151,6 +151,7 @@ class Torrent extends Component {
                 <dd>{date(moment(torrent.created))}</dd>
               </dl>
               <TorrentOptions
+                id={torrent.id}
                 priority={torrent.priority}
                 priorityChanged={priority =>
                   dispatch(updateResource({ id: torrent.id, priority }))}

src/ui/torrent_options.js

@@ -4,103 +4,12 @@ import {
   Label,
   Input
 } from 'reactstrap';
-import { convertFromBitrate, convertToBitrate } from '../bitrate';
+import Throttle from './throttle';
-
-class Throttle extends Component {
-  constructor() {
-    super();
-    this.setLimit = this.setLimit.bind(this);
-    this.setUnit = this.setUnit.bind(this);
-    this.state = { unit: "MiB/s" };
-  }
-
-  setLimit(limit) {
-    const { onChange } = this.props;
-    const { unit } = this.state;
-    const converted = limit <= 0 || limit === null ?
-      limit : convertToBitrate(limit, unit);
-    onChange && onChange(converted);
-  }
-
-  setUnit(unit) {
-    const limit = convertFromBitrate(this.props.limit, this.state.unit);
-    this.setState({ unit });
-    this.setLimit(limit);
-  }
-
-  render() {
-    const { limit, legend, prop } = this.props;
-    const { unit } = this.state;
-    return (
-      <div>
-        <FormGroup tag="fieldset">
-          <legend>{legend}</legend>
-          <FormGroup check className="form-check-inline">
-            <Label for={`${prop}-global`} check>
-              <Input
-                type="radio"
-                name={prop}
-                id={`${prop}-global`}
-                onChange={e => this.setLimit(null)}
-                checked={limit === null}
-              /> Global
-            </Label>
-          </FormGroup>
-          <FormGroup check className="form-check-inline">
-            <Label for={`${prop}-unlimited`} check>
-              <Input
-                type="radio"
-                name={prop}
-                id={`${prop}-unlimited`}
-                onChange={e => this.setLimit(-1)}
-                checked={limit === -1}
-              /> Unlimited
-            </Label>
-          </FormGroup>
-          <FormGroup check className="form-check-inline">
-            <Label for={`${prop}-custom`} check>
-              <Input
-                type="radio"
-                name={prop}
-                id={`${prop}-custom`}
-                onChange={e => this.setLimit(1)}
-                checked={limit !== -1 && limit !== null}
-              /> Custom
-            </Label>
-          </FormGroup>
-        </FormGroup>
-        {limit !== -1 && limit !== null &&
-          <div className="row">
-            <FormGroup className="col-md-6">
-              <Input
-                type="number"
-                value={convertFromBitrate(limit, unit)}
-                onChange={e => this.setLimit(parseFloat(e.target.value))}
-              />
-            </FormGroup>
-            <FormGroup className="col-md-6">
-              <Input
-                type="select"
-                id="unit"
-                value={unit}
-                onChange={e => this.setUnit(e.target.value)}
-              >
-                <option value="b/s">b/s</option>
-                <option value="KiB/s">KiB/s</option>
-                <option value="MiB/s">MiB/s</option>
-                <option value="GiB/s">GiB/s</option>
-              </Input>
-            </FormGroup>
-          </div>
-        }
-      </div>
-    );
-  }
-}
 
 export default class TorrentOptions extends Component {
   render() {
     const {
+      id,
       start,
       startChanged,
       priority,
@@ -140,13 +49,13 @@ export default class TorrentOptions extends Component {
           </Input>
         </FormGroup>
         <Throttle
-          prop="dl-throttle"
+          prop={`dl-throttle-${id}`}
           legend="Download throttle"
           limit={downloadThrottle}
           onChange={limit => downloadThrottleChanged(limit)}
         />
         <Throttle
-          prop="ul-throttle"
+          prop={`ul-throttle-${id}`}
           legend="Upload throttle"
           limit={uploadThrottle}
           onChange={limit => uploadThrottleChanged(limit)}