perf(frontend): mongodb工具箱重构

dbm-ui/frontend/src/components/cluster-selector/Index.vue

@@ -333,6 +333,7 @@
       getResourceList: getMongoList,
       tableContent: MongoTable,
       resultContent: ResultPreview,
+      showPreviewResultTitle: true,
     },
     [ClusterTypes.MONGO_SHARED_CLUSTER]: {
       id: ClusterTypes.MONGO_SHARED_CLUSTER,
@@ -347,6 +348,7 @@
       getResourceList: getMongoList,
       tableContent: MongoTable,
       resultContent: ResultPreview,
+      showPreviewResultTitle: true,
     },
     [ClusterTypes.SQLSERVER_SINGLE]: {
       id: ClusterTypes.SQLSERVER_SINGLE,
@@ -483,14 +485,14 @@
             return result;
           }
           const tabSelectMap = {
-            map: props.selected[tabKey].reduce(
+            map: _.cloneDeep(props.selected[tabKey]).reduce(
               (selectResult, selectItem) => ({
                 ...selectResult,
                 [selectItem.id]: selectItem,
               }),
               {} as Record<string, T>,
             ),
-            list: props.selected[tabKey],
+            list: _.cloneDeep(props.selected[tabKey]),
           };
           return {
             ...result,

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

@@ -37,6 +37,7 @@ export * from './useTagsOverflow';
 export * from './useTaskCount';
 export * from './useTicketCloneInfo';
 export * from './useTicketCount';
+export * from './useTicketDetail';
 export * from './useTicketMessage';
 export * from './useTimeZoneFormat';
 export * from './useUrlSearach';

dbm-ui/frontend/src/hooks/useTicketDetail.ts

@@ -0,0 +1,68 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+import { useRequest } from 'vue-request';
+import { useRoute } from 'vue-router';
+
+import type { DetailBase } from '@services/model/ticket/details/common';
+import TicketModel from '@services/model/ticket/ticket';
+import { getTicketDetails } from '@services/source/ticket';
+
+import { TicketTypes } from '@common/const';
+
+export function useTicketDetail<T extends DetailBase>(
+  ticketType: TicketTypes,
+  options: {
+    onSuccess: (data: TicketModel<T>) => void;
+  },
+) {
+  const route = useRoute();
+  const { ticketId } = route.query;
+
+  if (!ticketId) {
+    return;
+  }
+
+  useRequest(getTicketDetails, {
+    defaultParams: [{ id: Number(ticketId) }, { permission: 'catch' }],
+    onSuccess(ticketData) {
+      if (ticketType !== ticketData.ticket_type) {
+        return;
+      }
+      options.onSuccess(ticketData as TicketModel<T>);
+    },
+  });
+}
+
+// export function useTicketDetail(
+//   ticketType: TicketTypes | TicketTypes[],
+//   options: {
+//     onSuccess: (data: TicketModel<unknown>, matchingType: TicketTypes) => void;
+//   },
+// ) {
+//   const route = useRoute();
+//   const { ticketId } = route.query;
+//   const { onSuccess } = options;
+//   if (!ticketId) {
+//     return;
+//   }
+//   useRequest(getTicketDetails, {
+//     defaultParams: [{ id: Number(ticketId) }, { permission: 'catch' }],
+//     onSuccess(ticketData) {
+//       const ticketTypeList = Array.isArray(ticketType) ? ticketType : [ticketType];
+//       if (!ticketTypeList.includes(ticketData.ticket_type)) {
+//         return;
+//       }
+//       onSuccess(ticketData, ticketData.ticket_type);
+//     },
+//   });
+// }

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3924,5 +3924,11 @@
   "已选 IP": "已选 IP",
   "业务资源池": "业务资源池",
   "冷/热节点": "冷/热节点",
+  "目标集群n输入格式有误": "目标集群 {n} 输入格式有误",
+  "目标集群n不存在": "目标集群 {n} 不存在",
+  "目标集群n重复": "目标集群 {n} 重复",
+  "待替换的主机重复": "待替换的主机重复",
+  "请输入或选择主机": "请输入或选择主机",
+  "目标主机输入格式有误": "目标主机输入格式有误",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/services/source/dbbase.ts

@@ -31,12 +31,14 @@ export function verifyDuplicatedClusterName(params: { cluster_type: string; name
  */
 export function filterClusters<
   T extends {
+    id: number;
     bk_biz_id: number;
     bk_cloud_id: number;
     bk_cloud_name: string;
     cluster_name: string;
     cluster_type: string;
     major_version: string;
+    master_domain: string;
   },
 >(params: { bk_biz_id: number; exact_domain?: string; cluster_ids?: string; domain?: string }) {
   return http.get<T[]>(`${path}/filter_clusters/`, params);
@@ -96,7 +98,11 @@ export function checkClusterDatabase(params: { bk_biz_id: number; cluster_id: nu
 }
 
 // 根据用户手动输入的ip[:port]查询真实的实例
-export function checkInstance<T extends InstanceInfos>(params: { instance_addresses: string[]; bk_biz_id: number }) {
+export function checkInstance<T extends InstanceInfos>(params: {
+  instance_addresses: string[];
+  bk_biz_id: number;
+  cluster_ids?: number[];
+}) {
   return http.post<T[]>(`${path}/check_instances/`, params);
 }
 

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

@@ -0,0 +1,18 @@
+<template>
+  <BkFormItem :label="t('备注')">
+    <BkInput
+      v-model="modelValue"
+      :maxlength="500"
+      :placeholder="t('请提供更多有用信息申请信息_以获得更快审批')"
+      style="width: 700px"
+      type="textarea" />
+  </BkFormItem>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  const { t } = useI18n();
+
+  const modelValue = defineModel<string>();
+</script>

dbm-ui/frontend/src/views/db-manage/common/toolbox-field/edit-spec/Index.vue

@@ -0,0 +1,161 @@
+<template>
+  <EditableTableColumn
+    class="edit-spec-column"
+    :field="field"
+    :label="label"
+    required
+    :width="300">
+    <template
+      v-if="labelTip"
+      #head>
+      <BkPopover
+        :content="labelTip"
+        placement="top"
+        theme="dark">
+        <span class="edit-spec-column-label-tip">{{ label }}</span>
+      </BkPopover>
+    </template>
+    <EditSelect v-model="modelValue">
+      <SpecPanel
+        v-for="(item, index) in specList"
+        :key="index"
+        :data="item.specData">
+        <template #hover>
+          <BkOption
+            :key="index"
+            :label="item.label"
+            :value="item.value">
+            <div class="edit-spec-column-spec-item">
+              <span class="text-overflow">
+                {{ item.label }}
+                <BkTag
+                  v-if="currentSpecIds?.includes(item.value)"
+                  size="small"
+                  theme="info">
+                  {{ t('当前规格') }}
+                </BkTag>
+              </span>
+              <span class="count">
+                {{ item.specData.count }}
+              </span>
+            </div>
+          </BkOption>
+        </template>
+      </SpecPanel>
+    </EditSelect>
+  </EditableTableColumn>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getSpecResourceCount } from '@services/source/dbresourceResource';
+  import { getResourceSpecList } from '@services/source/dbresourceSpec';
+
+  import { Column as EditableTableColumn, Select as EditSelect } from '@components/editable-table/Index.vue';
+
+  import SpecPanel, { type SpecInfo } from './components/SpecPanel.vue';
+
+  interface Props {
+    label: string;
+    labelTip?: string;
+    field: string;
+    clusterType?: string;
+    machineType?: string;
+    bkCloudId?: number;
+    currentSpecIds?: number[];
+  }
+
+  const props = defineProps<Props>();
+
+  const modelValue = defineModel<number>();
+
+  const { t } = useI18n();
+
+  const specList = ref<
+    {
+      value: number;
+      label: string;
+      specData: SpecInfo;
+    }[]
+  >([]);
+
+  const { run: fetchSpecResourceCount } = useRequest(getSpecResourceCount, {
+    manual: true,
+    onSuccess(data) {
+      specList.value.forEach((item) => {
+        Object.assign(item.specData, {
+          count: data[item.specData.id],
+        });
+      });
+    },
+  });
+
+  const { run: fetchResourceSpecList } = useRequest(getResourceSpecList, {
+    manual: true,
+    onSuccess(data) {
+      specList.value = data.results.map((item) => ({
+        value: item.spec_id,
+        label: item.spec_name,
+        specData: {
+          name: item.spec_name,
+          cpu: item.cpu,
+          id: item.spec_id,
+          mem: item.mem,
+          count: 0,
+          storage_spec: item.storage_spec,
+        },
+      }));
+      if (props.bkCloudId) {
+        fetchSpecResourceCount({
+          bk_biz_id: window.PROJECT_CONFIG.BIZ_ID,
+          bk_cloud_id: props.bkCloudId,
+          spec_ids: specList.value.map((item) => item.specData.id),
+        });
+      }
+    },
+  });
+
+  watch(
+    () => [props.clusterType, props.machineType],
+    () => {
+      if (props.clusterType && props.machineType) {
+        fetchResourceSpecList({
+          spec_cluster_type: props.clusterType,
+          spec_machine_type: props.machineType,
+          limit: -1,
+          offset: 0,
+        });
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>
+
+<style lang="less" scoped>
+  .edit-spec-column-label-tip {
+    border-bottom: 1px dashed #979ba5;
+  }
+
+  .edit-spec-column-spec-item {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+
+    .count {
+      height: 16px;
+      min-width: 20px;
+      font-size: 12px;
+      line-height: 16px;
+      color: @gray-color;
+      text-align: center;
+      background-color: #f0f1f5;
+      border-radius: 2px;
+    }
+  }
+</style>