orus-dev/sentryx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new server dialog

Browse Source
This commit is contained in:
selimaj-dev
2025-07-17 02:58:22 +02:00
parent f17e2fbf72
commit c3fb1c6cea
9 changed files with 320 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sentryx/servers.json
+1 -12
View File
@@ -1,12 +1 @@
[
{
"name": "Main Server",
"ip": "10.7.1.2",
"coordinates": [19.8187, 41.3275]
},
{
"name": "Second Server",
"ip": "10.7.1.2",
"coordinates": [19.8187, 42]
}
]
[{"name":"Main Server","ip":"10.7.1.2","coordinates":[19.8187,41.3275]},{"name":"Second Server","ip":"10.7.1.2","coordinates":[19.8187,42]},{"name":"test","ip":"abc","coordinates":[14.212747852350674,13.997221304482736]},{"name":"Bro","ip":"10.7.1.53","coordinates":[19.66455594156352,40.826754398461304]},{"name":"Idk lol","ip":"10.32.2.4","coordinates":[20.135507417925936,41.17975477202245]}]
src/app/api/servers/route.ts
+27
View File
@@ -1,6 +1,7 @@
import { NextResponse } from "next/server";
import Data from "../data";
import Server, { ServerAPI } from "@/types/server";
import { HttpStatusCode } from "axios";
const servers = new Data<ServerAPI[]>("sentryx/servers.json", "array");
@@ -39,3 +40,29 @@ export async function GET(request: Request) {
servers: currentServers,
});
}
export async function POST(request: Request) {
const body = await request.json();
if (!body.name || !body.ip)
return NextResponse.json(
{
message: "Invalid body",
},
{
status: HttpStatusCode.BadRequest,
}
);
servers.data.push({
name: body.name,
ip: body.ip,
coordinates: body.coordinates,
});
servers.write();
return NextResponse.json({
message: "ok",
});
}
src/app/servers/LocationSelect.tsx
+60
View File
@@ -0,0 +1,60 @@
import React, { useRef, useEffect, useState } from "react";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
export default function MapSelect({
setLocation,
}: {
setLocation: (coors: [number, number]) => void;
}) {
const mapContainer = useRef<HTMLDivElement | null>(null);
const map = useRef<maplibregl.Map | null>(null);
const marker = useRef<maplibregl.Marker | null>(null);
useEffect(() => {
if (map.current || !mapContainer.current) return;
map.current = new maplibregl.Map({
container: mapContainer.current,
style: "/map_style.json",
center: [0, 0],
zoom: 2,
});
// Add click handler
map.current.on("click", (e) => {
const lngLat = e.lngLat;
// Save location to state
setLocation([lngLat.lng, lngLat.lat]);
// Remove previous marker if any
if (marker.current) {
marker.current.remove();
}
// Add marker to clicked location
marker.current = new maplibregl.Marker({ color: "#ff3e00" })
.setLngLat(lngLat)
.addTo(map.current!);
});
return () => {
// Clean up marker
if (marker.current) {
marker.current.remove();
marker.current = null;
}
// Clean up map
map.current?.remove();
map.current = null;
};
}, []);
return (
<>
<div ref={mapContainer} style={{ width: "100%", height: "300px" }} />
</>
);
}
src/app/servers/Map.tsx
+1 -1
View File
@@ -56,5 +56,5 @@ export default function Map({ servers }: { servers: Server[] }) {
});
}, [servers]);
return <div ref={mapContainer} style={{ width: "100%", height: "600px" }} />;
return <div ref={mapContainer} className="w-full h-full" />;
}
src/app/servers/NewServerDialog.tsx
+70
View File
@@ -0,0 +1,70 @@
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Button, buttonVariants } from "@/components/ui/button";
import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import MapSelect from "./LocationSelect";
import { useState } from "react";
import Session from "@/lib/session";
export default function NewServerDialog({
session,
}: {
session: Session | null;
}) {
const [open, setOpen] = useState(false);
const [name, setName] = useState("");
const [ip, setIp] = useState("");
const [location, setLocation] = useState<[number, number] | undefined>(
undefined
);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger
className={cn(buttonVariants({ variant: "default" }))}
onClick={() => setOpen(true)}
>
<Plus className="m-0 p-0" /> New
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add Server</DialogTitle>
</DialogHeader>
<Label className="mt-2">Server Name</Label>
<Input
placeholder="Main Server, Database, etc"
onInput={(e) => setName(e.currentTarget.value)}
/>
<Label className="mt-2">Server IP</Label>
<Input
placeholder="10.7.1.10, etc"
onInput={(e) => setIp(e.currentTarget.value)}
/>
<Label className="mt-2">Server Location</Label>
<MapSelect setLocation={setLocation} />
<DialogFooter>
<Button
onClick={() => {
session?.addServer({ name, ip, coordinates: location });
setOpen(false);
}}
>
Add server
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
src/app/servers/page.tsx
+6 -11
View File
@@ -1,19 +1,14 @@
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { CircleCheckBig, Cpu, MemoryStick, TriangleAlert } from "lucide-react";
import { ChartAreaGradient } from "../dashboard/chart";
import { Progress } from "@/components/ui/progress";
import { Card, CardContent } from "@/components/ui/card";
import ServerComponent from "../dashboard/server";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { useEffect, useState } from "react";
import useSession from "@/hooks/useSession";
import Server from "@/types/server";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import Map from "./Map";
import NewServerDialog from "./NewServerDialog";
export default function Servers() {
const session = useSession();
@@ -45,20 +40,20 @@ export default function Servers() {
}, [serversQuery, servers]);
return (
<div className="w-full">
<Tabs defaultValue="grid">
<div className="w-full h-full">
<Tabs defaultValue="grid" className="h-full">
<TabsList className="mx-auto mb-5">
<TabsTrigger value="grid">Grid</TabsTrigger>
<TabsTrigger value="map">Map</TabsTrigger>
</TabsList>
<TabsContent value="grid" className="flex flex-col gap-5">
<TabsContent value="grid" className="flex flex-col gap-5 h-full">
<Card>
<CardContent className="flex flex-row gap-3">
<Input
onInput={(e) => setServersQuery(e.currentTarget.value)}
placeholder="Search servers by name, location or IP..."
/>
<Button onClick={() => {}}>Search</Button>
<NewServerDialog session={session} />
</CardContent>
</Card>
src/components/ui/dialog.tsx
+143
View File
@@ -0,0 +1,143 @@
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { XIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}
function DialogOverlay({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
className
)}
{...props}
/>
)
}
function DialogContent({
className,
children,
showCloseButton = true,
...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
showCloseButton?: boolean
}) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
className
)}
{...props}
>
{children}
{showCloseButton && (
<DialogPrimitive.Close
data-slot="dialog-close"
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
>
<XIcon />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</DialogPortal>
)
}
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-header"
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
)
}
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-footer"
className={cn(
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
className
)}
{...props}
/>
)
}
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-semibold", className)}
{...props}
/>
)
}
function DialogDescription({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
)
}
export {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogPortal,
DialogTitle,
DialogTrigger,
}
src/lib/session.ts
+11 -1
View File
@@ -1,4 +1,4 @@
import Server from "@/types/server";
import Server, { ServerAPI } from "@/types/server";
import axios from "axios";
export default class Session {
@@ -21,4 +21,14 @@ export default class Session {
return [];
}
}
public async addServer(s: ServerAPI) {
try {
return (
((await axios.post("/api/servers", s)).data.servers as Server[]) || []
);
} catch {
return [];
}
}
}
src/types/server.ts
+1 -1
View File
@@ -1,6 +1,7 @@
export interface ServerAPI {
name: string;
ip: string;
coordinates?: [number, number];
}
export default interface Server extends ServerAPI {
@@ -9,5 +10,4 @@ export default interface Server extends ServerAPI {
memory: number;
storage: number;
network: number;
coordinates?: [number, number];
}