fix(mis-web): 管理系统用户空间下分区信息中计量方式显示错误 (#780)

### 问题管理系统下用户空间的分区信息中没有显示正确的计量方式的文字描述字符串 ![image](https://github.com/PKUHPC/SCOW/assets/43978285/0a166bc5-dfb9-4a06-a5e0-b078fe74523a) 此PR修改为与作业价格表中的计量方式显示一致，修改为计量方式文字及icon说明的形式 ### 修改后 ![image](https://github.com/PKUHPC/SCOW/assets/43978285/f0ac2b69-3926-4d28-b1ec-613dbf7df4ae) ![image](https://github.com/PKUHPC/SCOW/assets/43978285/233512c9-8efa-4ac6-b6d7-fbeeb079b9dc)
PKUHPC · Aug 4, 2023 · 4b12bed · 4b12bed
1 parent c09807f
commit 4b12bed
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 33 deletions.
diff --git a/.changeset/soft-beers-unite.md b/.changeset/soft-beers-unite.md
@@ -0,0 +1,5 @@
+---
+"@scow/mis-web": patch
+---
+
+修改管理系统用户空间集群分区的计量方式显示，修改为与作业价格表中显示方式一致
diff --git a/apps/mis-web/src/components/AmonutStrategyDescriptionsItem.tsx b/apps/mis-web/src/components/AmonutStrategyDescriptionsItem.tsx
@@ -0,0 +1,63 @@
+/**
+ * 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.
+ */
+
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import { Popover, Space } from "antd";
+import React from "react";
+import { AmountStrategyAlgorithmDescriptions,
+  AmountStrategyDescription, AmountStrategyDescriptions, AmountStrategyText } from "src/models/job";
+
+
+interface Props {
+  isColContent?: boolean;
+  amount?: string;
+  isColTitle?: boolean;
+}
+
+export const AmountStrategyDescriptionsItem: React.FC<Props> = ({
+  amount, isColTitle, isColContent,
+}) => {
+
+  if (isColContent && amount) {
+    return (
+      <Space>
+        {AmountStrategyDescriptions[amount]}
+        <Popover
+          title={`${AmountStrategyAlgorithmDescriptions[amount]}`}
+        >
+          <QuestionCircleOutlined />
+        </Popover>
+      </Space>
+    );
+  }
+  if (isColTitle) {
+    return (
+      <Space>
+        {AmountStrategyText}
+        <Popover
+          title={AmountStrategyDescription}
+          content={(
+            <div>
+              <p>
+                {Object.entries(AmountStrategyDescriptions)
+                  .map((value) => <p key={value[0]}>{`${value[1]}(${value[0]})`}</p>)}
+              </p>
+              <a href="https://pkuhpc.github.io/SCOW/docs/info/mis/business/billing">{"细节请查阅文档"}</a>
+            </div>
+          )}
+        >
+          <QuestionCircleOutlined />
+        </Popover>
+      </Space>
+    );
+  }
+};
diff --git a/apps/mis-web/src/components/JobBillingTable.tsx b/apps/mis-web/src/components/JobBillingTable.tsx
@@ -12,9 +12,10 @@
 
 import { Table } from "antd";
 import { ColumnsType } from "antd/es/table";
-import { AmountStrategyText } from "src/models/job";
 import { publicConfig } from "src/utils/config";
 
+import { AmountStrategyDescriptionsItem } from "./AmonutStrategyDescriptionsItem";
+
 export interface JobBillingTableItem {
   index: number;
 
@@ -92,9 +93,20 @@ export const JobBillingTable: React.FC<Props> = ({ data, loading }) => {
     { dataIndex: "price", title: "单价（元）", key: "index", render: (_, r) => ({
       children: r.priceItem?.price ?? "未定义",
     }) },
-    { dataIndex: "amount", title: AmountStrategyText, key: "index", render: (_, r) => ({
-      children: r.priceItem?.amount ?? "未定义",
-    }) },
+    {
+      dataIndex: "amount",
+      title: (
+        <AmountStrategyDescriptionsItem isColTitle={true} />
+      ),
+      key: "index",
+      render: (_, r) => ({
+        children: (
+          r.priceItem?.amount ? (
+            <AmountStrategyDescriptionsItem isColContent={true} amount={r.priceItem?.amount} />
+          ) : "未定义"
+        ),
+      }),
+    },
     { dataIndex: "comment", title: "说明", key: "index", render: (_, r) => ({
       children: r.comment,
       props: { rowSpan: r.partitionItemIndex === 0 ? r.qosCount : 0 },

diff --git a/apps/mis-web/src/pageComponents/job/ManageJobBillingTable.tsx b/apps/mis-web/src/pageComponents/job/ManageJobBillingTable.tsx
@@ -16,6 +16,7 @@ import { Money } from "@scow/protos/build/common/money";
 import { App, Form, Input, InputNumber, Modal, Popover, Select, Space, Table, Tooltip } from "antd";
 import React, { useState } from "react";
 import { api } from "src/apis";
+import { AmountStrategyDescriptionsItem } from "src/components/AmonutStrategyDescriptionsItem";
 import { CommonModalProps, ModalLink } from "src/components/ModalLink";
 import { AmountStrategy, AmountStrategyAlgorithmDescriptions,
   AmountStrategyDescription,
@@ -71,12 +72,7 @@ export const ManageJobBillingTable: React.FC<Props> = ({ data, loading, tenant,
               dataIndex={["priceItem", "amountStrategy"]}
               render={(value) => {
                 return (
-                  <Space>
-                    {AmountStrategyDescriptions[value]}
-                    <Popover title={`${AmountStrategyAlgorithmDescriptions[value]}`}>
-                      <QuestionCircleOutlined />
-                    </Popover>
-                  </Space>
+                  <AmountStrategyDescriptionsItem isColContent={true} amount={value} />
                 );
               }}
             />
@@ -114,35 +110,14 @@ export const ManageJobBillingTable: React.FC<Props> = ({ data, loading, tenant,
       <Table.Column title="计费价格编号" dataIndex={["priceItem", "itemId"]} />
       <Table.Column
         title={(
-          <Space>
-            {AmountStrategyText}
-            <Popover
-              title={AmountStrategyDescription}
-              content={(
-                <div>
-                  <p>
-                    {Object.entries(AmountStrategyDescriptions)
-                      .map((value) => <p key={value[0]}>{`${value[1]}(${value[0]})`}</p>)}
-                  </p>
-                  <a href="https://pkuhpc.github.io/SCOW/docs/info/mis/business/billing">{"细节请查阅文档"}</a>
-                </div>
-              )}
-            >
-              <QuestionCircleOutlined />
-            </Popover>
-          </Space>
+          <AmountStrategyDescriptionsItem isColTitle={true} />
         )}
         dataIndex={["priceItem", "amountStrategy"]}
         render={(value) => {
           return (
             value ?
               (
-                <Space>
-                  {AmountStrategyDescriptions[value]}
-                  <Popover title={`${AmountStrategyAlgorithmDescriptions[value]}`}>
-                    <QuestionCircleOutlined />
-                  </Popover>
-                </Space>
+                <AmountStrategyDescriptionsItem isColContent={true} amount={value} />
               ) : undefined
           );
         }}