From f08ba9b889dd55f6a7d9a11b4967c49c8d002cc0 Mon Sep 17 00:00:00 2001
From: ESPGranEdu <raplhwigum@gmail.com>
Date: Fri, 16 Aug 2024 22:51:42 +0200
Subject: [PATCH 1/5] Create new component to gruop agents

---
 frontend/components.d.ts                   |  1 +
 frontend/src/components/AgentStackList.vue | 47 ++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 frontend/src/components/AgentStackList.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 708dd4e0..5987c8e6 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     About: typeof import('./src/components/settings/About.vue')['default']
+    AgentStackList: typeof import('./src/components/AgentStackList.vue')['default']
     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']
diff --git a/frontend/src/components/AgentStackList.vue b/frontend/src/components/AgentStackList.vue
new file mode 100644
index 00000000..f70d43f0
--- /dev/null
+++ b/frontend/src/components/AgentStackList.vue
@@ -0,0 +1,47 @@
+<template>
+    <div class="wrapper">
+        <div class="group-header">
+            {{ agentName ?? this.$t("currentEndpoint") }}
+        </div>
+
+        <slot />
+    </div>
+
+    <hr>
+</template>
+
+<script setup lang="ts">
+interface AgentStackListProps {
+    agentName?: string;
+}
+
+defineProps<AgentStackListProps>();
+</script>
+
+<style lang="scss" scoped>
+@import "../styles/vars.scss";
+
+
+.group-header {
+    border-bottom: 1px solid #dee2e6;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    font-size: 1.25rem;
+    font-weight: 500;
+    padding: 10px;
+
+    .dark & {
+        background-color: darken($color: $dark-header-bg, $amount: 1.90);
+        border-bottom: 0;
+    }
+}
+
+@media (max-width: 770px) {
+    .group-header {
+        margin: -20px;
+        margin-bottom: 10px;
+        padding: 5px;
+    }
+}
+
+</style>
\ No newline at end of file

From bd4a012404ae7127ac53ae24e48ae83f2447f289 Mon Sep 17 00:00:00 2001
From: ESPGranEdu <raplhwigum@gmail.com>
Date: Fri, 16 Aug 2024 22:53:23 +0200
Subject: [PATCH 2/5] Group stacks by agent

---
 frontend/src/components/StackList.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/frontend/src/components/StackList.vue b/frontend/src/components/StackList.vue
index 6b00cb24..35ccff56 100644
--- a/frontend/src/components/StackList.vue
+++ b/frontend/src/components/StackList.vue
@@ -189,7 +189,29 @@ export default {
 
             return result;
         },
+        stackListByAgent() {
+            const stacksByAgent = new Map();
+            const stacks = this.$root.completeStackList;
+            
+           for (const key of Object.keys(stacks)) {
+                // Handle stacks with no suffix (from the current endpoint)
+                let [stackName, agent] = key.split("_");
+                const stackHasEndpoint = agent !== "";
+                agent = stackHasEndpoint ? agent: this.$t("currentEndpoint");   
+                
+                if (!stacksByAgent.has(agent)) {
+                    stacksByAgent.set(agent, []);
+                }
 
+                const stack = stacks[!stackHasEndpoint ? `${stackName}_` : `${stackName}_${agent}`]
+                stacksByAgent.get(agent).push(stack);
+            }
+          
+            // console.log(stacksByAgent);
+            // console.log(stacks);
+            return stacksByAgent;
+            
+        },
         isDarkTheme() {
             return document.body.classList.contains("dark");
         },

From b9f135bdaa087f9937ce5160710e2a2a6eb344fc Mon Sep 17 00:00:00 2001
From: ESPGranEdu <raplhwigum@gmail.com>
Date: Fri, 16 Aug 2024 22:58:21 +0200
Subject: [PATCH 3/5] Add JSDoc and clean comments

---
 frontend/src/components/StackList.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/StackList.vue b/frontend/src/components/StackList.vue
index 35ccff56..a6d06397 100644
--- a/frontend/src/components/StackList.vue
+++ b/frontend/src/components/StackList.vue
@@ -189,6 +189,10 @@ export default {
 
             return result;
         },
+        /**
+         * Groups all stacks by it's agent
+         * @returns {Map<string, object} A map containing all agents with their stacks
+         */
         stackListByAgent() {
             const stacksByAgent = new Map();
             const stacks = this.$root.completeStackList;
@@ -207,10 +211,7 @@ export default {
                 stacksByAgent.get(agent).push(stack);
             }
           
-            // console.log(stacksByAgent);
-            // console.log(stacks);
             return stacksByAgent;
-            
         },
         isDarkTheme() {
             return document.body.classList.contains("dark");

From 59d941f128cc5fe591402aa045bf6f92159bbd75 Mon Sep 17 00:00:00 2001
From: ESPGranEdu <raplhwigum@gmail.com>
Date: Fri, 16 Aug 2024 22:59:20 +0200
Subject: [PATCH 4/5] Conditionally display stacks with its respective agent

---
 frontend/src/components/StackList.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/StackList.vue b/frontend/src/components/StackList.vue
index a6d06397..d2a0088f 100644
--- a/frontend/src/components/StackList.vue
+++ b/frontend/src/components/StackList.vue
@@ -42,11 +42,26 @@
                 </span>
             </div>
         </div>
-        <div ref="stackList" class="stack-list" :class="{ scrollbar: scrollbar }" :style="stackListStyle">
+
+        <div v-if="searchText === '' && this.$root.agentCount > 1" :style="stackListStyle" ref="stackList" class="stack-list">
+            <AgentStackList :agentName="agentName" v-for="[agentName, stacks] in stackListByAgent">
+                <StackListItem
+                    v-for="(stack, index) in stacks"
+                    :key="index"
+                    :stack="stack"
+                    :isSelectMode="selectMode"
+                    :isSelected="isSelected"
+                    :select="select"
+                    :deselect="deselect"/>
+                    
+            </AgentStackList>
+        </div>
+
+        <div v-else ref="stackList" class="stack-list" :class="{ scrollbar: scrollbar }" :style="stackListStyle">
             <div v-if="Object.keys(sortedStackList).length === 0" class="text-center mt-3">
                 <router-link to="/compose">{{ $t("addFirstStackMsg") }}</router-link>
             </div>
-
+            
             <StackListItem
                 v-for="(item, index) in sortedStackList"
                 :key="index"
@@ -68,6 +83,7 @@
 import Confirm from "../components/Confirm.vue";
 import StackListItem from "../components/StackListItem.vue";
 import { CREATED_FILE, CREATED_STACK, EXITED, RUNNING, UNKNOWN } from "../../../common/util-common";
+import AgentStackList from "./AgentStackList.vue";
 
 export default {
     components: {

From 2674226ce3c8ab21995f095d50a85b5d9f5c3d14 Mon Sep 17 00:00:00 2001
From: ESPGranEdu <raplhwigum@gmail.com>
Date: Fri, 16 Aug 2024 23:26:09 +0200
Subject: [PATCH 5/5] Fix linter errors

---
 frontend/src/components/AgentStackList.vue |  7 +++---
 frontend/src/components/StackList.vue      | 25 +++++++++++-----------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/AgentStackList.vue b/frontend/src/components/AgentStackList.vue
index f70d43f0..a4ce76da 100644
--- a/frontend/src/components/AgentStackList.vue
+++ b/frontend/src/components/AgentStackList.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="wrapper">
         <div class="group-header">
-            {{ agentName ?? this.$t("currentEndpoint") }}
+            {{ agentName }}
         </div>
 
         <slot />
@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 interface AgentStackListProps {
-    agentName?: string;
+    agentName: string;
 }
 
 defineProps<AgentStackListProps>();
@@ -21,7 +21,6 @@ defineProps<AgentStackListProps>();
 <style lang="scss" scoped>
 @import "../styles/vars.scss";
 
-
 .group-header {
     border-bottom: 1px solid #dee2e6;
     border-radius: 10px;
@@ -44,4 +43,4 @@ defineProps<AgentStackListProps>();
     }
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/StackList.vue b/frontend/src/components/StackList.vue
index d2a0088f..19ffdcfa 100644
--- a/frontend/src/components/StackList.vue
+++ b/frontend/src/components/StackList.vue
@@ -43,8 +43,8 @@
             </div>
         </div>
 
-        <div v-if="searchText === '' && this.$root.agentCount > 1" :style="stackListStyle" ref="stackList" class="stack-list">
-            <AgentStackList :agentName="agentName" v-for="[agentName, stacks] in stackListByAgent">
+        <div v-if="searchText === '' && $root.agentCount > 1" ref="stackList" :style="stackListStyle" class="stack-list">
+            <AgentStackList v-for="[agentName, stacks] in stackListByAgent" :agentName="agentName" :key="agentName">
                 <StackListItem
                     v-for="(stack, index) in stacks"
                     :key="index"
@@ -52,8 +52,8 @@
                     :isSelectMode="selectMode"
                     :isSelected="isSelected"
                     :select="select"
-                    :deselect="deselect"/>
-                    
+                    :deselect="deselect"
+                />
             </AgentStackList>
         </div>
 
@@ -61,7 +61,7 @@
             <div v-if="Object.keys(sortedStackList).length === 0" class="text-center mt-3">
                 <router-link to="/compose">{{ $t("addFirstStackMsg") }}</router-link>
             </div>
-            
+
             <StackListItem
                 v-for="(item, index) in sortedStackList"
                 :key="index"
@@ -83,7 +83,6 @@
 import Confirm from "../components/Confirm.vue";
 import StackListItem from "../components/StackListItem.vue";
 import { CREATED_FILE, CREATED_STACK, EXITED, RUNNING, UNKNOWN } from "../../../common/util-common";
-import AgentStackList from "./AgentStackList.vue";
 
 export default {
     components: {
@@ -212,21 +211,21 @@ export default {
         stackListByAgent() {
             const stacksByAgent = new Map();
             const stacks = this.$root.completeStackList;
-            
-           for (const key of Object.keys(stacks)) {
+
+            for (const key of Object.keys(stacks)) {
                 // Handle stacks with no suffix (from the current endpoint)
-                let [stackName, agent] = key.split("_");
+                let [ stackName, agent ] = key.split("_");
                 const stackHasEndpoint = agent !== "";
-                agent = stackHasEndpoint ? agent: this.$t("currentEndpoint");   
-                
+                agent = stackHasEndpoint ? agent : this.$t("currentEndpoint");
+
                 if (!stacksByAgent.has(agent)) {
                     stacksByAgent.set(agent, []);
                 }
 
-                const stack = stacks[!stackHasEndpoint ? `${stackName}_` : `${stackName}_${agent}`]
+                const stack = stacks[!stackHasEndpoint ? `${stackName}_` : `${stackName}_${agent}`];
                 stacksByAgent.get(agent).push(stack);
             }
-          
+
             return stacksByAgent;
         },
         isDarkTheme() {