Tap 9276 mdm

packages/assets/styles/utilities.scss

@@ -12724,7 +12724,7 @@
 }
 
 .text-muted-foreground {
-  color: rgb(113 113 122);
+  color: rgb(115 115 115);
 }
 
 .hover\:bg-light:hover {
@@ -13048,4 +13048,8 @@
   background-color: oklch(0.946 0.033 307.174);
   border: 1px solid oklch(0.902 0.063 306.703);
   color: oklch(0.496 0.265 301.924);
+}
+
+.hover\:bg-fill-color-light:hover {
+  background-color: var(--el-fill-color-light) !important;
 }

packages/business/src/components/create-connection/SceneDialog.vue

@@ -81,11 +81,8 @@ export default {
             'MongoDB Atlas',
             'PostgreSQL',
             'Clickhouse',
-            'Elasticsearch',
-            'Dummy',
             'Kafka-Enhanced',
             'Doris',
-            'BigQuery',
           ],
         },
         {
@@ -959,7 +956,7 @@ export default {
           <div
             v-for="item in specialScene[currentScene]"
             :key="item.key"
-            class="connector-item rounded-lg p-3 overflow-hidden bg-card dark:bg-white/10 clickable"
+            class="connector-item rounded-xl p-3 overflow-hidden bg-card dark:bg-white/10 clickable"
             @click="handleSelectSpecial(item)"
           >
             <div class="flex gap-3">
@@ -982,7 +979,7 @@ export default {
             <div
               v-for="item in demoDatabase"
               :key="`demo-${item.pdkId}`"
-              class="connector-item rounded-lg p-3 overflow-hidden bg-white clickable"
+              class="connector-item rounded-xl p-3 overflow-hidden bg-white clickable"
               :class="{ active: item.pdkId === selected.pdkId }"
               @click="handleSelect(item, true)"
             >
@@ -1012,7 +1009,7 @@ export default {
           <div
             v-for="item in sceneDatabases"
             :key="item.type"
-            class="connector-item rounded-lg p-3 overflow-hidden bg-card dark:bg-white/10 clickable"
+            class="connector-item rounded-xl p-3 overflow-hidden bg-card dark:bg-white/10 clickable"
             :class="{ active: item.pdkId === selected.pdkId }"
             @click="handleSelect(item)"
           >
@@ -1039,11 +1036,28 @@ export default {
                     class="ml-auto color-success"
                     >verified</VIcon
                   >
-                  <ElTag
+                  <el-tooltip
                     v-else-if="item.qcType"
-                    class="text-uppercase ml-auto px-1 connector-item-tag"
-                    >{{ item.qcType }}
-                  </ElTag>
+                    :hide-after="0"
+                    :enterable="false"
+                    :content="
+                      $t(
+                        item.qcType === 'Beta'
+                          ? 'public_connector_beta_tip'
+                          : 'public_connector_alpha_tip',
+                      )
+                    "
+                  >
+                    <ElTag
+                      :type="item.qcType === 'Beta' ? 'primary' : 'warning'"
+                      class="text-uppercase ml-auto px-1 connector-item-tag tag-amber"
+                    >
+                      <span class="flex align-center gap-0.5">
+                        <el-icon><i-lucide-badge-alert /></el-icon>
+                        {{ item.qcType }}
+                      </span>
+                    </ElTag>
+                  </el-tooltip>
                 </div>
               </div>
             </div>

packages/business/src/locale/lang/en.js

@@ -1740,4 +1740,8 @@ export default {
     'If a task or data source with the same name exists, cancel the import.',
   packages_business_import_reuse_existing_tip:
     'If a task name conflict, replace the task; if a data source name conflict, reuse the existing data source in the system.',
+  public_connector_beta_tip:
+    'Currently in testing. We are continuously optimizing the experience.',
+  public_connector_alpha_tip:
+    'Under active development. Some features may still be incomplete.',
 }

packages/business/src/locale/lang/zh-CN.js

@@ -1549,4 +1549,6 @@ export default {
     '若任务名或数据源名冲突，则终止导入操作，不导入任何内容。',
   packages_business_import_reuse_existing_tip:
     '若任务名冲突则替换任务，数据源名冲突则复用系统中已有数据源。',
+  public_connector_beta_tip: '正在测试阶段，我们正在不断优化体验',
+  public_connector_alpha_tip: '正在持续开发中，部分功能可能还在完善',
 }

packages/business/src/locale/lang/zh-TW.js

@@ -1538,4 +1538,6 @@ export default {
     '若任務名或數據源名衝突，則終止導入操作，不導入任何內容。',
   packages_business_import_reuse_existing_tip:
     '若任務名衝突則替換任務，數據源名衝突則重用系統中已有數據源。',
+  public_connector_beta_tip: '正在測試階段，我們正在不斷優化體驗',
+  public_connector_alpha_tip: '正在持續開發中，部分功能可能還在完善',
 }

packages/ldp/src/TablePreview.vue

@@ -25,6 +25,7 @@ import VTable from '@tap/component/src/base/v-table'
 import VCodeEditor from '@tap/component/src/base/VCodeEditor.vue'
 import Drawer from '@tap/component/src/Drawer.vue'
 import { IconButton } from '@tap/component/src/icon-button'
+import { OverflowTooltip } from '@tap/component/src/overflow-tooltip'
 import i18n from '@tap/i18n'
 
 import { calcTimeUnit, calcUnit, isNum } from '@tap/shared'
@@ -46,6 +47,7 @@ export default {
     VCodeEditor,
     IconButton,
     LineageGraph,
+    OverflowTooltip,
   },
   props: {
     tag: {
@@ -126,6 +128,7 @@ export default {
       tableStatus: '',
       cdcDelayTime: '',
       lastDataChangeTime: '',
+      upstreamTableStatus: [],
       statusMap: {
         error: i18n.t('packages_business_table_status_error'), // 异常
         draft: i18n.t('packages_business_table_status_draft'), // 草稿
@@ -461,10 +464,32 @@ export default {
             ? calcTimeUnit(res.cdcDelayTime, 2, {
                 autoHideMs: true,
               })
-            : '-'
+            : ''
         this.lastDataChangeTime = res?.lastDataChangeTime
           ? dayjs(res?.lastDataChangeTime).format('YYYY-MM-DD HH:mm:ss')
           : '-'
+
+        this.upstreamTableStatus =
+          res?.upstreamTableStatus
+            ?.sort((a, b) => {
+              if (a.onDelayPath && !b.onDelayPath) {
+                return -1
+              } else if (!a.onDelayPath && b.onDelayPath) {
+                return 1
+              } else {
+                return b.cdcDelayTime - a.cdcDelayTime
+              }
+            })
+            ?.map((item) => {
+              item.cdcDelayTime =
+                isNum(item.cdcDelayTime) && item.cdcDelayTime >= 0
+                  ? calcTimeUnit(item.cdcDelayTime, 2, {
+                      autoHideMs: true,
+                    })
+                  : '-'
+
+              return item
+            }) || []
       })
     },
     getApisData() {
@@ -736,6 +761,15 @@ export default {
     handleCreateAPI() {
       this.$emit('createApi', this.connection, this.selected)
     },
+
+    handleOpenTask(item) {
+      this.openRoute({
+        name: item.syncType === 'migrate' ? 'MigrationMonitor' : 'TaskMonitor',
+        params: {
+          id: item.taskId,
+        },
+      })
+    },
   },
 }
 </script>
@@ -816,12 +850,139 @@ export default {
                 lastDataChangeTime || '-'
               }}</span></span
             >
-            <span
-              ><span class="table-dec-label"
-                >{{ $t('packages_business_cdc_delay_time') }}: </span
-              ><span class="table-dec-txt text-nowrap">{{
-                cdcDelayTime || '-'
-              }}</span></span
+
+            <span class="inline-flex align-center gap-1">
+              <span class="table-dec-label"
+                >{{ $t('packages_business_cdc_delay_time') }}:
+              </span>
+              <el-popover
+                placement="bottom"
+                trigger="click"
+                popper-style="min-width: 400px;max-width: 480px;width: auto;"
+                :disabled="!upstreamTableStatus.length || !cdcDelayTime"
+              >
+                <template #reference>
+                  <span
+                    class="table-dec-txt text-nowrap inline-flex align-center gap-0.5"
+                    :class="{
+                      'color-primary cursor-pointer':
+                        cdcDelayTime && upstreamTableStatus.length,
+                    }"
+                  >
+                    <el-icon v-if="cdcDelayTime"><i-lucide-clock /></el-icon
+                    >{{ cdcDelayTime || '-' }}</span
+                  ></template
+                >
+                <div>
+                  <el-alert
+                    :closable="false"
+                    :title="$t('packages_ldp_task_delay_detail_logic')"
+                    type="info"
+                    show-icon
+                    class="align-items-start mb-3 logic-alert"
+                  >
+                    <template #title>
+                      <div>
+                        <div class="fw-sub fs-7 mb-1">
+                          {{ $t('packages_ldp_task_delay_detail_logic') }}
+                        </div>
+                        <ul
+                          class="ml-4 list-disc flex flex-column gap-0.5 text-xs lh-base"
+                        >
+                          <li class="list-disc">
+                            {{
+                              $t('packages_ldp_task_delay_detail_logic_tip1')
+                            }}
+                          </li>
+                          <li class="list-disc">
+                            {{
+                              $t('packages_ldp_task_delay_detail_logic_tip2')
+                            }}
+                          </li>
+                          <li class="list-disc color-warning">
+                            {{
+                              $t('packages_ldp_task_delay_detail_logic_tip3')
+                            }}
+                          </li>
+                        </ul>
+                      </div>
+                    </template>
+                  </el-alert>
+                  <!-- <div class="flex align-center gap-1">
+                    <div class="lh-base">
+                      <div class="fw-sub font-color-dark">
+                        {{ $t('packages_ldp_task_delay_detail') }}
+                      </div>
+                      <div class="font-color-sslight text-xs">
+                        {{ $t('packages_ldp_task_delay_detail_tip') }}
+                      </div>
+                    </div>
+                    <el-tooltip :hide-after="0" :teleported="false">
+                      <template #content>
+                        <div class="fw-sub fs-7 mb-1">
+                          {{ $t('packages_ldp_task_delay_detail_logic') }}
+                        </div>
+                        <ul
+                          class="ml-4 list-disc flex flex-column gap-0.5 text-xs"
+                        >
+                          <li class="list-disc">
+                            {{
+                              $t('packages_ldp_task_delay_detail_logic_tip1')
+                            }}
+                          </li>
+                          <li class="list-disc">
+                            {{
+                              $t('packages_ldp_task_delay_detail_logic_tip2')
+                            }}
+                          </li>
+                        </ul>
+                      </template>
+                      <div
+                        class="ml-auto flex align-center justify-center p-2 bg-gray-100 dark:bg-white/15 rounded-pill"
+                      >
+                        <el-icon :size="16">
+                          <i-lucide-info />
+                        </el-icon>
+                      </div>
+                    </el-tooltip>
+                  </div> -->
+                  <!-- <el-divider class="my-3" /> -->
+                  <div class="mx-n3">
+                    <el-scrollbar :max-height="280" class="px-3">
+                      <div class="flex flex-column gap-2">
+                        <div
+                          v-for="item in upstreamTableStatus"
+                          :key="item"
+                          class="flex align-center gap-2 hover:bg-fill-color-light rounded-lg p-2 cursor-pointer task-item border overflow-hidden"
+                          @click="handleOpenTask(item)"
+                        >
+                          <OverflowTooltip
+                            :hide-after="0"
+                            placement="left"
+                            class="text-truncate"
+                            :text="item.taskName"
+                          />
+                          <el-icon
+                            class="external-link-icon text-muted-foreground"
+                          >
+                            <i-lucide-external-link />
+                          </el-icon>
+                          <el-tag
+                            size="small"
+                            class="px-1 ml-auto"
+                            :type="item.onDelayPath ? 'warning' : 'info'"
+                          >
+                            <span class="flex align-center gap-0.5">
+                              <el-icon><i-lucide-clock /></el-icon>
+                              {{ item.cdcDelayTime }}
+                            </span>
+                          </el-tag>
+                        </div>
+                      </div>
+                    </el-scrollbar>
+                  </div>
+                </div>
+              </el-popover></span
             >
           </template>
         </div>
@@ -1483,4 +1644,19 @@ export default {
     grid-gap: 16px;
   }
 }
+
+.task-item {
+  .external-link-icon {
+    opacity: 0;
+    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  &:hover .external-link-icon {
+    opacity: 1;
+  }
+}
+.logic-alert {
+  :deep(.el-alert__icon) {
+    margin-top: 4px;
+  }
+}
 </style>

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

@@ -60,4 +60,14 @@ export default {
     'You have already copied some tables, but you can still select more. Newly selected tables will be added to the existing list.',
   packages_ldp_fdm_create_task_has_expression:
     'You have selected tables by regex matching and cannot select more. Please use the Data Copy feature to continue copying tables.',
+  packages_ldp_task_delay_detail: 'Task Delay Details',
+  packages_ldp_task_delay_detail_tip:
+    'Displays all tasks involved in this model and their corresponding delay durations',
+  packages_ldp_task_delay_detail_logic: 'Calculation Logic',
+  packages_ldp_task_delay_detail_logic_tip1:
+    '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.',
+  packages_ldp_task_delay_detail_logic_tip2:
+    '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.',
+  packages_ldp_task_delay_detail_logic_tip3:
+    'Tasks included in this calculation are highlighted with their delay',
 }

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

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

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

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