perf(frontend): redis工具箱重构 TencentBlueKing#8840

Author: 3octaves

dbm-ui/frontend/src/components/instance-selector/components/redis/table/Index.vue

@@ -340,12 +340,13 @@
     if (activePanel?.value) {
       emits('change', {
         ...props.lastValues,
-        [activePanel.value]: Object.values(checkedMap.value).map((item) => ({
-          ...item,
-          // 兼容历史遗留问题（对 bk_cloud_id, bk_cloud_name 的特殊处理）
-          bk_cloud_id: item.host_info?.cloud_id || 0,
-          bk_cloud_name: item.host_info?.cloud_area?.name || '--',
-        })),
+        [activePanel.value]: Object.values(checkedMap.value).map((item) =>
+          Object.assign(item, {
+            // 兼容历史遗留问题（对 bk_cloud_id, bk_cloud_name 的特殊处理）
+            bk_cloud_id: item.host_info?.cloud_id || 0,
+            bk_cloud_name: item.host_info?.cloud_area?.name || '--',
+          }),
+        ),
       });
     }
   };

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

@@ -50,6 +50,7 @@ export default class Redis extends ClusterBase {
   bk_biz_name: string;
   bk_cloud_id: number;
   bk_cloud_name: string;
+  city: string;
   cluster_access_port: number;
   cluster_alias: string;
   cluster_capacity: number;
@@ -107,6 +108,7 @@ export default class Redis extends ClusterBase {
     this.bk_biz_id = payload.bk_biz_id;
     this.bk_biz_name = payload.bk_biz_name;
     this.bk_cloud_id = payload.bk_cloud_id;
+    this.city = payload.city;
     this.bk_cloud_name = payload.bk_cloud_name;
     this.cluster_subzons = payload.cluster_subzons || [];
     this.cluster_access_port = payload.cluster_access_port;

dbm-ui/frontend/src/services/model/ticket/details/redis/clusterDataCopy.ts

@@ -8,11 +8,11 @@ export interface ClusterDataCopy extends DetailBase {
   };
   dts_copy_type: 'copy_to_other_system' | 'diff_app_diff_cluster' | 'one_app_diff_cluster' | 'user_built_to_dbm';
   infos: {
-    dst_bk_biz_id: number;
-    dst_cluster: number;
+    dst_bk_biz_id: number | string;
+    dst_cluster: number | string;
     key_black_regex: string; // 排除key
     key_white_regex: string; // 包含key
-    src_cluster: number;
+    src_cluster: number | string;
     src_cluster_password: string;
     src_cluster_type: string;
   }[];

dbm-ui/frontend/src/services/model/ticket/details/redis/clusterShardNumUpdate.ts

@@ -1,3 +1,5 @@
+import RedisModel from '@services/model/redis/redis';
+
 import { Affinity } from '@common/const';
 
 import type { DetailBase, DetailClusters, DetailSpecs } from '../common';
@@ -11,11 +13,15 @@ export interface ClusterShardNumUpdate extends DetailBase {
   infos: {
     capacity: number;
     cluster_shard_num: number;
+    cluster_spec?: RedisModel['cluster_spec']; // 展示字段，需兼容旧单据，下同
+    cluster_stats?: RedisModel['cluster_stats']; // 展示字段
     current_shard_num: number;
     current_spec_id: string;
     db_version: string;
     future_capacity: number;
+    machine_pair_cnt?: number; // 展示字段
     online_switch_type: 'user_confirm';
+    proxy?: RedisModel['proxy']; // 展示字段
     resource_spec: {
       backend_group: {
         affinity: Affinity.CROS_SUBZONE;

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

@@ -13,6 +13,7 @@ export * from './dataStructureTaskDelete';
 export * from './destroy';
 export * from './hotKeyAnalyse';
 export * from './insApply';
+export * from './installModule';
 export * from './instanceDestroy';
 export * from './instanceProxyClose';
 export * from './instanceProxyOpen';

dbm-ui/frontend/src/services/model/ticket/details/redis/installModule.ts

@@ -0,0 +1,11 @@
+import type { DetailBase, DetailClusters } from '../common';
+
+export interface InstallModule extends DetailBase {
+  bk_cloud_id: number;
+  clusters: DetailClusters;
+  infos: {
+    cluster_id: number;
+    db_version: string;
+    load_modules: string[];
+  }[];
+}

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

@@ -22,6 +22,7 @@ const getRootPath = () => `/apis/redis/bizs/${window.PROJECT_CONFIG.BIZ_ID}/dts`
 export function getRedisDTSHistoryJobs(params: {
   cluster_name?: string;
   end_time?: string;
+  id?: number;
   page?: number;
   page_size?: number;
   start_time?: string;

dbm-ui/frontend/src/views/db-manage/common/batch-edit-column-new/Index.vue

@@ -0,0 +1,190 @@
+<template>
+  <div
+    ref="rootRef"
+    v-bind="$attrs"
+    @click.stop="">
+    <BkButton
+      v-bk-tooltips="t('统一设置：将该列统一设置为相同的值')"
+      text
+      theme="primary"
+      @click="handleShow">
+      <DbIcon type="bulk-edit" />
+    </BkButton>
+  </div>
+  <div style="display: none">
+    <div
+      ref="popRef"
+      class="batch-edit-column-select-new">
+      <div class="main-title">{{ t('统一设置') }}{{ label }}</div>
+      <div
+        v-if="mode === 'default'"
+        class="title-spot mb-6"
+        style="font-weight: normal">
+        <span>{{ label }}</span> <span class="required" />
+      </div>
+      <slot />
+      <div class="footer-box">
+        <BkButton
+          size="small"
+          style="margin-left: auto"
+          theme="primary"
+          @click="handleConfirm">
+          {{ t('确认') }}
+        </BkButton>
+        <BkButton
+          class="ml-8"
+          size="small"
+          @click="handleCancel">
+          {{ t('取消') }}
+        </BkButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import tippy, { type Instance, type Props as TippyProps, type SingleTarget } from 'tippy.js';
+  import { useI18n } from 'vue-i18n';
+
+  // import BatchEditDatePick from './edit/DatePicker.vue';
+  // import BatchEditInput from './edit/Input.vue';
+  import BatchEditNumberInput from './edit/NumberInput.vue';
+  import BatchEditSelect from './edit/Select.vue';
+  import BatchEditTagInput from './edit/TagInput.vue';
+  // import BatchEditTextarea from './edit/Textarea.vue';
+
+  interface Props {
+    cancelHandler?: () => Promise<any> | void;
+    confirmHandler: () => Promise<any> | void;
+    label: string;
+    mode?: 'default' | 'custom';
+  }
+
+  let tippyInstance: Instance | undefined;
+
+  const createTippy = (target: SingleTarget, options: TippyProps) => {
+    if (!tippyInstance) {
+      tippyInstance = tippy(target, options);
+    }
+  };
+  export {
+    // BatchEditDatePick,
+    // BatchEditInput,
+    BatchEditNumberInput,
+    BatchEditSelect,
+    BatchEditTagInput,
+    // BatchEditTextarea,
+  };
+</script>
+<script setup lang="ts">
+  const props = withDefaults(defineProps<Props>(), {
+    cancelHandler: () => Promise.resolve(),
+    mode: 'default',
+  });
+
+  const { t } = useI18n();
+
+  const rootRef = useTemplateRef('rootRef');
+  const popRef = useTemplateRef('popRef');
+
+  const getTippyOptions = (): TippyProps => ({
+    appendTo: () => document.body,
+    arrow: true,
+    content: popRef.value,
+    hideOnClick: false,
+    interactive: true,
+    maxWidth: 'none',
+    offset: [0, 12],
+    placement: 'top-start',
+    popperOptions: {
+      modifiers: [
+        {
+          name: 'flip',
+          options: {
+            allowedAutoPlacements: ['top-start', 'top-end'],
+            fallbackPlacements: ['top', 'bottom'],
+          },
+        },
+      ],
+      strategy: 'fixed',
+    },
+    theme: 'light batch-edit-column-theme',
+    trigger: 'click',
+    zIndex: 999,
+  });
+
+  const handleShow = () => {
+    destroyTippy();
+    const tippyTarget = rootRef.value!.children[0];
+    if (tippyTarget) {
+      createTippy(tippyTarget as SingleTarget, getTippyOptions());
+      tippyInstance!.show();
+    }
+  };
+
+  const handleConfirm = () => {
+    // tag-input 组件内为200ms后失焦处理失焦的回调，这里将任务添加至失焦回调后，以获取最新值
+    setTimeout(() => {
+      Promise.resolve()
+        .then(() => props.confirmHandler())
+        .then(() => {
+          tippyInstance!.hide();
+        });
+    }, 210);
+  };
+
+  const handleCancel = () => {
+    Promise.resolve()
+      .then(() => props.cancelHandler())
+      .then(() => {
+        tippyInstance!.hide();
+      });
+  };
+
+  const destroyTippy = () => {
+    if (tippyInstance) {
+      tippyInstance.hide();
+      tippyInstance.unmount();
+      tippyInstance.destroy();
+      tippyInstance = undefined;
+    }
+  };
+
+  onBeforeUnmount(() => {
+    destroyTippy();
+  });
+</script>
+
+<style lang="less">
+  .batch-edit-column-select-new {
+    width: 395px;
+
+    .main-title {
+      margin-bottom: 20px;
+      font-size: 16px;
+      color: #313238;
+    }
+
+    .footer-box {
+      margin-top: 30px;
+      text-align: end;
+
+      button {
+        width: 60px;
+      }
+    }
+  }
+
+  .tippy-box[data-theme~='batch-edit-column-theme'] {
+    padding: 16px;
+    background-color: #fff;
+    border: 1px solid #dcdee5 !important;
+    border-radius: 4px !important;
+    box-shadow: 0 0 6px 0 #dcdee5 !important;
+
+    .tippy-content {
+      padding: 0;
+      background-color: #fff;
+    }
+  }
+</style>

dbm-ui/frontend/src/views/db-manage/common/batch-edit-column-new/edit/DatePicker.vue

@@ -0,0 +1,14 @@
+<template>
+  <BkDatePicker
+    v-model="modelValue"
+    v-bind="attrs"
+    :clearable="false"
+    style="width: 100%"
+    type="datetime" />
+</template>
+
+<script setup lang="ts" generic="T extends [string, string] | [Date, Date] | string | Date">
+  const modelValue = defineModel<T>();
+
+  const attrs = useAttrs();
+</script>

dbm-ui/frontend/src/views/db-manage/common/batch-edit-column-new/edit/Input.vue

@@ -0,0 +1,12 @@
+<template>
+  <BkInput
+    v-bind="attrs"
+    ref="inputRef"
+    v-model="modelValue"
+    clearable />
+</template>
+<script setup lang="ts">
+  const modelValue = defineModel<string>();
+
+  const attrs = useAttrs();
+</script>