78 lines
2.4 KiB
React
78 lines
2.4 KiB
React
|
import React from 'react';
|
||
|
|
import ReactTooltip from 'react-tooltip';
|
||
|
|
|
||
|
|
export default class Cluster extends React.Component {
|
||
|
|
number_format = (number) => number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||
|
|
render() {
|
||
|
|
let data = this.props.data;
|
||
|
|
let serverInitial = this.props.server[0];
|
||
|
|
let shards;
|
||
|
|
let color = 'success';
|
||
|
|
let problems = [];
|
||
|
|
let extrainfo;
|
||
|
|
let fireduck;
|
||
|
|
|
||
|
|
if (data.error) {
|
||
|
|
if (data.error === 'IPC request timed out.') {
|
||
|
|
color = 'ipc-timeout';
|
||
|
|
problems.push(`${data.error} This is totally normal and expected.`);
|
||
|
|
} else {
|
||
|
|
color = 'error';
|
||
|
|
problems.push(`${data.error} Please try again later.`);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data.guessedShards) {
|
||
|
|
shards = `#${data.guessedShards[0]} - #${data.guessedShards[5]}`;
|
||
|
|
} else {
|
||
|
|
shards = `Error`;
|
||
|
|
}
|
||
|
|
if (data.error === 'Cluster offline.') {
|
||
|
|
fireduck = (<div className='fire'><img className='duck' src='https://carti.dyno.gg/assets/fireduck.gif' /></div>);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
let first = data.result.shards[0], last = data.result.shards[5];
|
||
|
|
shards = `#${first} - #${last}`;
|
||
|
|
if (data.result.unavailableCount > 0) {
|
||
|
|
if (data.result.unavailableCount > 10) {
|
||
|
|
color = 'warning';
|
||
|
|
}
|
||
|
|
problems.push(this.number_format(data.result.unavailableCount) + ' guild(s) unavailable');
|
||
|
|
}
|
||
|
|
if (data.result.connectedCount < 6) {
|
||
|
|
if (data.result.connectedCount < 5) {
|
||
|
|
color = 'error';
|
||
|
|
} else {
|
||
|
|
color = 'warning';
|
||
|
|
}
|
||
|
|
problems.push(this.number_format((6 - data.result.connectedCount)) + ' shard(s) unavailable');
|
||
|
|
}
|
||
|
|
|
||
|
|
extrainfo = (<div>
|
||
|
|
<p>Uptime: {data.result.uptime}</p>
|
||
|
|
<p>{this.number_format(data.result.guildCount)} guilds</p>
|
||
|
|
<p>{this.number_format(data.result.voiceConnections)} voice connections</p>
|
||
|
|
</div>)
|
||
|
|
}
|
||
|
|
if (problems.length) {
|
||
|
|
problems = problems.join(', ');
|
||
|
|
} else {
|
||
|
|
problems = 'No issues';
|
||
|
|
}
|
||
|
|
let clusterId = serverInitial + data.id;
|
||
|
|
let highlight = this.props.highlight ? ' shadow-highlight' : '';
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div onClick={(ev) => { ReactTooltip.show(ev.target) }} data-tip data-for={`clusterStatus${clusterId}`} className={`cluster bg-${color}${highlight}`}>
|
||
|
|
{clusterId}
|
||
|
|
</div>
|
||
|
|
<ReactTooltip id={`clusterStatus${clusterId}`} type={color === 'ipc-timeout' ? 'dark' : color} effect='solid'>
|
||
|
|
<h5 className={'title is-5'}>Cluster {clusterId}</h5>
|
||
|
|
<p>Shards: {shards}</p>
|
||
|
|
{fireduck}
|
||
|
|
<p><strong>{problems}</strong></p>
|
||
|
|
{extrainfo}
|
||
|
|
</ReactTooltip>
|
||
|
|
</div>);
|
||
|
|
}
|
||
|
|
}
|