9c5293158f
Introduces a new sidebar component in `client/src/App.tsx` for navigation, along with new pages for Dashboard, Detections, and Routers. The backend in `server/routes.ts` is updated to include API endpoints for managing routers, fetching network logs, and retrieving detection data. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 7a657272-55ba-4a79-9a2e-f1ed9bc7a528 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: 99f17f6a-6021-4354-9517-5610b878cb21 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/449cf7c4-c97a-45ae-8234-e5c5b8d6a84f/7a657272-55ba-4a79-9a2e-f1ed9bc7a528/c9ITWqD
93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { Switch, Route } from "wouter";
|
|
import { queryClient } from "./lib/queryClient";
|
|
import { QueryClientProvider } from "@tanstack/react-query";
|
|
import { Toaster } from "@/components/ui/toaster";
|
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger } from "@/components/ui/sidebar";
|
|
import { LayoutDashboard, AlertTriangle, Server, Shield, Menu } from "lucide-react";
|
|
import Dashboard from "@/pages/Dashboard";
|
|
import Detections from "@/pages/Detections";
|
|
import Routers from "@/pages/Routers";
|
|
import NotFound from "@/pages/not-found";
|
|
|
|
const menuItems = [
|
|
{ title: "Dashboard", url: "/", icon: LayoutDashboard },
|
|
{ title: "Rilevamenti", url: "/detections", icon: AlertTriangle },
|
|
{ title: "Router", url: "/routers", icon: Server },
|
|
{ title: "Whitelist", url: "/whitelist", icon: Shield },
|
|
];
|
|
|
|
function AppSidebar() {
|
|
return (
|
|
<Sidebar data-testid="sidebar">
|
|
<SidebarContent>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel data-testid="text-sidebar-title">IDS System</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{menuItems.map((item) => (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton asChild data-testid={`link-${item.title.toLowerCase()}`}>
|
|
<a href={item.url}>
|
|
<item.icon />
|
|
<span>{item.title}</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
);
|
|
}
|
|
|
|
function Router() {
|
|
return (
|
|
<Switch>
|
|
<Route path="/" component={Dashboard} />
|
|
<Route path="/detections" component={Detections} />
|
|
<Route path="/routers" component={Routers} />
|
|
<Route component={NotFound} />
|
|
</Switch>
|
|
);
|
|
}
|
|
|
|
function App() {
|
|
const style = {
|
|
"--sidebar-width": "16rem",
|
|
"--sidebar-width-icon": "3rem",
|
|
};
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<TooltipProvider>
|
|
<SidebarProvider style={style as React.CSSProperties}>
|
|
<div className="flex h-screen w-full" data-testid="app-container">
|
|
<AppSidebar />
|
|
<div className="flex flex-col flex-1 overflow-hidden">
|
|
<header className="flex items-center gap-2 p-4 border-b" data-testid="header">
|
|
<SidebarTrigger data-testid="button-sidebar-toggle">
|
|
<Menu className="h-5 w-5" />
|
|
</SidebarTrigger>
|
|
<div className="flex-1">
|
|
<h1 className="text-sm font-medium text-muted-foreground" data-testid="text-header-title">
|
|
Intrusion Detection System
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
<main className="flex-1 overflow-auto" data-testid="main-content">
|
|
<Router />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</SidebarProvider>
|
|
<Toaster />
|
|
</TooltipProvider>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|