Skip to content

Commit f49fc73

Browse files
feynmxfeynmx
committed
feat(TablePreview): enhance task delay details display with popover and localization; update styles for better UX
1 parent 2c22dcb commit f49fc73

6 files changed

Lines changed: 154 additions & 8 deletions

File tree

‎packages/assets/styles/utilities.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12724,7 +12724,7 @@
1272412724
}
1272512725

1272612726
.text-muted-foreground {
12727-
color: rgb(113 113 122);
12727+
color: rgb(115 115 115);
1272812728
}
1272912729

1273012730
.hover\:bg-light:hover {
@@ -13048,4 +13048,8 @@
1304813048
background-color: oklch(0.946 0.033 307.174);
1304913049
border: 1px solid oklch(0.902 0.063 306.703);
1305013050
color: oklch(0.496 0.265 301.924);
13051+
}
13052+
13053+
.hover\:bg-fill-color-light:hover {
13054+
background-color: var(--el-fill-color-light) !important;
1305113055
}

‎packages/ldp/src/TablePreview.vue‎

Lines changed: 125 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ export default {
126126
tableStatus: '',
127127
cdcDelayTime: '',
128128
lastDataChangeTime: '',
129+
upstreamTableStatus: [],
129130
statusMap: {
130131
error: i18n.t('packages_business_table_status_error'), // 异常
131132
draft: i18n.t('packages_business_table_status_draft'), // 草稿
@@ -461,10 +462,20 @@ export default {
461462
? calcTimeUnit(res.cdcDelayTime, 2, {
462463
autoHideMs: true,
463464
})
464-
: '-'
465+
: ''
465466
this.lastDataChangeTime = res?.lastDataChangeTime
466467
? dayjs(res?.lastDataChangeTime).format('YYYY-MM-DD HH:mm:ss')
467468
: '-'
469+
this.upstreamTableStatus = res?.upstreamTableStatus?.map((item) => {
470+
item.cdcDelayTime =
471+
isNum(item.cdcDelayTime) && item.cdcDelayTime >= 0
472+
? calcTimeUnit(item.cdcDelayTime, 2, {
473+
autoHideMs: true,
474+
})
475+
: '-'
476+
477+
return item
478+
})
468479
})
469480
},
470481
getApisData() {
@@ -736,6 +747,15 @@ export default {
736747
handleCreateAPI() {
737748
this.$emit('createApi', this.connection, this.selected)
738749
},
750+
751+
handleOpenTask(item) {
752+
this.openRoute({
753+
name: item.syncType === 'migrate' ? 'MigrationMonitor' : 'TaskMonitor',
754+
params: {
755+
id: item.taskId,
756+
},
757+
})
758+
},
739759
},
740760
}
741761
</script>
@@ -816,12 +836,100 @@ export default {
816836
lastDataChangeTime || '-'
817837
}}</span></span
818838
>
819-
<span
820-
><span class="table-dec-label"
821-
>{{ $t('packages_business_cdc_delay_time') }}: </span
822-
><span class="table-dec-txt text-nowrap">{{
823-
cdcDelayTime || '-'
824-
}}</span></span
839+
840+
<span class="inline-flex align-center gap-1">
841+
<span class="table-dec-label"
842+
>{{ $t('packages_business_cdc_delay_time') }}:
843+
</span>
844+
<el-popover
845+
placement="bottom"
846+
trigger="hover"
847+
popper-style="min-width: 300px;max-width: 380px;width: auto;"
848+
:disabled="!upstreamTableStatus.length || !cdcDelayTime"
849+
>
850+
<template #reference
851+
><span
852+
class="table-dec-txt text-nowrap inline-flex align-center gap-0.5"
853+
:class="{
854+
'color-primary cursor-pointer':
855+
cdcDelayTime && upstreamTableStatus.length,
856+
}"
857+
>
858+
<el-icon v-if="cdcDelayTime"><i-lucide-clock /></el-icon
859+
>{{ cdcDelayTime || '-' }}</span
860+
></template
861+
>
862+
<div>
863+
<div class="flex align-center gap-1">
864+
<div class="lh-base">
865+
<div class="fw-sub font-color-dark">
866+
{{ $t('packages_ldp_task_delay_detail') }}
867+
</div>
868+
<div class="font-color-sslight text-xs">
869+
{{ $t('packages_ldp_task_delay_detail_tip') }}
870+
</div>
871+
</div>
872+
<el-tooltip :hide-after="0" :teleported="false">
873+
<template #content>
874+
<div class="fw-sub fs-7">
875+
{{ $t('packages_ldp_task_delay_detail_logic') }}
876+
</div>
877+
<ul
878+
class="ml-4 list-disc flex flex-column gap-0.5 text-xs"
879+
>
880+
<li class="list-disc">
881+
{{
882+
$t('packages_ldp_task_delay_detail_logic_tip1')
883+
}}
884+
</li>
885+
<li class="list-disc">
886+
{{
887+
$t('packages_ldp_task_delay_detail_logic_tip2')
888+
}}
889+
</li>
890+
</ul>
891+
</template>
892+
<div
893+
class="ml-auto flex align-center justify-center p-2 bg-gray-100 dark:bg-white/15 rounded-pill"
894+
>
895+
<el-icon :size="16">
896+
<i-lucide-info />
897+
</el-icon>
898+
</div>
899+
</el-tooltip>
900+
</div>
901+
<el-divider class="my-3" />
902+
<div class="mx-n3">
903+
<el-scrollbar :max-height="280" class="px-3">
904+
<div class="flex flex-column gap-2">
905+
<div
906+
v-for="item in upstreamTableStatus"
907+
:key="item"
908+
class="flex align-center gap-2 hover:bg-fill-color-light rounded-lg p-2 cursor-pointer task-item border"
909+
@click="handleOpenTask(item)"
910+
>
911+
{{ item.taskName }}
912+
<el-icon
913+
class="external-link-icon text-muted-foreground"
914+
>
915+
<i-lucide-external-link />
916+
</el-icon>
917+
<el-tag
918+
size="small"
919+
class="px-1 ml-auto"
920+
:type="item.onDelayPath ? 'primary' : 'info'"
921+
>
922+
<span class="flex align-center gap-0.5">
923+
<el-icon><i-lucide-clock /></el-icon>
924+
{{ item.cdcDelayTime }}
925+
</span>
926+
</el-tag>
927+
</div>
928+
</div>
929+
</el-scrollbar>
930+
</div>
931+
</div>
932+
</el-popover></span
825933
>
826934
</template>
827935
</div>
@@ -1483,4 +1591,14 @@ export default {
14831591
grid-gap: 16px;
14841592
}
14851593
}
1594+
1595+
.task-item {
1596+
.external-link-icon {
1597+
opacity: 0;
1598+
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
1599+
}
1600+
&:hover .external-link-icon {
1601+
opacity: 1;
1602+
}
1603+
}
14861604
</style>

‎packages/ldp/src/locale/lang/en.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,12 @@ export default {
6060
'You have already copied some tables, but you can still select more. Newly selected tables will be added to the existing list.',
6161
packages_ldp_fdm_create_task_has_expression:
6262
'You have selected tables by regex matching and cannot select more. Please use the Data Copy feature to continue copying tables.',
63+
packages_ldp_task_delay_detail: 'Task Delay Details',
64+
packages_ldp_task_delay_detail_tip:
65+
'Displays all tasks involved in this model and their corresponding delay durations',
66+
packages_ldp_task_delay_detail_logic: 'Calculation Logic',
67+
packages_ldp_task_delay_detail_logic_tip1:
68+
'Maximum data delay represents the longest time required for data changes generated in the source systems to be written into the model, after passing through all related synchronization and processing tasks.',
69+
packages_ldp_task_delay_detail_logic_tip2:
70+
'This metric aggregates the incremental delays across all upstream tables and their associated task pipelines involved in building the model, and takes the maximum value to indicate how late the most recently updated data in the model may be.',
6371
}

‎packages/ldp/src/locale/lang/zh-CN.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,11 @@ export default {
5454
'您已经复制过部分表，但您也可以继续选择表，新选择表将追加到原表列表中',
5555
packages_ldp_fdm_create_task_has_expression:
5656
'您已经选择了按正则表达式匹配表，无法继续选择表，请在通过数据复制功能继续复制表',
57+
packages_ldp_task_delay_detail: '任务延迟详情',
58+
packages_ldp_task_delay_detail_tip: '显示所有参与该模型的任务及其延迟时间',
59+
packages_ldp_task_delay_detail_logic: '计算逻辑说明',
60+
packages_ldp_task_delay_detail_logic_tip1:
61+
'最大数据延迟表示当前模型中，数据从源系统产生变更开始，经过所有参与的同步与处理任务，最终写入该模型所需的最长时间。',
62+
packages_ldp_task_delay_detail_logic_tip2:
63+
'该指标会综合计算构建此模型所涉及的所有上游表及其任务链路中的增量延迟，并取其中的最大值，反映模型中最晚更新的数据可能滞后的时间',
5764
}

‎packages/ldp/src/locale/lang/zh-TW.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,11 @@ export default {
5454
'您已經複製過部分表，但您也可以繼續選擇表，新選擇表將追加到原表列表中',
5555
packages_ldp_fdm_create_task_has_expression:
5656
'您已經選擇了按正則表達式匹配表，無法繼續選擇表，請在通過數據複製功能繼續複製表',
57+
packages_ldp_task_delay_detail: '任務延遲詳情',
58+
packages_ldp_task_delay_detail_tip: '顯示所有參與該模型的任務及其延遲時間',
59+
packages_ldp_task_delay_detail_logic: '計算邏輯說明',
60+
packages_ldp_task_delay_detail_logic_tip1:
61+
'最大數據延遲表示當前模型中，數據從源系統產生變更開始，經過所有參與的同步與處理任務，最終寫入該模型所需的最長時間。',
62+
packages_ldp_task_delay_detail_logic_tip2:
63+
'該指標會綜合計算構建此模型所涉及的所有上游表及其任務鏈路中的增量延遲，並取其中的最大值，反映模型中最晚更新的數據可能滯後的時間',
5764
}

‎packages/types/src/daas-components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ declare module 'vue' {
107107
ILucideDatabase: typeof import('~icons/lucide/database')['default']
108108
ILucideDownload: typeof import('~icons/lucide/download')['default']
109109
ILucideEllipsis: typeof import('~icons/lucide/ellipsis')['default']
110+
ILucideExternalLink: typeof import('~icons/lucide/external-link')['default']
110111
ILucideFileKey: typeof import('~icons/lucide/file-key')['default']
111112
ILucideFilePen: typeof import('~icons/lucide/file-pen')['default']
112113
ILucideFileText: typeof import('~icons/lucide/file-text')['default']
@@ -270,6 +271,7 @@ declare global {
270271
const ILucideDatabase: typeof import('~icons/lucide/database')['default']
271272
const ILucideDownload: typeof import('~icons/lucide/download')['default']
272273
const ILucideEllipsis: typeof import('~icons/lucide/ellipsis')['default']
274+
const ILucideExternalLink: typeof import('~icons/lucide/external-link')['default']
273275
const ILucideFileKey: typeof import('~icons/lucide/file-key')['default']
274276
const ILucideFilePen: typeof import('~icons/lucide/file-pen')['default']
275277
const ILucideFileText: typeof import('~icons/lucide/file-text')['default']

0 commit comments

Comments
 (0)