Merge pull request #29 from webxdc/delete_devices

Delete devices

Author: Septias

backend/app.ts

@@ -51,12 +51,7 @@ export function createFrontend(
   });
   app.get<{}, Instance[]>("/instances", (req, res) => {
     res.json(
-      Array.from(instances.instances.values()).map((instance) => ({
-        id: instance.id,
-        port: instance.port,
-        url: instance.url,
-        color: instance.color,
-      }))
+      instances.list()
     );
   });
   app.post<{}, Instance>("/instances", (req, res) => {
@@ -69,6 +64,11 @@ export function createFrontend(
       color: instance.color,
     });
   });
+  app.delete<{id: string}, Instance[]>("/instances/:id", (req, res) => {
+    instances.delete(parseInt(req.params.id));
+    res.json(instances.list())
+  });
+
   app.post<{}, { status: string }>("/clear", (req, res) => {
     instances.clear();
     res.json({

backend/instance.ts

@@ -7,6 +7,7 @@ import { Location } from "./location";
 import { createPeer, InjectExpress } from "./app";
 import { AppInfo } from "./appInfo";
 import { getColorForId } from "./color";
+import { Instance as FrontendInstance } from '../types/instance';
 
 export type Options = {
   basePort: number;
@@ -32,6 +33,7 @@ type RequestInfoMessage = {
 class Instance {
   id: string;
   color: string;
+  server: any;
 
   constructor(
     public app: expressWs.Application,
@@ -44,10 +46,14 @@ class Instance {
   }
 
   start() {
-    this.app.listen(this.port, () => {
+    this.server = this.app.listen(this.port, () => {
       console.log(`Starting webxdc instance at port ${this.port}`);
     });
   }
+
+  close() {
+    this.server.close()
+  }
 }
 
 export class Instances {
@@ -133,7 +139,10 @@ export class Instances {
             parsed.serial,
             () => {
               return broadcast(wss, JSON.stringify({ type: "clear" }));
-            }
+            },
+            () => {
+              return broadcast(wss, JSON.stringify({ type: "delete" }));
+            },
           );
         } else if (isRequestInfoMessage(parsed)) {
           ws.send(
@@ -154,6 +163,16 @@ export class Instances {
     return instance;
   }
 
+  delete(id: number) {
+    let instance = this.instances.get(id);
+    if (instance == null) {
+      throw new Error(`Instance with id ${id} can't be deleted because it does not exist`);
+    }
+    instance.close();
+    this.processor.removeClient(instance.id);
+    this.instances.delete(id);
+  }
+
   start() {
     for (const instance of this.instances.values()) {
       instance.start();
@@ -167,6 +186,15 @@ export class Instances {
   onMessage(onMessage: OnMessage) {
     this._onMessage = onMessage;
   }
+
+  list(): FrontendInstance[]{
+    return Array.from(this.instances.values()).map((instance) => ({
+      id: instance.id,
+      port: instance.port,
+      url: instance.url,
+      color: instance.color,
+    }))
+  }
 }
 
 function broadcast(wss: Server<WebSocket>, data: string): boolean {

backend/message.ts

@@ -12,11 +12,13 @@ type UpdateListenerMulti = (
 ) => boolean;
 
 type ClearListener = () => boolean;
+type DeleteListener = () => boolean;
 
 type Connect = (
   updateListener: UpdateListenerMulti,
   serial: number,
-  clearListener?: ClearListener
+  clearListener?: ClearListener,
+  deleteListener?: DeleteListener,
 ) => void;
 
 export type WebXdcMulti = {
@@ -31,12 +33,14 @@ export type OnMessage = (message: Message) => void;
 export interface IProcessor {
   createClient(id: string): WebXdcMulti;
   clear(): void;
+  removeClient(id: string): void;
 }
 
 class Client implements WebXdcMulti {
   updateListener: UpdateListenerMulti | null = null;
   clearListener: ClearListener | null = null;
   updateSerial: number | null = null;
+  deleteListener: DeleteListener | null = null;
 
   constructor(public processor: Processor, public id: string) {}
 
@@ -47,7 +51,8 @@ class Client implements WebXdcMulti {
   connect(
     listener: UpdateListenerMulti,
     serial: number,
-    clearListener: ClearListener = () => true
+    clearListener: ClearListener = () => true,
+    deleteListener: DeleteListener = () => true,
   ): void {
     this.processor.onMessage({
       type: "connect",
@@ -83,6 +88,8 @@ class Client implements WebXdcMulti {
       }
       return hasReceived;
     };
+
+    this.deleteListener = deleteListener;
     this.updateListener = updateListener;
     this.updateSerial = serial;
     this.processor.catchUp(updateListener, serial);
@@ -114,6 +121,14 @@ class Client implements WebXdcMulti {
     this.clearListener();
     this.processor.clearInstanceIds.add(this.id);
   }
+
+  // sends a message to the all clients to shut down
+  delete() {
+    if ( this.deleteListener == null ) {
+      return;
+    }
+    this.deleteListener()
+  }
 }
 
 class Processor implements IProcessor {
@@ -130,6 +145,12 @@ class Processor implements IProcessor {
     return client;
   }
 
+  removeClient(id: string) {
+    let client_index = this.clients.findIndex((client) => client.id == id);
+    this.clients[client_index].delete();
+    this.clients.splice(client_index, 1);
+  }
+
   distribute(instanceId: string, update: Update<JsonValue>, descr: string) {
     this.currentSerial++;
     const receivedUpdate: ReceivedUpdate<JsonValue> = {

frontend/InstanceHeader.tsx

@@ -1,10 +1,10 @@
 import { Component, Show, createMemo, JSX, Accessor } from "solid-js";
-import { Flex, Text, Badge, Tooltip, IconButton } from "@hope-ui/solid";
+import { Flex, Text, Badge, Tooltip, IconButton, notificationService } from "@hope-ui/solid";
 import { IoRefreshOutline, IoStop, IoPlay } from "solid-icons/io";
-import { FiExternalLink } from "solid-icons/fi";
+import { FiExternalLink, FiTrash } from "solid-icons/fi";
 
 import type { Instance as InstanceData } from "../types/instance";
-import { sent, received } from "./store";
+import { sent, received, mutateInstances } from "./store";
 import { Search } from "./Sidebar";
 
 const InstanceHeader: Component<{
@@ -19,6 +19,15 @@ const InstanceHeader: Component<{
     return sent(props.instance.id);
   });
 
+  const handleRemoveInstance = async (id: string) => {
+    let new_instances = await (await fetch(`/instances/${id}`, { method: "DELETE" })).json()
+    mutateInstances(new_instances);
+    notificationService.show({
+      title: `Deleted instance ${id}`,
+    });
+  };
+
+
   const receivedCount = createMemo(() => {
     return received(props.instance.id);
   });
@@ -92,6 +101,11 @@ const InstanceHeader: Component<{
           disabled={!props.isStarted()}
           icon={<IoRefreshOutline size={22} color="#000000" />}
         />
+        <InstanceButton
+          label="Delete"
+          onClick={() => handleRemoveInstance(props.instance.id)}
+          icon={<FiTrash size={22} color="#000000" />}
+        />
       </Flex>
     </Flex>
   );

sim/create.ts

@@ -19,7 +19,11 @@ type InfoMessage = {
   info: Info;
 };
 
-type Message = UpdatesMessage | ClearMessage | InfoMessage;
+type DeleteMessage = {
+  type: "delete";
+};
+
+type Message = UpdatesMessage | ClearMessage | InfoMessage | DeleteMessage;
 
 export type TransportMessageCallback = (message: Message) => void;
 
@@ -33,7 +37,7 @@ export type Transport = {
   address(): string;
   name(): string;
   setInfo(info: Info): void;
-  //  getInfo(): Promise<Info>;
+  // getInfo(): Promise<Info>;
 };
 
 type Log = (...args: any[]) => void;
@@ -66,6 +70,9 @@ export function createWebXdc(
         } else if (isInfoMessage(message)) {
           log("info", message.info);
           transport.setInfo(message.info);
+        } else if (isDeleteMessage(message)) {
+          log("delete");
+          window.top?.close()
         }
       });
       transport.onConnect(() => {
@@ -94,3 +101,7 @@ function isClearMessage(data: Message): data is ClearMessage {
 function isInfoMessage(data: Message): data is InfoMessage {
   return data.type === "info";
 }
+
+function isDeleteMessage(data: Message): data is InfoMessage {
+  return data.type === "delete";
+}