refactor: streamline database handling and remove unused options

frontend/crawlab-ui/src/components/core/database/useDatabase.ts

@@ -88,16 +88,6 @@ export const useDatabase = (store: Store<RootStoreState>) => {
     store.commit(`${ns}/setForm`, { ...form });
   };
 
-  const allListSelectOptions = computed<SelectOption[]>(
-    () =>
-      store.getters[`${ns}/allListSelectOptions`]?.map((op: SelectOption) => {
-        if (op.value === EMPTY_OBJECT_ID) {
-          return { ...op, label: t('components.database.default.name') };
-        }
-        return op;
-      }) || []
-  );
-
   return {
     ...useForm<Database>(
       ns,
@@ -107,7 +97,6 @@ export const useDatabase = (store: Store<RootStoreState>) => {
     ),
     formRules,
     dataSourceOptions,
-    allListSelectOptions,
     getTypeOptionsWithDefault,
     onChangePasswordFunc,
     onHostsAdd,

frontend/crawlab-ui/src/components/core/spider/SpiderResultDataWithDatabase.vue

@@ -28,18 +28,18 @@ const { form } = useSpider(store);
 
 const databaseMetadata = computed(() => state.databaseMetadata);
 const getDatabaseMetadata = debounce(async () => {
-  if (!form.value?.data_source_id) return;
-  await store.dispatch(`${ns}/getDatabaseMetadata`, form.value.data_source_id);
+  if (!form.value?.database_id) return;
+  await store.dispatch(`${ns}/getDatabaseMetadata`, form.value.database_id);
 });
-watch(() => form.value?.data_source_id, getDatabaseMetadata);
+watch(() => form.value?.database_id, getDatabaseMetadata);
 onBeforeMount(getDatabaseMetadata);
 
 const activeTable = ref<DatabaseTable>();
 const getActiveTable = debounce(async () => {
-  const { data_source_id, db_name, col_name } = form.value;
-  if (!data_source_id || !col_name) return;
+  const { database_id, db_name, col_name } = form.value;
+  if (!database_id || !col_name) return;
   const res = await post<any, Promise<ResponseWithData>>(
-    `/databases/${data_source_id}/tables/metadata/get`,
+    `/databases/${database_id}/tables/metadata/get`,
     {
       database: db_name,
       table: col_name,
@@ -110,7 +110,7 @@ defineOptions({ name: 'ClSpiderResultDataWithDatabase' });
         v-if="activeTable"
         ref="dataRef"
         :active-table="activeTable"
-        :active-id="form?.data_source_id || EMPTY_OBJECT_ID"
+        :active-id="form?.database_id || EMPTY_OBJECT_ID"
         :database-name="form?.db_name"
         :filter="dataFilter"
         :display-all-fields="displayAllFields"

frontend/crawlab-ui/src/components/core/user/UserForm.vue

@@ -45,8 +45,6 @@ const form = computed<User>(() => {
   return userForm.value;
 });
 
-const { allListSelectOptions: allRolesSelectOptions } = useRole(store);
-
 defineOptions({ name: 'ClUserForm' });
 </script>
 
@@ -167,17 +165,11 @@ defineOptions({ name: 'ClUserForm' });
       required
     >
       <template v-if="isPro()">
-        <el-select
+        <cl-remote-select
           v-model="form.role_id"
+          endpoint="/roles"
           :disabled="form.root_admin || isFormItemDisabled('role_id')"
-        >
-          <el-option
-            v-for="op in allRolesSelectOptions"
-            :key="op.value"
-            :value="op.value"
-            :label="op.label"
-          />
-        </el-select>
+        />
       </template>
       <template v-else>
         <el-select v-model="form.role" :disabled="isFormItemDisabled('role')">

frontend/crawlab-ui/src/layouts/content/detail/DetailLayout.vue

@@ -15,7 +15,6 @@ const props = withDefaults(
     navItemNameKey?: string;
     showBackButton?: boolean;
     showSaveButton?: boolean;
-    allListSelectOptions?: SelectOption[];
     navItemLabelFn?: (item: NavItem) => string;
   }>(),
   {

frontend/crawlab-ui/src/utils/database.ts

@@ -1,4 +1,5 @@
 import { translate } from '@/utils/i18n';
+import { EMPTY_OBJECT_ID } from '@/utils/mongo';
 
 const t = translate;
 
@@ -465,3 +466,10 @@ export const getDatabaseAllMetricGroups = (): MetricGroup<DatabaseMetric>[] => [
     format: 'duration',
   },
 ];
+
+export const getDatabaseName = (database: Database) => {
+  if (database._id === EMPTY_OBJECT_ID) {
+    return t('components.database.dataSources.default');
+  }
+  return database.name;
+};

frontend/crawlab-ui/src/views/database/detail/DatabaseDetail.vue

@@ -1,21 +1,15 @@
 <script setup lang="ts">
-import { useStore } from 'vuex';
 import { useDatabaseDetail } from '@/views';
 import { TAB_NAME_CONSOLE } from '@/constants';
-import { useDatabase } from '@/components';
 
 const { activeTabName } = useDatabaseDetail();
 
-const store = useStore();
-const { allListSelectOptions } = useDatabase(store);
-
 defineOptions({ name: 'ClDatabaseDetail' });
 </script>
 
 <template>
   <cl-detail-layout
     store-namespace="database"
-    :all-list-select-options="allListSelectOptions"
   >
     <template #actions>
       <cl-database-detail-actions-common />

frontend/crawlab-ui/src/views/index.ts

@@ -68,7 +68,6 @@ import ScheduleList from './schedule/list/ScheduleList.vue';
 import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailActionsCommon from './spider/detail/actions/SpiderDetailActionsCommon.vue';
 import SpiderDetailActionsData from './spider/detail/actions/SpiderDetailActionsData.vue';
-import SpiderDetailActionsDatabase from './spider/detail/actions/SpiderDetailActionsDatabase.vue';
 import SpiderDetailActionsFiles from './spider/detail/actions/SpiderDetailActionsFiles.vue';
 import SpiderDetailTabData from './spider/detail/tabs/SpiderDetailTabData.vue';
 import SpiderDetailTabDependencies from './spider/detail/tabs/SpiderDetailTabDependencies.vue';
@@ -195,7 +194,6 @@ export {
   SpiderDetail as ClSpiderDetail,
   SpiderDetailActionsCommon as ClSpiderDetailActionsCommon,
   SpiderDetailActionsData as ClSpiderDetailActionsData,
-  SpiderDetailActionsDatabase as ClSpiderDetailActionsDatabase,
   SpiderDetailActionsFiles as ClSpiderDetailActionsFiles,
   SpiderDetailTabData as ClSpiderDetailTabData,
   SpiderDetailTabDependencies as ClSpiderDetailTabDependencies,

frontend/crawlab-ui/src/views/spider/detail/actions/SpiderDetailActionsData.vue

@@ -3,19 +3,20 @@ import { computed, onBeforeMount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { EMPTY_OBJECT_ID, translate } from '@/utils';
-import { useDatabase } from '@/components';
 import useRequest from '@/services/request';
 import { useSpiderDetail } from '@/views';
 import { debounce } from 'lodash';
 import { DATABASE_STATUS_OFFLINE } from '@/constants/database';
+import { getDatabaseName } from '@/utils/database';
 
 const t = translate;
 
+const { get } = useRequest();
+
 // store
 const ns = 'spider';
 const store = useStore();
-const { spider: state, database: databaseState } =
-  store.state as RootStoreState;
+const { spider: state } = store.state as RootStoreState;
 
 // display all fields
 const displayAllFields = ref<boolean>(state.dataDisplayAllFields);
@@ -27,30 +28,15 @@ const form = computed(() => state.form);
 
 const { activeId } = useSpiderDetail();
 
-const allDatabaseSelectOptions = computed<SelectOption[]>(() => {
-  // TODO: implement
-  return [];
-  // return databaseState.allList.map(db => {
-  //   const value = db._id;
-  //   let dbName = db.name;
-  //   if (db._id === EMPTY_OBJECT_ID) {
-  //     dbName = t('components.database.default.name');
-  //   }
-  //   let label = dbName;
-  //   if (db.status === DATABASE_STATUS_OFFLINE) {
-  //     label = `${dbName} (${t('components.database.status.label.offline')})`;
-  //   }
-  //   return {
-  //     value,
-  //     label,
-  //   };
-  // });
-});
+const allDatabases = ref<Database[]>([]);
+const getAllDatabases = async () => {
+  const res = await get<Database[]>('/databases', { size: 100 });
+  allDatabases.value = res.data || [];
+};
+onBeforeMount(getAllDatabases);
 
 const currentDatabase = computed<Database | undefined>(() => {
-  // TODO: implement
-  return undefined;
-  // return allDatabaseDict.value.get(databaseId.value) as Database | undefined;
+  return allDatabases.value.find(db => db._id === databaseId.value);
 });
 
 const isDatabaseOffline = computed(() => {
@@ -58,6 +44,9 @@ const isDatabaseOffline = computed(() => {
 });
 
 const isDatabaseTableMissing = computed(() => {
+  if (currentDatabase.value?.data_source === 'mongo') {
+    return false;
+  }
   if (isMultiDatabases.value) {
     return !databaseTableSelectOptions.value.some(
       op =>
@@ -115,11 +104,9 @@ watch(
   }
 );
 const getDataSourceByDatabaseId = (id: string): DatabaseDataSource => {
-  // TODO: implement
-  return 'mongo';
-  // const db = allDatabaseDict.value.get(id) as Database | undefined;
-  // if (!db?.data_source) return 'mongo';
-  // return db.data_source;
+  const db = allDatabases.value.find(db => db._id === id) as Database;
+  if (!db?.data_source) return 'mongo';
+  return db.data_source;
 };
 
 // database table options
@@ -212,19 +199,19 @@ defineOptions({ name: 'ClSpiderDetailActionsData' });
           </div>
         </template>
         <el-option
-          v-for="(op, $index) in allDatabaseSelectOptions"
-          :key="$index"
-          :label="op.label"
-          :value="op.value"
+          v-for="db in allDatabases"
+          :key="db._id"
+          :label="getDatabaseName(db)"
+          :value="db._id"
         >
           <div>
             <cl-database-data-source
-              :data-source="getDataSourceByDatabaseId(op.value)"
+              :data-source="getDataSourceByDatabaseId(db._id!)"
               icon-only
             />
-            <span style="margin: 5px">{{ op.label }}</span>
+            <span style="margin: 5px">{{ getDatabaseName(db) }}</span>
             <cl-icon
-              v-if="op.value === EMPTY_OBJECT_ID"
+              v-if="db._id === EMPTY_OBJECT_ID"
               color="var(--cl-warning-color)"
               :icon="['fa', 'star']"
             />

frontend/crawlab-ui/src/views/spider/detail/actions/SpiderDetailActionsDatabase.vue

@@ -1,47 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { ElMessage } from 'element-plus';
-import { getStore } from '@/store';
-import { EMPTY_OBJECT_ID, translate } from '@/utils';
-import useDatabase from '@/components/core/database/useDatabase';
-
-const t = translate;
-
-const store = getStore();
-const { spider: state } = store.state;
-
-const form = computed(() => state.form);
-
-const { allListSelectOptions: allDatabaseSelectOptions } = useDatabase(store);
-
-const allDatabaseSelectOptionsWithDefault = computed<SelectOption[]>(() => {
-  return [
-    { label: t('common.mode.default'), value: EMPTY_OBJECT_ID },
-    ...allDatabaseSelectOptions.value,
-  ];
-});
-
-const onDatabaseChange = async (value: string) => {
-  ElMessage.success(t('components.database.message.success.change'));
-};
-
-defineOptions({ name: 'ClSpiderDetailActionsDatabase' });
-</script>
-
-<template>
-  <cl-nav-action-group>
-    <cl-nav-action-fa-icon :icon="['fa', 'database']" />
-    <template v-if="form">
-      <cl-nav-action-item>
-        <el-select v-model="form.data_source_id" @change="onDatabaseChange">
-          <el-option
-            v-for="(op, $index) in allDatabaseSelectOptionsWithDefault"
-            :key="$index"
-            :label="op.label"
-            :value="op.value"
-          />
-        </el-select>
-      </cl-nav-action-item>
-    </template>
-  </cl-nav-action-group>
-</template>

frontend/crawlab-ui/src/views/task/detail/TaskDetail.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { useStore } from 'vuex';
 import { useTaskDetail } from '@/views';
-import { useTask } from '@/components';
 import { formatTimeAgo, isPro } from '@/utils';
 
 const { activeTabName } = useTaskDetail();
 
-const store = useStore();
-const { allListSelectOptions } = useTask(store);
-
 const navItemLabelFn = (item: NavItem<Task>) => {
   if (!item.data) return item.label;
   const spiderName = item.data.spider?.name;
@@ -22,7 +17,6 @@ defineOptions({ name: 'ClTaskDetail' });
 <template>
   <cl-detail-layout
     store-namespace="task"
-    :all-list-select-options="allListSelectOptions"
     :nav-item-label-fn="navItemLabelFn"
   >
     <template #actions>