calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-09-02 01:09:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
feat: Add IP column filtering to tables
This commit is contained in:
Owen Schwartz
2026-08-31 16:59:34 -04:00
committed by GitHub
parent 22db0319c2 d00b9478a2
commit c36cf698c1
9 changed files with 198 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[orgId]/settings/logs/access/page.tsx
+46 -13
View File
@@ -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.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 });
@@ -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`, {
responseType: "blob",
params
});
// 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
+40 -10
View File
@@ -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.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 });
@@ -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
+5 -3
View File
@@ -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
+24 -4
View File
@@ -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
+30 -22
View File
@@ -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,