113 lines
4.6 KiB
JavaScript
113 lines
4.6 KiB
JavaScript
import React from "react";
|
|
|
|
import {Alert, Card, Col} from "react-bootstrap";
|
|
import {
|
|
faExclamationCircle,
|
|
faInfoCircle,
|
|
faPowerOff,
|
|
faTachometerAlt,
|
|
faUser,
|
|
faUsers
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import Datapoint from "../../components/Datapoint";
|
|
import {useTranslation} from "react-i18next";
|
|
import {useParams} from "react-router-dom";
|
|
import {fetchServerOverview} from "../../service/serverService";
|
|
import ErrorView from "../ErrorView";
|
|
import {useDataRequest} from "../../hooks/dataFetchHook";
|
|
import OnlineActivityCard from "../../components/cards/server/graphs/OnlineActivityCard";
|
|
import ServerAsNumbersCard from "../../components/cards/server/values/ServerAsNumbersCard";
|
|
import ServerWeekComparisonCard from "../../components/cards/server/tables/ServerWeekComparisonCard";
|
|
import LoadIn from "../../components/animation/LoadIn";
|
|
import {CardLoader} from "../../components/navigation/Loader";
|
|
import ExtendableRow from "../../components/layout/extension/ExtendableRow";
|
|
import {useAuth} from "../../hooks/authenticationHook";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import FormattedTime from "../../components/text/FormattedTime.jsx";
|
|
|
|
const Last7DaysCard = ({data}) => {
|
|
const {t} = useTranslation();
|
|
|
|
if (!data) return <CardLoader/>;
|
|
|
|
const noData = data.average_tps === 'plugin.generic.unavailable'
|
|
|
|
return (
|
|
<Card id={"last-7-days"}>
|
|
<Card.Header>
|
|
<h6 className="col-black">
|
|
{t('html.label.last7days')}
|
|
</h6>
|
|
</Card.Header>
|
|
{noData && <Alert className='alert-warning mb-0'>
|
|
<FontAwesomeIcon icon={faInfoCircle}/> {t('html.description.noData7d')}
|
|
</Alert>}
|
|
<Card.Body>
|
|
<Datapoint name={t('html.label.uniquePlayers')}
|
|
color={'blue'} icon={faUsers}
|
|
value={data.unique_players} bold/>
|
|
<Datapoint name={t('html.label.uniquePlayers') + ' ' + t('html.label.perDay')}
|
|
color={'blue'} icon={faUser}
|
|
value={data.unique_players_day} bold/>
|
|
<Datapoint name={t('html.label.newPlayers')}
|
|
color={'light-green'} icon={faUsers}
|
|
value={data.new_players} bold/>
|
|
<Datapoint name={t('html.label.newPlayers')}
|
|
color={'light-green'} icon={faUsers}
|
|
value={data.new_players_retention_perc}
|
|
valueLabel={data.new_players_retention + '/' + data.new_players} bold/>
|
|
<hr/>
|
|
<Datapoint name={t('html.label.averageTps')}
|
|
color={'orange'} icon={faTachometerAlt}
|
|
value={data.average_tps} bold/>
|
|
<Datapoint name={t('html.label.lowTpsSpikes')}
|
|
color={'red'} icon={faExclamationCircle}
|
|
value={data.low_tps_spikes} bold/>
|
|
<Datapoint name={t('html.label.downtime')}
|
|
color={'red'} icon={faPowerOff}
|
|
value={<FormattedTime timeMs={data.downtime}/>}/>
|
|
</Card.Body>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
const ServerOverview = () => {
|
|
const {hasPermission} = useAuth();
|
|
const {identifier} = useParams();
|
|
|
|
const seeOverview = hasPermission('page.server.overview.numbers');
|
|
const seeOnlineGraph = hasPermission('page.server.overview.players.online.graph')
|
|
const {data, loadingError} = useDataRequest(
|
|
fetchServerOverview,
|
|
[identifier],
|
|
seeOverview)
|
|
|
|
if (loadingError) {
|
|
return <ErrorView error={loadingError}/>
|
|
}
|
|
|
|
return (
|
|
<LoadIn>
|
|
<section className="server-overview">
|
|
<ExtendableRow id={'row-server-overview-0'}>
|
|
{seeOnlineGraph && <Col lg={9}>
|
|
<OnlineActivityCard/>
|
|
</Col>}
|
|
{seeOverview && <Col lg={3}>
|
|
<Last7DaysCard data={data?.last_7_days}/>
|
|
</Col>}
|
|
</ExtendableRow>
|
|
{seeOverview && <ExtendableRow id={'row-server-overview-1'}>
|
|
<Col lg={4}>
|
|
<ServerAsNumbersCard data={data?.numbers}/>
|
|
</Col>
|
|
<Col lg={8}>
|
|
<ServerWeekComparisonCard data={data?.weeks}/>
|
|
</Col>
|
|
</ExtendableRow>}
|
|
</section>
|
|
</LoadIn>
|
|
)
|
|
}
|
|
|
|
export default ServerOverview; |