feat: 分发任务中以制品维度来记录详细日志，前端相关改造 #1675

src/frontend/devops-repository/src/store/actions/nodeManage.js

@@ -129,20 +129,25 @@ export default {
         )
     },
     // 计划执行日志制品详情
-    getPlanLogPackageList (_, { id, status, packageName, repoName, clusterName, path, current = 1, limit = 10 }) {
+    getPlanLogPackageList (_, { id, status, artifactName, repoName, clusterName, current = 1, limit = 10 }) {
         return Vue.prototype.$ajax.get(
             `${prefix}/task/record/detail/page/${id}`,
             {
                 params: {
                     pageNumber: current,
                     pageSize: limit,
                     status: status || undefined,
-                    packageName: packageName || undefined,
+                    artifactName: artifactName || undefined,
                     repoName: repoName || undefined,
-                    clusterName: clusterName || undefined,
-                    path: path || undefined
+                    clusterName: clusterName || undefined
                 }
             }
         )
+    },
+    // 计划执行任务总览
+    getPlanLogDetailOverview (_, { id }) {
+        return Vue.prototype.$ajax.get(
+            `${prefix}/task/record/overview/${id}`
+        )
     }
 }

src/frontend/devops-repository/src/store/publicEnum.js

@@ -153,3 +153,18 @@ export const specialRepoEnum = [
     'report',
     'custom'
 ]
+
+// 分发计划的任务日志详情页数量显示
+export const planLogEnum = {
+    total: '同步总数量',
+    success: '成功数量',
+    failed: '失败数量',
+    conflict: '冲突数量'
+}
+
+// 分发计划冲突策略
+export const conflictStrategyEnum = {
+    SKIP: '跳过冲突',
+    OVERWRITE: '替换制品',
+    FAST_FAIL: '终止同步'
+}

src/frontend/devops-repository/src/views/planManage/createPlan/index.vue

@@ -119,6 +119,21 @@
                     :disabled="disabled">
                 </bk-input>
             </bk-form-item>
+            <bk-form-item>
+                <bk-checkbox v-model="planForm.record" :disabled="disabled">{{ $t('planRecordAllLog') }}</bk-checkbox>
+            </bk-form-item>
+            <bk-form-item property="recordReserveDays" error-display-type="normal">
+                <span>{{ $t('planLogReserveDays') }}</span>
+                <bk-input
+                    v-model="planForm.recordReserveDays"
+                    class="ml10 w180"
+                    type="number"
+                    :max="60"
+                    :min="1"
+                    :disabled="disabled"
+                    :placeholder="$t('planRecordReserveDaysInfo')">
+                </bk-input>
+            </bk-form-item>
             <bk-form-item v-if="!disabled">
                 <bk-button @click="$emit('close')">{{$t('cancel')}}</bk-button>
                 <bk-button class="ml10" theme="primary" :loading="planForm.loading" @click="save">{{$t('confirm')}}</bk-button>
@@ -168,7 +183,9 @@
                     remoteClusterIds: [],
                     creator: '',
                     created_time: '',
-                    description: ''
+                    description: '',
+                    record: true,
+                    recordReserveDays: 30
                 },
                 rules: {
                     name: [
@@ -218,6 +235,23 @@
                             message: this.$t('pleaseSelect') + this.$t('space') + this.$t('targetNode'),
                             trigger: 'blur'
                         }
+                    ],
+                    recordReserveDays: [
+                        {
+                            required: true,
+                            message: this.$t('planRecordReserveDaysInfo'),
+                            trigger: 'blur'
+                        },
+                        {
+                            validator: (value) => {
+                                if (!Number(value) && isNaN(value)) {
+                                    this.planForm.recordReserveDays = ''
+                                }
+                                return !isNaN(value)
+                            },
+                            message: this.$t('planRecordReserveDaysInfo'),
+                            trigger: 'blur'
+                        }
                     ]
                 },
                 replicaTaskObjects: []
@@ -289,7 +323,9 @@
                             conflictStrategy,
                             executionStrategy,
                             executionPlan: { executeTime, cronExpression }
-                        }
+                        },
+                        record,
+                        recordReserveDays
                     },
                     objects
                 }) => {
@@ -312,7 +348,9 @@
                         remoteClusterIds: this.checkClusterExist(remoteClusters.map(v => v.id)),
                         description,
                         createdBy,
-                        createdDate
+                        createdDate,
+                        record: record || true,
+                        recordReserveDays: recordReserveDays || 60
                     }
                     this.replicaTaskObjects = objects
                 }).finally(() => {
@@ -376,7 +414,9 @@
                     },
                     remoteClusterIds: this.planForm.remoteClusterIds,
                     enabled: true,
-                    description: this.planForm.description
+                    description: this.planForm.description,
+                    record: this.planForm.record,
+                    recordReserveDays: Number(this.planForm.recordReserveDays)
                 }
                 const request = this.routeName === 'createPlan'
                     ? this.createPlan({ body })

src/frontend/devops-repository/src/views/planManage/logDetail.vue

@@ -1,6 +1,22 @@
 <template>
     <main class="log-detail-container" v-bkloading="{ isLoading }">
         <div class="mr20 mt10 log-package-seach flex-align-center">
+            <div v-if="showOverviewCount" class="flex-align-center ml20" style="margin-right:auto;">
+                <div v-for="(value,key) in countList" :key="key" class="mr30 ">
+                    <span>
+                        {{$t(`planLogEnum.${key}`)}}
+                    </span>
+                    <span>: </span>
+                    <span class="log-count"
+                        v-bk-tooltips="{
+                            content: $t(`planLogEnum.${key}`) + ': ' + value,
+                            placements: ['top'],
+                            disabled: ((value + '').length || 0) < 6
+                        }">
+                        {{value}}
+                    </span>
+                </div>
+            </div>
             <bk-search-select
                 class="search-group"
                 clearable
@@ -40,28 +56,40 @@
                     <span class="ml5">{{ row.localRepoName }}</span>
                 </template>
             </bk-table-column>
+            <bk-table-column :label="$t('artifactName')" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.artifactName || row.packageKey || row.path || '/' }}</template>
+            </bk-table-column>
+            <bk-table-column :label="$t('version')" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.version || (row.versions || ['/']).join('、') }}</template>
+            </bk-table-column>
+            <bk-table-column :label="$t('size')" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.size ? convertFileSize(row.size > 0 ? row.size : 0 ) : '/'}}</template>
+            </bk-table-column>
+            <bk-table-column label="sha256" show-overflow-tooltip>
+                <template #default="{ row }">{{ row.sha256 || '/' }}</template>
+            </bk-table-column>
             <bk-table-column :label="$t('syncStatus')" width="90">
                 <template #default="{ row }">
                     <div class="status-sign" :class="row.status" :data-name="$t(`asyncPlanStatusEnum.${row.status}`) || $t('notExecuted')"></div>
                 </template>
             </bk-table-column>
-            <template v-if="logDetail.replicaType === 'REAL_TIME' || logDetail.replicaObjectType !== 'REPOSITORY'">
-                <bk-table-column :label="$t('artifactName') + '/' + $t('filePath')" show-overflow-tooltip>
-                    <template #default="{ row }">{{ row.packageKey || row.path || '/' }}</template>
-                </bk-table-column>
-                <bk-table-column :label="$t('version')" show-overflow-tooltip>
-                    <template #default="{ row }">{{ (row.versions || ['/']).join('、') }}</template>
-                </bk-table-column>
-            </template>
+            <bk-table-column :label="$t('conflictStrategy')" width="150">
+                <template #default="{ row }">
+                    <span>{{row.conflictStrategy ? $t(`conflictStrategyEnum.${row.conflictStrategy}`) : '/'}}</span>
+                </template>
+            </bk-table-column>
             <bk-table-column :label="$t('startTime')" width="150">
                 <template #default="{ row }">{{formatDate(row.startTime)}}</template>
             </bk-table-column>
             <bk-table-column :label="$t('endTime')" width="150">
                 <template #default="{ row }">{{formatDate(row.endTime)}}</template>
             </bk-table-column>
-            <bk-table-column :label="$t('successNum')" prop="success"></bk-table-column>
-            <bk-table-column :label="$t('skipNum')" prop="skip"></bk-table-column>
-            <bk-table-column :label="$t('failNum')" prop="failed"></bk-table-column>
+            <!-- 历史数据因为统计数量不存在，需要显示之前的成功数量等字段 -->
+            <template v-if="!showOverviewCount">
+                <bk-table-column :label="$t('successNum')" prop="success"></bk-table-column>
+                <bk-table-column :label="$t('skipNum')" prop="skip"></bk-table-column>
+                <bk-table-column :label="$t('failNum')" prop="failed"></bk-table-column>
+            </template>
             <bk-table-column :label="$t('note')" show-overflow-tooltip>
                 <template #default="{ row }">{{row.errorReason || '/'}}</template>
             </bk-table-column>
@@ -82,13 +110,14 @@
 </template>
 <script>
     import { mapGetters, mapActions } from 'vuex'
-    import { formatDate } from '@repository/utils'
-    import { asyncPlanStatusEnum } from '@repository/store/publicEnum'
+    import { formatDate, convertFileSize } from '@repository/utils'
+    import { asyncPlanStatusEnum, planLogEnum } from '@repository/store/publicEnum'
     export default {
         name: 'logDetail',
         data () {
             return {
                 asyncPlanStatusEnum,
+                planLogEnum,
                 isLoading: false,
                 logDetail: {},
                 pkgList: [],
@@ -99,7 +128,16 @@
                     current: 1,
                     limit: 20,
                     limitList: [10, 20, 40]
-                }
+                },
+                // 分发计划日志详情的同步数量
+                countList: {
+                    total: 0,
+                    success: 0,
+                    failed: 0,
+                    conflict: 0
+                },
+                // 是否需要显示日志详情的同步数量相关字段
+                showOverviewCount: false
             }
         },
         computed: {
@@ -111,8 +149,7 @@
                 return [
                     { name: this.$t('nodeName'), id: 'clusterName' },
                     { name: this.$t('repoName'), id: 'repoName' },
-                    ...(this.logDetail.replicaObjectType === 'PACKAGE' ? [{ name: this.$t('artifactName'), id: 'packageName' }] : []),
-                    ...(this.logDetail.replicaObjectType === 'PATH' ? [{ name: this.$t('filePath'), id: 'path' }] : [])
+                    { name: this.$t('artifactName'), id: 'artifactName' }
                 ]
             }
         },
@@ -132,10 +169,12 @@
                     })
                 }
             })
+            this.getPlanLogCountList()
         },
         methods: {
             formatDate,
-            ...mapActions(['getPlanLogDetail', 'getPlanLogPackageList']),
+            convertFileSize,
+            ...mapActions(['getPlanLogDetail', 'getPlanLogPackageList', 'getPlanLogDetailOverview']),
             handlerPaginationChange ({ current = 1, limit = this.pagination.limit } = {}) {
                 this.pagination.current = current
                 this.pagination.limit = limit
@@ -182,6 +221,19 @@
                     target[item.id] = item.values[0].id
                     return target
                 }, {})
+            },
+            // 获取当前分发计划执行记录中同步数量相关参数展示数据
+            getPlanLogCountList () {
+                this.getPlanLogDetailOverview({ id: this.logId }).then((res) => {
+                    // 只有在后端接口返回的数据有值时才需要展示，后端接口没有返回时则表明可能是历史数据，历史数据不展示
+                    if (res) {
+                        this.showOverviewCount = true
+                        this.countList = {
+                            total: (res?.success || 0) + (res?.failed || 0),
+                            ...res
+                        }
+                    }
+                })
             }
         }
     }
@@ -196,5 +248,15 @@
             min-width: 250px;
         }
     }
+    .log-count {
+        font-size: 14px;
+        font-weight: bold;
+        max-width: 50px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+        vertical-align: middle;
+    }
 }
 </style>