2017-08-25 04:49:24 +02:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
2017-09-08 09:47:09 +02:00
|
|
|
import moment from 'moment';
|
2017-09-10 14:21:08 +02:00
|
|
|
import { formatBitrate, formatAmount } from '../bitrate';
|
2017-09-08 07:07:31 +02:00
|
|
|
import { ws_disconnect } from '../socket';
|
2017-09-08 09:47:09 +02:00
|
|
|
import date from '../date';
|
2017-09-10 14:21:08 +02:00
|
|
|
import Throttle from './throttle';
|
|
|
|
import { updateResource } from '../actions/resources';
|
2017-08-25 04:49:24 +02:00
|
|
|
|
2017-09-10 14:21:08 +02:00
|
|
|
const ratio = (up, down) => {
|
|
|
|
const ratio = up / down;
|
|
|
|
if (isNaN(ratio)) {
|
|
|
|
return <dd>0</dd>;
|
2017-08-25 04:49:24 +02:00
|
|
|
}
|
|
|
|
return (
|
2017-09-10 14:21:08 +02:00
|
|
|
<dd>
|
|
|
|
{`${
|
|
|
|
ratio.toFixed(3)
|
|
|
|
} (${
|
|
|
|
formatAmount(up)
|
|
|
|
} up, ${
|
|
|
|
formatAmount(down)
|
|
|
|
} down)`}
|
|
|
|
</dd>
|
2017-08-25 04:49:24 +02:00
|
|
|
);
|
2017-09-10 14:21:08 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
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>
|
|
|
|
);
|
|
|
|
}
|
2017-08-25 04:49:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(state => ({ server: state.server }))(Server);
|