Skip to content

Commit 40ffffc

Browse files
JustaCatttJustaCattt
committed
feat(frontend): 集群标准化 #4654 
1 parent fdd0af4 commit 40ffffc

File tree

23 files changed

+687
-158
lines changed

23 files changed

+687
-158
lines changed

‎dbm-ui/frontend/src/common/const/queryClusterTypes.ts renamed to ‎dbm-ui/frontend/src/common/const/dbClusterTypes.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { DBTypes } from './dbTypes';
44
/**
55
* db类型关联集群类型集合映射关系
66
*/
7-
export const queryClusterTypes = {
7+
export const DBClusterTypes = {
88
[DBTypes.MYSQL]: [ClusterTypes.TENDBSINGLE, ClusterTypes.TENDBHA],
99
[DBTypes.TENDBCLUSTER]: [ClusterTypes.TENDBCLUSTER],
1010
[DBTypes.REDIS]: [

‎dbm-ui/frontend/src/common/const/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export * from './clusterInsStatus';
44
export * from './clusterTypeInfos';
55
export * from './clusterTypes';
66
export * from './confLevels';
7+
export * from './dbClusterTypes';
78
export * from './dbSysExclude';
89
export * from './dbTypeInfos';
910
export * from './dbTypes';
@@ -12,7 +13,6 @@ export * from './machineTypes';
1213
export * from './occupiedInnerHeight';
1314
export * from './osTypes';
1415
export * from './pipelineStatus';
15-
export * from './queryClusterTypes';
1616
export * from './ticketTypeInfos';
1717
export * from './ticketTypes';
1818
export * from './userPersonalSettings';

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

+1
Original file line numberDiff line numberDiff line change
@@ -3659,5 +3659,6 @@
36593659
"模糊搜索": "模糊搜索",
36603660
"精确搜索": "精确搜索",
36613661
"每个分类最多显示 10 条记录，点击搜索可查看全部记录。": "每个分类最多显示 10 条记录，点击搜索可查看全部记录。",
3662+
"TenDBCluster集群": "TenDBCluster集群",
36623663
"这行勿动！新增翻译请在上一行添加！": ""
36633664
}

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

+31-21
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
* the specific language governing permissions and limitations under the License.
1212
*/
1313

14-
import type { InstanceInfos, ListBase } from '@services/types';
14+
import type { ClusterInfo, InstanceInfos, ListBase } from '@services/types';
1515

1616
import { ClusterTypes } from '@common/const';
1717

@@ -106,6 +106,28 @@ export function checkInstance<T extends InstanceInfos>(params: { instance_addres
106106

107107
// 查询全集群信息
108108
export function queryAllTypeCluster(params: {
109+
bk_biz_id: number;
110+
cluster_types?: string;
111+
immute_domain?: string;
112+
phase?: string;
113+
limit?: number;
114+
offset?: number;
115+
}) {
116+
return http.get<
117+
{
118+
bk_cloud_id: number;
119+
cluster_type: string;
120+
id: number;
121+
immute_domain: string;
122+
major_version: string;
123+
name: string;
124+
region: string;
125+
}[]
126+
>(`${path}/simple_query_cluster/`, params);
127+
}
128+
129+
// 全集群列表
130+
export function queryAllTypeClusterList(params: {
109131
bk_biz_id?: number; // 业务id
110132
cluster_types?: string; // 集群类型(逗号间隔)
111133
immute_domain?: string; // 集群域名
@@ -121,24 +143,12 @@ export function queryAllTypeCluster(params: {
121143
limit?: number;
122144
offset?: number;
123145
}) {
124-
return http.get<
125-
ListBase<
126-
{
127-
alias: string;
128-
bk_biz_id: number;
129-
bk_cloud_id: number;
130-
bk_cloud_name: string;
131-
cluster_type: string;
132-
db_module_id: number;
133-
db_module_name: string;
134-
id: number;
135-
immute_domain: string;
136-
major_version: string;
137-
name: string;
138-
phase: string;
139-
region: string;
140-
status: string;
141-
}[]
142-
>
143-
>(`${path}/simple_query_cluster/`, params);
146+
return http.get<ListBase<ClusterInfo[]>>(`${path}/simple_query_cluster_v2/`, params);
147+
}
148+
149+
/**
150+
* 根据用户手动输入的域名列表查询
151+
*/
152+
export function checkDomains(params: { domains: string[] }) {
153+
return http.post<ClusterInfo[]>(`${path}/check_domains/`, params);
144154
}

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

-7
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,3 @@ export function getClusterList(params: {
3939
}) {
4040
return http.post<ListBase<TendbhaModel[]>>(`/apis/mysql/query_clusters/`, params);
4141
}
42-
43-
/**
44-
* 根据用户手动输入的域名列表查询
45-
*/
46-
export function checkDomains(params: { domains: Array<string> }) {
47-
return http.post<Array<TendbhaModel>>(`/apis/mysql/check_domains/`, params);
48-
}

‎dbm-ui/frontend/src/services/types/clusterInfo.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
3+
*
4+
* Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
5+
*
6+
* Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at https://opensource.org/licenses/MIT
8+
*
9+
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
10+
* on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
11+
* the specific language governing permissions and limitations under the License.
12+
*/
13+
14+
/**
15+
* 通用集群信息
16+
*/
17+
export interface ClusterInfo {
18+
alias: string;
19+
bk_biz_id: number;
20+
bk_cloud_id: number;
21+
bk_cloud_name: string;
22+
cluster_type: string;
23+
db_module_id: number;
24+
db_module_name: string;
25+
id: number;
26+
immute_domain: string;
27+
major_version: string;
28+
name: string;
29+
phase: string;
30+
region: string;
31+
status: string;
32+
}

‎dbm-ui/frontend/src/services/types/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
*/
1313

1414
export * from './bizItem';
15+
export * from './clusterInfo';
1516
export * from './common';
1617
export * from './db';
1718
export * from './hostInfo';

‎dbm-ui/frontend/src/views/cluster-standardize/Index.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,16 @@
2828

2929
import Mysql from './components/mysql/Index.vue';
3030
import Success from './components/Success.vue';
31+
import Tendbcluster from './components/tendbcluster/Index.vue';
3132

3233
const router = useRouter();
3334
const route = useRoute();
3435

35-
const exclude = Object.values(DBTypes).filter((type) => type !== DBTypes.MYSQL);
36+
const exclude = Object.values(DBTypes).filter((type) => ![DBTypes.TENDBCLUSTER, DBTypes.MYSQL].includes(type));
3637

3738
const comMap = {
3839
[DBTypes.MYSQL]: Mysql,
40+
[DBTypes.TENDBCLUSTER]: Tendbcluster,
3941
} as Record<string, any>;
4042

4143
const active = ref(DBTypes.MYSQL);

‎dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/Index.vue

+40-44
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@
3131
<template #main>
3232
<PanelTab
3333
v-model="panelTabActive"
34-
:tab-list="tabListMap[dbType]" />
34+
:db-type="dbType" />
3535
<Component
36-
:is="renderCom"
36+
:is="ClusterSelect"
3737
:key="panelTabActive"
3838
:active-panel-id="panelTabActive"
3939
:last-values="lastValues"
@@ -68,63 +68,59 @@
6868
</template>
6969
</BkDialog>
7070
</template>
71-
7271
<script lang="ts">
73-
import type { queryAllTypeCluster } from '@services/source/dbbase';
74-
75-
export type ICluster = ServiceReturnType<typeof queryAllTypeCluster>['results'][number];
72+
import type { ClusterInfo } from '@services/types';
7673

77-
interface Props {
78-
dbType: DBTypes;
79-
selected: Record<string, ICluster[]>;
80-
}
74+
import { ClusterTypes, DBTypes } from '@common/const';
8175

82-
interface Emits {
83-
(e: 'change', value: Props['selected']): void;
76+
interface SelectedMap {
77+
[DBTypes.MYSQL]: {
78+
[ClusterTypes.TENDBHA]: ClusterInfo[];
79+
[ClusterTypes.TENDBSINGLE]: ClusterInfo[];
80+
};
81+
[DBTypes.TENDBCLUSTER]: {
82+
[ClusterTypes.TENDBCLUSTER]: ClusterInfo[];
83+
};
8484
}
8585
</script>
86-
<script setup lang="ts">
87-
import { ClusterTypes, DBTypes } from '@common/const';
88-
89-
import { t } from '@locales/index';
86+
<script setup lang="ts" generic="T extends keyof SelectedMap">
87+
import { useI18n } from 'vue-i18n';
9088

9189
import ClusterSelect from './components/cluster-select/Index.vue';
9290
import PanelTab from './components/common/PanelTab.vue';
93-
import ManualInput from './components/manual-input/Index.vue';
91+
// import ManualInput from './components/manual-input/Index.vue';
9492
import PreviewResult from './components/preview-result/Index.vue';
9593

96-
const props = withDefaults(defineProps<Props>(), {
97-
selected: () => ({}),
98-
});
94+
interface Props {
95+
dbType: T;
96+
selected: SelectedMap[T];
97+
}
98+
99+
interface Emits {
100+
(e: 'change', value: ClusterInfo[]): void;
101+
}
102+
103+
const props = defineProps<Props>();
99104

100105
const emits = defineEmits<Emits>();
101106

102107
const isShow = defineModel<boolean>('isShow', {
103108
default: false,
104109
});
105110

106-
const tabListMap = {
107-
[DBTypes.MYSQL]: [
108-
{
109-
id: ClusterTypes.TENDBHA,
110-
name: t('MySQL主从'),
111-
},
112-
{
113-
id: ClusterTypes.TENDBSINGLE,
114-
name: t('MySQL单节点'),
115-
},
116-
],
117-
} as Record<DBTypes, { id: string; name: string }[]>;
118-
119-
const panelTabActive = ref(tabListMap[props.dbType][0].id);
120-
const lastValues = reactive<NonNullable<Props['selected']>>({});
121-
122-
const renderCom = computed(() => {
123-
if (panelTabActive.value === 'manual') {
124-
return ManualInput;
125-
}
126-
return ClusterSelect;
127-
});
111+
const { t } = useI18n();
112+
113+
const panelTabActive = ref();
114+
const lastValues = reactive<Record<string, ClusterInfo[]>>({});
115+
116+
// const renderCom = computed(
117+
// () => {
118+
// if (panelTabActive.value === 'manual') {
119+
// return ManualInput;
120+
// }
121+
// return ClusterSelect;
122+
// }
123+
// );
128124
const isEmpty = computed(() => Object.values(lastValues).every((values) => values.length < 1));
129125

130126
watch(
@@ -152,12 +148,12 @@
152148
lastValues[oldValue] = [];
153149
});
154150

155-
const handleChange = (values: Props['selected']) => {
151+
const handleChange = (values: Record<string, ClusterInfo[]>) => {
156152
Object.assign(lastValues, values);
157153
};
158154

159155
const handleSubmit = () => {
160-
emits('change', lastValues);
156+
emits('change', Object.values(lastValues).flat());
161157
handleClose();
162158
};
163159

‎dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Index.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -78,19 +78,19 @@
7878
</div>
7979
</BkLoading>
8080
</template>
81-
<script setup lang="ts" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
81+
<script setup lang="ts">
8282
import { useI18n } from 'vue-i18n';
8383

84-
import type { queryAllTypeCluster } from '@services/source/dbbase';
84+
import type { ClusterInfo } from '@services/types';
8585

8686
import { ClusterTypes } from '@common/const';
8787

8888
import { useTopoData } from './hooks/useTopoData';
8989
import Table from './Table.vue';
9090

9191
interface Props {
92-
lastValues: Record<string, T[]>;
93-
activePanelId?: string;
92+
lastValues: Record<string, ClusterInfo[]>;
93+
activePanelId: string;
9494
}
9595

9696
interface Emits {

‎dbm-ui/frontend/src/views/cluster-standardize/components/cluster-selector/components/cluster-select/Table.vue

+9-9
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,10 @@
3636
</BkLoading>
3737
</div>
3838
</template>
39-
<script setup lang="tsx" generic="T extends ServiceReturnType<typeof queryAllTypeCluster>['results'][number]">
39+
<script setup lang="tsx">
4040
import { useI18n } from 'vue-i18n';
4141

42-
import type { queryAllTypeCluster } from '@services/source/dbbase';
42+
import type { ClusterInfo } from '@services/types';
4343

4444
import { useLinkQueryColumnSerach } from '@hooks';
4545

@@ -51,12 +51,12 @@
5151
import type { TopoTreeNode } from './hooks/useTopoData';
5252

5353
interface DataRow {
54-
data: T,
54+
data: ClusterInfo,
5555
}
5656

5757
interface Props {
58+
lastValues: Record<string, ClusterInfo[]>;
5859
activePanelId: string;
59-
lastValues: Record<string, T[]>;
6060
selectedTreeNode?: TopoTreeNode;
6161
}
6262

@@ -112,10 +112,10 @@
112112
} = useLinkQueryColumnSerach({
113113
searchType: props.activePanelId,
114114
fetchDataFn: () => fetchResources(),
115-
isQueryAttrs: false
115+
isQueryAttrs: false,
116116
});
117117

118-
const checkedMap = shallowRef({} as Record<string, T>);
118+
const checkedMap = shallowRef({} as Record<string, ClusterInfo>);
119119

120120
const params = computed<{ cluster_types: string; bk_biz_id?: number; db_module_id?: number }>(() => {
121121
const base = {
@@ -263,12 +263,12 @@
263263
}, { immediate: true, deep: true });
264264

265265
const triggerChange = () => {
266-
const result = Object.values(checkedMap.value).reduce((result, item) => {
266+
const result = Object.values(checkedMap.value).reduce<ClusterInfo[]>((result, item) => {
267267
result.push({
268268
...item,
269269
});
270270
return result;
271-
}, [] as T[]);
271+
}, []);
272272

273273
if (props.activePanelId) {
274274
emits('change', {
@@ -278,7 +278,7 @@
278278
}
279279
};
280280

281-
const handleTableSelectOne = (checked: boolean, data: T) => {
281+
const handleTableSelectOne = (checked: boolean, data: ClusterInfo) => {
282282
const lastCheckMap = { ...checkedMap.value };
283283
if (checked) {
284284
lastCheckMap[data.immute_domain] = data;

0 commit comments

Comments
 (0)