♻️ standardize http request log data-tables

This commit is contained in:
Fred KISSIE
2026-06-05 19:28:30 +02:00
parent 33fdc9a94f
commit eb03fb7060
2 changed files with 42 additions and 50 deletions
+41 -49
View File
@@ -285,9 +285,9 @@ export default function GeneralPage() {
const columns: ColumnDef<any>[] = [ const columns: ColumnDef<any>[] = [
{ {
accessorKey: "timestamp", accessorKey: "timestamp",
header: ({ column }) => { header: ({ column }) => (
return t("timestamp"); <span className="px-2">{t("timestamp")}</span>
}, ),
cell: ({ row }) => { cell: ({ row }) => {
return ( return (
<div className="whitespace-nowrap"> <div className="whitespace-nowrap">
@@ -300,9 +300,9 @@ export default function GeneralPage() {
}, },
{ {
accessorKey: "action", accessorKey: "action",
header: ({ column }) => { header: () => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<ColumnFilterButton <ColumnFilterButton
options={[ options={[
{ value: "true", label: "Allowed" }, { value: "true", label: "Allowed" },
@@ -329,17 +329,14 @@ export default function GeneralPage() {
}, },
{ {
accessorKey: "ip", accessorKey: "ip",
header: ({ column }) => { header: ({ column }) => <span className="px-2">{t("ip")}</span>
return t("ip");
}
}, },
{ {
accessorKey: "location", accessorKey: "location",
header: ({ column }) => { header: ({ column }) => {
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,
@@ -351,8 +348,9 @@ export default function GeneralPage() {
handleFilterChange("location", value) handleFilterChange("location", value)
} }
// placeholder="" // placeholder=""
searchPlaceholder="Search..." label={t("location")}
emptyMessage="None found" searchPlaceholder={t("searchPlaceholder")}
emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -377,9 +375,8 @@ export default function GeneralPage() {
accessorKey: "resourceName", accessorKey: "resourceName",
header: ({ column }) => { header: ({ column }) => {
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"
@@ -388,9 +385,9 @@ export default function GeneralPage() {
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("resourceId", value) handleFilterChange("resourceId", value)
} }
// placeholder="" label={t("resource")}
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -417,9 +414,8 @@ export default function GeneralPage() {
accessorKey: "host", accessorKey: "host",
header: ({ column }) => { header: ({ column }) => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("host")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.hosts.map((host) => ({ options={filterAttributes.hosts.map((host) => ({
value: host, value: host,
label: host label: host
@@ -428,9 +424,9 @@ export default function GeneralPage() {
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("host", value) handleFilterChange("host", value)
} }
// placeholder="" label={t("host")}
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -452,9 +448,8 @@ export default function GeneralPage() {
accessorKey: "path", accessorKey: "path",
header: ({ column }) => { header: ({ column }) => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("path")}</span> <ColumnFilterButton
<ColumnFilter
options={filterAttributes.paths.map((path) => ({ options={filterAttributes.paths.map((path) => ({
value: path, value: path,
label: path label: path
@@ -463,9 +458,9 @@ export default function GeneralPage() {
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("path", value) handleFilterChange("path", value)
} }
// placeholder="" label={t("path")}
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -482,9 +477,8 @@ export default function GeneralPage() {
accessorKey: "method", accessorKey: "method",
header: ({ column }) => { header: ({ column }) => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("method")}</span> <ColumnFilterButton
<ColumnFilter
options={[ options={[
{ value: "GET", label: "GET" }, { value: "GET", label: "GET" },
{ value: "POST", label: "POST" }, { value: "POST", label: "POST" },
@@ -498,9 +492,9 @@ export default function GeneralPage() {
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("method", value) handleFilterChange("method", value)
} }
// placeholder="" label={t("method")}
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -510,9 +504,8 @@ export default function GeneralPage() {
accessorKey: "reason", accessorKey: "reason",
header: ({ column }) => { header: ({ column }) => {
return ( return (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 px-2">
<span>{t("reason")}</span> <ColumnFilterButton
<ColumnFilter
options={[ options={[
{ value: "100", label: t("allowedByRule") }, { value: "100", label: t("allowedByRule") },
{ value: "101", label: t("allowedNoAuth") }, { value: "101", label: t("allowedNoAuth") },
@@ -537,9 +530,9 @@ export default function GeneralPage() {
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("reason", value) handleFilterChange("reason", value)
} }
// placeholder="" label={t("reason")}
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
@@ -556,9 +549,8 @@ export default function GeneralPage() {
accessorKey: "actor", accessorKey: "actor",
header: ({ column }) => { header: ({ column }) => {
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
@@ -567,9 +559,9 @@ export default function GeneralPage() {
onValueChange={(value) => onValueChange={(value) =>
handleFilterChange("actor", value) handleFilterChange("actor", value)
} }
// placeholder="" label={t("actor")}
searchPlaceholder="Search..." searchPlaceholder={t("searchPlaceholder")}
emptyMessage="None found" emptyMessage={t("emptySearchOptions")}
/> />
</div> </div>
); );
+1 -1
View File
@@ -32,7 +32,7 @@ import {
RefreshCw RefreshCw
} from "lucide-react"; } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { useState, useEffect, useMemo } from "react"; import { useEffect, useMemo, useState } from "react";
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,