add MyTooltip

labring · Apr 22, 2024 · 94a6f39 · 94a6f39
1 parent 81e1b1b
commit 94a6f39
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 44 deletions.
diff --git a/frontend/providers/cloudserver/public/locales/en/common.json b/frontend/providers/cloudserver/public/locales/en/common.json
@@ -9,6 +9,7 @@
   "Bandwidth by hour": "Bandwidth by hour",
   "Basic Config": "Basic Config",
   "Billing items": "Billing items",
+  "Billing rules": "Billing rules",
   "CPU": "CPU",
   "Cancel": "Cancel",
   "Changing": "Changing",
@@ -51,6 +52,8 @@
   "Quantity is 1 to 100": "Quantity is 1 to 100",
   "ReStart": "Restart",
   "Reference fee": "Reference fee",
+  "Reference fee disk tips": "{{price}}/GiB/hour",
+  "Reference fee network tips": "When the public network bandwidth is less than 5 Mbps, the price is {{price1}}/Mbps/hour; when the public network bandwidth is greater than or equal to 5 Mbps, the price is {{price2}}/Mbps/hour.",
   "Reference fee tip": "{{price}}/hour",
   "Restarting": "Restarting",
   "Set Password": "Set Password",

diff --git a/frontend/providers/cloudserver/public/locales/jp/common.json b/frontend/providers/cloudserver/public/locales/jp/common.json
@@ -9,6 +9,7 @@
   "Bandwidth by hour": "(時間ごとの帯域幅)",
   "Basic Config": "基本設定",
   "Billing items": "請求項目",
+  "Billing rules": "請求規則",
   "CPU": "CPU",
   "Cancel": "キャンセル",
   "Changing": "変更中",
@@ -51,6 +52,8 @@
   "Quantity is 1 to 100": "数量は1から100までです",
   "ReStart": "再起動",
   "Reference fee": "参考料金",
+  "Reference fee disk tips": "{{price}}/GiB/時間あたり",
+  "Reference fee network tips": "パブリックネットワークの帯域幅が5 Mbps未満の場合、価格は{{price1}}/Mbps/時間です。帯域幅が5 Mbps以上の場合、価格は{{price2}}/Mbps/時間です。",
   "Reference fee tip": "{{price}}/時間",
   "Restarting": "再起動中",
   "Set Password": "パスワードを設定する",

diff --git a/frontend/providers/cloudserver/public/locales/zh/common.json b/frontend/providers/cloudserver/public/locales/zh/common.json
@@ -84,5 +84,8 @@
   "price": "价格",
   "publicIpAssigned tips": "注意：未分配独立公网IP，无法使用外网IP对外进行互相通信，服务器无法用于备案，请慎重选择。",
   "Fee inquiry in progress": "费用查询中...",
-  "hour": "小时"
+  "hour": "小时",
+  "Reference fee disk tips": "{{price}}/GiB/小时",
+  "Reference fee network tips": "当公网带宽小于5 Mbps时，价格为{{price1}}/Mbps/小时；当公网带宽大于等于5 Mbps时，价格为{{price2}}/Mbps/小时。",
+  "Billing rules": "计费规则"
 }
diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Form.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Form.tsx
@@ -7,22 +7,22 @@ import {
   Button,
   Divider,
   Flex,
+  FormControl,
   IconButton,
+  Image,
   Input,
   Radio,
   Skeleton,
   Stack,
   Switch,
   Text,
-  useTheme,
-  Image,
-  FormControl
+  useTheme
 } from '@chakra-ui/react';
 import { MySelect, RangeInput, Tabs } from '@sealos/ui';
 import { useQuery } from '@tanstack/react-query';
 import { customAlphabet } from 'nanoid';
 import { useTranslation } from 'next-i18next';
-import { useEffect, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { UseFormReturn, useFieldArray } from 'react-hook-form';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz', 4);
 const nanoidUpper = customAlphabet('ABCDEFGHIJKLMNOPQRSTUVWXYZ', 4);
@@ -33,7 +33,7 @@ const Label = ({
   w = 120,
   ...props
 }: {
-  children: string;
+  children: JSX.Element;
   w?: number | 'auto';
   [key: string]: any;
 }) => (
@@ -50,10 +50,14 @@ const Label = ({
 
 export default function Form({
   formHook,
-  refresh
+  refresh,
+
+  setInstanceType
 }: {
   formHook: UseFormReturn<EditForm, any>;
   refresh: boolean;
+
+  setInstanceType: Dispatch<SetStateAction<CloudServerType | undefined>>;
 }) {
   if (!formHook) return <></>;
   const [clientRender, setClientRender] = useState(false);
@@ -71,6 +75,7 @@ export default function Form({
     onSuccess(data) {
       if (data?.[0]) {
         formHook.setValue('virtualMachinePackageName', data[0].virtualMachinePackageName);
+        setInstanceType(data?.[0]);
       }
     }
   });
@@ -277,7 +282,9 @@ export default function Form({
       </Flex>
       <Box pt="24px" px="42px" pb="64px" flex={1} h="0" overflow={'auto'}>
         <Flex alignItems={'center'} mb={'24px'}>
-          <Label alignSelf={'self-start'}>{t('Type')}</Label>
+          <Label alignSelf={'self-start'}>
+            <Text>{t('Type')}</Text>
+          </Label>
           <Box flex={1}>
             {ServersData ? (
               <MyTable
@@ -288,6 +295,7 @@ export default function Form({
                 onRowClick={(item: CloudServerType) => {
                   setValue('virtualMachinePackageName', item.virtualMachinePackageName);
                   setValue('virtualMachinePackageFamily', item.virtualMachinePackageFamily);
+                  setInstanceType(item);
                 }}
               />
             ) : (
@@ -298,7 +306,9 @@ export default function Form({
           </Box>
         </Flex>
         <Flex alignItems={'center'} mb={'24px'} flex={1}>
-          <Label alignSelf={'self-start'}>{t('Image')}</Label>
+          <Label alignSelf={'self-start'}>
+            <Text>{t('Image')}</Text>
+          </Label>
           <Box>
             <Flex flexWrap={'wrap'} gap={'12px'}>
               {SystemImage &&
@@ -375,8 +385,10 @@ export default function Form({
           </Box>
         </Flex>
 
-        <Flex alignItems={'center'} mb={'24px'}>
-          <Label alignSelf={'self-start'}>{t('Storage')}</Label>
+        <Flex alignItems={'center'} mb={'24px'} position={'relative'}>
+          <Label alignSelf={'self-start'}>
+            <Text>{t('Storage')}</Text>
+          </Label>
           {clientRender && (
             <Box width={'100%'}>
               <MyTable
@@ -405,7 +417,9 @@ export default function Form({
         </Flex>
 
         <Flex alignItems={'center'} mb={'24px'}>
-          <Label alignSelf={'self-start'}>{t('Public IP')}</Label>
+          <Label alignSelf={'self-start'}>
+            <Text>{t('Public IP')}</Text>
+          </Label>
           <Flex flexDirection={'column'}>
             <Flex alignItems={'center'}>
               <Text mr={'12px'}>{t('Assign Public IP')}</Text>
@@ -459,7 +473,9 @@ export default function Form({
 
         <Box mb={'24px'}>
           <Flex alignItems={'center'}>
-            <Label>{t('Login Method')}</Label>
+            <Label>
+              <Text>{t('Login Method')}</Text>
+            </Label>
             <Tabs
               size={'sm'}
               list={[

diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Header.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Header.tsx
@@ -1,10 +1,11 @@
 import MyIcon from '@/components/Icon';
 import { useGlobalStore } from '@/store/global';
-import { CloudServerPrice } from '@/types/cloudserver';
+import { CloudServerPrice, CloudServerType } from '@/types/cloudserver';
 import {
   Box,
   Button,
   Center,
+  Divider,
   Flex,
   Popover,
   PopoverArrow,
@@ -22,20 +23,21 @@ const Header = ({
   title,
   applyCb,
   applyBtnText,
-  prices
+  prices,
+  instanceType
 }: {
   title: string;
   applyCb: () => void;
   applyBtnText: string;
   prices?: CloudServerPrice;
+  instanceType?: CloudServerType;
 }) => {
   const { t } = useTranslation();
   const router = useRouter();
   const { lastRoute } = useGlobalStore();
 
   const priceItemStyle = {
     alignItems: 'center',
-    justifyContent: 'space-between',
     py: '4px',
     px: '6px',
     borderRadius: 'base',
@@ -76,46 +78,75 @@ const Header = ({
               <PopoverHeader px={'18px'} py={'12px'} fontWeight={'bold'} fontSize={'md'}>
                 {t('Configuration fee details')}
               </PopoverHeader>
+              <PopoverArrow />
               <PopoverBody>
                 <Flex flexDirection={'column'} gap={'4px'}>
-                  <Flex
-                    alignItems={'center'}
-                    justifyContent={'space-between'}
-                    py={'4px'}
-                    px={'6px'}
-                    borderRadius={'base'}
-                    _hover={{
-                      bg: 'grayModern.100'
-                    }}
-                  >
+                  <Flex {...priceItemStyle}>
                     <Text fontSize={'base'}>{t('Instance')}</Text>
-                    <Text fontWeight={'bold'} color={'brightBlue.600'}>
+                    <Text ml={'auto'} fontWeight={'bold'} color={'brightBlue.600'}>
                       ¥{prices?.instancePrice}/{t('hour')}
                     </Text>
                   </Flex>
-                  <Flex
-                    alignItems={'center'}
-                    justifyContent={'space-between'}
-                    py={'4px'}
-                    px={'6px'}
-                    borderRadius={'base'}
-                    _hover={{
-                      bg: 'grayModern.100'
-                    }}
-                  >
-                    <Text fontSize={'base'}>{t('storage fees')}</Text>
-                    <Text fontWeight={'bold'} color={'brightBlue.600'}>
+
+                  <Flex {...priceItemStyle}>
+                    <Text alignSelf={'self-start'} fontSize={'base'} width={'50px'}>
+                      {t('storage fees')}
+                    </Text>
+                    <Text ml={'auto'} fontWeight={'bold'} color={'brightBlue.600'}>
                       ¥{prices?.diskPrice}/{t('hour')}
                     </Text>
                   </Flex>
+
                   <Flex {...priceItemStyle}>
-                    <Text fontSize={'base'}>{t('Public network bandwidth')}</Text>
-                    <Text fontWeight={'bold'} color={'brightBlue.600'}>
+                    <Text alignSelf={'self-start'} fontSize={'base'} width={'50px'}>
+                      {t('Public network bandwidth')}
+                    </Text>
+                    <Text
+                      ml={'auto'}
+                      alignSelf={'self-start'}
+                      fontWeight={'bold'}
+                      color={'brightBlue.600'}
+                    >
                       ¥{prices?.networkPrice}/{t('hour')}
                     </Text>
                   </Flex>
                 </Flex>
               </PopoverBody>
+
+              {/* Billing rules */}
+              <PopoverHeader px={'18px'} py={'12px'} fontWeight={'bold'} fontSize={'md'}>
+                {t('Billing rules')}
+              </PopoverHeader>
+              <PopoverArrow />
+              <PopoverBody>
+                <Flex flexDirection={'column'} gap={'4px'}>
+                  <Flex {...priceItemStyle} fontSize={'base'} justifyContent={'space-between'}>
+                    <Text w={'50px'} fontSize={'base'}>
+                      {t('Storage')}
+                    </Text>
+                    <Text fontSize={'sm'}>
+                      {t('Reference fee disk tips', { price: instanceType?.diskPerG })}
+                    </Text>
+                  </Flex>
+                  <Flex {...priceItemStyle} justifyContent={'space-between'}>
+                    <Text
+                      flexShrink={0}
+                      w={'50px'}
+                      alignSelf={'self-start'}
+                      fontSize={'base'}
+                      width={'50px'}
+                    >
+                      {t('BandWidth')}
+                    </Text>
+                    <Text fontSize={'sm'} wordBreak={'break-all'}>
+                      {t('Reference fee network tips', {
+                        price1: instanceType?.networkSpeedUnderSpeedBoundaryPerHour,
+                        price2: instanceType?.networkSpeedAboveSpeedBoundaryPerHour
+                      })}
+                    </Text>
+                  </Flex>
+                </Flex>
+              </PopoverBody>
             </PopoverContent>
           </Popover>
         ) : (

diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx
@@ -3,17 +3,17 @@ import { useConfirm } from '@/hooks/useConfirm';
 import { useLoading } from '@/hooks/useLoading';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
-import { EditForm } from '@/types/cloudserver';
+import { CloudServerType, EditForm } from '@/types/cloudserver';
 import { serviceSideProps } from '@/utils/i18n';
 import { Box, Flex } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import ErrorModal from './components/ErrorModal';
 import Form from './components/Form';
 import Header from './components/Header';
-import { useQuery } from '@tanstack/react-query';
 
 export default function EditOrder() {
   const [errorMessage, setErrorMessage] = useState('');
@@ -23,6 +23,7 @@ export default function EditOrder() {
   const router = useRouter();
   const [forceUpdate, setForceUpdate] = useState(false);
   const { lastRoute } = useGlobalStore();
+  const [instanceType, setInstanceType] = useState<CloudServerType>();
 
   const { openConfirm, ConfirmChild } = useConfirm({
     content: t('Are you sure to create a cloud host?')
@@ -102,6 +103,7 @@ export default function EditOrder() {
       bg={'grayModern.100'}
     >
       <Header
+        instanceType={instanceType}
         prices={prices}
         title="New Server"
         applyCb={() =>
@@ -110,7 +112,7 @@ export default function EditOrder() {
         applyBtnText="Submit"
       />
       <Flex h={'calc(100% - 126px)'} justifyContent={'center'} borderRadius={'4px'}>
-        <Form formHook={formHook} refresh={forceUpdate} />
+        <Form formHook={formHook} refresh={forceUpdate} setInstanceType={setInstanceType} />
       </Flex>
       <ConfirmChild />
       <Loading />