feat(frontend): 新增redis迁移单据 #7784

Author: 3octaves

dbm-ui/frontend/src/common/const/ticketTypes.ts

@@ -82,6 +82,8 @@ export enum TicketTypes {
   REDIS_SCALE_UP = 'REDIS_SCALE_UP',
   REDIS_SCALE_UPDOWN = 'REDIS_SCALE_UPDOWN',
   REDIS_VERSION_UPDATE_ONLINE = 'REDIS_VERSION_UPDATE_ONLINE',
+  REDIS_CLUSTER_INS_MIGRATE = 'REDIS_CLUSTER_INS_MIGRATE',
+  REDIS_SINGLE_INS_MIGRATE = 'REDIS_SINGLE_INS_MIGRATE',
 }
 export enum TicketTypes {
   TENDBCLUSTER_APPLY = 'TENDBCLUSTER_APPLY',

dbm-ui/frontend/src/components/db-card-checkbox/CardCheckbox.vue

@@ -14,7 +14,7 @@
 <template>
   <div
     v-bk-tooltips="{
-      disabled: !disabled,
+      disabled: !disabled || !disabledTooltips,
       content: disabledTooltips,
     }"
     class="card-checkbox"

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

@@ -148,6 +148,7 @@
     spec_id?: number;
     role: string;
     shard?: string;
+    version?: string;
   }
 
   export type InstanceSelectorValues<T> = Record<string, T[]>;

dbm-ui/frontend/src/components/instance-selector/components/common/manual-content-host/table/Index.vue

@@ -102,6 +102,7 @@
     cluster_type: '',
     master_domain: data.related_clusters[0].immute_domain,
     bk_cloud_name: data.bk_cloud_name,
+    related_clusters: data.related_clusters || [],
     related_instances: (data.related_instances || []).map(instanceItem => ({
       instance: instanceItem.instance,
       status: instanceItem.status

dbm-ui/frontend/src/components/instance-selector/components/common/manual-content/table/Index.vue

@@ -86,6 +86,7 @@
     db_module_id: data.db_module_id,
     db_module_name: data.db_module_name,
     master_domain: data.master_domain,
+    spec_config: data.spec_config
   });
 
   const { t } = useI18n();

dbm-ui/frontend/src/components/instance-selector/components/mysql/useTopoData.ts

@@ -66,7 +66,6 @@ export function useTopoData<T extends Record<string, any>>(filterClusterId: Comp
       .getTopoList(params)
       .then((data) => {
         const countFn = currentInstance.proxy?.countFunc;
-
         const formatData = data.map((item: T) => {
           let count = item.instance_count;
           if (role === 'slave') {

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

@@ -55,6 +55,7 @@
     type IValue,
     type PanelListType,
   } from '../../../Index.vue';
+  import RenderInstance from '../../common/render-instance/Index.vue';
   import SerachBar from '../../common/SearchBar.vue';
 
   import { useTableData } from './useTableData';
@@ -91,12 +92,17 @@
     cluster_id: data.related_clusters[0].id,
     port: 0,
     instance_address: '',
-    cluster_type: '',
+    cluster_type: data.cluster_type,
     master_domain: data.related_clusters[0].immute_domain,
     bk_cloud_name: data.bk_cloud_name,
+    related_clusters: data.related_clusters || [],
     related_instances: (data.related_instances || []).map(instanceItem => ({
       instance: instanceItem.instance,
-      status: instanceItem.status
+      status: instanceItem.status,
+      bk_cloud_id: instanceItem.bk_cloud_id,
+      bk_host_id: instanceItem.bk_host_id,
+      ip: instanceItem.ip,
+      port: instanceItem.port,
     })),
     spec_config: data.spec_config,
     db_module_id: data.db_module_id,
@@ -212,6 +218,13 @@
       label: props.firsrColumn?.label ? props.firsrColumn.label : t('实例'),
       field: props.firsrColumn?.field ? props.firsrColumn.field : 'instance_address',
     },
+    {
+      label: t('关联实例'),
+      field: 'related_instances',
+      showOverflowTooltip: true,
+      width: 200,
+      render: ({ data }: DataRow) => <RenderInstance data={data.related_instances || []}></RenderInstance>,
+    },
     {
       minWidth: 100,
       label: t('云区域'),
@@ -276,7 +289,7 @@
       field: item.field,
       disabled: firstColumnFieldId.value === item.field,
     })),
-    checked: [firstColumnFieldId.value, 'bk_cloud_id', 'role', 'status', 'cloud_area', 'alive', 'host_name', 'os_name'],
+    checked: [firstColumnFieldId.value, 'related_instances', 'bk_cloud_id', 'role', 'status', 'cloud_area', 'alive', 'host_name', 'os_name'],
   }))
 
 

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

@@ -105,7 +105,10 @@
     db_module_id: data.db_module_id,
     db_module_name: data.db_module_name,
     master_domain: data.master_domain,
-    role: data.role
+    role: data.role,
+    spec_config: data.spec_config,
+    related_clusters: data.related_clusters,
+    version: data?.version || '',
   });
 
   const { t } = useI18n();
@@ -224,6 +227,7 @@
       field: 'instance_role',
       showOverflowTooltip: true,
       filter: props.roleFilterList,
+      render: ({ data }: DataRow) => data.instance_role || '--'
     },
     {
       label: t('实例状态'),

dbm-ui/frontend/src/components/instance-selector/components/redis/table/useTableData.ts

@@ -80,7 +80,7 @@ export function useTableData<T>(
     }
     if (clusterId?.value && clusterId.value !== currentBizId) {
       Object.assign(params, {
-        cluster_ids: clusterId.value,
+        cluster_id: clusterId.value,
       });
     }
     return params;

dbm-ui/frontend/src/components/render-table/columns/spec-display/Panel.vue

@@ -14,7 +14,7 @@
 <template>
   <BkPopover
     height="0"
-    placement="bottom"
+    :placement="placement"
     :popover-delay="[100, 200]"
     theme="light"
     width="514">
@@ -86,6 +86,8 @@
   </BkPopover>
 </template>
 <script setup lang="ts">
+  import { Popover } from 'bkui-vue';
+  import type { ComponentProps } from 'vue-component-type-helpers';
   import { useI18n } from 'vue-i18n';
 
   export interface SpecInfo {
@@ -114,6 +116,7 @@
   interface Props {
     data?: SpecInfo;
     hideQps?: boolean;
+    placement?: ComponentProps<typeof Popover>['placement'];
   }
 
   withDefaults(defineProps<Props>(), {
@@ -142,6 +145,7 @@
       ],
     }),
     hideQps: false,
+    placement: 'bottom',
   });
 
   const { t } = useI18n();