feat: ✨ start / stop container fix #3

backend/pilotwings.py

@@ -107,6 +107,7 @@ def get_containers(
         return [
             serialize_container(container)
             for container in client.containers.list(
+                all=True,
                 filters={"label": ["engine=pilotwings"]}
             )
         ]
@@ -114,6 +115,7 @@ def get_containers(
     return [
         serialize_container(container)
         for container in client.containers.list(
+            all=True,
             filters={"label": ["engine=pilotwings", f"owner={credentials.username}"]},
         )
     ]
@@ -187,6 +189,29 @@ def restart_container(
 ) -> SerializedContainer:
     container = select_container(container_name, credentials)
     container.restart()
+    container.reload()
+    return serialize_container(container)
+
+
+@app.post("/api/container/{container_name}/start")
+def start_container(
+    container_name: str,
+    credentials: Annotated[HTTPBasicCredentials, Depends(security)],
+) -> SerializedContainer:
+    container = select_container(container_name, credentials)
+    container.start()
+    container.reload()
+    return serialize_container(container)
+
+
+@app.post("/api/container/{container_name}/stop")
+def stop_container(
+    container_name: str,
+    credentials: Annotated[HTTPBasicCredentials, Depends(security)],
+) -> SerializedContainer:
+    container = select_container(container_name, credentials)
+    container.stop()
+    container.reload()
     return serialize_container(container)
 
 

frontend/utils.ts

@@ -0,0 +1,16 @@
+export const get_status_icon = (
+  status: string,
+): { name: string; type: string } => {
+  switch (status) {
+    case 'running':
+      return { name: 'play', type: 'success' }
+    case 'restarting':
+      return { name: 'refresh', type: 'danger' }
+    case 'paused':
+      return { name: 'pause', type: 'warning' }
+    case 'exited':
+      return { name: 'stop', type: 'danger' }
+    default:
+      return { name: 'question-circle', type: 'warning' }
+  }
+}

frontend/views/Container.vue

@@ -34,9 +34,27 @@
         >
           {{ container?.status }}
         </Icon>
-        <button class="button ml-2" @click="restart">
+        <button
+          v-if="container?.status == 'running'"
+          class="button ml-2"
+          @click="restart"
+        >
           <Icon name="refresh">Restart</Icon>
         </button>
+        <button
+          v-if="container?.status == 'running'"
+          class="button ml-2"
+          @click="stop"
+        >
+          <Icon name="stop">Stop</Icon>
+        </button>
+        <button
+          v-if="container?.status != 'running'"
+          class="button ml-2"
+          @click="start"
+        >
+          <Icon name="play">Start</Icon>
+        </button>
       </div>
       <div class="block is-flex is-align-items-baseline">
         <Icon name="image"><b>Logs:</b></Icon>
@@ -58,6 +76,7 @@ import axios, { AxiosError } from 'axios'
 import type { Container } from '../types'
 import Icon from '../components/Icon.vue'
 import Loading from '../components/Loading.vue'
+import { get_status_icon } from '../utils'
 
 export default {
   name: 'Container',
@@ -77,19 +96,7 @@ export default {
       return this.$route.params.name as string
     },
     status_icon(): { name: string; type: string } {
-      if (!this.container) return { name: 'question-circle', type: 'warning' }
-      switch (this.container.status) {
-        case 'running':
-          return { name: 'play', type: 'success' }
-        case 'restarting':
-          return { name: 'refresh', type: 'danger' }
-        case 'paused':
-          return { name: 'pause', type: 'warning' }
-        case 'exited':
-          return { name: 'stop', type: 'danger' }
-        default:
-          return { name: 'question-circle', type: 'warning' }
-      }
+      return get_status_icon(this.container?.status ?? 'unknown')
     },
   },
   async mounted() {
@@ -125,6 +132,12 @@ export default {
     async restart() {
       this.request('post', `/api/container/${this.container_name}/restart`)
     },
+    async start() {
+      this.request('post', `/api/container/${this.container_name}/start`)
+    },
+    async stop() {
+      this.request('post', `/api/container/${this.container_name}/stop`)
+    },
   },
 }
 </script>

frontend/views/Home.vue

@@ -26,6 +26,7 @@ import axios, { AxiosError } from 'axios'
 import type { Container } from '../types'
 import Icon from '../components/Icon.vue'
 import Loading from '../components/Loading.vue'
+import { get_status_icon } from '../utils'
 
 export default {
   name: 'Home',
@@ -54,18 +55,7 @@ export default {
   },
   methods: {
     status_icon(container: Container): { name: string; type: string } {
-      switch (container.status) {
-        case 'running':
-          return { name: 'play', type: 'success' }
-        case 'restarting':
-          return { name: 'refresh', type: 'danger' }
-        case 'paused':
-          return { name: 'pause', type: 'warning' }
-        case 'exited':
-          return { name: 'stop', type: 'danger' }
-        default:
-          return { name: 'question-circle', type: 'warning' }
-      }
+      return get_status_icon(container.status)
     },
   },
 }

package-lock.json

@@ -676,9 +676,9 @@
       }
     },
     "node_modules/@humanwhocodes/retry": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.0.tgz",
-      "integrity": "sha512-xnRgu9DxZbkWak/te3fcytNyp8MTbuiZIaueg2rgEvBuN55n04nwLYLU9TX/VVlusc9L2ZNXi99nUFNkHXtr5g==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+      "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {