feat：支持针对构建重放事件 TencentBlueKing#11232

# Reviewed, transaction id: 28105
vhwweng · Dec 30, 2024 · e4f1a68 · e4f1a68
1 parent 4722043
commit e4f1a68
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 29 deletions.
diff --git a/src/frontend/devops-pipeline/src/components/PipelineHeader/DetailHeader.vue b/src/frontend/devops-pipeline/src/components/PipelineHeader/DetailHeader.vue
@@ -19,29 +19,88 @@
                 :icon="loading ? 'loading' : ''"
                 outline
                 theme="warning"
-                @click="handleClick"
+                @click="handleCancel"
             >
                 {{ $t("cancel") }}
             </bk-button>
             <template v-else-if="!isDebugExec">
-                <bk-button
+                <bk-dropdown-menu
+                    trigger="click"
                     :disabled="loading || isCurPipelineLocked"
-                    :icon="loading ? 'loading' : ''"
-                    outline
-                    v-perm="{
-                        hasPermission: canExecute,
-                        disablePermissionApi: true,
-                        permissionData: {
-                            projectId,
-                            resourceType: 'pipeline',
-                            resourceCode: pipelineId,
-                            action: RESOURCE_ACTION.EXECUTE
-                        }
-                    }"
-                    @click="handleClick"
                 >
-                    {{ $t("history.reBuild") }}
-                </bk-button>
+                    <div
+                        class="rebuild-dropdown-trigger"
+                        slot="dropdown-trigger"
+                    >
+                        <i
+                            v-if="loading"
+                            class="devops-icon icon-circle-2-1 spin-icon"
+                        />
+                        <span>{{ $t("history.reBuild") }}</span>
+                        <i class="bk-icon icon-angle-down"></i>
+                    </div>
+                    <ul
+                        class="rebuild-dropdown-content"
+                        slot="dropdown-content"
+                    >
+                        <li
+                            :class="['dropdown-item', {
+                                'disabled': loading || isCurPipelineLocked
+                            }]"
+                            v-perm="{
+                                hasPermission: canExecute,
+                                disablePermissionApi: true,
+                                permissionData: {
+                                    projectId,
+                                    resourceType: 'pipeline',
+                                    resourceCode: pipelineId,
+                                    action: RESOURCE_ACTION.EXECUTE
+                                }
+                            }"
+                            @click="handleClick('reBuild')"
+                        >
+                            {{ $t("history.reBuild") }}
+                            <bk-popover
+                                :z-index="3000"
+                            >
+                                <i class="bk-icon icon-info-circle" />
+                                <template slot="content">
+                                    <p>{{ $t('history.reBuildTips1') }}</p>
+                                    <p>{{ $t('history.reBuildTips2') }}</p>
+                                    <p>{{ $t('history.reBuildTips3') }}</p>
+                                </template>
+                            </bk-popover>
+                        </li>
+                        <li
+                            :class="['dropdown-item', {
+                                'disabled': loading || isCurPipelineLocked
+                            }]"
+                            v-perm="{
+                                hasPermission: canExecute,
+                                disablePermissionApi: true,
+                                permissionData: {
+                                    projectId,
+                                    resourceType: 'pipeline',
+                                    resourceCode: pipelineId,
+                                    action: RESOURCE_ACTION.EXECUTE
+                                }
+                            }"
+                            @click="handleClick('rePlay')"
+                        >
+                            {{ $t("history.rePlay") }}
+                            <bk-popover
+                                :z-index="3000"
+                            >
+                                <i class="bk-icon icon-info-circle" />
+                                <template slot="content">
+                                    <p>{{ $t('history.rePlayTips1') }}</p>
+                                    <p>{{ $t('history.rePlayTips2') }}</p>
+                                    <p>{{ $t('history.rePlayTips3') }}</p>
+                                </template>
+                            </bk-popover>
+                        </li>
+                    </ul>
+                </bk-dropdown-menu>
                 <span class="exec-deatils-operate-divider"></span>
             </template>
             <bk-button
@@ -164,15 +223,11 @@
             }
         },
         methods: {
-            ...mapActions('pipelines', ['requestRetryPipeline', 'requestTerminatePipeline']),
-            async handleClick () {
+            ...mapActions('pipelines', ['requestRetryPipeline', 'requestTerminatePipeline', 'requestRePlayPipeline']),
+            async handleCancel () {
                 try {
                     this.loading = true
-                    if (this.isRunning) {
-                        await this.stopExecute(this.execDetail?.id)
-                    } else {
-                        await this.retry(this.execDetail?.id)
-                    }
+                    await this.stopExecute(this.execDetail?.id)
                 } catch (err) {
                     this.handleError(err, {
                         projectId: this.$route.params.projectId,
@@ -182,11 +237,32 @@
                     this.loading = false
                 }
             },
-            async retry (buildId, goDetail = false) {
+            async handleClick (type = 'reBuild') {
+                const title = type === 'reBuild' ? this.$t('history.reBuildConfirmTips') : this.$t('history.rePlayConfirmTips')
+                this.$bkInfo({
+                    title,
+                    confirmLoading: true,
+                    confirmFn: async () => {
+                        try {
+                            this.loading = true
+                            await this.retry(type, this.execDetail?.id)
+                            return true
+                        } catch (err) {
+                            this.handleError(err, {
+                                projectId: this.$route.params.projectId,
+                                resourceCode: this.$route.params.pipelineId,
+                                action: this.$permissionResourceAction.EXECUTE
+                            })
+                            this.loading = false
+                        }
+                    }
+                })
+            },
+            async retry (type = 'reBuild', buildId, goDetail = false) {
                 const { projectId, pipelineId } = this.$route.params
-
+                const retryFn = type === 'reBuild' ? this.requestRetryPipeline : this.requestRePlayPipeline
                 // 请求执行构建
-                const res = await this.requestRetryPipeline({
+                const res = await retryFn({
                     ...this.$route.params,
                     buildId
                 })
@@ -277,5 +353,53 @@
         padding-right: 24px;
     }
   }
+  .rebuild-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #c4c6cc;
+    height: 32px;
+    font-size: 14px;
+    border-radius: 2px;
+    padding: 0 15px;
+    color: #63656E;
+    &:hover {
+        cursor: pointer;
+        border-color: #979ba5;
+    }
+    .icon-angle-down {
+        margin-left: 5px;
+        font-size: 16px;
+    }
+    .spin-icon {
+        margin-right: 5px;
+        color: #458bff;
+        z-index: 2000;
+    }
+  }
+  .rebuild-dropdown-content {
+    .dropdown-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        height: 32px;
+        line-height: 32px;
+        font-size: 14px;
+
+        &:hover {
+            background-color: #f0f1f5;
+            color: #3a84ff;
+        }
+        &.disabled {
+            cursor: not-allowed;
+            color: #dcdee5;
+        }
+        .icon-info-circle {
+            margin-left: 5px;
+            font-size: 12px;
+        }
+    }
+  }
 }
 </style>
diff --git a/src/frontend/devops-pipeline/src/store/modules/pipelines/build.js b/src/frontend/devops-pipeline/src/store/modules/pipelines/build.js
@@ -291,6 +291,14 @@ const actions = {
         return ajax.get(`artifactory/api/user/artifactories/${projectId}/${artifactoryType}/show?path=${path}`).then(response => {
             return response.data
         })
+    },
+    /**
+     * 重放流水线
+     */
+    requestRePlayPipeline ({ commit, state, dispatch }, { projectId, pipelineId, buildId }) {
+        return ajax.post(`${prefix}${projectId}/${pipelineId}/${buildId}/replayByBuild`).then(response => {
+            return response.data
+        })
     }
 }
 

diff --git a/src/frontend/locale/pipeline/en-US.json b/src/frontend/locale/pipeline/en-US.json
@@ -620,7 +620,16 @@
     "copyToCustomArtifactory": "Copy to custom artifactory",
     "downloading": "Downloading ",
     "copySuc": " Copy {0} to custom artifactory successfully",
-    "buildMsg": "Build Message"
+    "buildMsg": "Build Message",
+    "replay": "Re-play",
+    "reBuildTips1": "When rebuilding, the execution will be queried with the same trigger parameters, and:",
+    "reBuildTips2": "- The build ID remains unchanged",
+    "reBuildTips3": "- The pipeline version used is based on the initial trigger",
+    "rePlayTips1": "After replaying, a new build will be initiated with the same trigger parameters:",
+    "rePlayTips2": "- A new build ID will be generated",
+    "rePlayTips3": "- The latest pipeline version will be used to run",
+    "reBuildConfirmTips": "Are you sure you want to initiate a rebuild?",
+    "rePlayConfirmTips": "Are you sure you want to replay the event for this pipeline?"
   },
   "preview": {
     "build": "Build",

diff --git a/src/frontend/locale/pipeline/zh-CN.json b/src/frontend/locale/pipeline/zh-CN.json
@@ -615,7 +615,16 @@
     "copyToCustomArtifactory": "复制至自定义仓库",
     "downloading": "正在下载",
     "copySuc": "复制{0}至自定义仓库成功",
-    "buildMsg": "构建信息"
+    "buildMsg": "构建信息",
+    "rePlay": "重放事件",
+    "reBuildTips1": "重新构建时，将以同样的触发参数查询执行，且:",
+    "reBuildTips2": "- build id 不变",
+    "reBuildTips3": "- 使用的流水线版本以首次触发为准",
+    "rePlayTips1": "重放后，将以同样的触发参数启动一次新的构建：",
+    "rePlayTips2": "- 生成新的 build id",
+    "rePlayTips3": "- 使用最新的流水线版本运行",
+    "reBuildConfirmTips": "确定发起重新构建吗？",
+    "rePlayConfirmTips": "确定针对此流水线重放事件吗？"
   },
   "preview": {
     "build": "构建",