From 37f261480a30a04813f03167d05b57ed171bbdd3 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Thu, 21 Dec 2023 20:47:47 +0800
Subject: [PATCH] WIP

---
 backend/agent-manager.ts                  |  9 +++++
 backend/dockge-server.ts                  |  1 +
 backend/models/agent.ts                   |  2 -
 frontend/src/components/StackList.vue     |  2 +-
 frontend/src/components/StackListItem.vue |  2 +-
 frontend/src/lang/en.json                 |  4 +-
 frontend/src/pages/DashboardHome.vue      | 48 +++++++++++++++++++----
 tsconfig.json                             |  3 +-
 8 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/backend/agent-manager.ts b/backend/agent-manager.ts
index 71c244e..44dedc1 100644
--- a/backend/agent-manager.ts
+++ b/backend/agent-manager.ts
@@ -139,10 +139,19 @@ export class AgentManager {
     async sendAgentList() {
         let list = await Agent.getAgentList();
         let result : Record<string, LooseObject> = {};
+
+        // Myself
+        result[""] = {
+            url: "",
+            username: "",
+            endpoint: "",
+        };
+
         for (let endpoint in list) {
             let agent = list[endpoint];
             result[endpoint] = agent.toJSON();
         }
+
         this.socket.emit("agentList", {
             ok: true,
             agentList: result,
diff --git a/backend/dockge-server.ts b/backend/dockge-server.ts
index 87f5b14..447fca3 100644
--- a/backend/dockge-server.ts
+++ b/backend/dockge-server.ts
@@ -36,6 +36,7 @@ import { AgentProxySocketHandler } from "./socket-handlers/agent-proxy-socket-ha
 import { AgentSocketHandler } from "./agent-socket-handler";
 import { AgentSocket } from "../common/agent-socket";
 import { ManageAgentSocketHandler } from "./socket-handlers/manage-agent-socket-handler";
+import { Terminal } from "./terminal";
 
 export class DockgeServer {
     app : Express;
diff --git a/backend/models/agent.ts b/backend/models/agent.ts
index 7d97bc8..f806a3d 100644
--- a/backend/models/agent.ts
+++ b/backend/models/agent.ts
@@ -1,7 +1,6 @@
 import { BeanModel } from "redbean-node/dist/bean-model";
 import { R } from "redbean-node";
 import { LooseObject } from "../../common/util-common";
-import User from "./user";
 
 export class Agent extends BeanModel {
 
@@ -23,7 +22,6 @@ export class Agent extends BeanModel {
         return {
             url: this.url,
             username: this.username,
-            password: this.password,
             endpoint: this.endpoint,
         };
     }
diff --git a/frontend/src/components/StackList.vue b/frontend/src/components/StackList.vue
index 062bb6f..6b00cb2 100644
--- a/frontend/src/components/StackList.vue
+++ b/frontend/src/components/StackList.vue
@@ -43,7 +43,7 @@
             </div>
         </div>
         <div ref="stackList" class="stack-list" :class="{ scrollbar: scrollbar }" :style="stackListStyle">
-            <div v-if="Object.keys($root.stackList).length === 0" class="text-center mt-3">
+            <div v-if="Object.keys(sortedStackList).length === 0" class="text-center mt-3">
                 <router-link to="/compose">{{ $t("addFirstStackMsg") }}</router-link>
             </div>
 
diff --git a/frontend/src/components/StackListItem.vue b/frontend/src/components/StackListItem.vue
index 83e525d..b17a91d 100644
--- a/frontend/src/components/StackListItem.vue
+++ b/frontend/src/components/StackListItem.vue
@@ -57,7 +57,7 @@ export default {
             if (this.stack.endpoint) {
                 return this.stack.endpoint;
             } else {
-                return "Current";
+                return this.$t("currentEndpoint");
             }
         },
         url() {
diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index 9e9c91d..8169bf8 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -105,5 +105,7 @@
     "dockgeURL": "Dockge URL (e.g. http://127.0.0.1:5001)",
     "agentOnline": "Online",
     "agentOffline": "Offline",
-    "agentConnecting": "Connecting"
+    "connecting": "Connecting",
+    "connect": "Connect",
+    "addAgent": "Add Agent"
 }
diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index e8cc94e..aa402fa 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -8,6 +8,7 @@
             <div class="row first-row">
                 <!-- Left -->
                 <div class="col-md-7">
+                    <!-- Stats -->
                     <div class="shadow-box big-padding text-center mb-4">
                         <div class="row">
                             <div class="col">
@@ -25,6 +26,7 @@
                         </div>
                     </div>
 
+                    <!-- Docker Run -->
                     <h2 class="mb-3">{{ $t("Docker Run") }}</h2>
                     <div class="mb-3">
                         <textarea id="name" v-model="dockerRunCommand" type="text" class="form-control docker-run" required placeholder="docker run ..."></textarea>
@@ -34,20 +36,32 @@
                 </div>
                 <!-- Right -->
                 <div class="col-md-5">
+                    <!-- Agent List -->
                     <div class="shadow-box big-padding">
                         <h4 class="mb-3">{{ $tc("dockgeAgent", 2) }} <span class="badge bg-warning" style="font-size: 12px;">beta</span></h4>
 
-                        <div class="mb-3">
-                            Current
+                        <div v-for="(agent, endpoint) in $root.agentList" :key="endpoint" class="mb-3">
+                            <!-- Agent Status -->
+                            <template v-if="$root.agentStatusList[endpoint]">
+                                <span v-if="$root.agentStatusList[endpoint] === 'online'" class="badge bg-primary me-2">{{ $t("agentOnline") }}</span>
+                                <span v-else-if="$root.agentStatusList[endpoint] === 'offline'" class="badge bg-danger me-2">{{ $t("agentOffline") }}</span>
+                                <span v-else class="badge bg-secondary me-2">{{ $t($root.agentStatusList[endpoint]) }}</span>
+                            </template>
+
+                            <!-- Agent Display Name -->
+                            <span v-if="endpoint === ''">{{ $t("currentEndpoint") }}</span>
+                            <span v-else>{{ endpoint }}</span>
+
+                            <font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="removeAgent(agent.url)" />
                         </div>
 
-                        <button v-if="!showAgentForm" class="btn btn-normal" @click="showAgentForm = !showAgentForm">Add Agent</button>
+                        <button v-if="!showAgentForm" class="btn btn-normal" @click="showAgentForm = !showAgentForm">{{ $t("addAgent") }}</button>
 
                         <!-- Add Agent Form -->
                         <form v-if="showAgentForm" @submit.prevent="addAgent">
                             <div class="mb-3">
                                 <label for="url" class="form-label">{{ $t("dockgeURL") }}</label>
-                                <input id="url" v-model="agent.url" type="text" class="form-control" required>
+                                <input id="url" v-model="agent.url" type="url" class="form-control" required placeholder="http://">
                             </div>
 
                             <div class="mb-3">
@@ -60,7 +74,7 @@
                                 <input id="password" v-model="agent.password" type="password" class="form-control" required autocomplete="new-password">
                             </div>
 
-                            <button type="submit" class="btn btn-normal">Add Agent</button>
+                            <button type="submit" class="btn btn-normal">{{ $t("connect") }}</button>
                         </form>
                     </div>
                 </div>
@@ -142,16 +156,29 @@ export default {
     methods: {
 
         addAgent() {
-            alert(123);
+            this.$root.getSocket().emit("addAgent", this.agent, (res) => {
+                if (res.ok) {
+                    this.$root.toastRes(res);
+                    this.showAgentForm = false;
+                }
+            });
 
             this.showAgentForm = false;
         },
 
+        removeAgent(url) {
+            this.$root.getSocket().emit("removeAgent", url, (res) => {
+                if (res.ok) {
+                    this.$root.toastRes(res);
+                }
+            });
+        },
+
         getStatusNum(statusName) {
             let num = 0;
 
-            for (let stackName in this.$root.stackList) {
-                const stack = this.$root.stackList[stackName];
+            for (let stackName in this.$root.completeStackList) {
+                const stack = this.$root.completeStackList[stackName];
                 if (statusNameShort(stack.status) === statusName) {
                     num += 1;
                 }
@@ -284,4 +311,9 @@ table {
 
 }
 
+.remove-agent {
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.3);
+}
+
 </style>
diff --git a/tsconfig.json b/tsconfig.json
index 335a60d..7cce64b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
         "skipLibCheck": true
     },
     "include": [
-        "backend/**/*"
+        "backend/**/*",
+        "common/**/*"
     ]
 }