236 lines
8.8 KiB
JavaScript
236 lines
8.8 KiB
JavaScript
import React, {useEffect, useState} from "react";
|
|
import {useTranslation} from "react-i18next";
|
|
import {Outlet, useParams} from "react-router-dom";
|
|
import {useNavigation} from "../../hooks/navigationHook";
|
|
import {
|
|
faCampground,
|
|
faChartArea,
|
|
faChartLine,
|
|
faCodeCompare,
|
|
faCogs,
|
|
faCubes,
|
|
faFilterCircleXmark,
|
|
faGlobe,
|
|
faInfoCircle,
|
|
faLocationArrow,
|
|
faSearch,
|
|
faUserGroup,
|
|
faUsers,
|
|
faUsersViewfinder
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import {useAuth} from "../../hooks/authenticationHook";
|
|
import Sidebar from "../../components/navigation/Sidebar";
|
|
import Header from "../../components/navigation/Header";
|
|
import ColorSelectorModal from "../../components/modal/ColorSelectorModal";
|
|
import {useMetadata} from "../../hooks/metadataHook";
|
|
import {faCalendarCheck} from "@fortawesome/free-regular-svg-icons";
|
|
import ErrorPage from "./ErrorPage";
|
|
import {SwitchTransition} from "react-transition-group";
|
|
import MainPageRedirect from "../../components/navigation/MainPageRedirect";
|
|
import {useDataRequest} from "../../hooks/dataFetchHook";
|
|
import {fetchServerIdentity} from "../../service/serverService";
|
|
import {ServerExtensionContextProvider, useServerExtensionContext} from "../../hooks/serverExtensionDataContext";
|
|
import {iconTypeToFontAwesomeClass} from "../../util/icons";
|
|
import {staticSite} from "../../service/backendConfiguration";
|
|
|
|
const HelpModal = React.lazy(() => import("../../components/modal/HelpModal"));
|
|
|
|
const ServerSidebar = () => {
|
|
const {t, i18n} = useTranslation();
|
|
const {authRequired} = useAuth();
|
|
const {sidebarItems, setSidebarItems} = useNavigation();
|
|
const {extensionData} = useServerExtensionContext();
|
|
|
|
useEffect(() => {
|
|
let items = [
|
|
{
|
|
name: 'html.label.serverOverview',
|
|
icon: faInfoCircle,
|
|
href: "overview",
|
|
permission: 'page.server.overview'
|
|
},
|
|
{},
|
|
{name: 'html.label.information'},
|
|
{
|
|
name: 'html.label.onlineActivity',
|
|
icon: faChartArea,
|
|
contents: [
|
|
{
|
|
nameShort: 'html.label.overview',
|
|
name: 'html.label.playersOnlineOverview',
|
|
icon: faChartArea,
|
|
href: "online-activity",
|
|
permission: 'page.server.online.activity'
|
|
},
|
|
{
|
|
name: 'html.label.sessions',
|
|
icon: faCalendarCheck,
|
|
href: "sessions",
|
|
permission: 'page.server.sessions'
|
|
},
|
|
{
|
|
name: 'html.label.pvpPve',
|
|
icon: faCampground,
|
|
href: "pvppve",
|
|
permission: 'page.server.player.versus'
|
|
},
|
|
{
|
|
name: 'html.label.allowlist',
|
|
icon: faFilterCircleXmark,
|
|
href: "allowlist",
|
|
permission: 'page.server.allowlist.bounce'
|
|
}
|
|
],
|
|
},
|
|
{
|
|
name: 'html.label.playerbase',
|
|
icon: faUsers,
|
|
contents: [
|
|
{
|
|
nameShort: 'html.label.overview',
|
|
name: 'html.label.playerbaseOverview',
|
|
icon: faChartLine,
|
|
href: "playerbase",
|
|
permission: 'page.server.playerbase'
|
|
},
|
|
{
|
|
name: 'html.label.joinAddresses',
|
|
icon: faLocationArrow,
|
|
href: "join-addresses",
|
|
permission: 'page.server.join.addresses'
|
|
},
|
|
{
|
|
name: 'html.label.playerRetention',
|
|
icon: faUsersViewfinder,
|
|
href: "retention",
|
|
permission: 'page.server.retention'
|
|
},
|
|
{
|
|
name: 'html.label.playerList',
|
|
icon: faUserGroup,
|
|
href: "players",
|
|
permission: 'page.server.players'
|
|
},
|
|
{
|
|
name: 'html.label.geolocations',
|
|
icon: faGlobe,
|
|
href: "geolocations",
|
|
permission: 'page.server.geolocations'
|
|
},
|
|
]
|
|
},
|
|
{name: 'html.label.performance', icon: faCogs, href: "performance", permission: 'page.server.performance'},
|
|
{},
|
|
{name: 'html.label.plugins', permission: 'page.server.plugins'},
|
|
{
|
|
name: 'html.label.pluginHistory',
|
|
icon: faCodeCompare,
|
|
href: "plugin-history",
|
|
permission: 'page.server.plugin.history',
|
|
authRequired: true
|
|
},
|
|
{
|
|
name: 'html.label.pluginsOverview',
|
|
icon: faCubes,
|
|
href: "plugins-overview",
|
|
permission: 'page.server.plugins'
|
|
}
|
|
]
|
|
|
|
if (extensionData?.extensions) {
|
|
extensionData.extensions.filter(extension => extension.wide)
|
|
.map(extension => extension.extensionInformation)
|
|
.map(info => {
|
|
return {
|
|
name: info.pluginName,
|
|
icon: [iconTypeToFontAwesomeClass(info.icon.family), info.icon.iconName],
|
|
href: `plugins/${encodeURIComponent(info.pluginName)}`,
|
|
permission: 'page.network.plugins'
|
|
}
|
|
}).forEach(item => items.push(item))
|
|
}
|
|
|
|
if (!staticSite) {
|
|
items.push(
|
|
{},
|
|
{name: 'html.label.links', permission: 'access.query'},
|
|
{name: 'html.label.query', icon: faSearch, href: "/query", permission: 'access.query'}
|
|
);
|
|
}
|
|
|
|
// Filter out items that need authentication
|
|
items = items
|
|
.filter(item => !item.authRequired || (authRequired && item.authRequired))
|
|
setSidebarItems(items);
|
|
window.document.title = `Plan | Server Analysis`;
|
|
}, [t, i18n, extensionData, setSidebarItems, authRequired])
|
|
|
|
return (
|
|
<Sidebar items={sidebarItems}/>
|
|
)
|
|
}
|
|
|
|
const ServerPage = () => {
|
|
const {t} = useTranslation();
|
|
const {identifier} = useParams();
|
|
const {isProxy, serverName, networkMetadata} = useMetadata();
|
|
|
|
const {
|
|
data: serverIdentity,
|
|
loadingError: identityLoadingError
|
|
} = useDataRequest(fetchServerIdentity, [identifier]);
|
|
const [error] = useState(undefined);
|
|
|
|
const {currentTab} = useNavigation();
|
|
|
|
const {authRequired, loggedIn} = useAuth();
|
|
if (authRequired && !loggedIn) return <MainPageRedirect/>
|
|
|
|
const getDisplayedServerName = () => {
|
|
if (serverIdentity) {
|
|
return serverIdentity.serverName;
|
|
}
|
|
|
|
if (isProxy) {
|
|
const fromMetadata = networkMetadata?.servers?.find(server => server.serverUUID === identifier);
|
|
return fromMetadata ? fromMetadata.serverName : identifier;
|
|
} else {
|
|
return serverName?.startsWith('Server') ? "Plan" : serverName
|
|
}
|
|
}
|
|
const displayedServerName = getDisplayedServerName();
|
|
|
|
if (error) return <ErrorPage error={error}/>;
|
|
if (identityLoadingError) {
|
|
if (identityLoadingError.status === 404) return <ErrorPage
|
|
error={{
|
|
title: t('html.error.404NotFound'),
|
|
message: t(staticSite ? 'html.error.serverNotExported' : 'html.error.serverNotSeen')
|
|
}}/>
|
|
return <ErrorPage error={identityLoadingError}/>
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ServerExtensionContextProvider identifier={identifier}>
|
|
<ServerSidebar/>
|
|
<div className="d-flex flex-column" id="content-wrapper">
|
|
<Header page={displayedServerName} tab={currentTab}/>
|
|
<div id="content" style={{display: 'flex'}}>
|
|
<main className="container-fluid mt-4">
|
|
<SwitchTransition>
|
|
<Outlet/>
|
|
</SwitchTransition>
|
|
</main>
|
|
<aside>
|
|
<ColorSelectorModal/>
|
|
<React.Suspense fallback={""}><HelpModal/></React.Suspense>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</ServerExtensionContextProvider>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ServerPage; |