From 5fe6ad7be68dfdcb1c62b155b89372cacafbce55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E7=94=9C?= <759644414@qq.com> Date: Thu, 19 Dec 2024 17:08:43 +0800 Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9AAdd=20the=20i18n=20for=20UI=20tex?= =?UTF-8?q?ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/components/TopoComponent/constants.ts | 241 +++--- ui/src/components/TopoComponent/helper.ts | 62 +- ui/src/components/TopoComponent/index.tsx | 310 ++++---- ui/src/i18n/strings/en-US.json | 85 ++- ui/src/i18n/strings/zh-CN.json | 84 ++- .../Cluster/Detail/Overview/BasicInfo.tsx | 186 ++--- .../Cluster/Detail/Overview/NFSInfoModal.tsx | 77 +- .../Detail/Overview/ParametersModal.tsx | 96 +-- .../Detail/Overview/ResourceDrawer.tsx | 180 ++--- .../Cluster/Detail/Overview/ServerTable.tsx | 238 +++--- .../pages/Cluster/Detail/Overview/index.tsx | 690 +++++++++--------- ui/src/pages/Cluster/New/BackUp.tsx | 64 +- ui/src/pages/Cluster/New/BasicInfo.tsx | 162 ++-- ui/src/pages/Cluster/New/Observer.tsx | 186 ++--- .../pages/Tenant/Detail/NewBackup/index.tsx | 276 +++---- .../pages/Tenant/Detail/Overview/Replicas.tsx | 188 ++--- ui/src/pages/Tenant/New/BasicInfo.tsx | 24 +- 17 files changed, 1661 insertions(+), 1488 deletions(-) diff --git a/ui/src/components/TopoComponent/constants.ts b/ui/src/components/TopoComponent/constants.ts index 6c243019e..b26e5ef14 100644 --- a/ui/src/components/TopoComponent/constants.ts +++ b/ui/src/components/TopoComponent/constants.ts @@ -3,150 +3,150 @@ import { intl } from '@/utils/intl'; import { clone } from 'lodash'; const clusterOperate: Topo.OperateTypeLabel = [ - { - value: 'addZone', - label: intl.formatMessage({ - id: 'dashboard.Detail.Topo.constants.AddZone', - defaultMessage: '新增zone', - }), - }, - { - value: 'upgradeCluster', - label: intl.formatMessage({ - id: 'OBDashboard.Detail.Topo.constants.Upgrade', - defaultMessage: '升级', - }), - }, - { - value: 'deleteCluster', - label: intl.formatMessage({ - id: 'OBDashboard.Detail.Topo.constants.Delete', - defaultMessage: '删除', - }), - }, -]; +{ + value: 'addZone', + label: intl.formatMessage({ + id: 'dashboard.Detail.Topo.constants.AddZone', + defaultMessage: '新增zone' + }) +}, +{ + value: 'upgradeCluster', + label: intl.formatMessage({ + id: 'OBDashboard.Detail.Topo.constants.Upgrade', + defaultMessage: '升级' + }) +}, +{ + value: 'deleteCluster', + label: intl.formatMessage({ + id: 'OBDashboard.Detail.Topo.constants.Delete', + defaultMessage: '删除' + }) +}]; + const zoneOperate: Topo.OperateTypeLabel = [ - { - value: 'scaleServer', - label: intl.formatMessage({ - id: 'OBDashboard.Detail.Topo.constants.Scale', - defaultMessage: '扩缩容', - }), - }, - { - value: 'deleteZone', - label: intl.formatMessage({ - id: 'dashboard.Detail.Topo.constants.DeleteZone', - defaultMessage: '删除zone', - }), - disabled: false, - }, -]; +{ + value: 'scaleServer', + label: intl.formatMessage({ + id: 'OBDashboard.Detail.Topo.constants.Scale', + defaultMessage: '扩缩容' + }) +}, +{ + value: 'deleteZone', + label: intl.formatMessage({ + id: 'dashboard.Detail.Topo.constants.DeleteZone', + defaultMessage: '删除zone' + }), + disabled: false +}]; + const serverOperate: Topo.OperateTypeLabel = [ +{ + value: 'restartServer', + label: intl.formatMessage({ id: "src.components.TopoComponent.2494A473", defaultMessage: "重启server" }), + disabled: false +}, +{ + value: 'deleteServer', + label: intl.formatMessage({ + id: 'dashboard.Detail.Topo.constants.DeleteServer', + defaultMessage: '删除 server' + }), + disabled: false +} +// { +// value: 'add', +// label: intl.formatMessage({ +// id: 'dashboard.Detail.Topo.constants.AddServer', +// defaultMessage: '添加server', +// }), +// }, +// { +// value: 'upgrade', +// label: intl.formatMessage({ +// id: 'dashboard.Detail.Topo.constants.UpgradeServer', +// defaultMessage: '升级server', +// }), +// }, +]; + +const clusterOperateOfTenant: Topo.OperateTypeLabel = [ +{ + value: 'changeUnitCount', + label: intl.formatMessage({ + id: 'Dashboard.components.TopoComponent.constants.ModifyTheNumberOfUnits', + defaultMessage: '修改 Unit 数量' + }) +}]; + + +const getZoneOperateOfTenant = ( +haveResourcePool: boolean, +tenantReplicas: API.ReplicaDetailType[], +tenantStatus?: string, +clusterStatus?: string) +: Topo.OperateTypeLabel => { + return haveResourcePool ? + [ { - value: 'restartServer', - label: '重启server', - disabled: false, + value: 'editResourcePools', + label: intl.formatMessage({ + id: 'Dashboard.components.TopoComponent.constants.EditResourcePool', + defaultMessage: '编辑资源池' + }), + disabled: tenantStatus !== 'running' || clusterStatus !== 'running' }, { - value: 'deleteServer', + value: 'deleteResourcePool', label: intl.formatMessage({ - id: 'dashboard.Detail.Topo.constants.DeleteServer', - defaultMessage: '删除 server', + id: 'Dashboard.components.TopoComponent.constants.DeleteAResourcePool', + defaultMessage: '删除资源池' }), - disabled: false, - }, - // { - // value: 'add', - // label: intl.formatMessage({ - // id: 'dashboard.Detail.Topo.constants.AddServer', - // defaultMessage: '添加server', - // }), - // }, - // { - // value: 'upgrade', - // label: intl.formatMessage({ - // id: 'dashboard.Detail.Topo.constants.UpgradeServer', - // defaultMessage: '升级server', - // }), - // }, -]; + disabled: + tenantReplicas.length <= 2 || + tenantStatus !== 'running' || + clusterStatus !== 'running' + }] : -const clusterOperateOfTenant: Topo.OperateTypeLabel = [ + [ { - value: 'changeUnitCount', + value: 'createResourcePools', label: intl.formatMessage({ - id: 'Dashboard.components.TopoComponent.constants.ModifyTheNumberOfUnits', - defaultMessage: '修改 Unit 数量', + id: 'Dashboard.components.TopoComponent.constants.AddAResourcePool', + defaultMessage: '新增资源池' }), - }, -]; + disabled: tenantStatus !== 'running' || clusterStatus !== 'running' + }]; -const getZoneOperateOfTenant = ( - haveResourcePool: boolean, - tenantReplicas: API.ReplicaDetailType[], - tenantStatus?: string, - clusterStatus?: string, -): Topo.OperateTypeLabel => { - return haveResourcePool - ? [ - { - value: 'editResourcePools', - label: intl.formatMessage({ - id: 'Dashboard.components.TopoComponent.constants.EditResourcePool', - defaultMessage: '编辑资源池', - }), - disabled: tenantStatus !== 'running' || clusterStatus !== 'running', - }, - { - value: 'deleteResourcePool', - label: intl.formatMessage({ - id: 'Dashboard.components.TopoComponent.constants.DeleteAResourcePool', - defaultMessage: '删除资源池', - }), - disabled: - tenantReplicas.length <= 2 || - tenantStatus !== 'running' || - clusterStatus !== 'running', - }, - ] - : [ - { - value: 'createResourcePools', - label: intl.formatMessage({ - id: 'Dashboard.components.TopoComponent.constants.AddAResourcePool', - defaultMessage: '新增资源池', - }), - disabled: tenantStatus !== 'running' || clusterStatus !== 'running', - }, - ]; }; const getZoneOperateOfCluster = ( - topoData: Topo.GraphNodeType | undefined, - status: string, -): Topo.OperateTypeLabel => { +topoData: Topo.GraphNodeType | undefined, +status: string) +: Topo.OperateTypeLabel => { if (!topoData) return []; const isDisabled = topoData?.children?.length <= 2 || status !== 'running'; zoneOperate.forEach((operate) => { if (operate.value === 'deleteZone') operate.disabled = isDisabled; if (operate.value === 'scaleServer') - operate.disabled = status !== 'running'; + operate.disabled = status !== 'running'; }); return zoneOperate; }; const getServerOperateOfCluster = ( - topoData: Topo.GraphNodeType | undefined, - disabled: boolean, - serverZone: string, -): Topo.OperateTypeLabel => { +topoData: Topo.GraphNodeType | undefined, +disabled: boolean, +serverZone: string) +: Topo.OperateTypeLabel => { if (!topoData) return []; // 任何 zone 里面只剩一个 server 就不能删了 const supportStaticIPisDisabled = topoData?.supportStaticIP; const zoneCurrent = topoData?.children?.find( - (zone) => zone.label === serverZone, + (zone) => zone.label === serverZone ); const serverCurrentisDisabled = zoneCurrent?.children?.length === 1; @@ -156,17 +156,17 @@ const getServerOperateOfCluster = ( operate.disabled = disabled; } if (operate.value === 'deleteServer') - operate.disabled = serverCurrentisDisabled; + operate.disabled = serverCurrentisDisabled; if (operate.value === 'restartServer') - operate.disabled = !supportStaticIPisDisabled; + operate.disabled = !supportStaticIPisDisabled; }); return serverOperate; }; const getClusterOperates = ( - clusterOperateList: Topo.OperateTypeLabel, - disabled: boolean, -): Topo.OperateTypeLabel => { +clusterOperateList: Topo.OperateTypeLabel, +disabled: boolean) +: Topo.OperateTypeLabel => { const res = clone(clusterOperateList); res.forEach((item) => { item.disabled = disabled; @@ -182,5 +182,4 @@ export { getZoneOperateOfCluster, getZoneOperateOfTenant, serverOperate, - zoneOperate, -}; + zoneOperate }; \ No newline at end of file diff --git a/ui/src/components/TopoComponent/helper.ts b/ui/src/components/TopoComponent/helper.ts index 29bc1d8b5..ff4e5879b 100644 --- a/ui/src/components/TopoComponent/helper.ts +++ b/ui/src/components/TopoComponent/helper.ts @@ -4,8 +4,8 @@ import { MAX_IOPS, SERVER_IMG_MAP, TOPO_INFO_CONFIG, - ZONE_IMG_MAP, -} from '@/constants'; + ZONE_IMG_MAP } from +'@/constants'; import type { Topo } from '@/type/topo'; import { intl } from '@/utils/intl'; import { Graph, INode } from '@antv/g6'; @@ -28,7 +28,7 @@ const propsToEventMap = { dragleave: 'onDragLeave', dragover: 'onDragOver', drop: 'onDrop', - contextmenu: 'onContextMenu', + contextmenu: 'onContextMenu' }; /** @@ -41,8 +41,8 @@ export function appenAutoShapeListener(graph: Graph) { const item = evt.item as INode; const graph = evt.currentTarget as Graph; const func = - (shape?.get(propName) as Topo.ShapeEventListner) || - evt.target.cfg[propName]; + shape?.get(propName) as Topo.ShapeEventListner || + evt.target.cfg[propName]; if (func) { func(evt, item, shape, graph); } @@ -51,24 +51,24 @@ export function appenAutoShapeListener(graph: Graph) { } function getZoneTypeText( - zone: Pick, - tenantTopoData: API.ReplicaDetailType[], -) { +zone: Pick, +tenantTopoData: API.ReplicaDetailType[]) +{ return tenantTopoData.find((item) => item.zone === zone.zone)?.type; } function getTooltipInfo( - zone: Pick, - tenantTopoData: API.ReplicaDetailType[], -) { +zone: Pick, +tenantTopoData: API.ReplicaDetailType[]) +{ const targetZone = tenantTopoData.find((item) => item.zone === zone.zone); if (targetZone) { return { maxCPU: targetZone.maxCPU, minCPU: targetZone.minCPU, memorySize: targetZone.memorySize, - minIops: targetZone.minIops >= MAX_IOPS ? '无限制' : targetZone.minIops, - maxIops: targetZone.maxIops >= MAX_IOPS ? '无限制' : targetZone.maxIops, + minIops: targetZone.minIops >= MAX_IOPS ? intl.formatMessage({ id: "src.components.TopoComponent.601BE33A", defaultMessage: "无限制" }) : targetZone.minIops, + maxIops: targetZone.maxIops >= MAX_IOPS ? intl.formatMessage({ id: "src.components.TopoComponent.0E4AAB80", defaultMessage: "无限制" }) : targetZone.maxIops }; } return; @@ -84,7 +84,7 @@ function getChildren(zoneList: any, tenantReplicas?: API.ReplicaDetailType[]) { type: 'zone', img: '', badgeImg: '', - disable: false, + disable: false }; const typeText = getZoneTypeText(zone, tenantReplicas || []); const tooltipInfo = getTooltipInfo(zone, tenantReplicas || []); @@ -100,9 +100,9 @@ function getChildren(zoneList: any, tenantReplicas?: API.ReplicaDetailType[]) { temp.tooltipInfo = tooltipInfo; } if ( - tenantReplicas && - !tenantReplicas.find((item) => item.zone === zone.zone) - ) { + tenantReplicas && + !tenantReplicas.find((item) => item.zone === zone.zone)) + { temp.disable = true; } temp.children = zone.observers.map((server: Topo.TopoServer) => { @@ -114,7 +114,7 @@ function getChildren(zoneList: any, tenantReplicas?: API.ReplicaDetailType[]) { img: SERVER_IMG_MAP.get(server.status), badgeImg: BADGE_IMG_MAP.get(server.status), disable: temp.disable, - zone: zone.zone, + zone: zone.zone }; }); children.push(temp); @@ -125,9 +125,9 @@ function getChildren(zoneList: any, tenantReplicas?: API.ReplicaDetailType[]) { * format topodata */ export const formatTopoData = ( - responseData: any, - tenantReplicas?: API.ReplicaDetailType[], -): { +responseData: any, +tenantReplicas?: API.ReplicaDetailType[]) +: { topoData: Topo.GraphNodeType; basicInfo: Topo.BasicInfoType; } => { @@ -136,7 +136,7 @@ export const formatTopoData = ( id: responseData.namespace + responseData.name, label: intl.formatMessage({ id: 'OBDashboard.Detail.Topo.helper.Cluster', - defaultMessage: '集群', + defaultMessage: '集群' }), status: responseData.status, supportStaticIP: responseData.supportStaticIP, @@ -144,7 +144,7 @@ export const formatTopoData = ( children: [], img: CLUSTER_IMG_MAP.get(responseData.status), badgeImg: BADGE_IMG_MAP.get(responseData.status), - disable: false, + disable: false }; topoData.children = getChildren(responseData.topology, tenantReplicas); @@ -157,7 +157,7 @@ export const formatTopoData = ( return { topoData, - basicInfo, + basicInfo }; }; @@ -165,9 +165,9 @@ export const formatTopoData = ( * Determine whether the old and new topoData attribute values are exactly the same */ export const checkTopoDataIsSame = ( - oldTopoData: any, - newTopoData: any, -): boolean => { +oldTopoData: any, +newTopoData: any) +: boolean => { if (!_.matches(oldTopoData)(newTopoData)) return false; if (newTopoData.children.length > oldTopoData.children.length) return false; oldTopoData.children.forEach((oldZone: any, idx: number) => { @@ -178,9 +178,9 @@ export const checkTopoDataIsSame = ( }; export const getServerNumber = ( - topoData: Topo.GraphNodeType, - zoneName: string, -): number => { +topoData: Topo.GraphNodeType, +zoneName: string) +: number => { const zones = topoData.children || []; for (const zone of zones) { if (zone.label === zoneName) { @@ -192,4 +192,4 @@ export const getServerNumber = ( export const haveDisabledOperate = (operateList: Topo.OperateTypeLabel) => { return operateList.find((operate) => operate.disabled); -}; +}; \ No newline at end of file diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx index 5b35e56d2..faa8aa1fa 100644 --- a/ui/src/components/TopoComponent/index.tsx +++ b/ui/src/components/TopoComponent/index.tsx @@ -15,13 +15,13 @@ import BasicInfo from '@/pages/Cluster/Detail/Overview/BasicInfo'; import { getClusterFromTenant, getOriginResourceUsages, - getZonesOptions, -} from '@/pages/Tenant/helper'; + getZonesOptions } from +'@/pages/Tenant/helper'; import { getClusterDetailReq } from '@/services'; import { deleteClusterReportWrap, - deleteObzoneReportWrap, -} from '@/services/reportRequest/clusterReportReq'; + deleteObzoneReportWrap } from +'@/services/reportRequest/clusterReportReq'; import { deleteObtenantPool } from '@/services/tenant'; import type { Topo } from '@/type/topo'; import MoreModal from '../moreModal'; @@ -31,13 +31,13 @@ import { clusterOperateOfTenant, getServerOperateOfCluster, getZoneOperateOfCluster, - getZoneOperateOfTenant, -} from './constants'; + getZoneOperateOfTenant } from +'./constants'; import { appenAutoShapeListener, checkTopoDataIsSame, - getServerNumber, -} from './helper'; + getServerNumber } from +'./helper'; import styles from './index.less'; interface TopoProps { @@ -61,29 +61,29 @@ export default function TopoComponent({ refreshTenant, defaultUnitCount, status, - loading, + loading }: TopoProps) { const { ns: urlNs, name: urlName } = useParams(); const access = useAccess(); - const clusterOperateList = tenantReplicas - ? clusterOperateOfTenant - : clusterOperate; + const clusterOperateList = tenantReplicas ? + clusterOperateOfTenant : + clusterOperate; const modelRef = useRef(null); const [visible, setVisible] = useState(false); const [operateList, setOprateList] = - useState(clusterOperateList); + useState(clusterOperateList); const [inNode, setInNode] = useState(false); const [inModal, setInModal] = useState(false); const [[ns, name]] = useState( - namespace && clusterNameOfKubectl - ? [namespace, clusterNameOfKubectl] - : [urlNs, urlName], + namespace && clusterNameOfKubectl ? + [namespace, clusterNameOfKubectl] : + [urlNs, urlName] ); //Control the visibility of operation and maintenance modal const [operateModalVisible, setOperateModalVisible] = - useState(false); + useState(false); //Current operation and maintenance modal type const modalType = useRef('addZone'); //The currently clicked node id @@ -100,12 +100,12 @@ export default function TopoComponent({ const { data: originTopoData, run: getTopoData, - loading: clusterTopoLoading, + loading: clusterTopoLoading } = useRequest(getClusterDetailReq, { manual: true, onBefore: () => { preTopoData.current = originTopoData?.topoData; - }, + } }); const clusterStatus = useRef(originTopoData?.basicInfo?.status); const tenantStatus = useRef(status); @@ -113,60 +113,60 @@ export default function TopoComponent({ const handleClick = (evt: IG6GraphEvent) => { if (modelRef.current) { switch (evt.item?._cfg?.model?.type) { - case 'cluster': { - const disabled = tenantReplicas - ? clusterStatus.current !== 'running' || - tenantStatus.current !== 'running' - : clusterStatus.current !== 'running'; - setOprateList(getClusterOperates(clusterOperateList, disabled)); - break; - } + case 'cluster':{ + const disabled = tenantReplicas ? + clusterStatus.current !== 'running' || + tenantStatus.current !== 'running' : + clusterStatus.current !== 'running'; + setOprateList(getClusterOperates(clusterOperateList, disabled)); + break; + } - case 'zone': { - const zone = evt.item?._cfg?.model?.label as string; - if (tenantReplicas) { - const { setEditZone } = resourcePoolDefaultValue; - if (setEditZone) setEditZone(zone); - const haveResourcePool = !!tenantReplicas?.find( - (replica) => replica.zone === zone, - ); - setOprateList( - getZoneOperateOfTenant( - haveResourcePool, - tenantReplicas, - tenantStatus.current, - clusterStatus.current, - ), - ); - } else { + case 'zone':{ + const zone = evt.item?._cfg?.model?.label as string; + if (tenantReplicas) { + const { setEditZone } = resourcePoolDefaultValue; + if (setEditZone) setEditZone(zone); + const haveResourcePool = !!tenantReplicas?.find( + (replica) => replica.zone === zone + ); + setOprateList( + getZoneOperateOfTenant( + haveResourcePool, + tenantReplicas, + tenantStatus.current, + clusterStatus.current + ) + ); + } else { + setOprateList( + getZoneOperateOfCluster( + originTopoData?.topoData, + clusterStatus.current + ) + ); + } + chooseZoneName.current = zone; + break; + } + + case 'server':{ + const disabled = tenantReplicas ? + clusterStatus.current !== 'running' || + tenantStatus.current !== 'running' : + clusterStatus.current !== 'running'; + const server = evt.item?._cfg?.model?.label as string; + const serverZone = evt.item?._cfg?.model?.zone as string; setOprateList( - getZoneOperateOfCluster( + getServerOperateOfCluster( originTopoData?.topoData, - clusterStatus.current, - ), + disabled, + serverZone + ) ); + chooseServerName.current = server; + break; } - chooseZoneName.current = zone; - break; - } - - case 'server': { - const disabled = tenantReplicas - ? clusterStatus.current !== 'running' || - tenantStatus.current !== 'running' - : clusterStatus.current !== 'running'; - const server = evt.item?._cfg?.model?.label as string; - const serverZone = evt.item?._cfg?.model?.zone as string; - setOprateList( - getServerOperateOfCluster( - originTopoData?.topoData, - disabled, - serverZone, - ), - ); - chooseServerName.current = server; - break; - } } currentId.current = evt.item!._cfg!.id as string; setVisible(true); @@ -180,10 +180,10 @@ export default function TopoComponent({ if (res.successful) { message.success( res.message || - intl.formatMessage({ - id: 'Dashboard.components.TopoComponent.OperationSucceeded', - defaultMessage: '操作成功！', - }), + intl.formatMessage({ + id: 'Dashboard.components.TopoComponent.OperationSucceeded', + defaultMessage: '操作成功！' + }) ); getTopoData({ ns: ns!, name: name!, useFor: 'topo', tenantReplicas }); } @@ -193,15 +193,15 @@ export default function TopoComponent({ const res = await deleteObzoneReportWrap({ ns: ns!, name: name!, - zoneName: chooseZoneName.current, + zoneName: chooseZoneName.current }); if (res.successful) { message.success( res.message || - intl.formatMessage({ - id: 'Dashboard.components.TopoComponent.DeletedSuccessfully', - defaultMessage: '删除成功', - }), + intl.formatMessage({ + id: 'Dashboard.components.TopoComponent.DeletedSuccessfully', + defaultMessage: '删除成功' + }) ); getTopoData({ ns: ns!, name: name!, useFor: 'topo', tenantReplicas }); } @@ -215,15 +215,15 @@ export default function TopoComponent({ graph.current = new G6.TreeGraph(config(width, height)); G6.registerNode( 'cluster', - createNodeFromReact(ReactNode(handleClick, access.obclusterwrite)), + createNodeFromReact(ReactNode(handleClick, access.obclusterwrite)) ); G6.registerNode( 'zone', - createNodeFromReact(ReactNode(handleClick, access.obclusterwrite)), + createNodeFromReact(ReactNode(handleClick, access.obclusterwrite)) ); G6.registerNode( 'server', - createNodeFromReact(ReactNode(handleClick, access.obclusterwrite)), + createNodeFromReact(ReactNode(handleClick, access.obclusterwrite)) ); G6.registerEdge('flow-line', { draw(cfg, group) { @@ -234,16 +234,16 @@ export default function TopoComponent({ attrs: { stroke: style!.stroke, path: [ - ['M', startPoint.x, startPoint.y], //M: Move to - ['L', startPoint.x, (startPoint.y + endPoint.y) / 2], // L:line to - ['L', endPoint.x, (startPoint.y + endPoint.y) / 2], - ['L', endPoint.x, endPoint.y], - ], - }, + ['M', startPoint.x, startPoint.y], //M: Move to + ['L', startPoint.x, (startPoint.y + endPoint.y) / 2], // L:line to + ['L', endPoint.x, (startPoint.y + endPoint.y) / 2], + ['L', endPoint.x, endPoint.y]] + + } }); return shape; - }, + } }); /** @@ -265,16 +265,16 @@ export default function TopoComponent({ const res = await deleteObtenantPool({ ns: urlNs!, name: urlName!, - zoneName, + zoneName }); if (res.successful) { if (refreshTenant) refreshTenant(); message.success( res.message || - intl.formatMessage({ - id: 'Dashboard.Detail.Overview.Replicas.DeletedSuccessfully', - defaultMessage: '删除成功', - }), + intl.formatMessage({ + id: 'Dashboard.Detail.Overview.Replicas.DeletedSuccessfully', + defaultMessage: '删除成功' + }) ); } }; @@ -283,9 +283,9 @@ export default function TopoComponent({ manual: true, onSuccess: (res) => { if (res.successful) { - message.success('删除 Server 已成功'); + message.success(intl.formatMessage({ id: "src.components.TopoComponent.AD3D247F", defaultMessage: "删除 Server 已成功" })); } - }, + } }); const { runAsync: restartOBServers } = useRequest( @@ -294,10 +294,10 @@ export default function TopoComponent({ manual: true, onSuccess: (res) => { if (res.successful) { - message.success('重启 Server 已成功'); + message.success(intl.formatMessage({ id: "src.components.TopoComponent.86ECC17E", defaultMessage: "重启 Server 已成功" })); } - }, - }, + } + } ); /** @@ -317,15 +317,15 @@ export default function TopoComponent({ showDeleteConfirm({ title: intl.formatMessage({ id: 'OBDashboard.Detail.Topo.AreYouSureYouWant', - defaultMessage: '你确定要删除集群吗？', + defaultMessage: '你确定要删除集群吗？' }), - onOk: clusterDelete, + onOk: clusterDelete }); } if (operate === 'scaleServer') { modalType.current = 'scaleServer'; setChooseServerNum( - getServerNumber(originTopoData.topoData, chooseZoneName.current), + getServerNumber(originTopoData.topoData, chooseZoneName.current) ); setOperateModalVisible(true); } @@ -333,9 +333,9 @@ export default function TopoComponent({ showDeleteConfirm({ title: intl.formatMessage({ id: 'OBDashboard.Detail.Topo.AreYouSureYouWant.1', - defaultMessage: '你确定要删除该Zone吗？', + defaultMessage: '你确定要删除该Zone吗？' }), - onOk: zoneDelete, + onOk: zoneDelete }); } if (operate === 'changeUnitCount') { @@ -361,30 +361,30 @@ export default function TopoComponent({ { id: 'Dashboard.components.TopoComponent.AreYouSureYouWant', defaultMessage: - '确定要删除该租户在{{chooseZoneNameCurrent}}上的资源池吗？', + '确定要删除该租户在{{chooseZoneNameCurrent}}上的资源池吗？' }, - { chooseZoneNameCurrent: chooseZoneName.current }, - ), + { chooseZoneNameCurrent: chooseZoneName.current } + ) }); } if (operate === 'deleteServer') { showDeleteConfirm({ - title: '你确定要删除该 server 吗？', + title: intl.formatMessage({ id: "src.components.TopoComponent.FAB70713", defaultMessage: "你确定要删除该 server 吗？" }), onOk: () => { deleteOBServers(ns!, name!, { - observers: [chooseServerName.current], + observers: [chooseServerName.current] }); - }, + } }); } if (operate === 'restartServer') { showDeleteConfirm({ - title: '你确定重启该 server 吗？', + title: intl.formatMessage({ id: "src.components.TopoComponent.96A4C193", defaultMessage: "你确定重启该 server 吗？" }), onOk: () => { restartOBServers(ns!, name!, { - observers: [chooseServerName.current], + observers: [chooseServerName.current] }); - }, + } }); } }; @@ -467,28 +467,28 @@ export default function TopoComponent({ // Use different pictures for nodes in different states return (
- {header - ? header - : originTopoData && ( - - )} + {header ? + header : + originTopoData && + + + }
{useMemo( - () => ( - - ), - - [operateList, visible, status], + () => + , + + + + [operateList, visible, status] )} - replica.zone === resourcePoolDefaultValue.editZone, - ), - ), + essentialParameter: isCreateResourcePool ? + resourcePoolDefaultValue?.essentialParameter : + getOriginResourceUsages( + resourcePoolDefaultValue?.essentialParameter, + resourcePoolDefaultValue?.replicaList?.find( + (replica) => + replica.zone === resourcePoolDefaultValue.editZone + ) + ), newResourcePool: isCreateResourcePool, - zonesOptions: isCreateResourcePool - ? getZonesOptions( - getClusterFromTenant( - resourcePoolDefaultValue?.clusterList, - resourcePoolDefaultValue?.clusterResourceName, - ), - resourcePoolDefaultValue?.replicaList, - ) - : undefined, - }} - /> + zonesOptions: isCreateResourcePool ? + getZonesOptions( + getClusterFromTenant( + resourcePoolDefaultValue?.clusterList, + resourcePoolDefaultValue?.clusterResourceName + ), + resourcePoolDefaultValue?.replicaList + ) : + undefined + }} /> + -
- ); -} + className={styles.topoSpin} /> + + ); + +} \ No newline at end of file diff --git a/ui/src/i18n/strings/en-US.json b/ui/src/i18n/strings/en-US.json index 640d5cbe1..43001593c 100644 --- a/ui/src/i18n/strings/en-US.json +++ b/ui/src/i18n/strings/en-US.json @@ -1162,6 +1162,87 @@ "src.constants.Unavailable":"Unavailable", "src.constants.Recovering":"Recovering", "src.constants.Pending":"Pending", - "src.constants.Warning":"Warning" - + "src.constants.Warning":"Warning", + "src.pages.Tenant.New.6071B46A": "Optimization Scenarios", + "src.pages.Tenant.New.7D0448C6": "Please select an optimization scenario", + "src.pages.Tenant.New.3979BAB6": "Delete protection", + "src.pages.Tenant.Detail.Overview.2D1BC77D": "Unlimited", + "src.pages.Tenant.Detail.NewBackup.F6D664A0": "Please enter Host", + "src.pages.Tenant.Detail.NewBackup.7A899F0F": "Please enter AppID", + "src.pages.Tenant.Detail.NewBackup.5A4FD22B": "Please enter Region", + "src.pages.Cluster.New.3F941911": "Storage Volume Configuration", + "src.pages.Cluster.New.1430D3F5": "When checked, PVC will not be cascaded after The OBServer resource is deleted; By default, it will be cascaded.", + "src.pages.Cluster.New.94B6798C": "PVC independent life cycle", + "src.pages.Cluster.New.04047AB8": "Optimization Scenarios", + "src.pages.Cluster.New.8126F0B5": "Please select an optimization scenario", + "src.pages.Cluster.New.FCB7C4F3": "Delete protection", + "src.pages.Cluster.New.1E85AB3D": "Mount NFS resources", + "src.pages.Cluster.Detail.Overview.C47B9DA4": "Remove NFS resources", + "src.pages.Cluster.Detail.Overview.6B97ABB6": "Mount NFS backup volumes", + "src.pages.Cluster.Detail.Overview.A0A43F50": "Cluster Management", + "src.pages.Cluster.Detail.Overview.403B7E1C": "Managed", + "src.pages.Cluster.Detail.Overview.46B66B3E": "Unmanaged", + "src.pages.Cluster.Detail.Overview.D5CCD27D": "Matched", + "src.pages.Cluster.Detail.Overview.DF83C06D": "Mismatch", + "src.pages.Cluster.Detail.Overview.E5342F26": "Parameter Name", + "src.pages.Cluster.Detail.Overview.FA0D096B": "Parameter Value", + "src.pages.Cluster.Detail.Overview.93A9D19D": "Parameter Description", + "src.pages.Cluster.Detail.Overview.4FCF90AF": "Managed operatorr", + "src.pages.Cluster.Detail.Overview.319FA0DB": "Yes", + "src.pages.Cluster.Detail.Overview.5DD958C7": "No", + "src.pages.Cluster.Detail.Overview.0B4A3E74": "Only parameters of managed operator have state", + "src.pages.Cluster.Detail.Overview.6AD01A82": "Status", + "src.pages.Cluster.Detail.Overview.9A3A4407": "Matched", + "src.pages.Cluster.Detail.Overview.D6588C55": "Mismatch", + "src.pages.Cluster.Detail.Overview.1B9EA477": "Operation", + "src.pages.Cluster.Detail.Overview.F5A088FB": "Edit", + "src.pages.Cluster.Detail.Overview.5FACF7C0": "Unescrow", + "src.pages.Cluster.Detail.Overview.43C45255": "Node resource configuration", + "src.pages.Cluster.Detail.Overview.C5E0380E": "Computing Resources", + "src.pages.Cluster.Detail.Overview.05F3B008": "Storage Resources", + "src.pages.Cluster.Detail.Overview.F4D80804": "PVC independent life cycle", + "src.pages.Cluster.Detail.Overview.21732CE3": "Can only be specified at the time of creation and cannot be modified", + "src.pages.Cluster.Detail.Overview.BFE7CA02": "Cluster parameter settings", + "src.pages.Cluster.Detail.Overview.BF489BCE": "Parameter Name", + "src.pages.Cluster.Detail.Overview.E5E4E6B5": "Please enter", + "src.pages.Cluster.Detail.Overview.4F7F81B0": "Managed Status", + "src.pages.Cluster.Detail.Overview.2873685C": "Status", + "src.pages.Cluster.Detail.Overview.E3D520F9": "Query", + "src.pages.Cluster.Detail.Overview.96EEA6EE": "Reset", + "src.pages.Cluster.Detail.Overview.24BBEBC2": "Remove NFS backup volumes", + "src.pages.Cluster.Detail.Overview.44A8C98B": "Mount NFS backup volumes", + "src.pages.Cluster.Detail.Overview.D01DC5A6": "Server deleted successfully", + "src.pages.Cluster.Detail.Overview.2A1DB242": "Restarting the Server successfully", + "src.pages.Cluster.Detail.Overview.64ED384A": "Operation", + "src.pages.Cluster.Detail.Overview.EFF8446F": "Are you sure you want to restart the current server?", + "src.pages.Cluster.Detail.Overview.E0965DEE": "Restart", + "src.pages.Cluster.Detail.Overview.1FE7273F": "Are you sure you want to delete the current server?", + "src.pages.Cluster.Detail.Overview.9DCE1679": "Delete", + "src.pages.Cluster.Detail.Overview.41F76901": "Storage Resource Editing", + "src.pages.Cluster.Detail.Overview.3B8C3AE9": "Cancel", + "src.pages.Cluster.Detail.Overview.DBF1120A": "Storage resources edited successfully", + "src.pages.Cluster.Detail.Overview.AC4C9FB4": "OK", + "src.pages.Cluster.Detail.Overview.77C825D8": "Data", + "src.pages.Cluster.Detail.Overview.BB0D5386": "Data", + "src.pages.Cluster.Detail.Overview.42228E22": "Cancel", + "src.pages.Cluster.Detail.Overview.480E47F8": "Parameters edited successfully", + "src.pages.Cluster.Detail.Overview.9F17E32D": "OK", + "src.pages.Cluster.Detail.Overview.04490EC8": "{title} modified successfully", + "src.pages.Cluster.Detail.Overview.426E8CD7": "Note that removing a mounted NFS backup volume will roll and restart all nodes. Do you want to confirm the removal?", + "src.pages.Cluster.Detail.Overview.DB5B21F0": "Address", + "src.pages.Cluster.Detail.Overview.60033114": "Please enter an address", + "src.pages.Cluster.Detail.Overview.D16F4B6E": "Please enter", + "src.pages.Cluster.Detail.Overview.ACC053A9": "Path", + "src.pages.Cluster.Detail.Overview.B7E9F065": "Please enter a path", + "src.pages.Cluster.Detail.Overview.D0356ACB": "Please enter", + "src.pages.Cluster.Detail.Overview.0798E33D": "Note that mounting the backup volume will roll-restart all nodes", + "src.pages.Cluster.Detail.Overview.02AE8EA0": "Delete protection modified successfully", + "src.pages.Cluster.Detail.Overview.8DB38279": "Delete protection", + "src.components.TopoComponent.AD3D247F": "Server deleted successfully", + "src.components.TopoComponent.86ECC17E": "Restarting the Server successfully", + "src.components.TopoComponent.FAB70713": "Are you sure you want to delete this server?", + "src.components.TopoComponent.96A4C193": "Are you sure you want to restart the server?", + "src.components.TopoComponent.601BE33A": "Unlimited", + "src.components.TopoComponent.0E4AAB80": "Unlimited", + "src.components.TopoComponent.2494A473": "Restart the server" } diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json index ff1cc7172..ef64e98d1 100644 --- a/ui/src/i18n/strings/zh-CN.json +++ b/ui/src/i18n/strings/zh-CN.json @@ -1184,5 +1184,87 @@ "src.pages.Cluster.Detail.Overview.3D14CA3E": "删除", "src.pages.Cluster.Detail.Overview.476938E4": "取消", "src.pages.Cluster.Detail.Overview.86ECCAB9": "删除", - "src.pages.Cluster.Detail.Overview.23FEC744": "添加参数" + "src.pages.Cluster.Detail.Overview.23FEC744": "添加参数", + "src.pages.Tenant.New.6071B46A": "优化场景", + "src.pages.Tenant.New.7D0448C6": "请选择优化场景", + "src.pages.Tenant.New.3979BAB6": "删除保护", + "src.pages.Tenant.Detail.Overview.2D1BC77D": "无限制", + "src.pages.Tenant.Detail.NewBackup.F6D664A0": "请输入 Host", + "src.pages.Tenant.Detail.NewBackup.7A899F0F": "请输入AppID", + "src.pages.Tenant.Detail.NewBackup.5A4FD22B": "请输入 Region", + "src.pages.Cluster.New.3F941911": "存储卷配置", + "src.pages.Cluster.New.1430D3F5": "勾选后，在删除 OBServer 资源之后不会级联删除 PVC；默认会进行级联删除", + "src.pages.Cluster.New.94B6798C": "PVC 独立生命周期", + "src.pages.Cluster.New.04047AB8": "优化场景", + "src.pages.Cluster.New.8126F0B5": "请选择优化场景", + "src.pages.Cluster.New.FCB7C4F3": "删除保护", + "src.pages.Cluster.New.1E85AB3D": "挂载 NFS 备份卷", + "src.pages.Cluster.Detail.Overview.C47B9DA4": "移除 NFS 资源", + "src.pages.Cluster.Detail.Overview.6B97ABB6": "挂载 NFS 资源", + "src.pages.Cluster.Detail.Overview.A0A43F50": "集群管理", + "src.pages.Cluster.Detail.Overview.403B7E1C": "已托管", + "src.pages.Cluster.Detail.Overview.46B66B3E": "未托管", + "src.pages.Cluster.Detail.Overview.D5CCD27D": "已匹配", + "src.pages.Cluster.Detail.Overview.DF83C06D": "不匹配", + "src.pages.Cluster.Detail.Overview.E5342F26": "参数名", + "src.pages.Cluster.Detail.Overview.FA0D096B": "参数值", + "src.pages.Cluster.Detail.Overview.93A9D19D": "参数说明", + "src.pages.Cluster.Detail.Overview.4FCF90AF": "托管 operator", + "src.pages.Cluster.Detail.Overview.319FA0DB": "是", + "src.pages.Cluster.Detail.Overview.5DD958C7": "否", + "src.pages.Cluster.Detail.Overview.0B4A3E74": "只有托管 operator 的参数才有状态", + "src.pages.Cluster.Detail.Overview.6AD01A82": "状态", + "src.pages.Cluster.Detail.Overview.9A3A4407": "已匹配", + "src.pages.Cluster.Detail.Overview.D6588C55": "不匹配", + "src.pages.Cluster.Detail.Overview.1B9EA477": "操作", + "src.pages.Cluster.Detail.Overview.F5A088FB": "编辑", + "src.pages.Cluster.Detail.Overview.5FACF7C0": "解除托管", + "src.pages.Cluster.Detail.Overview.43C45255": "节点资源配置", + "src.pages.Cluster.Detail.Overview.C5E0380E": "计算资源", + "src.pages.Cluster.Detail.Overview.05F3B008": "存储资源", + "src.pages.Cluster.Detail.Overview.F4D80804": "PVC 独立生命周期", + "src.pages.Cluster.Detail.Overview.21732CE3": "只能在创建时指定，不支持修改", + "src.pages.Cluster.Detail.Overview.BFE7CA02": "集群参数设置", + "src.pages.Cluster.Detail.Overview.BF489BCE": "参数名", + "src.pages.Cluster.Detail.Overview.E5E4E6B5": "请输入", + "src.pages.Cluster.Detail.Overview.4F7F81B0": "托管状态", + "src.pages.Cluster.Detail.Overview.2873685C": "状态", + "src.pages.Cluster.Detail.Overview.E3D520F9": "查询", + "src.pages.Cluster.Detail.Overview.96EEA6EE": "重置", + "src.pages.Cluster.Detail.Overview.24BBEBC2": "移除 NFS 备份卷", + "src.pages.Cluster.Detail.Overview.44A8C98B": "挂载 NFS 备份卷", + "src.pages.Cluster.Detail.Overview.D01DC5A6": "删除 Server 已成功", + "src.pages.Cluster.Detail.Overview.2A1DB242": "重启 Server 已成功", + "src.pages.Cluster.Detail.Overview.64ED384A": "操作", + "src.pages.Cluster.Detail.Overview.EFF8446F": "确定要重启当前 server 吗?", + "src.pages.Cluster.Detail.Overview.E0965DEE": "重启", + "src.pages.Cluster.Detail.Overview.1FE7273F": "确定要删除当前 server 吗?", + "src.pages.Cluster.Detail.Overview.9DCE1679": "删除", + "src.pages.Cluster.Detail.Overview.41F76901": "存储资源编辑", + "src.pages.Cluster.Detail.Overview.3B8C3AE9": "取消", + "src.pages.Cluster.Detail.Overview.DBF1120A": "存储资源编辑成功", + "src.pages.Cluster.Detail.Overview.AC4C9FB4": "确定", + "src.pages.Cluster.Detail.Overview.77C825D8": "数据", + "src.pages.Cluster.Detail.Overview.BB0D5386": "日志", + "src.pages.Cluster.Detail.Overview.42228E22": "取消", + "src.pages.Cluster.Detail.Overview.480E47F8": "编辑参数已成功", + "src.pages.Cluster.Detail.Overview.9F17E32D": "确定", + "src.pages.Cluster.Detail.Overview.04490EC8": "修改{title}成功", + "src.pages.Cluster.Detail.Overview.426E8CD7": " 注意，移除挂载的 NFS 备份卷会滚动重启所有节点，确认移除吗？", + "src.pages.Cluster.Detail.Overview.DB5B21F0": "地址", + "src.pages.Cluster.Detail.Overview.60033114": "请输入地址", + "src.pages.Cluster.Detail.Overview.D16F4B6E": "请输入", + "src.pages.Cluster.Detail.Overview.ACC053A9": "路径", + "src.pages.Cluster.Detail.Overview.B7E9F065": "请输入路径", + "src.pages.Cluster.Detail.Overview.D0356ACB": "请输入", + "src.pages.Cluster.Detail.Overview.0798E33D": "注意，挂载备份卷会滚动重启所有节点", + "src.pages.Cluster.Detail.Overview.02AE8EA0": "修改删除保护已成功", + "src.pages.Cluster.Detail.Overview.8DB38279": "删除保护", + "src.components.TopoComponent.AD3D247F": "删除 Server 已成功", + "src.components.TopoComponent.86ECC17E": "重启 Server 已成功", + "src.components.TopoComponent.FAB70713": "你确定要删除该 server 吗？", + "src.components.TopoComponent.96A4C193": "你确定重启该 server 吗？", + "src.components.TopoComponent.601BE33A": "无限制", + "src.components.TopoComponent.0E4AAB80": "无限制", + "src.components.TopoComponent.2494A473": "重启server" } \ No newline at end of file diff --git a/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx b/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx index 49872ae7c..b0e6e665c 100644 --- a/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/BasicInfo.tsx @@ -18,8 +18,8 @@ export default function BasicInfo({ monitor, clusterName, style, - deletionProtection, -}: API.ClusterInfo & { style?: React.CSSProperties; extra?: boolean }) { + deletionProtection +}: API.ClusterInfo & {style?: React.CSSProperties;extra?: boolean;}) { const statusItem = findByValue(STATUS_LIST, status); const statusDetailItem = findByValue(STATUS_LIST, statusDetail); @@ -29,106 +29,106 @@ export default function BasicInfo({ manual: true, onSuccess: (res) => { if (res.successful) { - message.success('修改删除保护已成功'); + message.success(intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.02AE8EA0", defaultMessage: "修改删除保护已成功" })); } - }, - }, + } + } ); return ( +

{intl.formatMessage({ - id: 'Dashboard.Detail.Overview.BasicInfo.ClusterInformation', - defaultMessage: '集群信息', - })} + id: 'Dashboard.Detail.Overview.BasicInfo.ClusterInformation', + defaultMessage: '集群信息' + })}

- } - > + }> + + defaultMessage: '集群基本信息' + })}> + + defaultMessage: '集群名' + })}> + {clusterName} + defaultMessage: '资源名' + })}> + {name} + defaultMessage: '命名空间' + })}> + {namespace} + defaultMessage: '集群模式' + })}> + {MODE_MAP.get(mode)?.text || '-'} + defaultMessage: '集群状态' + })}> + - {statusItem === 'operating' ? ( - + {statusItem === 'operating' ? + + {statusItem.label}/{statusDetailItem.label} - - ) : ( - statusItem.label - )} + : + + statusItem.label + } - + { - const body = {} as API.ParamPatchOBClusterParam; - if (!e.target.checked) { - body.removeDeletionProtection = e.target.checked; - } else { - body.addDeletionProtection = e.target.checked; - } - patchOBCluster(namespace, name, body); - }} - /> + // loading 态禁止操作，防止重复操作 + disabled={loading || status !== 'running'} + defaultChecked={deletionProtection} + onChange={(e) => { + const body = {} as API.ParamPatchOBClusterParam; + if (!e.target.checked) { + body.removeDeletionProtection = e.target.checked; + } else { + body.addDeletionProtection = e.target.checked; + } + patchOBCluster(namespace, name, body); + }} /> + + defaultMessage: '镜像' + })}> + {image} @@ -136,20 +136,20 @@ export default function BasicInfo({ span={2} label={intl.formatMessage({ id: 'Dashboard.Detail.Overview.BasicInfo.RootPasswordSecret', - defaultMessage: 'root 用户密码 Secret', - })} - > + defaultMessage: 'root 用户密码 Secret' + })}> + {rootPasswordSecret || '-'} - {monitor && ( - + {monitor && + + {monitor.resource.cpu} @@ -157,41 +157,41 @@ export default function BasicInfo({ {monitor.resource.memory} + label={intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.Image', + defaultMessage: '镜像' + })}> + {monitor.image} - )} - - {backupVolume && ( - + } + + {backupVolume && + + + label={intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.Address', + defaultMessage: '地址' + })}> + {backupVolume.address} + label={intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.Path', + defaultMessage: '路径' + })}> + {backupVolume.path} - )} - - ); -} + } + ); + +} \ No newline at end of file diff --git a/ui/src/pages/Cluster/Detail/Overview/NFSInfoModal.tsx b/ui/src/pages/Cluster/Detail/Overview/NFSInfoModal.tsx index 25252639c..84cab1022 100644 --- a/ui/src/pages/Cluster/Detail/Overview/NFSInfoModal.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/NFSInfoModal.tsx @@ -1,3 +1,4 @@ +import { intl } from '@/utils/intl'; import { obcluster } from '@/api'; import { useRequest } from 'ahooks'; import { Form, Input, message, Modal } from 'antd'; @@ -20,7 +21,7 @@ const NFSInfoModal: React.FC = ({ onSuccess, title, name, - namespace, + namespace }) => { const [form] = Form.useForm(); @@ -31,12 +32,12 @@ const NFSInfoModal: React.FC = ({ manual: true, onSuccess: (res) => { if (res.successful) { - message.success(`修改${title}成功`); + message.success(intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.04490EC8", defaultMessage: "修改${title}成功" }, { title: title })); onSuccess(); resetFields(); } - }, - }, + } + } ); return ( @@ -52,7 +53,7 @@ const NFSInfoModal: React.FC = ({ onOk={() => { if (removeNFS) { const body = { - removeBackupVolume: true, + removeBackupVolume: true }; patchOBCluster(namespace, name, body); } else { @@ -61,47 +62,47 @@ const NFSInfoModal: React.FC = ({ const body = { backupVolume: { address, - path, - }, + path + } }; patchOBCluster(namespace, name, body); }); } - }} - > - {removeNFS ? ( - ' 注意，移除挂载的 NFS 备份卷会滚动重启所有节点，确认移除吗？' - ) : ( -
+ }}> + + {removeNFS ? intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.426E8CD7", defaultMessage: " 注意，移除挂载的 NFS 备份卷会滚动重启所有节点，确认移除吗？" }) : + + + - + label={intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.DB5B21F0", defaultMessage: "地址" })} + name="address" + rules={[ + { + required: true, + message: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.60033114", defaultMessage: "请输入地址" }) + }] + }> + + - + label={intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.ACC053A9", defaultMessage: "路径" })} + name="path" + rules={[ + { + required: true, + message: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.B7E9F065", defaultMessage: "请输入路径" }) + }] + }> + + - 注意，挂载备份卷会滚动重启所有节点 + {intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.0798E33D", defaultMessage: "注意，挂载备份卷会滚动重启所有节点" })}
- )} - - ); + } + ); + }; -export default NFSInfoModal; +export default NFSInfoModal; \ No newline at end of file diff --git a/ui/src/pages/Cluster/Detail/Overview/ParametersModal.tsx b/ui/src/pages/Cluster/Detail/Overview/ParametersModal.tsx index 078abc005..0f8e6a5cd 100644 --- a/ui/src/pages/Cluster/Detail/Overview/ParametersModal.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/ParametersModal.tsx @@ -19,7 +19,7 @@ const ParametersModal: React.FC = ({ initialValues, onSuccess, name, - namespace, + namespace }) => { const [form] = Form.useForm(); const { validateFields, resetFields } = form; @@ -33,20 +33,20 @@ const ParametersModal: React.FC = ({ message.success( intl.formatMessage({ id: 'src.pages.Cluster.Detail.Overview.E908AA54', - defaultMessage: '编辑参数已成功', - }), + defaultMessage: '编辑参数已成功' + }) ); onSuccess(); } - }, - }, + } + } ); return ( = ({ }} width={520} footer={ - + + onClick={() => { + onCancel(); + resetFields(); + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.42228E22", defaultMessage: "取消" })} + + + + type="primary" + loading={loading} + onClick={() => { + validateFields().then((values) => { + const objValue = { + modifiedParameters: [values] + }; + updateParameters(namespace, name, objValue, intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.480E47F8", defaultMessage: "编辑参数已成功" })); + }); + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.9F17E32D", defaultMessage: "确定" })} + + + - } - > + }> +
+ name={'key'}> + @@ -100,32 +100,32 @@ const ParametersModal: React.FC = ({ + { + required: true, + message: intl.formatMessage({ + id: 'src.pages.Cluster.Detail.Overview.5DA70D14', + defaultMessage: '请输入参数值' + }) + }] + }> + + defaultMessage: '请输入' + })} /> +
- - ); + ); + }; -export default ParametersModal; +export default ParametersModal; \ No newline at end of file diff --git a/ui/src/pages/Cluster/Detail/Overview/ResourceDrawer.tsx b/ui/src/pages/Cluster/Detail/Overview/ResourceDrawer.tsx index 92976643f..1de526916 100644 --- a/ui/src/pages/Cluster/Detail/Overview/ResourceDrawer.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/ResourceDrawer.tsx @@ -29,14 +29,14 @@ export const TooltipItemContent = ({ item }) => {
+ justifyContent: 'space-between' + }}> +

{key}：

{data[key]}

- - ); + ); + } else { const value = JSON.stringify(data[key]) || String(data[key]); return ( @@ -44,18 +44,18 @@ export const TooltipItemContent = ({ item }) => {
+ justifyContent: 'space-between' + }}> +

{key}：

{value}

- - ); + ); + } })} - - ); + ); + }; const ResourceDrawer: React.FC = ({ @@ -64,7 +64,7 @@ const ResourceDrawer: React.FC = ({ initialValues, name, namespace, - onSuccess, + onSuccess }) => { const [form] = Form.useForm(); const { validateFields, setFieldValue, resetFields } = form; @@ -89,7 +89,7 @@ const ResourceDrawer: React.FC = ({ setFieldValue(['storage'], { data, log, - redoLog, + redoLog }); }, [initialValues]); @@ -106,21 +106,21 @@ const ResourceDrawer: React.FC = ({ message.success( intl.formatMessage({ id: 'src.pages.Cluster.Detail.Overview.E908AA54', - defaultMessage: '编辑参数已成功', - }), + defaultMessage: '编辑参数已成功' + }) ); onSuccess(); } - }, - }, + } + } ); const fontStyle: React.CSSProperties = { - fontWeight: 600, + fontWeight: 600 }; return ( { @@ -129,92 +129,92 @@ const ResourceDrawer: React.FC = ({ }} width={520} footer={ - + + onClick={() => { + onCancel(); + resetFields(); + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.3B8C3AE9", defaultMessage: "取消" })} + + + + type="primary" + loading={loading} + onClick={() => { + validateFields().then((value) => { + patchOBCluster(namespace, name, value, intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.DBF1120A", defaultMessage: "存储资源编辑成功" })); + }); + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.AC4C9FB4", defaultMessage: "确定" })} + + + - } - > + }> +
-

数据

+

{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.77C825D8", defaultMessage: "数据" })}

+ name={['storage', 'data', 'size']}> + + defaultMessage: '请输入' + })} /> + - {storageClasses && ( - - )} + name={['storage', 'data', 'storageClass']}> + + {storageClasses && + + + }
-

日志

+

{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.BB0D5386", defaultMessage: "日志" })}

+ name={['storage', 'log', 'size']}> + + defaultMessage: '请输入' + })} /> + - {storageClasses && ( - - )} + name={['storage', 'log', 'storageClass']}> + + {storageClasses && + + + }
@@ -224,37 +224,37 @@ const ResourceDrawer: React.FC = ({ + name={['storage', 'redoLog', 'size']}> + + defaultMessage: '请输入' + })} /> + - {storageClasses && ( - - )} + name={['storage', 'redoLog', 'storageClass']}> + + {storageClasses && + + + }
- - ); + ); + }; -export default ResourceDrawer; +export default ResourceDrawer; \ No newline at end of file diff --git a/ui/src/pages/Cluster/Detail/Overview/ServerTable.tsx b/ui/src/pages/Cluster/Detail/Overview/ServerTable.tsx index f52d1af0c..e7cbc9290 100644 --- a/ui/src/pages/Cluster/Detail/Overview/ServerTable.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/ServerTable.tsx @@ -8,11 +8,11 @@ import type { ColumnsType } from 'antd/es/table'; export default function ServerTable({ clusterDetail, - clusterDetailRefresh, -}: { - clusterDetail: API.ClusterDetail[]; - clusterDetailRefresh: () => void; -}) { + clusterDetailRefresh + + + +}: {clusterDetail: API.ClusterDetail[];clusterDetailRefresh: () => void;}) { const { info, servers, supportStaticIP, status } = clusterDetail || {}; const { namespace, name } = info; @@ -20,138 +20,138 @@ export default function ServerTable({ manual: true, onSuccess: (res) => { if (res.successful) { - message.success('删除 Server 已成功'); + message.success(intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.D01DC5A6", defaultMessage: "删除 Server 已成功" })); clusterDetailRefresh(); } - }, + } }); const { runAsync: restartOBServers, loading: restartOBServersLoading } = - useRequest(obcluster.restartOBServers, { - manual: true, - onSuccess: (res) => { - if (res.successful) { - message.success('重启 Server 已成功'); - clusterDetailRefresh(); - } - }, - }); + useRequest(obcluster.restartOBServers, { + manual: true, + onSuccess: (res) => { + if (res.successful) { + message.success(intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.2A1DB242", defaultMessage: "重启 Server 已成功" })); + clusterDetailRefresh(); + } + } + }); const serverColums: ColumnsType = [ - { - title: intl.formatMessage({ - id: 'OBDashboard.Detail.Overview.ServerTable.ServerName', - defaultMessage: 'Server名', - }), - dataIndex: 'name', - key: 'name', - }, - { - title: intl.formatMessage({ - id: 'OBDashboard.Detail.Overview.ServerTable.Namespace', - defaultMessage: '命名空间', - }), - dataIndex: 'namespace', - key: 'namespace', - }, - { - title: intl.formatMessage({ - id: 'OBDashboard.Detail.Overview.ServerTable.Address', - defaultMessage: '地址', - }), - dataIndex: 'address', - key: 'address', - }, - { - title: intl.formatMessage({ - id: 'OBDashboard.Detail.Overview.ServerTable.Status', - defaultMessage: '状态', - }), - dataIndex: 'status', - key: 'status', - render: (text) => { - const value = findByValue(STATUS_LIST, text); - return {value.label}; - }, - }, - { - title: '操作', - dataIndex: 'operation', - render: (_, record) => { - // 任何 zone 里面只剩一个 server 就不能删了 - const sameZone = servers?.filter( - (server) => server?.zone === record?.zone, - ); - return ( - <> + { + title: intl.formatMessage({ + id: 'OBDashboard.Detail.Overview.ServerTable.ServerName', + defaultMessage: 'Server名' + }), + dataIndex: 'name', + key: 'name' + }, + { + title: intl.formatMessage({ + id: 'OBDashboard.Detail.Overview.ServerTable.Namespace', + defaultMessage: '命名空间' + }), + dataIndex: 'namespace', + key: 'namespace' + }, + { + title: intl.formatMessage({ + id: 'OBDashboard.Detail.Overview.ServerTable.Address', + defaultMessage: '地址' + }), + dataIndex: 'address', + key: 'address' + }, + { + title: intl.formatMessage({ + id: 'OBDashboard.Detail.Overview.ServerTable.Status', + defaultMessage: '状态' + }), + dataIndex: 'status', + key: 'status', + render: (text) => { + const value = findByValue(STATUS_LIST, text); + return {value.label}; + } + }, + { + title: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.64ED384A", defaultMessage: "操作" }), + dataIndex: 'operation', + render: (_, record) => { + // 任何 zone 里面只剩一个 server 就不能删了 + const sameZone = servers?.filter( + (server) => server?.zone === record?.zone + ); + return ( + <> + type="link" + style={{ paddingLeft: 0 }} + disabled={ + restartOBServersLoading || + !supportStaticIP || + status !== 'running' + } + onClick={() => { + Modal.confirm({ + title: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.EFF8446F", defaultMessage: "确定要重启当前 server 吗?" }), + onOk: () => { + restartOBServers(namespace, name, { + observers: [record?.name] + }); + } + }); + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.E0965DEE", defaultMessage: "重启" })} + + + - - ); - }, - }, - ]; + danger + type="link" + disabled={ + servers.length === 1 || + sameZone.length === 1 || + status !== 'running' + } + onClick={() => { + Modal.confirm({ + title: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.1FE7273F", defaultMessage: "确定要删除当前 server 吗?" }), + okType: 'danger', + onOk: () => { + deleteOBServers(namespace, name, { + observers: [record?.name] + }); + } + }); + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.9DCE1679", defaultMessage: "删除" })} + + + + ); + + } + }]; + return ( +

{intl.formatMessage({ - id: 'Dashboard.Detail.Overview.ServerTable.ServerList', - defaultMessage: 'Server 列表', - })} + id: 'Dashboard.Detail.Overview.ServerTable.ServerList', + defaultMessage: 'Server 列表' + })}

- } - > + }> + + sticky /> + - - ); -} + ); + +} \ No newline at end of file diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx index 5e8ac8f3d..203453469 100644 --- a/ui/src/pages/Cluster/Detail/Overview/index.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/index.tsx @@ -28,8 +28,8 @@ import { Table, Tag, Tooltip, - message, -} from 'antd'; + message } from +'antd'; import { isEmpty } from 'lodash'; import { useEffect, useRef, useState } from 'react'; import BasicInfo from './BasicInfo'; @@ -44,7 +44,7 @@ const ClusterOverview: React.FC = () => { const access = useAccess(); const [form] = Form.useForm(); const [operateModalVisible, setOperateModalVisible] = - useState(false); + useState(false); const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [parametersRecord, setParametersRecord] = useState({}); const [resourceDrawerOpen, setResourceDrawerOpen] = useState(false); @@ -62,40 +62,40 @@ const ClusterOverview: React.FC = () => { const { data: listOBClusterParameters, loading, - refresh, + refresh } = useRequest(obcluster.listOBClusterParameters, { defaultParams: [ns, name], onSuccess: (res) => { const newData = getNewData(res?.data); setParametersData(newData); - }, + } }); const getNewData = (data) => { - const obt = data - ?.map((element) => { - // obcluster 的 parameters 里面加了个 specValue 的字段， - // 如果 specValue 不等于 value，状态写 "不匹配" (黄色tag)，如果两个值相等，写"已匹配"(绿色tag) - const findSpec = parameters?.find( - (item: any) => element.value === item.specValue, - ); - if (!isEmpty(findSpec)) { - return { ...element, accordance: true }; - } else if (isEmpty(findSpec)) { - return { ...element, accordance: false }; - } - }) - ?.map((element: any) => { - // 在 obcluster 的 parameters 里面的就是托管给 operator - const findName = parameters?.find( - (item: any) => element.name === item.name, - ); - if (!isEmpty(findName)) { - return { ...element, controlParameter: true }; - } else if (isEmpty(findName)) { - return { ...element, controlParameter: false }; - } - }); + const obt = data?. + map((element) => { + // obcluster 的 parameters 里面加了个 specValue 的字段， + // 如果 specValue 不等于 value，状态写 "不匹配" (黄色tag)，如果两个值相等，写"已匹配"(绿色tag) + const findSpec = parameters?.find( + (item: any) => element.value === item.specValue + ); + if (!isEmpty(findSpec)) { + return { ...element, accordance: true }; + } else if (isEmpty(findSpec)) { + return { ...element, accordance: false }; + } + })?. + map((element: any) => { + // 在 obcluster 的 parameters 里面的就是托管给 operator + const findName = parameters?.find( + (item: any) => element.name === item.name + ); + if (!isEmpty(findName)) { + return { ...element, controlParameter: true }; + } else if (isEmpty(findName)) { + return { ...element, controlParameter: false }; + } + }); return obt; }; @@ -103,7 +103,7 @@ const ClusterOverview: React.FC = () => { data: clusterDetail, run: getClusterDetail, refresh: clusterDetailRefresh, - loading: clusterDetailLoading, + loading: clusterDetailLoading } = useRequest(getClusterDetailReq, { manual: true, onSuccess: (data) => { @@ -115,7 +115,7 @@ const ClusterOverview: React.FC = () => { } else if (timerRef.current) { clearTimeout(timerRef.current); } - }, + } }); const handleDelete = async () => { @@ -124,8 +124,8 @@ const ClusterOverview: React.FC = () => { message.success( intl.formatMessage({ id: 'OBDashboard.Detail.Overview.DeletedSuccessfully', - defaultMessage: '删除成功', - }), + defaultMessage: '删除成功' + }) ); history.replace('/cluster'); } @@ -149,188 +149,188 @@ const ClusterOverview: React.FC = () => { const removeNFS = !!clusterDetail?.info?.backupVolume; const items: MenuProps['items'] = [ - { - key: '1', - label: ( - - ), - }, - { - key: '2', - label: ( - - ), - }, - { - key: '3', - label: ( - - ), - }, - { - key: '4', - label: ( - - ), - }, - ]; + + }]; + const header = () => { return { title: intl.formatMessage({ id: 'Dashboard.Detail.Overview.ClusterOverview', - defaultMessage: '集群概览', + defaultMessage: '集群概览' }), - extra: access.obclusterwrite - ? [ - - - , - ] - : [], + ] : + + [] }; }; const { parameters, storage, resource } = clusterDetail?.info || {}; const resourceinit = [ - { - key: intl.formatMessage({ - id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageClass', - defaultMessage: 'Datafile 存储类', - }), - type: 'data', - label: 'storageClass', - value: storage?.dataStorage?.storageClass, - }, - { - key: intl.formatMessage({ - id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageSize', - defaultMessage: 'Datafile 存储大小', - }), - type: 'data', - label: 'size', - value: floorToTwoDecimalPlaces(storage?.dataStorage?.size / (1 << 30)), - }, - { - key: intl.formatMessage({ - id: 'Dashboard.Detail.Overview.BasicInfo.RedologStorageClass', - defaultMessage: 'RedoLog 存储类', - }), - type: 'redoLog', - label: 'storageClass', - value: storage?.redoLogStorage?.storageClass, - }, - { - key: intl.formatMessage({ - id: 'Dashboard.Detail.Overview.BasicInfo.RedologSize', - defaultMessage: 'RedoLog 大小', - }), - type: 'redoLog', - label: 'size', - value: floorToTwoDecimalPlaces(storage?.redoLogStorage?.size / (1 << 30)), - }, - { - key: intl.formatMessage({ - id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageClass', - defaultMessage: '系统日志存储类', - }), - type: 'log', - label: 'storageClass', - value: storage?.sysLogStorage?.storageClass, - }, - { - key: intl.formatMessage({ - id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageSize', - defaultMessage: '系统日志存储大小', - }), - type: 'log', - label: 'size', - value: floorToTwoDecimalPlaces(storage?.sysLogStorage?.size / (1 << 30)), - }, - ]; + { + key: intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageClass', + defaultMessage: 'Datafile 存储类' + }), + type: 'data', + label: 'storageClass', + value: storage?.dataStorage?.storageClass + }, + { + key: intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.DatafileStorageSize', + defaultMessage: 'Datafile 存储大小' + }), + type: 'data', + label: 'size', + value: floorToTwoDecimalPlaces(storage?.dataStorage?.size / (1 << 30)) + }, + { + key: intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.RedologStorageClass', + defaultMessage: 'RedoLog 存储类' + }), + type: 'redoLog', + label: 'storageClass', + value: storage?.redoLogStorage?.storageClass + }, + { + key: intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.RedologSize', + defaultMessage: 'RedoLog 大小' + }), + type: 'redoLog', + label: 'size', + value: floorToTwoDecimalPlaces(storage?.redoLogStorage?.size / (1 << 30)) + }, + { + key: intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageClass', + defaultMessage: '系统日志存储类' + }), + type: 'log', + label: 'storageClass', + value: storage?.sysLogStorage?.storageClass + }, + { + key: intl.formatMessage({ + id: 'Dashboard.Detail.Overview.BasicInfo.SystemLogStorageSize', + defaultMessage: '系统日志存储大小' + }), + type: 'log', + label: 'size', + value: floorToTwoDecimalPlaces(storage?.sysLogStorage?.size / (1 << 30)) + }]; + const controlParameters = [ - { - label: '已托管', - value: true, - }, - { - label: '未托管', - value: false, - }, - ]; + { + label: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.403B7E1C", defaultMessage: "已托管" }), + value: true + }, + { + label: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.46B66B3E", defaultMessage: "未托管" }), + value: false + }]; + const accordanceList = [ - { - label: {'已匹配'}, - value: true, - }, - { - label: {'不匹配'}, - value: false, - }, - ]; + { + label: {intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.D5CCD27D", defaultMessage: "已匹配" })}, + value: true + }, + { + label: {intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.DF83C06D", defaultMessage: "不匹配" })}, + value: false + }]; + useEffect(() => { getClusterDetail({ ns: ns!, name: name! }); @@ -343,94 +343,94 @@ const ClusterOverview: React.FC = () => { }, []); const columns = [ - { - title: '参数名', - dataIndex: 'name', - }, - { - title: '参数值', - dataIndex: 'value', - }, - { - title: '参数说明', - dataIndex: 'info', + { + title: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.E5342F26", defaultMessage: "参数名" }), + dataIndex: 'name' + }, + { + title: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.FA0D096B", defaultMessage: "参数值" }), + dataIndex: 'value' + }, + { + title: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.93A9D19D", defaultMessage: "参数说明" }), + dataIndex: 'info' + }, + { + title: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.4FCF90AF", defaultMessage: "托管 operator" }), + dataIndex: 'controlParameter', + filters: controlParameters.map(({ label, value }) => ({ + text: label, + value + })), + onFilter: (value: any, record) => { + return record?.controlParameter === value; }, - { - title: '托管 operator', - dataIndex: 'controlParameter', - filters: controlParameters.map(({ label, value }) => ({ - text: label, - value, - })), - onFilter: (value: any, record) => { - return record?.controlParameter === value; - }, - render: (text: boolean) => { - return {text ? '是' : '否'}; - }, - }, - { - title: , - dataIndex: 'accordance', - width: 100, - render: (text: boolean) => { - const tagColor = text ? 'green' : 'gold'; - const tagContent = text ? '已匹配' : '不匹配'; - - return {tagContent}; - }, - }, - { - title: '操作', - dataIndex: 'controlParameter', - render: (text, record) => { - return ( - + render: (text: boolean) => { + return {text ? intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.319FA0DB", defaultMessage: "是" }) : intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.5DD958C7", defaultMessage: "否" })}; + } + }, + { + title: , + dataIndex: 'accordance', + width: 100, + render: (text: boolean) => { + const tagColor = text ? 'green' : 'gold'; + const tagContent = text ? intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.9A3A4407", defaultMessage: "已匹配" }) : intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.D6588C55", defaultMessage: "不匹配" }); + + return {tagContent}; + } + }, + { + title: intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.1B9EA477", defaultMessage: "操作" }), + dataIndex: 'controlParameter', + render: (text, record) => { + return ( + - {text && ( - - )} - - ); - }, - }, - ]; + type="link" + onClick={() => { + setIsDrawerOpen(true); + setParametersRecord(record); + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.F5A088FB", defaultMessage: "编辑" })} + + + + {text && + + } + ); + + } + }]; + return ( - {clusterDetail && ( - - + {clusterDetail && + + - )} + } 节点资源配置} + title={

{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.43C45255", defaultMessage: "节点资源配置" })}

} extra={ - - } - > - + }> + + {resource?.cpu} @@ -443,44 +443,44 @@ const ClusterOverview: React.FC = () => { color: '#132039', fontWeight: 600, fontSize: '16px', - marginBottom: '16px', - }} - > - 存储资源 + marginBottom: '16px' + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.05F3B008", defaultMessage: "存储资源" })} + + - - PVC 独立生命周期 - + {intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.F4D80804", defaultMessage: "PVC 独立生命周期" })} + + - {resourceinit?.map((resource) => ( - - {resource.label === 'size' - ? `${resource.value}Gi` - : resource.value} + {resourceinit?.map((resource) => + + {resource.label === 'size' ? + `${resource.value}Gi` : + resource.value} - ))} + )} - 集群参数设置}> + {intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.BFE7CA02", defaultMessage: "集群参数设置" })}}>
- - + + - + @@ -492,75 +492,75 @@ const ClusterOverview: React.FC = () => { validateFields().then((values) => { const { name, controlParameter, accordance } = values; const newParametersData = getNewData( - listOBClusterParameters?.data, + listOBClusterParameters?.data ); if (name) { setParametersData( newParametersData?.filter((item) => - item.name?.includes(name), - ), + item.name?.includes(name) + ) ); } if (controlParameter) { setParametersData( newParametersData?.filter( (item) => - item.controlParameter === controlParameter, - ), + item.controlParameter === controlParameter + ) ); } if (accordance) { setParametersData( newParametersData?.filter( - (item) => item.accordance === accordance, - ), + (item) => item.accordance === accordance + ) ); } if (!!name && !!controlParameter) { setParametersData( newParametersData?.filter( (item) => - item.name?.includes(name) && - item.controlParameter === controlParameter, - ), + item.name?.includes(name) && + item.controlParameter === controlParameter + ) ); } if (!!name && !!accordance) { setParametersData( newParametersData?.filter( (item) => - item.name?.includes(name) && - item.accordance === accordance, - ), + item.name?.includes(name) && + item.accordance === accordance + ) ); } if (!!name && !!controlParameter && !!accordance) { setParametersData( newParametersData?.filter( (item) => - item.name?.includes(name) && - item.controlParameter === controlParameter && - item.accordance === accordance, - ), + item.name?.includes(name) && + item.controlParameter === controlParameter && + item.accordance === accordance + ) ); } }); - }} - > - 查询 + }}>{intl.formatMessage({ id: "src.pages.Cluster.Detail.Overview.E3D520F9", defaultMessage: "查询" })} + + @@ -572,33 +572,33 @@ const ClusterOverview: React.FC = () => { pagination={{ simple: true }} columns={columns} loading={loading} - dataSource={parametersData} - /> + dataSource={parametersData} /> + - {clusterDetail && ( - - )} - {clusterDetail && ( - { - clusterDetailRefresh(); - }} - /> - )} + {clusterDetail && + + + } + {clusterDetail && + { + clusterDetailRefresh(); + }} /> + + } + name={clusterDetail?.info?.name} /> + { successCallback={operateSuccess} params={{ zoneName: chooseZoneName.current, - defaultValue: chooseServerNum, - }} - /> + defaultValue: chooseServerNum + }} /> + { clusterDetailRefresh(); }} initialValues={parametersRecord} - {...(clusterDetail?.info as API.ClusterInfo)} - /> + {...clusterDetail?.info as API.ClusterInfo} /> + { clusterDetailRefresh(); }} initialValues={resourceinit} - {...(clusterDetail?.info as API.ClusterInfo)} - /> + {...clusterDetail?.info as API.ClusterInfo} /> + - removeNFS ? setRemoveNFSModal(false) : setMountNFSModal(false) + removeNFS ? setRemoveNFSModal(false) : setMountNFSModal(false) } onSuccess={() => { removeNFS ? setRemoveNFSModal(false) : setMountNFSModal(false); clusterDetailRefresh(); }} - {...(clusterDetail?.info as API.ClusterInfo)} - /> - - ); + {...clusterDetail?.info as API.ClusterInfo} /> + + ); + }; -export default ClusterOverview; +export default ClusterOverview; \ No newline at end of file diff --git a/ui/src/pages/Cluster/New/BackUp.tsx b/ui/src/pages/Cluster/New/BackUp.tsx index 1da7671fc..69ccbfbbc 100644 --- a/ui/src/pages/Cluster/New/BackUp.tsx +++ b/ui/src/pages/Cluster/New/BackUp.tsx @@ -7,62 +7,62 @@ export default function BackUp() { + title={intl.formatMessage({ id: "src.pages.Cluster.New.1E85AB3D", defaultMessage: "挂载 NFS 备份卷" })} + bordered={false}> + + { + required: true, + message: intl.formatMessage({ + id: 'OBDashboard.Cluster.New.BackUp.PleaseEnterTheAddress', + defaultMessage: '请输入地址!' + }) + }] + }> + + defaultMessage: '请输入' + })} /> + + { + required: true, + message: intl.formatMessage({ + id: 'OBDashboard.Cluster.New.BackUp.EnterAPath', + defaultMessage: '请输入路径!' + }) + }] + }> + + defaultMessage: '请输入' + })} /> + - - ); -} + ); + +} \ No newline at end of file diff --git a/ui/src/pages/Cluster/New/BasicInfo.tsx b/ui/src/pages/Cluster/New/BasicInfo.tsx index 88f3b7b08..212b775d1 100644 --- a/ui/src/pages/Cluster/New/BasicInfo.tsx +++ b/ui/src/pages/Cluster/New/BasicInfo.tsx @@ -21,15 +21,15 @@ export default function BasicInfo({ passwordVal, deleteValue, setPasswordVal, - setDeleteValue, + setDeleteValue }: BasicInfoProps) { return ( + defaultMessage: '基本信息' + })}> + @@ -39,48 +39,48 @@ export default function BasicInfo({ value={passwordVal} onChange={setPasswordVal} form={form} - name="rootPassword" - /> + name="rootPassword" /> + + defaultMessage: 'k8s中资源的名称' + })}> + + { + required: true, + message: intl.formatMessage({ + id: 'OBDashboard.Cluster.New.BasicInfo.EnterAKSResource', + defaultMessage: '请输入k8s资源名称' + }) + }, + { + pattern: /\D/, + message: intl.formatMessage({ + id: 'Dashboard.Cluster.New.BasicInfo.ResourceNamesCannotUsePure', + defaultMessage: '资源名不能使用纯数字' + }) + }, + resourceNameRule] + }> + + defaultMessage: '请输入资源名' + })} /> + @@ -89,99 +89,99 @@ export default function BasicInfo({ + { + required: true, + message: intl.formatMessage({ + id: 'OBDashboard.Cluster.New.BasicInfo.EnterAClusterName', + defaultMessage: '请输入集群名' + }) + }] + }> + + defaultMessage: '请输入集群名' + })} /> + + { + required: true, + message: intl.formatMessage({ + id: 'Dashboard.Cluster.New.BasicInfo.SelectClusterMode', + defaultMessage: '请选择集群模式' + }) + }] + }> + - {LOADTYPE_LIST?.map((item) => ( - - ))} + )} - - 删除保护 + {intl.formatMessage({ id: "src.pages.Cluster.New.FCB7C4F3", defaultMessage: "删除保护" })} + { setDeleteValue(e.target.value); - }} - /> + }} /> + - - ); -} + ); + +} \ No newline at end of file diff --git a/ui/src/pages/Cluster/New/Observer.tsx b/ui/src/pages/Cluster/New/Observer.tsx index 0da56df2d..e477604e8 100644 --- a/ui/src/pages/Cluster/New/Observer.tsx +++ b/ui/src/pages/Cluster/New/Observer.tsx @@ -14,8 +14,8 @@ import { InputNumber, Row, Space, - Tooltip, -} from 'antd'; + Tooltip } from +'antd'; import { FormInstance } from 'antd/lib/form'; import { clone } from 'lodash'; import styles from './index.less'; @@ -30,7 +30,7 @@ interface ObserverProps { const observerToolTipText = intl.formatMessage({ id: 'OBDashboard.Cluster.New.Observer.TheImageShouldBeFully', defaultMessage: - '镜像应写全 registry/image:tag，例如 oceanbase/oceanbase-cloud-native:4.2.0.0-101000032023091319', + '镜像应写全 registry/image:tag，例如 oceanbase/oceanbase-cloud-native:4.2.0.0-101000032023091319' }); export const TooltipItemContent = ({ item }) => { @@ -44,14 +44,14 @@ export const TooltipItemContent = ({ item }) => {
+ justifyContent: 'space-between' + }}> +

{key}：

{data[key]}

- - ); + ); + } else { const value = JSON.stringify(data[key]) || String(data[key]); return ( @@ -59,25 +59,25 @@ export const TooltipItemContent = ({ item }) => {
+ justifyContent: 'space-between' + }}> +

{key}：

{value}

- - ); + ); + } })} - - ); + ); + }; export default function Observer({ storageClasses, form, pvcValue, - setPvcValue, + setPvcValue }: ObserverProps) { const setMinimalConfiguration = () => { const originObserver = clone(form.getFieldsValue()); @@ -87,21 +87,21 @@ export default function Observer({ ...originObserver.observer, resource: { cpu: MINIMAL_CONFIG.cpu, - memory: MINIMAL_CONFIG.memory, + memory: MINIMAL_CONFIG.memory }, storage: { ...originObserver.observer.storage, data: { - size: MINIMAL_CONFIG.data, + size: MINIMAL_CONFIG.data }, log: { - size: MINIMAL_CONFIG.log, + size: MINIMAL_CONFIG.log }, redoLog: { - size: MINIMAL_CONFIG.redoLog, - }, - }, - }, + size: MINIMAL_CONFIG.redoLog + } + } + } }); }; @@ -110,43 +110,43 @@ export default function Observer({ + - } - > + }> + + <> {intl.formatMessage({ - id: 'Dashboard.Cluster.New.Observer.Image', - defaultMessage: '镜像', - })}{' '} + id: 'Dashboard.Cluster.New.Observer.Image', + defaultMessage: '镜像' + })}{' '} {intl.formatMessage({ - id: 'Dashboard.Cluster.New.Observer.ImageList', - defaultMessage: '（镜像列表）', - })} + id: 'Dashboard.Cluster.New.Observer.ImageList', + defaultMessage: '（镜像列表）' + })} } - name={['observer', 'image']} - > + name={['observer', 'image']}> + + defaultMessage: '请输入镜像' + })} /> + @@ -154,7 +154,7 @@ export default function Observer({

{intl.formatMessage({ id: 'OBDashboard.Cluster.New.Observer.Resources', - defaultMessage: '资源', + defaultMessage: '资源' })}

@@ -162,85 +162,85 @@ export default function Observer({ + name={['observer', 'resource', 'cpu']}> + + defaultMessage: '请输入' + })} /> + + name={['observer', 'resource', 'memory']}> + + defaultMessage: '请输入' + })} /> +

storage

-

存储卷配置

+

{intl.formatMessage({ id: "src.pages.Cluster.New.3F941911", defaultMessage: "存储卷配置" })}

+ content={intl.formatMessage({ id: "src.pages.Cluster.New.94B6798C", defaultMessage: "PVC 独立生命周期" })} /> + { setPvcValue(e.target.checked); - }} - /> + }} /> +

{intl.formatMessage({ id: 'OBDashboard.Cluster.New.Observer.Data', - defaultMessage: '数据', + defaultMessage: '数据' })}

+ name={['observer', 'storage', 'data', 'size']}> + + defaultMessage: '请输入' + })} /> + + name={['observer', 'storage', 'data', 'storageClass']}> + + TooltipItemContent={TooltipItemContent} /> +
@@ -248,35 +248,35 @@ export default function Observer({

{intl.formatMessage({ id: 'OBDashboard.Cluster.New.Observer.Log', - defaultMessage: '日志', + defaultMessage: '日志' })}

+ name={['observer', 'storage', 'log', 'size']}> + + defaultMessage: '请输入' + })} /> + + name={['observer', 'storage', 'log', 'storageClass']}> + + TooltipItemContent={TooltipItemContent} /> +
@@ -286,34 +286,34 @@ export default function Observer({ + name={['observer', 'storage', 'redoLog', 'size']}> + + defaultMessage: '请输入' + })} /> + + name={['observer', 'storage', 'redoLog', 'storageClass']}> + + TooltipItemContent={TooltipItemContent} /> + - - ); -} + ); + +} \ No newline at end of file diff --git a/ui/src/pages/Tenant/Detail/NewBackup/index.tsx b/ui/src/pages/Tenant/Detail/NewBackup/index.tsx index d3dcc0f27..2d6ac333e 100644 --- a/ui/src/pages/Tenant/Detail/NewBackup/index.tsx +++ b/ui/src/pages/Tenant/Detail/NewBackup/index.tsx @@ -29,35 +29,35 @@ export default function NewBackup() { const scheduleValue = Form.useWatch(['scheduleDates'], form); const distTypes = [ - { label: 'NFS', value: 'NFS' }, - { label: 'OSS', value: 'OSS' }, - { label: 'COS', value: 'COS' }, - { label: 'S3', value: 'S3' }, - { label: 'S3-Compatible', value: 'S3-Compatible' }, - ]; + { label: 'NFS', value: 'NFS' }, + { label: 'OSS', value: 'OSS' }, + { label: 'COS', value: 'COS' }, + { label: 'S3', value: 'S3' }, + { label: 'S3-Compatible', value: 'S3-Compatible' }]; + const handleSubmit = async (values: API.NewBackupForm) => { if (!checkScheduleDatesHaveFull(values.scheduleDates)) { message.warning( intl.formatMessage({ id: 'Dashboard.Detail.NewBackup.ConfigureAtLeastOneFull', - defaultMessage: '请至少配置 1 个全量备份', - }), + defaultMessage: '请至少配置 1 个全量备份' + }) ); return; } const res = await createBackupReportWrap({ ns: ns!, name: name!, - ...formatBackupForm(strTrim(values), publicKey), + ...formatBackupForm(strTrim(values), publicKey) }); if (res.successful) { message.success( intl.formatMessage({ id: 'Dashboard.Detail.NewBackup.CreatedSuccessfully', - defaultMessage: '创建成功', + defaultMessage: '创建成功' }), - 3, + 3 ); form.resetFields(); history.back(); @@ -67,11 +67,11 @@ export default function NewBackup() { const initialValues = { scheduleDates: { mode: 'Weekly', - days: [], - }, + days: [] + } }; const { data: tenantDetailResponse } = useRequest(getTenant, { - defaultParams: [{ ns: ns!, name: name! }], + defaultParams: [{ ns: ns!, name: name! }] }); const tenantDetail = tenantDetailResponse?.data; @@ -82,34 +82,34 @@ export default function NewBackup() { header={{ title: intl.formatMessage({ id: 'Dashboard.Detail.NewBackup.CreateATenantBackupPolicy', - defaultMessage: '创建租户备份策略', + defaultMessage: '创建租户备份策略' }), - onBack: () => navigate(`/tenant/${ns}/${name}/${tenantName}/backup`), + onBack: () => navigate(`/tenant/${ns}/${name}/${tenantName}/backup`) }} footer={[ - , - , - ]} - > + id: 'Dashboard.Detail.NewBackup.Submit', + defaultMessage: '提交' + })} + ] + }> + - {tenantDetail && ( - + {tenantDetail && + - )} + } @@ -117,7 +117,7 @@ export default function NewBackup() {

{intl.formatMessage({ id: 'Dashboard.Detail.NewBackup.BackupPolicyConfiguration', - defaultMessage: '备份策略配置', + defaultMessage: '备份策略配置' })}

@@ -126,25 +126,25 @@ export default function NewBackup() { name={['destType']} label={intl.formatMessage({ id: 'Dashboard.Detail.NewBackup.BackupType', - defaultMessage: '备份类型', + defaultMessage: '备份类型' })} rules={[ - { - required: true, - message: intl.formatMessage({ - id: 'Dashboard.Detail.NewBackup.SelectABackupType', - defaultMessage: '请选择备份类型', - }), - }, - ]} - > + { + required: true, + message: intl.formatMessage({ + id: 'Dashboard.Detail.NewBackup.SelectABackupType', + defaultMessage: '请选择备份类型' + }) + }] + }> + + defaultMessage: '请输入' + })} /> + - - ); + ); + } return null; }} @@ -226,50 +226,50 @@ export default function NewBackup() { + { + required: true, + message: intl.formatMessage({ + id: 'Dashboard.Detail.NewBackup.EnterTheLogArchivePath', + defaultMessage: '请输入日志归档路径' + }) + }] + }> + + defaultMessage: '请输入' + })} /> + + { + required: true, + message: intl.formatMessage({ + id: 'Dashboard.Detail.NewBackup.EnterTheDataBackupPath', + defaultMessage: '请输入数据备份路径' + }) + }] + }> + + defaultMessage: '请输入' + })} /> + @@ -282,21 +282,21 @@ export default function NewBackup() { label="AppID" name={['appID']} rules={[ - { - required: true, - message: '请输入AppID', - }, - ]} - > + { + required: true, + message: intl.formatMessage({ id: "src.pages.Tenant.Detail.NewBackup.7A899F0F", defaultMessage: "请输入AppID" }) + }] + }> + + defaultMessage: '请输入' + })} /> + - - ); + ); + } }} @@ -309,21 +309,21 @@ export default function NewBackup() { label="Region" name={['Region']} rules={[ - { - required: true, - message: '请输入 Region', - }, - ]} - > + { + required: true, + message: intl.formatMessage({ id: "src.pages.Tenant.Detail.NewBackup.5A4FD22B", defaultMessage: "请输入 Region" }) + }] + }> + + defaultMessage: '请输入' + })} /> + - - ); + ); + } }} @@ -332,21 +332,21 @@ export default function NewBackup() { + scheduleValue={scheduleValue} /> + - {scheduleValue && ( - + {scheduleValue && + - )} + } - - ); -} + ); + +} \ No newline at end of file diff --git a/ui/src/pages/Tenant/Detail/Overview/Replicas.tsx b/ui/src/pages/Tenant/Detail/Overview/Replicas.tsx index 028d1ec30..63f32ea9f 100644 --- a/ui/src/pages/Tenant/Detail/Overview/Replicas.tsx +++ b/ui/src/pages/Tenant/Detail/Overview/Replicas.tsx @@ -20,28 +20,28 @@ interface ReplicasProps { const LABEL_TEXT_MAP = { priority: intl.formatMessage({ id: 'Dashboard.Detail.Overview.Replicas.Priority', - defaultMessage: '优先级', + defaultMessage: '优先级' }), type: intl.formatMessage({ id: 'Dashboard.Detail.Overview.Replicas.ReplicaType', - defaultMessage: '副本类型', + defaultMessage: '副本类型' }), maxCPU: intl.formatMessage({ id: 'Dashboard.Detail.Overview.Replicas.MaximumAvailableCpu', - defaultMessage: '最大可用 CPU', + defaultMessage: '最大可用 CPU' }), memorySize: intl.formatMessage({ id: 'Dashboard.Detail.Overview.Replicas.MemorySize', - defaultMessage: '内存大小', + defaultMessage: '内存大小' }), minCPU: intl.formatMessage({ id: 'Dashboard.Detail.Overview.Replicas.MinimumAvailableCpu', - defaultMessage: '最小可用 CPU', + defaultMessage: '最小可用 CPU' }), logDiskSize: intl.formatMessage({ id: 'Dashboard.Detail.Overview.Replicas.ClogDiskSize', - defaultMessage: 'Clog 盘大小', - }), + defaultMessage: 'Clog 盘大小' + }) }; export default function Replicas({ @@ -51,7 +51,7 @@ export default function Replicas({ setEditZone, operateType, cluster, - tenantStatus, + tenantStatus }: ReplicasProps) { const { ns, name } = useParams(); const access = useAccess(); @@ -70,10 +70,10 @@ export default function Replicas({ refreshTenant(); message.success( res.message || - intl.formatMessage({ - id: 'Dashboard.Detail.Overview.Replicas.DeletedSuccessfully', - defaultMessage: '删除成功', - }), + intl.formatMessage({ + id: 'Dashboard.Detail.Overview.Replicas.DeletedSuccessfully', + defaultMessage: '删除成功' + }) ); } }; @@ -94,109 +94,109 @@ export default function Replicas({ +

{intl.formatMessage({ - id: 'Dashboard.Detail.Overview.Replicas.ResourcePool', - defaultMessage: '资源池', - })} + id: 'Dashboard.Detail.Overview.Replicas.ResourcePool', + defaultMessage: '资源池' + })}

} extra={ - access.obclusterwrite ? ( - - ) : null + id: 'Dashboard.Detail.Overview.Replicas.AddAResourcePool', + defaultMessage: '新增资源池' + })} + : + null } collapsible={true} - defaultExpand={true} - > - {replicaList.map((replica, index) => ( - + defaultExpand={true}> + + {replicaList.map((replica, index) => + {intl.formatMessage( - { - id: 'Dashboard.Detail.Overview.Replicas.ResourcePoolReplicazone', - defaultMessage: '资源池 - {{replicaZone}}', - }, - { replicaZone: replica.zone }, - )} + { + id: 'Dashboard.Detail.Overview.Replicas.ResourcePoolReplicazone', + defaultMessage: '资源池 - {{replicaZone}}' + }, + { replicaZone: replica.zone } + )}
- } - > - {sortKeys(Object.keys(replica)).map((key, idx) => ( - - {key.includes('Iops') && replica[key] > MAX_IOPS ? ( - '无限制' - ) : ( - <> + }> + + {sortKeys(Object.keys(replica)).map((key, idx) => + + {key.includes('Iops') && replica[key] > MAX_IOPS ? intl.formatMessage({ id: "src.pages.Tenant.Detail.Overview.2D1BC77D", defaultMessage: "无限制" }) : + + + <> {replica[key]} - {key === 'memorySize' || key === 'logDiskSize' - ? 'Gi' - : null} + {key === 'memorySize' || key === 'logDiskSize' ? + 'Gi' : + null} - )} + } - ))} + )} - ))} + )} - - ); -} + ); + +} \ No newline at end of file diff --git a/ui/src/pages/Tenant/New/BasicInfo.tsx b/ui/src/pages/Tenant/New/BasicInfo.tsx index cf2e9f58b..aa7d84cac 100644 --- a/ui/src/pages/Tenant/New/BasicInfo.tsx +++ b/ui/src/pages/Tenant/New/BasicInfo.tsx @@ -185,13 +185,19 @@ export default function BasicInfo({ @@ -208,16 +214,20 @@ export default function BasicInfo({ }> - 删除保护 + {intl.formatMessage({ + id: 'src.pages.Tenant.New.3979BAB6', + defaultMessage: '删除保护', + })} + {/* - - + + */} );