calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-07-06 04:10:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 Column filter buttons for log tables

Browse Source
This commit is contained in:
Fred KISSIE
2026-06-05 21:47:08 +02:00
parent 95ce91d94b
commit a994f8ff07
3 changed files with 71 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@ import { ColumnDef } from "@tanstack/react-table";
import { DateTimeValue } from "@app/components/DateTimePicker"; import { DateTimeValue } from "@app/components/DateTimePicker";
import { ArrowUpRight, Key, User } from "lucide-react"; import { ArrowUpRight, Key, User } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { ColumnFilter } from "@app/components/ColumnFilter"; import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle"; import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { build } from "@server/build"; import { build } from "@server/build";
import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo"; import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
@@ -233,7 +233,7 @@ export default function GeneralPage() {
{ {
accessorKey: "timestamp", accessorKey: "timestamp",
header: () => { header: () => {
return t("timestamp"); return <span className="px-2">{t("timestamp")}</span>;
}, },
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
@@ -249,19 +249,19 @@ export default function GeneralPage() {
accessorKey: "action", accessorKey: "action",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("action")}</span> <ColumnFilterButton
<ColumnFilter
options={[ options={[
{ value: "true", label: "Allowed" }, { value: "true", label: "Allowed" },
{ value: "false", label: "Denied" } { value: "false", label: "Denied" }
]} ]}
label={t("action")}
selectedValue={filters.action} selectedValue={filters.action}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("action", value) handleFilterChange("action", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -276,27 +276,27 @@ export default function GeneralPage() {
}, },
{ {
accessorKey: "ip", accessorKey: "ip",
header: () => t("ip") header: () => <span className="px-2">{t("ip")}</span>
}, },
{ {
accessorKey: "location", accessorKey: "location",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("location")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.locations.map( options={filterAttributes.locations.map(
(location) => ({ (location) => ({
value: location, value: location,
label: location label: location
}) })
)} )}
label={t("location")}
selectedValue={filters.location} selectedValue={filters.location}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("location", value) handleFilterChange("location", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -321,19 +321,19 @@ export default function GeneralPage() {
accessorKey: "resourceName", accessorKey: "resourceName",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("resource")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.resources.map((res) => ({ options={filterAttributes.resources.map((res) => ({
value: res.id.toString(), value: res.id.toString(),
label: res.name || "Unnamed Resource" label: res.name || "Unnamed Resource"
}))} }))}
label={t("resource")}
selectedValue={filters.resourceId} selectedValue={filters.resourceId}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("resourceId", value) handleFilterChange("resourceId", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -359,9 +359,8 @@ export default function GeneralPage() {
accessorKey: "type", accessorKey: "type",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("type")}</span> <ColumnFilterButton
<ColumnFilter
options={[ options={[
{ value: "password", label: "Password" }, { value: "password", label: "Password" },
{ value: "pincode", label: "Pincode" }, { value: "pincode", label: "Pincode" },
@@ -372,12 +371,13 @@ export default function GeneralPage() {
}, },
{ value: "ssh", label: "SSH" } { value: "ssh", label: "SSH" }
]} ]}
label={t("type")}
selectedValue={filters.type} selectedValue={filters.type}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("type", value) handleFilterChange("type", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -395,19 +395,19 @@ export default function GeneralPage() {
accessorKey: "actor", accessorKey: "actor",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("actor")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.actors.map((actor) => ({ options={filterAttributes.actors.map((actor) => ({
value: actor, value: actor,
label: actor label: actor
}))} }))}
label={t("actor")}
selectedValue={filters.actor} selectedValue={filters.actor}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("actor", value) handleFilterChange("actor", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -433,7 +433,7 @@ export default function GeneralPage() {
}, },
{ {
accessorKey: "actorId", accessorKey: "actorId",
header: () => t("actorId"), header: () => <span className="px-2">{t("actorId")}</span>,
cell: ({ row }) => ( cell: ({ row }) => (
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">
{row.original.actorId || "-"} {row.original.actorId || "-"}

30
src/app/[orgId]/settings/logs/action/page.tsx
View File

@@ -1,5 +1,5 @@
"use client"; "use client";
import { ColumnFilter } from "@app/components/ColumnFilter"; import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
import { DateTimeValue } from "@app/components/DateTimePicker"; import { DateTimeValue } from "@app/components/DateTimePicker";
import { LogDataTable } from "@app/components/LogDataTable"; import { LogDataTable } from "@app/components/LogDataTable";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert"; import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -219,9 +219,7 @@ export default function GeneralPage() {
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
accessorKey: "timestamp", accessorKey: "timestamp",
header: () => { header: () => <span className="px-2">{t("timestamp")}</span>,
return t("timestamp");
},
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
@@ -236,16 +234,16 @@ export default function GeneralPage() {
accessorKey: "action", accessorKey: "action",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("action")}</span> <ColumnFilterButton
<ColumnFilter
options={[]} options={[]}
label={t("action")}
selectedValue={filters.action} selectedValue={filters.action}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("action", value) handleFilterChange("action", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -263,19 +261,19 @@ export default function GeneralPage() {
accessorKey: "actor", accessorKey: "actor",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("actor")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.actors.map((actor) => ({ options={filterAttributes.actors.map((actor) => ({
value: actor, value: actor,
label: actor label: actor
}))} }))}
label={t("actor")}
selectedValue={filters.actor} selectedValue={filters.actor}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("actor", value) handleFilterChange("actor", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -295,9 +293,7 @@ export default function GeneralPage() {
}, },
{ {
accessorKey: "actorId", accessorKey: "actorId",
header: () => { header: () => <span className="px-2">{t("actorId")}</span>,
return t("actorId");
},
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
<span className="flex items-center gap-1"> <span className="flex items-center gap-1">

64
src/app/[orgId]/settings/logs/connection/page.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { Button } from "@app/components/ui/button"; import { Button } from "@app/components/ui/button";
import { ColumnFilter } from "@app/components/ColumnFilter"; import { ColumnFilterButton } from "@app/components/ColumnFilterButton";
import { DateTimeValue } from "@app/components/DateTimePicker"; import { DateTimeValue } from "@app/components/DateTimePicker";
import { LogDataTable } from "@app/components/LogDataTable"; import { LogDataTable } from "@app/components/LogDataTable";
import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert"; import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
@@ -256,9 +256,7 @@ export default function ConnectionLogsPage() {
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
accessorKey: "startedAt", accessorKey: "startedAt",
header: () => { header: () => <span className="px-2">{t("timestamp")}</span>,
return t("timestamp");
},
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
@@ -273,21 +271,21 @@ export default function ConnectionLogsPage() {
accessorKey: "protocol", accessorKey: "protocol",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("protocol")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.protocols.map( options={filterAttributes.protocols.map(
(protocol) => ({ (protocol) => ({
label: protocol.toUpperCase(), label: protocol.toUpperCase(),
value: protocol value: protocol
}) })
)} )}
label={t("protocol")}
selectedValue={filters.protocol} selectedValue={filters.protocol}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("protocol", value) handleFilterChange("protocol", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -304,19 +302,19 @@ export default function ConnectionLogsPage() {
accessorKey: "resourceName", accessorKey: "resourceName",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("resource")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.resources.map((res) => ({ options={filterAttributes.resources.map((res) => ({
value: res.id.toString(), value: res.id.toString(),
label: res.name || "Unnamed Resource" label: res.name || "Unnamed Resource"
}))} }))}
label={t("resource")}
selectedValue={filters.siteResourceId} selectedValue={filters.siteResourceId}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("siteResourceId", value) handleFilterChange("siteResourceId", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -345,19 +343,19 @@ export default function ConnectionLogsPage() {
accessorKey: "clientName", accessorKey: "clientName",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("client")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.clients.map((c) => ({ options={filterAttributes.clients.map((c) => ({
value: c.id.toString(), value: c.id.toString(),
label: c.name label: c.name
}))} }))}
label={t("client")}
selectedValue={filters.clientId} selectedValue={filters.clientId}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("clientId", value) handleFilterChange("clientId", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -388,19 +386,19 @@ export default function ConnectionLogsPage() {
accessorKey: "userEmail", accessorKey: "userEmail",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("user")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.users.map((u) => ({ options={filterAttributes.users.map((u) => ({
value: u.id, value: u.id,
label: u.email || u.id label: u.email || u.id
}))} }))}
label={t("user")}
selectedValue={filters.userId} selectedValue={filters.userId}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("userId", value) handleFilterChange("userId", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -419,9 +417,7 @@ export default function ConnectionLogsPage() {
}, },
{ {
accessorKey: "sourceAddr", accessorKey: "sourceAddr",
header: () => { header: () => <span className="px-2">{t("sourceAddress")}</span>,
return t("sourceAddress");
},
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
<span className="whitespace-nowrap font-mono text-xs"> <span className="whitespace-nowrap font-mono text-xs">
@@ -434,19 +430,19 @@ export default function ConnectionLogsPage() {
accessorKey: "destAddr", accessorKey: "destAddr",
header: () => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("destinationAddress")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.destAddrs.map((addr) => ({ options={filterAttributes.destAddrs.map((addr) => ({
value: addr, value: addr,
label: addr label: addr
}))} }))}
label={t("destinationAddress")}
selectedValue={filters.destAddr} selectedValue={filters.destAddr}
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("destAddr", value) handleFilterChange("destAddr", value)
} }
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -461,9 +457,7 @@ export default function ConnectionLogsPage() {
}, },
{ {
accessorKey: "duration", accessorKey: "duration",
header: () => { header: () => <span className="px-2">{t("duration")}</span>,
return t("duration");
},
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
<span className="whitespace-nowrap"> <span className="whitespace-nowrap">