[IMPROVE] Rewrite Federation Dashboard (#17900)

client/admin/federationDashboard/FederationDashboardPage.js

@@ -0,0 +1,23 @@
+import { Box } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import Page from '../../components/basic/Page';
+import { useTranslation } from '../../contexts/TranslationContext';
+import OverviewSection from './OverviewSection';
+import ServersSection from './ServersSection';
+
+function FederationDashboardPage() {
+	const t = useTranslation();
+
+	return <Page>
+		<Page.Header title={t('Federation_Dashboard')} />
+		<Page.ScrollableContentWithShadow>
+			<Box margin='x24'>
+				<OverviewSection />
+				<ServersSection />
+			</Box>
+		</Page.ScrollableContentWithShadow>
+	</Page>;
+}
+
+export default FederationDashboardPage;

client/admin/federationDashboard/FederationDashboardPage.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import FederationDashboardPage from './FederationDashboardPage';
+
+export default {
+	title: 'admin/federationDashboard/FederationDashboardPage',
+	component: FederationDashboardPage,
+};
+
+export const Default = () => <FederationDashboardPage />;

client/admin/federationDashboard/FederationDashboardRoute.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+import { useRole } from '../../contexts/AuthorizationContext';
+import NotAuthorizedPage from '../NotAuthorizedPage';
+import FederationDashboardPage from './FederationDashboardPage';
+
+const FederationDashboardRoute: FC<{}> = () => {
+	const authorized = useRole('admin');
+
+	if (!authorized) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <FederationDashboardPage />;
+};
+
+export default FederationDashboardRoute;

client/admin/federationDashboard/OverviewSection.js

@@ -0,0 +1,40 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import CounterSet from '../../components/data/CounterSet';
+import { usePolledMethodData, AsyncState } from '../../contexts/ServerContext';
+
+function OverviewSection() {
+	const t = useTranslation();
+	const [overviewData, overviewStatus] = usePolledMethodData('federation:getOverviewData', [], 10000);
+
+	const eventCount = (overviewStatus === AsyncState.LOADING && <Skeleton variant='text' />)
+		|| (overviewStatus === AsyncState.ERROR && <Box color='danger'>Error</Box>)
+		|| overviewData?.data[0]?.value;
+	const userCount = (overviewStatus === AsyncState.LOADING && <Skeleton variant='text' />)
+	|| (overviewStatus === AsyncState.ERROR && <Box color='danger'>Error</Box>)
+		|| overviewData?.data[1]?.value;
+	const serverCount = (overviewStatus === AsyncState.LOADING && <Skeleton variant='text' />)
+	|| (overviewStatus === AsyncState.ERROR && <Box color='danger'>Error</Box>)
+		|| overviewData?.data[2]?.value;
+
+	return <CounterSet
+		counters={[
+			{
+				count: eventCount,
+				description: t('Number_of_events'),
+			},
+			{
+				count: userCount,
+				description: t('Number_of_federated_users'),
+			},
+			{
+				count: serverCount,
+				description: t('Number_of_federated_servers'),
+			},
+		]}
+	/>;
+}
+
+export default OverviewSection;

client/admin/federationDashboard/OverviewSection.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import OverviewSection from './OverviewSection';
+
+export default {
+	title: 'admin/federationDashboard/OverviewSection',
+	component: OverviewSection,
+};
+
+export const Default = () => <OverviewSection />;

client/admin/federationDashboard/ServersSection.js

@@ -0,0 +1,26 @@
+import { Box, Throbber } from '@rocket.chat/fuselage';
+import React from 'react';
+
+import { usePolledMethodData, AsyncState } from '../../contexts/ServerContext';
+
+function ServersSection() {
+	const [serversData, serversStatus] = usePolledMethodData('federation:getServers', [], 10000);
+
+	if (serversStatus === AsyncState.LOADING) {
+		return <Throbber align='center' />;
+	}
+
+	if (serversData?.data?.length === 0) {
+		return null;
+	}
+
+	return <Box withRichContent>
+		<ul>
+			{serversData?.data?.map(({ domain }) => (
+				<li key={domain}>{domain}</li>
+			))}
+		</ul>
+	</Box>;
+}
+
+export default ServersSection;