refactor: remove sockets

This commit is contained in:
Mauricio Siu 2024-08-25 18:03:43 -06:00
parent 179de344c2
commit 14e8e14b7d
4 changed files with 15 additions and 174 deletions

View File

@ -25,7 +25,9 @@ const chartConfig = {
} satisfies ChartConfig;
export const RequestDistributionChart = () => {
const { data: stats } = api.settings.readStats.useQuery();
const { data: stats } = api.settings.readStats.useQuery(undefined, {
refetchInterval: 1333,
});
return (
<ResponsiveContainer width="100%" height={200}>

View File

@ -10,7 +10,7 @@ import {
type VisibilityState,
flexRender,
} from "@tanstack/react-table";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useMemo, useState } from "react";
import type { LogEntry } from "./show-requests";
import { Badge } from "@/components/ui/badge";
import {
@ -78,10 +78,6 @@ export const priorities = [
},
];
export const RequestsTable = () => {
const [statsLogs, setStatsLogs] = useState<{
data: LogEntry[];
totalCount: number;
}>();
const [statusFilter, setStatusFilter] = useState<string[]>([]);
const [search, setSearch] = useState("");
const [selectedRow, setSelectedRow] = useState<LogEntry>();
@ -94,93 +90,17 @@ export const RequestsTable = () => {
pageSize: 10,
});
// const { data: statsLogs, isLoading } = api.settings.readStatsLogs.useQuery({
// sort: sorting[0],
// page: pagination,
// search,
// status: statusFilter,
// });
// useEffect(() => {
// const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
// const wsUrl = `${protocol}//${window.location.host}/request-logs`;
// const ws = new WebSocket(wsUrl);
// ws.onopen = () => {
// // Enviar parámetros iniciales
// ws.send(
// JSON.stringify({
// page: pagination,
// sort: sorting[0],
// search: search,
// status: statusFilter,
// }),
// );
// };
// ws.onmessage = (event) => {
// const data = JSON.parse(event.data);
// setStatsLogs(data);
// };
// // return () => ws.close();
// }, [pagination, search, sorting, statusFilter]);
const wsRef = useRef<WebSocket | null>(null);
const isInitialMount = useRef(true);
const sendParams = useCallback(() => {
if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
wsRef.current.send(
JSON.stringify({
page: pagination,
sort: sorting[0],
search: search,
status: statusFilter,
}),
);
} else {
console.log("WebSocket not ready, retrying in 100ms");
setTimeout(sendParams, 100); // Retry after 100ms
}
}, [pagination, sorting, search, statusFilter]);
useEffect(() => {
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
const wsUrl = `${protocol}//${window.location.host}/request-logs`;
const newWs = new WebSocket(wsUrl);
newWs.onopen = () => {
console.log("WebSocket connection established");
wsRef.current = newWs;
sendParams(); // Send initial params as soon as the connection is open
};
newWs.onmessage = (event) => {
const data = JSON.parse(event.data);
setStatsLogs(data);
};
newWs.onerror = (error) => {
console.error("WebSocket error:", error);
};
newWs.onclose = () => {
console.log("WebSocket connection closed");
};
return () => {
newWs.close();
};
}, []);
useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = false;
} else {
sendParams();
}
}, [sendParams]);
const { data: statsLogs, isLoading } = api.settings.readStatsLogs.useQuery(
{
sort: sorting[0],
page: pagination,
search,
status: statusFilter,
},
{
refetchInterval: 1333,
},
);
const pageCount = useMemo(() => {
if (statsLogs?.totalCount) {

View File

@ -23,7 +23,6 @@ import {
getPublicIpWithFallback,
setupTerminalWebSocketServer,
} from "./wss/terminal";
import { setupRequestLogsWebSocketServer } from "./wss/requests-logs";
config({ path: ".env" });
const PORT = Number.parseInt(process.env.PORT || "3000", 10);
@ -40,7 +39,6 @@ void app.prepare().then(async () => {
setupDeploymentLogsWebSocketServer(server);
setupDockerContainerLogsWebSocketServer(server);
setupDockerContainerTerminalWebSocketServer(server);
setupRequestLogsWebSocketServer(server);
setupTerminalWebSocketServer(server);
setupDockerStatsMonitoringSocketServer(server);

View File

@ -1,79 +0,0 @@
import type http from "node:http";
import { WebSocketServer } from "ws";
import { validateWebSocketRequest } from "../auth/auth";
import { readMonitoringConfig } from "../utils/traefik/application";
import { parseRawConfig } from "../utils/access-log/utils";
import { apiReadStatsLogs } from "../db/schema";
import fs from "node:fs";
import path from "node:path";
import { DYNAMIC_TRAEFIK_PATH } from "../constants";
export const setupRequestLogsWebSocketServer = (
server: http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>,
) => {
const wssTerm = new WebSocketServer({
noServer: true,
path: "/request-logs",
});
server.on("upgrade", (req, socket, head) => {
const { pathname } = new URL(req.url || "", `http://${req.headers.host}`);
if (pathname === "/_next/webpack-hmr") {
return;
}
if (pathname === "/request-logs") {
wssTerm.handleUpgrade(req, socket, head, function done(ws) {
wssTerm.emit("connection", ws, req);
});
}
});
const broadcastUpdate = (input: any) => {
const rawConfig = readMonitoringConfig();
const parsedConfig = parseRawConfig(
rawConfig as string,
input.page,
input.sort,
input.search,
input.status,
);
return parsedConfig;
};
const configPath = path.join(DYNAMIC_TRAEFIK_PATH, "access.log");
// eslint-disable-next-line @typescript-eslint/no-misused-promises
wssTerm.on("connection", async (ws, req) => {
const { user, session } = await validateWebSocketRequest(req);
if (!user || !session) {
ws.close();
return;
}
try {
ws.on("message", (message: string) => {
try {
const input = apiReadStatsLogs.parse(JSON.parse(message));
const parsedConfig = broadcastUpdate(input);
ws.send(JSON.stringify(parsedConfig));
fs.watch(configPath, (eventType) => {
if (eventType === "change") {
const parsedConfig = broadcastUpdate(input);
ws.send(JSON.stringify(parsedConfig));
}
});
} catch (error) {
ws.send(JSON.stringify({ error: "Invalid message format" }));
}
});
} catch (error) {
const errorMessage = (error as Error)?.message;
console.log(errorMessage);
ws.send(errorMessage);
}
});
};