From ab279b31726125eeb24b9f1753a09d40d98f7838 Mon Sep 17 00:00:00 2001 From: TianWuwt <759644414@qq.com> Date: Fri, 10 Jan 2025 11:23:19 +0800 Subject: [PATCH] bug fix (#720) --- ui/src/components/TopoComponent/index.tsx | 131 +++++++++--------- ui/src/i18n/strings/en-US.json | 5 +- ui/src/i18n/strings/zh-CN.json | 5 +- .../pages/Cluster/Detail/Overview/index.tsx | 97 +++++++------ ui/src/pages/Cluster/New/Topo.tsx | 94 ++++++++----- .../Tenant/Detail/Overview/BasicInfo.tsx | 3 +- ui/src/pages/Tenant/Detail/Overview/index.tsx | 24 ++-- 7 files changed, 200 insertions(+), 159 deletions(-) diff --git a/ui/src/components/TopoComponent/index.tsx b/ui/src/components/TopoComponent/index.tsx index d214a0aa..b5a0e8b1 100644 --- a/ui/src/components/TopoComponent/index.tsx +++ b/ui/src/components/TopoComponent/index.tsx @@ -3,7 +3,7 @@ import G6, { IG6GraphEvent } from '@antv/g6'; import { createNodeFromReact } from '@antv/g6-react-node'; import { useAccess, useParams } from '@umijs/max'; import { useRequest, useUpdateEffect } from 'ahooks'; -import { Spin, message } from 'antd'; +import { message } from 'antd'; import _ from 'lodash'; import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'; @@ -24,6 +24,7 @@ import { } from '@/services/reportRequest/clusterReportReq'; import { deleteObtenantPool } from '@/services/tenant'; import type { Topo } from '@/type/topo'; +import { PageContainer } from '@ant-design/pro-components'; import MoreModal from '../moreModal'; import { ReactNode, config } from './G6register'; import { @@ -39,7 +40,6 @@ import { checkTopoDataIsSame, getServerNumber, } from './helper'; -import styles from './index.less'; interface TopoProps { tenantReplicas?: API.ReplicaDetailType[]; @@ -487,71 +487,74 @@ export default function TopoComponent({ // Use different pictures for nodes in different states return ( -
- {header - ? header - : originTopoData && ( - - )} + +
+ {header + ? header + : originTopoData && ( + + )} -
- {useMemo( - () => ( - - ), +
+ {useMemo( + () => ( + + ), - [operateList, visible, status], - )} + [operateList, visible, status], + )} - { - if (refreshTenant) refreshTenant(); - operateSuccess(); - }} - params={{ - zoneName: chooseZoneName.current, - defaultValue: chooseServerNum, - defaultUnitCount: defaultUnitCount, - ...resourcePoolDefaultValue, - essentialParameter: isCreateResourcePool - ? resourcePoolDefaultValue?.essentialParameter - : getOriginResourceUsages( - resourcePoolDefaultValue?.essentialParameter, - resourcePoolDefaultValue?.replicaList?.find( - (replica) => - replica.zone === resourcePoolDefaultValue.editZone, + { + if (refreshTenant) refreshTenant(); + operateSuccess(); + }} + params={{ + zoneName: chooseZoneName.current, + defaultValue: chooseServerNum, + defaultUnitCount: defaultUnitCount, + ...resourcePoolDefaultValue, + 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, - }} - /> - - -
+ newResourcePool: isCreateResourcePool, + zonesOptions: isCreateResourcePool + ? getZonesOptions( + getClusterFromTenant( + resourcePoolDefaultValue?.clusterList, + resourcePoolDefaultValue?.clusterResourceName, + ), + resourcePoolDefaultValue?.replicaList, + ) + : undefined, + }} + /> +
+ ); } diff --git a/ui/src/i18n/strings/en-US.json b/ui/src/i18n/strings/en-US.json index b18d4a3b..eb0a515b 100644 --- a/ui/src/i18n/strings/en-US.json +++ b/ui/src/i18n/strings/en-US.json @@ -1252,7 +1252,8 @@ "src.pages.Cluster.Detail.Overview.FF85D01F": "Unmanaged Successfully", "src.pages.Cluster.New.AE7F8E70": "Please select {topologyConfiguration} Key", "src.pages.Cluster.New.5344AD47": "Please select {topologyConfiguration} Operator", - "src.pages.Cluster.New.870724D5": "Please select {topologyConfiguration} Value", + "src.pages.Cluster.New.870724D5": "Please enter {topologyConfiguration} Value", "src.pages.Cluster.New.AC56EBD8": "Please select PodAffinity Type", - "src.pages.Cluster.New.9DDB4176": "Please select the Tolerations Effect" + "src.pages.Cluster.New.9DDB4176": "Please select the Tolerations Effect", + "src.pages.Cluster.New.DB6FD585": "Input content and press Enter to add" } diff --git a/ui/src/i18n/strings/zh-CN.json b/ui/src/i18n/strings/zh-CN.json index 14d8cfbc..bbb8df64 100644 --- a/ui/src/i18n/strings/zh-CN.json +++ b/ui/src/i18n/strings/zh-CN.json @@ -1274,7 +1274,8 @@ "src.pages.Cluster.Detail.Overview.FF85D01F": "解除托管已成功", "src.pages.Cluster.New.AE7F8E70": "请选择 {topologyConfiguration} Key", "src.pages.Cluster.New.5344AD47": "请选择 {topologyConfiguration} Operator", - "src.pages.Cluster.New.870724D5": "请选择 {topologyConfiguration} Value", + "src.pages.Cluster.New.870724D5": "请输入 {topologyConfiguration} Value", "src.pages.Cluster.New.AC56EBD8": "请选择 PodAffinity Type", - "src.pages.Cluster.New.9DDB4176": "请选择 Tolerations Effect" + "src.pages.Cluster.New.9DDB4176": "请选择 Tolerations Effect", + "src.pages.Cluster.New.DB6FD585": "输入后按回车添加" } diff --git a/ui/src/pages/Cluster/Detail/Overview/index.tsx b/ui/src/pages/Cluster/Detail/Overview/index.tsx index 448f7de3..48986dfd 100644 --- a/ui/src/pages/Cluster/Detail/Overview/index.tsx +++ b/ui/src/pages/Cluster/Detail/Overview/index.tsx @@ -60,43 +60,24 @@ const ClusterOverview: React.FC = () => { const { setFieldsValue, validateFields } = form; - const { - data: listOBClusterParameters, - loading, - 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) => item.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: any) => { + // 在 obcluster 的 parameters 里面的就是托管给 operator + const findName = parameters?.find( + (item: any) => element.name === item.name, + ); + + if (!isEmpty(findName)) { + return { + ...element, + controlParameter: true, + accordance: findName?.value === findName?.specValue, + }; + } else if (isEmpty(findName)) { + return { ...element, controlParameter: false, accordance: undefined }; + } + }); + return obt; }; @@ -112,6 +93,7 @@ const ClusterOverview: React.FC = () => { if (data.status === 'operating') { timerRef.current = setTimeout(() => { getClusterDetail({ ns: ns!, name: name! }); + refresh(); }, REFRESH_CLUSTER_TIME); } else if (timerRef.current) { clearTimeout(timerRef.current); @@ -119,6 +101,19 @@ const ClusterOverview: React.FC = () => { }, }); + const { + data: listOBClusterParameters, + loading, + refresh, + } = useRequest(obcluster.listOBClusterParameters, { + defaultParams: [ns, name], + refreshDeps: [clusterDetail?.status], + onSuccess: (res) => { + const newData = getNewData(res?.data); + setParametersData(newData); + }, + }); + const { runAsync: patchOBCluster, loading: patchOBClusterloading } = useRequest(obcluster.patchOBCluster, { manual: true, @@ -402,6 +397,12 @@ const ClusterOverview: React.FC = () => { defaultMessage: '参数值', }), dataIndex: 'value', + render: (text: string, record) => { + const content = + parameters?.find((item) => item.name === record.name)?.value || text; + + return {content}; + }, }, { title: intl.formatMessage({ @@ -456,7 +457,7 @@ const ClusterOverview: React.FC = () => { dataIndex: 'accordance', width: 100, - render: (text: boolean, record) => { + render: (text) => { const tagColor = text ? 'green' : 'gold'; const tagContent = text ? intl.formatMessage({ @@ -468,10 +469,10 @@ const ClusterOverview: React.FC = () => { defaultMessage: '不匹配', }); - return record?.controlParameter ? ( - {tagContent} - ) : ( + return text === undefined ? ( '/' + ) : ( + {tagContent} ); }, }, @@ -491,13 +492,20 @@ const ClusterOverview: React.FC = () => { 'max_syslog_file_count', ]; + const valueContent = + parameters?.find((item) => item.name === record.name)?.value || + record?.value; + return (