add restart button

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

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

@@ -274,6 +274,25 @@ export class DockerSocketHandler extends AgentSocketHandler {
             }
         });
 
+        agentSocket.on('restartService', async (stackName: unknown, serviceName: unknown, callback) => {
+            try {
+                checkLogin(socket);
+
+                if (typeof stackName !== 'string' || typeof serviceName !== 'string') {
+                    throw new Error('Invalid stackName or serviceName');
+                }
+
+                const stack = await Stack.getStack(server, stackName, true);
+                await stack.restartService(socket, serviceName);
+                callbackResult({
+                    ok: true,
+                    msg: `Service ${serviceName} restarted`
+                }, callback);
+            } catch (e) {
+                callbackError(e, callback);
+            }
+        });
+
         // getExternalNetworkList
         agentSocket.on("getDockerNetworkList", async (callback) => {
             try {

backend/stack.ts

@@ -535,7 +535,7 @@ export class Stack {
         const terminalName = getComposeTerminalName(socket.endpoint, this.name);
         const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", ["compose", "up", "-d", serviceName], this.path);
         if (exitCode !== 0) {
-            throw new Error(`Failed to start service ${serviceName}, please check the terminal output for more information.`);
+            throw new Error(`Failed to start service ${serviceName}, please check logs for more information.`);
         }
 
         return exitCode;
@@ -545,7 +545,17 @@ export class Stack {
         const terminalName = getComposeTerminalName(socket.endpoint, this.name);
         const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", ["compose", "stop", serviceName], this.path);
         if (exitCode !== 0) {
-            throw new Error(`Failed to stop service ${serviceName}, please check the terminal output for more information.`);
+            throw new Error(`Failed to stop service ${serviceName}, please check logs for more information.`);
+        }
+
+        return exitCode;
+    }
+
+    async restartService(socket: DockgeSocket, serviceName: string): Promise<number> {
+        const terminalName = getComposeTerminalName(socket.endpoint, this.name);
+        const exitCode = await Terminal.exec(this.server, socket, terminalName, "docker", ["compose", "restart", serviceName], this.path);
+        if (exitCode !== 0) {
+            throw new Error(`Failed to restart service ${serviceName}, please check logs for more information.`);
         }
 
         return exitCode;

frontend/src/components/Container.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="shadow-box big-padding mb-3 container">
         <div class="row">
-            <div class="col-7">
+            <div class="col-5">
                 <h4>{{ name }}</h4>
                 <div class="image mb-2">
                     <span class="me-1">{{ imageName }}:</span><span class="tag">{{ imageTag }}</span>
@@ -14,26 +14,33 @@
                     </a>
                 </div>
             </div>
-            <div class="col-5">
+            <div class="col-7">
                 <div class="function">
                     <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'"
+                    <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'"
+                    <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>
             </div>
         </div>
@@ -303,7 +310,11 @@ export default defineComponent({
         },
         stopService() {
             this.$emit('stop-service', this.name);
+        },
+        restartService() {
+            this.$emit('restart-service', this.name);
         }
+
     }
 });
 </script>

frontend/src/pages/Compose.vue

@@ -132,6 +132,7 @@
                             :processing="processing"
                             @start-service="startService"
                             @stop-service="stopService"
+                            @restart-service="restartService"
                         />
                     </div>
 
@@ -815,6 +816,18 @@ export default {
             });
         },
 
+        restartService(serviceName) {
+            this.processing = true;
+
+            this.$root.emitAgent(this.endpoint, "restartService", this.stack.name, serviceName, (res) => {
+                this.processing = false;
+                this.$root.toastRes(res);
+
+                if (res.ok) {
+                    this.requestServiceStatus(); // Refresh service status
+                }
+            });
+        },
     }
 };
 </script>