🚧 wip: add ip is column filter

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,7 +146,8 @@ function getWhere(data: Q) {
         data.path ? eq(requestAuditLog.path, data.path) : undefined,
         data.action !== undefined
             ? eq(requestAuditLog.action, data.action)
-            : undefined
+            : undefined,
+        data.ip ? inArray(requestAuditLog.ip, data.ip) : undefined
     );
 }
 

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

@@ -21,6 +21,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();
@@ -43,6 +45,7 @@ export default function GeneralPage() {
         method?: string;
         reason?: string;
         path?: string;
+        ip?: string[];
     }>({
         action: searchParams.get("action") || undefined,
         host: searchParams.get("host") || undefined,
@@ -51,7 +54,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 = () => {
@@ -158,7 +162,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);
@@ -176,10 +180,13 @@ export default function GeneralPage() {
     ) => {
         const params = new URLSearchParams(searchParams);
         Object.entries(newFilters).forEach(([key, value]) => {
-            if (value) {
+            params.delete(key);
+            if (typeof value === "string") {
                 params.set(key, value);
-            } else {
-                params.delete(key);
+            } else if (typeof value !== "undefined" && "length" in value) {
+                for (const element of value) {
+                    params.append(key, element);
+                }
             }
         });
         router.replace(`?${params.toString()}`, { scroll: false });
@@ -328,7 +335,22 @@ 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
+                        selectedValues={filters.ip ?? []}
+                        onSelectedValuesChange={(value) =>
+                            handleFilterChange("ip", value)
+                        }
+                    />
+                </span>
+            )
         },
         {
             accessorKey: "location",
@@ -339,7 +361,7 @@ export default function GeneralPage() {
                             options={filterAttributes.locations.map(
                                 (location) => ({
                                     value: location,
-                                    label: location
+                                    label: `${location} ${countryCodeToFlagEmoji(location)}`
                                 })
                             )}
                             selectedValue={filters.location}
@@ -359,7 +381,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]
@@ -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

@@ -42,7 +42,7 @@ import {
     queryOptions
 } from "@tanstack/react-query";
 import type { AxiosResponse } from "axios";
-import z, { meta } from "zod";
+import z from "zod";
 import { remote } from "./api";
 import { durationToMs } from "./durationToMs";
 import type { ListOrgLabelsResponse } from "@server/routers/labels/types";
@@ -782,7 +782,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),
+    ips: z.array(z.string()).optional().catch(undefined)
 });
 
 export type HttpLogFilters = z.output<typeof httpLogsFiltersSchema>;