Skip to content

Commit

Permalink
Split network tools to separate pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@leighmacdonald
leighmacdonald committed Apr 17, 2024
1 parent 9abe9a6 commit 7efcf79
Show file tree
Hide file tree
Showing 17 changed files with 400 additions and 249 deletions.
1 change: 1 addition & 0 deletions frontend/frontend.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@ var jsRoutes = []string{
"/global_stats", "/stv", "/login/discord", "/notifications", "/admin/network", "/stats",
"/stats/weapon/:weapon_id", "/stats/player/:steam_id", "/privacy-policy", "/admin/contests",
"/contests", "/contests/:contest_id", "/forums", "/forums/:forum_id", "/forums/thread/:forum_thread_id",
"/admin/network/ip_hist", "/admin/network/players_by_ip", "/admin/network/ip_info", "/admin/network/cidr_blocks",
}
80 changes: 78 additions & 2 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,18 @@ const AdminBanSteamPage = loadable(() => import('./page/AdminBanSteamPage'));
const AdminContestsPage = loadable(() => import('./page/AdminContestsPage'));
const AdminFiltersPage = loadable(() => import('./page/AdminFiltersPage'));
const AdminNetworkPage = loadable(() => import('./page/AdminNetworkPage'));
const AdminNetworkPlayerIPHistoryPage = loadable(
() => import('./page/AdminNetworkPlayerIPHistoryPage.tsx')
);
const AdminNetworkPlayersByCIDRPage = loadable(
() => import('./page/AdminNetworkPlayersByCIDRPage.tsx')
);
const AdminNetworkInfoPage = loadable(
() => import('./page/AdminNetworkInfoPage')
);
const AdminNetworkCIDRBlocks = loadable(
() => import('./page/AdminNetworkCIDRBlocksPage')
);
const AdminNewsPage = loadable(() => import('./page/AdminNewsPage'));
const AdminPeoplePage = loadable(() => import('./page/AdminPeoplePage'));
const AdminReportsPage = loadable(() => import('./page/AdminReportsPage'));
Expand Down Expand Up @@ -606,7 +618,7 @@ export const App = ({ initialTheme }: AppProps): JSX.Element => {
<ErrorBoundary>
<PrivateRoute
permission={
PermissionLevel.Editor
PermissionLevel.Moderator
}
>
<AdminFiltersPage />
Expand All @@ -622,14 +634,78 @@ export const App = ({ initialTheme }: AppProps): JSX.Element => {
<ErrorBoundary>
<PrivateRoute
permission={
PermissionLevel.Editor
PermissionLevel.Moderator
}
>
<AdminNetworkPage />
</PrivateRoute>
</ErrorBoundary>
}
/>
<Route
path={
'/admin/network/ip_hist'
}
element={
<ErrorBoundary>
<PrivateRoute
permission={
PermissionLevel.Moderator
}
>
<AdminNetworkPlayerIPHistoryPage />
</PrivateRoute>
</ErrorBoundary>
}
/>
<Route
path={
'/admin/network/players_by_ip'
}
element={
<ErrorBoundary>
<PrivateRoute
permission={
PermissionLevel.Moderator
}
>
<AdminNetworkPlayersByCIDRPage />
</PrivateRoute>
</ErrorBoundary>
}
/>
<Route
path={
'/admin/network/ip_info'
}
element={
<ErrorBoundary>
<PrivateRoute
permission={
PermissionLevel.Moderator
}
>
<AdminNetworkInfoPage />
</PrivateRoute>
</ErrorBoundary>
}
/>
<Route
path={
'/admin/network/cidr_blocks'
}
element={
<ErrorBoundary>
<PrivateRoute
permission={
PermissionLevel.Moderator
}
>
<AdminNetworkCIDRBlocks />
</PrivateRoute>
</ErrorBoundary>
}
/>
<Route
path={
'/admin/reports'
Expand Down
77 changes: 45 additions & 32 deletions frontend/src/component/FindPlayerIPs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,52 @@
import { ChangeEvent, useState } from 'react';
import { ChangeEvent } from 'react';
import useUrlState from '@ahooksjs/use-url-state';
import SearchIcon from '@mui/icons-material/Search';
import Grid from '@mui/material/Unstable_Grid2';
import { Formik } from 'formik';
import { PersonConnection } from '../api';
import { useConnections } from '../hooks/useConnections.ts';
import { Order, RowsPerPage } from '../util/table.ts';
import { RowsPerPage } from '../util/table.ts';
import { LoadingPlaceholder } from './LoadingPlaceholder.tsx';
import { TargetIDField, TargetIDInputValue } from './formik/TargetIdField.tsx';
import { SourceIDField, SourceIDFieldValue } from './formik/SourceIDField.tsx';
import { SubmitButton } from './modal/Buttons.tsx';
import { LazyTable } from './table/LazyTable.tsx';
import { connectionColumns } from './table/connectionColumns.tsx';

export const FindPlayerIPs = () => {
const [sortOrder, setSortOrder] = useState<Order>('desc');
const [sortColumn, setSortColumn] =
useState<keyof PersonConnection>('created_on');
const [rowPerPageCount, setRowPerPageCount] = useState<number>(
RowsPerPage.Ten
);
const [steamID, setSteamID] = useState('');
const [page, setPage] = useState(0);
const [state, setState] = useUrlState({
page: undefined,
source_id: undefined,
asn: undefined,
cidr: undefined,
rows: undefined,
sortOrder: undefined,
sortColumn: undefined
});

const {
data: rows,
count,
loading
} = useConnections({
limit: rowPerPageCount,
offset: page * rowPerPageCount,
desc: sortOrder == 'desc',
order_by: sortColumn,
source_id: steamID,
limit: state.rows ?? RowsPerPage.TwentyFive,
offset: Number((state.page ?? 0) * (state.rows ?? RowsPerPage.Ten)),
order_by: state.sortColumn ?? 'created_on',
desc: (state.sortOrder ?? 'desc') == 'desc',
source_id: state.source_id ?? '',
asn: 0,
cidr: ''
cidr: state.cidr ?? ''
});

const onSubmit = (values: TargetIDInputValue) => {
setSteamID(values.target_id);
const onSubmit = (values: SourceIDFieldValue) => {
setState((prevState) => {
return { ...prevState, source_id: values.source_id };
});
};

return (
<Grid container spacing={2}>
<Grid xs={12}>
<Formik onSubmit={onSubmit} initialValues={{ target_id: '' }}>
<Formik onSubmit={onSubmit} initialValues={{ source_id: '' }}>
<Grid
container
direction="row"
Expand All @@ -51,7 +55,7 @@ export const FindPlayerIPs = () => {
spacing={2}
>
<Grid xs>
<TargetIDField />
<SourceIDField />
</Grid>
<Grid xs={2}>
<SubmitButton
Expand All @@ -72,28 +76,37 @@ export const FindPlayerIPs = () => {
showPager={true}
count={count}
rows={rows}
page={page}
rowsPerPage={rowPerPageCount}
sortOrder={sortOrder}
sortColumn={sortColumn}
page={state.page}
rowsPerPage={state.rows}
sortOrder={state.sortOrder}
sortColumn={state.sortColumn}
onSortColumnChanged={async (column) => {
setSortColumn(column);
setState((prevState) => {
return { ...prevState, sortColumn: column };
});
}}
onSortOrderChanged={async (direction) => {
setSortOrder(direction);
setState((prevState) => {
return { ...prevState, sortOrder: direction };
});
}}
onPageChange={(_, newPage: number) => {
setPage(newPage);
setState((prevState) => {
return { ...prevState, page: newPage };
});
}}
onRowsPerPageChange={(
event: ChangeEvent<
HTMLInputElement | HTMLTextAreaElement
>
) => {
setRowPerPageCount(
parseInt(event.target.value, 10)
);
setPage(0);
setState((prevState) => {
return {
...prevState,
rows: parseInt(event.target.value, 10),
page: 0
};
});
}}
columns={connectionColumns}
/>
Expand Down
71 changes: 42 additions & 29 deletions frontend/src/component/FindPlayerByIP.tsx → frontend/src/component/FindPlayesrByCIDR.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { ChangeEvent, useState } from 'react';
import { ChangeEvent } from 'react';
import useUrlState from '@ahooksjs/use-url-state';
import SearchIcon from '@mui/icons-material/Search';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Unstable_Grid2';
import { Formik } from 'formik';
import { PersonConnection } from '../api';
import { useConnections } from '../hooks/useConnections.ts';
import { Order, RowsPerPage } from '../util/table.ts';
import { RowsPerPage } from '../util/table.ts';
import { renderDateTime } from '../util/text.tsx';
import { LoadingPlaceholder } from './LoadingPlaceholder.tsx';
import {
Expand All @@ -16,32 +17,35 @@ import {
import { SubmitButton } from './modal/Buttons.tsx';
import { LazyTable } from './table/LazyTable.tsx';

export const FindPlayerByIP = () => {
const [sortOrder, setSortOrder] = useState<Order>('desc');
const [sortColumn, setSortColumn] =
useState<keyof PersonConnection>('created_on');
const [rowPerPageCount, setRowPerPageCount] = useState<number>(
RowsPerPage.Ten
);
const [cidr, setCIDR] = useState('');
const [page, setPage] = useState(0);
export const FindPlayesrByCIDR = () => {
const [state, setState] = useUrlState({
page: undefined,
source_id: undefined,
asn: undefined,
cidr: undefined,
rows: undefined,
sortOrder: undefined,
sortColumn: undefined
});

const {
data: rows,
count,
loading
} = useConnections({
limit: rowPerPageCount,
offset: page * rowPerPageCount,
desc: sortOrder == 'desc',
order_by: sortColumn,
cidr: cidr,
limit: state.rows ?? RowsPerPage.TwentyFive,
offset: Number((state.page ?? 0) * (state.rows ?? RowsPerPage.Ten)),
order_by: state.sortColumn ?? 'created_on',
desc: (state.sortOrder ?? 'desc') == 'desc',
source_id: state.source_id ?? '',
asn: 0,
source_id: ''
cidr: state.cidr ?? ''
});

const onSubmit = (values: CIDRInputFieldProps) => {
setCIDR(values.cidr);
setState((prevState) => {
return { ...prevState, cidr: values.cidr };
});
};

return (
Expand Down Expand Up @@ -77,28 +81,37 @@ export const FindPlayerByIP = () => {
showPager={true}
count={count}
rows={rows}
page={page}
rowsPerPage={rowPerPageCount}
sortOrder={sortOrder}
sortColumn={sortColumn}
page={state.page}
rowsPerPage={state.rows}
sortOrder={state.sortOrder}
sortColumn={state.sortColumn}
onSortColumnChanged={async (column) => {
setSortColumn(column);
setState((prevState) => {
return { ...prevState, sortColumn: column };
});
}}
onSortOrderChanged={async (direction) => {
setSortOrder(direction);
setState((prevState) => {
return { ...prevState, sortOrder: direction };
});
}}
onPageChange={(_, newPage: number) => {
setPage(newPage);
setState((prevState) => {
return { ...prevState, page: newPage };
});
}}
onRowsPerPageChange={(
event: ChangeEvent<
HTMLInputElement | HTMLTextAreaElement
>
) => {
setRowPerPageCount(
parseInt(event.target.value, 10)
);
setPage(0);
setState((prevState) => {
return {
...prevState,
rows: parseInt(event.target.value, 10),
page: 0
};
});
}}
columns={[
{
Expand Down
13 changes: 9 additions & 4 deletions frontend/src/component/NetworkInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ReactNode, useMemo, useState } from 'react';
import { ReactNode, useMemo } from 'react';
import { MapContainer, Marker, TileLayer } from 'react-leaflet';
import useUrlState from '@ahooksjs/use-url-state';
import SearchIcon from '@mui/icons-material/Search';
import Link from '@mui/material/Link';
import Table from '@mui/material/Table';
Expand Down Expand Up @@ -35,12 +36,16 @@ const InfoRow = ({
};

export const NetworkInfo = () => {
const [ip, setIP] = useState('');
const [state, setState] = useUrlState({
ip: undefined
});

const { data, loading } = useNetworkQuery({ ip: ip });
const { data, loading } = useNetworkQuery({ ip: state.ip });

const onSubmit = (values: IPFieldProps) => {
setIP(values.ip);
setState((prevState) => {
return { ...prevState, ip: values.ip };
});
};

const pos = useMemo(() => {
Expand Down
Loading

0 comments on commit 7efcf79

Please sign in to comment.