Skip to content

Commit

Permalink
feat(web): add app network traffic metering (#1894)
Browse files Browse the repository at this point in the history
feat(web): add app network traffic metering (#1894)

---------

Co-authored-by: HUAHUAI23 <lim@outlook.com>
  • Loading branch information
HUAHUAI23 and HUAHUAI23 authored Mar 7, 2024
1 parent ef30cd9 commit e9d012d
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 24 deletions.
11 changes: 11 additions & 0 deletions web/src/apis/v1/api-auto.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
32 changes: 32 additions & 0 deletions web/src/apis/v1/notification.ts
Original file line number Diff line number Diff line change
@@ -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,
});
}

21 changes: 20 additions & 1 deletion web/src/pages/app/setting/UserSetting/BillingDetails/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]")}>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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" : "",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]",
)}
>
Expand All @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ type price = {
memory: number;
databaseCapacity: number;
storageCapacity: number;
networkTraffic: number;
total: number;
};

Expand All @@ -27,6 +28,7 @@ export default function PricingStandards() {
memory: 0,
databaseCapacity: 0,
storageCapacity: 0,
networkTraffic: 0,
total: 0,
});

Expand All @@ -38,6 +40,7 @@ export default function PricingStandards() {
memory: 1024,
databaseCapacity: 1024,
storageCapacity: 1024,
networkTraffic: 1024, // 1G
regionId: regions && regions[0].bundles[0].regionId,
});
},
Expand All @@ -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 (
Expand Down
6 changes: 3 additions & 3 deletions web/src/pages/app/setting/UserSetting/Usage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion web/src/pages/app/setting/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down

0 comments on commit e9d012d

Please sign in to comment.