feat(costcenter):measure by app

frontend/providers/costcenter/public/locales/en/common.json

@@ -73,6 +73,7 @@
   "GPU Unit": "Card",
   "Gpu valuation": "GPU Price Table",
   "common valuation": "Price Table",
+  "Billing Details": "Billing Details",
   "orders": {
     "list": "Order List",
     "invoiceAmount": "Invoice Amount",
@@ -149,5 +150,10 @@
   "Total Quota": "total",
   "Used Quota": "used",
   "Remaining Quota": "remaining",
-  "Receipts And Disbursements": "Receipts And Disbursements"
+  "Receipts And Disbursements": "Receipts And Disbursements",
+  "APP Name": "App name",
+  "All APP": "all",
+  "APP Type": "App type",
+  "Details": "Details",
+  "Handle": "Handle"
 }

frontend/providers/costcenter/public/locales/zh/common.json

@@ -76,6 +76,7 @@
   "Unit": "单位",
   "Gpu valuation": "GPU 计价",
   "common valuation": "计价表",
+  "Billing Details": "订单详情",
   "orders": {
     "list": "订单列表",
     "invoiceAmount": "发票金额",
@@ -149,5 +150,10 @@
   "Total Quota": "总计",
   "used Quota": "已用",
   "Remaining Quota": "剩余",
-  "Receipts And Disbursements": "收支"
+  "Receipts And Disbursements": "收支",
+  "APP Name": "应用名称",
+  "All APP": "所有应用",
+  "APP Type": "应用类型",
+  "Details": "详情",
+  "Handle": "操作"
 }

frontend/providers/costcenter/src/components/CurrencySymbol.tsx

@@ -1,5 +1,5 @@
 import { Text, Icon, IconProps, TextProps } from '@chakra-ui/react';
-export default function currencysymbol({
+export default function CurrencySymbol({
   type = 'shellCoin',
   ...props
 }: {

frontend/providers/costcenter/src/components/billing/AppMenu.tsx

@@ -0,0 +1,100 @@
+import request from '@/service/request';
+import { ApiResp } from '@/types';
+import {
+  Button,
+  Flex,
+  FlexProps,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useDisclosure
+} from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'next-i18next';
+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({
+    queryFn() {
+      return request<any, ApiResp<{ appList: string[] }>>('/api/billing/getAppList');
+    },
+    queryKey: ['appList']
+  });
+  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { t } = useTranslation();
+  const appList: string[] = [t('All APP'), ...(data?.data?.appList || [])];
+  return (
+    <Flex align={'center'} ml="28px" {...props}>
+      <Popover onClose={onClose} onOpen={onOpen} isOpen={isOpen}>
+        <PopoverTrigger>
+          <Button
+            w="110px"
+            h="32px"
+            fontStyle="normal"
+            fontWeight="400"
+            fontSize="12px"
+            lineHeight="140%"
+            border={'1px solid #DEE0E2'}
+            bg={'#F6F8F9'}
+            _expanded={{
+              background: '#F8FAFB',
+              border: `1px solid #36ADEF`
+            }}
+            isDisabled={isDisabled}
+            _hover={{
+              background: '#F8FAFB',
+              border: `1px solid #36ADEF`
+            }}
+            borderRadius={'2px'}
+          >
+            {appList[appIdx]}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          p={'6px'}
+          boxSizing="border-box"
+          w={'110px'}
+          shadow={'0px 0px 1px 0px #798D9F40, 0px 2px 4px 0px #A1A7B340'}
+          border={'none'}
+        >
+          {appList.map((v, idx) => (
+            <Button
+              key={v}
+              {...(idx === appIdx
+                ? {
+                    color: '#0884DD',
+                    bg: '#F4F6F8'
+                  }
+                : {
+                    color: '#5A646E',
+                    bg: '#FDFDFE'
+                  })}
+              h="30px"
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontWeight="400"
+              lineHeight="18px"
+              p={'0'}
+              isDisabled={isDisabled}
+              onClick={() => {
+                setAppIdx(idx);
+                setApp(idx === 0 ? '' : appList[idx]);
+                onClose();
+              }}
+            >
+              {v}
+            </Button>
+          ))}
+        </PopoverContent>
+      </Popover>
+    </Flex>
+  );
+}

frontend/providers/costcenter/src/components/billing/NamespaceMenu.tsx

@@ -0,0 +1,89 @@
+import request from '@/service/request';
+import { ApiResp } from '@/types';
+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;
+}) {
+  const [namespaceIdx, setNamespaceIdx] = useState(0);
+  const { data: nsListData } = useQuery({
+    queryFn() {
+      return request<any, ApiResp<{ nsList: string[] }>>('/api/billing/getNamespaceList');
+    },
+    queryKey: ['nsList']
+  });
+  const { t } = useTranslation();
+  const namespaceList: string[] = [t('All Namespace'), ...(nsListData?.data?.nsList || [])];
+  return (
+    <Flex align={'center'} ml="28px">
+      <Popover>
+        <PopoverTrigger>
+          <Button
+            w="110px"
+            h="32px"
+            fontStyle="normal"
+            fontWeight="400"
+            fontSize="12px"
+            lineHeight="140%"
+            border={'1px solid #DEE0E2'}
+            bg={'#F6F8F9'}
+            _expanded={{
+              background: '#F8FAFB',
+              border: `1px solid #36ADEF`
+            }}
+            isDisabled={isDisabled}
+            _hover={{
+              background: '#F8FAFB',
+              border: `1px solid #36ADEF`
+            }}
+            borderRadius={'2px'}
+          >
+            {namespaceList[namespaceIdx]}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          p={'6px'}
+          boxSizing="border-box"
+          w={'110px'}
+          shadow={'0px 0px 1px 0px #798D9F40, 0px 2px 4px 0px #A1A7B340'}
+          border={'none'}
+        >
+          {namespaceList.map((v, idx) => (
+            <Button
+              key={v}
+              {...(idx === namespaceIdx
+                ? {
+                    color: '#0884DD',
+                    bg: '#F4F6F8'
+                  }
+                : {
+                    color: '#5A646E',
+                    bg: '#FDFDFE'
+                  })}
+              h="30px"
+              fontFamily="PingFang SC"
+              fontSize="12px"
+              fontWeight="400"
+              lineHeight="18px"
+              p={'0'}
+              isDisabled={isDisabled}
+              onClick={() => {
+                setNamespaceIdx(idx);
+                setNamespace(idx === 0 ? '' : namespaceList[namespaceIdx + 1]);
+              }}
+            >
+              {v}
+            </Button>
+          ))}
+        </PopoverContent>
+      </Popover>
+    </Flex>
+  );
+}

frontend/providers/costcenter/src/components/billing/SearchBox.tsx

@@ -0,0 +1,60 @@
+import { Button, Flex, FlexProps, Img, Input } from '@chakra-ui/react';
+import { Dispatch, SetStateAction, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import magnifyingGlass_icon from '@/assert/magnifyingGlass.svg';
+export default function SearchBox({
+  isDisabled,
+  setOrderID,
+  ...props
+}: {
+  isDisabled: boolean;
+  setOrderID: Dispatch<SetStateAction<string>>;
+} & FlexProps) {
+  const { t } = useTranslation();
+  const [searchValue, setSearch] = useState('');
+  return (
+    <Flex align={'center'} ml={'auto'} mb={'24px'} {...props}>
+      <Flex
+        mr="16px"
+        border="1px solid #DEE0E2"
+        h="32px"
+        align={'center'}
+        py={'10.3px'}
+        pl={'9.3px'}
+        borderRadius={'2px'}
+      >
+        <Img src={magnifyingGlass_icon.src} w={'14px'} mr={'8px'}></Img>
+        <Input
+          isDisabled={isDisabled}
+          variant={'unstyled'}
+          placeholder={t('Order Number') as string}
+          value={searchValue}
+          onChange={(v) => setSearch(v.target.value)}
+        ></Input>
+      </Flex>
+      <Button
+        isDisabled={isDisabled}
+        variant={'unstyled'}
+        display="flex"
+        justifyContent={'center'}
+        alignContent={'center'}
+        width="88px"
+        height="32px"
+        bg="#24282C"
+        borderRadius="4px"
+        color={'white'}
+        fontWeight="500"
+        fontSize="14px"
+        _hover={{
+          opacity: '0.5'
+        }}
+        onClick={(e) => {
+          e.preventDefault();
+          setOrderID(searchValue);
+        }}
+      >
+        {t('Search')}
+      </Button>
+    </Flex>
+  );
+}

frontend/providers/costcenter/src/components/billing/SwitchPage.tsx

@@ -0,0 +1,76 @@
+import { Button, Flex, FlexProps, Img, Text } from '@chakra-ui/react';
+import { Dispatch, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import arrow_icon from '@/assert/Vector.svg';
+import arrow_left_icon from '@/assert/toleft.svg';
+
+export default function SwitchPage({
+  totalPage,
+  totalItem,
+  pageSize,
+  currentPage,
+  setCurrentPage,
+  ...props
+}: {
+  currentPage: number;
+  totalPage: number;
+  totalItem: number;
+  pageSize: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+} & FlexProps) {
+  const { t } = useTranslation();
+  return (
+    <Flex minW="370px" h="32px" align={'center'} mt={'20px'} {...props}>
+      <Text>{t('Total')}:</Text>
+      <Flex w="40px">{totalItem}</Flex>
+      <Flex gap={'8px'}>
+        <Button
+          variant={'switchPage'}
+          isDisabled={currentPage === 1}
+          onClick={(e) => {
+            e.preventDefault();
+            setCurrentPage(1);
+          }}
+        >
+          <Img w="6px" h="6px" src={arrow_left_icon.src}></Img>
+        </Button>
+        <Button
+          variant={'switchPage'}
+          isDisabled={currentPage === 1}
+          onClick={(e) => {
+            e.preventDefault();
+            setCurrentPage(currentPage - 1);
+          }}
+        >
+          <Img src={arrow_icon.src} transform={'rotate(-90deg)'}></Img>
+        </Button>
+        <Text>{currentPage}</Text>/<Text>{totalPage}</Text>
+        <Button
+          variant={'switchPage'}
+          isDisabled={currentPage === totalPage}
+          bg={currentPage !== totalPage ? '#EDEFF1' : '#F1F4F6'}
+          onClick={(e) => {
+            e.preventDefault();
+            setCurrentPage(currentPage + 1);
+          }}
+        >
+          <Img src={arrow_icon.src} transform={'rotate(90deg)'}></Img>
+        </Button>
+        <Button
+          variant={'switchPage'}
+          isDisabled={currentPage === totalPage}
+          bg={currentPage !== totalPage ? '#EDEFF1' : '#F1F4F6'}
+          mr={'10px'}
+          onClick={(e) => {
+            e.preventDefault();
+            setCurrentPage(totalPage);
+          }}
+        >
+          <Img w="6px" h="6px" src={arrow_left_icon.src} transform={'rotate(180deg)'}></Img>
+        </Button>
+      </Flex>
+      <Text>{pageSize}</Text>
+      <Text>/{t('Page')}</Text>
+    </Flex>
+  );
+}