perf(frontend): mongodb工具箱重构_全库备份 #8498

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

@@ -319,6 +319,7 @@
       getResourceList: getTendbsingleList,
       tableContent: TendbSingleTable,
       resultContent: ResultPreview,
+      showPreviewResultTitle: true,
     },
     [ClusterTypes.MONGO_REPLICA_SET]: {
       id: ClusterTypes.MONGO_REPLICA_SET,
@@ -333,6 +334,7 @@
       getResourceList: getMongoList,
       tableContent: MongoTable,
       resultContent: ResultPreview,
+      showPreviewResultTitle: true,
     },
     [ClusterTypes.MONGO_SHARED_CLUSTER]: {
       id: ClusterTypes.MONGO_SHARED_CLUSTER,

dbm-ui/frontend/src/components/render-table/columns/operate-column/index.vue

@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <FixedColumn>
+  <EditableTableColumn label="操作">
     <div class="action-box">
       <div
         v-if="showAdd"
@@ -37,12 +37,17 @@
         <DbIcon type="copy-2" />
       </div>
     </div>
-  </FixedColumn>
+  </EditableTableColumn>
 </template>
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
-  import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
+  import {
+    // Block as EditBlock,
+    Column as EditableTableColumn,
+    // Row as EditableTableRow,
+  } from '@components/editable-table/Index.vue';
+  // import FixedColumn from '@components/render-table/columns/fixed-column/index.vue';
 
   interface Props {
     showAdd?: boolean;

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

@@ -36,6 +36,7 @@ export * from './useTableSettings';
 export * from './useTagsOverflow';
 export * from './useTaskCount';
 export * from './useTicketCloneInfo';
+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/services/model/ticket/details/mongodb/MONGODB_FULL_BACKUP.ts

@@ -0,0 +1,10 @@
+import type { DetailBase, DetailClusters } from '../common';
+
+export interface DbBackupDetails extends DetailBase {
+  clusters: DetailClusters;
+  file_tag: string;
+  infos: {
+    cluster_id: number;
+  }[];
+  oplog: boolean;
+}

dbm-ui/frontend/src/services/model/ticket/details/mongodb/index.ts

@@ -0,0 +1 @@
+export * from './MONGODB_FULL_BACKUP';

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

@@ -19,6 +19,7 @@ import { t } from '@locales/index';
 
 import type { DetailBase } from './details/common';
 
+export type * as Mongodb from './details/mongodb';
 export type * as Mysql from './details/mysql';
 export type * as Redis from './details/redis';
 export type * as Sqlserver from './details/sqlserver';

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/mongodb/MONGODB_FULL_BACKUP/Index.vue

@@ -0,0 +1,49 @@
+<!--
+ * 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 athttps://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.
+-->
+
+<template>
+  <Component :is="com" />
+</template>
+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  import Page1 from './pages/page1/Index.vue';
+  import Page2 from './pages/page2/Index.vue';
+
+  const route = useRoute();
+
+  const comMap = {
+    ticket: Page1,
+    success: Page2,
+  };
+
+  const page = ref('');
+
+  const com = computed(() => {
+    if (comMap[page.value as keyof typeof comMap]) {
+      return comMap[page.value as keyof typeof comMap];
+    }
+    return Page1;
+  });
+
+  watch(
+    route,
+    () => {
+      page.value = route.params.page as string;
+    },
+    {
+      immediate: true,
+    },
+  );
+</script>