github-starred/pangolin
2
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-12-05 19:17:29 -06:00
Code Issues 94 Packages Projects Releases 48 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

2
server/auth/actions.ts
View File

@@ -23,8 +23,6 @@ export enum ActionsEnum {
deleteResource = "deleteResource",
getResource = "getResource",
listResources = "listResources",
tcpCheck = "tcpCheck",
batchTcpCheck = "batchTcpCheck",
updateResource = "updateResource",
createTarget = "createTarget",
deleteTarget = "deleteTarget",

14
server/routers/external.ts
View File

@@ -306,20 +306,6 @@ authenticated.get(
resource.listResources
);
authenticated.post(
"/org/:orgId/resources/tcp-check",
verifyOrgAccess,
verifyUserHasAction(ActionsEnum.tcpCheck),
resource.tcpCheck
);
authenticated.post(
"/org/:orgId/resources/tcp-check-batch",
verifyOrgAccess,
verifyUserHasAction(ActionsEnum.batchTcpCheck),
resource.batchTcpCheck
);
authenticated.get(
"/org/:orgId/user-resources",
verifyOrgAccess,

1
server/routers/resource/index.ts
View File

@@ -25,4 +25,3 @@ export * from "./getUserResources";
export * from "./setResourceHeaderAuth";
export * from "./addEmailToResourceWhitelist";
export * from "./removeEmailFromResourceWhitelist";
export * from "./tcpCheck";

290
server/routers/resource/tcpCheck.ts
View File

@@ -1,290 +0,0 @@
import { Request, Response, NextFunction } from "express";
import { z } from "zod";
import * as net from "net";
import response from "@server/lib/response";
import HttpCode from "@server/types/HttpCode";
import createHttpError from "http-errors";
import { fromError } from "zod-validation-error";
import logger from "@server/logger";
import { OpenAPITags, registry } from "@server/openApi";
const tcpCheckSchema = z
.object({
host: z.string().min(1, "Host is required"),
port: z.number().int().min(1).max(65535),
timeout: z.number().int().min(1000).max(30000).optional().default(5000)
})
.strict();
export type TcpCheckResponse = {
connected: boolean;
host: string;
port: number;
responseTime?: number;
error?: string;
};
registry.registerPath({
method: "post",
path: "/org/{orgId}/resources/tcp-check",
description: "Check TCP connectivity to a host and port",
tags: [OpenAPITags.Resource],
request: {
body: {
content: {
"application/json": {
schema: tcpCheckSchema
}
}
}
},
responses: {
200: {
description: "TCP check result",
content: {
"application/json": {
schema: z.object({
success: z.boolean(),
data: z.object({
connected: z.boolean(),
host: z.string(),
port: z.number(),
responseTime: z.number().optional(),
error: z.string().optional()
}),
message: z.string()
})
}
}
}
}
});
function checkTcpConnection(host: string, port: number, timeout: number): Promise<TcpCheckResponse> {
return new Promise((resolve) => {
const startTime = Date.now();
const socket = new net.Socket();
const cleanup = () => {
socket.removeAllListeners();
if (!socket.destroyed) {
socket.destroy();
}
};
const timer = setTimeout(() => {
cleanup();
resolve({
connected: false,
host,
port,
error: 'Connection timeout'
});
}, timeout);
socket.setTimeout(timeout);
socket.on('connect', () => {
const responseTime = Date.now() - startTime;
clearTimeout(timer);
cleanup();
resolve({
connected: true,
host,
port,
responseTime
});
});
socket.on('error', (error) => {
clearTimeout(timer);
cleanup();
resolve({
connected: false,
host,
port,
error: error.message
});
});
socket.on('timeout', () => {
clearTimeout(timer);
cleanup();
resolve({
connected: false,
host,
port,
error: 'Socket timeout'
});
});
try {
socket.connect(port, host);
} catch (error) {
clearTimeout(timer);
cleanup();
resolve({
connected: false,
host,
port,
error: error instanceof Error ? error.message : 'Unknown connection error'
});
}
});
}
export async function tcpCheck(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedBody = tcpCheckSchema.safeParse(req.body);
if (!parsedBody.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedBody.error).toString()
)
);
}
const { host, port, timeout } = parsedBody.data;
const result = await checkTcpConnection(host, port, timeout);
logger.info(`TCP check for ${host}:${port} - Connected: ${result.connected}`, {
host,
port,
connected: result.connected,
responseTime: result.responseTime,
error: result.error
});
return response<TcpCheckResponse>(res, {
data: result,
success: true,
error: false,
message: `TCP check completed for ${host}:${port}`,
status: HttpCode.OK
});
} catch (error) {
logger.error("TCP check error:", error);
return next(
createHttpError(
HttpCode.INTERNAL_SERVER_ERROR,
"An error occurred during TCP check"
)
);
}
}
// Batch TCP check endpoint for checking multiple resources at once
const batchTcpCheckSchema = z
.object({
checks: z.array(z.object({
id: z.number().int().positive(),
host: z.string().min(1),
port: z.number().int().min(1).max(65535)
})).max(50), // Limit to 50 concurrent checks
timeout: z.number().int().min(1000).max(30000).optional().default(5000)
})
.strict();
export type BatchTcpCheckResponse = {
results: Array<TcpCheckResponse & { id: number }>;
};
registry.registerPath({
method: "post",
path: "/org/{orgId}/resources/tcp-check-batch",
description: "Check TCP connectivity to multiple hosts and ports",
tags: [OpenAPITags.Resource],
request: {
body: {
content: {
"application/json": {
schema: batchTcpCheckSchema
}
}
}
},
responses: {
200: {
description: "Batch TCP check results",
content: {
"application/json": {
schema: z.object({
success: z.boolean(),
data: z.object({
results: z.array(z.object({
id: z.number(),
connected: z.boolean(),
host: z.string(),
port: z.number(),
responseTime: z.number().optional(),
error: z.string().optional()
}))
}),
message: z.string()
})
}
}
}
}
});
export async function batchTcpCheck(
req: Request,
res: Response,
next: NextFunction
): Promise<any> {
try {
const parsedBody = batchTcpCheckSchema.safeParse(req.body);
if (!parsedBody.success) {
return next(
createHttpError(
HttpCode.BAD_REQUEST,
fromError(parsedBody.error).toString()
)
);
}
const { checks, timeout } = parsedBody.data;
// all TCP checks concurrently
const checkPromises = checks.map(async (check) => {
const result = await checkTcpConnection(check.host, check.port, timeout);
return {
id: check.id,
...result
};
});
const results = await Promise.all(checkPromises);
logger.info(`Batch TCP check completed for ${checks.length} resources`, {
totalChecks: checks.length,
successfulConnections: results.filter(r => r.connected).length,
failedConnections: results.filter(r => !r.connected).length
});
return response<BatchTcpCheckResponse>(res, {
data: { results },
success: true,
error: false,
message: `Batch TCP check completed for ${checks.length} resources`,
status: HttpCode.OK
});
} catch (error) {
logger.error("Batch TCP check error:", error);
return next(
createHttpError(
HttpCode.INTERNAL_SERVER_ERROR,
"An error occurred during batch TCP check"
)
);
}
}

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>

104
src/hooks/useResourceHealth.ts
View File

@@ -1,104 +0,0 @@
import { useState, useEffect } from "react";
import { createApiClient } from "@app/lib/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
type Target = {
host: string;
port: number;
};
type ResourceRow = {
id: number;
enabled: boolean;
targets?: Target[];
};
type Status = "checking" | "online" | "offline";
export function useResourceHealth(orgId: string, resources: ResourceRow[]) {
const { env } = useEnvContext();
const api = createApiClient({ env });
const [resourceStatus, setResourceStatus] = useState<Record<number, Status>>({});
const [targetStatus, setTargetStatus] = useState<Record<string, Status>>({});
useEffect(() => {
if (!orgId || resources.length === 0) return;
// init all as "checking"
const initialRes: Record<number, Status> = {};
const initialTargets: Record<string, Status> = {};
resources.forEach((r) => {
initialRes[r.id] = "checking";
r.targets?.forEach((t) => {
const key = `${r.id}:${t.host}:${t.port}`;
initialTargets[key] = "checking";
});
});
setResourceStatus(initialRes);
setTargetStatus(initialTargets);
// build batch checks
const checks = resources.flatMap((r) =>
r.enabled && r.targets?.length
? r.targets.map((t) => ({
id: r.id,
host: t.host,
port: t.port,
}))
: []
);
if (checks.length === 0) return;
api.post(`/org/${orgId}/resources/tcp-check-batch`, {
checks,
timeout: 5000,
})
.then((res) => {
const results = res.data.data.results as Array<{
id: number;
host: string;
port: number;
connected: boolean;
}>;
// build maps
const newTargetStatus: Record<string, Status> = {};
const grouped: Record<number, boolean[]> = {};
results.forEach((r) => {
const key = `${r.id}:${r.host}:${r.port}`;
newTargetStatus[key] = r.connected ? "online" : "offline";
if (!grouped[r.id]) grouped[r.id] = [];
grouped[r.id].push(r.connected);
});
const newResourceStatus: Record<number, Status> = {};
Object.entries(grouped).forEach(([id, arr]) => {
newResourceStatus[+id] = arr.some(Boolean) ? "online" : "offline";
});
setTargetStatus((prev) => ({ ...prev, ...newTargetStatus }));
setResourceStatus((prev) => ({ ...prev, ...newResourceStatus }));
})
.catch(() => {
// fallback all offline
const fallbackRes: Record<number, Status> = {};
const fallbackTargets: Record<string, Status> = {};
resources.forEach((r) => {
if (r.enabled) {
fallbackRes[r.id] = "offline";
r.targets?.forEach((t) => {
fallbackTargets[`${r.id}:${t.host}:${t.port}`] = "offline";
});
}
});
setResourceStatus((prev) => ({ ...prev, ...fallbackRes }));
setTargetStatus((prev) => ({ ...prev, ...fallbackTargets }));
});
}, [orgId, resources]);
return { resourceStatus, targetStatus };
}