Display upload speed in Web UI

This commit is contained in:
Igor Katson 2023-12-05 20:52:30 +00:00
parent 4784f3f14b
commit 80df2c1001
No known key found for this signature in database
GPG key ID: B4EC22B66D61A3F5
8 changed files with 89 additions and 55 deletions

View file

@ -27,6 +27,11 @@ export interface ListTorrentsResponse {
torrents: Array<TorrentId>;
}
export interface Speed {
mbps: number;
human_readable: string;
}
// Interface for the Torrent Stats API response
export interface LiveTorrentStats {
snapshot: {
@ -52,10 +57,8 @@ export interface LiveTorrentStats {
secs: number;
nanos: number;
};
download_speed: {
mbps: number;
human_readable: string;
};
download_speed: Speed;
upload_speed: Speed;
all_time_download_speed: {
mbps: number;
human_readable: string;

View file

@ -185,6 +185,27 @@ const TorrentActions: React.FC<{
</Row>
}
const Speed: React.FC<{ statsResponse: TorrentStats }> = ({ statsResponse }) => {
switch (statsResponse.state) {
case STATE_PAUSED: return 'Paused';
case STATE_INITIALIZING: return 'Checking files';
case STATE_ERROR: return 'Error';
}
// Unknown state
if (statsResponse.state != 'live' || statsResponse.live === null) {
return statsResponse.state;
}
return <>
{!statsResponse.finished && <p> {statsResponse.live.download_speed.human_readable}</p>}
<p> {statsResponse.live.upload_speed.human_readable}</p>
</>
if (statsResponse.finished) {
return <span>Completed</span>;
}
}
const TorrentRow: React.FC<{
id: number,
detailsResponse: TorrentDetails | null,
@ -208,19 +229,6 @@ const TorrentRow: React.FC<{
return `${peer_stats.live} / ${peer_stats.seen}`;
}
const formatDownloadSpeed = () => {
if (finished) {
return 'Completed';
}
switch (state) {
case STATE_PAUSED: return 'Paused';
case STATE_INITIALIZING: return 'Checking files';
case STATE_ERROR: return 'Error';
}
return statsResponse?.live?.download_speed.human_readable ?? "N/A";
}
let classNames = [];
if (error) {
@ -253,7 +261,9 @@ const TorrentRow: React.FC<{
animated={isAnimated}
variant={progressBarVariant} />
</Column>
<Column size={2} label="Down Speed">{formatDownloadSpeed()}</Column>
<Column size={2} label="Speed">
<Speed statsResponse={statsResponse} />
</Column>
<Column label="ETA">{getCompletionETA(statsResponse)}</Column>
<Column size={2} label="Peers">{formatPeersString()}</Column >
<Column label="Actions">