From c1ff02adbf96d2b5cb9c41608e60574a5a307b5d Mon Sep 17 00:00:00 2001 From: austinqli <1344583166@qq.com> Date: Mon, 8 Jan 2024 16:41:47 +0800 Subject: [PATCH 1/8] =?UTF-8?q?feat(frontend):=20mysql=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=BC=80=E5=8C=BA=E6=A8=A1=E6=9D=BF=20#2869=20#=20Reviewed,=20?= =?UTF-8?q?transaction=20id:=201627?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mysql/openarea/template-create/Index.vue | 42 ++++++++++++------- .../RenderData/RenderSchmalTable.vue | 3 +- .../components/RenderData/RenderTableData.vue | 3 +- .../openarea-template-create/Index.vue | 42 ++++++++++++------- 4 files changed, 56 insertions(+), 34 deletions(-) diff --git a/dbm-ui/frontend/src/views/mysql/openarea/template-create/Index.vue b/dbm-ui/frontend/src/views/mysql/openarea/template-create/Index.vue index a8e5eceb97..a44be7f856 100644 --- a/dbm-ui/frontend/src/views/mysql/openarea/template-create/Index.vue +++ b/dbm-ui/frontend/src/views/mysql/openarea/template-create/Index.vue @@ -77,6 +77,7 @@ import { queryAllTypeCluster } from '@services/dbbase'; import { + create as createOpenarea, getDetail, update as updateOpenarea, } from '@services/openarea'; @@ -87,6 +88,8 @@ import ConfigRule from './components/config-rule/Index.vue'; + type CreateOpenareaParams = ServiceParameters; + const { currentBizId } = useGlobalBizs(); const { t } = useI18n(); const router = useRouter(); @@ -144,22 +147,29 @@ Promise.all([ (configRuleRef.value as InstanceType).getValue(), (formRef.value as InstanceType).validate(), - ]).then(([configRule]) => updateOpenarea({ - id: Number(route.params.id), - bk_biz_id: currentBizId, - ...formData, - config_rules: configRule, - cluster_type: 'tendbha', - }).then(() => { - messageSuccess(t('编辑成功')); - window.changeConfirm = false; - router.push({ - name: 'mysqlOpenareaTemplate', - }); - })) - .finally(() => { - isSubmiting.value = false; - }); + ]).then(([configRule]) => { + const params: CreateOpenareaParams & { id: number } = { + id: 0, + bk_biz_id: currentBizId, + ...formData, + config_rules: configRule, + cluster_type: 'tendbha', + }; + if (isEditMode) { + params.id = Number(route.params.id); + } + const handler = isEditMode ? updateOpenarea : createOpenarea; + handler(params).then(() => { + messageSuccess(isEditMode ? t('编辑成功') : t('新建成功')); + window.changeConfirm = false; + router.push({ + name: 'mysqlOpenareaTemplate', + }); + }) + .finally(() => { + isSubmiting.value = false; + }); + }); }; const handleReset = () => { diff --git a/dbm-ui/frontend/src/views/mysql/openarea/template-create/components/config-rule/components/RenderData/RenderSchmalTable.vue b/dbm-ui/frontend/src/views/mysql/openarea/template-create/components/config-rule/components/RenderData/RenderSchmalTable.vue index 450e341863..1180b35aba 100644 --- a/dbm-ui/frontend/src/views/mysql/openarea/template-create/components/config-rule/components/RenderData/RenderSchmalTable.vue +++ b/dbm-ui/frontend/src/views/mysql/openarea/template-create/components/config-rule/components/RenderData/RenderSchmalTable.vue @@ -20,7 +20,8 @@ :list="dbNameList" multiple :placeholder="t('请选择')" - :rules="rules" /> + :rules="rules" + show-select-all /> diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json index de7ba4969d..05cd291454 100644 --- a/dbm-ui/frontend/src/locales/zh-cn.json +++ b/dbm-ui/frontend/src/locales/zh-cn.json @@ -2553,5 +2553,17 @@ "规则下存在实例_不可删除": "规则下存在实例，不可删除", "确认删除该规则？": "确认删除该规则？", "IP_PORT_或_域名_端口": "IP:PORT 或 域名:端口", + "mongDB实例视图": "【MongDB】实例视图", + "实例：name": "实例：{name}", + "主域名": "主域名", + "从域名": "从域名", + "请输入关键字或选择条件搜索": "请输入关键字或选择条件搜索", + "集群架构": "集群架构", + "分片集群": "分片集群", + "分片名": "分片名", + "副本集": "副本集", + "导出": "导出", + "副本集集群": "副本集集群", + "分片集群实例": "分片集群实例", "这行勿动！新增翻译请在上一行添加！": "" } \ No newline at end of file diff --git a/dbm-ui/frontend/src/router/index.ts b/dbm-ui/frontend/src/router/index.ts index 1cffed20bd..7ca7ce0315 100644 --- a/dbm-ui/frontend/src/router/index.ts +++ b/dbm-ui/frontend/src/router/index.ts @@ -20,6 +20,7 @@ import { import type { BigdataFunctions, + MongoFunctions, MySQLFunctions, RedisFunctions, } from '@services/model/function-controller/functionController'; @@ -36,6 +37,7 @@ import getHDFSRoutes from '@views/hdfs-manage/routes'; import getInfluxDBRoutes from '@views/influxdb-manage/routes'; import getInspectionRoutes from '@views/inspection-manage/routes'; import getKafkaRoutes from '@views/kafka-manage/routes'; +import getMongoRoutes from '@views/mongodb-manage/routes'; import getDBMonitorAlarmRoutes from '@views/monitor-alarm-db/routes'; import getPlatMonitorAlarmRoutes from '@views/monitor-alarm-plat/routes'; import getMysqlRoutes from '@views/mysql/routes'; @@ -86,6 +88,7 @@ export default () => { const mysqlController = funControllerData.getFlatData('mysql'); const redisController = funControllerData.getFlatData('redis'); const bigdataController = funControllerData.getFlatData('bigdata'); + const mongdbController = funControllerData.getFlatData('mongodb'); appRouter = createRouter({ history: createWebHistory(), @@ -129,6 +132,7 @@ export default () => { ...getTemporaryPasswordModify(), ...getRiakManage(bigdataController), ...getTicketFlowSettingRoutes(), + ...getMongoRoutes(mongdbController), ], }, { diff --git a/dbm-ui/frontend/src/services/model/function-controller/defaultController.json b/dbm-ui/frontend/src/services/model/function-controller/defaultController.json index a8ae98005d..6c47a9de5f 100644 --- a/dbm-ui/frontend/src/services/model/function-controller/defaultController.json +++ b/dbm-ui/frontend/src/services/model/function-controller/defaultController.json @@ -81,4 +81,4 @@ } } } -} +} \ No newline at end of file diff --git a/dbm-ui/frontend/src/services/model/function-controller/functionController.ts b/dbm-ui/frontend/src/services/model/function-controller/functionController.ts index 168d456499..ca19b33b10 100644 --- a/dbm-ui/frontend/src/services/model/function-controller/functionController.ts +++ b/dbm-ui/frontend/src/services/model/function-controller/functionController.ts @@ -1,3 +1,4 @@ +/* eslint-disable max-len */ /* * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available. * @@ -16,7 +17,8 @@ export type MySQLFunctions = 'toolbox' | 'tendbsingle' | 'tendbha' | 'tendbclust export type RedisFunctions = 'PredixyTendisplusCluster' | 'TwemproxyRedisInstance' | 'TwemproxyTendisSSDInstance' | 'toolbox'; export type BigdataFunctions = 'es' | 'kafka' | 'hdfs' | 'influxdb' | 'pulsar' | 'riak'; export type MonitorFunctions = 'duty_rule' | 'monitor_policy' | 'notice_group'; -export type FunctionKeys = AddonsFunctions | MySQLFunctions | RedisFunctions | BigdataFunctions | MonitorFunctions +export type MongoFunctions = 'mongodb'; +export type FunctionKeys = AddonsFunctions | MySQLFunctions | RedisFunctions | BigdataFunctions | MonitorFunctions | MongoFunctions export interface ControllerBaseInfo { is_enabled: boolean, @@ -32,6 +34,7 @@ interface ControllerData { redis: ControllerItem, bigdata: ControllerItem, monitor: ControllerItem, + mongodb: ControllerItem, } export type ExtractedControllerDataKeys = Extract; @@ -42,6 +45,7 @@ export default class FunctionController { redis: ControllerItem; bigdata: ControllerItem; monitor: ControllerItem; + mongodb: ControllerItem; constructor(payload = {} as ControllerData) { this.addons = payload.addons; @@ -49,6 +53,7 @@ export default class FunctionController { this.redis = payload.redis; this.bigdata = payload.bigdata; this.monitor = payload.monitor; + this.mongodb = payload.mongodb; } getFlatData< diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance-detail.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance-detail.ts new file mode 100644 index 0000000000..b81deab7ea --- /dev/null +++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance-detail.ts @@ -0,0 +1,63 @@ +export default class mongodbInstanceDetail { + bk_agent_id: string; + bk_cloud_id: number; + bk_cloud_name: string; + bk_cpu: number; + bk_disk: number; + bk_host_id: number; + bk_host_innerip: string; + bk_idc_id: string; + bk_idc_name: string; + bk_mem: number; + bk_os_name: string; + cluster_id: number; + cluster_name: string; + cluster_type: string; + create_at: string; + db_module_id: number; + db_version: null; + id: number; + instance_address: string; + ip: string; + machine_type: string; + master_domain: string; + port: number; + role: string; + shard: string; + slave_domain: string; + spec_config: string; + status: string; + version: string; + + constructor(payload: mongodbInstanceDetail) { + this.bk_agent_id = payload.bk_agent_id; + this.bk_cloud_id = payload.bk_cloud_id; + this.bk_cloud_name = payload.bk_cloud_name; + this.bk_cpu = payload.bk_cpu; + this.bk_disk = payload.bk_disk; + this.bk_host_id = payload.bk_host_id; + this.bk_host_innerip = payload.bk_host_innerip; + this.bk_idc_id = payload.bk_idc_id; + this.bk_idc_name = payload.bk_idc_name; + this.bk_mem = payload.bk_mem; + this.bk_os_name = payload.bk_os_name; + this.cluster_id = payload.cluster_id; + this.cluster_name = payload.cluster_name; + this.cluster_type = payload.cluster_type; + this.create_at = payload.create_at; + this.db_module_id = payload.db_module_id; + this.db_version = payload.db_version; + this.id = payload.id; + this.instance_address = payload.instance_address; + this.ip = payload.ip; + this.machine_type = payload.machine_type; + this.master_domain = payload.master_domain; + this.port = payload.port; + this.role = payload.role; + this.shard = payload.shard; + this.slave_domain = payload.slave_domain; + this.spec_config = payload.spec_config; + this.status = payload.status; + this.version = payload.version; + } +} diff --git a/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts new file mode 100644 index 0000000000..dae1624e32 --- /dev/null +++ b/dbm-ui/frontend/src/services/model/mongodb/mongodb-instance.ts @@ -0,0 +1,71 @@ +import dayjs from 'dayjs'; + +import { t } from '@locales'; + +export default class mongodbInstance { + static themes: Record = { + running: 'success', + }; + static statusMap: Record = { + running: '正常', + unavailable: '异常', + }; + bk_cloud_id: number; + bk_cloud_name: string; + bk_host_id: number; + cluster_id: number; + cluster_name: string; + cluster_type: string; + create_at: string; + db_module_id: string; + id: number; + ip: number; + instance_address: string; + machine_type: string; + master_domain: string; + port: number; + role: string; + shard: string; + slave_domain: string; + spec_config: string; + status: string; + version: string; + + constructor(payload = {} as mongodbInstance) { + this.bk_cloud_id = payload.bk_cloud_id; + this.bk_cloud_name = payload.bk_cloud_name; + this.bk_host_id = payload.bk_host_id; + this.cluster_id = payload.cluster_id; + this.cluster_name = payload.cluster_name; + this.cluster_type = payload.cluster_type; + this.create_at = payload.create_at; + this.db_module_id = payload.db_module_id; + this.id = payload.id; + this.instance_address = payload.instance_address; + this.ip = payload.ip; + this.machine_type = payload.machine_type; + this.master_domain = payload.master_domain; + this.port = payload.port; + this.role = payload.role; + this.shard = payload.shard; + this.spec_config = payload.spec_config; + this.slave_domain = payload.slave_domain; + this.status = payload.status; + this.version = payload.version; + } + + get isNew() { + return dayjs().isBefore(dayjs(this.create_at).add(24, 'hour')); + } + + get dbStatusConfigureObj() { + const text = mongodbInstance.statusMap[this.status] || '--'; + const theme = mongodbInstance.themes[this.status] || 'danger'; + return { text, theme }; + } + + get clusterTypeText() { + return this.cluster_type === 'MongoReplicaSet' ? t('副本集') : t('分片集群'); + } +} + diff --git a/dbm-ui/frontend/src/services/source/mongodbInstance.ts b/dbm-ui/frontend/src/services/source/mongodbInstance.ts new file mode 100644 index 0000000000..36cb8b0d4c --- /dev/null +++ b/dbm-ui/frontend/src/services/source/mongodbInstance.ts @@ -0,0 +1,64 @@ +/* + * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available. + * + * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved. + * + * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at https://opensource.org/licenses/MIT + * + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed + * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for + * the specific language governing permissions and limitations under the License. +*/ + +import MongodbInstanceModel from '@services/model/mongodb/mongodb-instance'; +import MongodbInstanceDetailModel from '@services/model/mongodb/mongodb-instance-detail'; +import type { ListBase } from '@services/types/index'; + +import { useGlobalBizs } from '@stores'; + +import http from '../http'; + +const { currentBizId } = useGlobalBizs(); + +const path = `/apis/mongodb/bizs/${currentBizId}/mongodb_resources`; + +/** + * 获取列表数据 + */ +export function getInstanceList(params: { + limit?: number, + offset?: number, +}) { + return http.get>(`${path}/list_instances/`, params).then(data => ({ + ...data, + results: data.results.map(item => new MongodbInstanceModel(item)), + })); +} + +/** + * 获取实例详情 + */ +export function getInstanceDetail(params: { + instance_address: string, + cluster_id: number +}) { + return http.get(`${path}/retrieve_instance/`, params); +} + +/** + * 获取角色列表 + */ +export function getRoleList(params: { + limit?: number, + offset?: number +}) { + return http.get(`${path}/get_instance_role/`, params); +} + +/** + * 导出实例数据为 excel 文件 + */ +export function exportMongodbInstanceToExcel(params: { bk_host_ids?: number[] }) { + return http.post(`${path}/export_instance/`, params, { responseType: 'blob' }); +} diff --git a/dbm-ui/frontend/src/views/mongodb-manage/index.vue b/dbm-ui/frontend/src/views/mongodb-manage/index.vue new file mode 100644 index 0000000000..7c2aa3f3e1 --- /dev/null +++ b/dbm-ui/frontend/src/views/mongodb-manage/index.vue @@ -0,0 +1,3 @@ + diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/BaseInfo.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/BaseInfo.vue new file mode 100644 index 0000000000..d911a73e26 --- /dev/null +++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/BaseInfo.vue @@ -0,0 +1,170 @@ + + + + + + diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/Config.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/Config.vue new file mode 100644 index 0000000000..a1b02bdc28 --- /dev/null +++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/components/Config.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/index.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/index.vue new file mode 100644 index 0000000000..9b7b49e76e --- /dev/null +++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/detail/index.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/index.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/index.vue new file mode 100644 index 0000000000..87f5610c9a --- /dev/null +++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/index.vue @@ -0,0 +1,28 @@ + + + + diff --git a/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue new file mode 100644 index 0000000000..fdff3385c9 --- /dev/null +++ b/dbm-ui/frontend/src/views/mongodb-manage/mongodb-instance/list/index.vue @@ -0,0 +1,425 @@ + + + diff --git a/dbm-ui/frontend/src/views/mongodb-manage/routes.ts b/dbm-ui/frontend/src/views/mongodb-manage/routes.ts new file mode 100644 index 0000000000..b284771e6d --- /dev/null +++ b/dbm-ui/frontend/src/views/mongodb-manage/routes.ts @@ -0,0 +1,34 @@ +import type { RouteRecordRaw } from 'vue-router'; + +import type { MongoFunctions } from '@services/model/function-controller/functionController'; + +import { t } from '@locales/index'; + +const routes: RouteRecordRaw[] = [ + { + name: 'mongodb', + path: 'mongodb-manage', + meta: { + navName: t('集群管理'), + }, + component: () => import('@views/mongodb-manage/mongodb-instance/index.vue'), + children: [ + { + name: 'mongodbInstance', + path: 'mongodb-instance', + meta: { + navName: t('mongDB实例视图'), + fullscreen: true, + }, + component: () => import('@views/mongodb-manage/mongodb-instance/index.vue'), + }, + ], + }, +]; + +export default function getRoutes(controller: Record) { + if (controller.mongodb !== true) { + return []; + } + return routes; +} diff --git a/dbm-ui/frontend/src/views/redis/master-failover/pages/page1/Index.vue b/dbm-ui/frontend/src/views/redis/master-failover/pages/page1/Index.vue index 94188e9d5a..e8cc484308 100644 --- a/dbm-ui/frontend/src/views/redis/master-failover/pages/page1/Index.vue +++ b/dbm-ui/frontend/src/views/redis/master-failover/pages/page1/Index.vue @@ -1,4 +1,3 @@ -