From 9335eb1d3a6b293cce8b559938ad2bcf5960325a Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@163.com>
Date: Mon, 14 Oct 2024 18:31:24 +0800
Subject: [PATCH] feat: added database status in spider detail page

---
 src/store/modules/spider.ts                   | 12 +++-
 .../actions/SpiderDetailActionsData.vue       | 68 +++++++++++++++++--
 2 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/src/store/modules/spider.ts b/src/store/modules/spider.ts
index db2387101345f..034d502d13ad7 100644
--- a/src/store/modules/spider.ts
+++ b/src/store/modules/spider.ts
@@ -20,6 +20,7 @@ import {
   getBaseFileStoreMutations,
   getBaseFileStoreState,
 } from '@/store/utils/file';
+import { ElMessage } from 'element-plus';
 
 // i18n
 const t = translate;
@@ -119,9 +120,14 @@ const actions = {
     { commit }: StoreActionContext<SpiderStoreState>,
     id: string
   ) => {
-    const res = await get(`/databases/${id}/metadata`);
-    commit('setDatabaseMetadata', res.data);
-    return res.data;
+    try {
+      const res = await get(`/databases/${id}/metadata`);
+      commit('setDatabaseMetadata', res.data);
+      return res.data;
+    } catch (e: any) {
+      ElMessage.error(e.message);
+      commit('setDatabaseMetadata', undefined);
+    }
   },
 } as SpiderStoreActions;
 
diff --git a/src/views/spider/detail/actions/SpiderDetailActionsData.vue b/src/views/spider/detail/actions/SpiderDetailActionsData.vue
index b5cf575bd57e9..42e7b48a76688 100644
--- a/src/views/spider/detail/actions/SpiderDetailActionsData.vue
+++ b/src/views/spider/detail/actions/SpiderDetailActionsData.vue
@@ -7,6 +7,7 @@ import { useDatabase } from '@/components';
 import useRequest from '@/services/request';
 import { useSpiderDetail } from '@/views';
 import { debounce } from 'lodash';
+import { DATABASE_STATUS_OFFLINE } from '@/constants/database';
 
 const t = translate;
 
@@ -15,7 +16,8 @@ const { get } = useRequest();
 // store
 const ns = 'spider';
 const store = useStore();
-const { spider: state } = store.state as RootStoreState;
+const { spider: state, database: databaseState } =
+  store.state as RootStoreState;
 
 // display all fields
 const displayAllFields = ref<boolean>(state.dataDisplayAllFields);
@@ -27,14 +29,51 @@ const form = computed(() => state.form);
 
 const { activeId } = useSpiderDetail();
 
-const {
-  allListSelectOptions: allDatabaseSelectOptions,
-  allDict: allDatabaseDict,
-} = useDatabase(store);
+const { allDict: allDatabaseDict } = useDatabase(store);
 onBeforeMount(() => {
   store.dispatch(`database/getAllList`);
 });
 
+const allDatabaseSelectOptions = computed<SelectOption[]>(() => {
+  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 currentDatabase = computed(() => {
+  return allDatabaseDict.value.get(dataSourceId.value) as Database | undefined;
+});
+
+const isDatabaseOffline = computed(() => {
+  return currentDatabase.value?.status === DATABASE_STATUS_OFFLINE;
+});
+
+const isDatabaseTableMissing = computed(() => {
+  if (isMultiDatabases.value) {
+    return !databaseTableSelectOptions.value.some(
+      op =>
+        op.value === form.value?.db_name &&
+        op.children?.some(c => c.value === form.value?.col_name)
+    );
+  } else {
+    return !databaseTableSelectOptions.value.some(
+      op => op.value === form.value?.col_name
+    );
+  }
+});
+
 const databaseMetadata = computed(() => state.databaseMetadata);
 const isMultiDatabases = computed<boolean>(() => {
   if (!databaseMetadata.value?.databases?.length) return false;
@@ -153,6 +192,7 @@ defineOptions({ name: 'ClSpiderDetailActionsData' });
     <cl-nav-action-item>
       <el-select
         class="database"
+        :class="isDatabaseOffline ? 'offline' : ''"
         v-model="dataSourceId"
         @change="onDatabaseChange"
       >
@@ -197,10 +237,12 @@ defineOptions({ name: 'ClSpiderDetailActionsData' });
       <template v-if="isMultiDatabases">
         <el-cascader
           class="table"
+          :class="isDatabaseTableMissing ? 'missing' : ''"
           v-model="multiDbTableName"
           :options="databaseTableSelectOptions"
           filterable
           :placeholder="t('components.spider.actions.data.placeholder.table')"
+          :disabled="isDatabaseOffline"
           @change="onMultiDbTableChange"
         >
           <template #label="{ label }">
@@ -214,9 +256,11 @@ defineOptions({ name: 'ClSpiderDetailActionsData' });
       <template v-else>
         <el-select
           class="table"
+          :class="isDatabaseTableMissing ? 'missing' : ''"
           v-model="tableName"
           filterable
           :placeholder="t('components.spider.actions.data.placeholder.table')"
+          :disabled="isDatabaseOffline"
           @change="onTableChange"
         >
           <template #label="{ label }">
@@ -274,6 +318,20 @@ defineOptions({ name: 'ClSpiderDetailActionsData' });
 
     &.database {
       width: 160px;
+
+      &.offline {
+        &:deep(.el-select__wrapper) {
+          box-shadow: 0 0 0 1px var(--cl-danger-color) inset;
+        }
+      }
+    }
+
+    &.table {
+      &.missing {
+        &:deep(.el-select__wrapper) {
+          box-shadow: 0 0 0 1px var(--cl-danger-color) inset;
+        }
+      }
     }
   }