From 394c3aa410f8da21c7c18ff5c8d55b810ec3d35a Mon Sep 17 00:00:00 2001 From: Matthew McConnell Date: Thu, 15 May 2025 00:12:11 +0100 Subject: [PATCH 1/3] Refactor StackList and StackListItem components for improved readability and structure; add Font Awesome chevron icons. --- frontend/src/components/StackList.vue | 85 ++++++++++++++++------- frontend/src/components/StackListItem.vue | 1 - frontend/src/icon.ts | 4 ++ 3 files changed, 62 insertions(+), 28 deletions(-) diff --git a/frontend/src/components/StackList.vue b/frontend/src/components/StackList.vue index 6b00cb24..72f78cae 100644 --- a/frontend/src/components/StackList.vue +++ b/frontend/src/components/StackList.vue @@ -3,7 +3,8 @@
- @@ -28,34 +29,43 @@
- + - - + + - {{ $t("selectedStackCount", [ selectedStackCount ]) }} + {{ $t("selectedStackCount", [selectedStackCount]) }}
-
+
{{ $t("addFirstStackMsg") }}
- - +
+
+ + {{ $t("currentEndpoint") }} + {{ agent.endpoint }} +
+ +
@@ -92,7 +102,8 @@ export default { status: null, active: null, tags: null, - } + }, + closedAgents: new Map(), }; }, computed: { @@ -119,7 +130,7 @@ export default { * Returns a sorted list of stacks based on the applied filters and search text. * @returns {Array} The sorted list of stacks. */ - sortedStackList() { + agentStackList() { let result = Object.values(this.$root.completeStackList); result = result.filter(stack => { @@ -187,6 +198,27 @@ export default { return m1.name.localeCompare(m2.name); }); + result = [ + ...result.reduce((acc, stack) => { + const endpoint = stack.endpoint || 'current'; + if (!acc.has(endpoint)) { + acc.set(endpoint, []); + } + acc.get(endpoint).push(stack); + return acc; + }, new Map()).entries() + ].map(([endpoint, stacks]) => ({ + endpoint, + stacks + })).sort((a, b) => { + if (a.endpoint === 'current' && b.endpoint !== 'current') { + return -1; + } else if (a.endpoint !== 'current' && b.endpoint === 'current') { + return 1; + } + return a.endpoint.localeCompare(b.endpoint); + }); + return result; }, @@ -221,7 +253,7 @@ export default { }, watch: { searchText() { - for (let stack of this.sortedStackList) { + for (let stack of this.agentStackList) { if (!this.selectedStacks[stack.id]) { if (this.selectAll) { this.disableSelectAllWatcher = true; @@ -236,7 +268,7 @@ export default { this.selectedStacks = {}; if (this.selectAll) { - this.sortedStackList.forEach((item) => { + this.agentStackList.forEach((item) => { this.selectedStacks[item.id] = true; }); } @@ -331,7 +363,7 @@ export default { pauseSelected() { Object.keys(this.selectedStacks) .filter(id => this.$root.stackList[id].active) - .forEach(id => this.$root.getSocket().emit("pauseStack", id, () => {})); + .forEach(id => this.$root.getSocket().emit("pauseStack", id, () => { })); this.cancelSelectMode(); }, @@ -342,7 +374,7 @@ export default { resumeSelected() { Object.keys(this.selectedStacks) .filter(id => !this.$root.stackList[id].active) - .forEach(id => this.$root.getSocket().emit("resumeStack", id, () => {})); + .forEach(id => this.$root.getSocket().emit("resumeStack", id, () => { })); this.cancelSelectMode(); }, @@ -443,5 +475,4 @@ export default { align-items: center; gap: 10px; } - diff --git a/frontend/src/components/StackListItem.vue b/frontend/src/components/StackListItem.vue index 7e7561b2..d1e48cd1 100644 --- a/frontend/src/components/StackListItem.vue +++ b/frontend/src/components/StackListItem.vue @@ -3,7 +3,6 @@
{{ stackName }} -
{{ endpointDisplay }}
diff --git a/frontend/src/icon.ts b/frontend/src/icon.ts index 0599e6af..588b3fc1 100644 --- a/frontend/src/icon.ts +++ b/frontend/src/icon.ts @@ -54,6 +54,8 @@ import { faTerminal, faWarehouse, faHome, faRocket, faRotate, faCloudArrowDown, faArrowsRotate, + faChevronCircleRight, + faChevronCircleDown, } from "@fortawesome/free-solid-svg-icons"; library.add( @@ -109,6 +111,8 @@ library.add( faRotate, faCloudArrowDown, faArrowsRotate, + faChevronCircleRight, + faChevronCircleDown, ); export { FontAwesomeIcon }; From 69507a1651bb0e87dfc8661f518e14b7ed6e6c54 Mon Sep 17 00:00:00 2001 From: Matthew McConnell Date: Thu, 15 May 2025 08:30:49 +0100 Subject: [PATCH 2/3] Tweaked styling of collapse control --- frontend/src/components/StackList.vue | 33 +++++++++++++++------------ 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/StackList.vue b/frontend/src/components/StackList.vue index 72f78cae..751557f9 100644 --- a/frontend/src/components/StackList.vue +++ b/frontend/src/components/StackList.vue @@ -46,25 +46,18 @@ {{ $t("addFirstStackMsg") }}
-
- + {{ $t("currentEndpoint") }} {{ agent.endpoint }}
- +
@@ -475,4 +468,16 @@ export default { align-items: center; gap: 10px; } + +.agent-select { + cursor: pointer; + font-size: 14px; + font-weight: 500; + color: $dark-font-color3; + padding-left: 10px; + padding-right: 10px; + display: flex; + align-items: center; + user-select: none; +} From 5111d01607d407f3a9511f9b2c1a130a3f6c6385 Mon Sep 17 00:00:00 2001 From: Matthew McConnell Date: Thu, 15 May 2025 08:38:08 +0100 Subject: [PATCH 3/3] comments --- frontend/src/components/StackList.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/StackList.vue b/frontend/src/components/StackList.vue index 751557f9..96c81a1f 100644 --- a/frontend/src/components/StackList.vue +++ b/frontend/src/components/StackList.vue @@ -191,6 +191,8 @@ export default { return m1.name.localeCompare(m2.name); }); + // Group stacks by endpoint, sorting them so the local endpoint is first + // and the rest are sorted alphabetically result = [ ...result.reduce((acc, stack) => { const endpoint = stack.endpoint || 'current';