Container control buttons #649

mizady · 2024-10-28T13:26:38Z

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/dockge/blob/master/CONTRIBUTING.md

Tick the checkbox if you understand [x]:

I have read and understand the pull request rules.

Description

New Feature - Control of individual containers for starting, stopping, and restarting.

Fixes #(issue)
Fixes having to restart or stop and start the entire stack when you just want to do one container

Type of change

User interface (UI)
New feature (non-breaking change which adds functionality)
This change requires a documentation update (only to change a screenshot so the service buttons are shown)

Checklist

My code follows the style guidelines of this project
I ran ESLint and other linters for modified files (I didn't run it but the minor modifications kept to already used patterns and practices)
I have performed a self-review of my own code and tested it
I have commented my code, particularly in hard-to-understand areas
(including JSDoc for methods)
My changes generate no new warnings
My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

Added start and stop service buttons for each service in a stack by changes to the container and compose components as well as the socket handler and the stack class.

added restart service/container button as well as fixed start/stop buttons for correct statuses of healthy/unhealthy

mizady · 2024-10-28T13:31:24Z

I didn't have any of the errors coming up in the checks when i built it or when i ran the built docker container on my end. Most all of those errors appear to be code I did not modify so I'm not sure if that is relevant to these modifications.

swapped to double quotes from singles on service functions

Chathula · 2024-10-30T19:42:14Z

Waiting for this!

Chathula · 2024-11-14T15:55:57Z

@louislam why we don't merge this pr?

xHyperElectric · 2024-12-01T05:51:23Z

@louislam please merge this, this feature is the only feature I think is missing from dockge

m3baid · 2024-12-02T14:12:09Z

Waiting for this to be in the Image.

cmcooper1980 · 2024-12-22T06:54:18Z

@Chathula, @m3baid I was curious about this being merged too...however, if you haven't forked and merged this yourself and curious to see controls, feel free to pull from my fork...I merged a bunch of PRs that looked interesting or at least the ones I was interested in...

wsw70 · 2025-02-17T07:40:48Z

Could this please be merged? This is a very much required feature that will really make dockge stand out.

Triskae · 2025-02-24T22:52:04Z

I tried this when merged on my fork, and seem to have no effect on the containers ...

mizady · 2025-02-25T02:47:20Z

@Triskae not sure if anything changed as there has been some version changes to a lot of packages and I have not updated and tested my dockge docker build as I spent far longer than i'd like to admit getting it to build on my test system at the time. I did put a docker image up on docker hub thejericko/dockge:latest but like I said it's not the latest dockge version since the update was released right after I built that.

Triskae · 2025-02-25T07:58:33Z

@Triskae not sure if anything changed as there has been some version changes to a lot of packages and I have not updated and tested my dockge docker build as I spent far longer than i'd like to admit getting it to build on my test system at the time. I did put a docker image up on docker hub thejericko/dockge:latest but like I said it's not the latest dockge version since the update was released right after I built that.

I understand, I will take a look if can make it work ! Or if you want, you can take a look too.

I spent far longer than i'd like to admit getting it to build on my test system

Ooooh yeah me too .... on macos with M2 Chip impossible for me to getting it to build, had to create a linux VM ....

Add missing endpoints for PR louislam#649

…ntainer control buttons

tobi1449 · 2025-03-01T11:00:18Z

FYI, when testing this I noticed that I'm getting quite a few JS warnings in my browser.
Add the new "processing" prop and the "start-service", "stop-service" and "restart-service" events to the container component seemed to fix them (see tobi1449@ee0c54b).

tobi1449 · 2025-03-01T11:00:48Z

backend/agent-socket-handlers/docker-socket-handler.ts

+                stack.joinCombinedTerminal(socket); // Ensure the combined terminal is joined
+                callbackResult({
+                    ok: true,
+                    msg: "Service" + serviceName + " started"


Suggested change

msg: "Service" + serviceName + " started"

msg: "Service " + serviceName + " started"

tobi1449 · 2025-03-01T11:00:58Z

backend/agent-socket-handlers/docker-socket-handler.ts

+                await stack.stopService(socket, serviceName);
+                callbackResult({
+                    ok: true,
+                    msg: "Service" + serviceName + " stopped"


Suggested change

msg: "Service" + serviceName + " stopped"

msg: "Service " + serviceName + " stopped"

tobi1449 · 2025-03-01T11:01:07Z

backend/agent-socket-handlers/docker-socket-handler.ts

+                await stack.restartService(socket, serviceName);
+                callbackResult({
+                    ok: true,
+                    msg: "Service" + serviceName + " restarted"


Suggested change

msg: "Service" + serviceName + " restarted"

msg: "Service " + serviceName + " restarted"

wsw70 · 2025-04-29T11:04:23Z

It would be awesome to merge this

@mizady

Merge @mizady's pull request adding sub container control buttons.

@mizady

Merge @mizady's pull request adding sub container control buttons.

@mizady

Merged @mizady's pull request adding container control buttons.

- switch to a button group and matched existing UI style (no more eye searing stop and restart buttons) - Fixed message output to include a space after Service - Added Processing prop and Start,Stop,Restart events

Dracrius · 2025-06-06T05:03:24Z

frontend/src/components/Container.vue

                    <router-link v-if="!isEditMode" class="btn btn-normal" :to="terminalRouteLink" disabled="">
                        <font-awesome-icon icon="terminal" />
                        Bash
                    </router-link>
+                    <button v-if="status !== 'running' && status !== 'healthy'"
+                            class="btn btn-primary me-2"
+                            :disabled="processing"
+                            @click="startService">
+                        <font-awesome-icon icon="play" class="me-1" />
+                        Start
+                    </button>
+                    <button v-if="status === 'running' || status === 'healthy' || status === 'unhealthy'"
+                            class="btn btn-danger me-2"
+                            :disabled="processing"
+                            @click="stopService">
+                        <font-awesome-icon icon="stop" class="me-1" />
+                        Stop
+                    </button>
+                    <button v-if="status === 'running' || status === 'healthy' || status === 'unhealthy'"
+                            class="btn btn-warning me-2"
+                            :disabled="processing"
+                            @click="restartService">
+                        <font-awesome-icon icon="sync" class="me-1" />
+                        Restart
+                    </button>


A much cleaner and more consistent look would be to use a button group like the existing set for the entire stack. This can be done like so. This also hides the bash button when a container isn't running if used as written as it does nothing but tell you the container isn't running.

Suggested change

<router-link v-if="!isEditMode" class="btn btn-normal" :to="terminalRouteLink" disabled="">

<font-awesome-icon icon="terminal" />

Bash

</router-link>

<button v-if="status !== 'running' && status !== 'healthy'"

class="btn btn-primary me-2"

:disabled="processing"

@click="startService">

<font-awesome-icon icon="play" class="me-1" />

Start

</button>

<button v-if="status === 'running' || status === 'healthy' || status === 'unhealthy'"

class="btn btn-danger me-2"

:disabled="processing"

@click="stopService">

<font-awesome-icon icon="stop" class="me-1" />

Stop

</button>

<button v-if="status === 'running' || status === 'healthy' || status === 'unhealthy'"

class="btn btn-warning me-2"

:disabled="processing"

@click="restartService">

<font-awesome-icon icon="sync" class="me-1" />

Restart

</button>

<div class="btn-group me-2" role="group">

<router-link v-if="!isEditMode && (status === 'running' || status === 'healthy')" class="btn btn-normal" :to="terminalRouteLink" disabled="">

<font-awesome-icon icon="terminal" />

Bash

</router-link>

<button v-if="!isEditMode && status !== 'running' && status !== 'healthy'"

class="btn btn-primary"

:disabled="processing"

@click="startService">

<font-awesome-icon icon="play" class="me-1" />

{{ $t("startStack") }}

</button>

<button v-if="!isEditMode && (status === 'running' || status === 'healthy' || status === 'unhealthy')"

class="btn btn-normal"

:disabled="processing"

@click="restartService">

<font-awesome-icon icon="rotate" class="me-1" />

{{ $t("restartStack") }}

</button>

<button v-if="!isEditMode && (status === 'running' || status === 'healthy' || status === 'unhealthy')"

class="btn btn-normal"

:disabled="processing"

@click="stopService">

<font-awesome-icon icon="stop" class="me-1" />

{{ $t("stopStack") }}

</button>

</div>

Oh I forgot this also uses the localized names for Play, Restart and Stop. Bash uses a hard coded label because it doesn't get localized being a name not a word.

Dracrius · 2025-06-06T05:05:46Z

I'm also working on trying to get it to hide the buttons when there is only one container in a stack so I'll post the code if I do. It is much less intrusive without the bright yellow and red but it's also very redundant if the stack only has one container.

Final change to louislam#649 as there is no need for the container controls if there is only a single container.

Dracrius · 2025-06-07T05:11:00Z

I figured out a pretty simple method to hide the controls in single container stacks. You can find the changes in Commit 789f25a on my fork.

Simply put by adding serviceCount() to compute:

        serviceCount() {
            return Object.keys(this.jsonObject.services).length;
        },

we can add this.serviceCount > 1 to the v-if for each button and they will automatically hide in instances where a stack only has a single container.

Single Container Active:

Single Container Inactive:

Multi Container Active:

Multi Container Inactive:

Dracrius · 2025-06-07T15:20:29Z

@Triskae did you ever find a cause for the buttons not doing anything? I can't believe I didn't test them more before modifying it haha I kind of figured @tobi1449 changes were enough to make them work properly. Unfortunatly it didnt, pressing any of the buttons just greys them out.

~~My changes only effect button style and hiding the buttons when not needed so reverting those still gives me the same result as you.~~

Edit: I was attempting to use the buttons on containers controlled by an agent without this PR. Having this PR on each agent allows you to control containers from any agent without issue.

cmcooper1980 · 2025-06-07T18:08:54Z

@Triskae did you ever find a cause for the buttons not doing anything? I can't believe I didn't test them more before modifying it haha I kind of figured @tobi1449 changes were enough to make them work properly. Unfortunatly it didnt, pressing any of the buttons just greys them out.

My changes only effect button style and hiding the buttons when not needed so reverting those still gives me the same result as you.

The buttons work in my fork:

Before I rebased to the newer 1.50, the v1.41 of my fork did have this problem and I can't remember but I believe whatever @tobi1449 did did fix it but other stuff was broken such as PR #623 and there was one other that wasn't working so instead of trying to fix and not knowing what else would break or was broken, I just started over and rebased to 1.50 only merging PRs I knew 100% worked or I could get working after merge.

Dracrius · 2025-06-07T21:10:42Z

@Triskae did you ever find a cause for the buttons not doing anything? I can't believe I didn't test them more before modifying it haha I kind of figured @tobi1449 changes were enough to make them work properly. Unfortunatly it didnt, pressing any of the buttons just greys them out.
My changes only effect button style and hiding the buttons when not needed so reverting those still gives me the same result as you.

The buttons work in my fork:

Before I rebased to the newer 1.50, the v1.41 of my fork did have this problem and I can't remember but I believe whatever @tobi1449 did did fix it but other stuff was broken such as PR #623 and there was one other that wasn't working so instead of trying to fix and not knowing what else would break or was broken, I just started over and rebased to 1.50 only merging PRs I knew 100% worked or I could get working after merge.

Oh Interesting, let me clarify after seeing your example I enabled the buttons on single container stacks and yes they work great there. It seem the bug is in stacks with multiple containers do you have any to test with on your end?

Note: I've also done test with just this commit and see the same results. Works for a single container stack but not any of my multi container stacks.

cmcooper1980 · 2025-06-08T08:21:53Z

@Dracrius yes, my buttons work fine with single and multi container stacks:

Dracrius · 2025-06-09T01:34:17Z

@Dracrius yes, my buttons work fine with single and multi container stacks:

Interestingly I have found a stack that also works perfectly fine. My own combo stack of headscale, headscale ui and tailscale works without issue with the independent control buttons. ~~I'm curious what could be causing it to not work on others.~~

Edit: I'm a fool it was a stack managed by another agent. I updated my other agent with the same image and this will solved the issue.

mizady added 4 commits August 8, 2024 13:30

add container buttons

cc12f72

Added start and stop service buttons for each service in a stack by changes to the container and compose components as well as the socket handler and the stack class.

add restart button

faa0529

added restart service/container button as well as fixed start/stop buttons for correct statuses of healthy/unhealthy

Merge branch 'louislam:master' into container-control-buttons

f41c173

Merge branch 'louislam:master' into container-control-buttons

635bf62

swapped to double quotes

1dd3205

swapped to double quotes from singles on service functions

louislam added this to the 1.6.0 milestone Dec 27, 2024

tobi1449 mentioned this pull request Feb 25, 2025

Add missing endpoints for PR #649 cmcooper1980/dockge#2

Merged

cmcooper1980 added a commit to cmcooper1980/dockge that referenced this pull request Feb 26, 2025

Merge pull request #2 from tobi1449/container-control-buttons-fix

f91e8c4

Add missing endpoints for PR louislam#649

tobi1449 added a commit to tobi1449/dockge that referenced this pull request Feb 26, 2025

Add more code that went missing during merging of PR louislam#649: Co…

013d820

…ntainer control buttons

tobi1449 added a commit to tobi1449/dockge that referenced this pull request Mar 1, 2025

Add more code that went missing during merging of PR louislam#649: Co…

f266cd0

…ntainer control buttons

tobi1449 reviewed Mar 1, 2025

View reviewed changes

Dracrius added a commit to Dracrius/dockge that referenced this pull request Jun 2, 2025

Merge pull request louislam#649 from louislam/dockge

a7c974f

Merge @mizady's pull request adding sub container control buttons.

Dracrius added a commit to Dracrius/dockge that referenced this pull request Jun 2, 2025

Merge pull request louislam#649 from louislam/dockge

93c0677

Merge @mizady's pull request adding sub container control buttons.

Dracrius added a commit to Dracrius/dockge that referenced this pull request Jun 6, 2025

Container control buttons (louislam#649)

1d472a0

Merged @mizady's pull request adding container control buttons.

Dracrius reviewed Jun 6, 2025

View reviewed changes

Dracrius added a commit to Dracrius/dockge that referenced this pull request Jun 7, 2025

Hide container controls if there is only one container

789f25a

Final change to louislam#649 as there is no need for the container controls if there is only a single container.

	msg: "Service" + serviceName + " started"
	msg: "Service " + serviceName + " started"

	msg: "Service" + serviceName + " stopped"
	msg: "Service " + serviceName + " stopped"

	msg: "Service" + serviceName + " restarted"
	msg: "Service " + serviceName + " restarted"

Uh oh!

Container control buttons #649

Are you sure you want to change the base?

Container control buttons #649

Uh oh!

Conversation

mizady commented Oct 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Checklist

Screenshots (if any)

Uh oh!

mizady commented Oct 28, 2024

Uh oh!

Chathula commented Oct 30, 2024

Uh oh!

Chathula commented Nov 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

xHyperElectric commented Dec 1, 2024

Uh oh!

m3baid commented Dec 2, 2024

Uh oh!

cmcooper1980 commented Dec 22, 2024

Uh oh!

wsw70 commented Feb 17, 2025

Uh oh!

Triskae commented Feb 24, 2025

Uh oh!

mizady commented Feb 25, 2025

Uh oh!

Triskae commented Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tobi1449 commented Mar 1, 2025

Uh oh!

tobi1449 Mar 1, 2025

Choose a reason for hiding this comment

Uh oh!

tobi1449 Mar 1, 2025

Choose a reason for hiding this comment

Uh oh!

tobi1449 Mar 1, 2025

Choose a reason for hiding this comment

Uh oh!

wsw70 commented Apr 29, 2025

Uh oh!

Dracrius Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Dracrius Jun 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Dracrius commented Jun 6, 2025

Uh oh!

Dracrius commented Jun 7, 2025

Single Container Active:

Single Container Inactive:

Multi Container Active:

Multi Container Inactive:

Uh oh!

Dracrius commented Jun 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cmcooper1980 commented Jun 7, 2025

Uh oh!

Dracrius commented Jun 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cmcooper1980 commented Jun 8, 2025

Uh oh!

Dracrius commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mizady commented Oct 28, 2024 •

edited

Loading

Chathula commented Nov 14, 2024 •

edited

Loading

Triskae commented Feb 25, 2025 •

edited

Loading

Dracrius Jun 6, 2025 •

edited

Loading

Dracrius Jun 6, 2025 •

edited

Loading

Dracrius commented Jun 7, 2025 •

edited

Loading

Dracrius commented Jun 7, 2025 •

edited

Loading

Dracrius commented Jun 9, 2025 •

edited

Loading