From f98921b205a9adeb087867ef43441b35ff5d5946 Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Mon, 11 Sep 2023 17:25:43 +0800
Subject: [PATCH] feat(costcenter): supported for network (#3870)
---
.../providers/costcenter/public/locales/en/common.json | 1 +
.../providers/costcenter/public/locales/zh/common.json | 1 +
.../costcenter/src/components/billing/billingTable.tsx | 7 ++++---
.../src/components/cost_overview/components/lineChart.tsx | 6 +++---
.../src/components/cost_overview/components/pieChart.tsx | 3 ++-
.../costcenter/src/components/cost_overview/cost.tsx | 1 +
.../costcenter/src/components/valuation/predictCard.tsx | 3 ++-
frontend/providers/costcenter/src/constants/billing.ts | 3 ++-
frontend/providers/costcenter/src/constants/payment.ts | 4 ++--
.../providers/costcenter/src/pages/api/billing/index.ts | 5 ++++-
.../providers/costcenter/src/pages/cost_overview/index.tsx | 2 ++
frontend/providers/costcenter/src/stores/billing.ts | 4 ++++
frontend/providers/costcenter/src/types/billing.ts | 3 ++-
13 files changed, 30 insertions(+), 13 deletions(-)
diff --git a/frontend/providers/costcenter/public/locales/en/common.json b/frontend/providers/costcenter/public/locales/en/common.json
index e1625f72a99..f2bc714feec 100644
--- a/frontend/providers/costcenter/public/locales/en/common.json
+++ b/frontend/providers/costcenter/public/locales/en/common.json
@@ -34,6 +34,7 @@
"Type": "Type",
"CPU": "CPU",
"Memory": "Memory",
+ "Network": "Network",
"Storage": "Storage",
"Total Amount": "Total Amount",
"Transfer Amount": "Transfer Amount",
diff --git a/frontend/providers/costcenter/public/locales/zh/common.json b/frontend/providers/costcenter/public/locales/zh/common.json
index 49736389646..8afaa5cbac5 100644
--- a/frontend/providers/costcenter/public/locales/zh/common.json
+++ b/frontend/providers/costcenter/public/locales/zh/common.json
@@ -36,6 +36,7 @@
"CPU": "CPU",
"Memory": "内存",
"Storage": "存储卷",
+ "Network": "网络",
"Total Amount": "总金额",
"Payment Result": "支付结果",
"Payment Successful": "支付成功",
diff --git a/frontend/providers/costcenter/src/components/billing/billingTable.tsx b/frontend/providers/costcenter/src/components/billing/billingTable.tsx
index dbacd6f9bb5..f9f9ef676eb 100644
--- a/frontend/providers/costcenter/src/components/billing/billingTable.tsx
+++ b/frontend/providers/costcenter/src/components/billing/billingTable.tsx
@@ -31,9 +31,9 @@ export function BillingTable({ data }: { data: BillingItem[] }) {
>
{t(item)}
- {['CPU', 'Gpu', 'Memory', 'Storage', 'Total Amount'].includes(item) && (
-
- )}
+ {['CPU', 'Gpu', 'Memory', 'Storage', 'Network', 'Total Amount'].includes(
+ item
+ ) && }
))}
@@ -89,6 +89,7 @@ export function BillingTable({ data }: { data: BillingItem[] }) {
| {!item.type ? {formatMoney(item.costs?.cpu || 0)} : '-'} |
{!item.type ? {formatMoney(item.costs?.memory || 0)} : '-'} |
{!item.type ? {formatMoney(item.costs?.storage || 0)} : '-'} |
+ {!item.type ? {formatMoney(item.costs?.network || 0)} : '-'} |
{gpuEnabled && (
{!item.type ? {formatMoney(item.costs?.gpu || 0)} : '-'} |
)}
diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/lineChart.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/lineChart.tsx
index 9b1efc51d2c..47bc0adee15 100644
--- a/frontend/providers/costcenter/src/components/cost_overview/components/lineChart.tsx
+++ b/frontend/providers/costcenter/src/components/cost_overview/components/lineChart.tsx
@@ -16,7 +16,6 @@ import { BillingItem } from '@/types/billing';
import { parseISO, format, isSameDay, startOfDay } from 'date-fns';
import { formatMoney } from '@/utils/format';
import { useTranslation } from 'next-i18next';
-import useBillingStore from '@/stores/billing';
import useOverviewStore from '@/stores/overview';
echarts.use([
@@ -37,15 +36,16 @@ export default function Trend({ data }: { data: BillingItem[] }) {
const sourceValue =
data
.filter((v) => v.type === 0)
- .map<[Date, number, number, number, number]>((item) => [
+ .map<[Date, number, number, number, number, number]>((item) => [
parseISO(item.time),
item.costs?.cpu || 0,
item.costs?.memory || 0,
item.costs?.storage || 0,
+ item.costs?.network || 0,
item.amount
])
// 归并为当天的开始
- .reduce<[Date, number, number, number, number][]>((pre, cur) => {
+ .reduce<[Date, number, number, number, number, number][]>((pre, cur) => {
if (pre.length !== 0) {
const precost = pre[pre.length - 1];
if (isSameDay(precost[0], cur[0])) {
diff --git a/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx b/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx
index 0bb47d9ca7f..dcf5fa1ae5f 100644
--- a/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx
+++ b/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx
@@ -22,7 +22,7 @@ echarts.use([
export default function CostChart({ data }: { data: BillingData['status']['deductionAmount'] }) {
const { t } = useTranslation();
- const { cpu = 0, memory = 0, storage = 0, gpu = 0 } = data;
+ const { cpu = 0, memory = 0, storage = 0, gpu = 0, network = 0 } = data;
const gpuEnabled = useEnvStore((state) => state.gpuEnabled);
const radius = useBreakpointValue({
xl: ['45%', '70%'],
@@ -42,6 +42,7 @@ export default function CostChart({ data }: { data: BillingData['status']['deduc
['cpu', formatMoney(cpu).toFixed(2)],
['memory', formatMoney(memory).toFixed(2)],
['storage', formatMoney(storage).toFixed(2)],
+ ['network', formatMoney(network).toFixed(2)],
...(gpuEnabled ? [['gpu', formatMoney(gpu).toFixed(2)]] : [])
],
[cpu, memory, storage, gpu, gpuEnabled]
diff --git a/frontend/providers/costcenter/src/components/cost_overview/cost.tsx b/frontend/providers/costcenter/src/components/cost_overview/cost.tsx
index b3335c20b15..5ecb752a861 100644
--- a/frontend/providers/costcenter/src/components/cost_overview/cost.tsx
+++ b/frontend/providers/costcenter/src/components/cost_overview/cost.tsx
@@ -15,6 +15,7 @@ export const Cost = memo(function Cost() {
cpu: _deduction?.cpu || 0,
memory: _deduction?.memory || 0,
storage: _deduction?.storage || 0,
+ network: _deduction?.network || 0,
gpu: _deduction?.gpu || 0
};
return (
diff --git a/frontend/providers/costcenter/src/components/valuation/predictCard.tsx b/frontend/providers/costcenter/src/components/valuation/predictCard.tsx
index 6dca2eff335..232736adcbd 100644
--- a/frontend/providers/costcenter/src/components/valuation/predictCard.tsx
+++ b/frontend/providers/costcenter/src/components/valuation/predictCard.tsx
@@ -15,7 +15,8 @@ export default function PredictCard() {
const origin = [
{ name: 'CPU', cost: state.cpu },
{ name: 'Memory', cost: state.memory },
- { name: 'Storage', cost: state.storage }
+ { name: 'Storage', cost: state.storage },
+ { name: 'Network', cost: state.network }
];
if (!gpuEnabled) {
origin.push({ name: total, cost: state.cpu + state.memory + state.storage });
diff --git a/frontend/providers/costcenter/src/constants/billing.ts b/frontend/providers/costcenter/src/constants/billing.ts
index efe3f98f222..cee9f747ed1 100644
--- a/frontend/providers/costcenter/src/constants/billing.ts
+++ b/frontend/providers/costcenter/src/constants/billing.ts
@@ -4,7 +4,8 @@ export const TableHeaders = [
'Type',
'CPU',
'Memory',
- 'Storage'
+ 'Storage',
+ 'Network'
// 'GPU',
// 'Total Amount'
] as const;
diff --git a/frontend/providers/costcenter/src/constants/payment.ts b/frontend/providers/costcenter/src/constants/payment.ts
index d008570dafc..9c0783e9503 100644
--- a/frontend/providers/costcenter/src/constants/payment.ts
+++ b/frontend/providers/costcenter/src/constants/payment.ts
@@ -91,6 +91,6 @@ export const valuationMap = new Map([
['cpu', { unit: 'Core', scale: 1000, bg: '#33BABB', idx: 0 }],
['memory', { unit: 'GB', scale: 1024, bg: '#36ADEF', idx: 1 }],
['storage', { unit: 'GB', scale: 1024, bg: '#8172D8', idx: 2 }],
- ['gpu', { unit: 'GPU', scale: 1000, bg: '#89CD11', idx: 3 }]
- // ['network', { unit: 'M', scale: 1, bg: '#89CD11', idx: 4 }]
+ ['gpu', { unit: 'GPU', scale: 1000, bg: '#89CD11', idx: 3 }],
+ ['network', { unit: 'M', scale: 1, bg: '#89CD11', idx: 4 }]
]);
diff --git a/frontend/providers/costcenter/src/pages/api/billing/index.ts b/frontend/providers/costcenter/src/pages/api/billing/index.ts
index acb70802f0a..e98db87fbe1 100644
--- a/frontend/providers/costcenter/src/pages/api/billing/index.ts
+++ b/frontend/providers/costcenter/src/pages/api/billing/index.ts
@@ -13,6 +13,7 @@ const convertGpu = (_deduction?: RawCosts) =>
if (cur[0] === 'cpu') pre.cpu = cur[1];
else if (cur[0] === 'memory') pre.memory = cur[1];
else if (cur[0] === 'storage') pre.storage = cur[1];
+ else if (cur[0] === 'network') pre.network = cur[1];
else if (cur[0].startsWith('gpu-')) {
typeof pre.gpu === 'number' && (pre.gpu += cur[1]);
}
@@ -22,13 +23,15 @@ const convertGpu = (_deduction?: RawCosts) =>
cpu: 0,
memory: 0,
storage: 0,
- gpu: 0
+ gpu: 0,
+ network: 0
}
)
: {
cpu: 0,
memory: 0,
storage: 0,
+ network: 0,
gpu: 0
};
export default async function handler(req: NextApiRequest, resp: NextApiResponse) {
diff --git a/frontend/providers/costcenter/src/pages/cost_overview/index.tsx b/frontend/providers/costcenter/src/pages/cost_overview/index.tsx
index 2faa8210c2f..b1b5cb2940f 100644
--- a/frontend/providers/costcenter/src/pages/cost_overview/index.tsx
+++ b/frontend/providers/costcenter/src/pages/cost_overview/index.tsx
@@ -26,6 +26,7 @@ function CostOverview() {
const updateCPU = useBillingStore((state) => state.updateCpu);
const updateMemory = useBillingStore((state) => state.updateMemory);
const updateStorage = useBillingStore((state) => state.updateStorage);
+ const updateNetwork = useBillingStore((state) => state.updateNetwork);
const updateGpu = useBillingStore((state) => state.updateGpu);
const cookie = getCookie('NEXT_LOCALE');
useEffect(() => {
@@ -75,6 +76,7 @@ function CostOverview() {
updateCPU(item?.cpu || 0);
updateMemory(item?.memory || 0);
updateStorage(item?.storage || 0);
+ updateNetwork(item?.network || 0);
updateGpu(item?.gpu || 0);
}, [costBillingItems, updateCPU, updateMemory, updateStorage]);
const rechargeRef = useRef();
diff --git a/frontend/providers/costcenter/src/stores/billing.ts b/frontend/providers/costcenter/src/stores/billing.ts
index aed8ff4a0e8..30c897fa665 100644
--- a/frontend/providers/costcenter/src/stores/billing.ts
+++ b/frontend/providers/costcenter/src/stores/billing.ts
@@ -4,10 +4,12 @@ type BillingState = {
cpu: number;
memory: number;
storage: number;
+ network: number;
gpu: number;
updateCpu: (cpu: number) => void;
updateMemory: (memory: number) => void;
updateStorage: (storage: number) => void;
+ updateNetwork: (network: number) => void;
updateGpu: (gpu: number) => void;
};
const useBillingStore = create((set) => ({
@@ -15,9 +17,11 @@ const useBillingStore = create((set) => ({
memory: 0,
storage: 0,
gpu: 0,
+ network: 0,
updateCpu: (cpu: number) => set({ cpu: formatMoney(cpu) }),
updateMemory: (memory: number) => set({ memory: formatMoney(memory) }),
updateStorage: (storage: number) => set({ storage: formatMoney(storage) }),
+ updateNetwork: (network: number) => set({ network: formatMoney(network) }),
updateGpu: (gpu: number) => set({ gpu: formatMoney(gpu) })
}));
diff --git a/frontend/providers/costcenter/src/types/billing.ts b/frontend/providers/costcenter/src/types/billing.ts
index 471ce001731..4af186ebe87 100644
--- a/frontend/providers/costcenter/src/types/billing.ts
+++ b/frontend/providers/costcenter/src/types/billing.ts
@@ -10,11 +10,12 @@ export type BillingSpec =
| {
orderID: string; //如果给定orderId，则查找该id的值，该值为唯一值，因此当orderId给定时忽略其他查找限定值
};
-export type RawCosts = Record<'cpu' | 'memory' | 'storage' | `gpu-${string}`, number>;
+export type RawCosts = Record<'network' | 'cpu' | 'memory' | 'storage' | `gpu-${string}`, number>;
export type Costs = {
cpu: number;
memory: number;
storage: number;
+ network: number;
gpu?: number;
};
export type BillingItem = {