From 1e21df7c68c3d7b23ca565484d2c547cc836fc30 Mon Sep 17 00:00:00 2001
From: Jeppe Bundgaard <jb@truckwash.dk>
Date: Wed, 22 Apr 2026 15:35:17 +0200
Subject: [PATCH] Add "Cancel Operation" functionality for Edge Gateways with
 UI, API, and state management integration.

---
 scripts/run-playwright-full-slice.mjs         |   6 +
 .../edgeGateways/EdgeGatewayManager.vue       |  33 ++++-
 .../EdgeGatewayOperationsPage.vue             |  25 +++-
 .../edgeGateways/EdgeGatewayOverviewPage.vue  |  14 ++
 src/services/edgeGateways.js                  |  13 ++
 tests/e2e/edge-gateways.smoke.spec.js         |   7 +-
 tests/e2e/support/network.js                  | 122 +++++++++++++++++-
 7 files changed, 210 insertions(+), 10 deletions(-)

diff --git a/scripts/run-playwright-full-slice.mjs b/scripts/run-playwright-full-slice.mjs
index c0fd8489..4422bd74 100644
--- a/scripts/run-playwright-full-slice.mjs
+++ b/scripts/run-playwright-full-slice.mjs
@@ -44,10 +44,14 @@ const ownedFilesByRole = {
     "admin-department-visibility.spec.ts",
     "admin-overview-mobile.spec.ts",
     "admin-overview-night-washes.spec.ts",
+    "admin-pos-drafts.spec.ts",
     "admin-pos-orders.spec.ts",
     "adminModuleGoals.spec.ts",
     "adminModulePosMobileOrderFlow.spec.ts",
+    "assign-draft-order-modal-create.spec.ts",
+    "assign-draft-order-modal-layout.spec.ts",
     "change-invoice-collection.spec.ts",
+    "change-customer.spec.ts",
     "economic-queue-workflow.spec.js",
     "pos-customer-rules.spec.js",
     "pos-desktop-card-payments.spec.js",
@@ -63,8 +67,10 @@ const ownedFilesByRole = {
     "invoice-distribution.smoke.spec.js",
     "invoice-transfer-queue-history.spec.js",
     "invoicing-period.smoke.spec.js",
+    "superuser-bookings.spec.ts",
     "superuser-customer-complaints.spec.ts",
     "superuser-department-gates.spec.ts",
+    "superuser-drafts.spec.ts",
     "superuser-system-status.smoke.spec.js",
     "superuser-vehicles.smoke.spec.js",
     "workfeed-config.smoke.spec.js",
diff --git a/src/features/edgeGateways/EdgeGatewayManager.vue b/src/features/edgeGateways/EdgeGatewayManager.vue
index 35e64ebc..9a00f995 100644
--- a/src/features/edgeGateways/EdgeGatewayManager.vue
+++ b/src/features/edgeGateways/EdgeGatewayManager.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import {
+  cancelEdgeGatewayOperation,
   createEdgeGatewayInstallToken,
   createEdgeGatewayOperation,
   deleteEdgeGateway,
@@ -97,6 +98,7 @@ const loading = ref({
   rotate: false,
   delete: false,
   operation: false,
+  operationCancel: false,
 });
 
 let autoRefreshHandle = null;
@@ -873,6 +875,27 @@ const queueOperation = async ({ type, request }) => {
   }
 };
 
+const cancelOperation = async (operation) => {
+  if (!selectedGateway.value?.id || !operation?.id) return;
+  loading.value.operationCancel = true;
+  try {
+    const response = await cancelEdgeGatewayOperation(selectedGateway.value.id, operation.id);
+    const gateway = unwrap(response, null)?.gateway || response?.data?.data?.gateway || null;
+    if (gateway) {
+      setSelectedGatewaySnapshot(gateway);
+    }
+    flashMessage.value =
+      String(response?.data?.data?.operation?.status || "") === "CANCEL_REQUESTED"
+        ? `Cancellation requested for ${operation.type}.`
+        : `${operation.type} cancelled.`;
+    clearError();
+  } catch (error) {
+    fail(error);
+  } finally {
+    loading.value.operationCancel = false;
+  }
+};
+
 const queueDiscovery = async () => {
   const previousInventoryCount = selectedGateway.value?.inventory?.length || 0;
   await queueOperation({ type: "DISCOVERY", request: {} });
@@ -994,7 +1017,13 @@ const stopAutoRefresh = () => {
 };
 
 const autoRefreshTick = async () => {
-  if (loading.value.init || loading.value.detail || loading.value.operation || loading.value.discovery) {
+  if (
+    loading.value.init ||
+    loading.value.detail ||
+    loading.value.operation ||
+    loading.value.operationCancel ||
+    loading.value.discovery
+  ) {
     return;
   }
 
@@ -1271,7 +1300,9 @@ onUnmounted(() => {
             :gateway="selectedGatewayView"
             :allow-destructive="allowDestructive"
             :loading-create="loading.operation"
+            :loading-cancel="loading.operationCancel"
             @run-operation="queueOperation"
+            @cancel-operation="cancelOperation"
           />
 
           <EdgeGatewayManagePage
diff --git a/src/features/edgeGateways/EdgeGatewayOperationsPage.vue b/src/features/edgeGateways/EdgeGatewayOperationsPage.vue
index d2cf97cf..cbd4666b 100644
--- a/src/features/edgeGateways/EdgeGatewayOperationsPage.vue
+++ b/src/features/edgeGateways/EdgeGatewayOperationsPage.vue
@@ -5,9 +5,10 @@ const props = defineProps({
   gateway: { type: Object, required: true },
   allowDestructive: { type: Boolean, default: true },
   loadingCreate: { type: Boolean, default: false },
+  loadingCancel: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(["run-operation"]);
+const emit = defineEmits(["run-operation", "cancel-operation"]);
 
 const selectedOperationId = ref(null);
 const updateTargetVersion = ref("");
@@ -29,6 +30,10 @@ const selectedOperationCanRetry = computed(() => {
   const operation = selectedOperation.value;
   return Boolean(operation && operation.status === "FAILED" && operation.summary?.retryable !== false);
 });
+const selectedOperationCanCancel = computed(() => {
+  const status = String(selectedOperation.value?.status || "");
+  return ["PENDING", "IN_PROGRESS", "CANCEL_REQUESTED"].includes(status);
+});
 const selectedOperationDuration = computed(() => {
   const operation = selectedOperation.value;
   const startedAt = operation?.started_at ? Date.parse(String(operation.started_at).replace(" ", "T")) : null;
@@ -65,6 +70,12 @@ watch(
 );
 
 const runOperation = (type, request = {}) => emit("run-operation", { type, request });
+const cancelOperation = () => {
+  if (!selectedOperation.value) {
+    return;
+  }
+  emit("cancel-operation", selectedOperation.value);
+};
 const runRetry = () => {
   if (!selectedOperation.value) {
     return;
@@ -83,6 +94,8 @@ const statusTone = (status) =>
     COMPLETED: "is-success",
     FAILED: "is-danger",
     IN_PROGRESS: "is-warning",
+    CANCEL_REQUESTED: "is-warning",
+    CANCELLED: "is-light",
     PENDING: "is-light",
   }[status] || "is-light");
 </script>
@@ -125,6 +138,16 @@ const statusTone = (status) =>
         >
           Queue uninstall
         </button>
+        <button
+          v-if="allowDestructive && selectedOperationCanCancel"
+          type="button"
+          class="button is-danger is-light"
+          data-testid="gateway-operation-cancel"
+          :class="{ 'is-loading': loadingCancel }"
+          @click="cancelOperation"
+        >
+          {{ selectedOperation?.status === "CANCEL_REQUESTED" ? "Cancellation requested" : "Cancel selected" }}
+        </button>
         <button
           v-if="selectedOperationCanRetry"
           type="button"
diff --git a/src/features/edgeGateways/EdgeGatewayOverviewPage.vue b/src/features/edgeGateways/EdgeGatewayOverviewPage.vue
index dd3aa8ee..85c6ddde 100644
--- a/src/features/edgeGateways/EdgeGatewayOverviewPage.vue
+++ b/src/features/edgeGateways/EdgeGatewayOverviewPage.vue
@@ -14,6 +14,7 @@ const activeOperation = computed(() => props.gateway?.active_operation || null);
 const primaryError = computed(() => props.gateway?.error_state || diagnostics.value[0] || null);
 const activeProgress = computed(() => Math.max(0, Math.min(100, Number(activeOperation.value?.summary?.progress ?? 0))));
 const containerHealth = computed(() => props.gateway?.container_health || {});
+const containerServices = computed(() => (Array.isArray(containerHealth.value?.services) ? containerHealth.value.services : []));
 const outboxStatus = computed(() => props.gateway?.outbox_status || {});
 const stagedVersion = computed(() => props.gateway?.staged_version || null);
 const rollbackStatus = computed(() => props.gateway?.rollback_status || {});
@@ -113,6 +114,11 @@ const formatDate = (value) => (value ? String(value).replace("T", " ").slice(0,
         <p class="edge-card-label">Container health</p>
         <strong>{{ containerHealth.state || "UNKNOWN" }}</strong>
         <p>{{ containerHealth.summary || "No container health data" }}</p>
+        <div v-if="containerServices.length" class="edge-service-pills" data-testid="gateway-overview-container-services">
+          <span v-for="service in containerServices" :key="service.name" class="tag is-light">
+            {{ service.name }} · {{ service.status }}
+          </span>
+        </div>
       </article>
 
       <article class="edge-stat-card" data-testid="gateway-overview-outbox">
@@ -166,3 +172,11 @@ const formatDate = (value) => (value ? String(value).replace("T", " ").slice(0,
     </div>
   </section>
 </template>
+
+<style scoped>
+.edge-service-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+</style>
diff --git a/src/services/edgeGateways.js b/src/services/edgeGateways.js
index 08ce4828..d706dd86 100644
--- a/src/services/edgeGateways.js
+++ b/src/services/edgeGateways.js
@@ -368,6 +368,19 @@ export const createEdgeGatewayOperation = async (gatewayId, type, request = {})
     return response;
   });
 
+export const cancelEdgeGatewayOperation = async (gatewayId, operationId) =>
+  authenticatedRequest(
+    `/edge-gateways/${encodeURIComponent(gatewayId)}/operations/${encodeURIComponent(operationId)}/cancel`,
+    "POST",
+    {}
+  ).then((response) => {
+    const gateway = response?.data?.data?.gateway;
+    if (gateway?.id) {
+      cacheGatewaySnapshot(gateway);
+    }
+    return response;
+  });
+
 export const getEdgeGatewayOperationEvents = async (gatewayId, operationId) =>
   authenticatedRequest(
     `/edge-gateways/${encodeURIComponent(gatewayId)}/operations/${encodeURIComponent(operationId)}/events`,
diff --git a/tests/e2e/edge-gateways.smoke.spec.js b/tests/e2e/edge-gateways.smoke.spec.js
index c7232704..449ecf6b 100644
--- a/tests/e2e/edge-gateways.smoke.spec.js
+++ b/tests/e2e/edge-gateways.smoke.spec.js
@@ -225,13 +225,18 @@ test.describe("Edge gateway management smoke", () => {
       authenticated: true,
       permissions: ["superuser", "user"],
     });
+    let shouldDelayGatewayRefresh = true;
     await page.route(/\/edge-gateways(?:\/701)?(?:\?.*)?$/i, async (route, request) => {
       if (request.method() !== "GET") {
         await route.fallback();
         return;
       }
 
-      await page.waitForTimeout(1800);
+      if (shouldDelayGatewayRefresh) {
+        shouldDelayGatewayRefresh = false;
+        await new Promise((resolve) => setTimeout(resolve, 1800));
+      }
+
       await route.fallback();
     });
     await primeSuperuserSession(page);
diff --git a/tests/e2e/support/network.js b/tests/e2e/support/network.js
index 5b84d6ab..def6d49e 100644
--- a/tests/e2e/support/network.js
+++ b/tests/e2e/support/network.js
@@ -724,15 +724,25 @@ function mergeEdgeGatewayFixtureRecord(baseGateway, overrides = {}) {
 function createFixtureOperation(type, request = {}, overrides = {}) {
   const startedAt = overrides.started_at || null;
   const completedAt = overrides.completed_at || null;
+  const status = overrides.status || "PENDING";
   return {
     id: overrides.id || Date.now(),
     type,
-    status: overrides.status || "PENDING",
+    status,
     request,
     summary: overrides.summary || {
-      label: overrides.status === "COMPLETED" ? "Completed" : overrides.status === "FAILED" ? "Failed" : "Queued",
-      progress: overrides.status === "COMPLETED" ? 100 : overrides.status === "FAILED" ? 100 : 0,
-      retryable: overrides.status !== "FAILED",
+      label:
+        status === "COMPLETED"
+          ? "Completed"
+          : status === "FAILED"
+          ? "Failed"
+          : status === "CANCELLED"
+          ? "Cancelled"
+          : status === "CANCEL_REQUESTED"
+          ? "Cancellation requested"
+          : "Queued",
+      progress: ["COMPLETED", "FAILED"].includes(status) ? 100 : 0,
+      retryable: status !== "FAILED",
     },
     result: overrides.result || {},
     error_code: overrides.error_code || null,
@@ -752,6 +762,11 @@ function buildEdgeGatewayOperationSummary(operations = []) {
       const status = String(operation.status || "PENDING");
       if (status === "PENDING") summary.pending += 1;
       if (status === "IN_PROGRESS") summary.in_progress += 1;
+      if (status === "CANCEL_REQUESTED") summary.cancel_requested += 1;
+      if (status === "CANCELLED") {
+        summary.cancelled += 1;
+        summary.latest_cancelled_at = summary.latest_cancelled_at || operation.completed_at || null;
+      }
       if (status === "COMPLETED") {
         summary.completed += 1;
         summary.latest_completed_at = summary.latest_completed_at || operation.completed_at || null;
@@ -770,8 +785,11 @@ function buildEdgeGatewayOperationSummary(operations = []) {
       total: operations.length,
       pending: 0,
       in_progress: 0,
+      cancel_requested: 0,
+      cancelled: 0,
       completed: 0,
       failed: 0,
+      latest_cancelled_at: null,
       latest_completed_at: null,
       latest_failed_at: null,
       latest_type: null,
@@ -806,7 +824,7 @@ function buildEdgeGatewayRuntimeFixture(gateway) {
   const cloudRelays = relayHealth.filter((relay) => relay.execution_path === "cloud");
   const operations = Array.isArray(gateway.operations) ? gateway.operations : [];
   const activeOperation =
-    operations.find((operation) => ["PENDING", "IN_PROGRESS"].includes(String(operation.status))) || null;
+    operations.find((operation) => ["PENDING", "IN_PROGRESS", "CANCEL_REQUESTED"].includes(String(operation.status))) || null;
   const versionDrift =
     gateway.installed_version && gateway.target_version && gateway.installed_version !== gateway.target_version;
   const credentialFreshnessState = gateway.metadata?.credentials_rotated_at ? "FRESH" : "UNKNOWN";
@@ -829,10 +847,14 @@ function buildEdgeGatewayRuntimeFixture(gateway) {
   const containerHealth = gateway.container_health ||
     gateway.metadata?.container_health || {
       state: gateway.status === "OFFLINE" ? "OFFLINE" : "ONLINE",
-      summary: gateway.status === "OFFLINE" ? "0/2 containers healthy" : "2/2 containers healthy",
+      summary: gateway.status === "OFFLINE" ? "0/6 containers healthy" : "6/6 containers healthy",
       services: [
         { name: "edge-agent", status: gateway.status === "OFFLINE" ? "offline" : "healthy" },
         { name: "lan-worker", status: gateway.status === "OFFLINE" ? "offline" : "healthy" },
+        { name: "redis", status: gateway.status === "OFFLINE" ? "offline" : "healthy" },
+        { name: "mariadb", status: gateway.status === "OFFLINE" ? "offline" : "healthy" },
+        { name: "minio", status: gateway.status === "OFFLINE" ? "offline" : "healthy" },
+        { name: "auto-updater", status: gateway.status === "OFFLINE" ? "offline" : "healthy" },
       ],
     };
   const outboxStatus = gateway.outbox_status ||
@@ -931,7 +953,7 @@ function buildEdgeGatewayRuntimeFixture(gateway) {
       gateway.error_state ||
       (diagnostics[0]
         ? { ...diagnostics[0] }
-        : activeOperation?.error_code
+        : activeOperation?.error_code && !["CANCEL_REQUESTED", "CANCELLED"].includes(String(activeOperation?.status || ""))
         ? { code: activeOperation.error_code, message: activeOperation.error_message }
         : null),
   };
@@ -2926,6 +2948,74 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
     return true;
   }
 
+  if (/\/edge-gateways\/\d+\/operations\/\d+\/cancel$/.test(pathname) && method === "POST") {
+    const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/operations\/\d+\/cancel$/);
+    const operationId = extractMatchId(/\/operations\/(\d+)\/cancel$/);
+    const gateway = findGateway(gatewayId);
+    const now = toSqlDateTime();
+
+    if (!gateway) {
+      await route.fulfill(json({ message: "Gateway not found" }, 404));
+      return true;
+    }
+
+    const operation = (gateway.operations || []).find((entry) => Number(entry.id) === Number(operationId)) || null;
+    if (!operation) {
+      await route.fulfill(json({ message: "Operation not found" }, 404));
+      return true;
+    }
+
+    if (operation.status === "IN_PROGRESS" || operation.status === "CANCEL_REQUESTED") {
+      operation.status = "CANCELLED";
+      operation.completed_at = now;
+      operation.updated_at = now;
+      operation.error_code = "EDGE_GATEWAY_CANCELLED";
+      operation.error_message = "Operation cancelled by operator";
+      operation.summary = {
+        ...(operation.summary || {}),
+        label: "Cancelled",
+        retryable: true,
+      };
+      operation.events = [
+        ...(operation.events || []),
+        {
+          id: edgeGatewayFixture.nextOperationEventId++,
+          level: "WARNING",
+          code: "OPERATION_CANCELLED",
+          message: "Operation cancelled by operator",
+          created_at: now,
+        },
+      ];
+      delete edgeGatewayFixture.pendingDiscoveryByGatewayId[gatewayId];
+    } else if (operation.status === "PENDING") {
+      operation.status = "CANCELLED";
+      operation.completed_at = now;
+      operation.updated_at = now;
+      operation.error_code = "EDGE_GATEWAY_CANCELLED";
+      operation.error_message = "Operation cancelled by operator";
+      operation.summary = {
+        ...(operation.summary || {}),
+        label: "Cancelled",
+        retryable: true,
+      };
+    }
+
+    gateway.audit_logs = [
+      { id: Date.now(), created_at: now, action: "GATEWAY_OPERATION_CANCELLED", actor_type: "USER" },
+      ...(gateway.audit_logs || []),
+    ];
+    Object.assign(gateway, buildEdgeGatewayRuntimeFixture(gateway));
+    await route.fulfill(
+      json({
+        data: {
+          operation: cloneJson(operation),
+          gateway: buildHttpEdgeGatewayGateway(edgeGatewayFixture, gateway, true),
+        },
+      })
+    );
+    return true;
+  }
+
   if (/\/edge-gateways\/\d+\/operations$/.test(pathname) && method === "POST") {
     const gatewayId = extractMatchId(/\/edge-gateways\/(\d+)\/operations$/);
     const gateway = findGateway(gatewayId);
@@ -2935,6 +3025,24 @@ async function handleEdgeGatewayRoute({ route, request, parsedUrl, pathname, met
       return true;
     }
 
+    const activeOperation = (gateway.operations || []).find((entry) =>
+      ["PENDING", "IN_PROGRESS", "CANCEL_REQUESTED"].includes(String(entry.status || ""))
+    );
+    if (activeOperation) {
+      await route.fulfill(
+        json(
+          {
+            data: {
+              message: "Another gateway operation is already active",
+              error_code: "EDGE_GATEWAY_CONFLICT",
+            },
+          },
+          409
+        )
+      );
+      return true;
+    }
+
     const operationType = String(body.type || "").toUpperCase();
     const operationRequest = body.request || {};
     const now = toSqlDateTime();