feat(web): add app network traffic metering (#1894)

feat(web): add app network traffic metering (#1894) --------- Co-authored-by: HUAHUAI23 <lim@outlook.com>
labring · Mar 7, 2024 · e9d012d · e9d012d
1 parent ef30cd9
commit e9d012d
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 24 deletions.
diff --git a/web/src/apis/v1/api-auto.d.ts b/web/src/apis/v1/api-auto.d.ts
@@ -215,6 +215,7 @@ declare namespace Definitions {
 
   export type Account = {
     _id?: string;
+    owedAt?: string /* The timestamp when the account became owed */;
     balance?: number;
     state?: string;
     createdAt?: string;
@@ -382,12 +383,14 @@ declare namespace Definitions {
     storageCapacity?: number;
     autoscaling?: Definitions.CreateAutoscalingDto;
     dedicatedDatabase?: Definitions.CreateDedicatedDatabaseDto;
+    networkTraffic?: number;
     regionId?: string;
   };
 
   export type CalculatePriceResultDto = {
     cpu?: number;
     memory?: number;
+    networkTraffic?: number;
     storageCapacity?: number;
     databaseCapacity?: number;
     total?: number;
@@ -1710,4 +1713,12 @@ declare namespace Paths {
 
     export type Responses = any;
   }
+
+  namespace NotificationControllerFindAll {
+    export type QueryParameters = any;
+
+    export type BodyParameters = any;
+
+    export type Responses = any;
+  }
 }
diff --git a/web/src/apis/v1/notification.ts b/web/src/apis/v1/notification.ts
@@ -0,0 +1,32 @@
+// @ts-ignore
+/* eslint-disable */
+///////////////////////////////////////////////////////////////////////
+//                                                                   //
+// this file is autogenerated by service-generate                    //
+// do not edit this file manually                                    //
+//                                                                   //
+///////////////////////////////////////////////////////////////////////
+/// <reference path = "api-auto.d.ts" />
+import request from '@/utils/request';
+import useGlobalStore from "@/pages/globalStore";
+
+/**
+* Get notification list
+*/
+export async function NotificationControllerFindAll(
+  params: Paths.NotificationControllerFindAll.BodyParameters,
+): Promise<{
+    error: string;
+    data: Paths.NotificationControllerFindAll.Responses
+}> {
+  // /v1/notification/list
+  let _params: { [key: string]: any } = {
+    appid: useGlobalStore.getState().currentApp?.appid || '',
+    ...params,
+  };
+  return request(`/v1/notification/list`, {
+    method: 'GET',
+    params : params,
+  });
+}
+
diff --git a/web/src/pages/app/setting/UserSetting/BillingDetails/index.tsx b/web/src/pages/app/setting/UserSetting/BillingDetails/index.tsx
@@ -90,7 +90,7 @@ export default function BillingDetails() {
         <p>{t("SettingPanel.BillingDetails")}</p>
       </div>
       <div className="mt-4 rounded border">
-        <TableContainer>
+        <TableContainer overflowX="auto">
           <Table variant="striped" colorScheme={darkMode ? "none" : "whiteAlpha"} size={"sm"}>
             <Thead>
               <Tr className={clsx("h-8", !darkMode && "bg-[#F4F6F8]")}>
@@ -222,6 +222,16 @@ export default function BillingDetails() {
                     {t("Spec.Storage")}
                   </span>
                 </Th>
+                <Th className="!px-0 !pl-2">
+                  <span
+                    className={clsx(
+                      "border-l pl-2 font-normal",
+                      darkMode ? "" : "text-grayModern-700",
+                    )}
+                  >
+                    {t("Spec.NetworkTraffic")}
+                  </span>
+                </Th>
                 <Th className="!px-0 !pl-2">
                   <span className="flex items-center">
                     <span
@@ -370,6 +380,15 @@ export default function BillingDetails() {
                     >
                       {item.detail?.storageCapacity?.amount}
                     </Td>
+                    <Td
+                      className={
+                        darkMode
+                          ? "!border-b-grayModern-600 !text-grayModern-200"
+                          : "text-grayModern-600"
+                      }
+                    >
+                      {item.detail?.networkTraffic?.amount}
+                    </Td>
                     <Td
                       className={clsx(
                         darkMode ? "!border-b-grayModern-600" : "",

diff --git a/web/src/pages/app/setting/UserSetting/PricingStandards/PricingCard.tsx b/web/src/pages/app/setting/UserSetting/PricingStandards/PricingCard.tsx
@@ -23,7 +23,7 @@ const PricingCard: React.FC<PricingCardProps> = ({ color, title, value }) => {
   return (
     <div
       className={clsx(
-        "mr-2 h-[256px] w-[180px] rounded-lg border border-grayModern-200",
+        "mr-2 h-[256px] w-[130px] rounded-lg border border-grayModern-200",
         !darkMode && "bg-[#F8FAFB]",
       )}
     >
@@ -32,26 +32,28 @@ const PricingCard: React.FC<PricingCardProps> = ({ color, title, value }) => {
           <div className={`h-3 w-3 ${color} mr-1`} />
           {title}
         </div>
-        <div className={clsx("pt-3 text-center text-[24px]", !darkMode && "text-grayModern-900")}>
+        <div className={clsx("pt-5 text-center text-[12px]", !darkMode && "text-grayModern-900")}>
           ￥ {value}
         </div>
         <div className={clsx("pb-5 text-center", !darkMode && "text-grayModern-900")}>
-          {title === "CPU" ? t("Core") : "G"}/{t("Hour")}
+          {title === "CPU" ? t("Core") : title === "出网流量" ? "1 GB" : "G"}
+          {title !== "出网流量" && `/${t("Hour")}`}
         </div>
-        {timeFrames.map(({ multiplier, label }) => (
-          <div
-            className={clsx(
-              "flex w-full justify-between border-t border-dotted py-[6px]",
-              !darkMode && "text-grayModern-600",
-            )}
-            key={label}
-          >
-            <span>￥ {(value * multiplier).toFixed(2)}</span>
-            <span>
-              {title === "CPU" ? t("Core") : "G"}/{label}
-            </span>
-          </div>
-        ))}
+        {title !== "出网流量" &&
+          timeFrames.map(({ multiplier, label }) => (
+            <div
+              className={clsx(
+                "flex w-full justify-between border-t border-dotted py-[6px]",
+                !darkMode && "text-grayModern-600",
+              )}
+              key={label}
+            >
+              <span>￥ {(value * multiplier).toFixed(2)}</span>
+              <span>
+                {title === "CPU" ? t("Core") : "G"}/{label}
+              </span>
+            </div>
+          ))}
       </div>
     </div>
   );

diff --git a/web/src/pages/app/setting/UserSetting/PricingStandards/index.tsx b/web/src/pages/app/setting/UserSetting/PricingStandards/index.tsx
@@ -15,6 +15,7 @@ type price = {
   memory: number;
   databaseCapacity: number;
   storageCapacity: number;
+  networkTraffic: number;
   total: number;
 };
 
@@ -27,6 +28,7 @@ export default function PricingStandards() {
     memory: 0,
     databaseCapacity: 0,
     storageCapacity: 0,
+    networkTraffic: 0,
     total: 0,
   });
 
@@ -38,6 +40,7 @@ export default function PricingStandards() {
         memory: 1024,
         databaseCapacity: 1024,
         storageCapacity: 1024,
+        networkTraffic: 1024, // 1G
         regionId: regions && regions[0].bundles[0].regionId,
       });
     },
@@ -48,13 +51,14 @@ export default function PricingStandards() {
     },
   );
 
-  const { cpu, memory, databaseCapacity, storageCapacity } = price;
+  const { cpu, memory, databaseCapacity, storageCapacity, networkTraffic } = price;
 
   const pricingData = [
     { color: "bg-primary-500", title: "CPU", value: cpu },
     { color: "bg-blue-600", title: "内存", value: memory },
-    { color: "bg-adora-600", title: "数据库", value: databaseCapacity },
+    { color: "bg-error-400", title: "数据库", value: databaseCapacity },
     { color: "bg-error-400", title: "云存储", value: storageCapacity },
+    { color: "bg-adora-600", title: "出网流量", value: networkTraffic },
   ];
 
   return (

diff --git a/web/src/pages/app/setting/UserSetting/Usage/index.tsx b/web/src/pages/app/setting/UserSetting/Usage/index.tsx
@@ -111,7 +111,7 @@ export default function Usage() {
           setEndTime={setEndTime}
         />
       </div>
-      <div className="flex pb-6 pl-8">
+      <div className="flex pb-6 pl-14">
         <div className="flex flex-col pr-4">
           <span>{t("SettingPanel.MyAccount")}</span>
           <div className="mt-3 flex h-36 w-[306px] flex-col justify-between rounded-lg bg-primary-500 px-6 text-white">
@@ -185,8 +185,8 @@ export default function Usage() {
           </div>
         </div>
       </div>
-      <span className="pl-8">{t("SettingPanel.CostTrend")}</span>
-      <div className="mt-3 h-[160px] w-[660px] pl-8">
+      <span className="pl-14">{t("SettingPanel.CostTrend")}</span>
+      <div className="mt-3 h-[160px] w-[660px] pl-12">
         {billingLoading ? (
           <Center className="h-full w-full">
             <Spinner />

diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
@@ -86,7 +86,7 @@ const SettingModal = (props: {
         })}
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
-        <ModalContent maxW={"80%"} width={"auto"} minW={1024}>
+        <ModalContent maxW={"80%"} width={"auto"} minW={1060}>
           <ModalCloseButton />
           <ModalBody py={2} minH={550} className="relative">
             <ModalCloseButton />