From f707f0c1ce6a5bab26246dbdf08a7d6ddd44df12 Mon Sep 17 00:00:00 2001
From: 3octaves <873551943@qq.com>
Date: Tue, 3 Sep 2024 16:45:19 +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
---
.../cluster-spec-plan-selector/Index.vue | 10 +++-
.../components/MongoConfigSpec.vue | 6 ++-
.../page1/components/ClusterDeployPlan.vue | 49 ++++++++++---------
3 files changed, 39 insertions(+), 26 deletions(-)
diff --git a/dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue b/dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue
index 5aeb2f9f0e..004070e435 100644
--- a/dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue
+++ b/dbm-ui/frontend/src/components/cluster-spec-plan-selector/Index.vue
@@ -234,8 +234,14 @@
- {data.spec_name}
+ style="display: flex"
+ onClick={() => handleRowClick(data)}>
+ event.stopPropagation()}>
+ {data.spec_name}
+
),
},
diff --git a/dbm-ui/frontend/src/views/mongodb-manage/components/MongoConfigSpec.vue b/dbm-ui/frontend/src/views/mongodb-manage/components/MongoConfigSpec.vue
index 27a72bd864..87a1fa83bd 100644
--- a/dbm-ui/frontend/src/views/mongodb-manage/components/MongoConfigSpec.vue
+++ b/dbm-ui/frontend/src/views/mongodb-manage/components/MongoConfigSpec.vue
@@ -164,10 +164,12 @@
v-model={modelValue.value.spec_id}
label={data.spec_id}
key={index}
- class="spec-radio">
+ class="spec-radio"
+ onClick={(event: Event) => handleRowClick(event, data)}>
+ v-overflow-tips
+ onClick={(event: Event) => event.stopPropagation()}>
{data.spec_name}
diff --git a/dbm-ui/frontend/src/views/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue b/dbm-ui/frontend/src/views/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
index 2620b908a4..70ee89318e 100644
--- a/dbm-ui/frontend/src/views/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
+++ b/dbm-ui/frontend/src/views/redis/capacity-change/pages/page1/components/ClusterDeployPlan.vue
@@ -345,27 +345,29 @@
const { t } = useI18n();
const handleBeforeClose = useBeforeClose();
+ const createDefaultTargetInfo = () => ({
+ capacity: 0,
+ spec: {
+ name: '',
+ cpu: {} as ClusterSpecModel['cpu'],
+ id: 0,
+ mem: {} as ClusterSpecModel['mem'],
+ qps: {} as ClusterSpecModel['qps'],
+ storage_spec: [] as ClusterSpecModel['storage_spec']
+ },
+ groupNum: 0,
+ requireMachineGroupNum: 0,
+ shardNum: 0,
+ updateMode: ''
+ })
+
const capacityNeed = ref();
const radioValue = ref(-1);
const radioChoosedId = ref(''); // 标记,sort重新定位index用
const isTableLoading = ref(false);
const isConfirmLoading = ref(false);
const tableData = ref([]);
- const targetInfo = ref({
- capacity: 0,
- spec: {
- name: '',
- cpu: {} as ClusterSpecModel['cpu'],
- id: 0,
- mem: {} as ClusterSpecModel['mem'],
- qps: {} as ClusterSpecModel['qps'],
- storage_spec: [] as ClusterSpecModel['storage_spec']
- },
- groupNum: 0,
- requireMachineGroupNum: 0,
- shardNum: 0,
- updateMode: ''
- });
+ const targetInfo = ref(createDefaultTargetInfo());
const specDisabledMap = shallowRef>({})
@@ -418,7 +420,7 @@
label={index}
v-model={radioValue.value}
disabled={specDisabledMap.value[row.spec_id]}>
- {row.spec_name}
+ {row.spec_name}
),
@@ -442,6 +444,12 @@
let rawTableData: ClusterSpecModel[] = [];
+ watch(radioValue, () => {
+ if (radioValue.value !== -1) {
+ getUpdateInfo(tableData.value[radioValue.value])
+ }
+ })
+
const handleSearchClusterSpec = async () => {
if (capacityNeed.value === undefined) {
return;
@@ -463,6 +471,7 @@
isTableLoading.value = false;
});
radioValue.value = -1
+ targetInfo.value = createDefaultTargetInfo()
tableData.value = retArr;
rawTableData = _.cloneDeep(retArr);
specDisabledMap.value = {}
@@ -485,7 +494,7 @@
emits('clickCancel');
}
- const getUpdateInfo = (row: ClusterSpecModel, index: number) => {
+ const getUpdateInfo = (row: ClusterSpecModel) => {
getRedisClusterCapacityUpdateInfo({
cluster_id: props.clusterId!,
new_storage_version: props.targetVerison!,
@@ -515,20 +524,16 @@
shardNum: row.cluster_shard_num,
updateMode: updateInfo.capacity_update_type
}
- radioValue.value = index;
radioChoosedId.value = row.spec_name;
})
}
- const getUpdateInfoDebounce = _.debounce(getUpdateInfo, 200)
-
const handleRowClick = (event: PointerEvent, row: ClusterSpecModel, index: number) => {
if (index === radioValue.value || specDisabledMap.value[row.spec_id]) {
return
}
- // TODO 这里暂时通过防抖,来防止触发两次请求
- getUpdateInfoDebounce(row, index)
+ radioValue.value = index
};
const handleColumnSort = (data: { column: { field: string }, index: number, type: string }) => {