feat(portal): 为门户系统仪表盘更新了UI和部分操作逻辑

PKUHPC · Jun 14, 2024 · bb45fd6 · bb45fd6
1 parent 6a5f6cd
commit bb45fd6
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 344 deletions.
diff --git a/.changeset/serious-scissors-thank.md b/.changeset/serious-scissors-thank.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
@@ -10,7 +10,7 @@
  * See the Mulan PSL v2 for more details.
  */
 
-import React, { useState } from "react";
+import React from "react";
 import { DoubleInfoPane } from "src/pageComponents/dashboard/DoubleInfoPane";
 import { InfoPane } from "src/pageComponents/dashboard/InfoPane";
 import { styled } from "styled-components"; ;
@@ -69,42 +69,31 @@ export const InfoPanes: React.FC<Props> = ({ selectItem, loading, activeTabKey,
 
   const { currentClusters } = useStore(ClusterInfoStore);
 
-  const testClusterName = [
-    "linux",
-    "ubuntu",
-    "debian",
-    "fedora",
-    "centos",
-    "redhat",
-    "arch",
-    "suse",
-  ];
-
   // card的每一项
-  // const clusterCardsList = [
-  //   {
-  //     key:"platformOverview",
-  //     tab:"platformOverview",
-  //   }, ...currentClusters.map((x) => ({
-  //     key:x.id,
-  //     tab:typeof (x.name) == "string" ? x.name : x.name.i18n[languageId],
-  //   })),
-  // ];
-
   const clusterCardsList = [
     {
       key:"platformOverview",
-      tab:t(p("platformOverview")),
-    }, ...testClusterName.map((x) => ({
-      key:x,
-      tab:x,
+      tab:
+      <div style={{ width:"120px", height:"40px",
+        textAlign: "center", lineHeight:"40px",
+        color:`${activeTabKey === "platformOverview" ? "#FFF" : "#000"}`,
+        background:`${activeTabKey === "platformOverview" ? "#9b0000" : "transparent"}`,
+        borderRadius:"5px",
+        fontWeight:"700",
+      }}
+      >
+        {t(p("platformOverview"))}
+      </div>,
+    }, ...currentClusters.map((x) => ({
+      key:x.id,
+      tab:typeof (x.name) == "string" ? x.name : x.name.i18n[languageId],
     })),
   ];
 
+
   const { nodeCount, runningNodeCount, idleNodeCount, notAvailableNodeCount,
     cpuCoreCount, runningCpuCount, idleCpuCount, notAvailableCpuCount,
-    gpuCoreCount, runningGpuCount, idleGpuCount, notAvailableGpuCount,
-    jobCount, runningJobCount, pendingJobCount,
+    gpuCoreCount, runningGpuCount, idleGpuCount, notAvailableGpuCount, runningJobCount, pendingJobCount,
   } = selectItem ?? {
     nodeCount: 0,
     runningNodeCount: 0,
@@ -169,7 +158,12 @@ export const InfoPanes: React.FC<Props> = ({ selectItem, loading, activeTabKey,
         </Col>
         <Col md={8} xl={6}>
           <InfoPaneContainer>
-            <JobInfo runningJobs={`${runningJobCount}`} pendingJobs={`${pendingJobCount}`} loading={loading} />
+            <JobInfo
+              runningJobs={`${runningJobCount}`}
+              pendingJobs={`${pendingJobCount}`}
+              loading={loading}
+              display={!(runningJobCount == 0 && pendingJobCount == 0)}
+            />
           </InfoPaneContainer>
         </Col>
       </Row>

diff --git a/apps/portal-web/src/pageComponents/dashboard/NodeRange.tsx b/apps/portal-web/src/pageComponents/dashboard/NodeRange.tsx
@@ -20,6 +20,7 @@ interface Props {
   runningJobs: string;
   pendingJobs: string;
   loading: boolean;
+  display: boolean;
 }
 
 const JobInfoContainer = styled.div`
@@ -56,9 +57,14 @@ margin: 0px 0;
 
 const p = prefix("pageComp.dashboard.nodeRange.");
 
-const JobInfo: React.FC<Props> = ({ runningJobs, pendingJobs, loading }) => {
+const JobInfo: React.FC<Props> = ({ runningJobs, pendingJobs, loading, display }) => {
   const t = useI18nTranslateToString();
 
+  // 没有数据时不显示
+  if (!display) {
+    return null;
+  }
+
   return (
     <Container>
       <Card

diff --git a/apps/portal-web/src/pageComponents/dashboard/OverviewTable.tsx b/apps/portal-web/src/pageComponents/dashboard/OverviewTable.tsx
@@ -14,7 +14,7 @@ import { I18nStringType } from "@scow/config/build/i18n";
 import { getI18nConfigCurrentText } from "@scow/lib-web/build/utils/systemLanguage";
 import { PartitionInfo, PartitionInfo_PartitionStatus } from "@scow/protos/build/portal/config";
 import { Progress, Table, Tag } from "antd";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Localized, prefix, useI18n, useI18nTranslateToString } from "src/i18n";
 import { ClusterOverview, PlatformOverview } from "src/models/cluster";
 import { InfoPanes } from "src/pageComponents/dashboard/InfoPanes";
@@ -119,14 +119,22 @@ export const OverviewTable: React.FC<Props> = ({ clusterInfo, failedClusters,
 
   // 当activekey改变时表格数据显示的逻辑
   const filteredClusterInfo = useMemo(() => {
-    console.log(activeTabKey);
     if (activeTabKey === "platformOverview") {
       setSelectId(undefined);
       return clusterInfo;
     }
     return clusterInfo.filter((info) => info.clusterName === activeTabKey);
   }, [activeTabKey, clusterInfo, languageId]);
 
+  useEffect(() => {
+    if (activeTabKey !== "platformOverview") {
+      const selectedInfo = clusterInfo.find((info) => info.clusterName === activeTabKey);
+      if (selectedInfo) {
+        setSelectId(selectedInfo.id);
+      }
+    }
+  }, [activeTabKey, clusterInfo]);
+
 
   return (
     (isLoading || currentClusters.length > 0) ? (
@@ -138,7 +146,9 @@ export const OverviewTable: React.FC<Props> = ({ clusterInfo, failedClusters,
           onTabChange={setActiveTabKey}
         />
         <Table
-          title={() => t(p("title"))}
+          style={{
+            marginTop:"15px",
+          }}
           tableLayout="fixed"
           dataSource={(filteredClusterInfo.map((x) =>
             ({ clusterName:x.clusterName, info:{ ...x } })) as Array<TableProps>)
@@ -258,7 +268,6 @@ export const OverviewTable: React.FC<Props> = ({ clusterInfo, failedClusters,
             }
           />
         </Table>
-
       </Container>
 
     ) : (