feat(costcenter): supported for network (#3870)

labring · Sep 11, 2023 · f98921b · f98921b
1 parent 987fb12
commit f98921b
Show file tree

Hide file tree

Showing 13 changed files with 30 additions and 13 deletions.
diff --git 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
@@ -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
@@ -31,9 +31,9 @@ export function BillingTable({ data }: { data: BillingItem[] }) {
               >
                 <Flex display={'flex'} alignItems={'center'}>
                   <Text mr="4px">{t(item)}</Text>
-                  {['CPU', 'Gpu', 'Memory', 'Storage', 'Total Amount'].includes(item) && (
-                    <CurrencySymbol type={currency} />
-                  )}
+                  {['CPU', 'Gpu', 'Memory', 'Storage', 'Network', 'Total Amount'].includes(
+                    item
+                  ) && <CurrencySymbol type={currency} />}
                 </Flex>
               </Th>
             ))}
@@ -89,6 +89,7 @@ export function BillingTable({ data }: { data: BillingItem[] }) {
                   <Td>{!item.type ? <span>{formatMoney(item.costs?.cpu || 0)}</span> : '-'}</Td>
                   <Td>{!item.type ? <span>{formatMoney(item.costs?.memory || 0)}</span> : '-'}</Td>
                   <Td>{!item.type ? <span>{formatMoney(item.costs?.storage || 0)}</span> : '-'}</Td>
+                  <Td>{!item.type ? <span>{formatMoney(item.costs?.network || 0)}</span> : '-'}</Td>
                   {gpuEnabled && (
                     <Td>{!item.type ? <span>{formatMoney(item.costs?.gpu || 0)}</span> : '-'}</Td>
                   )}

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<any>();

diff --git a/frontend/providers/costcenter/src/stores/billing.ts b/frontend/providers/costcenter/src/stores/billing.ts
@@ -4,20 +4,24 @@ 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<BillingState>((set) => ({
   cpu: 0,
   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
@@ -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<T = Costs> = {