Add server status page

This commit is contained in:
Drew DeVault 2017-08-24 22:49:24 -04:00
parent 16ad5453d9
commit a3391a667e
6 changed files with 64 additions and 13 deletions

11
src/bitrate.js Normal file
View File

@ -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`;
}
}

View File

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

16
src/reducers/server.js Normal file
View File

@ -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;
}

View File

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

31
src/ui/server.js Normal file
View File

@ -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);

View File

@ -1,18 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { activeTorrents, selectTorrent, selectop } from '../torrent_state'; import { activeTorrents, selectTorrent, selectop } from '../torrent_state';
import { formatBitrate } from '../bitrate';
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`;
}
}
class TorrentTable extends Component { class TorrentTable extends Component {
render() { render() {