Merge pull request #464 from tapdata/feat/TAP-8725-datahub-mdm

Feat/tap 8725 datahub mdm

Author: feynmx

packages/dag/src/components/monitor/LeftSider.vue

@@ -87,7 +87,7 @@ export default {
               hideOverlap: true,
               showMaxLabel: true,
               formatter: (val) => {
-                return `${Math.round(val)}%`
+                return `${Number(val.toFixed(2))}%`
               },
             },
           },

packages/form/src/components/field-select/FieldSelect.tsx

@@ -1,4 +1,5 @@
 import i18n from '@tap/i18n'
+import { isPlainObject } from 'lodash-es'
 import {
   computed,
   defineComponent,
@@ -8,20 +9,22 @@ import {
   ref,
   watch,
 } from 'vue'
-import type { ElSelectV2 } from 'element-plus'
+import type { SelectV2Instance } from 'element-plus'
+import './style.scss'
 
 export const FieldSelect = defineComponent({
   props: {
     options: Array,
     enableTooltip: Boolean,
     modelValue: String,
+    loading: Boolean,
   },
   setup: (props, { attrs, slots }) => {
     const labelRef = ref<HTMLElement>()
     const showTooltip = ref(false)
     const isTextOverflow = ref(false)
     const tooltipContent = ref('')
-    const selectRef = ref<ElSelectV2>()
+    const selectRef = ref<SelectV2Instance>()
 
     const checkTextOverflow = (element: HTMLElement, text: string) => {
       if (!element || !text) return false
@@ -57,6 +60,9 @@ export const FieldSelect = defineComponent({
     }
 
     const getIcon = (tapType: string) => {
+      if (isPlainObject(tapType)) {
+        return TYPE_ICON[tapType.type] || 'type-unknown'
+      }
       const match = tapType.match(/"type"\s*:\s*(\d+)/)
       const value = match?.[1]
 
@@ -197,8 +203,34 @@ export const FieldSelect = defineComponent({
       }, 100)
     })
 
+    const children: Record<string, any> = {
+      header: slots.header,
+      default: ({ item: option }) => (
+        <div class="flex align-center gap-1">
+          {option.icon && (
+            <VIcon size="16" title={option.type}>
+              {option.icon}
+            </VIcon>
+          )}
+          {option[fieldNames.value.label]}
+          {renderIcon(option)}
+        </div>
+      ),
+    }
+
+    const renderLoading = () => {
+      return (
+        <el-icon class="el-select-loading__icon is-loading">
+          <ElIconLoading />
+        </el-icon>
+      )
+    }
+
     return () => {
       const newAttrs = { ...attrs }
+
+      children.prefix = props.loading ? renderLoading() : undefined
+
       if (
         (attrs['allow-create'] || attrs.allowCreate) &&
         !('defaultFirstOption' in attrs) &&
@@ -221,29 +253,20 @@ export const FieldSelect = defineComponent({
             {...newAttrs}
             props={fieldNames.value}
             fit-input-width={false}
+            class="field-select"
             popper-class="field-select-popper"
             fallback-placements={['bottom-start', 'bottom-end']}
             options={fieldOptions.value}
             dataSource={fieldOptions.value}
+            loading={props.loading}
             onMouseenter={onMouseEnter}
             onMouseleave={() => {
               showTooltip.value = false
             }}
           >
             {{
-              header: slots.header,
+              ...children,
               label: ({ label }) => <span ref={labelRef}>{label}</span>,
-              default: ({ item: option }) => (
-                <div class="flex align-center gap-1">
-                  {option.icon && (
-                    <VIcon size="16" title={option.type}>
-                      {option.icon}
-                    </VIcon>
-                  )}
-                  {option[fieldNames.value.label]}
-                  {renderIcon(option)}
-                </div>
-              ),
             }}
           </ElSelectV2>
         </ElTooltip>
@@ -253,24 +276,13 @@ export const FieldSelect = defineComponent({
           modelValue={props.modelValue}
           {...newAttrs}
           props={fieldNames.value}
+          loading={props.loading}
+          class="field-select"
           popper-class="field-select-popper"
           options={fieldOptions.value}
           dataSource={fieldOptions.value}
         >
-          {{
-            header: slots.header,
-            default: ({ item: option }) => (
-              <div class="flex align-center gap-1">
-                {option.icon && (
-                  <VIcon size="16" title={option.type}>
-                    {option.icon}
-                  </VIcon>
-                )}
-                {option[fieldNames.value.label]}
-                {renderIcon(option)}
-              </div>
-            ),
-          }}
+          {children}
         </ElSelectV2>
       )
     }

packages/form/src/components/field-select/style.scss

@@ -0,0 +1,11 @@
+.field-select {
+ .el-select__prefix .el-select-loading__icon {
+    position: absolute;
+    right: 12px;
+    background-color: var(--el-fill-color-blank);
+    z-index: 2;
+ }
+ .el-select__prefix:has(.el-select-loading__icon) + .el-select__selection {
+    margin-left: -14px;
+ }
+}

packages/form/src/components/infinite-select/InfiniteSelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { debounce, escapeRegExp, isString, merge } from 'lodash-es'
-import { computed, markRaw, nextTick, onMounted, ref, toRaw, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, toRaw, watch } from 'vue'
 import SelectLoading from './SelectLoading.vue'
 
 const page = ref(0)
@@ -69,7 +69,7 @@ const paramsSerializer = (params: {
 
   if (params.query) {
     filter.where = {
-      [props.itemQuery ||props.itemValue || props.itemLabel]: {
+      [props.itemQuery || props.itemValue || props.itemLabel]: {
         like: escapeRegExp(params.query),
         options: 'i',
       },
@@ -298,7 +298,7 @@ onMounted(() => {
     @visible-change="onVisibleChange"
     @change="onChange"
   >
-    <template #prefix>
+    <template v-if="showLoading || $slots.prefix" #prefix>
       <slot name="prefix" />
       <el-icon
         v-if="showLoading"

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

@@ -593,4 +593,5 @@ export default {
   public_warningTime: 'Warning Time',
   public_warningLog: 'Warning Log',
   public_updated_from_now: 'Updated at {time}',
+  public_crontabExpression: 'Cron Expression',
 }

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

@@ -584,4 +584,5 @@ export default {
   public_warningTime: '告警时间',
   public_warningLog: '告警日志',
   public_updated_from_now: '更新于 {time}',
+  public_crontabExpression: 'Cron 表达式',
 }

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

@@ -582,4 +582,5 @@ export default {
   public_warningTime: '告警時間',
   public_warningLog: '告警日誌',
   public_updated_from_now: '更新于 {time}',
+  public_crontabExpression: 'Cron 表達式',
 }

packages/ldp/src/Dashboard.vue

@@ -753,9 +753,11 @@ export default {
     background-color: rgba(255, 255, 255, 0.4);
   }
 
+  :deep(.tree-wrap.is-drop) {
+    box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
+  }
   :deep(.ldp-tree.is-drop),
   :deep(.is-drop .ldp-tree) {
-    box-shadow: 0px 0px 0px 2px var(--color-primary) inset;
     & + .drop-mask {
       display: none !important;
     }

packages/ldp/src/MDM.vue

@@ -1,8 +1,13 @@
 <script lang="tsx">
-import { discoveryApi, ldpApi, metadataDefinitionsApi } from '@tap/api'
+import {
+  discoveryApi,
+  fetchMetadataInstances,
+  ldpApi,
+  metadataDefinitionsApi,
+} from '@tap/api'
 import { makeDragNodeImage, TASK_SETTINGS } from '@tap/business/src/shared'
 import { IconButton } from '@tap/component/src/icon-button'
-
+import { FieldSelect, mapFieldsData } from '@tap/form'
 import i18n from '@tap/i18n'
 import { generateId, uuid } from '@tap/shared'
 import { debounce } from 'lodash-es'
@@ -11,7 +16,7 @@ import commonMix from './mixins/common'
 
 export default {
   name: 'MDM',
-  components: { IconButton },
+  components: { IconButton, FieldSelect },
   mixins: [commonMix],
   props: {
     directory: Object,
@@ -43,6 +48,8 @@ export default {
           crontabExpression: '',
           crontabExpressionType: 'once',
         },
+        fields: [],
+        updateConditionFields: [],
       },
       expandedKeys: [],
       dialogConfig: {
@@ -256,10 +263,8 @@ export default {
 
     handleDragLeave(ev) {
       ev.preventDefault()
-      console.log('handleDragLeave') // eslint-disable-line
       if (!this.allowDrop) return
       if (!ev.currentTarget.contains(ev.relatedTarget)) {
-        console.log('handleDragLeave✌️', ev) // eslint-disable-line
         this.removeDropEffect(ev, 'tree-wrap', 'is-drop')
       }
     },
@@ -315,9 +320,11 @@ export default {
       } else {
         this.taskDialogConfig.notSupportedCDC = false
       }
+
+      this.loadFields()
     },
 
-    async taskDialogSubmit(start, confirmTable) {
+    taskDialogSubmit(start, confirmTable) {
       this.$refs.form.validate(async (valid) => {
         if (!valid) return
         const {
@@ -354,7 +361,6 @@ export default {
             this.setNodeExpand(tagId)
           }, 1000)
         } catch (error) {
-          console.log(error) // eslint-disable-line
           const code = error?.data?.code
           const data = error?.data?.data
           if (code === 'Ldp.MdmTargetNoPrimaryKey' && data) {
@@ -407,6 +413,9 @@ export default {
     makeTask(from, tableName, newTableName) {
       const source = this.getTableNode(from, tableName)
       const target = this.getTableNode(this.mdmConnection, newTableName)
+
+      target.updateConditionFields = this.taskDialogConfig.updateConditionFields
+
       return {
         ...TASK_SETTINGS,
         syncType: 'sync',
@@ -533,7 +542,6 @@ export default {
       this.removeDropEffect(ev, 'tree-wrap', 'is-drop')
 
       this.showTaskDialog(!data.isObject ? data.id : undefined)
-      console.log('handleTreeDrop') // eslint-disable-line
     },
 
     handleSelfDrop(draggingNode, dropNode, dropType, ev) {
@@ -620,6 +628,52 @@ export default {
     hideDialog() {
       this.dialogConfig.visible = false
     },
+    async loadFields() {
+      this.taskDialogConfig.loading = true
+      this.taskDialogConfig.fields = []
+      this.taskDialogConfig.updateConditionFields = []
+
+      const {
+        items: [schema = {}],
+      } = await fetchMetadataInstances({
+        page: 1,
+        size: 1,
+        where: {
+          'source.id': this.taskDialogConfig.from.id,
+          meta_type: { in: ['collection', 'table', 'view'] },
+          is_deleted: false,
+          sourceType: 'SOURCE',
+          original_name: this.taskDialogConfig.tableName,
+        },
+        fields: {
+          original_name: true,
+          fields: true,
+          qualified_name: true,
+          name: true,
+          indices: true,
+          constraints: true,
+        },
+      }).finally(() => {
+        this.taskDialogConfig.loading = false
+      })
+
+      const { fields } = mapFieldsData(schema)
+      this.taskDialogConfig.fields = fields
+
+      let defaultList = fields.filter((item) => item.isPrimaryKey)
+
+      if (!defaultList.length) {
+        defaultList = fields.filter((item) => item.indicesUnique)
+      }
+
+      if (!defaultList.length) {
+        defaultList = fields.filter((item) => item.source === 'virtual_hash')
+      }
+
+      this.taskDialogConfig.updateConditionFields = defaultList.map(
+        (item) => item.value,
+      )
+    },
     async dialogSubmit() {
       const config = this.dialogConfig
       const value = config.label
@@ -968,10 +1022,10 @@ export default {
           <ElFormItem
             :label="$t('packages_dag_task_setting_crontabExpressionFlag')"
             prop="task.crontabExpressionType"
+            class="flex-1"
           >
             <ElSelect
               v-model="taskDialogConfig.task.crontabExpressionType"
-              class="flex-1"
               @change="handleChangeCronType"
             >
               <ElOption v-for="(opt, i) in cronOptions" v-bind="opt" :key="i" />
@@ -980,11 +1034,24 @@ export default {
           <ElFormItem
             v-if="taskDialogConfig.task.crontabExpressionType === 'custom'"
             prop="task.crontabExpression"
-            label-width="0"
+            class="flex-1"
+            label-width="auto"
+            :label="$t('public_crontabExpression')"
           >
             <ElInput v-model="taskDialogConfig.task.crontabExpression" />
           </ElFormItem>
         </div>
+        <ElFormItem
+          :label="$t('packages_dag_nodes_table_gengxintiaojianzi')"
+          prop="updateConditionFields"
+        >
+          <FieldSelect
+            v-model="taskDialogConfig.updateConditionFields"
+            :options="taskDialogConfig.fields"
+            multiple
+            :loading="taskDialogConfig.loading"
+          />
+        </ElFormItem>
       </ElForm>
       <template #footer>
         <span class="dialog-footer">