Release/1.0.1

backend/src/controllers/DeviceController.ts

@@ -162,7 +162,7 @@ export class DeviceController {
         try {
             const { id } = req.params;
             // will have a payload user id otherwise this request is not authenticated through middleware
-            const device = await this.deviceService.unbookDevice(parseInt(id), req.jwt_payload?.id!);
+            const device = await this.deviceService.unbookDevice(parseInt(id), req.jwt_payload?.id!, req.jwt_payload?.accountType!);
 
             // we successfully unbooked the device
             if (device) {

backend/src/repositories/PrismaDeviceRepository.ts

@@ -1,4 +1,4 @@
-import { DeviceType, IconType, PrismaClient, type Device } from "@prisma/client";
+import { AccountType, DeviceType, IconType, PrismaClient, type Device } from "@prisma/client";
 import bcrypt from 'bcryptjs';
 import { IDeviceRepository } from "../types/classInterfaces";
 
@@ -108,16 +108,16 @@ export class PrismaDeviceRepository implements IDeviceRepository {
         });
     }
 
-    async unbookDevice(deviceId: number, userId: number): Promise<Device | null> {
+    async unbookDevice(deviceId: number, userId: number, accountType: AccountType): Promise<Device | null> {
         return await this.prisma.$transaction(async (tx) => {
             // check if device is already booked
             const current = await tx.device.findUnique({
                 where: { id: deviceId },
                 select: { userId: true }
             });
 
-            // only allow unbooking of device if userIds match
-            if (current?.userId !== userId) {
+            // only allow unbooking of device if userIds match AND account type is not admin or owner
+            if (accountType !== 'ADMIN' && accountType !== 'OWNER' && current?.userId !== userId) {
                 throw new Error("UNAUTHORIZED");
             }
 

backend/src/services/DeviceService.ts

@@ -1,4 +1,4 @@
-import type { Device, DeviceType, IconType } from "@prisma/client";
+import type { AccountType, Device, DeviceType, IconType } from "@prisma/client";
 import { IDeviceRepository, IDeviceService } from "../types/classInterfaces";
 
 export class DeviceService implements IDeviceService {
@@ -58,7 +58,7 @@ export class DeviceService implements IDeviceService {
         return this.deviceRepository.bookDevice(deviceId, userId);
     }
 
-    async unbookDevice(deviceId: number, userId: number): Promise<Device | null> {
-        return this.deviceRepository.unbookDevice(deviceId, userId);
+    async unbookDevice(deviceId: number, userId: number, accountType: AccountType): Promise<Device | null> {
+        return this.deviceRepository.unbookDevice(deviceId, userId, accountType);
     }
 }

backend/src/types/classInterfaces.ts

@@ -1,5 +1,5 @@
 // holds interfaces similar to C#
-import { AppConfig, AppUser, Connection, Device, DeviceType, IconType, Topology } from "@prisma/client";
+import { AccountType, AppConfig, AppUser, Connection, Device, DeviceType, IconType, Topology } from "@prisma/client";
 import type { CreateConnectionRequestPayload, CreateTopologyRequestPayload, RegisterUserRequestPayload } from "common";
 import { UpdateTopologyDTO } from "./types";
 
@@ -55,7 +55,7 @@ export interface IDeviceRepository {
     findByType(deviceType: DeviceType): Promise<Device[]>;
     findByIcon(deviceIcon: IconType): Promise<Device[]>;
     bookDevice(deviceId: number, userId: number): Promise<Device | null>;
-    unbookDevice(deviceId: number, userId: number): Promise<Device | null>;
+    unbookDevice(deviceId: number, userId: number, accountType: AccountType): Promise<Device | null>;
 }
 
 export interface IDeviceService {
@@ -69,7 +69,7 @@ export interface IDeviceService {
     getDevicesByType(deviceType: DeviceType): Promise<Device[]>;
     getDevicesByIcon(deviceIcon: IconType): Promise<Device[]>;
     bookDevice(deviceId: number, userId: number): Promise<Device | null>;
-    unbookDevice(deviceId: number, userId: number): Promise<Device | null>;
+    unbookDevice(deviceId: number, userId: number, accountType: AccountType): Promise<Device | null>;
 }
 
 export interface IConnectionRepository {

compose.prod.yaml

@@ -14,7 +14,7 @@ services:
       - postgres_data:/var/lib/postgresql/data
 
   backend:
-    image: breyr/top-backend:1.0.0
+    image: breyr/top-backend:1.0.1
     container_name: backend
     environment:
       DATABASE_URL: postgres://demo:demo@postgres:5432/demo
@@ -25,15 +25,15 @@ services:
       - postgres
 
   frontend:
-    image: breyr/top-frontend:1.0.0
+    image: breyr/top-frontend:1.0.1
     container_name: frontend
     ports:
       - "80:80"
     depends_on:
       - backend
 
   interconnect-api:
-    image: breyr/top-interconnectapi:1.0.0
+    image: breyr/top-interconnectapi:1.0.1
     container_name: interconnect-api
     environment:
       SECRET_KEY: your_secret

frontend/package.json

@@ -40,7 +40,7 @@
     "tailwindcss": "^3.4.14",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
-    "vite": "^6.1.1",
+    "vite": "^6.2.4",
     "vite-plugin-svgr": "^4.3.0"
   }
 }

frontend/src/components/TopologyCard.tsx

@@ -1,5 +1,5 @@
 import { Topology } from 'common';
-import { Image, Trash } from "lucide-react";
+import { Archive, Image, Trash } from "lucide-react";
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../hooks/useAuth.ts";
@@ -21,15 +21,13 @@ const TopologyCard: React.FC<TopologyProps> = ({
   onDelete,
   onArchive,
   readOnly,
-  userId
 }) => {
   const { menuOpen, hideMenu } = useContextMenu();
   const { user } = useAuth();
   const navigateTo = useNavigate();
   const [thumbnailSrc, setThumbnailSrc] = useState<string | null>(null);
   const [archived, setArchived] = useState(initialArchived);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const ownsTopology = user?.id === userId;
 
   const handleClick = (event: React.MouseEvent) => {
     if (archived) return;
@@ -87,9 +85,9 @@ const TopologyCard: React.FC<TopologyProps> = ({
   return (
     <div className="relative group">
       <button
-        onClick={handleDeleteClick}
-        className="hidden group-hover:block absolute top-0 right-[-20px] m-1 p-2 shadow-md text-red-500 bg-gray-50 rounded-full hover:bg-gray-100 z-10">
-        <Trash size={16} />
+        onClick={(e) => archived ? handleDeleteClick(e) : toggleArchived(e)}
+        className="hidden group-hover:block absolute top-0 right-[-20px] m-1 p-2 shadow-md bg-gray-50 rounded-full hover:bg-gray-100 z-10">
+        {archived ? <Trash size={16} className='text-red-500' /> : <Archive size={16} className='text-amber-500' />}
       </button>
       <div
         key={id}
@@ -119,10 +117,9 @@ const TopologyCard: React.FC<TopologyProps> = ({
               </p>
             </div>
             <span
-              onClick={!ownsTopology ? undefined : toggleArchived}
               className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full ${archived
-                ? `bg-red-100 text-red-700 ${!ownsTopology ? "cursor-default" : "hover:bg-red-300 cursor-pointer"}`
-                : `bg-green-100 text-green-700 ${!ownsTopology ? "cursor-default" : "hover:bg-green-300 cursor-pointer"}`
+                ? `bg-red-100 text-red-700`
+                : `bg-green-100 text-green-700`
                 }`}
             >
               {archived ? "Archived" : "Active"}

frontend/src/components/TopologyDetailCard.tsx

@@ -1,7 +1,6 @@
 import { Topology } from 'common';
-import { Trash } from "lucide-react";
-import React, { useState } from 'react';
-import { useAuth } from "../hooks/useAuth.ts";
+import { Image, Trash } from "lucide-react";
+import React, { useEffect, useState } from 'react';
 import DeletionModal from "./DeletionModal.tsx";
 
 interface TopologyProps extends Topology {
@@ -13,28 +12,18 @@ interface TopologyProps extends Topology {
 const TopologyDetailCard: React.FC<TopologyProps> = ({
   id,
   name,
-  archived: initialArchived,
+  archived,
   updatedAt,
   onDelete,
-  onArchive,
-  userId,
+  thumbnail,
   reactFlowState
 }) => {
-  const { user } = useAuth();
-  const [archived, setArchived] = useState(initialArchived);
+  const [thumbnailSrc, setThumbnailSrc] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const ownsTopology = user?.id === userId;
 
   // get the devices on the topology
   const devicesUsedInTopology = reactFlowState?.nodes.map(n => n.id);
 
-  // toggle the archive state
-  const toggleArchived = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    setArchived(!archived);
-    onArchive(id);
-  };
-
   const handleDeleteClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     setIsModalOpen(true);
@@ -45,6 +34,30 @@ const TopologyDetailCard: React.FC<TopologyProps> = ({
     setIsModalOpen(false);
   };
 
+  // handle conversion of thumbnail
+  useEffect(() => {
+    if (!thumbnail) return;
+    try {
+      // convert the object to a Uint8Array
+      const byteArray = new Uint8Array(Object.values(thumbnail));
+
+      // convert Uint8Array to binary string
+      const binaryString = Array.from(byteArray)
+        .map(byte => String.fromCharCode(byte))
+        .join('');
+
+      // convert binary string to base64
+      const base64String = btoa(binaryString);
+      // check if empty
+      if (base64String !== "AA==") {
+        const thumbnailSourceString = `data:image/jpg;base64,${base64String}`;
+        setThumbnailSrc(thumbnailSourceString);
+      }
+    } catch (error) {
+      console.error('Error converting to base64:', error);
+    }
+  }, [thumbnail]);
+
   return (
     <div className="relative group">
       <button
@@ -56,6 +69,19 @@ const TopologyDetailCard: React.FC<TopologyProps> = ({
         key={id}
         className={`my-5 rounded-lg border border-gray-200 bg-[#ffffff] shadow-sm transition-shadow duration-200 flex flex-col items-center text-gray-700`}
       >
+        <div className="w-full">
+          {thumbnailSrc ? (
+            <img
+              src={thumbnailSrc}
+              alt="Topology Thumbnail"
+              className="w-full h-36 object-cover bg-gray-100 rounded-t-md"
+            />
+          ) : (
+            <div className="w-full h-36 flex items-center justify-center bg-gray-100 rounded-t-md">
+              <Image size={80} className="text-gray-400" />
+            </div>
+          )}
+        </div>
         <div className="w-full flex-1 rounded-b-md p-5">
           <p className="text-sm font-medium text-gray-900 mb-1">{name}</p>
           <div className="flex justify-between w-full items-center">
@@ -66,22 +92,26 @@ const TopologyDetailCard: React.FC<TopologyProps> = ({
               </p>
             </div>
             <span
-              onClick={!ownsTopology ? undefined : toggleArchived}
               className={`inline-flex items-center px-2 py-0.5 text-xs font-medium rounded-full ${archived
-                ? `bg-red-100 text-red-700 ${!ownsTopology ? "cursor-default" : "hover:bg-red-300 cursor-pointer"}`
-                : `bg-green-100 text-green-700 ${!ownsTopology ? "cursor-default" : "hover:bg-green-300 cursor-pointer"}`
+                ? `bg-red-100 text-red-700`
+                : `bg-green-100 text-green-700`
                 }`}
             >
               {archived ? "Archived" : "Active"}
             </span>
           </div>
           <div className='mt-2'>
-            <p className='text-md text-gray-500'>Devices in Use</p>
-            <div className='flex flex-col'>
-              {devicesUsedInTopology?.map(d => (
-                <span key={d} className='text-xs'>{d}</span>
-              ))}
-            </div>
+            {
+              !archived &&
+              <>
+                <p className='text-md text-gray-500'>Devices in Use</p>
+                <div className='flex flex-col'>
+                  {devicesUsedInTopology?.map(d => (
+                    <span key={d} className='text-xs'>{d}</span>
+                  ))}
+                </div>
+              </>
+            }
           </div>
         </div>
       </div>

frontend/src/components/reactflow/TopologyCanvas.tsx

@@ -329,6 +329,7 @@ const TopologyCanvas = () => {
                 selectionMode={SelectionMode.Partial}
                 onPaneClick={onPaneClick}
                 onNodeContextMenu={onNodeContextMenu}
+                snapToGrid={true}
             >
                 <Background color="rgb(247, 247, 247)" variant={BackgroundVariant.Dots} size={3} />
                 {menu && (

frontend/src/components/reactflow/overlayui/ContextMenu.tsx

@@ -84,11 +84,17 @@ export default function ContextMenu({
             onClick(); // close the context menu
             setDisableDelete(true);
             // Check if the device has any edges
-            const edgesForDevice = edges.filter(e => e.source === node?.data.deviceData?.name || e.target === node?.data.deviceData?.name);
-            console.log(edgesForDevice);
+            const edgesForDevice = edges.filter(e => e.source === node?.data.deviceData?.name || e.target === node?.data.deviceData?.name).map(e => ({
+                value: e.id,
+                label: `(${e.source}) ${e.data?.sourcePort ?? ''} -> (${e.target}) ${e.data?.targetPort ?? ''}`,
+                firstLabDevice: e.source,
+                firstLabDevicePort: e.data?.sourcePort ?? '',
+                secondLabDevice: e.target,
+                secondLabDevicePort: e.data?.targetPort ?? '',
+            }));
             if (edgesForDevice.length > 0) {
                 // attempt to delete all links
-                const numFailures = await deleteLinkBulk(new Set(currentEdges));
+                const numFailures = await deleteLinkBulk(new Set(edgesForDevice));
 
                 // only remove the node if all links were successfully deleted
                 if (numFailures === 0) {