fix(objectstorage):fix predictCard (#4501)

labring · Jan 23, 2024 · 375b561 · 375b561
1 parent e7b1c54
commit 375b561
Show file tree

Hide file tree

Showing 14 changed files with 74 additions and 38 deletions.
diff --git a/frontend/desktop/data/config.json b/frontend/desktop/data/config.json
@@ -1,3 +1,3 @@
 {
   "scripts": []
-}
+}
diff --git a/frontend/providers/applaunchpad/next-i18next.config.js b/frontend/providers/applaunchpad/next-i18next.config.js
@@ -9,4 +9,4 @@ module.exports = {
     locales: ['en', 'zh'],
     localeDetection: false
   }
-}
+};
diff --git a/frontend/providers/costcenter/next.config.js b/frontend/providers/costcenter/next.config.js
@@ -40,6 +40,15 @@ const nextConfig = {
         ]
       }
     ];
+  },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/cost_overview',
+        permanent: true
+      }
+    ];
   }
 };
 

diff --git a/frontend/providers/costcenter/src/components/icons/StorageIcon.tsx b/frontend/providers/costcenter/src/components/icons/StorageIcon.tsx
@@ -13,8 +13,8 @@ export function StorageIcon(props: IconProps) {
       <path
         d="M14.0999 9.67749H1.8999V13.6425H14.0999V9.67749Z"
         stroke="#24282C"
-        stroke-width="1.22"
-        stroke-linejoin="round"
+        strokeWidth="1.22"
+        strokeLinejoin="round"
       />
       <path
         d="M11.5074 12.4226C11.7097 12.4226 11.9036 12.3423 12.0466 12.1993C12.1896 12.0563 12.2699 11.8623 12.2699 11.6601C12.2699 11.4579 12.1896 11.2639 12.0466 11.1209C11.9036 10.9779 11.7097 10.8976 11.5074 10.8976C11.3052 10.8976 11.1113 10.9779 10.9683 11.1209C10.8253 11.2639 10.7449 11.4579 10.7449 11.6601C10.7449 11.8623 10.8253 12.0563 10.9683 12.1993C11.1113 12.3423 11.3052 12.4226 11.5074 12.4226Z"
@@ -23,8 +23,8 @@ export function StorageIcon(props: IconProps) {
       <path
         d="M1.8999 9.67762L3.43649 2.3573H12.581L14.0999 9.67731"
         stroke="#24282C"
-        stroke-width="1.22"
-        stroke-linejoin="round"
+        strokeWidth="1.22"
+        strokeLinejoin="round"
       />
     </Icon>
   );

diff --git a/frontend/providers/costcenter/src/components/valuation/predictCard.tsx b/frontend/providers/costcenter/src/components/valuation/predictCard.tsx
@@ -9,33 +9,50 @@ import { END_TIME, valuationMap } from '@/constants/payment';
 import useBillingData from '@/hooks/useBillingData';
 import { BillingType, Costs } from '@/types';
 import { isSameDay, isSameHour, parseISO, subHours } from 'date-fns';
+
 export default function PredictCard() {
   const { t } = useTranslation();
+  const NOW_TIME = new Date();
+
   const { data } = useBillingData({
     type: BillingType.CONSUME,
-    endTime: END_TIME,
-    startTime: subHours(END_TIME, 1)
+    endTime: NOW_TIME,
+    startTime: subHours(NOW_TIME, 3)
   });
   const _state = useMemo<Costs & { total: number }>(() => {
+    let times = 3;
     const items = data?.data?.status.item || [];
-    if (items.length > 0) {
-      const latest = items[0];
-      const time = parseISO(latest.time);
-      const now = new Date();
-      if (isSameDay(time, now) && isSameHour(time, now))
-        return {
-          ...latest.costs,
-          total: latest.amount
-        };
-    }
-    return {
+    let state = {
       cpu: 0,
       memory: 0,
       storage: 0,
       network: 0,
       port: 0,
+      gpu: 0,
       total: 0
     };
+    while (times--) {
+      let existSame = false;
+      items.reduce((pre, cur) => {
+        const time = parseISO(cur.time);
+        if (
+          isSameDay(time, subHours(NOW_TIME, 3 - times)) &&
+          isSameHour(time, subHours(NOW_TIME, 3 - times))
+        ) {
+          pre.cpu += cur.costs.cpu;
+          pre.memory += cur.costs.memory;
+          pre.storage += cur.costs.storage;
+          pre.network += cur.costs.network;
+          pre.port += cur.costs.port;
+          pre.gpu += cur.costs.gpu || 0;
+          pre.total += cur.amount;
+          existSame = true;
+        }
+        return pre;
+      }, state);
+      if (existSame) break;
+    }
+    return state;
   }, [data?.data?.status.item]);
   const currency = useEnvStore((s) => s.currency);
   const gpuEnabled = useEnvStore((state) => state.gpuEnabled);

diff --git a/frontend/providers/costcenter/src/hooks/useBillingData.tsx b/frontend/providers/costcenter/src/hooks/useBillingData.tsx
@@ -23,9 +23,11 @@ export default function useBillingData(props?: {
         startTime: formatISO(start, { representation: 'complete' }),
         endTime: formatISO(end, { representation: 'complete' }),
         page: 1,
-        pageSize: props ? props.pageSize : (delta + 1) * 48,
+        pageSize: props?.pageSize ? props.pageSize : (delta + 1) * 48,
         type: props?.type ?? -1,
-        orderID: ''
+        orderID: '',
+        appType: '',
+        namespace: ''
       };
       return request<any, ApiResp<BillingData>, { spec: BillingSpec }>('/api/billing', {
         method: 'POST',

diff --git a/frontend/providers/costcenter/src/pages/api/billing/getNamespaceList.tsx b/frontend/providers/costcenter/src/pages/api/billing/getNamespaceList.tsx
@@ -23,7 +23,6 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse
         message: 'endTime is invalid'
       });
     const url = process.env.BILLING_URI + '/account/v1alpha1/namespaces';
-    console.log(url);
     const res = await (
       await fetch(url, {
         method: 'POST',
@@ -36,7 +35,6 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse
         })
       })
     ).json();
-    console.log(res);
     return jsonRes(resp, {
       code: 200,
       data: res.data,

diff --git a/frontend/providers/costcenter/src/pages/api/getQuota.ts b/frontend/providers/costcenter/src/pages/api/getQuota.ts
@@ -70,7 +70,6 @@ export const memoryFormatToMi = (memory: string) => {
   } else if (/Ti/gi.test(memory)) {
     value = value * 1024 * 1024;
   } else {
-    console.log('Invalid memory value');
     value = 0;
   }
 

diff --git a/frontend/providers/costcenter/src/pages/billing/index.tsx b/frontend/providers/costcenter/src/pages/billing/index.tsx
@@ -78,7 +78,7 @@ function InOutTabPanel({ namespace }: { namespace: string }) {
   const { data, isFetching, isSuccess } = useQuery(
     ['billing', { currentPage, startTime, endTime, orderID, selectType, namespace, appType }],
     () => {
-      const spec = {
+      const spec: BillingSpec = {
         page: currentPage,
         pageSize: pageSize,
         type: selectType,

diff --git a/frontend/providers/costcenter/src/types/billing.ts b/frontend/providers/costcenter/src/types/billing.ts
@@ -13,7 +13,8 @@ export type BillingSpec =
       endTime: string;
       type: BillingType; //0为扣费，1为充值；用于billing数据查找：如为-1则查找type为0和1的数据，如果给定type值则查找type为给定值的数据
       owner?: string; //用于billing数据中查找的owner字段值
-      namespace?: string;
+      namespace: string;
+      appType: string;
     }
   | {
       orderID: string; //如果给定orderId，则查找该id的值，该值为唯一值，因此当orderId给定时忽略其他查找限定值

diff --git a/frontend/providers/template/src/components/Banner/index.tsx b/frontend/providers/template/src/components/Banner/index.tsx
@@ -69,7 +69,8 @@ export default function Banner() {
         '.my-prev-button, .my-next-button': {
           opacity: 1
         }
-      }}>
+      }}
+    >
       <Swiper
         ref={swiperRef}
         slidesPerView={1}
@@ -82,7 +83,8 @@ export default function Banner() {
         autoplay={{
           delay: 5000,
           disableOnInteraction: false
-        }}>
+        }}
+      >
         {SlideData.map((item, index) => (
           <SwiperSlide key={index}>
             <Flex w="full" h="213px" gap={'16px'} overflow={'hidden'}>
@@ -91,7 +93,8 @@ export default function Banner() {
                 bg={item.bg}
                 borderRadius={item.borderRadius}
                 p="16px 24px"
-                justifyContent={'space-between'}>
+                justifyContent={'space-between'}
+              >
                 <Flex flexDirection={'column'} justifyContent={'space-between'}>
                   <Flex gap="12px" alignItems={'center'} mt="26px">
                     <Box
@@ -101,7 +104,8 @@ export default function Banner() {
                       boxShadow={'0px 1px 2px 0.5px rgba(84, 96, 107, 0.20)'}
                       borderRadius={'4px'}
                       backgroundColor={'#fff'}
-                      border={' 1px solid rgba(255, 255, 255, 0.50)'}>
+                      border={' 1px solid rgba(255, 255, 255, 0.50)'}
+                    >
                       <Image src={item.icon} alt="" width={'36px'} height={'36px'} />
                     </Box>
                     <Text fontSize={'20px'} color={'#FFF'} fontWeight={600}>
@@ -125,7 +129,8 @@ export default function Banner() {
                 bg={SlideData[(index + 1) % SlideData.length].bg}
                 borderRadius={SlideData[(index + 1) % SlideData.length].borderRadius}
                 p="16px 24px"
-                justifyContent={'space-between'}>
+                justifyContent={'space-between'}
+              >
                 <Flex flexDirection={'column'} justifyContent={'space-between'}>
                   <Flex gap="12px" alignItems={'center'} mt="26px">
                     <Box
@@ -135,7 +140,8 @@ export default function Banner() {
                       boxShadow={'0px 1px 2px 0.5px rgba(84, 96, 107, 0.20)'}
                       borderRadius={'4px'}
                       backgroundColor={'#fff'}
-                      border={' 1px solid rgba(255, 255, 255, 0.50)'}>
+                      border={' 1px solid rgba(255, 255, 255, 0.50)'}
+                    >
                       <Image
                         src={SlideData[(index + 1) % SlideData.length].icon}
                         alt=""
@@ -173,7 +179,8 @@ export default function Banner() {
         zIndex={10}
         top="50%"
         left="-30px"
-        transform="translateY(-50%) rotate(180deg)">
+        transform="translateY(-50%) rotate(180deg)"
+      >
         <ArrowRightIcon />
       </Box>
       <Box
@@ -186,7 +193,8 @@ export default function Banner() {
         zIndex={10}
         top="50%"
         right="-30px"
-        transform="translateY(-50%)">
+        transform="translateY(-50%)"
+      >
         <ArrowRightIcon />
       </Box>
     </Box>

diff --git a/frontend/providers/template/src/components/icons/ArrowRight.tsx b/frontend/providers/template/src/components/icons/ArrowRight.tsx
@@ -7,7 +7,8 @@ export const ArrowRightIcon = (props: IconProps) => (
     viewBox="0 0 21 67"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    {...props}>
+    {...props}
+  >
     <path
       d="M13.7104 32.9874L5.27107 8.60709C5.08599 8.07239 5.3694 7.48889 5.90411 7.3038C6.43881 7.11871 7.02232 7.40213 7.2074 7.93683L15.7578 32.6381C15.8203 32.8188 15.8294 33.005 15.7934 33.1796C15.7846 33.2311 15.7718 33.2827 15.7548 33.3339L7.18199 59.0522C7.00306 59.589 6.42285 59.8791 5.88606 59.7002C5.34926 59.5213 5.05916 58.9411 5.23809 58.4043L13.7104 32.9874Z"
       fill="#8A95A7"

diff --git a/frontend/providers/template/src/pages/index.tsx b/frontend/providers/template/src/pages/index.tsx
@@ -83,8 +83,8 @@ export default function AppList() {
       borderRadius={'12px'}
       background={'linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.70) 100%)'}
       py={'36px'}
-      px="42px">
-      {/* <Banner /> */}
+      px="42px"
+    >
       {!!FastDeployTemplates?.length ? (
         <Grid
           justifyContent={'center'}

diff --git a/frontend/providers/template/src/pages/instance/components/delDodal.tsx b/frontend/providers/template/src/pages/instance/components/delDodal.tsx
@@ -86,7 +86,8 @@ const DelModal = ({
             variant={'solid'}
             isDisabled={inputValue !== name}
             isLoading={loading}
-            onClick={handleDelApp}>
+            onClick={handleDelApp}
+          >
             {t('Confirm deletion')}
           </Button>
         </ModalFooter>