fix(portal): 修复了门户系统集群翻译、tab键会在集群没有适配器接口时还会显示的问题 (#1320)

1.做了什么：门户翻译不一致的问题：现在： ![image](https://github.com/PKUHPC/SCOW/assets/72734623/0ecba436-d3d5-4df4-a559-8eeb9a6355d4) 修复前： ![7e884839939b4db859628b7ffd17339](https://github.com/PKUHPC/SCOW/assets/72734623/743c7d6c-0f05-4d39-88c7-c6477d3c2fb0) 门户：当集群没有适配器接口的时候，仪表盘tab键应该隐藏
PKUHPC · Jun 25, 2024 · 4dfd5df · 4dfd5df
1 parent a047082
commit 4dfd5df
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 37 deletions.
diff --git a/.changeset/thirty-timers-run.md b/.changeset/thirty-timers-run.md
@@ -0,0 +1,5 @@
+---
+"@scow/portal-web": patch
+---
+
+修复了门户表格显示不正确的问题
diff --git a/apps/portal-web/src/pageComponents/dashboard/InfoPanes.tsx b/apps/portal-web/src/pageComponents/dashboard/InfoPanes.tsx
@@ -13,18 +13,19 @@
 import React from "react";
 import { InfoPane } from "src/pageComponents/dashboard/InfoPane";
 import { styled, useTheme } from "styled-components"; ;
+import { Cluster } from "@scow/config/build/type";
+import { getI18nConfigCurrentText } from "@scow/lib-web/build/utils/systemLanguage";
 import { Card, Col, Row } from "antd";
-import { useStore } from "simstate";
 import { prefix, useI18n, useI18nTranslateToString } from "src/i18n";
 import { ClusterOverview, PlatformOverview } from "src/models/cluster";
 import JobInfo from "src/pageComponents/dashboard/NodeRange";
-import { ClusterInfoStore } from "src/stores/ClusterInfoStore";
 
 interface Props {
   selectItem: ClusterOverview | PlatformOverview | undefined;
   loading: boolean;
   activeTabKey: string;
   onTabChange: (key: string) => void;
+  successfulClusters?: Cluster[] | undefined
 }
 
 const InfoPaneContainer = styled.div`
@@ -51,13 +52,11 @@ const colors = {
   queuing:"#A58E74",
 };
 const p = prefix("pageComp.dashboard.infoPanes.");
-export const InfoPanes: React.FC<Props> = ({ selectItem, loading, activeTabKey, onTabChange }) => {
+export const InfoPanes: React.FC<Props> = ({ selectItem, loading, activeTabKey, onTabChange, successfulClusters }) => {
 
   const t = useI18nTranslateToString();
   const languageId = useI18n().currentLanguage.id;
 
-  const { currentClusters } = useStore(ClusterInfoStore);
-
   const theme = useTheme();
 
   // card的每一项
@@ -78,13 +77,12 @@ export const InfoPanes: React.FC<Props> = ({ selectItem, loading, activeTabKey,
         {t(p("platformOverview"))}
       </div>,
     },
-    ...currentClusters.map((x) => ({
+    ...successfulClusters?.map((x) => ({
       key:x.id,
-      tab:typeof (x.name) == "string" ? x.name : x.name.i18n[languageId],
-    })),
+      tab:typeof (x.name) == "string" ? x.name : getI18nConfigCurrentText(x.name, languageId),
+    })) ?? [],
   ];
 
-
   const { nodeCount, runningNodeCount, idleNodeCount, notAvailableNodeCount,
     cpuCoreCount, runningCpuCount, idleCpuCount, notAvailableCpuCount,
     gpuCoreCount, runningGpuCount, idleGpuCount, notAvailableGpuCount, runningJobCount, pendingJobCount,

diff --git a/apps/portal-web/src/pageComponents/dashboard/OverviewTable.tsx b/apps/portal-web/src/pageComponents/dashboard/OverviewTable.tsx
@@ -38,6 +38,7 @@ interface Props {
   isLoading: boolean;
   clustersOverview: ClusterOverview[];
   platformOverview?: PlatformOverview | undefined;
+  successfulClusters?: Cluster[] | undefined
 }
 
 interface InfoProps {
@@ -93,7 +94,7 @@ const Container = styled.div`
 const p = prefix("pageComp.dashboard.overviewTable.");
 
 export const OverviewTable: React.FC<Props> = ({ clusterInfo, failedClusters,
-  currentClusters, isLoading, clustersOverview, platformOverview }) => {
+  currentClusters, isLoading, clustersOverview, platformOverview, successfulClusters }) => {
   const t = useI18nTranslateToString();
   const languageId = useI18n().currentLanguage.id;
 
@@ -134,6 +135,14 @@ export const OverviewTable: React.FC<Props> = ({ clusterInfo, failedClusters,
     }
   }, [activeTabKey, clusterInfo]);
 
+  const dataSource = (filteredClusterInfo.map((x, index) =>
+    ({ clusterName: x.clusterName, info: { ...x, id: index, cpuUsage: (x.runningCpuCount / x.cpuCoreCount) * 100,
+      gpuUsage: x.gpuCoreCount === 0 ? undefined
+        : (x.runningGpuCount / x.gpuCoreCount) * 100 } })) as Array<TableProps>);
+
+  const finalDataSource = activeTabKey === "platformOverview" ? dataSource.concat(failedClusters) : dataSource;
+
+
   return (
     (isLoading || currentClusters.length > 0) ? (
       <Container>
@@ -142,19 +151,14 @@ export const OverviewTable: React.FC<Props> = ({ clusterInfo, failedClusters,
           loading={isLoading}
           activeTabKey={activeTabKey}
           onTabChange={setActiveTabKey}
+          successfulClusters={successfulClusters}
         />
         <Table
           style={{
             marginTop:"15px",
           }}
           tableLayout="fixed"
-          dataSource={(filteredClusterInfo.map((x, index) =>
-            ({ clusterName:x.clusterName, info:{ ...x, id:index
-              , cpuUsage:(x.runningCpuCount / x.cpuCoreCount) * 100,
-              gpuUsage:
-              x.gpuCoreCount === 0 ? undefined : (x.runningGpuCount / x.gpuCoreCount) * 100 } })) as Array<TableProps>)
-            .concat(failedClusters)
-          }
+          dataSource={finalDataSource}
           loading={isLoading}
           pagination={false}
           scroll={{ y:275 }}
@@ -180,7 +184,8 @@ export const OverviewTable: React.FC<Props> = ({ clusterInfo, failedClusters,
                 getI18nConfigCurrentText(b.clusterName, languageId), sortOrder)}
             render={(clusterName) => (
               <span style={{ fontWeight:700 }}>
-                {getI18nConfigCurrentText(clusterName, languageId)}
+                {getI18nConfigCurrentText(currentClusters.find((cluster) => cluster.id == clusterName)?.name
+                ?? clusterName, languageId)}
               </span>
             )}
           />
@@ -204,31 +209,35 @@ export const OverviewTable: React.FC<Props> = ({ clusterInfo, failedClusters,
               compareWithUndefined(a.info?.usageRatePercentage, b.info?.usageRatePercentage, sortOrder)}
             hidden={clusterInfo.every((item) => item.usageRatePercentage === undefined)}
             render={(_, r) => (
-              <div>
-                <Progress
-                  percent={Math.min(Number(r.info?.usageRatePercentage.toFixed(2) ?? 0), 100)}
-                  strokeLinecap='square'
-                  size={[120, 15]}
-                  status="normal"
-                  strokeColor={"#566DE5"}
-                />
-              </div>
+              r.info?.usageRatePercentage !== undefined ? (
+                <div>
+                  <Progress
+                    percent={Math.min(Number(r.info?.usageRatePercentage.toFixed(2) ?? 0), 100)}
+                    strokeLinecap='square'
+                    size={[120, 15]}
+                    status="normal"
+                    strokeColor={"#566DE5"}
+                  />
+                </div>
+              ) : "-"
             )}
           />
           <Table.Column<TableProps>
             dataIndex="cpuUsage"
             title={t(p("cpuUsage"))}
             sorter={(a, b, sortOrder) => compareWithUndefined(a.info?.cpuUsage, b.info?.cpuUsage, sortOrder)}
             render={(_, r) => (
-              <div>
-                <Progress
-                  percent={Math.min(Number(Number(r.info?.cpuUsage ?? 0).toFixed(2)), 100)}
-                  strokeLinecap='square'
-                  size={[120, 15]}
-                  status="normal"
-                  strokeColor={"#566DE5"}
-                />
-              </div>
+              r.info?.cpuUsage !== undefined ? (
+                <div>
+                  <Progress
+                    percent={Math.min(Number(Number(r.info?.cpuUsage ?? 0).toFixed(2)), 100)}
+                    strokeLinecap='square'
+                    size={[120, 15]}
+                    status="normal"
+                    strokeColor={"#566DE5"}
+                  />
+                </div>
+              ) : "-"
             )}
           />
           <Table.Column<TableProps>

diff --git a/apps/portal-web/src/pages/dashboard.tsx b/apps/portal-web/src/pages/dashboard.tsx
@@ -27,6 +27,8 @@ import { UserStore } from "src/stores/UserStore";
 import { Head } from "src/utils/head";
 import { styled } from "styled-components";
 
+
+
 interface Props {
 }
 
@@ -82,12 +84,16 @@ export const DashboardPage: NextPage<Props> = requireAuth(() => true)(() => {
         .map((result) => result.value);
 
 
-
       // 处理失败的结果
       const failedClusters = currentClusters.filter((x) =>
         !successfulResults.find((y) => y.clusterInfo.clusterName === x.id),
       );
 
+      // 成功的集群名称
+      const successfulClusters = currentClusters.filter((x) =>
+        successfulResults.find((y) => y.clusterInfo.clusterName === x.id),
+      );
+
       const clustersInfo = successfulResults
         .map((cluster) => ({
           clusterInfo: {
@@ -204,6 +210,7 @@ export const DashboardPage: NextPage<Props> = requireAuth(() => true)(() => {
         failedClusters: failedClusters.map((x) => ({ clusterName: x.name })),
         clustersOverview,
         platformOverview,
+        successfulClusters,
       };
     }, [currentClusters]),
   });
@@ -219,6 +226,7 @@ export const DashboardPage: NextPage<Props> = requireAuth(() => true)(() => {
         currentClusters={currentClusters}
         clustersOverview={data?.clustersOverview ?? []}
         platformOverview={data?.platformOverview }
+        successfulClusters={data?.successfulClusters}
       />
     </DashboardPageContent>
   );