feat(frontend): mongodb webconsole #9915

Author: JustaCattt

dbm-ui/frontend/src/services/model/mongodb/mongodb.ts

@@ -81,6 +81,7 @@ export default class Mongodb extends ClusterBase {
     mongodb_enable_disable: boolean;
     mongodb_plugin_create_clb: boolean;
     mongodb_view: boolean;
+    mongodb_webconsole: boolean;
   };
   phase: string;
   phase_name: string;

dbm-ui/frontend/src/utils/index.ts

@@ -42,5 +42,6 @@ export * from './random';
 export * from './recentDays';
 export * from './time';
 export * from './url';
+export * from './validateBrackets';
 export * from './vNodeToHtml';
 export * from './vueHelper';

dbm-ui/frontend/src/utils/validateBrackets.ts

@@ -0,0 +1,35 @@
+/**
+ * 校验语句是否为完整的脚本语句
+ * @example const isValid = validateBrackets('db.find({"{"})');
+ * console.log(isValid); // true
+ * @param input 语句
+ * @returns boolean
+ */
+export function validateBrackets(input: string): boolean {
+  const stack: string[] = [];
+  const pairs: Record<string, string> = {
+    ')': '(',
+    ']': '[',
+    '}': '{',
+  };
+
+  // 过滤掉注释内容（包括 // 和 /* */）
+  const withoutComments = input
+    .replace(/\/\/.*$/gm, '') // 去掉单行注释
+    .replace(/\/\*[\s\S]*?\*\//g, ''); // 去掉多行注释
+
+  // 过滤掉成对的引号内容
+  const filteredInput = withoutComments.replace(/(["'])(?:(?=(\\?))\2.)*?\1/g, '');
+
+  for (const char of filteredInput) {
+    if (['(', '[', '{'].includes(char)) {
+      stack.push(char); // 开括号入栈
+    } else if ([')', ']', '}'].includes(char)) {
+      if (stack.pop() !== pairs[char]) {
+        return false; // 括号不匹配
+      }
+    }
+  }
+
+  return stack.length === 0; // 栈为空表示所有括号匹配
+}

dbm-ui/frontend/src/views/db-manage/common/webconsole/Index.vue

@@ -62,6 +62,7 @@
 
   import ClearScreen from './components/ClearScreen.vue';
   import ClusterTabs, { type ClusterItem } from './components/ClusterTabs.vue';
+  import MongodbConsolePanel from './components/console-panel/mongodb/Index.vue';
   import MysqlConsolePanel from './components/console-panel/mysql/Index.vue';
   import RedisConsolePanel from './components/console-panel/redis/Index.vue';
   import ExportData from './components/ExportData.vue';
@@ -81,6 +82,7 @@
   const { t } = useI18n();
 
   const consolePanelMap = {
+    [DBTypes.MONGODB]: MongodbConsolePanel,
     [DBTypes.MYSQL]: MysqlConsolePanel,
     [DBTypes.REDIS]: RedisConsolePanel,
     [DBTypes.TENDBCLUSTER]: MysqlConsolePanel,

dbm-ui/frontend/src/views/db-manage/common/webconsole/components/ClusterTabs.vue

@@ -4,7 +4,7 @@
       v-for="(clusterId, index) in selectedClusters"
       :key="clusterId"
       class="tab-item"
-      :class="{ 'item-selected': clusterId === modelValue }"
+      :class="{ 'item-selected': clusterId === localClusterId }"
       @click="() => handleActiveTab(clusterId)">
       <div class="active-bar"></div>
       <div class="tab-item-content">
@@ -30,8 +30,7 @@
       class="add-icon-main">
       <DbIcon
         class="add-icon"
-        type="increase"
-        @click="handleClickAddIcon" />
+        type="increase" />
     </div>
   </div>
   <div style="display: none">
@@ -40,24 +39,28 @@
       class="webconsole-select-clusters"
       :style="{ height: clustersPanelHeight }">
       <div class="title">{{ t('连接的集群') }}</div>
-      <BkSelect
-        ref="clutersRef"
-        class="clusters-select"
-        disable-focus-behavior
-        filterable
-        :model-value="selectedClusters"
-        multiple
-        :popover-options="{ disableTeleport: true }"
-        @change="handleClusterSelectChange">
-        <template #trigger>
-          <span></span>
-        </template>
-        <BkOption
-          v-for="item in clusterList"
-          :key="item.id"
-          :name="item.immute_domain"
-          :value="item.id" />
-      </BkSelect>
+      <div class="clusters-select">
+        <BkInput
+          v-model="searchValue"
+          behavior="simplicity"
+          class="cluster-select-search"
+          :placeholder="t('请输入关键字')">
+          <template #prefix>
+            <DbIcon
+              class="input-icon"
+              type="search" />
+          </template>
+        </BkInput>
+        <ul class="cluster-select-warpper">
+          <li
+            v-for="item in renderOptions"
+            :key="item.id"
+            class="cluster-select-option"
+            @click="handleClusterSelectChange([item.id])">
+            {{ item.immute_domain }}
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -96,20 +99,16 @@
   const { t } = useI18n();
   const route = useRoute();
 
-  const modelValue = defineModel({
-    default: 0 as number,
-    type: Number,
-  });
-
   const routeClusterId = route.query.clusterId;
   let clustersRaw: ClusterItem[] = [];
   let tippyIns: Instance | undefined;
 
-  const clutersRef = ref();
   const addTabRef = ref();
   const popRef = ref();
+  const localClusterId = ref(0);
   const clustersMap = ref<Record<number, ClusterItem>>({});
   const selectedClusters = ref<number[]>([]);
+  const searchValue = ref('');
 
   const clustersPanelHeight = computed(() => {
     if (!clusterList.value) {
@@ -122,6 +121,10 @@
     return `${height}px`;
   });
 
+  const renderOptions = computed(() =>
+    clusterList.value?.filter((item) => item.immute_domain.indexOf(searchValue.value) !== -1),
+  );
+
   const { data: clusterList } = useRequest(queryAllTypeCluster, {
     defaultParams: [
       {
@@ -158,7 +161,7 @@
     }
     const id = ids.pop()!;
     selectedClusters.value.push(id);
-    modelValue.value = id;
+    localClusterId.value = id;
     emits('change', clustersMap.value[id]);
     updateClusterSelect();
     tippyIns?.hide();
@@ -169,7 +172,7 @@
   };
 
   const handleActiveTab = (id: number) => {
-    modelValue.value = id;
+    localClusterId.value = id;
     emits('change', clustersMap.value[id]);
   };
 
@@ -185,21 +188,15 @@
     const currentClusterId = selectedClusters.value[index];
     selectedClusters.value.splice(index, 1);
     const clusterCount = selectedClusters.value.length;
-    if (currentClusterId === modelValue.value) {
+    if (currentClusterId === localClusterId.value) {
       emits('removeTab', currentClusterId);
       // 关闭当前打开tab
-      modelValue.value = clusterCount === 0 ? 0 : selectedClusters.value[clusterCount - 1];
-      emits('change', clustersMap.value[modelValue.value]);
+      localClusterId.value = clusterCount === 0 ? 0 : selectedClusters.value[clusterCount - 1];
+      emits('change', clustersMap.value[localClusterId.value]);
     }
     updateClusterSelect();
   };
 
-  const handleClickAddIcon = () => {
-    setTimeout(() => {
-      clutersRef.value.showPopover();
-    });
-  };
-
   onMounted(() => {
     tippyIns = tippy(addTabRef.value as SingleTarget, {
       appendTo: () => document.body,
@@ -209,14 +206,6 @@
       interactive: true,
       maxWidth: 'none',
       offset: [0, 0],
-      onHide() {
-        clutersRef.value.hidePopover();
-      },
-      onShow() {
-        setTimeout(() => {
-          clutersRef.value.showPopover();
-        });
-      },
       placement: 'bottom-start',
       theme: 'light',
       trigger: 'mouseenter click',
@@ -245,10 +234,42 @@
     padding: 0 !important;
 
     .clusters-select {
-      .bk-select-popover {
-        border: none;
-        transform: translate3d(0, 41px, 0);
-        box-shadow: none;
+      margin: 8px;
+
+      .cluster-select-search {
+        border-bottom: 1px solid #eaebf0;
+      }
+
+      .input-icon {
+        display: flex;
+        padding-left: 8px;
+        font-size: 16px;
+        color: #c4c6cc;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .cluster-select-warpper {
+        margin-top: 4px;
+      }
+
+      .cluster-select-option {
+        position: relative;
+        display: flex;
+        height: 32px;
+        overflow: hidden;
+        font-size: 12px;
+        color: #63656e;
+        text-align: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        cursor: pointer;
+        user-select: none;
+        align-items: center;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
       }
     }
 
@@ -367,14 +388,6 @@
         font-size: 15px;
         color: #c4c6cc;
       }
-
-      .clusters-select {
-        .bk-select-popover {
-          border: none;
-          transform: translate3d(0, 41px, 0);
-          box-shadow: none;
-        }
-      }
     }
   }
 </style>