From c0fc76a0c87bb0aa596e46ffbed85831132d7447 Mon Sep 17 00:00:00 2001
From: stroskler <mail@skl.works>
Date: Thu, 1 Feb 2024 07:18:52 +0000
Subject: [PATCH 01/14] feat: dockge agent friendly name

Add the option to set a friendly name to a dockge remote
agent. If the field is not used the `agent.url` will be
displayed
---
 backend/agent-manager.ts                            |  5 ++++-
 backend/migrations/2023-12-20-2117-agent-table.ts   |  1 +
 backend/models/agent.ts                             |  1 +
 .../socket-handlers/manage-agent-socket-handler.ts  |  2 +-
 frontend/src/pages/DashboardHome.vue                | 13 +++++++++++--
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/backend/agent-manager.ts b/backend/agent-manager.ts
index 895232a4..527d53dc 100644
--- a/backend/agent-manager.ts
+++ b/backend/agent-manager.ts
@@ -76,12 +76,14 @@ export class AgentManager {
      * @param url
      * @param username
      * @param password
+     * @param friendlyname
      */
-    async add(url : string, username : string, password : string) : Promise<Agent> {
+    async add(url : string, username : string, password : string, friendlyname : string) : Promise<Agent> {
         let bean = R.dispense("agent") as Agent;
         bean.url = url;
         bean.username = username;
         bean.password = password;
+        bean.friendlyname = friendlyname;
         await R.store(bean);
         return bean;
     }
@@ -276,6 +278,7 @@ export class AgentManager {
             url: "",
             username: "",
             endpoint: "",
+            friendlyname: "",
         };
 
         for (let endpoint in list) {
diff --git a/backend/migrations/2023-12-20-2117-agent-table.ts b/backend/migrations/2023-12-20-2117-agent-table.ts
index ae18d1d2..0a48e7d3 100644
--- a/backend/migrations/2023-12-20-2117-agent-table.ts
+++ b/backend/migrations/2023-12-20-2117-agent-table.ts
@@ -7,6 +7,7 @@ export async function up(knex: Knex): Promise<void> {
         table.string("url", 255).notNullable().unique();
         table.string("username", 255).notNullable();
         table.string("password", 255).notNullable();
+        table.string("friendlyname", 255);
         table.boolean("active").notNullable().defaultTo(true);
     });
 }
diff --git a/backend/models/agent.ts b/backend/models/agent.ts
index f806a3d7..ca5450c8 100644
--- a/backend/models/agent.ts
+++ b/backend/models/agent.ts
@@ -23,6 +23,7 @@ export class Agent extends BeanModel {
             url: this.url,
             username: this.username,
             endpoint: this.endpoint,
+            friendlyname: this.friendlyname
         };
     }
 
diff --git a/backend/socket-handlers/manage-agent-socket-handler.ts b/backend/socket-handlers/manage-agent-socket-handler.ts
index 6f8fef4d..bc6ed204 100644
--- a/backend/socket-handlers/manage-agent-socket-handler.ts
+++ b/backend/socket-handlers/manage-agent-socket-handler.ts
@@ -20,7 +20,7 @@ export class ManageAgentSocketHandler extends SocketHandler {
                 let data = requestData as LooseObject;
                 let manager = socket.instanceManager;
                 await manager.test(data.url, data.username, data.password);
-                await manager.add(data.url, data.username, data.password);
+                await manager.add(data.url, data.username, data.password, data.friendlyname);
 
                 // connect to the agent
                 manager.connect(data.url, data.username, data.password);
diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index a6db753e..86c5833c 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -49,8 +49,11 @@
                             </template>
 
                             <!-- Agent Display Name -->
-                            <span v-if="endpoint === ''">{{ $t("currentEndpoint") }}</span>
-                            <a v-else :href="agent.url" target="_blank">{{ endpoint }}</a>
+                            <template v-if="$root.agentStatusList[endpoint]">
+                                <span v-if="endpoint === '' && agent.friendlyname === ''" class="badge bg-secondary me-2">Controller</span>
+                                <span v-else-if="agent.friendlyname === ''" :href="agent.url">{{ endpoint }}</span>
+                                <span v-else :href="agent.url">{{ agent.friendlyname }}</span>
+                            </template>
 
                             <!-- Remove Button -->
                             <font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="showRemoveAgentDialog[agent.url] = !showRemoveAgentDialog[agent.url]" />
@@ -81,6 +84,11 @@
                                 <input id="password" v-model="agent.password" type="password" class="form-control" required autocomplete="new-password">
                             </div>
 
+                            <div class="mb-3">
+                                <label for="friendlyname" class="form-label">{{ $t("Friendly Name") }}</label>
+                                <input id="friendlyname" v-model="agent.friendlyname" type="text" class="form-control" optional>
+                            </div>
+
                             <button type="submit" class="btn btn-primary" :disabled="connectingAgent">
                                 <template v-if="connectingAgent">{{ $t("connecting") }}</template>
                                 <template v-else>{{ $t("connect") }}</template>
@@ -126,6 +134,7 @@ export default {
                 url: "http://",
                 username: "",
                 password: "",
+                friendlyname: "",
             }
         };
     },

From 11f5fff65d2b12ca47a0cf354dc49ab14846aa72 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Thu, 1 Feb 2024 18:51:57 +0000
Subject: [PATCH 02/14] docs(en): add missing new item

adding `Friendly Name` to en.json
---
 frontend/src/lang/en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index 93bf53a1..286eddc3 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -112,5 +112,6 @@
     "agentRemovedSuccessfully": "Agent removed successfully.",
     "removeAgent": "Remove Agent",
     "removeAgentMsg": "Are you sure you want to remove this agent?",
-    "LongSyntaxNotSupported": "Long syntax is not supported here. Please use the YAML editor."
+    "LongSyntaxNotSupported": "Long syntax is not supported here. Please use the YAML editor.",
+    "Friendly Name": "Friendly Name"
 }

From 54e158f75a9e9ffc02531a54332f85f090487cfc Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Thu, 1 Feb 2024 18:54:52 +0000
Subject: [PATCH 03/14] DRAFT: feat(friendlyName): make friendlyname
 configurable

allow updates and removal of `friendly name`
---
 backend/agent-manager.ts                      | 20 +++++++++++++
 backend/models/agent.ts                       |  3 +-
 .../manage-agent-socket-handler.ts            | 26 +++++++++++++++++
 frontend/components.d.ts                      |  6 ++++
 frontend/src/pages/DashboardHome.vue          | 29 +++++++++++++++++--
 5 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/backend/agent-manager.ts b/backend/agent-manager.ts
index 527d53dc..3d57a53b 100644
--- a/backend/agent-manager.ts
+++ b/backend/agent-manager.ts
@@ -77,6 +77,7 @@ export class AgentManager {
      * @param username
      * @param password
      * @param friendlyname
+     * @param updatedFriendlyName
      */
     async add(url : string, username : string, password : string, friendlyname : string) : Promise<Agent> {
         let bean = R.dispense("agent") as Agent;
@@ -106,6 +107,24 @@ export class AgentManager {
         }
     }
 
+    /**
+     *
+     * @param friendlyname
+     * @param updatedFriendlyName
+     */
+
+    async update(friendlyname : string, updatedFriendlyName : string) {
+        let bean = await R.findOne("agent", " friendlyname = ? ", [
+            friendlyname,
+        ]);
+
+        if (bean) {
+            bean.friendlyname = updatedFriendlyName;
+        } else {
+            throw new Error("Friendly name could not be updated ");
+        }
+    }
+
     connect(url : string, username : string, password : string) {
         let obj = new URL(url);
         let endpoint = obj.host;
@@ -279,6 +298,7 @@ export class AgentManager {
             username: "",
             endpoint: "",
             friendlyname: "",
+            updatedFriendlyName: "",
         };
 
         for (let endpoint in list) {
diff --git a/backend/models/agent.ts b/backend/models/agent.ts
index ca5450c8..bcb17e39 100644
--- a/backend/models/agent.ts
+++ b/backend/models/agent.ts
@@ -23,7 +23,8 @@ export class Agent extends BeanModel {
             url: this.url,
             username: this.username,
             endpoint: this.endpoint,
-            friendlyname: this.friendlyname
+            friendlyname: this.friendlyname,
+            updatedFriendlyName: this.updatedFriendlyName
         };
     }
 
diff --git a/backend/socket-handlers/manage-agent-socket-handler.ts b/backend/socket-handlers/manage-agent-socket-handler.ts
index bc6ed204..cac96e04 100644
--- a/backend/socket-handlers/manage-agent-socket-handler.ts
+++ b/backend/socket-handlers/manage-agent-socket-handler.ts
@@ -66,5 +66,31 @@ export class ManageAgentSocketHandler extends SocketHandler {
                 callbackError(e, callback);
             }
         });
+
+        // updateAgent
+        socket.on("updateAgent", async (friendlyname : unknown, updatedFriendlyName : unknown, callback : unknown) => {
+            try {
+                log.debug("manage-agent-socket-handler", "updateAgent");
+                checkLogin(socket);
+
+                if (typeof(updatedFriendlyName) !== "string") {
+                    throw new Error("FriendlyName must be a string");
+                }
+
+                let manager = socket.instanceManager;
+                await manager.update(friendlyname, updatedFriendlyName);
+
+                server.disconnectAllSocketClients(undefined, socket.id);
+                manager.sendAgentList();
+
+                callbackResult({
+                    ok: true,
+                    msg: "agentUpdatedSuccessfully",
+                    msgi18n: true,
+                }, callback);
+            } catch (e) {
+                callbackError(e, callback);
+            }
+        });
     }
 }
diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 708dd4e0..c97e3802 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -11,8 +11,11 @@ declare module 'vue' {
     Appearance: typeof import('./src/components/settings/Appearance.vue')['default']
     ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
     ArraySelect: typeof import('./src/components/ArraySelect.vue')['default']
+    BButton: typeof import('bootstrap-vue-next')['BButton']
     BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
     BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
+    BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
+    BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
     BModal: typeof import('bootstrap-vue-next')['BModal']
     Confirm: typeof import('./src/components/Confirm.vue')['default']
     Container: typeof import('./src/components/Container.vue')['default']
@@ -29,4 +32,7 @@ declare module 'vue' {
     TwoFADialog: typeof import('./src/components/TwoFADialog.vue')['default']
     Uptime: typeof import('./src/components/Uptime.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vBModal: typeof import('bootstrap-vue-next')['vBModal']
+  }
 }
diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index 86c5833c..e843fa1f 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -55,10 +55,19 @@
                                 <span v-else :href="agent.url">{{ agent.friendlyname }}</span>
                             </template>
 
+                            <!-- Edit FriendlyName  -->
+                            <font-awesome-icon class="ms-2" icon="pen-to-square" @click="showEditAgentFriendlynameDialog[agent.friendlyname] = !showEditAgentFriendlynameDialog[agent.friendlyname]" />
+
+                            <!-- Edit Dialog -->
+                            <BModal v-model="showEditAgentFriendlynameDialog[agent.friendlyname]" :no-close-on-backdrop="true" :close-on-esc="true" :okTitle="$t('Update Friendlyname')" okVariant="info" @ok="updateFriendlyname(agent.friendlyname, agent.updatedFriendlyName)">
+                                <label for="Update Friendlyname" class="form-label">Current value: {{ $t(agent.friendlyname) }}</label>
+                                <input id="updatedFriendlyName" v-model="agent.updatedFriendlyName" type="text" class="form-control" optional>
+                            </BModal>
+
                             <!-- Remove Button -->
                             <font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="showRemoveAgentDialog[agent.url] = !showRemoveAgentDialog[agent.url]" />
 
-                            <!-- Remoe Agent Dialog -->
+                            <!-- Remove Agent Dialog -->
                             <BModal v-model="showRemoveAgentDialog[agent.url]" :okTitle="$t('removeAgent')" okVariant="danger" @ok="removeAgent(agent.url)">
                                 <p>{{ agent.url }}</p>
                                 {{ $t("removeAgentMsg") }}
@@ -129,12 +138,14 @@ export default {
             dockerRunCommand: "",
             showAgentForm: false,
             showRemoveAgentDialog: {},
+            showEditAgentFriendlynameDialog: {},
             connectingAgent: false,
             agent: {
                 url: "http://",
                 username: "",
                 password: "",
                 friendlyname: "",
+                updatedFriendlyName: "",
             }
         };
     },
@@ -208,6 +219,20 @@ export default {
             });
         },
 
+        updateFriendlyname(friendlyname, updatedFriendlyName) {
+            //console.log(this.showEditAgentFriendlynameDialog.inputNewFriendlyName);
+            this.$root.getSocket().emit("updateAgent", friendlyname, updatedFriendlyName, (res) => {
+                this.$root.toastRes(res);
+
+                if (res.ok) {
+                    this.showAgentForm = false;
+                    this.agent = {
+                        updatedFriendlyName: "",
+                    };
+                }
+            });
+        },
+
         getStatusNum(statusName) {
             let num = 0;
 
@@ -295,7 +320,7 @@ export default {
             }
 
         },
-    },
+    }
 };
 </script>
 

From 8f142af12e9ff8c65925e46248bf30886d5bcb79 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Thu, 1 Feb 2024 22:12:02 +0000
Subject: [PATCH 04/14] feat(containerTerminal): add friendly name

adding the `friendlyname` option to the running and paused container
---
 frontend/src/mixins/socket.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/mixins/socket.ts b/frontend/src/mixins/socket.ts
index abb95e0e..f5573dd6 100644
--- a/frontend/src/mixins/socket.ts
+++ b/frontend/src/mixins/socket.ts
@@ -131,10 +131,15 @@ export default defineComponent({
     methods: {
 
         endpointDisplayFunction(endpoint : string) {
-            if (endpoint) {
-                return endpoint;
-            } else {
-                return this.$t("currentEndpoint");
+            for (const [k, v] of Object.entries(this.$data.agentList)) {
+                if (endpoint) {
+                    if (endpoint === v["endpoint"] && v["friendlyname"] !== "") {
+                        return v["friendlyname"];
+                    }
+                    if (endpoint === v["endpoint"] && v["friendlyname"] === "" ) {
+                        return endpoint;
+                    }
+                }
             }
         },
 

From 62ceb44a5e9f44ec1a4ca9aa6bf26083c51b395b Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Sat, 3 Feb 2024 15:02:09 +0000
Subject: [PATCH 05/14] feat(compose): add friendly names

when create a new stack via UI the friendly name should also be displayed
---
 frontend/src/pages/Compose.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 7d378543..85a130d9 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -99,7 +99,7 @@
                                 <label for="name" class="form-label">{{ $t("dockgeAgent") }}</label>
                                 <select v-model="stack.endpoint" class="form-select">
                                     <option v-for="(agent, endpoint) in $root.agentList" :key="endpoint" :value="endpoint" :disabled="$root.agentStatusList[endpoint] != 'online'">
-                                        ({{ $root.agentStatusList[endpoint] }}) {{ (endpoint) ? endpoint : $t("currentEndpoint") }}
+                                        ({{ $root.agentStatusList[endpoint] }}) {{ (agent.friendlyname !== '') ? agent.friendlyname : agent.url || $t("Controller") }}
                                     </option>
                                 </select>
                             </div>

From 2b64b3f9dd17734397c86adfab4ebdee104c7980 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 6 Feb 2024 06:55:29 +0000
Subject: [PATCH 06/14] fix(agent-manager): add update query

add a query to update the friendlyname correctly
---
 backend/agent-manager.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/backend/agent-manager.ts b/backend/agent-manager.ts
index 3d57a53b..e5374de5 100644
--- a/backend/agent-manager.ts
+++ b/backend/agent-manager.ts
@@ -114,15 +114,7 @@ export class AgentManager {
      */
 
     async update(friendlyname : string, updatedFriendlyName : string) {
-        let bean = await R.findOne("agent", " friendlyname = ? ", [
-            friendlyname,
-        ]);
-
-        if (bean) {
-            bean.friendlyname = updatedFriendlyName;
-        } else {
-            throw new Error("Friendly name could not be updated ");
-        }
+        await R.exec('UPDATE agent SET friendlyname = "' + updatedFriendlyName + '" WHERE friendlyname = "' + friendlyname + '"');
     }
 
     connect(url : string, username : string, password : string) {

From a8b75fb65a83fb0055dcc15762029b6f4f05bf95 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 6 Feb 2024 07:00:26 +0000
Subject: [PATCH 07/14] fix(DashboardHome): remove edit-pen for controller

remove edit-pen for controller which cannot have a friendlyname for now
---
 frontend/src/pages/DashboardHome.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index e843fa1f..c7bf9083 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -56,7 +56,8 @@
                             </template>
 
                             <!-- Edit FriendlyName  -->
-                            <font-awesome-icon class="ms-2" icon="pen-to-square" @click="showEditAgentFriendlynameDialog[agent.friendlyname] = !showEditAgentFriendlynameDialog[agent.friendlyname]" />
+                            <font-awesome-icon v-if="agent.friendlyname === '' && agent.friendlyname === ''"/>
+                            <font-awesome-icon v-else class="ms-2" icon="pen-to-square" @click="showEditAgentFriendlynameDialog[agent.friendlyname] = !showEditAgentFriendlynameDialog[agent.friendlyname]"/>
 
                             <!-- Edit Dialog -->
                             <BModal v-model="showEditAgentFriendlynameDialog[agent.friendlyname]" :no-close-on-backdrop="true" :close-on-esc="true" :okTitle="$t('Update Friendlyname')" okVariant="info" @ok="updateFriendlyname(agent.friendlyname, agent.updatedFriendlyName)">

From 97484695856c1376e6d788979458c0c8f5572e0c Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 6 Feb 2024 07:30:14 +0000
Subject: [PATCH 08/14] style(agent-manager): liniting

fix linting issues
---
 backend/agent-manager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/agent-manager.ts b/backend/agent-manager.ts
index e5374de5..72c43a01 100644
--- a/backend/agent-manager.ts
+++ b/backend/agent-manager.ts
@@ -114,7 +114,7 @@ export class AgentManager {
      */
 
     async update(friendlyname : string, updatedFriendlyName : string) {
-        await R.exec('UPDATE agent SET friendlyname = "' + updatedFriendlyName + '" WHERE friendlyname = "' + friendlyname + '"');
+        await R.exec("UPDATE agent SET friendlyname = " + updatedFriendlyName + " WHERE friendlyname = " + friendlyname + "");
     }
 
     connect(url : string, username : string, password : string) {

From 052cf175636af2d34a4841473399d5f002def8bb Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 6 Feb 2024 07:37:53 +0000
Subject: [PATCH 09/14] fix(manage-agent-socket-handler): type

fix tsc check by updating var type
---
 backend/socket-handlers/manage-agent-socket-handler.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/socket-handlers/manage-agent-socket-handler.ts b/backend/socket-handlers/manage-agent-socket-handler.ts
index cac96e04..4162e79a 100644
--- a/backend/socket-handlers/manage-agent-socket-handler.ts
+++ b/backend/socket-handlers/manage-agent-socket-handler.ts
@@ -68,7 +68,7 @@ export class ManageAgentSocketHandler extends SocketHandler {
         });
 
         // updateAgent
-        socket.on("updateAgent", async (friendlyname : unknown, updatedFriendlyName : unknown, callback : unknown) => {
+        socket.on("updateAgent", async (friendlyname : string, updatedFriendlyName : string, callback : unknown) => {
             try {
                 log.debug("manage-agent-socket-handler", "updateAgent");
                 checkLogin(socket);

From dcc48d32408b3e8de10ccf63ade29aa136a2d1f0 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 6 Feb 2024 07:45:06 +0000
Subject: [PATCH 10/14] fix(DashboardHome): duplicate code

remove if condition and update to proper values to prevent
duplicates
---
 frontend/src/pages/DashboardHome.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index c7bf9083..4dd020ca 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -56,8 +56,7 @@
                             </template>
 
                             <!-- Edit FriendlyName  -->
-                            <font-awesome-icon v-if="agent.friendlyname === '' && agent.friendlyname === ''"/>
-                            <font-awesome-icon v-else class="ms-2" icon="pen-to-square" @click="showEditAgentFriendlynameDialog[agent.friendlyname] = !showEditAgentFriendlynameDialog[agent.friendlyname]"/>
+                            <font-awesome-icon v-if="agent.friendlyname !== '' && agent.friendlyname !== ''" icon="pen-to-square" @click="showEditAgentFriendlynameDialog[agent.friendlyname] = !showEditAgentFriendlynameDialog[agent.friendlyname]" />
 
                             <!-- Edit Dialog -->
                             <BModal v-model="showEditAgentFriendlynameDialog[agent.friendlyname]" :no-close-on-backdrop="true" :close-on-esc="true" :okTitle="$t('Update Friendlyname')" okVariant="info" @ok="updateFriendlyname(agent.friendlyname, agent.updatedFriendlyName)">

From 825b72761bd8088d0ecfb8d6c23cef92176dc278 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 6 Aug 2024 16:01:14 +0000
Subject: [PATCH 11/14] fix: pull-request suggestions

updating the merge request by adding the suggestions from reviewer
---
 backend/agent-manager.ts                      | 29 +++++++++-------
 .../migrations/2023-12-20-2117-agent-table.ts |  2 +-
 .../manage-agent-socket-handler.ts            | 10 ++----
 frontend/src/mixins/socket.ts                 |  6 ++--
 frontend/src/pages/Compose.vue                |  2 +-
 frontend/src/pages/DashboardHome.vue          | 33 +++++++++----------
 6 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/backend/agent-manager.ts b/backend/agent-manager.ts
index 72c43a01..3be342ac 100644
--- a/backend/agent-manager.ts
+++ b/backend/agent-manager.ts
@@ -76,15 +76,15 @@ export class AgentManager {
      * @param url
      * @param username
      * @param password
-     * @param friendlyname
-     * @param updatedFriendlyName
+     * @param name
+     * @param updatedName
      */
-    async add(url : string, username : string, password : string, friendlyname : string) : Promise<Agent> {
+    async add(url: string, username: string, password: string, name: string): Promise<Agent> {
         let bean = R.dispense("agent") as Agent;
         bean.url = url;
         bean.username = username;
         bean.password = password;
-        bean.friendlyname = friendlyname;
+        bean.name = name;
         await R.store(bean);
         return bean;
     }
@@ -109,12 +109,19 @@ export class AgentManager {
 
     /**
      *
-     * @param friendlyname
-     * @param updatedFriendlyName
+     * @param url
+     * @param updatedName
      */
-
-    async update(friendlyname : string, updatedFriendlyName : string) {
-        await R.exec("UPDATE agent SET friendlyname = " + updatedFriendlyName + " WHERE friendlyname = " + friendlyname + "");
+    async update(url: string, updatedName: string) {
+        const agent = await R.findOne("agent", " url = ? ", [
+            url,
+        ]);
+        if (agent) {
+            agent.name = updatedName;
+            await R.store(agent);
+        } else {
+            throw new Error("Agent not found");
+        }
     }
 
     connect(url : string, username : string, password : string) {
@@ -289,8 +296,8 @@ export class AgentManager {
             url: "",
             username: "",
             endpoint: "",
-            friendlyname: "",
-            updatedFriendlyName: "",
+            name: "",
+            updatedName: "",
         };
 
         for (let endpoint in list) {
diff --git a/backend/migrations/2023-12-20-2117-agent-table.ts b/backend/migrations/2023-12-20-2117-agent-table.ts
index 0a48e7d3..c06f6f7c 100644
--- a/backend/migrations/2023-12-20-2117-agent-table.ts
+++ b/backend/migrations/2023-12-20-2117-agent-table.ts
@@ -7,7 +7,7 @@ export async function up(knex: Knex): Promise<void> {
         table.string("url", 255).notNullable().unique();
         table.string("username", 255).notNullable();
         table.string("password", 255).notNullable();
-        table.string("friendlyname", 255);
+        table.string("name", 255);
         table.boolean("active").notNullable().defaultTo(true);
     });
 }
diff --git a/backend/socket-handlers/manage-agent-socket-handler.ts b/backend/socket-handlers/manage-agent-socket-handler.ts
index 4162e79a..13c7e1b0 100644
--- a/backend/socket-handlers/manage-agent-socket-handler.ts
+++ b/backend/socket-handlers/manage-agent-socket-handler.ts
@@ -20,7 +20,7 @@ export class ManageAgentSocketHandler extends SocketHandler {
                 let data = requestData as LooseObject;
                 let manager = socket.instanceManager;
                 await manager.test(data.url, data.username, data.password);
-                await manager.add(data.url, data.username, data.password, data.friendlyname);
+                await manager.add(data.url, data.username, data.password, data.name);
 
                 // connect to the agent
                 manager.connect(data.url, data.username, data.password);
@@ -68,17 +68,13 @@ export class ManageAgentSocketHandler extends SocketHandler {
         });
 
         // updateAgent
-        socket.on("updateAgent", async (friendlyname : string, updatedFriendlyName : string, callback : unknown) => {
+        socket.on("updateAgent", async (name : string, updatedName : string, callback : unknown) => {
             try {
                 log.debug("manage-agent-socket-handler", "updateAgent");
                 checkLogin(socket);
 
-                if (typeof(updatedFriendlyName) !== "string") {
-                    throw new Error("FriendlyName must be a string");
-                }
-
                 let manager = socket.instanceManager;
-                await manager.update(friendlyname, updatedFriendlyName);
+                await manager.update(name, updatedName);
 
                 server.disconnectAllSocketClients(undefined, socket.id);
                 manager.sendAgentList();
diff --git a/frontend/src/mixins/socket.ts b/frontend/src/mixins/socket.ts
index f5573dd6..941ba546 100644
--- a/frontend/src/mixins/socket.ts
+++ b/frontend/src/mixins/socket.ts
@@ -133,10 +133,10 @@ export default defineComponent({
         endpointDisplayFunction(endpoint : string) {
             for (const [k, v] of Object.entries(this.$data.agentList)) {
                 if (endpoint) {
-                    if (endpoint === v["endpoint"] && v["friendlyname"] !== "") {
-                        return v["friendlyname"];
+                    if (endpoint === v["endpoint"] && v["name"] !== "") {
+                        return v["name"];
                     }
-                    if (endpoint === v["endpoint"] && v["friendlyname"] === "" ) {
+                    if (endpoint === v["endpoint"] && v["name"] === "" ) {
                         return endpoint;
                     }
                 }
diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 85a130d9..f442b2be 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -99,7 +99,7 @@
                                 <label for="name" class="form-label">{{ $t("dockgeAgent") }}</label>
                                 <select v-model="stack.endpoint" class="form-select">
                                     <option v-for="(agent, endpoint) in $root.agentList" :key="endpoint" :value="endpoint" :disabled="$root.agentStatusList[endpoint] != 'online'">
-                                        ({{ $root.agentStatusList[endpoint] }}) {{ (agent.friendlyname !== '') ? agent.friendlyname : agent.url || $t("Controller") }}
+                                        ({{ $root.agentStatusList[endpoint] }}) {{ (agent.name !== '') ? agent.name : agent.url || $t("Controller") }}
                                     </option>
                                 </select>
                             </div>
diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index 4dd020ca..7f46da1c 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -50,18 +50,18 @@
 
                             <!-- Agent Display Name -->
                             <template v-if="$root.agentStatusList[endpoint]">
-                                <span v-if="endpoint === '' && agent.friendlyname === ''" class="badge bg-secondary me-2">Controller</span>
-                                <span v-else-if="agent.friendlyname === ''" :href="agent.url">{{ endpoint }}</span>
-                                <span v-else :href="agent.url">{{ agent.friendlyname }}</span>
+                                <span v-if="endpoint === '' && agent.name === ''" class="badge bg-secondary me-2">Controller</span>
+                                <span v-else-if="agent.name === ''" :href="agent.url">{{ endpoint }}</span>
+                                <span v-else :href="agent.url">{{ agent.name }}</span>
                             </template>
 
-                            <!-- Edit FriendlyName  -->
-                            <font-awesome-icon v-if="agent.friendlyname !== '' && agent.friendlyname !== ''" icon="pen-to-square" @click="showEditAgentFriendlynameDialog[agent.friendlyname] = !showEditAgentFriendlynameDialog[agent.friendlyname]" />
+                            <!-- Edit Name  -->
+                            <font-awesome-icon icon="pen-to-square" @click="showEditAgentNameDialog[agent.name] = !showEditAgentNameDialog[agent.Name]" />
 
                             <!-- Edit Dialog -->
-                            <BModal v-model="showEditAgentFriendlynameDialog[agent.friendlyname]" :no-close-on-backdrop="true" :close-on-esc="true" :okTitle="$t('Update Friendlyname')" okVariant="info" @ok="updateFriendlyname(agent.friendlyname, agent.updatedFriendlyName)">
-                                <label for="Update Friendlyname" class="form-label">Current value: {{ $t(agent.friendlyname) }}</label>
-                                <input id="updatedFriendlyName" v-model="agent.updatedFriendlyName" type="text" class="form-control" optional>
+                            <BModal v-model="showEditAgentNameDialog[agent.name]" :no-close-on-backdrop="true" :close-on-esc="true" :okTitle="$t('Update Name')" okVariant="info" @ok="updateName(agent.url, agent.updatedName)">
+                                <label for="Update Name" class="form-label">Current value: {{ $t(agent.name) }}</label>
+                                <input id="updatedName" v-model="agent.updatedName" type="text" class="form-control" optional>
                             </BModal>
 
                             <!-- Remove Button -->
@@ -94,8 +94,8 @@
                             </div>
 
                             <div class="mb-3">
-                                <label for="friendlyname" class="form-label">{{ $t("Friendly Name") }}</label>
-                                <input id="friendlyname" v-model="agent.friendlyname" type="text" class="form-control" optional>
+                                <label for="name" class="form-label">{{ $t("Friendly Name") }}</label>
+                                <input id="name" v-model="agent.name" type="text" class="form-control" optional>
                             </div>
 
                             <button type="submit" class="btn btn-primary" :disabled="connectingAgent">
@@ -138,14 +138,14 @@ export default {
             dockerRunCommand: "",
             showAgentForm: false,
             showRemoveAgentDialog: {},
-            showEditAgentFriendlynameDialog: {},
+            showEditAgentNameDialog: {},
             connectingAgent: false,
             agent: {
                 url: "http://",
                 username: "",
                 password: "",
-                friendlyname: "",
-                updatedFriendlyName: "",
+                name: "",
+                updatedName: "",
             }
         };
     },
@@ -219,15 +219,14 @@ export default {
             });
         },
 
-        updateFriendlyname(friendlyname, updatedFriendlyName) {
-            //console.log(this.showEditAgentFriendlynameDialog.inputNewFriendlyName);
-            this.$root.getSocket().emit("updateAgent", friendlyname, updatedFriendlyName, (res) => {
+        updateName(url, updatedName) {
+            this.$root.getSocket().emit("updateAgent", url, updatedName, (res) => {
                 this.$root.toastRes(res);
 
                 if (res.ok) {
                     this.showAgentForm = false;
                     this.agent = {
-                        updatedFriendlyName: "",
+                        updatedName: "",
                     };
                 }
             });

From 49eda703736d7a1d45dfde664cdf7e1f019e9a34 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 6 Aug 2024 16:07:56 +0000
Subject: [PATCH 12/14] fix(suggestion): added missing change

update agent.ts file by renaming the variables and added suggestion
---
 backend/models/agent.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/backend/models/agent.ts b/backend/models/agent.ts
index bcb17e39..fff3cb62 100644
--- a/backend/models/agent.ts
+++ b/backend/models/agent.ts
@@ -23,8 +23,7 @@ export class Agent extends BeanModel {
             url: this.url,
             username: this.username,
             endpoint: this.endpoint,
-            friendlyname: this.friendlyname,
-            updatedFriendlyName: this.updatedFriendlyName
+            name: this.name,
         };
     }
 

From 1c72c23436a1289bf63b7c2acfce592125b1e411 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 6 Aug 2024 16:27:05 +0000
Subject: [PATCH 13/14] chore(lang): updated en.json

updated variables in language file
---
 frontend/src/lang/en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index 286eddc3..66f5853f 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -113,5 +113,6 @@
     "removeAgent": "Remove Agent",
     "removeAgentMsg": "Are you sure you want to remove this agent?",
     "LongSyntaxNotSupported": "Long syntax is not supported here. Please use the YAML editor.",
-    "Friendly Name": "Friendly Name"
+    "name": "Dockge Agent Display name",
+    "updatedName": "New Dockge Agent Display name"
 }

From 5b2ac56d532b08ed2d9fdfd094b73372275a5819 Mon Sep 17 00:00:00 2001
From: stroskler <mail@stroskler.xyz>
Date: Tue, 20 Aug 2024 07:57:58 +0000
Subject: [PATCH 14/14] fix: suggestions

implement suggestions from review
---
 backend/agent-manager.ts             | 1 -
 frontend/src/pages/DashboardHome.vue | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/backend/agent-manager.ts b/backend/agent-manager.ts
index 3be342ac..f5d327d1 100644
--- a/backend/agent-manager.ts
+++ b/backend/agent-manager.ts
@@ -77,7 +77,6 @@ export class AgentManager {
      * @param username
      * @param password
      * @param name
-     * @param updatedName
      */
     async add(url: string, username: string, password: string, name: string): Promise<Agent> {
         let bean = R.dispense("agent") as Agent;
diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index 7f46da1c..aa230ce7 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -51,8 +51,8 @@
                             <!-- Agent Display Name -->
                             <template v-if="$root.agentStatusList[endpoint]">
                                 <span v-if="endpoint === '' && agent.name === ''" class="badge bg-secondary me-2">Controller</span>
-                                <span v-else-if="agent.name === ''" :href="agent.url">{{ endpoint }}</span>
-                                <span v-else :href="agent.url">{{ agent.name }}</span>
+                                <span v-else-if="agent.name === ''" :href="agent.url" class="me-2">{{ endpoint }}</span>
+                                <span v-else :href="agent.url" class="me-2">{{ agent.name }}</span>
                             </template>
 
                             <!-- Edit Name  -->