From 3457acc48b52073be0f036a59da8918eafc6cfa1 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@users.noreply.github.com>
Date: Fri, 16 Aug 2024 19:34:36 +0200
Subject: [PATCH] chore(explorer): add join instructions (#3255)

* feat(explorer): give CLI instructions to join federated clusters

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

* debug message

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

---------

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/views/explorer.html | 23 ++++++++++++++++++++---
 core/p2p/federated_server.go  |  1 +
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/core/http/views/explorer.html b/core/http/views/explorer.html
index 033fa5466c6..1db3dc9b496 100644
--- a/core/http/views/explorer.html
+++ b/core/http/views/explorer.html
@@ -9,6 +9,9 @@
         color: #e2e8f0;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
+    .token {
+        word-break: break-all;
+    }
     .container {
         max-width: 800px;
         margin: 0 auto;
@@ -275,14 +278,28 @@ <h2 class="text-3xl font-bold mb-4"><i class="fa-solid fa-plus"></i> Add New Net
                     <h2 class="text-3xl font-bold mb-4 mt-4">Available Clusters in this network</h2>
                     <template x-for="cluster in network.Clusters" :key="cluster.NetworkID + cluster.Type">
                         <div class="cluster">
-                       
                             <div class="cluster-title"></div>
                             <span class="inline-block bg-orange-500 text-white py-1 px-3 rounded-full text-xs"  x-text="'Cluster Type: ' + cluster.Type">
                             </span>
+
                             <span class="inline-block bg-orange-500 text-white py-1 px-3 rounded-full text-xs" x-show="cluster.NetworkID" x-text="'Network ID: ' + (cluster.NetworkID || 'N/A')">
                             </span>
                             <span class="inline-block bg-blue-500 text-white py-1 px-3 rounded-full text-xs"  x-text="'Number of Workers: ' + cluster.Workers.length">
                             </span>
+                            <!-- Give commands and instructions to join the network -->
+                            <span class="inline-block token-box text-white py-1 px-3 text-xs" x-show="cluster.Type == 'federated'" >
+                                <p class="text-lg font-bold mb-4 mt-1">
+                                    <i class="fa-solid fa-copy copy-icon float-right"></i>
+                                    Command to connect (click to copy): 
+                                </p>
+                                <code class="block bg-gray-700 text-yellow-300 p-4 rounded-lg break-words"  @click="copyToken($el.textContent)" >
+                                    docker run -d --restart=always -e ADDRESS=":80" -e LOCALAI_P2P_NETWORK_ID=<span class="token" x-text="cluster.NetworkID"></span> -e LOCALAI_P2P_LOGLEVEL=debug --name local-ai -e TOKEN="<span class="token" x-text="network.token"></span>" --net host -ti localai/localai:master-ffmpeg-core federated --debug
+                                </code>
+                                or via CLI:
+                                <code class="block bg-gray-700 text-yellow-300 p-4 rounded-lg break-words"  @click="copyToken($el.textContent)" >
+                                   ADDRESS=":80" LOCALAI_P2P_NETWORK_ID=<span class="token" x-text="cluster.NetworkID"></span> LOCALAI_P2P_LOGLEVEL=debug TOKEN="<span class="token" x-text="network.token"></span>" local-ai federated --debug
+                                </code>
+                            </span>
                         </div>
                     </template>
                 </div>
@@ -361,8 +378,8 @@ <h2 class="text-3xl font-bold mb-4 mt-4">Available Clusters in this network</h2>
                     copyToken(token) {
                         navigator.clipboard.writeText(token)
                         .then(() => {
-                            console.log('Token copied to clipboard:', token);
-                            alert('Token copied to clipboard!');
+                            console.log('Text copied to clipboard:', token);
+                            alert('Text copied to clipboard!');
                         })
                         .catch(err => {
                             console.error('Failed to copy token:', err);
diff --git a/core/p2p/federated_server.go b/core/p2p/federated_server.go
index 6d7ccd46b93..18080b2f775 100644
--- a/core/p2p/federated_server.go
+++ b/core/p2p/federated_server.go
@@ -98,6 +98,7 @@ func (fs *FederatedServer) proxy(ctx context.Context, node *node.Node) error {
 
 					tunnelAddr = fs.SelectLeastUsedServer()
 					if tunnelAddr == "" {
+						log.Debug().Msgf("Least used server not found, selecting random")
 						tunnelAddr = fs.RandomServer()
 					}