refactor: ♻️ disable bash shell link when container not running

frontend/src/components/Container.vue

@@ -15,8 +15,8 @@
                 </div>
             </div>
             <div class="col-5">
-                <div class="function">
-                    <router-link v-if="!isEditMode" class="btn btn-normal" :to="terminalRouteLink" disabled="">
+                <div class="function" :class="{notallowed:!(!isEditMode && active)}">
+                    <router-link v-if="!isEditMode" class="btn btn-normal" :to="terminalRouteLink" :class="{disabledlink:!(!isEditMode && active)}">
                         <font-awesome-icon icon="terminal" />
                         Bash
                     </router-link>
@@ -159,7 +159,11 @@ export default defineComponent({
         status: {
             type: String,
             default: "N/A",
-        }
+        },
+        active: {
+            type: Boolean,
+            default: false,
+        },
     },
     emits: [
     ],
@@ -309,4 +313,15 @@ export default defineComponent({
         justify-content: end;
     }
 }
+
+.disabledlink {
+    pointer-events: none;
+    border: 1px solid #999999;
+    background-color: #cccccc;
+    color: #666666;
+}
+
+.notallowed{
+    cursor: not-allowed;
+}
 </style>

frontend/src/pages/Compose.vue

@@ -129,6 +129,7 @@
                             :is-edit-mode="isEditMode"
                             :first="name === Object.keys(jsonConfig.services)[0]"
                             :status="serviceStatusList[name]"
+                            :active="active"
                         />
                     </div>