diff --git a/frontend/providers/costcenter/src/components/billing/AmountDisplay.tsx b/frontend/providers/costcenter/src/components/billing/AmountDisplay.tsx index 156f4db2a..adaa9f428 100644 --- a/frontend/providers/costcenter/src/components/billing/AmountDisplay.tsx +++ b/frontend/providers/costcenter/src/components/billing/AmountDisplay.tsx @@ -1,26 +1,24 @@ import { useQuery } from '@tanstack/react-query'; import request from '@/service/request'; -import { ApiResp } from '@/types'; import { deFormatMoney, formatMoney } from '@/utils/format'; import { useTranslation } from 'next-i18next'; import { Text, Box, Flex } from '@chakra-ui/react'; import CurrencySymbol from '@/components/CurrencySymbol'; import useOverviewStore from '@/stores/overview'; +import useBillingStore from '@/stores/billing'; export default function AmountDisplay() { - // const {data} = useQuery({ - // queryKey: ['getAccount'], - // queryFn: () => - // request>('/api/account/getAmount') - // }); const startTime = useOverviewStore((s) => s.startTime); const endTime = useOverviewStore((s) => s.endTime); + const { namespace, appType } = useBillingStore(); const { data, isSuccess } = useQuery({ - queryKey: ['billing', 'buget', { startTime, endTime }], + queryKey: ['billing', 'buget', { startTime, endTime, appType, namespace }], queryFn: () => { return request.post<{ amount: number }[]>('/api/billing/buget', { startTime, - endTime + endTime, + appType, + namespace }); } }); diff --git a/frontend/providers/costcenter/src/components/billing/AppMenu.tsx b/frontend/providers/costcenter/src/components/billing/AppMenu.tsx index 0eb38a48d..731fa0979 100644 --- a/frontend/providers/costcenter/src/components/billing/AppMenu.tsx +++ b/frontend/providers/costcenter/src/components/billing/AppMenu.tsx @@ -1,4 +1,5 @@ import request from '@/service/request'; +import useBillingStore from '@/stores/billing'; import { ApiResp } from '@/types'; import { Button, @@ -15,11 +16,9 @@ import { useState } from 'react'; export default function AppMenu({ isDisabled, - setApp, ...props }: { isDisabled: boolean; - setApp: (x: string) => void; } & FlexProps) { const [appIdx, setAppIdx] = useState(0); const { data } = useQuery({ @@ -28,6 +27,7 @@ export default function AppMenu({ }, queryKey: ['appList'] }); + const { setAppType } = useBillingStore(); const { isOpen, onClose, onOpen } = useDisclosure(); const { t } = useTranslation(); const appList: string[] = [t('All APP'), ...(data?.data?.appList || [])]; @@ -88,7 +88,7 @@ export default function AppMenu({ isDisabled={isDisabled} onClick={() => { setAppIdx(idx); - setApp(idx === 0 ? '' : appList[idx]); + setAppType(idx === 0 ? '' : appList[idx]); onClose(); }} // _hover={{ diff --git a/frontend/providers/costcenter/src/components/billing/InOutTabPanel.tsx b/frontend/providers/costcenter/src/components/billing/InOutTabPanel.tsx index a122becc2..1ea49fad8 100644 --- a/frontend/providers/costcenter/src/components/billing/InOutTabPanel.tsx +++ b/frontend/providers/costcenter/src/components/billing/InOutTabPanel.tsx @@ -1,5 +1,5 @@ import useOverviewStore from '@/stores/overview'; -import { memo, useEffect, useState } from 'react'; +import { memo, useContext, useEffect, useState } from 'react'; import { BillingData, BillingSpec, BillingType } from '@/types'; import { useQuery } from '@tanstack/react-query'; import { formatISO } from 'date-fns'; @@ -12,9 +12,9 @@ import SearchBox from '@/components/billing/SearchBox'; import { CommonBillingTable } from '@/components/billing/billingTable'; import AmountDisplay from '@/components/billing/AmountDisplay'; import SwitchPage from '@/components/billing/SwitchPage'; -import NotFound from '../notFound'; +import useBillingStore from '@/stores/billing'; -export default function InOutTabPanel({ namespace }: { namespace: string }) { +export default function InOutTabPanel() { const startTime = useOverviewStore((state) => state.startTime); const endTime = useOverviewStore((state) => state.endTime); const [selectType, setType] = useState(BillingType.ALL); @@ -23,7 +23,7 @@ export default function InOutTabPanel({ namespace }: { namespace: string }) { const [currentPage, setcurrentPage] = useState(1); const [pageSize, setPageSize] = useState(10); const [totalItem, setTotalItem] = useState(10); - const [appType, setApp] = useState(''); + const { namespace, appType } = useBillingStore(); useEffect(() => { setcurrentPage(1); }, [startTime, endTime, selectType, namespace]); @@ -74,7 +74,7 @@ export default function InOutTabPanel({ namespace }: { namespace: string }) { {t('APP Type')} - + diff --git a/frontend/providers/costcenter/src/components/billing/NamespaceMenu.tsx b/frontend/providers/costcenter/src/components/billing/NamespaceMenu.tsx index 87369cd5f..753fea91d 100644 --- a/frontend/providers/costcenter/src/components/billing/NamespaceMenu.tsx +++ b/frontend/providers/costcenter/src/components/billing/NamespaceMenu.tsx @@ -1,20 +1,16 @@ import request from '@/service/request'; +import useBillingStore from '@/stores/billing'; import useOverviewStore from '@/stores/overview'; import { Button, Flex, Popover, PopoverContent, PopoverTrigger } from '@chakra-ui/react'; import { useQuery } from '@tanstack/react-query'; import { useTranslation } from 'next-i18next'; import { useState } from 'react'; -export default function NamespaceMenu({ - isDisabled, - setNamespace -}: { - isDisabled: boolean; - setNamespace: (x: string) => void; -}) { +export default function NamespaceMenu({ isDisabled }: { isDisabled: boolean }) { const startTime = useOverviewStore((s) => s.startTime); const endTime = useOverviewStore((s) => s.endTime); const [namespaceIdx, setNamespaceIdx] = useState(0); + const { setNamespace } = useBillingStore(); const { data: nsListData } = useQuery({ queryFn() { return request.post('/api/billing/getNamespaceList', { diff --git a/frontend/providers/costcenter/src/components/billing/RechargeTabPanel.tsx b/frontend/providers/costcenter/src/components/billing/RechargeTabPanel.tsx index 40840d95b..1de43ba86 100644 --- a/frontend/providers/costcenter/src/components/billing/RechargeTabPanel.tsx +++ b/frontend/providers/costcenter/src/components/billing/RechargeTabPanel.tsx @@ -1,5 +1,5 @@ import useOverviewStore from '@/stores/overview'; -import { useEffect, useMemo, useRef, useState } from 'react'; +import { useContext, useEffect, useMemo, useRef, useState } from 'react'; import { CellContext, createColumnHelper, diff --git a/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx b/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx index 938eaab64..dabef1f5e 100644 --- a/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx +++ b/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx @@ -1,5 +1,5 @@ import useOverviewStore from '@/stores/overview'; -import { useEffect, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { BillingData, BillingSpec, BillingType } from '@/types'; import { useQuery } from '@tanstack/react-query'; import { formatISO } from 'date-fns'; @@ -12,8 +12,9 @@ import SearchBox from '@/components/billing/SearchBox'; import { TransferBillingTable } from '@/components/billing/billingTable'; import SwitchPage from '@/components/billing/SwitchPage'; import NotFound from '../notFound'; +import useBillingStore from '@/stores/billing'; -export default function TransferTabPanel({ namespace }: { namespace: string }) { +export default function TransferTabPanel() { const startTime = useOverviewStore((state) => state.startTime); const endTime = useOverviewStore((state) => state.endTime); const [selectType, setType] = useState(BillingType.ALL); @@ -22,6 +23,7 @@ export default function TransferTabPanel({ namespace }: { namespace: string }) { const [currentPage, setcurrentPage] = useState(1); const [pageSize, setPageSize] = useState(10); const [totalItem, setTotalItem] = useState(10); + const { namespace } = useBillingStore(); useEffect(() => { setcurrentPage(1); }, [startTime, endTime, selectType, namespace]); 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 756f3a851..001f0aa56 100644 --- a/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx +++ b/frontend/providers/costcenter/src/components/cost_overview/components/pieChart.tsx @@ -7,7 +7,7 @@ import { CanvasRenderer } from 'echarts/renderers'; import { formatMoney } from '@/utils/format'; import { useMemo } from 'react'; import { useBreakpointValue } from '@chakra-ui/react'; -import { BillingData } from '@/types/billing'; +import { BillingData, Costs } from '@/types/billing'; import { useTranslation } from 'next-i18next'; import useEnvStore from '@/stores/env'; import { @@ -28,7 +28,7 @@ echarts.use([ DatasetComponent ]); -export default function CostChart({ data }: { data: BillingData['status']['deductionAmount'] }) { +export default function CostChart({ data }: { data: Costs }) { const { t } = useTranslation(); const { cpu = 0, memory = 0, storage = 0, gpu = 0, network = 0, port = 0 } = data; const gpuEnabled = useEnvStore((state) => state.gpuEnabled); diff --git a/frontend/providers/costcenter/src/pages/api/billing/buget.ts b/frontend/providers/costcenter/src/pages/api/billing/buget.ts index ba3239319..6311fe3f9 100644 --- a/frontend/providers/costcenter/src/pages/api/billing/buget.ts +++ b/frontend/providers/costcenter/src/pages/api/billing/buget.ts @@ -8,9 +8,11 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse if (user === null) { return jsonRes(resp, { code: 403, message: 'user null' }); } - const { endTime, startTime } = req.body as { + const { endTime, startTime, appType, namespace } = req.body as { endTime?: Date; startTime?: Date; + appType?: string; + namespace?: string; }; if (!endTime) return jsonRes(resp, { @@ -20,7 +22,7 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse if (!startTime) return jsonRes(resp, { code: 400, - message: 'endTime is invalid' + message: 'startTime is invalid' }); const consumptionUrl = process.env.BILLING_URI + '/account/v1alpha1/costs/consumption'; const rechagreUrl = process.env.BILLING_URI + '/account/v1alpha1/costs/recharge'; @@ -33,6 +35,8 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse endTime, kubeConfig: kc.exportConfig(), owner: user.name, + appType, + namespace, startTime }) }) @@ -44,7 +48,7 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse endTime, kubeConfig: kc.exportConfig(), owner: user.name, - startTime + appType }) }) ).json() diff --git a/frontend/providers/costcenter/src/pages/api/billing/getAppList.ts b/frontend/providers/costcenter/src/pages/api/billing/getAppList.ts index 039aca5d7..eea1f6e20 100644 --- a/frontend/providers/costcenter/src/pages/api/billing/getAppList.ts +++ b/frontend/providers/costcenter/src/pages/api/billing/getAppList.ts @@ -11,7 +11,7 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse if (user === null) { return jsonRes(resp, { code: 403, message: 'user null' }); } - const namespace = kc.getContexts()[0].namespace || GetUserDefaultNameSpace(user.name); + const namespace = GetUserDefaultNameSpace(user.name); const name = new Date().getTime() + 'appquery'; const crdSchema = { apiVersion: `account.sealos.io/v1`, diff --git a/frontend/providers/costcenter/src/pages/api/billing/index.ts b/frontend/providers/costcenter/src/pages/api/billing/index.ts index 3d2555e2a..9f677dca8 100644 --- a/frontend/providers/costcenter/src/pages/api/billing/index.ts +++ b/frontend/providers/costcenter/src/pages/api/billing/index.ts @@ -82,7 +82,8 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse ...v, costs: convertGpu(v?.costs) })) || []; - const deductionAmount = convertGpu(crd?.body?.status?.deductionAmount); + const deductionAmount = crd.body.status.deductionAmount || 0; + // convertGpu(crd?.body?.status?.deductionAmount); return jsonRes(resp, { code: 200, data: { diff --git a/frontend/providers/costcenter/src/pages/billing/index.tsx b/frontend/providers/costcenter/src/pages/billing/index.tsx index e98e5a47b..c7d14c4dc 100644 --- a/frontend/providers/costcenter/src/pages/billing/index.tsx +++ b/frontend/providers/costcenter/src/pages/billing/index.tsx @@ -1,5 +1,5 @@ import { Flex, Heading, Img, Tab, TabList, TabPanels, Tabs } from '@chakra-ui/react'; -import { useState } from 'react'; +import { createContext, useMemo, useState } from 'react'; import receipt_icon from '@/assert/receipt_long_black.svg'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { useTranslation } from 'next-i18next'; @@ -7,16 +7,16 @@ import NamespaceMenu from '@/components/billing/NamespaceMenu'; import RechargeTabPanel from '@/components/billing/RechargeTabPanel'; import InOutTabPanel from '@/components/billing/InOutTabPanel'; import TransferTabPanel from '@/components/billing/TransferTabPnel'; - +import useBillingStore from '@/stores/billing'; function Billing() { const { t } = useTranslation(); - const [namespace, setNamespace] = useState(''); + const { setNamespace } = useBillingStore(); return ( {t('SideBar.BillingDetails')} - + @@ -46,9 +46,9 @@ function Billing() { - + - + diff --git a/frontend/providers/costcenter/src/stores/billing.ts b/frontend/providers/costcenter/src/stores/billing.ts index 30c897fa6..eaca9da33 100644 --- a/frontend/providers/costcenter/src/stores/billing.ts +++ b/frontend/providers/costcenter/src/stores/billing.ts @@ -6,6 +6,10 @@ type BillingState = { storage: number; network: number; gpu: number; + namespace: string; + appType: string; + setAppType: (appType: string) => void; + setNamespace: (namespace: string) => void; updateCpu: (cpu: number) => void; updateMemory: (memory: number) => void; updateStorage: (storage: number) => void; @@ -18,6 +22,14 @@ const useBillingStore = create((set) => ({ storage: 0, gpu: 0, network: 0, + namespace: '', + appType: '', + setAppType(appType: string) { + set({ appType }); + }, + setNamespace(namespace: string) { + set({ namespace }); + }, updateCpu: (cpu: number) => set({ cpu: formatMoney(cpu) }), updateMemory: (memory: number) => set({ memory: formatMoney(memory) }), updateStorage: (storage: number) => set({ storage: formatMoney(storage) }), diff --git a/frontend/providers/costcenter/src/types/billing.ts b/frontend/providers/costcenter/src/types/billing.ts index a218db509..876522970 100644 --- a/frontend/providers/costcenter/src/types/billing.ts +++ b/frontend/providers/costcenter/src/types/billing.ts @@ -52,7 +52,7 @@ export type BillingData = { metadata: any; spec: BillingSpec; status: { - deductionAmount: T; + deductionAmount: number; item: BillingItem[]; pageLength: number; totalCount: number; diff --git a/frontend/providers/workorder/next-i18next.config.js b/frontend/providers/workorder/next-i18next.config.js index 1a032fe9e..8dca5135f 100644 --- a/frontend/providers/workorder/next-i18next.config.js +++ b/frontend/providers/workorder/next-i18next.config.js @@ -9,4 +9,4 @@ module.exports = { locales: ['en', 'zh'], localeDetection: false } -} +}; diff --git a/frontend/providers/workorder/next.config.js b/frontend/providers/workorder/next.config.js index a7dce48a9..86cbbb49c 100644 --- a/frontend/providers/workorder/next.config.js +++ b/frontend/providers/workorder/next.config.js @@ -1,6 +1,6 @@ /** @type {import('next').NextConfig} */ -const { i18n } = require('./next-i18next.config') -const path = require('path') +const { i18n } = require('./next-i18next.config'); +const path = require('path'); const nextConfig = { i18n, @@ -14,15 +14,15 @@ const nextConfig = { issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'] } - ]) - config.plugins = [...config.plugins] - return config + ]); + config.plugins = [...config.plugins]; + return config; }, transpilePackages: ['@sealos/ui', 'sealos-desktop-sdk', '@sealos/driver'], experimental: { // this includes files from the monorepo base two directories up outputFileTracingRoot: path.join(__dirname, '../../') } -} +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/frontend/providers/workorder/tsconfig.json b/frontend/providers/workorder/tsconfig.json index 0eef8192c..f2bc03096 100644 --- a/frontend/providers/workorder/tsconfig.json +++ b/frontend/providers/workorder/tsconfig.json @@ -1,21 +1,11 @@ { "compilerOptions": { - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "baseUrl": ".", "paths": { - "@/*": [ - "./src/*" - ] + "@/*": ["./src/*"] } }, - "include": [ - "next-env.d.ts", - "src/**/*.ts", - "src/**/*.tsx" - ], + "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"], "extends": "../../tsconfig.web.json" -} \ No newline at end of file +}