feature: 定时任务查看态增加对cron表达式注解指引的视觉效果 TencentBlueKing#160

src/frontend/src/css/app.css

@@ -58,6 +58,10 @@
     animation: rotate-loading 1s linear infinite;
 }
 
+.tips {
+    border-bottom: 1px dashed #c4c6cc;
+}
+
 .__cov-progress {
     z-index: 1000 !important;
 }

src/frontend/src/css/bk-patch.css

@@ -193,6 +193,11 @@
 .tippy-tooltip {
     z-index: 1;
 
+    .tippy-arrow {
+        width: 0;
+        height: 0;
+    }
+
     .tippy-content {
         padding: 0;
     }

src/frontend/src/domain/model/crontab/crontab.js

@@ -30,6 +30,7 @@ import I18n from '@/i18n';
 import {
     prettyDateTimeFormat,
 } from '@utils/assist';
+import Translate from '@utils/cron/translate';
 
 const STATUS_NOTSTARTED = 0;
 const STATUS_SUCCESS = 1;
@@ -84,35 +85,101 @@ export default class Crontab {
         this.isStatictisLoading = true;
     }
 
+    /**
+     * @desc 执行策略类型（单次执行，周期执行）
+     * @returns { String }
+     */
     get executeStrategy () {
         if (this.cronExpression) {
             return 'period';
         }
         return 'once';
     }
 
+    /**
+     * @desc 执行策略类型显示文本
+     * @returns { String }
+     */
     get executeStrategyText () {
         if (this.cronExpression) {
             return I18n.t('周期执行');
         }
         return I18n.t('单次执行');
     }
 
+    /**
+     * @desc 执行事件tips
+     * @returns { String }
+     */
+    get executeTimeTips () {
+        if (this.cronExpression) {
+            const [
+                month,
+                dayOfMonth,
+                dayOfWeek,
+                hour,
+                minute,
+            ] = Translate(this.cronExpression);
+            let text = month;
+
+            if (dayOfMonth) {
+                text += dayOfMonth;
+            }
+            if (dayOfWeek) {
+                if (month && dayOfWeek) {
+                    if (dayOfMonth) {
+                        text += '以及当月';
+                    } else {
+                        text += '的';
+                    }
+                }
+
+                text += dayOfWeek;
+            }
+
+            if (hour) {
+                if (dayOfMonth || dayOfWeek) {
+                    text += '的';
+                }
+                text += hour;
+            }
+            text += minute;
+            return text;
+        }
+        return this.executeTime;
+    }
+
+    /**
+     * @desc 执行状态的标记 ICON
+     * @returns { String }
+     */
     get statusIconType () {
         return Crontab.STATUS_ICON_TYPE[this.lastExecuteStatus];
     }
 
+    /**
+     * @desc 执行状态展示文本
+     * @returns { String }
+     */
     get statusText () {
         return Crontab.STATUS_MAP[this.lastExecuteStatus];
     }
 
+    /**
+     * @desc 定时任务的执行策略
+     * @returns { String }
+     */
     get policeText () {
         if (this.cronExpression) {
             return this.cronExpression;
         }
         return this.executeTime.slice(0, 19);
     }
 
+    /**
+     * @desc 周期执行成功率显示文本
+     * @returns { String }
+     */
     get successRateText () {
         if (!this.failCount && !this.totalCount) {
             return '--';
@@ -141,10 +208,35 @@ export default class Crontab {
         return `<span style="${getStyle(rate)}">${rate}%</span>`;
     }
 
+    /**
+     * @desc 周期执行成功率 tips
+     * @returns { Array }
+     */
+    get successRateTips () {
+        const tips = `
+            <p>
+                ${I18n.t('最近')}<span style="padding: 0 0.2em;">${this.totalCount}</span>${I18n.t('次')}
+                ${I18n.t('有')}<span style="padding: 0 0.2em;">${this.failCount}</span>${I18n.t('次失败')}:
+            </p>
+        `;
+        return this.lastFailRecord.slice(0, 5).reduce((result, item) => {
+            result = `${result}<p>${item}</p>`;
+            return result;
+        }, tips);
+    }
+
+    /**
+     * @desc 周期执行成功率数据为空
+     * @returns { Boolean }
+     */
     get isRateEmpty () {
         return !this.failCount || !this.totalCount;
     }
 
+    /**
+     * @desc 最新执行失败记录
+     * @returns { Array }
+     */
     get lastFailRecordList () {
         const len = this.lastFailRecord.length;
         const MAX_LEN = 5;
@@ -155,19 +247,10 @@ export default class Crontab {
         return lastFailRecords.map(item => prettyDateTimeFormat(item));
     }
 
-    get successRateTips () {
-        const tips = `
-            <p>
-                ${I18n.t('最近')}<span style="padding: 0 0.2em;">${this.totalCount}</span>${I18n.t('次')}
-                ${I18n.t('有')}<span style="padding: 0 0.2em;">${this.failCount}</span>${I18n.t('次失败')}:
-            </p>
-        `;
-        return this.lastFailRecord.slice(0, 5).reduce((result, item) => {
-            result = `${result}<p>${item}</p>`;
-            return result;
-        }, tips);
-    }
-
+    /**
+     * @desc 更多失败记录
+     * @returns { Boolean }
+     */
     get showMoreFailAcion () {
         return this.lastFailRecord.length > 0;
     }

src/frontend/src/views/cron-job/list/components/detail.vue

@@ -26,15 +26,22 @@
 -->
 
 <template>
-    <detail-layout mode="see" class="detail-layout-wrapper" v-bkloading="{ isLoading }">
+    <detail-layout
+        mode="see"
+        class="detail-layout-wrapper"
+        v-bkloading="{ isLoading }">
         <detail-item :label="$t('cron.任务名称：')">
             {{ data.name }}
         </detail-item>
         <detail-item :label="$t('cron.执行策略：')">
             {{ data.executeStrategyText }}
         </detail-item>
         <detail-item :label="$t('cron.执行时间：')">
-            {{ data.policeText }}
+            <span
+                class="tips"
+                v-bk-tooltips.right="data.executeTimeTips">
+                {{ data.policeText }}
+            </span>
         </detail-item>
         <detail-item v-if="data.endTime" :label="$t('cron.结束时间：')">
             {{ data.endTime }}
@@ -118,6 +125,7 @@
                 currentPlanVariableList: [],
             };
         },
+
         created () {
             Promise.all([
                 this.fetchData(),

src/frontend/src/views/cron-job/list/index.vue

@@ -66,7 +66,10 @@
                 align="left"
                 show-overflow-tooltip>
                 <template slot-scope="{ row }">
-                    <auth-component :permission="row.canManage" :resource-id="row.id" auth="cron/view">
+                    <auth-component
+                        :permission="row.canManage"
+                        :resource-id="row.id"
+                        auth="cron/view">
                         <span class="time-task-name" @click="handleViewDetail(row)">
                             {{ row.name }}
                         </span>
@@ -108,7 +111,15 @@
                 :label="$t('cron.执行策略.colHead')"
                 prop="policeText"
                 key="policeText"
-                align="left" />
+                align="left">
+                <template slot-scope="{ row }">
+                    <span
+                        class="tips"
+                        v-bk-tooltips.right="row.executeTimeTips">
+                        {{ row.policeText }}
+                    </span>
+                </template>
+            </bk-table-column>
             <bk-table-column
                 v-if="allRenderColumnMap.creator"
                 :label="$t('cron.创建人')"
@@ -217,7 +228,11 @@
                             {{ $t('cron.删除') }}
                         </auth-button>
                     </jb-popover-confirm>
-                    <bk-button text @click="handleHistoryRecord(row)">{{ $t('cron.执行记录') }}</bk-button>
+                    <bk-button
+                        text
+                        @click="handleHistoryRecord(row)">
+                        {{ $t('cron.执行记录') }}
+                    </bk-button>
                 </template>
             </bk-table-column>
             <bk-table-column type="setting">
@@ -228,17 +243,27 @@
                     @setting-change="handleSettingChange" />
             </bk-table-column>
         </render-list>
-        <jb-sideslider :is-show.sync="showOperation" v-bind="operationSidesliderInfo" :width="960">
+        <jb-sideslider
+            :is-show.sync="showOperation"
+            v-bind="operationSidesliderInfo"
+            :width="960">
             <task-operation
                 v-if="showOperation"
                 :id="editTaskId"
                 :data="cronJobDetailInfo"
                 @on-change="handleCronChange" />
         </jb-sideslider>
-        <jb-sideslider :is-show.sync="showDetail" :title="$t('cron.定时任务详情')" :width="960">
+        <jb-sideslider
+            :is-show.sync="showDetail"
+            :title="$t('cron.定时任务详情')"
+            :width="960">
             <task-detail :data="cronJobDetailInfo" />
             <template #footer>
-                <bk-button theme="primary" @click="handleToggelEdit">{{ $t('cron.编辑') }}</bk-button>
+                <bk-button
+                    theme="primary"
+                    @click="handleToggelEdit">
+                    {{ $t('cron.编辑') }}
+                </bk-button>
             </template>
         </jb-sideslider>
         <jb-sideslider
@@ -263,9 +288,7 @@
     import I18n from '@/i18n';
     import TimeTaskService from '@service/time-task';
     import NotifyService from '@service/notify';
-    import {
-        listColumnsCache,
-    } from '@utils/cache-helper';
+    import { listColumnsCache } from '@utils/cache-helper';
     import ListActionLayout from '@components/list-action-layout';
     import RenderList from '@components/render-list';
     import JbSearchSelect from '@components/jb-search-select';