fix:cloudserver bandwidth price display (labring#4734)

* fix:cloudserver bandwidth price display Signed-off-by: jingyang <[email protected]> * change language * fix --------- Signed-off-by: jingyang <[email protected]>
cuisongliu · May 14, 2024 · 5968bae · 5968bae
1 parent a7c1d9d
commit 5968bae
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 39 deletions.
diff --git a/frontend/providers/cloudserver/public/locales/en/common.json b/frontend/providers/cloudserver/public/locales/en/common.json
@@ -53,8 +53,8 @@
   "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",
+  "Reference fee bandwidth tips": "{{price}}/Mbps/hour",
   "Restarting": "Restarting",
   "Set Password": "Set Password",
   "Start": "Start",
@@ -82,7 +82,7 @@
   "delete cloud server tip": "Are you sure to delete this cloud host?",
   "hour": "hour",
   "price": "Price",
-  "publicIpAssigned tips": "Note: Without a dedicated public IP assigned, external communication using a public IP is not possible. The server cannot be used for record filing. Please choose carefully.",
+  "publicIpAssigned tips": "Please note: If an independent public IP address is not assigned, the external IP address cannot be used to communicate with each other.",
   "ssh port": "SSH port",
   "sshName": "SSH Username",
   "sshPassword": "SSH Password",
@@ -94,7 +94,7 @@
   "Architecture": "Architecture",
   "Instance Family": "Instance Family",
   "postPaidByHour": "Pay as you go",
-  "heterogeneous": "Heterogeneous",
+  "heterogeneous": "Heterogeneous  (GPU)",
   "prePaid": "Yearly and monthly subscription",
   "x86_64": "x86_64",
   "costEffective": "Cost Effective",
@@ -106,5 +106,10 @@
   "Contains at least three of these": "Contains at least three of these",
   "Cannot start with": "Cannot start with \"/\"",
   "cannot contain spaces": "cannot contain spaces",
-  "Within 8 to 30 characters": "Within 8 to 30 characters (12 or more characters recommended)"
+  "Within 8 to 30 characters": "Within 8 to 30 characters (12 or more characters recommended)",
+  "highMemory": "High Memory",
+  "highPerformance": "High Performance",
+  "Public IP is not enabled": "Public IP is not enabled",
+  "interval": "Interval",
+  "sold out": "Sold Out"
 }
diff --git a/frontend/providers/cloudserver/public/locales/zh/common.json b/frontend/providers/cloudserver/public/locales/zh/common.json
@@ -82,19 +82,19 @@
   "Public network bandwidth": "公网带宽",
   "Billing items": "计费项",
   "price": "价格",
-  "publicIpAssigned tips": "注意：未分配独立公网IP，无法使用外网IP对外进行互相通信，服务器无法用于备案，请慎重选择。",
+  "publicIpAssigned tips": "请注意：未分配独立公网IP地址的情况下无法使用外网IP地址对外进行互相通信。",
   "Fee inquiry in progress": "费用查询中...",
   "hour": "小时",
   "Reference fee disk tips": "{{price}}/GiB/小时",
-  "Reference fee network tips": "当公网带宽小于5 Mbps时，价格为{{price1}}/Mbps/小时；当公网带宽大于等于5 Mbps时，价格为{{price2}}/Mbps/小时。",
+  "Reference fee bandwidth tips": "{{price}}/Mbps/小时",
   "Billing rules": "计费规则",
   "The maximum number of instances is 20": "最大数量是20",
   "Billing model": "计费模式",
   "Availability Zone": "可用区",
   "Architecture": "架构",
   "Instance Family": "实例族",
   "postPaidByHour": "按量计费",
-  "heterogeneous": "异构计算",
+  "heterogeneous": "异构计算 (GPU)",
   "prePaid": "包年包月",
   "x86_64": "x86计算",
   "costEffective": "实惠型",
@@ -106,5 +106,10 @@
   "Contains at least three of these": "至少包含其中三项",
   "Cannot start with": "不能以\" / \"开头",
   "cannot contain spaces": "不能包含空格",
-  "Within 8 to 30 characters": "在 8 ～ 30 位字符数以内（推荐12位以上）"
-}
+  "Within 8 to 30 characters": "在 8 ～ 30 位字符数以内（推荐12位以上）",
+  "highMemory": "内存型",
+  "highPerformance": "计算型",
+  "Public IP is not enabled": "未开启公网IP",
+  "interval": "区间",
+  "sold out": "售空"
+}
diff --git a/frontend/providers/cloudserver/src/components/MyTable/index.tsx b/frontend/providers/cloudserver/src/components/MyTable/index.tsx
@@ -12,7 +12,7 @@ interface Props extends BoxProps {
   columns: TableColumnsType[];
   data: any[];
   itemClass?: string;
-  openSelected?: boolean;
+  openSelected?: boolean; // support select item // isOptional
   onRowClick?: (item: any) => void;
 }
 
@@ -59,13 +59,15 @@ export const MyTable = ({
           _hover={{
             bg: '#FBFBFC'
           }}
-          cursor={'pointer'}
+          cursor={!item.isOptional && openSelected ? 'not-allowed' : 'pointer'}
           borderBottom={'1px solid'}
           borderBottomColor={index1 !== data.length - 1 ? 'grayModern.150' : 'transparent'}
           bg={activeId == index1 && openSelected ? 'grayModern.100' : ''}
           onClick={() => {
-            setActiveId(index1);
-            onRowClick && onRowClick(item);
+            if (item.isOptional || !openSelected) {
+              setActiveId(index1);
+              onRowClick && onRowClick(item);
+            }
           }}
         >
           {columns.map((col, index2) => (
@@ -77,7 +79,7 @@ export const MyTable = ({
               px={3}
               py={4}
               fontSize={'base'}
-              color={'grayModern.900'}
+              color={!item.isOptional && openSelected ? 'grayModern.500' : 'grayModern.900'}
             >
               {col.render
                 ? col.render(item, index1, activeId)

diff --git a/frontend/providers/cloudserver/src/pages/_app.tsx b/frontend/providers/cloudserver/src/pages/_app.tsx
@@ -131,6 +131,7 @@ function App({ Component, pageProps }: AppProps) {
       </Head>
       <QueryClientProvider client={queryClient}>
         <ChakraProvider theme={theme}>
+          {/* <div onClick={() => i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh')}>zh</div> */}
           <Component {...pageProps} />
           <ConfirmChild />
         </ChakraProvider>

diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Form.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Form.tsx
@@ -2,7 +2,7 @@ import { getCloudServerImage, getCloudServerRegion, getCloudServerType } from '@
 import MyIcon from '@/components/Icon';
 import { MyTable, TableColumnsType } from '@/components/MyTable';
 import MyTooltip from '@/components/MyTooltip';
-import { CloudServerType, EditForm, StorageType } from '@/types/cloudserver';
+import { CloudServerStatus, CloudServerType, EditForm, StorageType } from '@/types/cloudserver';
 import { CVMArchType, CVMRegionType, CVMZoneType, VirtualMachineType } from '@/types/region';
 import {
   Box,
@@ -59,7 +59,7 @@ const tabStyles: TabProps = {
   fontWeight: '400',
   color: 'grayModern.900',
   borderColor: 'grayModern.200',
-  width: '160px',
+  minW: '160px',
   css: {
     svg: {
       opacity: 0
@@ -122,7 +122,7 @@ function VirtualMachinePackageTabs({
         </Label>
         {virtualMachinePackageFamily?.map((item) => (
           <Tab {...tabStyles} key={item}>
-            {item}
+            {t(item)}
             <MyIcon key={item} ml={'auto'} name="check" width={'16px'} />
           </Tab>
         ))}
@@ -296,6 +296,8 @@ export default function Form({
   if (!formHook) return <></>;
   const [clientRender, setClientRender] = useState(false);
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const theme = useTheme();
+  const { t } = useTranslation();
 
   const specialTips = useMemo(() => {
     return {
@@ -310,8 +312,25 @@ export default function Form({
   }, []);
 
   const { data: systemRegion } = useQuery(['getCloudServerRegion'], getCloudServerRegion, {
-    staleTime: 5 * 60 * 1000
+    staleTime: 5 * 60 * 1000,
+    onSuccess(data) {
+      // set default form
+      if (data?.[0]?.chargeType) {
+        formHook.setValue('chargeType', data[0].chargeType);
+        formHook.setValue('zone', data[0].zone[0].zone);
+        formHook.setValue('virtualMachineArch', data[0].zone[0].arch[0].arch);
+        formHook.setValue(
+          'virtualMachineType',
+          data[0].zone[0].arch[0].virtualMachineType[0].virtualMachineType
+        );
+        formHook.setValue(
+          'virtualMachinePackageFamily',
+          data[0].zone[0].arch[0].virtualMachineType[0].virtualMachinePackageFamily[0]
+        );
+      }
+    }
   });
+
   const { data: systemImage } = useQuery(['getCloudServerImage'], getCloudServerImage, {
     staleTime: 5 * 60 * 1000
   });
@@ -335,6 +354,7 @@ export default function Form({
       }),
     {
       staleTime: 5 * 60 * 1000,
+      enabled: !!formHook.getValues('virtualMachinePackageFamily'),
       onSuccess(data) {
         if (data?.[0]) {
           formHook.setValue('virtualMachinePackageName', data[0].virtualMachinePackageName);
@@ -344,9 +364,6 @@ export default function Form({
     }
   );
 
-  const theme = useTheme();
-  const { t } = useTranslation();
-
   const {
     register,
     control,
@@ -374,7 +391,12 @@ export default function Form({
           return (
             <Flex alignItems={'center'} pl={4} gap={'12px'}>
               <Radio colorScheme={'grayModern'} isChecked={rowNumber === activeId}></Radio>
-              <Text>{item.virtualMachinePackageName}</Text>
+              <Flex flexDirection={'column'}>
+                <Text>{item.virtualMachinePackageName}</Text>
+                {item.status === CloudServerStatus.Unavailable && (
+                  <Text color={'brightBlue.700'}>{t('sold out')}</Text>
+                )}
+              </Flex>
             </Flex>
           );
         }
@@ -403,7 +425,11 @@ export default function Form({
         key: 'instancePrice',
         render: (item: CloudServerType) => {
           return (
-            <Text color={'brightBlue.700'}>
+            <Text
+              color={
+                item.status === CloudServerStatus.Unavailable ? 'grayModern.500' : 'brightBlue.700'
+              }
+            >
               {t('Reference fee tip', { price: item.instancePrice })}{' '}
             </Text>
           );
@@ -555,7 +581,10 @@ export default function Form({
               <MyTable
                 itemClass="appItem"
                 columns={columns}
-                data={serverTypeData}
+                data={serverTypeData.map((item) => ({
+                  ...item,
+                  isOptional: item.status === CloudServerStatus.Available ? true : false
+                }))}
                 openSelected
                 onRowClick={(item: CloudServerType) => {
                   setValue('virtualMachinePackageName', item.virtualMachinePackageName);

diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Header.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/components/Header.tsx
@@ -124,7 +124,7 @@ const Header = ({
                     <Text w={'50px'} fontSize={'base'}>
                       {t('Storage')}
                     </Text>
-                    <Text fontSize={'sm'}>
+                    <Text fontSize={'base'}>
                       {t('Reference fee disk tips', { price: instanceType?.diskPerG })}
                     </Text>
                   </Flex>
@@ -138,12 +138,28 @@ const Header = ({
                     >
                       {t('BandWidth')}
                     </Text>
-                    <Text fontSize={'sm'} wordBreak={'break-all'}>
-                      {t('Reference fee network tips', {
-                        price1: instanceType?.networkSpeedUnderSpeedBoundaryPerHour,
-                        price2: instanceType?.networkSpeedAboveSpeedBoundaryPerHour
+                    <Flex flexDirection={'column'} fontSize={'base'} wordBreak={'break-all'}>
+                      <Flex gap={'8px'} justifyContent={'space-between'}>
+                        <Text>{t('interval')}</Text>
+                        <Text>{t('price')}</Text>
+                      </Flex>
+                      {instanceType?.bandwidthPricingTiers.map((item, index) => {
+                        return (
+                          <Flex
+                            gap={'8px'}
+                            justifyContent={'space-between'}
+                            key={item.pricePerMbps + item.minBandwidth}
+                          >
+                            <Text>{`[${item.minBandwidth} , ${
+                              item.maxBandwidth === null ? '∞' : item.maxBandwidth
+                            })`}</Text>
+                            <Text>
+                              {t('Reference fee bandwidth tips', { price: item.pricePerMbps })}
+                            </Text>
+                          </Flex>
+                        );
                       })}
-                    </Text>
+                    </Flex>
                   </Flex>
                 </Flex>
               </PopoverBody>

diff --git a/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx b/frontend/providers/cloudserver/src/pages/cloudserver/create/index.tsx
@@ -4,7 +4,6 @@ import { useLoading } from '@/hooks/useLoading';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
 import { CloudServerType, EditForm } from '@/types/cloudserver';
-import { CVMChargeType } from '@/types/region';
 import { serviceSideProps } from '@/utils/i18n';
 import { Box, Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
@@ -43,12 +42,12 @@ export default function EditOrder() {
           amount: 1
         }
       ],
-      systemImageId: '',
-      chargeType: CVMChargeType.postPaidByHour,
-      zone: 'Guangzhou-6',
-      virtualMachineArch: 'x86_64',
-      virtualMachineType: 'costEffective',
-      virtualMachinePackageFamily: 'A'
+      systemImageId: ''
+      // chargeType: CVMChargeType.postPaidByHour,
+      // zone: 'Guangzhou-6',
+      // virtualMachineArch: 'x86_64',
+      // virtualMachineType: 'costEffective',
+      // virtualMachinePackageFamily: 'A'
     }
   });
 

diff --git a/frontend/providers/cloudserver/src/pages/cloudservers/components/List.tsx b/frontend/providers/cloudserver/src/pages/cloudservers/components/List.tsx
@@ -3,7 +3,7 @@ import AppStatusTag from '@/components/AppStatusTag';
 import MyIcon from '@/components/Icon';
 import { CVMInstanceType, HandleEnum } from '@/types/cloudserver';
 import { formatTime } from '@/utils/tools';
-import { Box, Button, Center, Flex, FlexProps, MenuButton } from '@chakra-ui/react';
+import { Box, Button, Center, Flex, FlexProps, MenuButton, Text } from '@chakra-ui/react';
 import { LogoutIcon, MyTable, SealosMenu, useMessage } from '@sealos/ui';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
@@ -137,7 +137,7 @@ const OrderList = ({ apps = [], refetchApps }: { apps: any[]; refetchApps: () =>
                 {item?.privateIpAddresses?.join(',')}(内)
                 <MyIcon name="copy" color={'grayModern.500'} width={'12px'} />
               </Center>
-              {item?.publicIpAddresses && (
+              {item?.publicIpAddresses ? (
                 <Center
                   gap={'4px'}
                   cursor={'pointer'}
@@ -146,6 +146,8 @@ const OrderList = ({ apps = [], refetchApps }: { apps: any[]; refetchApps: () =>
                   {item?.publicIpAddresses?.join(',')}(公)
                   <MyIcon name="copy" color={'grayModern.500'} width={'12px'} />
                 </Center>
+              ) : (
+                <Text>{t('Public IP is not enabled')}</Text>
               )}
             </Flex>
           );

diff --git a/frontend/providers/cloudserver/src/types/cloudserver.ts b/frontend/providers/cloudserver/src/types/cloudserver.ts
@@ -23,6 +23,12 @@ export type StorageType = {
   use: 'SystemDisk' | 'DataDisk';
 };
 
+export type BandwidthPricingTier = {
+  minBandwidth: number;
+  maxBandwidth: number;
+  pricePerMbps: number;
+};
+
 export type CloudServerType = {
   cpu?: number;
   memory?: number;
@@ -35,6 +41,7 @@ export type CloudServerType = {
   networkSpeedUnderSpeedBoundaryPerHour: number;
   networkSpeedAboveSpeedBoundaryPerHour: number;
   status: CloudServerStatus;
+  bandwidthPricingTiers: BandwidthPricingTier[];
 };
 
 export enum CloudServerStatus {