pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-15 17:36:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove status check and add column filtering on all of the tables

Browse Source
This commit is contained in:
Pallavi
2025-09-03 00:15:02 +05:30
committed by Pallavi Kumari
parent 1b3eb32bf4
commit f21188000e
8 changed files with 119 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/DataTablePagination.tsx
View File

@@ -24,6 +24,7 @@ interface DataTablePaginationProps<TData> {
isServerPagination?: boolean;
isLoading?: boolean;
disabled?: boolean;
renderAdditionalControls?: () => React.ReactNode;
}
export function DataTablePagination<TData>({
@@ -33,7 +34,8 @@ export function DataTablePagination<TData>({
totalCount,
isServerPagination = false,
isLoading = false,
disabled = false
disabled = false,
renderAdditionalControls
}: DataTablePaginationProps<TData>) {
const t = useTranslations();
@@ -113,6 +115,11 @@ export function DataTablePagination<TData>({
))}
</SelectContent>
</Select>
{renderAdditionalControls && (
<div className="flex items-center space-x-2">
{renderAdditionalControls()}
</div>
)}
</div>
<div className="flex items-center space-x-3 lg:space-x-8">

184
src/components/ResourcesTable.tsx
View File

@@ -18,7 +18,6 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuCheckboxItem,
DropdownMenuSeparator
} from "@app/components/ui/dropdown-menu";
import { Button } from "@app/components/ui/button";
import {
@@ -30,9 +29,6 @@ import {
ShieldCheck,
RefreshCw,
Settings2,
Wifi,
WifiOff,
Clock,
Plus,
Search,
ChevronDown,
@@ -73,14 +69,6 @@ import { useSearchParams } from "next/navigation";
import EditInternalResourceDialog from "@app/components/EditInternalResourceDialog";
import CreateInternalResourceDialog from "@app/components/CreateInternalResourceDialog";
import { Alert, AlertDescription } from "@app/components/ui/alert";
import { Badge } from "@app/components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from "@app/components/ui/tooltip";
import { useResourceHealth } from "@app/hooks/useResourceHealth";
export type ResourceRow = {
id: number;
@@ -162,25 +150,6 @@ const setStoredPageSize = (pageSize: number, tableId?: string): void => {
};
function StatusIcon({ status, className = "" }: {
status: 'checking' | 'online' | 'offline' | undefined;
className?: string;
}) {
const iconClass = `h-4 w-4 ${className}`;
switch (status) {
case 'checking':
return <Clock className={`${iconClass} text-yellow-500 animate-pulse`} />;
case 'online':
return <Wifi className={`${iconClass} text-green-500`} />;
case 'offline':
return <WifiOff className={`${iconClass} text-red-500`} />;
default:
return null;
}
}
export default function ResourcesTable({
resources,
internalResources,
@@ -204,9 +173,6 @@ export default function ResourcesTable({
getStoredPageSize('internal-resources', 20)
);
const { resourceStatus, targetStatus } = useResourceHealth(orgId, resources);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [selectedResource, setSelectedResource] =
useState<ResourceRow | null>();
@@ -318,39 +284,6 @@ export default function ResourcesTable({
);
};
const getColumnToggle = () => {
const table = currentView === "internal" ? internalTable : proxyTable;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Settings2 className="mr-2 h-4 w-4" />
{t("columns")}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
{table.getAllColumns()
.filter(column => column.getCanHide())
.map(column => (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}
>
{column.id === "target" ? t("target") :
column.id === "authState" ? t("authentication") :
column.id === "enabled" ? t("enabled") :
column.id === "status" ? t("status") :
column.id}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
};
const getActionButton = () => {
if (currentView === "internal") {
return (
@@ -514,18 +447,9 @@ export default function ResourcesTable({
<DropdownMenuContent align="start" className="min-w-[200px]">
{targets.map((target, idx) => {
const key = `${resourceRow.id}:${target.host}:${target.port}`;
const status = targetStatus[key];
const color =
status === "online"
? "bg-green-500"
: status === "offline"
? "bg-red-500 "
: "bg-gray-400";
return (
<DropdownMenuItem key={idx} className="flex items-center gap-2">
<div className={`h-3 w-3 rounded-full ${color}`} />
<CopyToClipboard
text={`${target.host}:${target.port}`}
isLink={false}
@@ -538,57 +462,6 @@ export default function ResourcesTable({
);
},
},
{
id: "status",
accessorKey: "status",
header: t("status"),
cell: ({ row }) => {
const resourceRow = row.original;
const status = resourceStatus[resourceRow.id];
if (!resourceRow.enabled) {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Badge variant="secondary" className="">
{t("disabled")}
</Badge>
</TooltipTrigger>
<TooltipContent>
<p>{t("resourceDisabled")}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<div className="flex items-center space-x-2">
<StatusIcon status={status} />
<span className=" capitalize">
{status === 'checking' ? t("checking") :
status === 'online' ? t("online") :
status === 'offline' ? t("offline") : '-'}
</span>
</div>
</TooltipTrigger>
<TooltipContent>
<p>
{status === 'checking' ? t("checkingConnection") :
status === 'online' ? t("connectionSuccessful") :
status === 'offline' ? t("connectionFailed") :
t("statusUnknown")}
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}
},
{
accessorKey: "domain",
header: t("access"),
@@ -987,7 +860,6 @@ export default function ResourcesTable({
</Button>
</div>
<div>
{getColumnToggle()}
{getActionButton()}
</div>
</div>
@@ -1072,6 +944,34 @@ export default function ResourcesTable({
<DataTablePagination
table={proxyTable}
onPageSizeChange={handleProxyPageSizeChange}
renderAdditionalControls={() => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Settings2 className="mr-2 h-4 w-4" />
{t("columns")}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
{proxyTable.getAllColumns()
.filter(column => column.getCanHide())
.map(column => (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}
>
{column.id === "target" ? t("target") :
column.id === "authState" ? t("authentication") :
column.id === "enabled" ? t("enabled") :
column.id === "status" ? t("status") :
column.id}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)}
/>
</div>
</TabsContent>
@@ -1173,6 +1073,34 @@ export default function ResourcesTable({
<DataTablePagination
table={internalTable}
onPageSizeChange={handleInternalPageSizeChange}
renderAdditionalControls={() => (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Settings2 className="mr-2 h-4 w-4" />
{t("columns")}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
{internalTable.getAllColumns()
.filter(column => column.getCanHide())
.map(column => (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}
>
{column.id === "target" ? t("target") :
column.id === "authState" ? t("authentication") :
column.id === "enabled" ? t("enabled") :
column.id === "status" ? t("status") :
column.id}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
)}
/>
</div>
</TabsContent>

59
src/components/ui/data-table.tsx
View File

@@ -9,7 +9,9 @@ import {
SortingState,
getSortedRowModel,
ColumnFiltersState,
getFilteredRowModel
getFilteredRowModel,
VisibilityState,
Column
} from "@tanstack/react-table";
import {
Table,
@@ -23,7 +25,7 @@ import { Button } from "@app/components/ui/button";
import { useEffect, useMemo, useState } from "react";
import { Input } from "@app/components/ui/input";
import { DataTablePagination } from "@app/components/DataTablePagination";
import { Plus, Search, RefreshCw } from "lucide-react";
import { Plus, Search, RefreshCw, Settings2 } from "lucide-react";
import {
Card,
CardContent,
@@ -32,6 +34,12 @@ import {
} from "@app/components/ui/card";
import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs";
import { useTranslations } from "next-intl";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuCheckboxItem,
DropdownMenuTrigger
} from "@app/components/ui/dropdown-menu";
const STORAGE_KEYS = {
PAGE_SIZE: 'datatable-page-size',
@@ -93,6 +101,7 @@ type DataTableProps<TData, TValue> = {
defaultTab?: string;
persistPageSize?: boolean | string;
defaultPageSize?: number;
enableColumnToggle?: boolean;
};
export function DataTable<TData, TValue>({
@@ -109,7 +118,8 @@ export function DataTable<TData, TValue>({
tabs,
defaultTab,
persistPageSize = false,
defaultPageSize = 20
defaultPageSize = 20,
enableColumnToggle = true
}: DataTableProps<TData, TValue>) {
const t = useTranslations();
@@ -129,6 +139,7 @@ export function DataTable<TData, TValue>({
);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [globalFilter, setGlobalFilter] = useState<any>([]);
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
const [activeTab, setActiveTab] = useState<string>(
defaultTab || tabs?.[0]?.id || ""
);
@@ -157,6 +168,7 @@ export function DataTable<TData, TValue>({
onColumnFiltersChange: setColumnFilters,
getFilteredRowModel: getFilteredRowModel(),
onGlobalFilterChange: setGlobalFilter,
onColumnVisibilityChange: setColumnVisibility,
initialState: {
pagination: {
pageSize: pageSize,
@@ -166,7 +178,8 @@ export function DataTable<TData, TValue>({
state: {
sorting,
columnFilters,
globalFilter
globalFilter,
columnVisibility
}
});
@@ -199,6 +212,43 @@ export function DataTable<TData, TValue>({
}
};
const getColumnLabel = (column: Column<any, any>) => {
return typeof column.columnDef.header === "string" ?
column.columnDef.header :
column.id; // fallback to id if header is JSX
};
const renderColumnToggle = () => {
if (!enableColumnToggle) return null;
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
<Settings2 className="mr-2 h-4 w-4" />
{t("columns")}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
{table.getAllColumns()
.filter((column) => column.getCanHide())
.map((column) => (
<DropdownMenuCheckboxItem
key={column.id}
className="capitalize"
checked={column.getIsVisible()}
onCheckedChange={(value) => column.toggleVisibility(!!value)}
>
{getColumnLabel(column)}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
};
return (
<div className="container mx-auto max-w-12xl">
<Card>
@@ -312,6 +362,7 @@ export function DataTable<TData, TValue>({
<DataTablePagination
table={table}
onPageSizeChange={handlePageSizeChange}
renderAdditionalControls={renderColumnToggle}
/>
</div>
</CardContent>