fix:The selected cluster exception display zone

ui/src/pages/Tenant/New/BasicInfo.tsx

@@ -24,7 +24,7 @@ export default function BasicInfo({
   const clusterOptions = clusterList
     .filter((cluster) => cluster.status !== 'failed')
     .map((cluster) => ({
-      value: cluster.clusterId,
+      value: cluster.id,
       label: cluster.name,
       status: cluster.status,
     }));

ui/src/pages/Tenant/New/ResourcePools.tsx

@@ -9,7 +9,7 @@ import { findMinParameter, modifyZoneCheckedStatus } from '../helper';
 import styles from './index.less';
 
 interface ResourcePoolsProps {
-  selectClusterId?: number;
+  selectClusterId?: string;
   clusterList: API.SimpleClusterList;
   form: FormInstance<API.NewTenantForm>;
   setClusterList: React.Dispatch<React.SetStateAction<API.SimpleClusterList>>;
@@ -45,7 +45,7 @@ export default function ResourcePools({
     );
   };
   const targetZoneList = clusterList
-    .filter((cluster) => cluster.clusterId === selectClusterId)[0]
+    .filter((cluster) => cluster.id === selectClusterId)[0]
     ?.topology.map((zone) => ({ zone: zone.zone, checked: zone.checked }));
 
   useEffect(() => {

ui/src/pages/Tenant/New/index.tsx

@@ -22,7 +22,7 @@ export default function New() {
   const publicKey = usePublicKey();
   const [form] = Form.useForm<API.NewTenantForm>();
   const [passwordVal, setPasswordVal] = useState('');
-  const [selectClusterId, setSelectClusterId] = useState<number>();
+  const [selectClusterId, setSelectClusterId] = useState<string>();
   const [clusterList, setClusterList] = useState<API.SimpleClusterList>([]);
   useRequest(getSimpleClusterList, {
     onSuccess: ({ successful, data }) => {
@@ -43,7 +43,7 @@ export default function New() {
     });
   //Selected cluster's resource name and namespace
   const { name: clusterName, namespace: ns } =
-    clusterList.filter((cluster) => cluster.clusterId === selectClusterId)[0] ||
+    clusterList.filter((cluster) => cluster.id === selectClusterId)[0] ||
     {};
   const essentialParameter = essentialParameterRes?.data;
 
@@ -64,7 +64,7 @@ export default function New() {
     }
 
     const ns = clusterList.filter(
-      (cluster) => cluster.clusterId === selectClusterId,
+      (cluster) => cluster.id === selectClusterId,
     )[0]?.namespace;
     const res = await createTenantReportWrap({
       namespace: ns,
@@ -89,7 +89,7 @@ export default function New() {
 
   useUpdateEffect(() => {
     const { name, namespace } = clusterList.find(
-      (cluster) => cluster.clusterId === selectClusterId,
+      (cluster) => cluster.id === selectClusterId,
     ) || {};
     if (name && namespace) {
       getEssentialParameters({
@@ -102,7 +102,7 @@ export default function New() {
   useEffect(() => {
     if (clusterList) {
       const cluster = clusterList.find(
-        (cluster) => cluster.clusterId === selectClusterId,
+        (cluster) => cluster.id === selectClusterId,
       );
       cluster?.topology.forEach((zone) => {
         form.setFieldValue(['pools', zone.zone, 'checked'], zone.checked);

ui/src/pages/Tenant/helper.ts

@@ -222,13 +222,13 @@ export const modifyZoneCheckedStatus = (
   zone: string,
   checked: boolean,
   target: {
-    id?: number;
+    id?: string;
     name?: string;
   },
 ) => {
   const _clusterList = cloneDeep(clusterList);
   for (const cluster of _clusterList) {
-    if (cluster.clusterId === target.id || cluster.name === target.name) {
+    if (cluster.id === target.id || cluster.name === target.name) {
       cluster.topology.forEach((zoneItem) => {
         if (zoneItem.zone === zone) {
           zoneItem.checked = checked;

ui/src/services/index.ts

@@ -1,9 +1,8 @@
 import { formatTopoData } from '@/components/TopoComponent/helper';
 import { formatClusterData } from '@/pages/Cluster/Detail/Overview/helper';
-import { formatStatisticData } from '@/utils/helper';
+import { floorToTwoDecimalPlaces,formatStatisticData } from '@/utils/helper';
 import { intl } from '@/utils/intl';
 import { request } from '@umijs/max';
-import { floorToTwoDecimalPlaces } from '@/utils/helper';
 import _ from 'lodash';
 import moment from 'moment';
 
@@ -155,18 +154,19 @@ export async function getSimpleClusterList(): Promise<API.SimpleClusterListRespo
     method: 'GET',
   });
   if (r.successful) {
-    return{
+    return {
       ...r,
-      data:r.data.map((clusterDetail) => ({
-        clusterId: clusterDetail.clusterId,
+      data: r.data.map((clusterDetail) => ({
+        clusterId: clusterDetail.clusterId, // clusterId is not unique
+        id: `${clusterDetail.namespace}:${clusterDetail.name}`,
         name: clusterDetail.name,
         namespace: clusterDetail.namespace,
         topology: clusterDetail.topology,
         clusterName: clusterDetail.clusterName,
-        status: clusterDetail.status
-      }))
-    }
-  };
+        status: clusterDetail.status,
+      })),
+    };
+  }
   return r;
 }
 

ui/src/type/typings.d.ts

@@ -405,6 +405,7 @@ declare namespace API {
     namespace: string;
     topology: Topology[];
     status: string;
+    id: string;
   };
 
   type SimpleClusterList = SimpleCluster[];