Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(costcenter): supported for network #3870

Merged
merged 1 commit into from Sep 11, 2023
Merged

feat(costcenter): supported for network #3870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/providers/costcenter/public/locales/en/common.json
View file
Open in desktop
Expand Up @@ -34,6 +34,7 @@
"Type": "Type",
"CPU": "CPU",
"Memory": "Memory",
"Network": "Network",
"Storage": "Storage",
"Total Amount": "Total Amount",
"Transfer Amount": "Transfer Amount",
Expand Down
1 change: 1 addition & 0 deletions frontend/providers/costcenter/public/locales/zh/common.json
View file
Open in desktop
Expand Up @@ -36,6 +36,7 @@
"CPU": "CPU",
"Memory": "内存",
"Storage": "存储卷",
"Network": "网络",
"Total Amount": "总金额",
"Payment Result": "支付结果",
"Payment Successful": "支付成功",
Expand Down
7 changes: 4 additions & 3 deletions frontend/providers/costcenter/src/components/billing/billingTable.tsx
View file
Open in desktop
Expand Up @@ -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>
))}
Expand Down Expand Up @@ -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>
)}
Expand Down
6 changes: 3 additions & 3 deletions frontend/providers/costcenter/src/components/cost_overview/components/lineChart.tsx
View file
Open in desktop
Expand Up @@ -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([
Expand All @@ -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])) {
Expand Down
3 changes: 2 additions & 1 deletion frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx
View file
Open in desktop
Expand Up @@ -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%'],
Expand All @@ -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]
Expand Down
1 change: 1 addition & 0 deletions frontend/providers/costcenter/src/components/cost_overview/cost.tsx
View file
Open in desktop
Expand Up @@ -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 (
Expand Down
3 changes: 2 additions & 1 deletion frontend/providers/costcenter/src/components/valuation/predictCard.tsx
View file
Open in desktop
Expand Up @@ -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 });
Expand Down
3 changes: 2 additions & 1 deletion frontend/providers/costcenter/src/constants/billing.ts
View file
Open in desktop
Expand Up @@ -4,7 +4,8 @@ export const TableHeaders = [
'Type',
'CPU',
'Memory',
'Storage'
'Storage',
'Network'
// 'GPU',
// 'Total Amount'
] as const;
Expand Down
4 changes: 2 additions & 2 deletions frontend/providers/costcenter/src/constants/payment.ts
View file
Open in desktop
Expand Up @@ -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 }]
]);
5 changes: 4 additions & 1 deletion frontend/providers/costcenter/src/pages/api/billing/index.ts
View file
Open in desktop
Expand Up @@ -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]);
}
Expand All @@ -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) {
Expand Down
2 changes: 2 additions & 0 deletions frontend/providers/costcenter/src/pages/cost_overview/index.tsx
View file
Open in desktop
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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>();
Expand Down
4 changes: 4 additions & 0 deletions frontend/providers/costcenter/src/stores/billing.ts
View file
Open in desktop
Expand Up @@ -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) })
}));

Expand Down
3 changes: 2 additions & 1 deletion frontend/providers/costcenter/src/types/billing.ts
View file
Open in desktop
Expand Up @@ -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> = {
Expand Down