small stuff to /server/id

src/app/api/server/route.ts

@@ -1,6 +1,6 @@
 import axios, { HttpStatusCode } from "axios";
 import { NextResponse } from "next/server";
-import { PORT, servers } from "../servers/servers";
+import { currentServers, PORT, servers } from "../servers/servers";
 import validate from "../auth/auth";
 import Service from "@/types/service";
 
@@ -27,14 +27,15 @@ export async function GET(request: Request) {
       }
     );
 
-  const server = servers.data[parseInt(index)];
+  const server = currentServers[parseInt(index)];
 
   axios.get(`http://${server.ip}:${PORT}/apps`, {params: {auth: 'my-key'}}).then((apps) => {
     allServices[parseInt(index)] = apps.data;
   });
 
   return NextResponse.json({
+    ...server,
     message: "ok",
-    apps: allServices[parseInt(index)] || [],
+    services: allServices[parseInt(index)] || [],
   });
 }

src/app/api/servers/route.ts

@@ -20,8 +20,6 @@ export async function GET(request: Request) {
   if (query) {
     let tokens = (query || "").toLocaleLowerCase().split(" ");
 
-    console.log(tokens);
-
     return NextResponse.json({
       message: "ok",
       servers: currentServers.filter((s) =>
@@ -62,6 +60,7 @@ export async function POST(request: Request) {
     ip: body.ip,
     coordinates: body.coordinates,
     location: body.location,
+    apps: body.apps,
   });
 
   currentServers.push({
@@ -69,6 +68,7 @@ export async function POST(request: Request) {
     ip: body.ip,
     coordinates: body.coordinates,
     location: body.location,
+    apps: body.apps,
     status: "offline",
     cpu: 0,
     memory: 0,
@@ -81,6 +81,7 @@ export async function POST(request: Request) {
     ip: body.ip,
     coordinates: body.coordinates,
     location: body.location,
+    apps: body.apps,
   }, servers.data.length - 1);
 
   servers.write();

src/app/api/servers/servers.ts

@@ -30,7 +30,6 @@ export const useServer = (server: ServerAPI, index: number) => {
       currentServers[index].status = 'online';
     }).catch((e) => {
       currentServers[index].status = 'offline';
-      console.error(e.data);
     })
   }, 2000);
 };

src/app/dashboard/server.tsx

@@ -106,20 +106,23 @@ export default function ServerComponent({
   server,
   index,
   session,
+  nonInteractive,
 }: {
   server: Server;
   index: number;
   session: Session | null;
+  nonInteractive?: boolean;
 }) {
   const [deleteAlert, setDeleteAlert] = useState(false);
 
   return (
     <>
       <ContextMenu>
-        <ContextMenuTrigger>
+        <ContextMenuTrigger disabled={nonInteractive}>
           <Card
-            className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer !select-none"
+            className={cn("w-full transition-transform duration-500 !select-none", nonInteractive ? "" : "hover:scale-102 hover:cursor-pointer")}
             onClick={() => {
+              if (nonInteractive) return;
               redirect(`/servers/${index}`);
             }}
           >
@@ -183,7 +186,7 @@ export default function ServerComponent({
           </ContextMenuItem>
           <ContextMenuItem
             className="text-destructive"
-            onClick={() => setDeleteAlert(true)}
+            onClick={() => {if (nonInteractive) return;setDeleteAlert(true)}}
           >
             <Trash className="text-current" />
             Delete
@@ -204,7 +207,8 @@ export default function ServerComponent({
             <AlertDialogCancel>Cancel</AlertDialogCancel>
             <AlertDialogAction
               className="text-destructive-foreground bg-destructive"
-              onClick={() =>
+              onClick={() => {
+                if (nonInteractive) return;
                 session
                   ?.removeServer(index)
                   .then(() => {
@@ -215,7 +219,7 @@ export default function ServerComponent({
                       `Error deleting server: ` + e.response.data.message
                     );
                   })
-              }
+              }}
             >
               Delete
             </AlertDialogAction>

src/app/globals.css

@@ -310,4 +310,12 @@ body {
 
 .offline {
   color: var(--chart-4) !important;
+}
+
+.running {
+  color: var(--chart-3) !important;
+}
+
+.exited {
+  color: var(--chart-4) !important;
 }

src/app/servers/[server]/page.tsx

@@ -3,12 +3,16 @@ import useSession from "@/hooks/useSession";
 import Server from "@/types/server";
 import { useEffect, useState } from "react";
 import ServiceComponent from "./service";
+import ServerComponent from "@/app/dashboard/server";
+import Service, { AppService } from "@/types/service";
 
 interface Server2 extends Server {
-  apps: { name?: string }[]
+  services: Service[],
+  apps: AppService[],
 }
 
-export default function ServerPage() {
+export default function ServerPage(params: { server: string }) {
+  const index = parseInt(params.server) || 0;
   const session = useSession();
   const [server, setServer] = useState<Server2 | undefined>();
 
@@ -24,10 +28,15 @@ export default function ServerPage() {
   }, [session]);
 
   return server && (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
-      {server.apps.map((a, i) => (
-        <ServiceComponent key={i} service={a} index={i} session={session} / >
-    ))}
+    <div className="gap-4 flex flex-col">
+      <div>
+        <ServerComponent server={server} session={session} index={index} nonInteractive />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
+        {server.services.map((a, i) => (
+          <ServiceComponent key={i} service={a} index={i} session={session} / >
+      ))}
+      </div>
     </div>
   );
 }

src/app/servers/[server]/service.tsx

@@ -101,7 +101,8 @@ export default function ServiceComponent({
             <CardTitle>{service.name}</CardTitle>
 
             {(service.description && <CardDescription className="flex justify-between">
-              {service.description} {(service as any).cpu}
+              <div><p className={service.active_state}>{service.active_state[0].toUpperCase() + service.active_state.slice(1)}</p> {service.description}</div>
+              {(service as any).cpu}
             </CardDescription>)}
           </div>
         </div>

src/hooks/useSession.ts

@@ -19,7 +19,7 @@ export default function useSession() {
           setSession(new Session(sessionId));
         })
         .catch((e) => {
-          toast.error(e.response.data.message);
+          toast.error(e.response?.data.message || "Unknown error occurred: "+e);
           router.replace("/login");
         });
     else {

src/types/server.ts

@@ -1,8 +1,11 @@
+import { AppService } from "./service";
+
 export interface ServerAPI {
   name: string;
   ip: string;
   location?: string;
   coordinates?: [number, number];
+  apps: AppService[];
 }
 
 export default interface Server extends ServerAPI {

src/types/service.ts

@@ -1 +1,2 @@
-export default interface Service { name?: string, description?: string };
+export interface AppService { name?: string, description?: string };
+export default interface Service { name?: string, description?: string, active_state: string };