Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(portal-web): 更新了门户仪表盘的UI以及部分交互逻辑 #1297

Merged
merged 4 commits into from
Jun 14, 2024
Merged

feat(portal-web): 更新了门户仪表盘的UI以及部分交互逻辑 #1297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8ea4459
feat(portal): 临时版本
usaveh Jun 6, 2024
c63aacb
Merge branch 'master' into feat-platformOverview-UI-update
usaveh Jun 11, 2024
6a5f6cd
临时版本
usaveh Jun 14, 2024
bb45fd6
feat(portal): 为门户系统仪表盘更新了UI和部分操作逻辑
usaveh Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/serious-scissors-thank.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@scow/portal-web": patch
---

修改了门户系统下仪表盘的样式和交互逻辑
16 changes: 16 additions & 0 deletions apps/portal-web/src/i18n/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,22 @@ export default {
card:"Card",
job:"Job",
pending:"Pending",
platformOverview:"Platform Overview",
},
nodeRange:{
jobs:"Jobs",
running:"Running",
pending:"Pending",
},
infoPane:{
nodeUtilization:"Node Utilization",
},
doubleInfoPane:{
CPUCoreUsage:"CPU Core Usage",
GPUCoreUsage:"GPU Core Usage",
},
titleContainer:{
available:"Available",
},
},
},
Expand Down
16 changes: 16 additions & 0 deletions apps/portal-web/src/i18n/zh_cn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,12 @@ export default {
card:"卡",
job:"作业",
pending:"排队中",
platformOverview:"平台概览",
},
nodeRange:{
jobs:"作业",
running:"运行中",
pending:"排队中",
},
addEntryModal:{
addQuickEntry:"添加快捷方式",
Expand All @@ -471,6 +477,16 @@ export default {
saveFailed:"保存失败",
saveSuccessfully:"保存成功",
},
infoPane:{
nodeUtilization:"节点使用率",
},
doubleInfoPane:{
CPUCoreUsage:"CPU核心使用率",
GPUCoreUsage:"GPU卡使用率",
},
titleContainer:{
available:"可用",
},
},
},
component:{
Expand Down
52 changes: 52 additions & 0 deletions apps/portal-web/src/models/cluster.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
/**
* Copyright (c) 2022 Peking University and Peking University Institute for Computing and Digital Economy
* SCOW is licensed under Mulan PSL v2.
* You can use this software according to the terms and conditions of the Mulan PSL v2.
* You may obtain a copy of Mulan PSL v2 at:
* http://license.coscl.org.cn/MulanPSL2
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
* See the Mulan PSL v2 for more details.
*/

export interface ClusterOverview {
clusterName: string,
nodeCount: number,
runningNodeCount: number,
idleNodeCount: number,
notAvailableNodeCount: number,
cpuCoreCount: number,
runningCpuCount: number,
idleCpuCount: number,
notAvailableCpuCount: number,
gpuCoreCount: number,
runningGpuCount: number,
idleGpuCount: number,
notAvailableGpuCount: number,
jobCount: number,
runningJobCount: number,
pendingJobCount: number,
usageRatePercentage: number,
partitionStatus: number,
}

export interface PlatformOverview {
nodeCount: number,
runningNodeCount: number,
idleNodeCount: number,
notAvailableNodeCount: number,
cpuCoreCount: number,
runningCpuCount: number,
idleCpuCount: number,
notAvailableCpuCount: number,
gpuCoreCount: number,
runningGpuCount: number,
idleGpuCount: number,
notAvailableGpuCount: number,
jobCount: number,
runningJobCount: number,
pendingJobCount: number,
usageRatePercentage: number,
partitionStatus: number,
}
120 changes: 48 additions & 72 deletions apps/portal-web/src/pageComponents/dashboard/DoubleInfoPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
* See the Mulan PSL v2 for more details.
*/

import { Card, Tag } from "antd";
import { Card } from "antd";
import React, { useMemo } from "react";
import { PieChartCom } from "src/pageComponents/dashboard/PieChartCom";
import { styled } from "styled-components"; ;
import { gray } from "@ant-design/colors";
import { prefix, useI18nTranslateToString } from "src/i18n";

import { Line, PaneData, PieChartContainer, Tag as TagProps, Title, TitleContainer } from "./InfoPane";
import { PaneData, PieChartContainer, Tag as TagProps, Title } from "./InfoPane";
import { TitleContainer } from "./TitleContainer";

interface InfoProps {
title?: Title;
Expand All @@ -28,30 +29,27 @@ interface Props {
cpuInfo: InfoProps;
gpuInfo: InfoProps;
loading: boolean;
strokeColor: [string, string]
}

const Container = styled.div`
margin: 20px 0;
`;

const UpperContainer = styled.div`
display: flex;
flex-direction: column;
margin: 0px 0;
`;

const LowerContainer = styled.div`
display: flex;
/* CPU和GPU两个信息面板的间隔距离 */
& > :first-child {
margin-right: 40px;
}
justify-content:space-between
`;

const ResourceContainer = styled.div`
flex: 1;
`;

export const DoubleInfoPane: React.FC<Props> = ({ cpuInfo, gpuInfo, loading }) => {
const p = prefix("pageComp.dashboard.doubleInfoPane.");

export const DoubleInfoPane: React.FC<Props> = ({ cpuInfo, gpuInfo, loading, strokeColor }) => {

const t = useI18nTranslateToString();

const cpuNotEmptyData = useMemo(() => {
return cpuInfo.paneData.some((x) => x.num > 0);
Expand All @@ -61,73 +59,51 @@ export const DoubleInfoPane: React.FC<Props> = ({ cpuInfo, gpuInfo, loading }) =
return gpuInfo.paneData.some((x) => x.num > 0);
}, [gpuInfo.paneData]);


return (
<Container>
<Card bordered={false} loading={loading}>
<UpperContainer>
{cpuInfo.title ? (
<TitleContainer>
<span>{cpuInfo.title.title}</span>
<span>{cpuInfo.title.subTitle ? `[${cpuInfo.title.subTitle}]` : " "} </span>
</TitleContainer>
)
: undefined}
</UpperContainer>
<Card
loading={loading}
type="inner"
style={{ maxHeight:"310px",
boxShadow: "0px 2px 10px 0px #1C01011A",
}}
title={(
<div style={{ display:"flex", gap:"15px" }}>
<TitleContainer
name={t(p("CPUCoreUsage"))}
total={cpuInfo.paneData.reduce((a, b) => a + b.num, 0)}
available={cpuInfo.paneData[1].num}
display={cpuNotEmptyData}
></TitleContainer>
<TitleContainer
name={t(p("GPUCoreUsage"))}
total={gpuInfo.paneData.reduce((a, b) => a + b.num, 0)}
available={gpuInfo.paneData[1].num}
display={gpuNotEmptyData}
></TitleContainer>
</div>
)}
>
<LowerContainer>
<ResourceContainer>
<div>
<Tag
style={{ width:"100%", height: "24px", lineHeight:"24px", fontSize:"14px",
display:"flex", justifyContent:"center" }}
bordered={true}
>
{cpuInfo.tag.itemName}
<b>&nbsp;{cpuInfo.tag.num}</b>
{cpuInfo.tag.unit}
</Tag>
</div>
<div style={{ height:"120px" }}>
{
cpuInfo.paneData.map((item, idx) =>
<Line key={idx} itemName={item.itemName} num={item.num} color={item.color}></Line>)
}
</div>
<PieChartContainer>
{/* 数据全为空时,饼图置灰 */}
{cpuNotEmptyData ? (
<PieChartCom
pieData={cpuInfo.paneData.map((item) => ({ value:item.num, color:item.color }))}
></PieChartCom>
) :
<PieChartCom pieData={[{ value:1, color:gray[4] }]}></PieChartCom>}
<PieChartCom
pieData={cpuInfo.paneData.map((item) => ({ value:item.num, color:item.color }))}
strokeColor={strokeColor[0]}
range={Math.round((cpuInfo.paneData[0].num / cpuInfo.paneData.reduce((a, b) => a + b.num, 0)) * 100) }
display={cpuNotEmptyData}
></PieChartCom>
</PieChartContainer>
</ResourceContainer>
<ResourceContainer>
<div>
<Tag
style={{ width:"100%", height: "24px", lineHeight:"24px", fontSize:"14px",
display:"flex", justifyContent:"center" }}
bordered={true}
>
{gpuInfo.tag.itemName}
<b>&nbsp;{gpuInfo.tag.num}</b>
{gpuInfo.tag.unit}
</Tag>
</div>
<div style={{ height:"120px" }}>
{
gpuInfo.paneData.map((item, idx) =>
<Line key={idx} itemName={item.itemName} num={item.num} color={item.color}></Line>)
}
</div>
<PieChartContainer>
{/* 数据全为空时,饼图置灰 */}
{gpuNotEmptyData ? (
<PieChartCom
pieData={gpuInfo.paneData.map((item) => ({ value:item.num, color:item.color }))}
></PieChartCom>
) :
<PieChartCom pieData={[{ value:1, color:gray[4] }]}></PieChartCom>}
<PieChartCom
pieData={gpuInfo.paneData.map((item) => ({ value:item.num, color:item.color }))}
strokeColor={strokeColor[1]}
range={Math.round((gpuInfo.paneData[0].num / gpuInfo.paneData.reduce((a, b) => a + b.num, 0)) * 100) }
display={gpuNotEmptyData}
></PieChartCom>
</PieChartContainer>
</ResourceContainer>
</LowerContainer>
Expand Down
80 changes: 31 additions & 49 deletions apps/portal-web/src/pageComponents/dashboard/InfoPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@

import { Card, Tag } from "antd";
import React, { useMemo } from "react";
import { prefix, useI18nTranslateToString } from "src/i18n";
import { PieChartCom } from "src/pageComponents/dashboard/PieChartCom";
import { styled } from "styled-components"; ;
import { gray } from "@ant-design/colors";
import { styled } from "styled-components";

import { TitleContainer } from "./TitleContainer";

interface LineProps {
itemName: string;
Expand Down Expand Up @@ -57,74 +59,54 @@ export interface PaneData {
color: string;
}
interface Props {
title?: Title;
tag: Tag;
paneData: PaneData[];
loading: boolean;
strokeColor: string;
}

const Container = styled.div`
margin: 20px 0;
`;

export const TitleContainer = styled.div`
height: 45px;
font-size: 16px;
font-weight: 600;
padding-bottom: 20px;
display: flex;
align-items: center;
justify-content: start;

span:nth-child(2) {
color: ${gray[5]};
}
margin: 0px 0;
`;

export const PieChartContainer = styled.div`
display: flex;
justify-content: center;
`;

export const InfoPane: React.FC<Props> = ({ title, tag, paneData, loading }) => {
const p = prefix("pageComp.dashboard.infoPane.");

export const InfoPane: React.FC<Props> = ({ paneData, loading, strokeColor }) => {

const t = useI18nTranslateToString();

const notEmptyData = useMemo(() => {
return paneData.some((x) => x.num > 0);
}, [paneData]);


return (
<Container>
<Card bordered={false} loading={loading}>
{title ? (
<TitleContainer>
<span>{title.title}</span>
<span>{title.subTitle ? `[${title.subTitle}]` : " "} </span>
</TitleContainer>
)
: undefined}
<div>
<Tag
style={{ width:"100%", height: "24px", lineHeight:"24px", fontSize:"14px",
display:"flex", justifyContent:"center" }}
bordered={true}
>
{tag.itemName}
<b>&nbsp;{tag.num}</b>
{tag.unit}
</Tag>
</div>
<div style={{ height:"120px" }}>
{
paneData.map((item, idx) =>
<Line key={idx} itemName={item.itemName} num={item.num} color={item.color}></Line>)
}
</div>
<Card
loading={loading}
type="inner"
title={ (
<TitleContainer
name={t(p("nodeUtilization"))}
total={paneData.reduce((a, b) => a + b.num, 0)}
available={paneData[1].num}
display={notEmptyData}
></TitleContainer>
)}
style={{ maxHeight:"310px", boxShadow: "0px 2px 10px 0px #1C01011A" }}
>
<PieChartContainer>
{/* 数据全为空时,饼图置灰 */}
{notEmptyData ?
<PieChartCom pieData={paneData.map((item) => ({ value:item.num, color:item.color }))}></PieChartCom> :
<PieChartCom pieData={[{ value:1, color:gray[4] }]}></PieChartCom>}

<PieChartCom
pieData={paneData.map((item) => ({ value:item.num, color:item.color }))}
strokeColor={strokeColor}
range={Math.round((paneData[0].num / paneData.reduce((a, b) => a + b.num, 0)) * 100) }
display={notEmptyData}
></PieChartCom>
</PieChartContainer>
</Card>

Expand Down
Loading
Loading