From 62c7f32eb3367a39a60a3783182082db8cdbcd04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BD=95=E7=AB=A5=E5=B4=87?= <792998983@qq.com> Date: Wed, 8 Nov 2023 22:08:37 +0800 Subject: [PATCH] =?UTF-8?q?fix(web):=20=E4=BC=98=E5=8C=96web=E7=AB=AFtable?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C=EF=BC=8C=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E5=88=97=E7=9A=84=E5=AE=BD=E5=BA=A6=20(#958)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 做了什么： ### 优化table宽度，将列宽以百分比设置以优化大屏/小屏视觉效果，将操作列固定在table右侧，不随滚动条滚动，去掉了不会渲染的列： ### 门户系统列表： - 未结束的作业 - 所有作业 - 已创建的应用 ### 管理系统列表： - 未结束的作业 - 已结束的作业 - 用户列表 - 账户列表 - 充值记录 --- .changeset/beige-crabs-design.md | 6 ++ .../pageComponents/accounts/AccountTable.tsx | 22 +++--- .../pageComponents/admin/AllUsersTable.tsx | 9 ++- .../pageComponents/common/PaymentTable.tsx | 14 ++-- .../pageComponents/job/HistoryJobTable.tsx | 27 ++++--- .../pageComponents/job/RunningJobTable.tsx | 32 ++++---- .../pageComponents/tenant/AdminJobTable.tsx | 22 ++++-- .../pageComponents/tenant/AdminUserTable.tsx | 5 +- apps/portal-web/src/i18n/en.ts | 1 - apps/portal-web/src/i18n/zh_cn.ts | 1 - .../pageComponents/app/AppSessionsTable.tsx | 11 ++- .../src/pageComponents/job/AllJobsTable.tsx | 29 +++---- .../pageComponents/job/RunningJobTable.tsx | 75 ++++++++----------- 13 files changed, 135 insertions(+), 119 deletions(-) create mode 100644 .changeset/beige-crabs-design.md diff --git a/.changeset/beige-crabs-design.md b/.changeset/beige-crabs-design.md new file mode 100644 index 0000000000..b4fc5bdcb6 --- /dev/null +++ b/.changeset/beige-crabs-design.md @@ -0,0 +1,6 @@ +--- +"@scow/portal-web": patch +"@scow/mis-web": patch +--- + +优化 web 端 table，调整列的宽度以百分比固定，使其在大屏/小屏下展示更友好 diff --git a/apps/mis-web/src/pageComponents/accounts/AccountTable.tsx b/apps/mis-web/src/pageComponents/accounts/AccountTable.tsx index 034b4c3763..6cc0dc9e53 100644 --- a/apps/mis-web/src/pageComponents/accounts/AccountTable.tsx +++ b/apps/mis-web/src/pageComponents/accounts/AccountTable.tsx @@ -146,30 +146,26 @@ export const AccountTable: React.FC = ({ /> dataIndex="ownerName" - width={280} + width="25%" title={t(p("owner"))} render={(_, r) => `${r.ownerName}（ID: ${r.ownerId}）`} /> dataIndex="userCount" - width={90} + width="8%" title={t(pCommon("userCount"))} /> {/* 只在平台管理下的账户列表中显示 */} {showedTab === "PLATFORM" && ( dataIndex="tenantName" - width={110} + width="10%" title={t(p("tenant"))} /> )} - - dataIndex="comment" - title={t(p("comment"))} - /> dataIndex="balance" - width={150} + width="13%" title={t(pCommon("balance"))} sorter={(a, b) => (moneyToNumber(a.balance)) - (moneyToNumber(b.balance))} sortDirections={["ascend", "descend"]} @@ -178,7 +174,7 @@ export const AccountTable: React.FC = ({ /> dataIndex="blocked" - width={80} + width="7%" title={t(p("status"))} sorter={(a, b) => (a.blocked ? 1 : 0) - (b.blocked ? 1 : 0)} sortDirections={["ascend", "descend"]} @@ -186,9 +182,15 @@ export const AccountTable: React.FC = ({ render={(blocked) => blocked ? {t(p("block"))} : {t(p("normal"))}} /> + + dataIndex="comment" + ellipsis + title={t(p("comment"))} + /> title={t(pCommon("operation"))} - width={180} + width="15%" + fixed="right" render={(_, r) => ( }> {/* 只在租户管理下的账户列表中显示管理成员 */} diff --git a/apps/mis-web/src/pageComponents/admin/AllUsersTable.tsx b/apps/mis-web/src/pageComponents/admin/AllUsersTable.tsx index 151fdb2087..d1623bb2b9 100644 --- a/apps/mis-web/src/pageComponents/admin/AllUsersTable.tsx +++ b/apps/mis-web/src/pageComponents/admin/AllUsersTable.tsx @@ -222,7 +222,7 @@ const UserInfoTable: React.FC = ({ sortDirections={["ascend", "descend"]} sortOrder={sortInfo.sortField === "name" ? sortInfo.sortOrder : null} /> - dataIndex="tenantName" title={t(p("tenant"))} /> + dataIndex="tenantName" ellipsis title={t(p("tenant"))} /> dataIndex="availableAccounts" width="25%" @@ -231,7 +231,7 @@ const UserInfoTable: React.FC = ({ /> dataIndex="createTime" - width={160} + width="13.5%" title={t(pCommon("createTime"))} sorter={true} sortDirections={["ascend", "descend"]} @@ -240,7 +240,7 @@ const UserInfoTable: React.FC = ({ /> dataIndex="roles" - width={175} + width="15%" title={t(p("roles"))} render={(_, r) => ( @@ -249,7 +249,8 @@ const UserInfoTable: React.FC = ({ dataIndex="changePassword" - width={90} + width="7.5%" + fixed="right" title={t(pCommon("operation"))} render={(_, r) => ( }> diff --git a/apps/mis-web/src/pageComponents/common/PaymentTable.tsx b/apps/mis-web/src/pageComponents/common/PaymentTable.tsx index 3a0cbc58cf..7f77c30aa8 100644 --- a/apps/mis-web/src/pageComponents/common/PaymentTable.tsx +++ b/apps/mis-web/src/pageComponents/common/PaymentTable.tsx @@ -176,18 +176,13 @@ export const PaymentTable: React.FC = ({ { showTenantName ? : undefined } - formatDateTime(v)} /> - v.toFixed(3)} /> + formatDateTime(v)} /> + v.toFixed(3)} /> - { showAuditInfo ? ( <> @@ -196,6 +191,11 @@ export const PaymentTable: React.FC = ({ ) : undefined } + diff --git a/apps/mis-web/src/pageComponents/job/HistoryJobTable.tsx b/apps/mis-web/src/pageComponents/job/HistoryJobTable.tsx index 93c173fc75..138eb0b25b 100644 --- a/apps/mis-web/src/pageComponents/job/HistoryJobTable.tsx +++ b/apps/mis-web/src/pageComponents/job/HistoryJobTable.tsx @@ -294,37 +294,39 @@ export const JobInfoTable: React.FC = ({ total: data?.totalCount, onChange: (page, pageSize) => setPageInfo({ page, pageSize }), } : false} - scroll={{ x: data?.jobs?.length ? 1200 : true }} + tableLayout="fixed" + scroll={{ x: data?.jobs?.length ? 1450 : true }} > - dataIndex="idJob" width={100} title={t(pCommon("clusterWorkId"))} /> + dataIndex="idJob" width="7%" title={t(pCommon("clusterWorkId"))} /> + dataIndex="jobName" ellipsis title={t(pCommon("workName"))} /> { showAccount ? ( - dataIndex="account" width={120} title={t(pCommon("account"))} /> + dataIndex="account" width="13%" ellipsis title={t(pCommon("account"))} /> ) : undefined } { showUser ? ( - dataIndex="user" width={120} title={t(pCommon("user"))} /> + dataIndex="user" width="12%" ellipsis title={t(pCommon("user"))} /> ) : undefined } dataIndex="cluster" title={t(pCommon("clusterName"))} - width={150} + width="12%" + ellipsis render={(cluster) => getClusterName(cluster, languageId)} /> - dataIndex="partition" width={80} title={t(pCommon("partition"))} /> - dataIndex="qos" width={80} title="QOS" /> - dataIndex="jobName" ellipsis={true} title={t(pCommon("workName"))} /> + dataIndex="partition" width="8.5%" ellipsis title={t(pCommon("partition"))} /> + dataIndex="qos" width="8.5%" ellipsis title="QOS" /> formatDateTime(time)} /> dataIndex="timeEnd" - width={160} + width="11.5%" title={t(pCommon("timeEnd"))} render={(time: string) => formatDateTime(time)} /> @@ -333,7 +335,7 @@ export const JobInfoTable: React.FC = ({ key={i} dataIndex={`${v}Price`} - width={110} + width="8%" title={finalPriceText[v]} render={(price: Money) => moneyToString(price) + " " + t(pCommon("unit"))} /> @@ -341,7 +343,8 @@ export const JobInfoTable: React.FC = ({ } title={t(pCommon("more"))} - width={60} + width="4.5%" + fixed="right" render={(_, r) => setPreviewItem(r)}>{t(pCommon("detail"))}} /> diff --git a/apps/mis-web/src/pageComponents/job/RunningJobTable.tsx b/apps/mis-web/src/pageComponents/job/RunningJobTable.tsx index 8a68338107..0a333f7f02 100644 --- a/apps/mis-web/src/pageComponents/job/RunningJobTable.tsx +++ b/apps/mis-web/src/pageComponents/job/RunningJobTable.tsx @@ -214,7 +214,7 @@ type JobInfoTableProps = { const ChangeJobTimeLimitModalLink = ModalLink(ChangeJobTimeLimitModal); export const RunningJobInfoTable: React.FC = ({ - data, isLoading, reload, showAccount, showCluster, showUser, selection, + data, isLoading, reload, showAccount, showUser, showCluster, selection, }) => { const [previewItem, setPreviewItem] = useState(undefined); @@ -253,38 +253,39 @@ export const RunningJobInfoTable: React.FC = ({ pagination={{ showSizeChanger: true }} rowKey={runningJobId} scroll={{ x: data?.length ? 1800 : true }} + tableLayout="fixed" > { showCluster && ( dataIndex="cluster" - width={150} + width="9.5%" title={t(pCommon("cluster"))} render={(_, r) => getI18nConfigCurrentText(r.cluster.name, languageId)} /> ) } - dataIndex="jobId" width={80} title={t(pCommon("workId"))} /> + dataIndex="jobId" width="5%" title={t(pCommon("workId"))} /> { showUser && ( - dataIndex="user" width={120} title={t(pCommon("user"))} /> + dataIndex="user" width="8%" ellipsis title={t(pCommon("user"))} /> ) } { showAccount && ( - dataIndex="account" width={120} title={t(pCommon("account"))} /> + dataIndex="account" width="9.5%" ellipsis title={t(pCommon("account"))} /> ) } - dataIndex="name" width={200} ellipsis={true} title={t(pCommon("workName"))} /> - dataIndex="partition" width={80} title={t(pCommon("partition"))} /> - dataIndex="qos" width={80} title="QOS" /> - dataIndex="nodes" width={80} title={t(p("nodes"))} /> - dataIndex="cores" width={80} title={t(p("cores"))} /> - dataIndex="gpus" width={90} title={t(p("gpus"))} /> - dataIndex="state" width={110} title={t(pCommon("status"))} /> + dataIndex="name" ellipsis title={t(pCommon("workName"))} /> + dataIndex="partition" width="6.3%" ellipsis title={t(pCommon("partition"))} /> + dataIndex="qos" width="6.3%" ellipsis title="QOS" /> + dataIndex="nodes" width="4.4%" title={t(p("nodes"))} /> + dataIndex="cores" width="4.4%" title={t(p("cores"))} /> + dataIndex="gpus" width="4.4%" title={t(p("gpus"))} /> + dataIndex="state" width="6%" title={t(pCommon("status"))} /> = ({ title={t(p("reason"))} render={(d: string) => d.startsWith("(") && d.endsWith(")") ? d.substring(1, d.length - 1) : d} /> - dataIndex="timeLimit" width={120} title={t(p("limit"))} /> + dataIndex="timeLimit" width="6.5%" title={t(p("limit"))} /> title={t(pCommon("more"))} - width={180} + width="9%" + fixed="right" render={(_, r) => ( setPreviewItem(r)}>{t(pCommon("detail"))} diff --git a/apps/mis-web/src/pageComponents/tenant/AdminJobTable.tsx b/apps/mis-web/src/pageComponents/tenant/AdminJobTable.tsx index d1d592c473..cafc13e702 100644 --- a/apps/mis-web/src/pageComponents/tenant/AdminJobTable.tsx +++ b/apps/mis-web/src/pageComponents/tenant/AdminJobTable.tsx @@ -260,41 +260,49 @@ const JobInfoTable: React.FC = ({ total: data?.totalCount, onChange: (page, pageSize) => setPageInfo({ page, pageSize }), } : false} - scroll={{ x: true }} + tableLayout="fixed" + scroll={{ x: data?.jobs?.length ? 1800 : true }} > - dataIndex="idJob" title={t(pCommon("clusterWorkId"))} /> - dataIndex="account" title={t(pCommon("account"))} /> - dataIndex="user" title={t(pCommon("user"))} /> + dataIndex="idJob" width="5.2%" title={t(pCommon("clusterWorkId"))} /> + dataIndex="jobName" ellipsis title={t(pCommon("workName"))} /> + dataIndex="account" ellipsis title={t(pCommon("account"))} /> + dataIndex="user" ellipsis title={t(pCommon("user"))} /> dataIndex="cluster" + ellipsis title={t(pCommon("cluster"))} render={(cluster) => getClusterName(cluster, languageId)} /> - dataIndex="partition" title={t(pCommon("partition"))} /> - dataIndex="qos" title="QOS" /> - dataIndex="jobName" title={t(pCommon("workName"))} /> + dataIndex="partition" width="6.7%" ellipsis title={t(pCommon("partition"))} /> + dataIndex="qos" width="6.7%" ellipsis title="QOS" /> dataIndex="timeSubmit" + width="8.9%" title={t(pCommon("timeSubmit"))} render={(time: string) => formatDateTime(time)} /> dataIndex="timeEnd" + width="8.9%" title={t(pCommon("timeEnd"))} render={(time: string) => formatDateTime(time)} /> dataIndex="accountPrice" + width="6.1%" title={t(p("tenantPrice"))} render={(price: Money) => moneyToString(price)} /> dataIndex="tenantPrice" + width="6.1%" title={t(p("platformPrice"))} render={(price: Money) => moneyToString(price)} /> title={t(pCommon("more"))} + fixed="right" + width="4%" render={(_, r) => setPreviewItem(r)}>{t(pCommon("detail"))}} /> diff --git a/apps/mis-web/src/pageComponents/tenant/AdminUserTable.tsx b/apps/mis-web/src/pageComponents/tenant/AdminUserTable.tsx index 5309f7b0c7..ad03417dfd 100644 --- a/apps/mis-web/src/pageComponents/tenant/AdminUserTable.tsx +++ b/apps/mis-web/src/pageComponents/tenant/AdminUserTable.tsx @@ -135,6 +135,7 @@ export const AdminUserTable: React.FC = ({ = ({ onChange: (page) => setCurrentPageNum(page), }} rowKey="id" - scroll={{ x: true }} + scroll={{ x: filteredData?.length ? 1200 : true }} onChange={handleTableChange} > @@ -190,6 +191,8 @@ export const AdminUserTable: React.FC = ({ dataIndex="changePassword" title={t(pCommon("operation"))} + width="8%" + fixed="right" render={(_, r) => ( }> = ({ cluster }) => { { title: t(p("table.sessionId")), dataIndex: "sessionId", - width:"30%", + width: "25%", + ellipsis: true, }, { title: t(p("table.jobId")), dataIndex: "jobId", + width: "8%", sorter: (a, b) => compareNumber(a.jobId, b.jobId), }, { @@ -100,11 +102,13 @@ export const AppSessionsTable: React.FC = ({ cluster }) => { { title: t(p("table.submitTime")), dataIndex: "submitTime", + width: "15%", render: (_, record) => record.submitTime ? formatDateTime(record.submitTime) : "", }, { title: t(p("table.state")), dataIndex: "state", + width: "12%", render: (_, record) => ( record.reason ? ( @@ -131,7 +135,8 @@ export const AppSessionsTable: React.FC = ({ cluster }) => { { title: t("button.actionButton"), key: "action", - width: "20%", + fixed:"right", + width: "10%", render: (_, record) => ( { @@ -257,10 +262,12 @@ export const AppSessionsTable: React.FC = ({ cluster }) => {
x.state !== "ENDED") : filteredData} columns={columns} rowKey={(record) => record.sessionId} loading={!filteredData && isLoading} + scroll={{ x: filteredData?.length ? 1200 : true }} /> ); diff --git a/apps/portal-web/src/pageComponents/job/AllJobsTable.tsx b/apps/portal-web/src/pageComponents/job/AllJobsTable.tsx index a638bd5e86..c6a581812f 100644 --- a/apps/portal-web/src/pageComponents/job/AllJobsTable.tsx +++ b/apps/portal-web/src/pageComponents/job/AllJobsTable.tsx @@ -156,53 +156,54 @@ export const JobInfoTable: React.FC = ({ loading={isLoading} pagination={{ showSizeChanger: true }} rowKey={(x) => x.jobId} - scroll={{ x: data?.length ? 1750 : true }} + scroll={{ x: data?.length ? 1850 : true }} > dataIndex="jobId" - width={80} + width="5.2%" title={t(p("jobId"))} sorter={(a, b) => compareNumber(+a.jobId, +b.jobId)} defaultSortOrder="descend" /> - dataIndex="name" width={200} ellipsis={true} title={t(p("jobName"))} /> - dataIndex="account" width={120} title={t(p("account"))} /> - dataIndex="partition" width={80} title={t(p("partition"))} /> - dataIndex="qos" width={80} title={t(p("qos"))} /> - dataIndex="state" width={110} title={t(p("state"))} /> + dataIndex="name" ellipsis title={t(p("jobName"))} /> + dataIndex="account" width="10%" ellipsis title={t(p("account"))} /> + dataIndex="partition" width="6.5%" ellipsis title={t(p("partition"))} /> + dataIndex="qos" width="6.5%" ellipsis title={t(p("qos"))} /> + dataIndex="state" width="6%" title={t(p("state"))} /> dataIndex="submitTime" - width={160} + width="8.6%" title={t(p("submitTime"))} render={(t) => formatDateTime(t)} /> dataIndex="startTime" - width={160} + width="8.6%" title={t(p("startTime"))} render={(t) => formatDateTime(t)} /> dataIndex="endTime" - width={160} + width="8.6%" title={t(p("endTime"))} render={(t) => formatDateTime(t)} /> dataIndex="elapsed" - width={100} + width="5.4%" title={t(p("elapsed"))} /> - dataIndex="timeLimit" width={120} title={t(p("timeLimit"))} /> + dataIndex="timeLimit" width="6.5%" title={t(p("timeLimit"))} /> dataIndex="reason" - ellipsis={true} + ellipsis title={t(p("reason"))} render={(d: string) => d.startsWith("(") && d.endsWith(")") ? d.substring(1, d.length - 1) : d} /> title={t(p("more"))} - width={100} + width="5%" + fixed="right" render={(_, r) => ( Router.push(join("/files", cluster.id, r.workingDirectory))}> diff --git a/apps/portal-web/src/pageComponents/job/RunningJobTable.tsx b/apps/portal-web/src/pageComponents/job/RunningJobTable.tsx index 5076ffb588..f3c9e0339d 100644 --- a/apps/portal-web/src/pageComponents/job/RunningJobTable.tsx +++ b/apps/portal-web/src/pageComponents/job/RunningJobTable.tsx @@ -10,7 +10,6 @@ * See the Mulan PSL v2 for more details. */ -import { getI18nConfigCurrentText } from "@scow/lib-web/build/utils/i18n"; import { App, Button, Form, InputNumber, Popconfirm, Space, Table } from "antd"; import Router from "next/router"; import { join } from "path"; @@ -20,7 +19,7 @@ import { useStore } from "simstate"; import { api } from "src/apis"; import { SingleClusterSelector } from "src/components/ClusterSelector"; import { FilterFormContainer } from "src/components/FilterFormContainer"; -import { prefix, useI18n, useI18nTranslateToString } from "src/i18n"; +import { prefix, useI18nTranslateToString } from "src/i18n"; import { runningJobId, RunningJobInfo } from "src/models/job"; import { RunningJobDrawer } from "src/pageComponents/job/RunningJobDrawer"; import { DefaultClusterStore } from "src/stores/DefaultClusterStore"; @@ -103,9 +102,6 @@ export const RunningJobQueryTable: React.FC = ({ @@ -115,85 +111,74 @@ export const RunningJobQueryTable: React.FC = ({ type JobInfoTableProps = { data: RunningJobInfo[] | undefined; isLoading: boolean; - showAccount: boolean; - showCluster: boolean; - showUser: boolean; reload: () => void; }; export const RunningJobInfoTable: React.FC = ({ - data, isLoading, showAccount, showCluster, showUser, reload, + data, isLoading, reload, }) => { const { message } = App.useApp(); const t = useI18nTranslateToString(); - const languageId = useI18n().currentLanguage.id; - const [previewItem, setPreviewItem] = useState(undefined); return ( <>
- { - showCluster && ( - - dataIndex="cluster" - width={150} - title={t(p("jobInfoTable.cluster"))} - render={(_, r) => getI18nConfigCurrentText(r.cluster.name, languageId)} - /> - ) - } dataIndex="jobId" - width={80} + width="5.2%" title={t(p("jobInfoTable.jobId"))} sorter={(a, b) => a.jobId.localeCompare(b.jobId)} /> - { - showUser && ( - dataIndex="user" width={120} title={t(p("jobInfoTable.user"))} /> - ) - } - { - showAccount && ( - dataIndex="account" width={120} title={t(p("jobInfoTable.account"))} /> - ) - } dataIndex="name" + ellipsis title={t(p("jobInfoTable.name"))} - width={200} - ellipsis={true} /> - dataIndex="partition" width={80} title={t(p("jobInfoTable.partition"))} /> - dataIndex="qos" width={80} title={t(p("jobInfoTable.qos"))} /> - dataIndex="nodes" width={80} title={t(p("jobInfoTable.nodes"))} /> - dataIndex="cores" width={80} title={t(p("jobInfoTable.cores"))} /> - dataIndex="gpus" width={90} title={t(p("jobInfoTable.gpus"))} /> - dataIndex="state" width={110} title={t(p("jobInfoTable.state"))} /> + + + dataIndex="account" + width="10%" + ellipsis + title={t(p("jobInfoTable.account"))} + /> + + + dataIndex="partition" + width="6.7%" + ellipsis + title={t(p("jobInfoTable.partition"))} + /> + dataIndex="qos" width="6.7%" ellipsis title={t(p("jobInfoTable.qos"))} /> + dataIndex="nodes" width="4.5%" title={t(p("jobInfoTable.nodes"))} /> + dataIndex="cores" width="4.5%" title={t(p("jobInfoTable.cores"))} /> + dataIndex="gpus" width="5%" title={t(p("jobInfoTable.gpus"))} /> + dataIndex="state" width="6.1%" title={t(p("jobInfoTable.state"))} /> dataIndex="nodesOrReason" - ellipsis={true} + ellipsis title={t(p("jobInfoTable.nodesOrReason"))} render={(d: string) => d.startsWith("(") && d.endsWith(")") ? d.substring(1, d.length - 1) : d} /> - dataIndex="timeLimit" width={120} title={t(p("jobInfoTable.timeLimit"))} /> + dataIndex="timeLimit" width="6.7%" title={t(p("jobInfoTable.timeLimit"))} /> title={t(p("jobInfoTable.more"))} - width={180} + width="10%" + fixed="right" render={(_, r) => ( Router.push(join("/files", r.cluster.id, r.workingDir))}>