Skip to content

Commit 3a2d979

Browse files
3octaveshLinx
3octaves
authored and
hLinx
committed
feat(frontend): redis工具箱增加备份、清档、提取Key、删除Key #10359 
1 parent a03940a commit 3a2d979

File tree

30 files changed

+2337
-415
lines changed

30 files changed

+2337
-415
lines changed

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

+4
Original file line numberDiff line numberDiff line change
@@ -4510,5 +4510,9 @@
45104510
"清空表格已有数据": "清空表格已有数据",
45114511
"多个标签值以空格、逗号、分号、竖线分割": "多个标签值以空格、逗号、分号、竖线分割",
45124512
"标签值不能重复": "标签值不能重复",
4513+
"Key 操作": "Key 操作",
4514+
"提取 Key": "提取 Key",
4515+
"删除 Key": "删除 Key",
4516+
"集群删除中无法选择": "集群删除中无法选择",
45134517
"这行勿动！新增翻译请在上一行添加！": ""
45144518
}

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

+5-7
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,12 @@ export interface Purge extends DetailBase {
44
clusters: DetailClusters;
55
delete_type: string;
66
rules: {
7-
backup_type: string;
8-
black_regex: string;
7+
backup: boolean;
98
cluster_id: number;
10-
create_at: string;
9+
cluster_type: string;
10+
db_list: [];
1111
domain: string;
12-
path: string;
13-
target: string;
14-
total_size: string;
15-
white_regex: string;
12+
flushall: true; // TODO: 目前都是 true, 后续根据后端实现调整
13+
force: boolean;
1614
}[];
1715
}

‎dbm-ui/frontend/src/views/db-manage/common/batch-edit-column/Checkbox.vue

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<BkPopConfirm
3+
:is-show="isShow"
4+
trigger="manual"
5+
width="395"
6+
@cancel="() => (isShow = false)"
7+
@confirm="handleConfirmChange">
8+
<span>
9+
<slot />
10+
</span>
11+
<template #content>
12+
<div class="batch-edit-column-checkbox">
13+
<div class="main-title">{{ t('统一设置') }}{{ title }}</div>
14+
<div class="content-box">
15+
<span class="mr-8">{{ title }}</span>
16+
<BkCheckbox
17+
v-model="localValue"
18+
:disabled="disabled"
19+
:false-label="false"
20+
@change="handleChange" />
21+
</div>
22+
</div>
23+
</template>
24+
</BkPopConfirm>
25+
</template>
26+
27+
<script setup lang="ts">
28+
import type { UnwrapRef } from 'vue';
29+
import { useI18n } from 'vue-i18n';
30+
31+
interface Props {
32+
disableFn?: (date?: Date | number) => boolean;
33+
title: string;
34+
}
35+
36+
type Emits = (e: 'change', value: UnwrapRef<typeof localValue>) => void;
37+
38+
const props = withDefaults(defineProps<Props>(), {
39+
disableFn: () => false,
40+
});
41+
42+
const emits = defineEmits<Emits>();
43+
44+
const isShow = defineModel<boolean>({
45+
default: false,
46+
});
47+
48+
const { t } = useI18n();
49+
50+
const localValue = ref(false);
51+
52+
const disabled = computed(() => props.disableFn());
53+
54+
const handleChange = (value: UnwrapRef<typeof localValue>) => {
55+
localValue.value = value;
56+
};
57+
58+
const handleConfirmChange = () => {
59+
emits('change', localValue.value);
60+
isShow.value = false;
61+
};
62+
</script>
63+
64+
<style lang="less">
65+
.batch-edit-column-checkbox {
66+
margin-bottom: 30px;
67+
68+
& + .bk-pop-confirm-footer {
69+
button {
70+
width: 60px;
71+
}
72+
}
73+
74+
.main-title {
75+
margin-bottom: 20px;
76+
font-size: 16px;
77+
color: #313238;
78+
}
79+
80+
.content-box {
81+
display: flex;
82+
align-items: center;
83+
}
84+
}
85+
</style>

‎dbm-ui/frontend/src/views/db-manage/common/cluster-batch-opration/components/redis-ha/Index.vue

+16-79
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
2-
<BkDropdownItem
3-
v-db-console="'redis.haClusterManage.extractKey'"
4-
@click="handleShowExtract(selected)">
2+
<BkDropdownItem v-db-console="'redis.haClusterManage.extractKey'">
53
<BkButton
64
v-bk-tooltips="{
75
disabled: !batchOperationDisabled,
@@ -10,13 +8,12 @@
108
}"
119
class="opration-button"
1210
:disabled="batchOperationDisabled"
13-
text>
11+
text
12+
@click="handleToToolbox(TicketTypes.REDIS_KEYS_EXTRACT, selected)">
1413
{{ t('提取Key') }}
1514
</BkButton>
1615
</BkDropdownItem>
17-
<BkDropdownItem
18-
v-db-console="'redis.haClusterManage.deleteKey'"
19-
@click="handlShowDeleteKeys(selected)">
16+
<BkDropdownItem v-db-console="'redis.haClusterManage.deleteKey'">
2017
<BkButton
2118
v-bk-tooltips="{
2219
disabled: !batchOperationDisabled,
@@ -25,13 +22,12 @@
2522
}"
2623
class="opration-button"
2724
:disabled="batchOperationDisabled"
28-
text>
25+
text
26+
@click="handleToToolbox(TicketTypes.REDIS_KEYS_DELETE, selected)">
2927
{{ t('删除Key') }}
3028
</BkButton>
3129
</BkDropdownItem>
32-
<BkDropdownItem
33-
v-db-console="'redis.haClusterManage.backup'"
34-
@click="handleShowBackup(selected)">
30+
<BkDropdownItem v-db-console="'redis.haClusterManage.backup'">
3531
<BkButton
3632
v-bk-tooltips="{
3733
disabled: !batchOperationDisabled,
@@ -40,13 +36,12 @@
4036
}"
4137
class="opration-button"
4238
:disabled="batchOperationDisabled"
43-
text>
39+
text
40+
@click="handleToToolbox(TicketTypes.REDIS_BACKUP, selected)">
4441
{{ t('备份') }}
4542
</BkButton>
4643
</BkDropdownItem>
47-
<BkDropdownItem
48-
v-db-console="'redis.haClusterManage.dbClear'"
49-
@click="handleShowPurge(selected)">
44+
<BkDropdownItem v-db-console="'redis.haClusterManage.dbClear'">
5045
<BkButton
5146
v-bk-tooltips="{
5247
disabled: !batchOperationDisabled,
@@ -55,7 +50,8 @@
5550
}"
5651
class="opration-button"
5752
:disabled="batchOperationDisabled"
58-
text>
53+
text
54+
@click="handleToToolbox(TicketTypes.REDIS_PURGE, selected)">
5955
{{ t('清档') }}
6056
</BkButton>
6157
</BkDropdownItem>
@@ -119,26 +115,6 @@
119115
{{ t('删除') }}
120116
</BkButton>
121117
</BkDropdownItem>
122-
<!-- 提取 keys -->
123-
<ExtractKeys
124-
v-model:is-show="extractState.isShow"
125-
:data="extractState.data"
126-
@success="handleExtractKeysSuccess" />
127-
<!-- 删除 keys -->
128-
<DeleteKeys
129-
v-model:is-show="deleteKeyState.isShow"
130-
:data="deleteKeyState.data"
131-
@success="handleDeleteKeysSuccess" />
132-
<!-- 备份 -->
133-
<RedisBackup
134-
v-model:is-show="backupState.isShow"
135-
:data="backupState.data"
136-
@success="handleBackupSuccess" />
137-
<!-- 清档 -->
138-
<RedisPurge
139-
v-model:is-show="purgeState.isShow"
140-
:data="purgeState.data"
141-
@success="handlePurgeSuccess" />
142118
<ClusterBatchAddTag
143119
v-model:is-show="showClusterBatchAddTag"
144120
:selected="selected"
@@ -158,15 +134,7 @@
158134
159135
import ClusterBatchAddTag from '@views/db-manage/common/cluster-batch-add-tag/Index.vue';
160136
import ClusterBatchRemoveTag from '@views/db-manage/common/cluster-batch-remove-tag/Index.vue';
161-
import { useOperateClusterBasic } from '@views/db-manage/common/hooks';
162-
import { useShowBackup } from '@views/db-manage/common/redis-backup/hooks/useShowBackup';
163-
import RedisBackup from '@views/db-manage/common/redis-backup/Index.vue';
164-
import { useShowDeleteKeys } from '@views/db-manage/common/redis-delete-keys/hooks/useShowDeleteKeys';
165-
import DeleteKeys from '@views/db-manage/common/redis-delete-keys/Index.vue';
166-
import { useShowExtractKeys } from '@views/db-manage/common/redis-extract-keys/hooks/useShowExtractKeys';
167-
import ExtractKeys from '@views/db-manage/common/redis-extract-keys/Index.vue';
168-
import { useShowPurge } from '@views/db-manage/common/redis-purge/hooks/useShowPurge';
169-
import RedisPurge from '@views/db-manage/common/redis-purge/Index.vue';
137+
import { useOperateClusterBasic, useRedisClusterListToToolbox } from '@views/db-manage/common/hooks';
170138
171139
interface Props {
172140
selected: RedisModel[];
@@ -177,17 +145,13 @@
177145
defineOptions({
178146
name: ClusterTypes.REDIS_INSTANCE,
179147
});
148+
180149
const props = defineProps<Props>();
181150
const emits = defineEmits<Emits>();
182-
const sideSliderShow = defineModel<boolean>('side-slider-show', {
183-
required: true,
184-
});
185151
186152
const { t } = useI18n();
187-
const { handleShow: handleShowExtract, state: extractState } = useShowExtractKeys();
188-
const { handleShow: handlShowDeleteKeys, state: deleteKeyState } = useShowDeleteKeys();
189-
const { handleShow: handleShowBackup, state: backupState } = useShowBackup();
190-
const { handleShow: handleShowPurge, state: purgeState } = useShowPurge();
153+
const { handleToToolbox } = useRedisClusterListToToolbox();
154+
191155
const { handleDeleteCluster, handleDisableCluster, handleEnableCluster } = useOperateClusterBasic(
192156
ClusterTypes.REDIS_INSTANCE,
193157
{
@@ -226,34 +190,7 @@
226190
props.selected.every((data) => data.permission[`${data.db_type}_edit` as keyof typeof data.permission]),
227191
);
228192
229-
watch(
230-
() => [extractState.isShow, deleteKeyState.isShow, backupState.isShow, purgeState.isShow],
231-
() => {
232-
sideSliderShow.value = extractState.isShow || deleteKeyState.isShow || backupState.isShow || purgeState.isShow;
233-
},
234-
);
235-
236193
const handleSuccess = () => {
237194
emits('success');
238195
};
239-
240-
const handleExtractKeysSuccess = () => {
241-
extractState.isShow = false;
242-
handleSuccess();
243-
};
244-
245-
const handleDeleteKeysSuccess = () => {
246-
deleteKeyState.isShow = false;
247-
handleSuccess();
248-
};
249-
250-
const handleBackupSuccess = () => {
251-
backupState.isShow = false;
252-
handleSuccess();
253-
};
254-
255-
const handlePurgeSuccess = () => {
256-
purgeState.isShow = false;
257-
handleSuccess();
258-
};
259196
</script>

0 commit comments

Comments
 (0)