Skip to content

Commit f79b68f

Browse files
JustaCatttygcyao
JustaCattt
authored and
ygcyao
committed
fix(frontend): redis容量变更侧滑重构 TencentBlueKing#10470 
1 parent e7063f1 commit f79b68f

File tree

23 files changed

+1682
-1348
lines changed

23 files changed

+1682
-1348
lines changed

‎dbm-ui/frontend/src/components/db-form/index.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,16 @@
3131
model?: Record<string, any>;
3232
}
3333
34+
defineOptions({
35+
name: 'DbForm',
36+
});
37+
3438
const props = withDefaults(defineProps<Props>(), {
3539
autoLabelWidth: false,
3640
formType: 'default',
3741
model: () => ({}),
3842
});
3943
40-
defineOptions({
41-
name: 'DbForm',
42-
});
4344
const dbFormRef = ref();
4445
4546
watch(

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
import SpecPanel from './Panel.vue';
4343
4444
interface Props {
45-
data?: {
45+
data: {
4646
count?: number;
4747
cpu: {
4848
max: number;
@@ -70,8 +70,7 @@
7070
placeholder?: string;
7171
}
7272
73-
withDefaults(defineProps<Props>(), {
74-
data: undefined,
73+
const props = withDefaults(defineProps<Props>(), {
7574
hideQps: true,
7675
isIgnoreCounts: false,
7776
isLoading: false,

‎dbm-ui/frontend/src/locales/zh-cn.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4577,5 +4577,13 @@
45774577
"执行命令": "执行命令",
45784578
"执行占比": "执行占比",
45794579
"将会终止节点运行，并置为强制失败状态": "将会终止节点运行，并置为强制失败状态",
4580+
"当前text": "当前{text}",
4581+
"目标text": "目标{text}",
4582+
"容量": "容量",
4583+
"实验": "实验",
4584+
"组数不能为空": "组数不能为空",
4585+
"容量不能为空": "容量不能为空",
4586+
"MySQL单节点_集群详情": "MySQL单节点 集群详情",
4587+
"MySQL主从集群_集群详情": "MySQL主从集群 集群详情",
45804588
"这行勿动！新增翻译请在上一行添加！": ""
45814589
}

‎dbm-ui/frontend/src/services/model/resource-spec/resourceSpec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export default class ResourceSpec {
7676
this.instance_num = payload.instance_num ?? 0;
7777
this.qps = payload.qps || {};
7878
this.permission = payload.permission || {};
79+
this.capacity = payload.capacity || 0;
7980
}
8081

8182
get isRecentSeconds() {

‎dbm-ui/frontend/src/services/source/redisToolbox.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,13 @@ export function getClusterVersions(params: {
6565
return http.get<string[]>(`${getRootPath()}/get_cluster_versions/`, params);
6666
}
6767

68+
/**
69+
* 查询集群可更新大版本
70+
*/
71+
export function listClusterBigVersion(params: { bk_biz_id: number; cluster_id: number }) {
72+
return http.get<string[]>(`${getRootPath()}/list_cluster_big_version/`, params);
73+
}
74+
6875
/**
6976
* 根据IP/实例查询关联对
7077
*/

‎dbm-ui/frontend/src/views/db-manage/common/apply-items/SpecSelector.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@
121121
interface Expose {
122122
getData: () => {
123123
instance_num?: number;
124-
} & Pick<ResourceSpecModel, 'spec_name' | 'cpu' | 'mem' | 'storage_spec' | 'qps' | 'capacity'>;
124+
} & Pick<ResourceSpecModel, 'spec_id' | 'spec_name' | 'cpu' | 'mem' | 'storage_spec' | 'qps' | 'capacity'>;
125125
}
126126
127127
const props = withDefaults(defineProps<Props>(), {
@@ -202,7 +202,10 @@
202202
list.value = list.value.map((item) => ({
203203
...item,
204204
count: data[item.spec_id],
205+
isRecentSeconds: item.isRecentSeconds ?? false,
205206
name: item.spec_name,
207+
qpsText: item.qpsText ?? '',
208+
updateAtDisplay: item.updateAtDisplay ?? '',
206209
}));
207210
});
208211
}, 100);
@@ -233,6 +236,7 @@
233236
instance_num: instanceNum && instanceNum > 0 ? instanceNum : undefined,
234237
mem: item.mem,
235238
qps: item.qps,
239+
spec_id: item.spec_id,
236240
spec_name: item.spec_name,
237241
storage_spec: item.storage_spec,
238242
};

‎dbm-ui/frontend/src/views/db-manage/common/value-diff/Index.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,13 @@
2222
<script setup lang="ts">
2323
interface Props {
2424
currentValue: number;
25+
/**
26+
* 单位
27+
*/
2528
numUnit?: string;
29+
/**
30+
* 是否展示百分数
31+
*/
2632
showRate?: boolean;
2733
targetValue: number;
2834
}
@@ -40,13 +46,15 @@
4046
if (diff !== 0 && currentValue > 0 && showRate) {
4147
rate = Math.round((diff / currentValue) * 100).toFixed(2);
4248
}
49+
// 负数
4350
if (diff < 0) {
4451
return {
4552
isPositive: false,
4653
num: diff,
4754
rate,
4855
};
4956
}
57+
// 非负数
5058
return {
5159
isPositive: true,
5260
num: `+${diff}`,

‎dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/Index.vue‎

Lines changed: 24 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -122,26 +122,7 @@
122122
spec_id: number;
123123
update_mode: string;
124124
};
125-
cluster: {
126-
group_num: RedisModel['machine_pair_cnt'];
127-
shard_num: RedisModel['cluster_shard_num'];
128-
} & Pick<
129-
RedisModel,
130-
| 'cluster_stats'
131-
| 'cluster_spec'
132-
| 'id'
133-
| 'master_domain'
134-
| 'cluster_type'
135-
| 'cluster_type_name'
136-
| 'bk_cloud_id'
137-
| 'major_version'
138-
| 'cluster_capacity'
139-
| 'disaster_tolerance_level'
140-
>;
141-
cluster_capacity: {
142-
total: number;
143-
used: number;
144-
};
125+
cluster: RedisModel;
145126
db_version: string;
146127
online_switch_type: string;
147128
}
@@ -161,24 +142,22 @@
161142
spec_id: 0,
162143
update_mode: '',
163144
},
164-
cluster: data.cluster || {
165-
bk_cloud_id: 0,
166-
cluster_capacity: 0,
167-
cluster_spec: {} as RedisModel['cluster_spec'],
168-
cluster_stats: {} as RedisModel['cluster_stats'],
169-
cluster_type: ClusterTypes.REDIS_CLUSTER,
170-
cluster_type_name: '',
171-
disaster_tolerance_level: Affinity.CROS_SUBZONE,
172-
group_num: 0,
173-
id: 0,
174-
major_version: '',
175-
master_domain: '',
176-
shard_num: 0,
177-
},
178-
cluster_capacity: data.cluster_capacity || {
179-
total: 1,
180-
used: 0,
181-
},
145+
cluster:
146+
data.cluster ||
147+
({
148+
bk_cloud_id: 0,
149+
cluster_capacity: 0,
150+
cluster_shard_num: 0,
151+
cluster_spec: {} as RedisModel['cluster_spec'],
152+
cluster_stats: {} as RedisModel['cluster_stats'],
153+
cluster_type: ClusterTypes.REDIS_CLUSTER,
154+
cluster_type_name: '',
155+
disaster_tolerance_level: Affinity.CROS_SUBZONE,
156+
id: 0,
157+
machine_pair_cnt: 0,
158+
major_version: '',
159+
master_domain: '',
160+
} as RedisModel),
182161
db_version: data.db_version || '',
183162
online_switch_type: data.online_switch_type || '',
184163
});
@@ -227,21 +206,17 @@
227206
cluster: {
228207
bk_cloud_id: clusterInfo.bk_cloud_id,
229208
cluster_capacity: item.display_info.cluster_capacity,
209+
cluster_shard_num: item.shard_num,
230210
cluster_spec: item.display_info.cluster_spec,
231211
cluster_stats: item.display_info.cluster_stats,
232212
cluster_type: clusterInfo.cluster_type,
233213
cluster_type_name: clusterInfo.cluster_type_name,
234214
disaster_tolerance_level: clusterInfo.disaster_tolerance_level as Affinity,
235-
group_num: item.group_num,
236215
id: clusterInfo.id,
216+
machine_pair_cnt: item.group_num,
237217
major_version: clusterInfo.major_version,
238218
master_domain: clusterInfo.immute_domain,
239-
shard_num: item.shard_num,
240-
},
241-
cluster_capacity: {
242-
total: item.display_info.cluster_capacity,
243-
used: 0,
244-
},
219+
} as RedisModel,
245220
db_version: item.db_version,
246221
online_switch_type: item.online_switch_type,
247222
});
@@ -296,11 +271,11 @@
296271
cluster_id: item.cluster.id,
297272
db_version: item.db_version,
298273
display_info: {
299-
cluster_capacity: item.cluster_capacity.total,
300-
cluster_shard_num: item.cluster.shard_num,
274+
cluster_capacity: item.cluster.cluster_capacity,
275+
cluster_shard_num: item.cluster.cluster_shard_num,
301276
cluster_spec: item.cluster.cluster_spec,
302277
cluster_stats: item.cluster.cluster_stats,
303-
machine_pair_cnt: item.cluster.group_num,
278+
machine_pair_cnt: item.cluster.machine_pair_cnt,
304279
},
305280
future_capacity: item.backend_group.future_capacity,
306281
group_num: item.backend_group.group_num,
@@ -333,20 +308,7 @@
333308
if (!selectedMap.value[item.master_domain]) {
334309
acc.push(
335310
createTableRow({
336-
cluster: {
337-
bk_cloud_id: item.bk_cloud_id,
338-
cluster_capacity: item.cluster_capacity,
339-
cluster_spec: item.cluster_spec,
340-
cluster_stats: item.cluster_stats,
341-
cluster_type: item.cluster_type,
342-
cluster_type_name: item.cluster_type_name,
343-
disaster_tolerance_level: item.disaster_tolerance_level,
344-
group_num: item.machine_pair_cnt,
345-
id: item.id,
346-
major_version: item.major_version,
347-
master_domain: item.master_domain,
348-
shard_num: item.cluster_shard_num,
349-
},
311+
cluster: item,
350312
online_switch_type: 'user_confirm',
351313
}),
352314
);

‎dbm-ui/frontend/src/views/db-manage/redis/REDIS_SCALE_UPDOWN/components/CapacityCell.vue‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<template>
2+
<div class="redis-capacity-cell">
3+
<div class="display-content">
4+
<div class="item">
5+
<div class="item-title">{{ t('容量') }}：</div>
6+
<div class="item-content">
7+
<span class="number-style">{{ data.capacity }}</span>
8+
G
9+
</div>
10+
</div>
11+
<div class="item">
12+
<div class="item-title">{{ t('资源规格') }}：</div>
13+
<div class="item-content">
14+
<RenderSpec
15+
:data="data.spec"
16+
:hide-qps="!data.spec?.qps?.max"
17+
is-ignore-counts />
18+
</div>
19+
</div>
20+
<div class="item">
21+
<div class="item-title">{{ t('机器组数') }}：</div>
22+
<div class="item-content">
23+
<span class="number-style">{{ data.groupNum }}</span>
24+
</div>
25+
</div>
26+
<div class="item">
27+
<div class="item-title">{{ t('机器数量') }}：</div>
28+
<div class="item-content">
29+
<span class="number-style">{{ data.groupNum * 2 }}</span>
30+
</div>
31+
</div>
32+
<div class="item">
33+
<div class="item-title">{{ t('分片数') }}：</div>
34+
<div class="item-content">
35+
<span class="number-style">{{ data.shardNum }}</span>
36+
</div>
37+
</div>
38+
<slot />
39+
</div>
40+
</div>
41+
</template>
42+
<script lang="ts" setup>
43+
import { useI18n } from 'vue-i18n';
44+
45+
import RenderSpec from './render-spec/Index.vue';
46+
47+
interface Props {
48+
data: {
49+
capacity: number;
50+
groupNum: number;
51+
shardNum: number;
52+
spec: any;
53+
};
54+
}
55+
56+
defineProps<Props>();
57+
58+
const { t } = useI18n();
59+
</script>
60+
61+
<style lang="less">
62+
.redis-capacity-cell {
63+
width: 100%;
64+
overflow: hidden;
65+
66+
:deep(.render-spec-box) {
67+
height: 22px !important;
68+
padding: 0 !important;
69+
}
70+
71+
.display-content {
72+
padding: 11px 16px;
73+
line-height: 20px;
74+
white-space: nowrap;
75+
76+
.item {
77+
display: flex;
78+
width: 100%;
79+
80+
.item-title {
81+
width: 64px;
82+
text-align: right;
83+
}
84+
85+
.item-content {
86+
flex: 1;
87+
display: flex;
88+
align-items: center;
89+
90+
.percent {
91+
margin-left: 4px;
92+
font-size: 12px;
93+
font-weight: bold;
94+
color: #313238;
95+
}
96+
97+
.spec {
98+
margin-left: 2px;
99+
font-size: 12px;
100+
color: #979ba5;
101+
}
102+
}
103+
}
104+
}
105+
106+
.number-style {
107+
margin: 0 2px;
108+
font-size: 12px;
109+
font-weight: 700;
110+
color: #313238;
111+
}
112+
}
113+
</style>

0 commit comments

Comments
 (0)