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:36:24 +02:00
|
|
|
import { formatBitrate } from '../bitrate';
|
2017-09-08 07:07:31 +02:00
|
|
|
import { ws_disconnect } from '../socket';
|
2017-09-10 14:29:43 +02:00
|
|
|
import DateDisplay from './date';
|
2017-09-10 14:36:24 +02:00
|
|
|
import Ratio from './ratio';
|
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:29:43 +02:00
|
|
|
function Server({ server, dispatch }) {
|
|
|
|
if (!server.id) {
|
|
|
|
return null;
|
2017-09-10 14:21:08 +02:00
|
|
|
}
|
2017-09-10 14:29:43 +02:00
|
|
|
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><DateDisplay when={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>
|
2017-09-10 14:36:24 +02:00
|
|
|
<dd>
|
|
|
|
<Ratio up={server.transferred_up} down={server.transferred_down} />
|
|
|
|
</dd>
|
2017-09-10 14:29:43 +02:00
|
|
|
<dt>Session ratio</dt>
|
2017-09-10 14:36:24 +02:00
|
|
|
<dd>
|
|
|
|
<Ratio
|
|
|
|
up={server.ses_transferred_up}
|
|
|
|
down={server.ses_transferred_down}
|
|
|
|
/>
|
|
|
|
</dd>
|
2017-09-10 14:29:43 +02:00
|
|
|
</dl>
|
|
|
|
</div>
|
|
|
|
);
|
2017-08-25 04:49:24 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export default connect(state => ({ server: state.server }))(Server);
|