✨ 🌐 Update database types to use consistent naming

- Rename 'DATABASE_TYPE_POSTGRESQL' to 'DATABASE_TYPE_POSTGRES'
- Update references to the renamed constant in multiple files
- Add new database types: 'oracle', 'db2', 'cassandra', 'hive', 'clickhouse',
  'snowflake', and 'kafka' to database configuration

src/components/core/database/DatabaseDataSource.vue

@@ -1,14 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import {
-  DATABASE_TYPE_MONGO,
-  DATABASE_TYPE_MYSQL,
-  DATABASE_TYPE_POSTGRESQL,
-  DATABASE_TYPE_MSSQL,
-  DATABASE_TYPE_ELASTICSEARCH,
-  DATABASE_TYPE_KAFKA,
-  DATABASE_TYPE_REDIS,
-} from '@/constants/database';
 import { translate } from '@/utils';
 
 const props = defineProps<{
@@ -25,48 +16,84 @@ const t = translate;
 const data = computed<TagProps>(() => {
   const { dataSource } = props;
   switch (dataSource) {
-    case DATABASE_TYPE_MONGO:
+    case 'mongo':
       return {
         label: t('components.database.dataSources.mongo'),
         type: 'info',
         icon: ['svg', 'mongodb'],
       };
-    case DATABASE_TYPE_ELASTICSEARCH:
-      return {
-        label: t('components.database.dataSources.elasticsearch'),
-        type: 'info',
-        icon: ['svg', 'elasticsearch'],
-      };
-    case DATABASE_TYPE_MYSQL:
+    case 'mysql':
       return {
         label: t('components.database.dataSources.mysql'),
         type: 'info',
         icon: ['svg', 'mysql'],
       };
-    case DATABASE_TYPE_POSTGRESQL:
+    case 'postgres':
       return {
-        label: t('components.database.dataSources.postgresql'),
+        label: t('components.database.dataSources.postgres'),
         type: 'info',
         icon: ['svg', 'postgres'],
       };
-    case DATABASE_TYPE_MSSQL:
+    case 'mssql':
       return {
         label: t('components.database.dataSources.mssql'),
         type: 'info',
         icon: ['svg', 'mssql'],
       };
-    case DATABASE_TYPE_KAFKA:
+    case 'oracle':
       return {
-        label: t('components.database.dataSources.kafka'),
+        label: t('components.database.dataSources.oracle'),
         type: 'info',
-        icon: ['svg', 'kafka'],
+        icon: ['svg', 'oracle'],
+      };
+    case 'db2':
+      return {
+        label: t('components.database.dataSources.db2'),
+        type: 'info',
+        icon: ['svg', 'postgres'],
+      };
+    case 'cassandra':
+      return {
+        label: t('components.database.dataSources.cassandra'),
+        type: 'info',
+        icon: ['svg', 'cassandra'],
+      };
+    case 'hive':
+      return {
+        label: t('components.database.dataSources.hive'),
+        type: 'info',
+        icon: ['svg', 'hive'],
       };
-    case DATABASE_TYPE_REDIS:
+    case 'clickhouse':
+      return {
+        label: t('components.database.dataSources.clickhouse'),
+        type: 'info',
+        icon: ['svg', 'clickhouse'],
+      };
+    case 'snowflake':
+      return {
+        label: t('components.database.dataSources.snowflake'),
+        type: 'info',
+        icon: ['svg', 'snowflake'],
+      };
+    case 'elasticsearch':
+      return {
+        label: t('components.database.dataSources.elasticsearch'),
+        type: 'info',
+        icon: ['svg', 'elasticsearch'],
+      };
+    case 'redis':
       return {
         label: t('components.database.dataSources.redis'),
         type: 'info',
         icon: ['svg', 'redis'],
       };
+    case 'kafka':
+      return {
+        label: t('components.database.dataSources.kafka'),
+        type: 'info',
+        icon: ['svg', 'kafka'],
+      };
     default:
       return {
         label: 'Unknown',

src/components/core/database/DatabaseForm.vue

@@ -3,12 +3,8 @@ import { computed } from 'vue';
 import { getStore } from '@/store';
 import useDatabase from '@/components/core/database/useDatabase';
 import useDatabaseDetail from '@/views/database/detail/useDatabaseDetail';
-import {
-  DATABASE_CONNECT_TYPE_HOSTS,
-  DATABASE_CONNECT_TYPE_STANDARD,
-  DATABASE_CONNECT_TYPE_URL,
-} from '@/constants/database';
 import { translate } from '@/utils';
+import { getDatabaseDefaultByDataSource } from '@/utils/database';
 
 defineProps<{
   readonly?: boolean;
@@ -18,6 +14,7 @@ defineProps<{
 const t = translate;
 
 // store
+const ns: ListStoreNamespace = 'database';
 const store = getStore();
 const { database: state } = store.state as RootStoreState;
 
@@ -34,6 +31,16 @@ const form = computed(() => state.form);
 
 const isDisabled = computed(() => form.value.is_default);
 
+const onDataSourceChange = (dataSource: DatabaseDataSource) => {
+  const { name, host, port } = getDatabaseDefaultByDataSource(dataSource) || {};
+  store.commit(`${ns}/setForm`, {
+    data_source: dataSource,
+    name,
+    host,
+    port,
+  });
+};
+
 defineOptions({ name: 'ClDatabaseForm' });
 </script>
 
@@ -72,6 +79,7 @@ defineOptions({ name: 'ClDatabaseForm' });
         v-model="form.data_source"
         :placeholder="t('components.database.form.dataSource')"
         :disabled="isDisabled"
+        @change="onDataSourceChange"
       >
         <el-option
           v-for="op in dataSourceOptions"

src/components/core/database/useDatabase.ts

@@ -1,19 +1,10 @@
+import { computed } from 'vue';
 import { Store } from 'vuex';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import {
-  DATABASE_CONNECT_TYPE_HOSTS,
-  DATABASE_CONNECT_TYPE_STANDARD,
-  DATABASE_CONNECT_TYPE_URL,
-  DATABASE_TYPE_MONGO,
-  DATABASE_TYPE_MYSQL,
-  DATABASE_TYPE_POSTGRESQL,
-  DATABASE_TYPE_MSSQL,
-  DATABASE_TYPE_ELASTICSEARCH,
-  DATABASE_TYPE_KAFKA,
-} from '@/constants/database';
 import useDatabaseService from '@/services/database/databaseService';
 import { getDefaultFormComponentData, plainClone, translate } from '@/utils';
 import useForm from '@/components/ui/form/useForm';
+import { databaseDefaults } from '@/utils/database';
 
 // i18n
 const t = translate;
@@ -30,36 +21,16 @@ export const useDatabase = (store: Store<RootStoreState>) => {
   const formRules: FormRules = {};
 
   // type options
-  const dataSourceOptions: SelectOption[] = [
-    {
-      label: t('components.database.dataSources.mongo'),
-      value: DATABASE_TYPE_MONGO,
-    },
-    {
-      label: t('components.database.dataSources.mysql'),
-      value: DATABASE_TYPE_MYSQL,
-    },
-    {
-      label: t('components.database.dataSources.postgresql'),
-      value: DATABASE_TYPE_POSTGRESQL,
-    },
-    {
-      label: t('components.database.dataSources.mssql'),
-      value: DATABASE_TYPE_MSSQL,
-    },
-    {
-      label: t('components.database.dataSources.elasticsearch'),
-      value: DATABASE_TYPE_ELASTICSEARCH,
-    },
-    {
-      label: t('components.database.dataSources.kafka'),
-      value: DATABASE_TYPE_KAFKA,
-    },
-  ];
+  const dataSourceOptions = computed<SelectOption<DatabaseDataSource>[]>(() =>
+    databaseDefaults.map(item => ({
+      label: item.name,
+      value: item.data_source,
+    }))
+  );
   const getTypeOptionsWithDefault = (): SelectOption[] => {
     return [
       { label: t('components.database.dataSources.default'), value: undefined },
-      ...dataSourceOptions,
+      ...dataSourceOptions.value,
     ];
   };
 

src/components/index.ts

@@ -1,5 +1,4 @@
 import CreateEditDatabaseDialog from './core/database/CreateEditDatabaseDialog.vue';
-import DatabaseConnectType from './core/database/DatabaseConnectType.vue';
 import DatabaseDataSource from './core/database/DatabaseDataSource.vue';
 import DatabaseForm from './core/database/DatabaseForm.vue';
 import DatabaseStatus from './core/database/DatabaseStatus.vue';
@@ -201,7 +200,6 @@ import TransferPanel from './ui/transfer/TransferPanel.vue';
 
 export {
   CreateEditDatabaseDialog as ClCreateEditDatabaseDialog,
-  DatabaseConnectType as ClDatabaseConnectType,
   DatabaseDataSource as ClDatabaseDataSource,
   DatabaseForm as ClDatabaseForm,
   DatabaseStatus as ClDatabaseStatus,

src/constants/database.ts

@@ -1,14 +1,2 @@
-export const DATABASE_TYPE_MONGO = 'mongo';
-export const DATABASE_TYPE_MYSQL = 'mysql';
-export const DATABASE_TYPE_POSTGRESQL = 'postgres';
-export const DATABASE_TYPE_MSSQL = 'mssql';
-export const DATABASE_TYPE_ELASTICSEARCH = 'elasticsearch';
-export const DATABASE_TYPE_KAFKA = 'kafka';
-export const DATABASE_TYPE_REDIS = 'redis';
-
 export const DATABASE_STATUS_ONLINE = 'online';
 export const DATABASE_STATUS_OFFLINE = 'offline';
-
-export const DATABASE_CONNECT_TYPE_STANDARD = 'standard';
-export const DATABASE_CONNECT_TYPE_URL = 'url';
-export const DATABASE_CONNECT_TYPE_HOSTS = 'hosts';

src/i18n/lang/en/components/database.ts

@@ -39,7 +39,7 @@ const database: LComponentsDatabase = {
     default: 'Default',
     mongo: 'MongoDB',
     mysql: 'MySQL',
-    postgresql: 'PostgreSQL',
+    postgres: 'PostgreSQL',
     mssql: 'Microsoft SQL Server',
     elasticsearch: 'ElasticSearch',
     kafka: 'Kafka',

src/i18n/lang/zh/components/database.ts

@@ -39,7 +39,7 @@ const database: LComponentsDatabase = {
     default: '默认',
     mongo: 'MongoDB',
     mysql: 'MySQL',
-    postgresql: 'PostgreSQL',
+    postgres: 'PostgreSQL',
     mssql: 'Microsoft SQL Server',
     elasticsearch: 'ElasticSearch',
     kafka: 'Kafka',

src/interfaces/i18n/components/database.d.ts

@@ -40,7 +40,7 @@ export declare global {
       default: string;
       mongo: string;
       mysql: string;
-      postgresql: string;
+      postgres: string;
       mssql: string;
       elasticsearch: string;
       kafka: string;

src/interfaces/models/database.d.ts

@@ -1,10 +1,4 @@
 import {
-  DATABASE_TYPE_MONGO,
-  DATABASE_TYPE_MYSQL,
-  DATABASE_TYPE_POSTGRESQL,
-  DATABASE_TYPE_MSSQL,
-  DATABASE_TYPE_ELASTICSEARCH,
-  DATABASE_TYPE_KAFKA,
   DATABASE_STATUS_ONLINE,
   DATABASE_STATUS_OFFLINE,
 } from '@/constants/database';
@@ -17,7 +11,7 @@ export declare global {
     error?: string;
     description?: string;
     host?: string;
-    port?: string;
+    port?: number;
     url?: string;
     hosts?: string[];
     username?: string;
@@ -27,12 +21,19 @@ export declare global {
   }
 
   type DatabaseDataSource =
-    | DATABASE_TYPE_MONGO
-    | DATABASE_TYPE_MYSQL
-    | DATABASE_TYPE_POSTGRESQL
-    | DATABASE_TYPE_MSSQL
-    | DATABASE_TYPE_ELASTICSEARCH
-    | DATABASE_TYPE_KAFKA;
+    | 'mongo'
+    | 'mysql'
+    | 'postgres'
+    | 'mssql'
+    | 'oracle'
+    | 'db2'
+    | 'cassandra'
+    | 'hive'
+    | 'clickhouse'
+    | 'snowflake'
+    | 'elasticsearch'
+    | 'redis'
+    | 'kafka';
 
   type DatabaseStatus = DATABASE_STATUS_ONLINE | DATABASE_STATUS_OFFLINE;
 }