From d5bf42ad01befad2d3d7f64e349be016d93caff4 Mon Sep 17 00:00:00 2001
From: Hungerdream <1710233908@qq.com>
Date: Tue, 28 Jul 2026 14:29:34 +0800
Subject: [PATCH] feat(ui): surface rollback actions in the service catalog

Add retryRollback / releaseRollback / retryCloudDMRegistration API
bindings and wire the corresponding actions and status presentation
into the delivery task view.
---
 frontend/src/api/delivery.ts           |  18 +++
 frontend/src/views/service/Catalog.vue | 176 +++++++++++++++++++++++--
 2 files changed, 184 insertions(+), 10 deletions(-)

diff --git a/frontend/src/api/delivery.ts b/frontend/src/api/delivery.ts
index b799841..1ae72a3 100644
--- a/frontend/src/api/delivery.ts
+++ b/frontend/src/api/delivery.ts
@@ -79,6 +79,24 @@ export const deliveryApi = {
       method: 'POST',
     })
   },
+
+  async retryRollback(taskId: string): Promise<void> {
+    await authRequest(`/auth/api/v1/delivery/tasks/${encodeURIComponent(taskId)}/rollback/retry`, {
+      method: 'POST',
+    })
+  },
+
+  async releaseRollback(taskId: string): Promise<void> {
+    await authRequest(`/auth/api/v1/delivery/tasks/${encodeURIComponent(taskId)}/rollback/release`, {
+      method: 'POST',
+    })
+  },
+
+  async retryCloudDMRegistration(taskId: string): Promise<void> {
+    await authRequest(`/auth/api/v1/delivery/tasks/${encodeURIComponent(taskId)}/clouddm/retry`, {
+      method: 'POST',
+    })
+  },
 }
 
 function createIdempotencyKey(payload: CreateMySQLDeliveryPayload) {
diff --git a/frontend/src/views/service/Catalog.vue b/frontend/src/views/service/Catalog.vue
index f0574b4..5cd18cd 100644
--- a/frontend/src/views/service/Catalog.vue
+++ b/frontend/src/views/service/Catalog.vue
@@ -248,7 +248,7 @@
         </section>
 
         <section v-else class="result-view">
-          <div class="result-head" :class="{ failed: deliveryFailed }">
+          <div class="result-head" :class="{ failed: deliveryFailed, warning: deliveryRegisterFailed }">
             <div class="result-icon">{{ deliveryFailed ? '!' : '✓' }}</div>
             <div>
               <h3>{{ resultTitle }}</h3>
@@ -256,6 +256,27 @@
             </div>
           </div>
 
+          <div v-if="canManageRollback" class="rollback-actions">
+            <div>
+              <strong>目标机清理未确认</strong>
+              <p>资源目前仍被保护性占用。可重试自动回退，或确认已完成目标机清理后释放。</p>
+            </div>
+            <div class="head-actions">
+              <el-button :loading="rollbackRetrying" :disabled="rollbackActionBusy" @click="retryRollback">重试回退</el-button>
+              <el-button type="warning" :loading="rollbackReleasing" :disabled="rollbackActionBusy" @click="releaseRollback">确认清理并释放资源</el-button>
+            </div>
+          </div>
+
+          <div v-if="canRetryCloudDM" class="rollback-actions registration-actions">
+            <div>
+              <strong>实例已交付，CloudDM 注册未完成</strong>
+              <p>数据库健康实例和资源账本已保留，仅需重试 CloudDM 注册。</p>
+            </div>
+            <div class="head-actions">
+              <el-button type="warning" :loading="cloudDMRetrying" @click="retryCloudDMRegistration">重试 CloudDM 注册</el-button>
+            </div>
+          </div>
+
           <div class="result-grid">
             <div class="result-item">
               <span>访问地址</span>
@@ -295,7 +316,7 @@
                   <td>{{ deliveryForm.version }}</td>
                   <td>{{ currentModeLabel }}</td>
                   <td><code>{{ resultAddress }}</code></td>
-                  <td><span class="tag" :class="deliveryFailed ? 'tag-red' : 'tag-green'">{{ deliveryFailed ? '已回退' : '正常' }}</span></td>
+                  <td><span class="tag" :class="deliveryFailed ? (deliveryRolledBack || deliveryAcknowledged || deliveryRegisterFailed ? 'tag-amber' : 'tag-red') : 'tag-green'">{{ deliveryRolledBack ? '已回退' : deliveryAcknowledged ? '已确认释放' : deliveryRegisterFailed ? '实例保留' : deliveryFailed ? '需处理' : '正常' }}</span></td>
                   <td><code>{{ activeService.registerTo }}</code></td>
                 </tr>
               </tbody>
@@ -317,10 +338,11 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Back, CircleCheck, Promotion, Refresh } from '@element-plus/icons-vue'
 import { useRoute, useRouter } from 'vue-router'
 import { deliveryApi, type DeliveryTarget, type TaskEvent } from '@/api/delivery'
+import { useAuthStore } from '@/stores/auth'
 import { useBusinessLineStore } from '@/stores/businessLine'
 import { useBusinessLineMockProfile } from '@/utils/businessLineMock'
 
@@ -373,6 +395,7 @@ interface DeliveryStep {
 const { currentName } = useBusinessLineMockProfile()
 const route = useRoute()
 const router = useRouter()
+const authStore = useAuthStore()
 const businessLineStore = useBusinessLineStore()
 
 const basicServices = ref<Service[]>([
@@ -536,6 +559,16 @@ const targetsLoading = ref(false)
 const pollTimer = ref<number | undefined>()
 const seenEventIds = ref(new Set<number>())
 const deliveryLog = ref('[ready] 等待创建交付任务...')
+const lastDeliveryStatus = ref('')
+const deliveryRolledBack = computed(() => lastDeliveryStatus.value === 'rolled_back')
+const deliveryAcknowledged = computed(() => lastDeliveryStatus.value === 'rollback_acknowledged')
+const deliveryRegisterFailed = computed(() => lastDeliveryStatus.value === 'register_failed')
+const rollbackRetrying = ref(false)
+const rollbackReleasing = ref(false)
+const cloudDMRetrying = ref(false)
+const rollbackActionBusy = computed(() => rollbackRetrying.value || rollbackReleasing.value)
+const canManageRollback = computed(() => authStore.isAdmin && lastDeliveryStatus.value === 'rollback_failed' && Boolean(deploymentId.value))
+const canRetryCloudDM = computed(() => deliveryRegisterFailed.value && Boolean(deploymentId.value))
 
 const deliveryForm = reactive({
   instanceName: `mysql-${currentName.value}-billing-02`,
@@ -595,22 +628,40 @@ const runnerPreview = computed(() => {
 })
 const resultAddress = computed(() => `${deliveredHost.value || topologyNodes.value[0]?.ip || '10.24.18.21'}:${deliveredPort.value || deliveryForm.port}`)
 const resultTitle = computed(() => {
-  if (deliveryFailed.value) return '交付失败，已自动回退'
+  if (deliveryRolledBack.value) return '交付失败，已完成回退'
+  if (deliveryAcknowledged.value) return '交付失败，已确认清理'
+  if (deliveryRegisterFailed.value) return 'MySQL 已交付，CloudDM 注册失败'
+  if (lastDeliveryStatus.value === 'rollback_failed') return '交付失败，回退失败'
+  if (lastDeliveryStatus.value === 'canceled') return '交付任务已取消'
+  if (deliveryFailed.value) return '交付失败'
   return activeServiceKey.value === 'mysql' ? 'MySQL 实例已交付' : 'OpenResty 集群已交付'
 })
 const resultSubtitle = computed(() => {
-  if (deliveryFailed.value) return deliveryError.value || '交付失败 · 资源已释放 · 变更未交付'
+  if (deliveryRolledBack.value) return deliveryError.value || '目标机实例文件、配置和资源记录已清理'
+  if (deliveryAcknowledged.value) return deliveryError.value || '管理员已确认目标机清理完成，资源预留已释放（不代表自动回退成功）'
+  if (deliveryRegisterFailed.value) return deliveryError.value || '实例已通过健康检查并完成资源入账，CloudDM 注册失败；实例保留，可重试注册'
+  if (lastDeliveryStatus.value === 'rollback_failed') return deliveryError.value || '自动回退失败 · 目标机可能存在残留 · 需要人工处理'
+  if (lastDeliveryStatus.value === 'canceled') return deliveryError.value || '任务在部署完成前被取消'
+  if (deliveryFailed.value) return deliveryError.value || '交付失败 · 未确认目标机已清理'
   return activeServiceKey.value === 'mysql' ? '全部步骤执行成功 · 用时 06:42' : '全部步骤执行成功 · 用时 02:18'
 })
 const deliveryStateText = computed(() => {
-  if (deliveryFailed.value) return '已回退'
+  if (lastDeliveryStatus.value === 'rollback_failed') return '回退失败'
+  if (deliveryRolledBack.value) return '已回退'
+  if (deliveryAcknowledged.value) return '已确认释放'
+  if (deliveryRegisterFailed.value) return '注册失败（实例保留）'
+  if (lastDeliveryStatus.value === 'canceled') return '已取消'
+  if (deliveryFailed.value) return '交付失败'
   if (deliveryDone.value) return '已交付'
   if (running.value) return '交付中'
   if (precheckPassed.value) return '待执行'
   return '配置中'
 })
-const canCancelDeployment = computed(() => Boolean(deploymentId.value) && running.value && !deliveryDone.value && !deliveryFailed.value)
+const canCancelDeployment = computed(() => Boolean(deploymentId.value) && ['pending', 'validating', 'dispatching', 'running', 'registering', 'canceling'].includes(lastDeliveryStatus.value) && !deliveryDone.value && !deliveryFailed.value)
 const deliveryStateClass = computed(() => {
+  if (lastDeliveryStatus.value === 'rollback_failed') return 'tag-red'
+  if (deliveryRolledBack.value || deliveryAcknowledged.value) return 'tag-amber'
+  if (deliveryRegisterFailed.value) return 'tag-amber'
   if (deliveryFailed.value) return 'tag-red'
   if (deliveryDone.value) return 'tag-green'
   if (precheckPassed.value || running.value) return 'tag-amber'
@@ -684,6 +735,7 @@ function resetExecutionState() {
   deliveryDone.value = false
   deliveryFailed.value = false
   deliveryError.value = ''
+  lastDeliveryStatus.value = ''
   canceling.value = false
   deploymentId.value = ''
   deliveredHost.value = ''
@@ -701,6 +753,7 @@ function defaultSteps(): DeliveryStep[] {
         ['应用标准参数与复制配置', '基础参数、GTID、主从关系'],
         ['数据库健康检查', '端口、读写、复制延迟、参数基线'],
         ['注册资产与交付归档', 'CloudDM、CMDB、Prometheus'],
+        ['失败回退与清理', '停止实例、清理目录、释放资源'],
       ]
     : [
         ['资源锁定与配置检查', '节点、端口、证书、Ingress 冲突'],
@@ -832,8 +885,9 @@ function appendLog(message: unknown) {
 }
 
 function applyDeliveryStatus(status: string, message: string) {
+  lastDeliveryStatus.value = status
   if (message) appendLog(message)
-  if (['pending', 'validating', 'dispatching', 'running', 'registering', 'canceling'].includes(status)) {
+  if (['pending', 'validating', 'dispatching', 'running', 'registering', 'canceling', 'rollback_pending', 'rolling_back'].includes(status)) {
     running.value = true
     markStepRunning()
     return
@@ -845,7 +899,14 @@ function applyDeliveryStatus(status: string, message: string) {
     steps.value = steps.value.map((step) => ({ ...step, state: 'done' }))
     return
   }
-  if (['execution_failed', 'validation_failed', 'register_failed', 'canceled'].includes(status)) {
+  if (status === 'rolled_back') {
+    running.value = false
+    deliveryDone.value = false
+    deliveryFailed.value = true
+    steps.value = steps.value.map((step) => ({ ...step, state: 'done' }))
+    return
+  }
+  if (['execution_failed', 'validation_failed', 'register_failed', 'rollback_failed', 'rollback_acknowledged', 'canceled'].includes(status)) {
     running.value = false
     deliveryDone.value = false
     deliveryFailed.value = true
@@ -898,7 +959,66 @@ function normalizeDNSLabel(value: string) {
 }
 
 function isTerminalDeliveryStatus(status: string) {
-  return ['finished', 'execution_failed', 'validation_failed', 'register_failed', 'canceled'].includes(status)
+  return ['finished', 'execution_failed', 'validation_failed', 'register_failed', 'canceled', 'rolled_back', 'rollback_failed', 'rollback_acknowledged'].includes(status)
+}
+
+async function retryRollback() {
+  if (!deploymentId.value) return
+  rollbackRetrying.value = true
+  try {
+    await deliveryApi.retryRollback(deploymentId.value)
+    appendLog('[rollback] manual retry requested by platform admin')
+    activeView.value = 'execution'
+    startTaskPolling(deploymentId.value)
+    ElMessage.success('已重新发起回退')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '重试回退失败')
+  } finally {
+    rollbackRetrying.value = false
+  }
+}
+
+async function retryCloudDMRegistration() {
+  if (!deploymentId.value) return
+  cloudDMRetrying.value = true
+  try {
+    await deliveryApi.retryCloudDMRegistration(deploymentId.value)
+    appendLog('[clouddm] registration retry requested')
+    activeView.value = 'execution'
+    startTaskPolling(deploymentId.value)
+    ElMessage.success('已重新发起 CloudDM 注册')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '重试 CloudDM 注册失败')
+  } finally {
+    cloudDMRetrying.value = false
+  }
+}
+
+async function releaseRollback() {
+  if (!deploymentId.value) return
+  try {
+    await ElMessageBox.confirm('请确认已在目标机清理实例服务、配置、数据和日志目录。该操作会释放资源记录，但不会声称自动回退成功。', '确认释放资源', {
+      type: 'warning',
+      confirmButtonText: '确认释放',
+      cancelButtonText: '取消',
+    })
+  } catch {
+    return
+  }
+  rollbackReleasing.value = true
+  try {
+    await deliveryApi.releaseRollback(deploymentId.value)
+    appendLog('[rollback] resource release acknowledged by platform admin')
+    deliveryError.value = ''
+    applyDeliveryStatus('rollback_acknowledged', '')
+    stopPolling()
+    activeView.value = 'result'
+    ElMessage.success('已确认清理，资源已释放')
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '释放资源失败')
+  } finally {
+    rollbackReleasing.value = false
+  }
 }
 
 function markStepRunning() {
@@ -1353,11 +1473,42 @@ h4 {
   color: #FFFFFF;
 }
 
+.result-head.warning .result-icon {
+  background: var(--tag-amber-bg);
+  color: var(--tag-amber-text);
+  border: 1px solid var(--tag-amber-border);
+}
+
 .result-head h3 {
   margin: 0 0 4px;
   font-size: 16px;
 }
 
+.rollback-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 16px 0;
+  padding: 14px 16px;
+  border: 1px solid var(--tag-amber-border);
+  border-radius: 8px;
+  background: var(--tag-amber-bg);
+}
+
+.rollback-actions strong {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--tag-amber-text);
+  font-size: 13px;
+}
+
+.rollback-actions p {
+  margin: 0;
+  color: var(--text-mid);
+  font-size: 12px;
+}
+
 .result-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -1499,6 +1650,11 @@ code {
     flex-direction: column;
   }
 
+  .rollback-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
   .head-actions {
     margin-left: 0;
   }