Merge pull request #97 from smart-mcp-proxy/fix/web-ui-delete-server

Fix: Web UI delete server functionality and add comprehensive tests

Author: Dumbris

frontend/src/components/ServerCard.vue

@@ -103,6 +103,44 @@
         >
           Details
         </router-link>
+
+        <button
+          @click="showDeleteConfirmation = true"
+          :disabled="loading"
+          class="btn btn-sm btn-error"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div v-if="showDeleteConfirmation" class="modal modal-open">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">Delete Server</h3>
+        <p class="mb-4">
+          Are you sure you want to delete the server <strong>{{ server.name }}</strong>?
+        </p>
+        <p class="text-sm text-base-content/70 mb-6">
+          This action cannot be undone. The server will be removed from your configuration.
+        </p>
+        <div class="modal-action">
+          <button
+            @click="showDeleteConfirmation = false"
+            :disabled="loading"
+            class="btn btn-outline"
+          >
+            Cancel
+          </button>
+          <button
+            @click="confirmDelete"
+            :disabled="loading"
+            class="btn btn-error"
+          >
+            <span v-if="loading" class="loading loading-spinner loading-xs"></span>
+            Delete Server
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -123,6 +161,7 @@ const props = defineProps<Props>()
 const serversStore = useServersStore()
 const systemStore = useSystemStore()
 const loading = ref(false)
+const showDeleteConfirmation = ref(false)
 
 const needsOAuth = computed(() => {
   // Check if server requires OAuth authentication
@@ -236,4 +275,25 @@ async function unquarantine() {
     loading.value = false
   }
 }
+
+async function confirmDelete() {
+  loading.value = true
+  try {
+    await serversStore.deleteServer(props.server.name)
+    systemStore.addToast({
+      type: 'success',
+      title: 'Server Deleted',
+      message: `${props.server.name} has been deleted successfully`,
+    })
+    showDeleteConfirmation.value = false
+  } catch (error) {
+    systemStore.addToast({
+      type: 'error',
+      title: 'Delete Failed',
+      message: error instanceof Error ? error.message : 'Unknown error',
+    })
+  } finally {
+    loading.value = false
+  }
+}
 </script>

frontend/src/services/api.ts

@@ -237,6 +237,13 @@ class APIService {
     })
   }
 
+  async deleteServer(serverName: string): Promise<APIResponse> {
+    return this.callTool('upstream_servers', {
+      operation: 'remove',
+      name: serverName
+    })
+  }
+
   async getServerTools(serverName: string): Promise<APIResponse<{ tools: Tool[] }>> {
     return this.request<{ tools: Tool[] }>(`/api/v1/servers/${encodeURIComponent(serverName)}/tools`)
   }

frontend/src/stores/servers.ts

@@ -39,7 +39,10 @@ export const useServersStore = defineStore('servers', () => {
     try {
       const response = await api.getServers()
       if (response.success && response.data) {
-        servers.value = response.data.servers
+        // Sort servers alphabetically by name to match tray menu order
+        servers.value = response.data.servers.sort((a, b) =>
+          a.name.localeCompare(b.name)
+        )
       } else {
         loading.value.error = response.error || 'Failed to fetch servers'
       }
@@ -188,6 +191,22 @@ export const useServersStore = defineStore('servers', () => {
     }
   }
 
+  async function deleteServer(serverName: string) {
+    try {
+      const response = await api.deleteServer(serverName)
+      if (response.success) {
+        // Remove server from local state
+        servers.value = servers.value.filter(s => s.name !== serverName)
+        return true
+      } else {
+        throw new Error(response.error || 'Failed to delete server')
+      }
+    } catch (error) {
+      console.error('Failed to delete server:', error)
+      throw error
+    }
+  }
+
   function updateServerStatus(statusUpdate: any) {
     // Update servers based on real-time status updates
     if (statusUpdate.upstream_stats) {
@@ -265,6 +284,7 @@ export const useServersStore = defineStore('servers', () => {
     triggerOAuthLogin,
     quarantineServer,
     unquarantineServer,
+    deleteServer,
     updateServerStatus,
     getServerByName,
     addServer,