WIP

frontend/src/icon.ts

@@ -54,6 +54,7 @@ import {
     faTerminal, faWarehouse, faHome, faRocket,
     faRotate,
     faCloudArrowDown, faArrowsRotate,
+    faPaintRoller,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -109,6 +110,7 @@ library.add(
     faRotate,
     faCloudArrowDown,
     faArrowsRotate,
+    faPaintRoller,
 );
 
 export { FontAwesomeIcon };

frontend/src/lang/en.json

@@ -20,6 +20,7 @@
     "updateStack": "Update",
     "startStack": "Start",
     "downStack": "Stop & Down",
+    "rolloutStack": "Rollout Update (Zero Downtime)",
     "editStack": "Edit",
     "discardStack": "Discard",
     "saveStackDraft": "Save",

frontend/src/pages/Compose.vue

@@ -41,11 +41,15 @@
                         {{ $t("stopStack") }}
                     </button>
 
-                    <BDropdown v-if="!isEditMode && active" right text="" variant="normal">
-                        <BDropdownItem @click="downStack">
+                    <BDropdown v-if="!isEditMode || active" right text="" variant="normal">
+                        <BDropdownItem v-if="!isEditMode" @click="downStack">
                             <font-awesome-icon icon="stop" class="me-1" />
                             {{ $t("downStack") }}
                         </BDropdownItem>
+                        <BDropdownItem v-if="active" @click="rolloutStack">
+                            <font-awesome-icon icon="paint-roller" class="me-1" />
+                            {{ $t("rolloutStack") }} <span class="badge bg-info">Beta</span>
+                        </BDropdownItem>
                     </BDropdown>
                 </div>
 
@@ -486,6 +490,15 @@ export default {
             });
         },
 
+        rolloutStack() {
+            this.processing = true;
+
+            this.$root.getSocket().emit("rolloutStack", this.stack.name, (res) => {
+                this.processing = false;
+                this.$root.toastRes(res);
+            });
+        },
+
         downStack() {
             this.processing = true;