Merge pull request #3627 from fosrl/feat/ip-filtering

feat: Add IP column filtering to tables

messages/en-US.json

@@ -1573,6 +1573,8 @@
     "search": "Search…",
     "searchPlaceholder": "Search...",
     "emptySearchOptions": "No options found",
+    "ipFilterSearchPlaceholder": "Enter an IP address…",
+    "ipFilterEmptyMessage": "Enter an IP address to filter by",
     "create": "Create",
     "orgs": "Organizations",
     "loginError": "An unexpected error occurred. Please try again.",
@@ -2596,6 +2598,7 @@
     "createDomainType": "Type:",
     "createDomainName": "Name:",
     "createDomainValue": "Value:",
+    "multiSelectFilterCount": "{count} selected",
     "createDomainCnameRecords": "CNAME Records",
     "createDomainARecords": "A Records",
     "createDomainRecordNumber": "Record {number}",

server/private/routers/auditLogs/queryAccessAuditLog.ts

@@ -88,7 +88,27 @@ export const queryAccessAuditLogsQuery = z.object({
         .optional()
         .default("0")
         .transform(Number)
-        .pipe(z.int().nonnegative())
+        .pipe(z.int().nonnegative()),
+    ip: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by IP adresses"
+        })
 });
 
 export const queryAccessAuditLogsParams = z.object({
@@ -134,6 +154,9 @@ function getWhere(data: Q) {
         data.type ? eq(accessAuditLog.type, data.type) : undefined,
         data.action !== undefined
             ? eq(accessAuditLog.action, data.action)
+            : undefined,
+        data.ip && data.ip.length > 0
+            ? inArray(accessAuditLog.ip, data.ip)
             : undefined
     );
 }

server/private/routers/ws/messageHandlers.ts

@@ -16,12 +16,10 @@ import {
     handleRemoteExitNodePingMessage
 } from "#private/routers/remoteExitNode";
 import { MessageHandler } from "@server/routers/ws";
-import {
+import { handleConnectionLogMessage } from "#private/routers/newt";
-    handleConnectionLogMessage,
-} from "#private/routers/newt";
 
 export const messageHandlers: Record<string, MessageHandler> = {
     "remoteExitNode/register": handleRemoteExitNodeRegisterMessage,
     "remoteExitNode/ping": handleRemoteExitNodePingMessage,
-    "newt/access-log": handleConnectionLogMessage,
+    "newt/access-log": handleConnectionLogMessage
 };

server/routers/auditLogs/queryRequestAuditLog.ts

@@ -81,7 +81,27 @@ export const queryAccessAuditLogsQuery = z.strictObject({
         .optional()
         .default("0")
         .transform(Number)
-        .pipe(z.int().nonnegative())
+        .pipe(z.int().nonnegative()),
+    ip: z
+        .preprocess((val) => {
+            if (val === undefined || val === null || val === "") {
+                return undefined;
+            }
+            if (Array.isArray(val)) {
+                return val;
+            }
+            // the array is returned as this
+            if (typeof val === "string") {
+                return val.split(",");
+            }
+            return undefined;
+        }, z.array(z.string()))
+        .optional()
+        .catch([])
+        .openapi({
+            type: "array",
+            description: "Filter by IP adresses"
+        })
 });
 
 export const queryRequestAuditLogsParams = z.object({
@@ -126,6 +146,9 @@ function getWhere(data: Q) {
         data.path ? eq(requestAuditLog.path, data.path) : undefined,
         data.action !== undefined
             ? eq(requestAuditLog.action, data.action)
+            : undefined,
+        data.ip && data.ip.length > 0
+            ? inArray(requestAuditLog.ip, data.ip)
             : undefined
     );
 }

src/app/[orgId]/settings/logs/access/page.tsx

@@ -12,6 +12,7 @@ import { DateTimeValue } from "@app/components/DateTimePicker";
 import { ArrowUpRight, Key, User } from "lucide-react";
 import Link from "next/link";
 import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
+import { ColumnMultiFilterButton } from "@app/components/ColumnMultiFilterButton";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { build } from "@server/build";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
@@ -26,6 +27,7 @@ import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { logQueries } from "@app/lib/queries";
 import { useQuery } from "@tanstack/react-query";
 import type { QueryAccessAuditLogResponse } from "@server/routers/auditLogs/types";
+import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -45,12 +47,14 @@ export default function GeneralPage() {
         resourceId?: string;
         location?: string;
         actor?: string;
+        ip?: string[];
     }>({
         action: searchParams.get("action") || undefined,
         type: searchParams.get("type") || undefined,
         resourceId: searchParams.get("resourceId") || undefined,
         location: searchParams.get("location") || undefined,
-        actor: searchParams.get("actor") || undefined
+        actor: searchParams.get("actor") || undefined,
+        ip: searchParams.getAll("ip") || undefined
     });
 
     const [currentPage, setCurrentPage] = useState<number>(0);
@@ -176,7 +180,7 @@ export default function GeneralPage() {
 
     const handleFilterChange = (
         filterType: keyof typeof filters,
-        value: string | undefined
+        value: string | string[] | undefined
     ) => {
         const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
@@ -194,10 +198,13 @@ export default function GeneralPage() {
     ) => {
         const params = new URLSearchParams(searchParams);
         Object.entries(newFilters).forEach(([key, value]) => {
-            if (value) {
-                params.set(key, value);
-            } else {
             params.delete(key);
+            if (typeof value === "string") {
+                params.set(key, value);
+            } else if (typeof value !== "undefined" && "length" in value) {
+                for (const element of value) {
+                    params.append(key, element);
+                }
             }
         });
         router.replace(`?${params.toString()}`, { scroll: false });
@@ -205,6 +212,7 @@ export default function GeneralPage() {
 
     const exportData = async () => {
         try {
+            const { ip, ...restFilters } = filters;
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -212,13 +220,20 @@ export default function GeneralPage() {
                 timeEnd: dateRange.endDate?.date
                     ? new Date(dateRange.endDate.date).toISOString()
                     : undefined,
-                ...filters
+                ...restFilters
             };
 
-            const response = await api.get(`/org/${orgId}/logs/access/export`, {
+            // axios serializes arrays as `ip[]=…`, which express's query
+            // parser does not read back as `ip`, so pass them in the URL
+            const sp = new URLSearchParams((ip ?? []).map((ip) => ["ip", ip]));
+
+            const response = await api.get(
+                `/org/${orgId}/logs/access/export?${sp.toString()}`,
+                {
                     responseType: "blob",
                     params
-            });
+                }
+            );
 
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
@@ -297,7 +312,24 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: () => <span className="px-2">{t("ip")}</span>,
+            header: () => (
+                <span className="px-2">
+                    <ColumnMultiFilterButton
+                        options={(filters.ip ?? []).map((ip) => ({
+                            label: ip,
+                            value: ip
+                        }))}
+                        label={t("ip")}
+                        allowArbitraryValues
+                        searchPlaceholder={t("ipFilterSearchPlaceholder")}
+                        emptyMessage={t("ipFilterEmptyMessage")}
+                        selectedValues={filters.ip ?? []}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("ip", value)
+                        }
+                    />
+                </span>
+            ),
             cell: ({ row }) => {
                 return row.original.ip ? (
                     row.original.ip
@@ -315,7 +347,7 @@ export default function GeneralPage() {
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
-                                    label: location
+                                    label: `${location} ${countryCodeToFlagEmoji(location)}`
                                 })
                             )}
                             label={t("location")}
@@ -334,7 +366,8 @@ export default function GeneralPage() {
                     <span className="flex items-center gap-1">
                         {row.original.location ? (
                             <span className="text-muted-foreground text-xs">
-                                {row.original.location}
+                                {row.original.location}{" "}
+                                {countryCodeToFlagEmoji(row.original.location)}
                             </span>
                         ) : (
                             <span className="text-muted-foreground text-xs">

src/app/[orgId]/settings/logs/request/page.tsx

@@ -23,6 +23,8 @@ import { useMemo, useState, useTransition } from "react";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import type { QueryRequestAuditLogResponse } from "@server/routers/auditLogs/types";
 import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
+import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji";
+import { ColumnMultiFilterButton } from "@app/components/ColumnMultiFilterButton";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -47,6 +49,7 @@ export default function GeneralPage() {
         method?: string;
         reason?: string;
         path?: string;
+        ip?: string[];
     }>({
         action: searchParams.get("action") || undefined,
         host: searchParams.get("host") || undefined,
@@ -55,7 +58,8 @@ export default function GeneralPage() {
         actor: searchParams.get("actor") || undefined,
         method: searchParams.get("method") || undefined,
         reason: searchParams.get("reason") || undefined,
-        path: searchParams.get("path") || undefined
+        path: searchParams.get("path") || undefined,
+        ip: searchParams.getAll("ip") || undefined
     });
 
     const getDefaultDateRange = () => {
@@ -179,7 +183,7 @@ export default function GeneralPage() {
 
     const handleFilterChange = (
         filterType: keyof typeof filters,
-        value: string | undefined
+        value: string | string[] | undefined
     ) => {
         const newFilters = { ...filters, [filterType]: value };
         setFilters(newFilters);
@@ -197,10 +201,13 @@ export default function GeneralPage() {
     ) => {
         const params = new URLSearchParams(searchParams);
         Object.entries(newFilters).forEach(([key, value]) => {
-            if (value) {
-                params.set(key, value);
-            } else {
             params.delete(key);
+            if (typeof value === "string") {
+                params.set(key, value);
+            } else if (typeof value !== "undefined" && "length" in value) {
+                for (const element of value) {
+                    params.append(key, element);
+                }
             }
         });
         router.replace(`?${params.toString()}`, { scroll: false });
@@ -209,6 +216,7 @@ export default function GeneralPage() {
     const exportData = async () => {
         try {
             // Prepare query params for export
+            const { ip, ...restFilters } = filters;
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -216,11 +224,15 @@ export default function GeneralPage() {
                 timeEnd: dateRange.endDate?.date
                     ? new Date(dateRange.endDate.date).toISOString()
                     : undefined,
-                ...filters
+                ...restFilters
             };
 
+            // axios serializes arrays as `ip[]=…`, which express's query
+            // parser does not read back as `ip`, so pass them in the URL
+            const sp = new URLSearchParams((ip ?? []).map((ip) => ["ip", ip]));
+
             const response = await api.get(
-                `/org/${orgId}/logs/request/export`,
+                `/org/${orgId}/logs/request/export?${sp.toString()}`,
                 {
                     responseType: "blob",
                     params
@@ -351,7 +363,24 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: ({ column }) => <span className="px-2">{t("ip")}</span>,
+            header: ({ column }) => (
+                <span className="px-2">
+                    <ColumnMultiFilterButton
+                        options={(filters.ip ?? []).map((ip) => ({
+                            label: ip,
+                            value: ip
+                        }))}
+                        label={t("ip")}
+                        allowArbitraryValues
+                        searchPlaceholder={t("ipFilterSearchPlaceholder")}
+                        emptyMessage={t("ipFilterEmptyMessage")}
+                        selectedValues={filters.ip ?? []}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("ip", value)
+                        }
+                    />
+                </span>
+            ),
             cell: ({ row }) => {
                 return row.original.ip ? (
                     row.original.ip
@@ -369,7 +398,7 @@ export default function GeneralPage() {
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
-                                    label: location
+                                    label: `${location} ${countryCodeToFlagEmoji(location)}`
                                 })
                             )}
                             selectedValue={filters.location}
@@ -389,7 +418,8 @@ export default function GeneralPage() {
                     <span className="flex items-center gap-1">
                         {row.original.location ? (
                             <span className="text-muted-foreground text-xs">
-                                {row.original.location}
+                                {row.original.location}{" "}
+                                {countryCodeToFlagEmoji(row.original.location)}
                             </span>
                         ) : (
                             <span className="text-muted-foreground text-xs">

src/components/ColumnFilterButton.tsx

@@ -21,7 +21,7 @@ import { useTranslations } from "next-intl";
 
 interface FilterOption {
     value: string;
-    label: string;
+    label: React.ReactNode;
 }
 
 interface ColumnFilterButtonProps {
@@ -32,6 +32,7 @@ interface ColumnFilterButtonProps {
     emptyMessage?: string;
     className?: string;
     label: string;
+    allowArbitraryValues?: boolean;
 }
 
 export function ColumnFilterButton({
@@ -41,7 +42,8 @@ export function ColumnFilterButton({
     searchPlaceholder = "Search...",
     emptyMessage = "No options found",
     className,
-    label
+    label,
+    allowArbitraryValues
 }: ColumnFilterButtonProps) {
     const [open, setOpen] = useState(false);
 
@@ -101,7 +103,7 @@ export function ColumnFilterButton({
                             {options.map((option) => (
                                 <CommandItem
                                     key={option.value}
-                                    value={option.label}
+                                    value={option.value}
                                     onSelect={() => {
                                         onValueChange(
                                             selectedValue === option.value

src/components/ColumnMultiFilterButton.tsx

@@ -35,6 +35,7 @@ type ColumnMultiFilterButtonProps = {
     emptyMessage?: string;
     className?: string;
     label: string;
+    allowArbitraryValues?: boolean;
 };
 
 export function ColumnMultiFilterButton({
@@ -44,11 +45,26 @@ export function ColumnMultiFilterButton({
     searchPlaceholder = "Search...",
     emptyMessage = "No options found",
     className,
-    label
+    label,
+    allowArbitraryValues
 }: ColumnMultiFilterButtonProps) {
     const [open, setOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
     const t = useTranslations();
 
+    const visibleOptions = useMemo<FilterOption[]>(() => {
+        const newOptions = [...options];
+
+        if (allowArbitraryValues && searchQuery.trim().length > 0) {
+            newOptions.push({
+                label: searchQuery,
+                value: searchQuery
+            });
+        }
+
+        return newOptions;
+    }, [options, allowArbitraryValues, searchQuery]);
+
     const selectedSet = useMemo(
         () => new Set(selectedValues),
         [selectedValues]
@@ -64,7 +80,7 @@ export function ColumnMultiFilterButton({
                 selectedValues[0]
             );
         }
-        return t("accessUsersRoleFilterCount", {
+        return t("multiSelectFilterCount", {
             count: selectedValues.length
         });
     }, [selectedValues, options, t]);
@@ -108,7 +124,11 @@ export function ColumnMultiFilterButton({
                 align="start"
             >
                 <Command>
-                    <CommandInput placeholder={searchPlaceholder} />
+                    <CommandInput
+                        placeholder={searchPlaceholder}
+                        value={searchQuery}
+                        onValueChange={setSearchQuery}
+                    />
                     <CommandList>
                         <CommandEmpty>{emptyMessage}</CommandEmpty>
                         <CommandGroup>
@@ -123,7 +143,7 @@ export function ColumnMultiFilterButton({
                                     {t("accessFilterClear")}
                                 </CommandItem>
                             )}
-                            {options.map((option) => (
+                            {visibleOptions.map((option) => (
                                 <CommandItem
                                     key={option.value}
                                     value={option.label}

src/lib/queries.ts

@@ -1,3 +1,8 @@
+import {
+    getAiBudgetScopeListPath,
+    type AiBudgetScope
+} from "@app/lib/aiBudgetScope";
+import type { AiProviderType } from "@app/lib/aiProviderDefaults";
 import type { LauncherQueryFilters } from "@app/lib/launcherSearchParams";
 import { buildLauncherSearchParams } from "@app/lib/launcherSearchParams";
 import { build } from "@server/build";
@@ -5,15 +10,21 @@ import {
     StatusHistoryResponse,
     type BatchedStatusHistoryResponse
 } from "@server/lib/statusHistory";
+import type { ListAiBudgetsByScopeResponse } from "@server/routers/aiBudget/types";
+import type {
+    ListAiModelsResponse,
+    ListAiProvidersResponse,
+    ListCatalogModelsResponse
+} from "@server/routers/aiProvider/types";
 import type { ListAlertRulesResponse } from "@server/routers/alertRule/types";
 import type {
-    QueryRequestAnalyticsResponse,
     QueryAiUsageFilterOptionsResponse,
     QueryAiUsageOverviewResponse,
     QueryAiUsageProvidersResponse,
     QueryAiUsageResourcesResponse,
     QueryAiUsageUsersRolesResponse,
-    QueryAiUsageVirtualApiKeysResponse
+    QueryAiUsageVirtualApiKeysResponse,
+    QueryRequestAnalyticsResponse
 } from "@server/routers/auditLogs";
 import type {
     QueryAccessAuditLogResponse,
@@ -34,6 +45,7 @@ import type {
 import type { GetDomainResponse } from "@server/routers/domain/getDomain";
 import { ListHealthChecksResponse } from "@server/routers/healthChecks/types";
 import type { ListOrgLabelsResponse } from "@server/routers/labels/types";
+import type { ListLauncherAiModelsResponse } from "@server/routers/launcher/listLauncherAiModels";
 import type {
     LauncherResource,
     ListLauncherGroupsResponse,
@@ -43,9 +55,8 @@ import type {
     ListLauncherSitesResponse,
     ListLauncherViewsResponse
 } from "@server/routers/launcher/types";
-import type { ListLauncherAiModelsResponse } from "@server/routers/launcher/listLauncherAiModels";
-import type { ListMyVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
 import type { GetResourcePolicyResponse } from "@server/routers/policy";
+import type { ListRemoteExitNodesResponse } from "@server/routers/remoteExitNode/types";
 import type {
     GetResourcePoliciesResponse,
     GetResourceWhitelistResponse,
@@ -59,7 +70,6 @@ import type {
 import type { GetResourceResponse } from "@server/routers/resource/getResource";
 import type { GetResourceAuthInfoResponse } from "@server/routers/resource/getResourceAuthInfo";
 import type { ListResourcePoliciesResponse } from "@server/routers/resource/types";
-import type { ListRemoteExitNodesResponse } from "@server/routers/remoteExitNode/types";
 import type { ListRolesResponse } from "@server/routers/role";
 import type { ListSitesResponse } from "@server/routers/site";
 import type {
@@ -71,18 +81,8 @@ import type {
 } from "@server/routers/siteResource";
 import type { GetSiteResourceResponse } from "@server/routers/siteResource/getSiteResource";
 import type { ListTargetsResponse } from "@server/routers/target";
-import type {
-    ListAiModelsResponse,
-    ListAiProvidersResponse,
-    ListCatalogModelsResponse
-} from "@server/routers/aiProvider/types";
-import type { AiProviderType } from "@app/lib/aiProviderDefaults";
-import type { ListAiBudgetsByScopeResponse } from "@server/routers/aiBudget/types";
-import {
-    getAiBudgetScopeListPath,
-    type AiBudgetScope
-} from "@app/lib/aiBudgetScope";
 import type { ListUsersResponse } from "@server/routers/user";
+import type { ListMyVirtualApiKeysResponse } from "@server/routers/virtualApiKey/types";
 import type ResponseT from "@server/types/Response";
 import {
     infiniteQueryOptions,
@@ -1000,7 +1000,8 @@ export const httpLogsFiltersSchema = z.object({
     actor: z.string().optional().catch(undefined),
     method: z.string().optional().catch(undefined),
     reason: z.string().optional().catch(undefined),
-    path: z.string().optional().catch(undefined)
+    path: z.string().optional().catch(undefined),
+    ip: z.array(z.string()).optional().catch(undefined)
 });
 
 export type HttpLogFilters = z.output<typeof httpLogsFiltersSchema>;
@@ -1026,7 +1027,8 @@ export const accessLogsFiltersSchema = z.object({
     action: z.string().optional().catch(undefined),
     location: z.string().optional().catch(undefined),
     actor: z.string().optional().catch(undefined),
-    type: z.string().optional().catch(undefined)
+    type: z.string().optional().catch(undefined),
+    ip: z.array(z.string()).optional().catch(undefined)
 });
 
 export type AccessLogFilters = z.output<typeof accessLogsFiltersSchema>;
@@ -1139,10 +1141,13 @@ export const logQueries = {
         queryOptions({
             queryKey: ["REQUEST_LOGS", orgId, "ALL", filters] as const,
             queryFn: async ({ signal, meta }) => {
-                const { page, pageSize, ...rest } = filters;
+                const { page, pageSize, ip, ...rest } = filters;
+                const sp = new URLSearchParams(
+                    (ip ?? []).map((ip) => ["ip", ip])
+                );
                 const res = await meta!.api.get<
                     AxiosResponse<QueryRequestAuditLogResponse>
-                >(`/org/${orgId}/logs/request`, {
+                >(`/org/${orgId}/logs/request?${sp.toString()}`, {
                     params: {
                         ...rest,
                         limit: pageSize,
@@ -1164,10 +1169,13 @@ export const logQueries = {
         queryOptions({
             queryKey: ["ACCESS_LOGS", orgId, "ALL", filters] as const,
             queryFn: async ({ signal, meta }) => {
-                const { page, pageSize, ...rest } = filters;
+                const { page, pageSize, ip, ...rest } = filters;
+                const sp = new URLSearchParams(
+                    (ip ?? []).map((ip) => ["ip", ip])
+                );
                 const res = await meta!.api.get<
                     AxiosResponse<QueryAccessAuditLogResponse>
-                >(`/org/${orgId}/logs/access`, {
+                >(`/org/${orgId}/logs/access?${sp.toString()}`, {
                     params: {
                         ...rest,
                         limit: pageSize,