[Fix][UI Next][V1.0.0-Alpha] Fix the datasource display error in SQL. (#9261)

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/index.ts

@@ -30,7 +30,6 @@ export { useTaskType } from './use-task-type'
 export { useProcessName } from './use-process-name'
 export { useChildNode } from './use-child-node'
 export { useTargetTaskName } from './use-target-task-name'
-export { useDatasourceType } from './use-datasource-type'
 export { useDatasource } from './use-datasource'
 export { useSqlType } from './use-sql-type'
 export { useProcedure } from './use-procedure'

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-datasource-type.ts

@@ -1,130 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { ref, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { IJsonItem } from '../types'
-import { indexOf } from 'lodash'
-
-export function useDatasourceType(
-  model: { [field: string]: any },
-  supportedDatasourceType?: string[],
-  field?: string
-): IJsonItem {
-  const { t } = useI18n()
-
-  const options = ref([] as { label: string; value: string }[])
-  const loading = ref(false)
-
-  const datasourceTypes = [
-    {
-      id: 0,
-      code: 'MYSQL',
-      disabled: false
-    },
-    {
-      id: 1,
-      code: 'POSTGRESQL',
-      disabled: false
-    },
-    {
-      id: 2,
-      code: 'HIVE',
-      disabled: false
-    },
-    {
-      id: 3,
-      code: 'SPARK',
-      disabled: false
-    },
-    {
-      id: 4,
-      code: 'CLICKHOUSE',
-      disabled: false
-    },
-    {
-      id: 5,
-      code: 'ORACLE',
-      disabled: false
-    },
-    {
-      id: 6,
-      code: 'SQLSERVER',
-      disabled: false
-    },
-    {
-      id: 7,
-      code: 'DB2',
-      disabled: false
-    },
-    {
-      id: 8,
-      code: 'PRESTO',
-      disabled: false
-    },
-    {
-      id: 9,
-      code: 'REDSHIFT',
-      disabled: false
-    }
-  ]
-
-  const getDatasourceTypes = async () => {
-    if (loading.value) return
-    loading.value = true
-    options.value = datasourceTypes
-      .filter((item) => {
-        if (item.disabled) {
-          return false
-        }
-        if (supportedDatasourceType) {
-          return indexOf(supportedDatasourceType, item.code) !== -1
-        }
-        return true
-      })
-      .map((item) => ({ label: item.code, value: item.code }))
-    loading.value = false
-  }
-
-  const onChange = (type: string) => {
-    if (field) {
-      model[field] = type
-    } else {
-      model.type = type
-    }
-  }
-
-  onMounted(() => {
-    getDatasourceTypes()
-  })
-  return {
-    type: 'select',
-    field: field ? field : 'datasourceType',
-    span: 12,
-    name: t('project.node.datasource_type'),
-    props: {
-      loading: loading,
-      'on-update:value': onChange
-    },
-    options: options,
-    validate: {
-      trigger: ['input', 'blur'],
-      required: true
-    },
-    value: model.type
-  }
-}

dolphinscheduler-ui-next/src/views/projects/task/components/node/fields/use-datasource.ts

@@ -15,73 +15,145 @@
  * limitations under the License.
  */
 
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { queryDataSourceList } from '@/service/modules/data-source'
+import { indexOf, find } from 'lodash'
 import type { IJsonItem } from '../types'
-import { TypeReq } from '@/service/modules/data-source/types'
-import { find } from 'lodash'
+import type { TypeReq } from '@/service/modules/data-source/types'
 
 export function useDatasource(
   model: { [field: string]: any },
+  supportedDatasourceType?: string[],
   field?: string
-): IJsonItem {
+): IJsonItem[] {
   const { t } = useI18n()
 
-  const options = ref([] as { label: string; value: number }[])
-  const loading = ref(false)
-  const defaultValue = ref(null)
+  const options = ref([] as { label: string; value: string }[])
+  const datasourceOptions = ref([] as { label: string; value: number }[])
 
-  const getDatasources = async () => {
-    if (loading.value) return
-    loading.value = true
-    await refreshOptions()
-    loading.value = false
+  const datasourceTypes = [
+    {
+      id: 0,
+      code: 'MYSQL',
+      disabled: false
+    },
+    {
+      id: 1,
+      code: 'POSTGRESQL',
+      disabled: false
+    },
+    {
+      id: 2,
+      code: 'HIVE',
+      disabled: false
+    },
+    {
+      id: 3,
+      code: 'SPARK',
+      disabled: false
+    },
+    {
+      id: 4,
+      code: 'CLICKHOUSE',
+      disabled: false
+    },
+    {
+      id: 5,
+      code: 'ORACLE',
+      disabled: false
+    },
+    {
+      id: 6,
+      code: 'SQLSERVER',
+      disabled: false
+    },
+    {
+      id: 7,
+      code: 'DB2',
+      disabled: false
+    },
+    {
+      id: 8,
+      code: 'PRESTO',
+      disabled: false
+    },
+    {
+      id: 9,
+      code: 'REDSHIFT',
+      disabled: false
+    }
+  ]
+
+  const getDatasourceTypes = async () => {
+    options.value = datasourceTypes
+      .filter((item) => {
+        if (item.disabled) {
+          return false
+        }
+        if (supportedDatasourceType) {
+          return indexOf(supportedDatasourceType, item.code) !== -1
+        }
+        return true
+      })
+      .map((item) => ({ label: item.code, value: item.code }))
   }
 
   const refreshOptions = async () => {
     const params = { type: model.type } as TypeReq
     const res = await queryDataSourceList(params)
-    defaultValue.value = null
-    options.value = []
-
-    options.value = res.map((item: any) => ({
+    datasourceOptions.value = res.map((item: any) => ({
       label: item.name,
       value: item.id
     }))
-    if (options.value.length && model.datasource) {
-      const item = find(options.value, { value: model.datasource })
+    if (!res.length && model.datasource) model.datasource = null
+    if (res.length && model.datasource) {
+      const item = find(res, { id: model.datasource })
       if (!item) {
         model.datasource = null
       }
     }
   }
 
-  watch(
-    () => model.type,
-    () => {
-      if (model.type) {
-        refreshOptions()
-      }
-    }
-  )
+  const onChange = () => {
+    refreshOptions()
+  }
 
-  onMounted(() => {
-    getDatasources()
+  onMounted(async () => {
+    getDatasourceTypes()
+    await nextTick()
+    refreshOptions()
   })
-  return {
-    type: 'select',
-    field: field || 'datasource',
-    span: 12,
-    name: t('project.node.datasource_instances'),
-    props: {
-      loading: loading
+  return [
+    {
+      type: 'select',
+      field: field ? field : 'type',
+      span: 12,
+      name: t('project.node.datasource_type'),
+      props: {
+        'on-update:value': onChange
+      },
+      options: options,
+      validate: {
+        trigger: ['input', 'blur'],
+        required: true
+      }
     },
-    options: options,
-    validate: {
-      trigger: ['input', 'blur'],
-      type: 'number',
-      required: true
+    {
+      type: 'select',
+      field: field || 'datasource',
+      span: 12,
+      name: t('project.node.datasource_instances'),
+      options: datasourceOptions,
+      validate: {
+        trigger: ['input', 'blur'],
+        required: true,
+        validator(unuse: any, value) {
+          if (!value && value !== 0) {
+            return Error(t('project.node.datasource_instances'))
+          }
+        }
+      }
     }
-  }
+  ]
 }

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-procedure.ts

@@ -76,8 +76,7 @@ export function useProcedure({
       ...Fields.useFailed(),
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
-      Fields.useDatasourceType(model),
-      Fields.useDatasource(model),
+      ...Fields.useDatasource(model),
       ...Fields.useProcedure(model),
       Fields.usePreTasks()
     ] as IJsonItem[],

dolphinscheduler-ui-next/src/views/projects/task/components/node/tasks/use-sql.ts

@@ -80,8 +80,7 @@ export function useSql({
       ...Fields.useFailed(),
       Fields.useDelayTime(model),
       ...Fields.useTimeoutAlarm(model),
-      Fields.useDatasourceType(model),
-      Fields.useDatasource(model),
+      ...Fields.useDatasource(model),
       ...Fields.useSqlType(model),
       ...Fields.useSql(model),
       Fields.usePreTasks()