From 14c7d79d24e28178eb93d54ce994ef74404d5500 Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Tue, 10 Sep 2024 15:40:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20redis=E9=9B=86=E7=BE=A4?=
 =?UTF-8?q?=E5=AE=B9=E9=87=8F=E5=8F=98=E6=9B=B4=E8=B0=83=E6=95=B4=20#5659?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../redis/ClusterCapacityUpdate.vue           | 382 ++++++++----------
 1 file changed, 171 insertions(+), 211 deletions(-)

diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterCapacityUpdate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterCapacityUpdate.vue
index 0f59ee250c..804b1ba07c 100644
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterCapacityUpdate.vue
+++ b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterCapacityUpdate.vue
@@ -12,9 +12,47 @@
 -->
 
 <template>
-  <DbOriginalTable
-    :columns="columns"
-    :data="tableData" />
+  <BkLoading :loading="loading">
+    <BkTable
+      :data="tableData"
+      show-overflow-tooltip>
+      <BkTableColumn
+        field="master_domain"
+        :label="t('目标集群')">
+      </BkTableColumn>
+      <BkTableColumn
+        field="cluster_type_name"
+        :label="t('架构版本')">
+      </BkTableColumn>
+      <BkTableColumn
+        field="db_version"
+        :label="t('Redis版本')">
+      </BkTableColumn>
+      <BkTableColumn
+        :label="t('当前容量')"
+        :min-width="240">
+        <template #default="{ data }: { data: RowData }">
+          <TableGroupContent
+            v-if="data"
+            :columns="getCurrentColunms(data)" />
+        </template>
+      </BkTableColumn>
+      <BkTableColumn
+        :label="t('目标容量')"
+        :min-width="370">
+        <template #default="{ data }: { data: RowData }">
+          <TableGroupContent
+            v-if="data"
+            :columns="getTargetColunms(data)" />
+        </template>
+      </BkTableColumn>
+      <BkTableColumn :label="t('切换模式')">
+        <template #default="{ data }: { data: RowData }">
+          {{ data.online_switch_type === 'user_confirm' ? t('需人工确认') : t('无需确认') }}
+        </template>
+      </BkTableColumn>
+    </BkTable>
+  </BkLoading>
 </template>
 
 <script setup lang="tsx">
@@ -50,213 +88,7 @@
 
   const { infos, specs } = props.ticketDetails.details;
 
-  const columns = [
-    {
-      label: t('目标集群'),
-      field: 'master_domain',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('架构版本'),
-      field: 'cluster_type_name',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('Redis版本'),
-      field: 'db_version',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前容量'),
-      field: '',
-      minWidth: 240,
-      render: ({ data }: {data: RowData}) => {
-        const columns = [
-          {
-            title: t('当前容量'),
-            render: () => <ClusterCapacityUsageRate clusterStats={data.cluster_stats} />
-          },
-          {
-            title: t('资源规格'),
-            render: () => {
-              const currentSpec = {
-                ...data.cluster_spec,
-                id: data.cluster_spec.spec_id,
-                name: data.cluster_spec.spec_name,
-              }
-              return (
-                <RenderSpec
-                  data={currentSpec}
-                  hide-qps={!currentSpec.qps.max}
-                  is-ignore-counts />
-              )
-            }
-          },
-          {
-            title: t('机器组数'),
-            render: () => data.machine_pair_cnt
-          },
-          {
-            title: t('机器数量'),
-            render: () => data.machine_pair_cnt * 2
-          },
-          {
-            title: t('分片数'),
-            render: () => data.cluster_shard_num
-          },
-        ]
-        return <TableGroupContent columns={columns} />
-      }
-    },
-    {
-      label: t('目标容量'),
-      field: '',
-      minWidth: 370,
-      render: ({ data }: {data: RowData}) => {
-        const columns = [
-          {
-            title: t('目标容量'),
-            render: () => {
-              const { used = 0, total = 0 } = data.cluster_stats;
-              const targetTotal = convertStorageUnits(data.future_capacity, 'GB', 'B')
-              const currentValue = data.cluster_capacity || convertStorageUnits(total, 'B', 'GB')
-
-              let stats = {}
-              if (!_.isEmpty(data.cluster_stats)) {
-                stats = {
-                  used,
-                  total: targetTotal,
-                  in_use: Number((used / targetTotal * 100).toFixed(2))
-                }
-              }
-
-              return (
-                <>
-                  <ClusterCapacityUsageRate clusterStats={stats} />
-                  <ValueDiff
-                    currentValue={currentValue}
-                    num-unit="G"
-                    targetValue={data.future_capacity} />
-                </>
-              )
-            }
-          },
-          {
-            title: t('资源规格'),
-            render: () => {
-              const targetSpec = specs[data.resource_spec.backend_group.spec_id]
-              return (
-                <RenderSpec
-                  data={targetSpec}
-                  hide-qps={!targetSpec.qps.max}
-                  is-ignore-counts />
-              )
-            }
-          },
-          {
-            title: t('机器组数'),
-            render: () => {
-              const targetValue = data?.display_info?.new_group_num || 0
-              return (
-                <>
-                  <span>{targetValue}</span>
-                  <ValueDiff
-                    currentValue={data.machine_pair_cnt}
-                    show-rate={false}
-                    targetValue={targetValue} />
-                </>
-              )
-            }
-          },
-          {
-            title: t('机器数量'),
-            render: () => {
-              const targetValue = (data?.display_info?.new_group_num || 0) * 2
-              return (
-                <>
-                  <span>{targetValue}</span>
-                  <ValueDiff
-                    currentValue={data.machine_pair_cnt * 2}
-                    show-rate={false}
-                    targetValue={targetValue} />
-                </>
-              )
-            }
-          },
-          {
-            title: t('分片数'),
-            render: () => (
-              <>
-                <span>{data.shard_num}</span>
-                <ValueDiff
-                  currentValue={data.cluster_shard_num}
-                  show-rate={false}
-                  targetValue={data.shard_num} />
-              </>
-            )
-          },
-          {
-            title: t('变更方式'),
-            render: () => {
-              if (data.update_mode) {
-                return data.update_mode === 'keep_current_machines' ? t('原地变更') : t('替换变更')
-              }
-              return '--'
-            }
-          }
-        ]
-        return <TableGroupContent columns={columns} />
-      }
-    },
-    // {
-    //   label: t('集群分片数'),
-    //   field: 'shardNum',
-    //   showOverflowTooltip: true,
-    // },
-    // {
-    //   label: t('部署机器组数'),
-    //   field: 'groupNum',
-    //   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: 'sepc',
-    //   showOverflowTooltip: true,
-    //   render: ({ data }: {data: RowData}) => <span>{data.sepc.name}</span>,
-    // },
-    // {
-    //   label: t('变更方式'),
-    //   field: 'updateMode',
-    //   showOverflowTooltip: true,
-    //   render: ({ data }: {data: RowData}) => {
-    //     if (data.updateMode) {
-    //       <span>{data.updateMode === 'keep_current_machines' ? t('原地变更') : t('替换变更')}</span>
-    //     }
-    //     return <span>--</span>
-    //   }
-    // },
-    {
-      label: t('切换模式'),
-      field: 'online_switch_type',
-      width: 120,
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.online_switch_type === 'user_confirm' ? t('需人工确认') : t('无需确认')}</span>,
-    },
-  ];
-
-  useRequest(getRedisList, {
+  const { loading } = useRequest(getRedisList, {
     defaultParams: [{
       cluster_ids: infos.map((item) => item.cluster_id).join(','),
     }],
@@ -266,7 +98,7 @@
           [item.id]: item,
         });
         return results;
-      }, {} )
+      }, {})
       tableData.value = infos.map((infoItem) =>
       Object.assign(
         {},
@@ -275,6 +107,134 @@
       ));
     }
   })
+
+  const getCurrentColunms = (data: RowData) => [
+    {
+      title: t('当前容量'),
+      render: () => <ClusterCapacityUsageRate clusterStats={data.cluster_stats} />
+    },
+    {
+      title: t('资源规格'),
+      render: () => {
+        const currentSpec = {
+          ...data.cluster_spec,
+          id: data.cluster_spec.spec_id,
+          name: data.cluster_spec.spec_name,
+        }
+        return (
+          <RenderSpec
+            data={currentSpec}
+            hide-qps={!currentSpec.qps.max}
+            is-ignore-counts />
+        )
+      }
+    },
+    {
+      title: t('机器组数'),
+      render: () => data.machine_pair_cnt
+    },
+    {
+      title: t('机器数量'),
+      render: () => data.machine_pair_cnt * 2
+    },
+    {
+      title: t('分片数'),
+      render: () => data.cluster_shard_num
+    },
+  ]
+
+  const getTargetColunms = (data: RowData) => [
+    {
+      title: t('目标容量'),
+      render: () => {
+        const { used = 0, total = 0 } = data.cluster_stats;
+        const targetTotal = convertStorageUnits(data.future_capacity, 'GB', 'B')
+        const currentValue = data.cluster_capacity || convertStorageUnits(total, 'B', 'GB')
+
+        let stats = {}
+        if (!_.isEmpty(data.cluster_stats)) {
+          stats = {
+            used,
+            total: targetTotal,
+            in_use: Number((used / targetTotal * 100).toFixed(2))
+          }
+        }
+
+        return (
+          <>
+            <ClusterCapacityUsageRate clusterStats={stats} />
+            <ValueDiff
+              currentValue={currentValue}
+              num-unit="G"
+              targetValue={data.future_capacity} />
+          </>
+        )
+      }
+    },
+    {
+      title: t('资源规格'),
+      render: () => {
+        const targetSpec = specs[data.resource_spec.backend_group.spec_id]
+        return (
+          <RenderSpec
+            data={targetSpec}
+            hide-qps={!targetSpec.qps.max}
+            is-ignore-counts />
+        )
+      }
+    },
+    {
+      title: t('机器组数'),
+      render: () => {
+        const targetValue = data?.display_info?.new_group_num || 0
+        return (
+          <>
+            <span>{targetValue}</span>
+            <ValueDiff
+              currentValue={data.machine_pair_cnt}
+              show-rate={false}
+              targetValue={targetValue} />
+          </>
+        )
+      }
+    },
+    {
+      title: t('机器数量'),
+      render: () => {
+        const targetValue = (data?.display_info?.new_group_num || 0) * 2
+        return (
+          <>
+            <span>{targetValue}</span>
+            <ValueDiff
+              currentValue={data.machine_pair_cnt * 2}
+              show-rate={false}
+              targetValue={targetValue} />
+          </>
+        )
+      }
+    },
+    {
+      title: t('分片数'),
+      render: () => (
+        <>
+          <span>{data.shard_num}</span>
+          <ValueDiff
+            currentValue={data.cluster_shard_num}
+            show-rate={false}
+            targetValue={data.shard_num} />
+        </>
+      )
+    },
+    {
+      title: t('变更方式'),
+      render: () => {
+        if (data.update_mode) {
+          return data.update_mode === 'keep_current_machines' ? t('原地变更') : t('替换变更')
+        }
+        return '--'
+      }
+    }
+  ]
 </script>
 
 <style lang="less" scoped>