IP Network Info Query & Player Search By CIDR

docker/docker-compose-dev.yml

@@ -21,7 +21,9 @@ services:
     command: ./gbans serve
 
   postgres:
-    image: postgis/postgis:15-3.3
+    build:
+      context: "."
+      dockerfile: postgres-ip4r.Dockerfile
     restart: always
     shm_size: 1gb
     ports:

docker/postgres-ip4r.Dockerfile

@@ -0,0 +1,7 @@
+FROM postgres:15-bullseye
+
+RUN apt-get update \
+      && apt-cache showpkg postgresql-$PG_MAJOR-ip4r \
+      && apt-get install -y --no-install-recommends \
+           postgresql-$PG_MAJOR-ip4r \
+      && rm -rf /var/lib/apt/lists/*

frontend/package.json

@@ -32,7 +32,7 @@
     "@date-io/date-fns": "^2.17.0",
     "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.11.5",
     "@eslint/js": "^8.57.0",
     "@fontsource/roboto": "^5.0.12",
     "@loadable/component": "^5.16.3",
@@ -51,8 +51,8 @@
     "@types/loadable__component": "^5.13.9",
     "@types/lodash-es": "^4.17.12",
     "@types/minimatch": "^5.1.2",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.73",
+    "@types/node": "^20.12.3",
+    "@types/react": "^18.2.74",
     "@types/react-dom": "^18.2.23",
     "@types/steamid": "^2.0.3",
     "@types/video-react": "^0.15.6",
@@ -95,7 +95,7 @@
     "string-to-color": "^2.2.2",
     "typescript": "^5.4.3",
     "video-react": "^0.16.0",
-    "vite": "^5.2.6",
+    "vite": "^5.2.7",
     "vite-plugin-html": "^3.2.2",
     "vitest": "^1.4.0",
     "yup": "^1.4.0"

frontend/src/api/profile.ts

@@ -231,41 +231,82 @@ export const apiGetNotifications = async (
     );
 };
 
-export type PersonConnectionQuery = {
-    cidr?: string;
-    source_id?: string;
-    server_id?: number;
-    asn?: number;
-} & QueryFilter<PersonConnection>;
-
-export type PersonConnectionSteamIDQuery = {
+export type ConnectionQuery = {
+    cidr: string;
     source_id: string;
+    server_id?: number;
+    asn: number;
 } & QueryFilter<PersonConnection>;
 
 export const apiGetConnections = async (
-    opts: PersonConnectionQuery,
+    opts: ConnectionQuery,
     abortController: AbortController
 ) => {
-    const resp = await apiCall<
-        LazyResult<PersonConnection>,
-        PersonConnectionQuery
-    >(`/api/connections`, 'POST', opts, abortController);
+    const resp = await apiCall<LazyResult<PersonConnection>, ConnectionQuery>(
+        `/api/connections`,
+        'POST',
+        opts,
+        abortController
+    );
 
     resp.data = resp.data.map(transformCreatedOnDate);
     return resp;
 };
 
-export const apiGetConnectionsSteam = async (
-    opts: PersonConnectionSteamIDQuery,
+export type IPQuery = {
+    ip: string;
+};
+
+export type NetworkLocation = {
+    cidr: string;
+    country_code: string;
+    country_name: string;
+    region_name: string;
+    city_name: string;
+    lat_long: {
+        latitude: number;
+        longitude: number;
+    };
+};
+
+export type NetworkASN = {
+    cidr: string;
+    as_num: number;
+    as_name: string;
+};
+
+export type NetworkProxy = {
+    cidr: string;
+    proxy_type: string;
+    country_code: string;
+    country_name: string;
+    region_name: string;
+    city_name: string;
+    isp: string;
+    domain: string;
+    usage_type: string;
+    asn: number;
+    as: string;
+    last_seen: string;
+    threat: string;
+};
+
+export type NetworkDetails = {
+    location: NetworkLocation;
+    asn: NetworkASN;
+    proxy: NetworkProxy;
+};
+
+export const apiGetNetworkDetails = async (
+    opts: IPQuery,
     abortController: AbortController
 ) => {
-    const resp = await apiCall<
-        LazyResult<PersonConnection>,
-        PersonConnectionQuery
-    >(`/api/connections/steam`, 'POST', opts, abortController);
-
-    resp.data = resp.data.map(transformCreatedOnDate);
-    return resp;
+    return await apiCall<NetworkDetails, IPQuery>(
+        `/api/network`,
+        'POST',
+        opts,
+        abortController
+    );
 };
 
 interface PermissionUpdate {

frontend/src/component/FindPlayerByIP.tsx

@@ -0,0 +1,171 @@
+import { ChangeEvent, useState } from 'react';
+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 { renderDateTime } from '../util/text.tsx';
+import { LoadingPlaceholder } from './LoadingPlaceholder.tsx';
+import {
+    CIDRInputFieldProps,
+    NetworkRangeField
+} from './formik/NetworkRangeField.tsx';
+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);
+
+    const {
+        data: rows,
+        count,
+        loading
+    } = useConnections({
+        limit: rowPerPageCount,
+        offset: page * rowPerPageCount,
+        desc: sortOrder == 'desc',
+        order_by: sortColumn,
+        cidr: cidr,
+        asn: 0,
+        source_id: ''
+    });
+
+    const onSubmit = (values: CIDRInputFieldProps) => {
+        setCIDR(values.cidr);
+    };
+
+    return (
+        <Grid container>
+            <Grid xs={12}>
+                <Formik onSubmit={onSubmit} initialValues={{ cidr: '' }}>
+                    <Grid
+                        container
+                        direction="row"
+                        alignItems="top"
+                        justifyContent="center"
+                        spacing={2}
+                    >
+                        <Grid xs>
+                            <NetworkRangeField />
+                        </Grid>
+                        <Grid xs={2}>
+                            <SubmitButton
+                                label={'Submit'}
+                                fullWidth
+                                disabled={loading}
+                                startIcon={<SearchIcon />}
+                            />
+                        </Grid>
+                    </Grid>
+                </Formik>
+            </Grid>
+            <Grid xs={12}>
+                {loading ? (
+                    <LoadingPlaceholder />
+                ) : (
+                    <LazyTable<PersonConnection>
+                        showPager={true}
+                        count={count}
+                        rows={rows}
+                        page={page}
+                        rowsPerPage={rowPerPageCount}
+                        sortOrder={sortOrder}
+                        sortColumn={sortColumn}
+                        onSortColumnChanged={async (column) => {
+                            setSortColumn(column);
+                        }}
+                        onSortOrderChanged={async (direction) => {
+                            setSortOrder(direction);
+                        }}
+                        onPageChange={(_, newPage: number) => {
+                            setPage(newPage);
+                        }}
+                        onRowsPerPageChange={(
+                            event: ChangeEvent<
+                                HTMLInputElement | HTMLTextAreaElement
+                            >
+                        ) => {
+                            setRowPerPageCount(
+                                parseInt(event.target.value, 10)
+                            );
+                            setPage(0);
+                        }}
+                        columns={[
+                            {
+                                label: 'Created',
+                                tooltip: 'Created On',
+                                sortKey: 'created_on',
+                                sortType: 'date',
+                                align: 'left',
+                                width: '150px',
+                                sortable: true,
+                                renderer: (obj: PersonConnection) => (
+                                    <Typography variant={'body1'}>
+                                        {renderDateTime(obj.created_on)}
+                                    </Typography>
+                                )
+                            },
+                            {
+                                label: 'Name',
+                                tooltip: 'Name',
+                                sortKey: 'persona_name',
+                                sortType: 'string',
+                                align: 'left',
+                                width: '200px',
+                                sortable: true
+                            },
+                            {
+                                label: 'SteamID',
+                                tooltip: 'Name',
+                                sortKey: 'steam_id',
+                                sortType: 'string',
+                                align: 'left',
+                                width: '200px',
+                                sortable: true
+                            },
+                            {
+                                label: 'IP Address',
+                                tooltip: 'IP Address',
+                                sortKey: 'ip_addr',
+                                sortType: 'string',
+                                align: 'left',
+                                width: '150px',
+                                sortable: true
+                            },
+                            {
+                                label: 'Server',
+                                tooltip: 'IP Address',
+                                sortKey: 'ip_addr',
+                                sortType: 'string',
+                                align: 'left',
+                                sortable: true,
+                                renderer: (obj: PersonConnection) => {
+                                    return (
+                                        <Tooltip
+                                            title={obj.server_name ?? 'Unknown'}
+                                        >
+                                            <Typography variant={'body1'}>
+                                                {obj.server_name_short ??
+                                                    'Unknown'}
+                                            </Typography>
+                                        </Tooltip>
+                                    );
+                                }
+                            }
+                        ]}
+                    />
+                )}
+            </Grid>
+        </Grid>
+    );
+};