feat(frontend): redis、tendbcluster的webcosole #5905

# Reviewed, transaction id: 15839
TencentBlueKing · Aug 20, 2024 · 8686feb · 8686feb
1 parent 608d66a
commit 8686feb
Show file tree

Hide file tree

Showing 28 changed files with 1,157 additions and 750 deletions.
diff --git a/dbm-ui/frontend/src/components/db-app-select/Index.vue b/dbm-ui/frontend/src/components/db-app-select/Index.vue
@@ -126,6 +126,10 @@
 </script>
 <style lang="less">
   .bk-app-select-menu[data-theme='dark'] {
+    .bk-app-select-menu-filter input {
+      color: #c4c6cc;
+    }
+
     .not-permission {
       * {
         color: #70737a !important;

diff --git a/dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/mongo/Index.vue
@@ -59,7 +59,7 @@
           </div>
         </template>
         <template #main>
-          <div style="height: 570px;">
+          <div style="height: 570px">
             <RenderTopoHost
               :cluster-id="selectClusterId"
               :disabled-row-config="disabledRowConfig"
@@ -89,35 +89,35 @@
   interface TopoTreeData {
     id: number;
     name: string;
-    obj: 'biz' | 'cluster',
-    count: number,
+    obj: 'biz' | 'cluster';
+    count: number;
     children: Array<TopoTreeData>;
   }
 
   interface Emits {
-    (e: 'change', value: InstanceSelectorValues<T>): void
+    (e: 'change', value: InstanceSelectorValues<T>): void;
   }
 
   type TableConfigType = Required<PanelListType[number]>['tableConfig'];
   type TopoConfigType = Required<PanelListType[number]>['topoConfig'];
 
   interface Props {
-    lastValues: InstanceSelectorValues<T>,
-    tableSetting: TableSetting,
-    multiple: NonNullable<TableConfigType['multiple']>,
-    firsrColumn?: TableConfigType['firsrColumn'],
-    roleFilterList?: TableConfigType['roleFilterList'],
-    isRemotePagination?: TableConfigType['isRemotePagination'],
-    disabledRowConfig?: TableConfigType['disabledRowConfig'],
-    topoAlertContent?: TopoConfigType['topoAlertContent'],
-    filterClusterId?: TopoConfigType['filterClusterId'], // 过滤的集群ID，单集群模式
+    lastValues: InstanceSelectorValues<T>;
+    tableSetting: TableSetting;
+    multiple: NonNullable<TableConfigType['multiple']>;
+    firsrColumn?: TableConfigType['firsrColumn'];
+    roleFilterList?: TableConfigType['roleFilterList'];
+    isRemotePagination?: TableConfigType['isRemotePagination'];
+    disabledRowConfig?: TableConfigType['disabledRowConfig'];
+    topoAlertContent?: TopoConfigType['topoAlertContent'];
+    filterClusterId?: TopoConfigType['filterClusterId']; // 过滤的集群ID，单集群模式
     // eslint-disable-next-line vue/no-unused-properties
-    getTopoList: NonNullable<TopoConfigType['getTopoList']>
+    getTopoList: NonNullable<TopoConfigType['getTopoList']>;
     // eslint-disable-next-line vue/no-unused-properties
-    getTableList: NonNullable<TableConfigType['getTableList']>,
-    statusFilter?: TableConfigType['statusFilter'],
+    getTableList: NonNullable<TableConfigType['getTableList']>;
+    statusFilter?: TableConfigType['statusFilter'];
     // eslint-disable-next-line vue/no-unused-properties
-    countFunc?: TopoConfigType['countFunc'],
+    countFunc?: TopoConfigType['countFunc'];
   }
 
   const props = withDefaults(defineProps<Props>(), {
@@ -138,13 +138,8 @@
   const TopoAlertContent = computed(() => (!isCloseAlert.value ? props.topoAlertContent : null));
   const filterClusterId = computed(() => props.filterClusterId);
 
-  const {
-    treeRef,
-    isLoading,
-    treeData,
-    selectClusterId,
-    fetchResources,
-  } = useTopoData<Record<string, any>>(filterClusterId);
+  const { treeRef, isLoading, treeData, selectClusterId, fetchResources } =
+    useTopoData<Record<string, any>>(filterClusterId);
 
   fetchResources();
 
@@ -154,13 +149,13 @@
     info: unknown,
     {
       __is_open: isOpen,
-      __is_selected: isSelected }:
-      {
-        __is_open: boolean,
-        __is_selected: boolean
-      },
+      __is_selected: isSelected,
+    }: {
+      __is_open: boolean;
+      __is_selected: boolean;
+    },
   ) => {
-    const rawNode = treeRef.value.getData().data.find((item: { id: number; }) => item.id === node.id);
+    const rawNode = treeRef.value.getData().data.find((item: { id: number }) => item.id === node.id);
     selectClusterId.value = node.id;
     if (!isOpen && !isSelected) {
       treeRef.value.setNodeOpened(rawNode, true);
@@ -185,7 +180,6 @@
   const handleCloseAlert = () => {
     isCloseAlert.value = true;
   };
-
 </script>
 <style lang="less">
   .instance-selector-topo {