feat(frontend): 单据管理迭代_1203 #7190

# Reviewed, transaction id: 25675
TencentBlueKing · Dec 3, 2024 · 50158b5 · 50158b5
1 parent a18caad
commit 50158b5
Show file tree

Hide file tree

Showing 13 changed files with 232 additions and 579 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3745,5 +3745,6 @@
   "强制实例下架：": "强制实例下架：",
   "Excel文件：": "Excel文件：",
   "不一致时间范围:": "不一致时间范围:",
+  "变更信息:": "变更信息:",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts
@@ -28,8 +28,6 @@ export * from './proxyOpen';
 export * from './proxyScaleDown';
 export * from './proxyScaleUp';
 export * from './purge';
-export * from './scaleDown';
-export * from './scaleUp';
 export * from './scaleUpdown';
 export * from './slotsMigrate';
 export * from './versionUpdateOnline';
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleDown.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleDown.ts
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUp.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUp.ts
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUpdown.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUpdown.ts
@@ -1,3 +1,4 @@
+import type RedisModel from '@services/model/redis/redis';
 import type { OnlineSwitchType } from '@services/types';
 
 import type { DetailBase, DetailClusters, DetailSpecs } from '../common';
@@ -22,6 +23,10 @@ export interface ScaleUpdown extends DetailBase {
         affinity: 'CROS_SUBZONE';
       };
     };
+    display_info: Pick<
+      RedisModel,
+      'cluster_stats' | 'cluster_spec' | 'cluster_shard_num' | 'cluster_capacity' | 'machine_pair_cnt'
+    >;
   }[];
   specs: DetailSpecs;
 }
diff --git a/...end/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderSwitchMode.vue b/...end/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderSwitchMode.vue
@@ -41,7 +41,7 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<string>;
+    getValue: () => Promise<OnlineSwitchType>;
   }
 
   const props = withDefaults(defineProps<Props>(), {

diff --git a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/Row.vue
@@ -123,6 +123,10 @@
         affinity: AffinityType; // 暂时固定 'CROS_SUBZONE',
       };
     };
+    display_info: Pick<
+      RedisModel,
+      'cluster_stats' | 'cluster_spec' | 'cluster_shard_num' | 'cluster_capacity' | 'machine_pair_cnt'
+    >;
   }
 
   // 创建表格数据
@@ -166,13 +170,27 @@
   const targetCapacityRef = ref<InstanceType<typeof RenderTargetCapacity>>();
   const switchModeRef = ref<InstanceType<typeof RenderSwitchMode>>();
   const localTargetVersion = ref<string>('');
+  const displayInfo = ref<InfoItem['display_info']>({
+    cluster_stats: {},
+    cluster_spec: {},
+    cluster_shard_num: 0,
+    cluster_capacity: 0,
+    machine_pair_cnt: 0,
+  } as InfoItem['display_info']);
 
   const handleTargetVersionChange = (value: string) => {
     localTargetVersion.value = value;
   };
 
   const handleInputFinish = (value: RedisModel) => {
     emits('clusterInputFinish', value);
+    displayInfo.value = {
+      cluster_stats: value.cluster_stats,
+      cluster_spec: value.cluster_spec,
+      cluster_shard_num: value.cluster_shard_num,
+      cluster_capacity: value.cluster_capacity,
+      machine_pair_cnt: value.machine_pair_cnt,
+    };
   };
 
   const handleAppend = () => {
@@ -185,7 +203,7 @@
 
   defineExpose<Exposes>({
     async getValue() {
-      await clusterRef.value!.getValue(true);
+      await clusterRef.value!.getValue();
       return Promise.all([
         versionRef.value!.getValue(),
         switchModeRef.value!.getValue(),
@@ -198,6 +216,7 @@
           bk_cloud_id: props.data.bkCloudId,
           online_switch_type: switchMode,
           ...targetCapacity,
+          display_info: displayInfo.value,
         };
       });
     },

diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue
@@ -279,6 +279,8 @@
     const newList = list.reduce((result, item) => {
       const domain = item.master_domain;
       if (!domainMemo[domain]) {
+        console.log(item, 'item');
+
         const row = generateTableRow(item);
         result.push(row);
         domainMemo[domain] = true;

diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
@@ -485,7 +485,7 @@
         machine_pair: specInfo.count
       })
       Object.assign(capacityInfo, {
-        current: specInfo.totalCapcity,
+        current: props.data.capacity.total,
         future: specInfo.totalCapcity
       })
     }

diff --git a/...ter/common/ticket-detail/components/task-info/com-factory/redis/ClusterShardNumUpdate.vue b/...ter/common/ticket-detail/components/task-info/com-factory/redis/ClusterShardNumUpdate.vue
@@ -12,162 +12,99 @@
 -->
 
 <template>
-  <div
-    class="ticket-details-item"
-    style="align-items: flex-start">
-    <span class="ticket-details-item-label">{{ t('变更信息') }}：</span>
-    <span class="ticket-details-item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-
-  <div class="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
-      </span>
-    </div>
-    <div
+  <BkTable
+    :data="ticketDetails.details.infos"
+    show-overflow-tooltip>
+    <BkTableColumn
+      :label="t('源集群')"
+      :min-width="180">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.src_cluster].immute_domain }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('架构版本')">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.src_cluster].cluster_type_name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      :label="t('当前集群容量/QPS')"
+      :min-width="150">
+      <template #default="{ data }: { data: RowData }">
+        {{
+          `${data.capacity}G_${ticketDetails.details.specs[data.resource_spec.backend_group.spec_id].qps.max}/s(${data.current_shard_num}片)`
+        }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="capacity"
+      :label="t('当前容量需求')" />
+    <BkTableColumn
+      field="future_capacity"
+      :label="t('未来容量需求')" />
+    <BkTableColumn
+      :label="t('部署方案')"
+      :min-width="150">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.specs[data.resource_spec.backend_group.spec_id].name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="db_version"
+      :label="t('版本')" />
+    <BkTableColumn :label="t('切换模式')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.online_switch_type === 'user_confirm' ? t('需人工确认') : t('无需确认') }}
+      </template>
+    </BkTableColumn>
+  </BkTable>
+  <InfoList>
+    <InfoItem :label="t('校验与修复类型:')">
+      {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
+    </InfoItem>
+    <InfoItem
       v-if="ticketDetails.details.data_check_repair_setting.type !== 'no_check_no_repair'"
-      class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
-      </span>
-    </div>
-  </div>
+      :label="t('校验与修复频率设置:')">
+      {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
+    </InfoItem>
+  </InfoList>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import RedisModel from '@services/model/redis/redis';
   import TicketModel, { type Redis } from '@services/model/ticket/ticket';
-  import { getRedisListByBizId } from '@services/source/redis';
 
   import { TicketTypes } from '@common/const';
 
   import { repairAndVerifyFrequencyList, repairAndVerifyTypeList } from '@views/db-manage/redis/common/const';
 
+  import InfoList, { Item as InfoItem } from '../components/info-list/Index.vue';
+
   interface Props {
-    ticketDetails: TicketModel<Redis.ClusterShardNumUpdate>
+    ticketDetails: TicketModel<Redis.ClusterShardNumUpdate>;
   }
 
-  interface RowData {
-    deployPlan: string,
-    capacity: number,
-    futureCapacity: number,
-    dbVersion: string,
-    switchMode: string,
-  }
+  type RowData = Props['ticketDetails']['details']['infos'][number];
 
-  const props = defineProps<Props>();
+  defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.REDIS_CLUSTER_SHARD_NUM_UPDATE,
-    inheritAttrs: false
-  })
+    inheritAttrs: false,
+  });
 
   const { t } = useI18n();
 
-  const tableData = ref<RowData[]>([]);
-
-  const { infos } = props.ticketDetails.details;
-
-  const columns = [
-    {
-      label: t('源集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('架构版本'),
-      field: 'clusterTypeName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前集群容量/QPS'),
-      field: 'currentSepc',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前容量需求'),
-      field: 'capacity',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.capacity}G</span>,
-    },
-    {
-      label: t('未来容量需求'),
-      field: 'futureCapacity',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.futureCapacity}G</span>,
-    },
-    {
-      label: t('部署方案'),
-      field: 'deployPlan',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('版本'),
-      field: 'dbVersion',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('切换模式'),
-      field: 'switchMode',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.switchMode === 'user_confirm' ? t('需人工确认') : t('无需确认')}</span>,
-    },
-  ];
-
   const repairAndVerifyTypesMap = generateMap(repairAndVerifyTypeList);
 
   const repairAndVerifyFrequencyMap = generateMap(repairAndVerifyFrequencyList);
 
-  const { loading } = useRequest(getRedisListByBizId, {
-    defaultParams: [{
-      bk_biz_id: props.ticketDetails.bk_biz_id,
-      offset: 0,
-      limit: -1,
-    }],
-    onSuccess: async (result) => {
-      if (result.results.length < 1) {
-        return;
-      }
-
-      const clusterMap = result.results.reduce((obj, item) => {
-        Object.assign(obj, { [item.id]: item });
-        return obj;
-      }, {} as Record<string, RedisModel>);
-      tableData.value = infos.map((item) => {
-        const currentCluster = clusterMap[item.src_cluster];
-        const specConfig = currentCluster.cluster_spec;
-        return ({
-          clusterName: currentCluster.master_domain,
-          clusterType: currentCluster.cluster_spec.spec_cluster_type,
-          clusterTypeName: currentCluster.cluster_type_name,
-          currentSepc: `${currentCluster.cluster_capacity}G_${specConfig.qps.max}/s（${item.current_shard_num} 分片）`,
-          deployPlan: `${item.cluster_shard_num} 分片`,
-          dbVersion: item.db_version,
-          switchMode: item.online_switch_type,
-          capacity: item.capacity,
-          futureCapacity: item.future_capacity,
-        });
-      });
-    },
-  });
-
   // 生成映射表
-  function generateMap(arr: { label: string, value: string}[]) {
-    return arr.reduce((obj, item) => {
+  function generateMap(arr: { label: string; value: string }[]) {
+    return arr.reduce<Record<string, string>>((obj, item) => {
       Object.assign(obj, { [item.value]: item.label });
       return obj;
-    }, {} as Record<string, string>);
+    }, {});
   }
 </script>