Skip to content

Commit 7eadc9b

Browse files
3octavesiSecloud
3octaves
authored and
iSecloud
committed
feat(frontend): redis集群支持自定义方案 #7272 
1 parent c8e2737 commit 7eadc9b

File tree

25 files changed

+1076
-404
lines changed

25 files changed

+1076
-404
lines changed

‎dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterShardUpdate.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export async function generateRedisClusterShardUpdateCloneData(
5454
clusterType: currentClusterInfo.cluster_spec.spec_cluster_type,
5555
clusterTypeName: currentClusterInfo.cluster_type_name,
5656
currentShardNum: currentClusterInfo.cluster_shard_num,
57+
groupNum: currentClusterInfo.machine_pair_cnt,
5758
currentSpecId: currentClusterInfo.cluster_spec.spec_id,
5859
dbVersion: item.db_version,
5960
specConfig: {

‎dbm-ui/frontend/src/hooks/useTicketCloneInfo/generateCloneData/redis/clusterTypeUpdate.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export async function generateRedisClusterTypeUpdateCloneData(ticketData: Ticket
5353
currentSepc: `${currentClusterInfo.cluster_capacity}G_${currentClusterInfo.cluster_spec.qps.max}/s${t('（n 分片）', { n: currentClusterInfo.cluster_shard_num })}`,
5454
targetClusterType: item.target_cluster_type,
5555
currentShardNum: currentClusterInfo.cluster_shard_num,
56+
groupNum: currentClusterInfo.machine_pair_cnt,
5657
clusterTypeName: currentClusterInfo.cluster_type_name,
5758
currentSpecId: currentClusterInfo.cluster_spec.spec_id,
5859
dbVersion: item.db_version,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3466,5 +3466,6 @@
34663466
"整型(int)": "整型(int)",
34673467
"整型(bigint)": "整型(bigint)",
34683468
"新proxy主机": "新proxy主机",
3469+
"必须要能除尽总分片数": "必须要能除尽总分片数",
34693470
"这行勿动！新增翻译请在上一行添加！": ""
34703471
}

‎dbm-ui/frontend/src/services/model/ticket/details/redis.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,16 @@ export interface RedisDetails extends DetailBase {
286286
affinity: string;
287287
count: number;
288288
spec_id: number;
289-
spec_info: SpecInfo;
289+
spec_info: {
290+
spec_name: string;
291+
machine_pair: number;
292+
cluster_shard_num: number;
293+
cluster_capacity: number;
294+
qps?: {
295+
max: number;
296+
min: number;
297+
};
298+
};
290299
location_spec: {
291300
city: string;
292301
sub_zone_ids: number[];

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,10 +94,6 @@
9494
count?: number;
9595
}
9696
97-
interface Emits {
98-
(e: 'update:modelValue', value: number | string): void;
99-
}
100-
10197
interface Props {
10298
modelValue: number | string;
10399
clusterType: string;
@@ -109,6 +105,16 @@
109105
city?: string;
110106
}
111107
108+
interface Emits {
109+
(e: 'update:modelValue', value: number | string): void;
110+
}
111+
112+
interface Expose {
113+
getData: () => Pick<ResourceSpecModel, 'spec_name' | 'cpu' | 'mem' | 'storage_spec' | 'qps'> & {
114+
instance_num?: number;
115+
};
116+
}
117+
112118
const props = withDefaults(defineProps<Props>(), {
113119
showRefresh: true,
114120
clearable: true,
@@ -202,7 +208,7 @@
202208
{ immediate: true, deep: true },
203209
);
204210
205-
defineExpose({
211+
defineExpose<Expose>({
206212
getData() {
207213
const item = list.value.find((item) => item.spec_id === props.modelValue);
208214
if (item) {
@@ -216,7 +222,7 @@
216222
qps: item.qps,
217223
};
218224
}
219-
return {};
225+
return {} as ReturnType<Expose['getData']>;
220226
},
221227
});
222228
</script>

‎dbm-ui/frontend/src/views/db-manage/common/apply-schema/Index.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<DbFormItem
3+
:label="t('部署方案选择')"
4+
required>
5+
<BkRadioGroup
6+
v-model="modelValue"
7+
style="width: 314px">
8+
<BkRadioButton
9+
:label="APPLY_SCHEME.AUTO"
10+
style="flex: 1">
11+
{{ t('自动推荐方案') }}
12+
<BkTag
13+
size="small"
14+
theme="success">
15+
{{ t('实验') }}
16+
</BkTag>
17+
</BkRadioButton>
18+
<BkRadioButton
19+
:label="APPLY_SCHEME.CUSTOM"
20+
style="flex: 1">
21+
{{ t('自定义方案') }}
22+
</BkRadioButton>
23+
</BkRadioGroup>
24+
</DbFormItem>
25+
</template>
26+
27+
<script lang="ts">
28+
export enum APPLY_SCHEME {
29+
AUTO = 'auto',
30+
CUSTOM = 'custom',
31+
}
32+
</script>
33+
<script setup lang="ts">
34+
import { useI18n } from 'vue-i18n';
35+
36+
const { t } = useI18n();
37+
38+
const modelValue = defineModel<APPLY_SCHEME>({
39+
required: true,
40+
});
41+
</script>

‎dbm-ui/frontend/src/views/db-manage/redis/apply/ApplyRedis.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
<div class="apply-instance">
1717
<DbForm
1818
ref="formRef"
19-
auto-label-width
2019
class="apply-form"
20+
:label-width="200"
2121
:model="state.formdata"
2222
:rules="rules">
2323
<DbCard :title="t('业务信息')">
@@ -378,7 +378,6 @@
378378
import IpSelector from '@components/ip-selector/IpSelector.vue';
379379
380380
import AffinityItem from '@views/db-manage/common/apply-items/AffinityItem.vue';
381-
import BackendQPSSpec from '@views/db-manage/common/apply-items/BackendSpec.vue';
382381
import BusinessItems from '@views/db-manage/common/apply-items/BusinessItems.vue';
383382
import CloudItem from '@views/db-manage/common/apply-items/CloudItem.vue';
384383
import ClusterAlias from '@views/db-manage/common/apply-items/ClusterAlias.vue';
@@ -391,6 +390,7 @@
391390
import { generateId } from '@utils';
392391
393392
import { redisClusterTypes, redisIpSources } from './common/const';
393+
import BackendQPSSpec from './components/backend-spec/Index.vue';
394394
import RecommendArchitectrue from './components/recommend-architectrue/Index.vue';
395395
396396
type CapSepcs = ServiceReturnType<typeof getCapSpecs>[number];
@@ -452,7 +452,7 @@
452452
count: 2,
453453
},
454454
backend_group: {
455-
count: 0,
455+
count: 1,
456456
spec_id: '' as number | '',
457457
capacity: '' as number | string,
458458
future_capacity: '' as number | string,
@@ -614,7 +614,7 @@
614614
state.formdata.details.resource_spec.proxy.spec_id = '';
615615
state.formdata.details.resource_spec.backend_group = {
616616
...state.formdata.details.resource_spec.backend_group,
617-
count: 0,
617+
count: 1,
618618
spec_id: '',
619619
capacity: '',
620620
future_capacity: '',

dbm-ui/frontend/src/views/db-manage/common/apply-items/BackendSpec.vue renamed to dbm-ui/frontend/src/views/db-manage/redis/apply/components/backend-spec/Index.vue

Lines changed: 92 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,69 @@
11
<template>
22
<div class="redis-backend-spec">
3-
<BkFormItem
4-
:label="targetCapacityTitle"
5-
property="details.resource_spec.backend_group.capacity"
6-
required>
7-
<BkInput
8-
:min="1"
9-
:model-value="modelValue.capacity"
10-
style="width: 314px"
11-
type="number"
12-
@change="handleChangeCapacity" />
13-
<span class="input-desc">G</span>
14-
</BkFormItem>
15-
<BkFormItem
16-
:label="futureCapacityTitle"
17-
property="details.resource_spec.backend_group.future_capacity"
18-
required>
19-
<BkInput
20-
:min="Number(modelValue.capacity)"
21-
:model-value="modelValue.future_capacity"
22-
style="width: 314px"
23-
type="number"
24-
@change="handleChangeFutureCapacity" />
25-
<span class="input-desc">G</span>
26-
</BkFormItem>
27-
<BkFormItem
28-
ref="specRef"
29-
:label="t('集群部署方案')"
30-
property="details.resource_spec.backend_group.spec_id"
31-
required>
32-
<DbOriginalTable
33-
v-bkloading="{ loading: isLoading }"
34-
class="custom-edit-table"
35-
:columns="columns"
36-
:data="specs"
37-
@row-click="handleRowClick">
38-
<template #empty>
39-
<p
40-
v-if="!modelValue.capacity || !modelValue.future_capacity"
41-
style="width: 100%; line-height: 128px; text-align: center">
42-
<DbIcon
43-
class="mr-4"
44-
type="attention" />
45-
<span>{{ t('请先设置容量') }}</span>
46-
</p>
47-
<BkException
48-
v-else
49-
:description="t('无匹配的资源规格_请先修改容量设置')"
50-
scene="part"
51-
style="font-size: 12px"
52-
type="empty" />
53-
</template>
54-
</DbOriginalTable>
55-
</BkFormItem>
3+
<ApplySchema v-model="applySchema" />
4+
<template v-if="applySchema === APPLY_SCHEME.AUTO">
5+
<BkFormItem
6+
:label="targetCapacityTitle"
7+
property="details.resource_spec.backend_group.capacity"
8+
required>
9+
<BkInput
10+
:min="1"
11+
:model-value="modelValue.capacity"
12+
style="width: 314px"
13+
type="number"
14+
@change="handleChangeCapacity" />
15+
<span class="input-desc">G</span>
16+
</BkFormItem>
17+
<BkFormItem
18+
:label="futureCapacityTitle"
19+
property="details.resource_spec.backend_group.future_capacity"
20+
required>
21+
<BkInput
22+
:min="Number(modelValue.capacity)"
23+
:model-value="modelValue.future_capacity"
24+
style="width: 314px"
25+
type="number"
26+
@change="handleChangeFutureCapacity" />
27+
<span class="input-desc">G</span>
28+
</BkFormItem>
29+
<BkFormItem
30+
ref="specRef"
31+
:label="t('集群部署方案')"
32+
property="details.resource_spec.backend_group.spec_id"
33+
required>
34+
<DbOriginalTable
35+
v-bkloading="{ loading: isLoading }"
36+
class="custom-edit-table"
37+
:columns="columns"
38+
:data="specs"
39+
@row-click="handleRowClick">
40+
<template #empty>
41+
<p
42+
v-if="!modelValue.capacity || !modelValue.future_capacity"
43+
style="width: 100%; line-height: 128px; text-align: center">
44+
<DbIcon
45+
class="mr-4"
46+
type="attention" />
47+
<span>{{ t('请先设置容量') }}</span>
48+
</p>
49+
<BkException
50+
v-else
51+
:description="t('无匹配的资源规格_请先修改容量设置')"
52+
scene="part"
53+
style="font-size: 12px"
54+
type="empty" />
55+
</template>
56+
</DbOriginalTable>
57+
</BkFormItem>
58+
</template>
59+
<CustomSchema
60+
v-else
61+
ref="customSchemaRef"
62+
v-model="modelValue"
63+
:biz-id="bizId"
64+
:cloud-id="cloudId"
65+
:cluster-type="clusterType"
66+
:machine-type="machineType" />
5667
</div>
5768
</template>
5869

@@ -68,8 +79,13 @@
6879
6980
import TextOverflowLayout from '@components/text-overflow-layout/Index.vue';
7081
82+
import ApplySchema, { APPLY_SCHEME } from '@views/db-manage/common/apply-schema/Index.vue';
83+
84+
import CustomSchema from './components/CustomSchema.vue';
85+
7186
interface ModelValue {
7287
spec_id: number | '',
88+
count: number,
7389
capacity: number | string,
7490
future_capacity: number | string,
7591
}
@@ -86,10 +102,12 @@
86102
87103
const { t } = useI18n();
88104
89-
90105
const specRef = ref();
91-
const specs = shallowRef<ClusterSpecModel[]>([]);
106+
const customSchemaRef = ref<InstanceType<typeof CustomSchema>>()
92107
const isLoading = ref(false);
108+
const applySchema = ref(APPLY_SCHEME.AUTO)
109+
110+
const specs = shallowRef<ClusterSpecModel[]>([]);
93111
const countMap = shallowRef({} as Record<number, number>)
94112
95113
const isTendisCache = computed(() => props.clusterType === ClusterTypes.TWEMPROXY_REDIS_INSTANCE);
@@ -154,15 +172,12 @@
154172
155173
watch(() => modelValue.value.spec_id, () => {
156174
if (modelValue.value.spec_id) {
157-
specRef.value.clearValidate();
175+
specRef.value?.clearValidate();
158176
}
159177
});
160178
161-
watch([
162-
() => props.bizId,
163-
() => props.cloudId,
164-
specs,
165-
], () => {
179+
watch(
180+
() => [props.bizId, props.cloudId, specs], () => {
166181
if (
167182
typeof props.bizId === 'number'
168183
&& props.bizId > 0
@@ -173,10 +188,7 @@
173188
}
174189
}, { immediate: true, deep: true });
175190
176-
watch([
177-
() => modelValue.value.capacity,
178-
() => modelValue.value.future_capacity,
179-
], ([capacityValue, futureCapacityValue]) => {
191+
watch(() => [modelValue.value.capacity, modelValue.value.future_capacity], ([capacityValue, futureCapacityValue]) => {
180192
if (capacityValue === '' || futureCapacityValue === '') {
181193
resetSlider();
182194
} else {
@@ -266,8 +278,21 @@
266278
267279
defineExpose({
268280
getData() {
269-
const item = specs.value.find(item => item.spec_id === Number(modelValue.value.spec_id));
270-
return item ?? {};
281+
if (applySchema.value === APPLY_SCHEME.AUTO) {
282+
const item = specs.value.find(item => item.spec_id === Number(modelValue.value.spec_id));
283+
if (item) {
284+
return {
285+
spec_name: item.spec_name,
286+
machine_pair: item.machine_pair,
287+
cluster_shard_num: item.cluster_shard_num,
288+
cluster_capacity: item.cluster_capacity,
289+
qps: item.qps
290+
}
291+
}
292+
return {}
293+
}
294+
295+
return customSchemaRef.value!.getInfo()
271296
},
272297
});
273298
</script>

0 commit comments

Comments
 (0)