Container control buttons #649
Conversation
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
|
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
|
Waiting for this! |
|
@louislam why we don't merge this pr? |
|
@louislam please merge this, this feature is the only feature I think is missing from dockge |
|
Waiting for this to be in the Image. |
|
Could this please be merged? This is a very much required feature that will really make dockge stand out. |
|
I tried this when merged on my fork, and seem to have no effect on the containers ... |
|
@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.
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
…ntainer control buttons
|
FYI, when testing this I noticed that I'm getting quite a few JS warnings in my browser. |
| stack.joinCombinedTerminal(socket); // Ensure the combined terminal is joined | ||
| callbackResult({ | ||
| ok: true, | ||
| msg: "Service" + serviceName + " started" |
There was a problem hiding this comment.
| msg: "Service" + serviceName + " started" | |
| msg: "Service " + serviceName + " started" |
| await stack.stopService(socket, serviceName); | ||
| callbackResult({ | ||
| ok: true, | ||
| msg: "Service" + serviceName + " stopped" |
There was a problem hiding this comment.
| msg: "Service" + serviceName + " stopped" | |
| msg: "Service " + serviceName + " stopped" |
| await stack.restartService(socket, serviceName); | ||
| callbackResult({ | ||
| ok: true, | ||
| msg: "Service" + serviceName + " restarted" |
There was a problem hiding this comment.
| msg: "Service" + serviceName + " restarted" | |
| msg: "Service " + serviceName + " restarted" |
|
It would be awesome to merge this |
Merge @mizady's pull request adding sub container control buttons.
Merge @mizady's pull request adding sub container control buttons.
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
| <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> |
There was a problem hiding this comment.
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.
| <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> |
There was a problem hiding this comment.
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.
|
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.
|
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: we can add Single Container Active:
Single Container Inactive:
Multi Container Active:
Multi Container Inactive:
|
|
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. |
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. |
|
@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. 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. |
|
Hi is there a forked docker image with this changes it would make my life so much easiear :) |
there sure is, unless you are already on my fork and still not working for you...in which case, nevermind LOL |
|
@cmcooper1980 this is really cool, thanks! |
|
@cmcooper1980 i tryed your branch in past but UI was broken thehere is possible fix but it is not inclooded unforchunatelly: |
how long ago was the past? I haven't had an issue since rebased to 1.50 (there were some issues with previous version). Oh are you referring the to background/colored panel? |
Hi, like some times back and yesterday I tested the latest build of yours :) functionality is definitely there but most of the tasks ended in error in console/ since I have many remote hosts and many containers UI felt broken... Could it be that I switched official image for yours and did not do a clean install ? |
I switched by changing the image name in the docker compose and it went flawlessly |
|
It is a shame that this has not been merged into master. I'm afraid I'm going to have to switch to another docker management service as this one seems to be completely abandoned. |
It is not abandoned author is just taking its time you can see the same trend on UpTimeKuma container :) |
I had no idea that he was also the author of UptimeKuma! |
|
Yeah, not abandoned...otherwise I think he'd have archived the project...plus those that are anxious for new features or fixes can try some of the communities' forks that have implemented some of the pull requests. @GamerClassN7, I actually tried to merge #800 previously and tried again yesterday, there is a conflict in the StackList.vue file which I removed and merged. Unfortunately, after the build and spin up the entire list of containers on the left goes missing. I tried different adjustments, however, I am not proficient in VUE to fix this...I'm not even completely sure it is strictly the StackList.vue file that may be causing it. I was successful in merging and testing #834 and #827, I was looking to merge a couple more before uploading an updated release...but probably best to keep this thread about this PR and other talk go into Discussions. |
|
@louislam This PR should be merged |
12 participants
https://github.com/louislam/dockge/blob/master/CONTRIBUTING.md
Tick the checkbox if you understand [x]:
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
Checklist
(including JSDoc for methods)
Screenshots (if any)