feat: redis and dyminic dbversion

[c121914yu]

🤖 Generated by Copilot at cf8bd5d

Summary

🌐🗄️🚀

This pull request adds frontend support for Redis databases, which are a new type of database supported by the backend. It updates the components, pages, constants, types, and utils files to render the UI elements, fetch the data, and generate the YAML files for the Redis database features. It also adds internationalization support for the Redis-related texts, and refactors the kubernetes client function.

Oh we are the coders of the frontend crew
We add new features and we fix the bugs too
We support the Redis database type with HA
And we fetch the versions from the backend each day

Walkthrough

• Add Redis HA feature and its logic to the frontend (link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link)
• Add new key-value pairs to the common.json files for the English and Chinese locales, which are used to display the labels and messages for the Redis HA feature in the frontend (link, link)
• Add a new import statement to the platform.ts file, which is used to define the API functions for the platform-related features, to import the type definition for the response of the getVersion API, which is used to get the available versions of the database types (link)
• Add a new prop to the RangeInput component, which is used to render a slider for selecting the number of replicas for the database, to specify the width of the component based on the number of marks on the slider (link)
• Add a new import statement to the Tip component, which is used to render a tooltip with an icon and a text, to import the useTranslation hook from the next-i18next library, which is used to get the translation function for the current locale (link)
• Add a new line of code to the Tip component, which is used to render a tooltip with an icon and a text, to invoke the useTranslation hook and assign the returned translation function to a variable named t, which is then used to translate the text prop of the component (link)
• Modify the code that renders the text prop of the Tip component, which is used to display the tooltip content, to wrap the text prop with the t function, which is the translation function for the current locale, to ensure that the text is translated according to the user's language preference (link)
• Add a new value to the DBTypeEnum enum, which is an enum of the supported database types, to represent the Redis database type, and use it to identify and handle the Redis-specific features and logic in the frontend (link, link, link, link, link, link, link, link, link, link, link, link)
• Add a new object to the DBTypeList array, which is an array of objects that map the database type ids to their labels, to render the option for selecting the Redis database type in the frontend (link)
• Add a new function to the db.ts file, which is used to define the constants and types related to the database features, to return the configuration for the Redis HA nodes, which are additional nodes that provide fault tolerance and load balancing for the Redis database, and use it to calculate the resource and price requirements for the Redis HA feature in the frontend (link, link, link, link, link, link, link, link, link)
• Add a new import statement to the Form component, which is used to render the form for creating or editing the database instances in the frontend, to import the Switch component from the chakra-ui library, which is used to render a toggle switch for enabling or disabling the Redis HA feature in the frontend (link)
• Modify the import statement in the Form component, which is used to render the form for creating or editing the database instances in the frontend, to remove the import of the BackupStatusMapType, which is no longer used in this file, and add the import of the DBTypeEnum, the RedisHAConfig, and the Tip component, which are used to implement the Redis HA feature and its logic in the frontend (link)
• Modify the code that renders the PriceBox component, which is used to display the estimated price for the database instances in the frontend, to change the props of the PriceBox component from the cpu, memory, storage, and pods to the components, which is an array of objects that specify the cpu, memory, storage, and replicas for each component of the database cluster, and add a condition to check if the database type is DBTypeEnum.redis, and if so, add an additional component object to the array, which has the configuration for the Redis HA nodes, to calculate and display the price for the Redis HA feature in the frontend (link)
• Modify the code that renders the MySelect component, which is used to render the options for selecting the database version in the frontend, to add a new prop to the MySelect component, which is the width of the component, and set the value to a template literal that interpolates the width of the component based on the number of options in the DBVersionMap, to adjust the width of the component according to the length of the version labels (link)
• Modify the code that renders the RangeInput component, which is used to render a slider for selecting the number of replicas for the database in the frontend, to add a new prop to the RangeInput component, which is the width of the component, and set the value to a template literal that interpolates the width of the component based on the number of marks on the slider, to adjust the width of the component according to the range of the replicas, and add a new Tip component after the RangeInput component, which is used to render a tooltip with an icon and a text, to inform the user that the multi-replica Redis includes HA nodes, and that the price already includes the cost for the HA nodes, to provide the user with more information about the Redis HA feature and its pricing in the frontend (link)
• Modify the code that renders the FormControl component, which is used to render the input for selecting the storage size for the database in the frontend, to add a new prop to the FormControl component, which is the width of the component, and set the value to a template literal that interpolates the width of the component based on the number of marks on the slider, to adjust the width of the component according to the range of the storage size (link)
• Modify the import statement in the PriceBox component, which is used to display the estimated price for the database instances in the frontend, to remove the import of the DBVersionMap from the constants file, and add the import of the DBVersionMap from the static store, and add the import of the lodash library, which is used to throttle the price calculation function to improve the performance, to use the latest version information and optimize the rendering of the PriceBox component in the frontend (link)
• Modify the code that calculates and renders the price list for the database instances in the frontend, to change the parameters of the PriceBox component from the cpu, memory, storage, and pods to the components, which is an array of objects that specify the cpu, memory, storage, and replicas for each component of the database cluster, and change the logic of the price calculation function, which loops over the components array and accumulates the price for each resource and each replica, and change the podScale function, which takes an array of prices instead of a single price, and returns the formatted price range based on the minimum and maximum values, to calculate and display the price for the multiple components of the database cluster, including the Redis HA nodes, in the frontend (link)
• Add a new import statement to the json2Yaml.ts file, which is used to define the helper functions for converting the JSON data to YAML format for the database features, to import the RedisHAConfig function from the constants file, which is used to get the configuration for the Redis HA nodes, to generate the YAML files for the Redis HA feature in the frontend (link)
• Add a new variable to the json2Yaml.ts file, which is used to define the helper functions for converting the JSON data to YAML format for the database features, to store the configuration for the Redis HA nodes, and use it to generate the YAML files for the Redis HA feature in the frontend (link, link)
• Add a new case to the switch statement in the json2CreateCluster function, which is used to generate the YAML file for creating the database cluster in the frontend, to handle the logic for generating the YAML file for the Redis database cluster, which includes the Cluster, the ServiceAccount, the Role, and the RoleBinding resources, to define the spec for the Redis cluster, which includes the clusterDefinitionRef, the clusterVersionRef, the componentSpecs, and the terminationPolicy, and the RBAC rules for the Redis cluster, which allow the cluster to create events in the kubernetes cluster, to generate the YAML file for the Redis database cluster in the frontend (link)
• Add a new case to the switch statement in the json2Account function, which is used to generate the YAML file for creating the database account in the frontend, to handle the logic for generating the YAML file for the Redis database account, which includes the Secret and the ConfigMap resources, to define the data for the password and the connection string for the Redis database, which are encoded in base64 format, and the data for the host and the port for the Redis database, which are plain text, to generate the YAML file for the Redis database account in the frontend (link)
• Fetch and store the available versions of the database types from the backend using the getVersion API, and use them to set the default values for the database version in the frontend (link, link, link, link, link, link, link, link, link, link)
• Add a new import statement to the _app.tsx file, which is the custom App component for the Next.js framework, to import the getDBVersion function from the static store, which is used to fetch and store the available versions of the database types from the backend (link)
• Add a new line of code to the App component, which is the custom App component for the Next.js framework, to invoke the getDBVersion function, which is used to fetch and store the available versions of the database types from the backend, when the component mounts, to ensure that the frontend has the latest version information for the database features (link)
• Add a new file named getVersion.ts, which is used to define the handler function for the getVersion API, which is used to get the available versions of the database types from the backend, and import the type definitions, the libraries, and the constants that are needed for the handler function, and define the response type, which is a record of the database types and their corresponding arrays of version objects, and define the handler function, which uses the kubernetes client to list the cluster custom objects that represent the database versions, and maps them to the response type, and handles the error cases and returns the response using the jsonRes helper function (link)
• Add a new import statement to the index.tsx file, which is used to render the database edit page in the frontend, to import the DBVersionMap from the static store, which is used to get the available versions of the database types from the backend, to set the default value for the database version in the frontend (link)
• Add a new variable to the index.tsx file, which is used to render the database edit page in the frontend, to store the default values for the database edit form, and override the dbVersion property with the first item of the DBVersionMap.postgresql array, to set the default value for the database version in the frontend, based on the latest version information from the backend (link)
• Modify the code that initializes the form hook for the database edit form in the frontend, to change the defaultValues property of the form hook from the defaultDBEditValue to the defaultEdit variable, to use the updated default value for the database version in the frontend (link)
• Modify the code that renders the YAML files for the database edit form in the frontend, to change the value property of the YAML files from the defaultDBEditValue to the defaultEdit variable, to use the updated default value for the database version in the frontend (link)
• Modify the import statement in the static.ts file, which is used to define the static store for the frontend, to import the getDBVersionMap function from the API file, which is used to fetch the available versions of the database types from the backend, and import the DBTypeEnum from the constants file, which is an enum of the supported database types, and import the response type for the getVersion API, which is used to store the version information in the static store (link)
• Add a new variable to the static.ts file, which is used to define the static store for the frontend, to indicate how many times the frontend will retry to fetch the version information from the backend if the request fails, and initialize it to 3, which means the frontend will retry up to 3 times (link)
• Add a new variable to the static.ts file, which is used to define the static store for the frontend, to store the available versions of the database types from the backend, and initialize it to an empty object with the keys of the DBTypeEnum values, and the values of empty arrays, to prepare the data structure for storing the version information in the static store (link)
• Add a new function to the static.ts file, which is used to define the static store for the frontend, to fetch the available versions of the database types from the backend using the getDBVersionMap API function, and assign the response to the DBVersionMap variable, and handle the error cases, and decrement the retryVersion variable and retry the request if the variable is greater than or equal to zero, and use a timeout of 1000 milliseconds between each retry, to implement the logic of fetching and storing the version information in the static store (link)
• Support the in-cluster mode of the kubernetes client, which allows the backend API functions to access the kubernetes resources without providing the config string (link, link)
• Modify the code that initializes the kubernetes client for the backend API functions, to change the parameter of the K8sApi function from the config string to an optional config string, and check if the config parameter is provided, and if so, load the kubernetes config from the string, otherwise, load the kubernetes config from the cluster, and check if the cluster is in the cluster and has the hosts value, and if so, use the hosts value, otherwise, use the default server value, to support the in-cluster mode of the kubernetes client (link)
• Remove the code that sets the current context of the kubernetes config, which is no longer needed in the K8sApi function, to simplify the logic of the function and avoid unnecessary mutations of the config object (link)
• Clear the session data and prevent unauthorized access when the user logs out from the frontend (link)
• Add a new line of code to the App component, which is the custom App component for the Next.js framework, to remove the 'session' key from the localStorage, which is used to store the user's session information, when the user logs out from the frontend, to clear the session data and prevent unauthorized access (link)
• Parse the secret data and display the connection information for the Redis database in the frontend (link, link)
• Add a new key-value pair to the object that maps the database types to their secret keys, which are used to get the connection information for the database instances, to handle the Redis-specific keys for the password and the connection string of the Redis database, and use them to parse the secret data and display the connection information in the frontend (link, link)
• Display a warning message for the Redis backup feature in the frontend, which is not supported by the backend (link)
• Modify the code that renders the backup button for the database instances, which is used to display the backup feature in the frontend, to add a condition to check if the database type is DBTypeEnum.redis, and if so, return a toast message that warns the user that Redis does not support backup at this time, to prevent the user from attempting to backup the Redis database, which is not supported by the backend (link)

[sealos-ci-robot]

🤖 Generated by lychee action

Summary

Status	Count
🔍 Total	724
✅ Successful	303
⏳ Timeouts	0
🔀 Redirected	0
👻 Excluded	420
❓ Unknown	0
🚫 Errors	0

Full action output

Full Github Actions output

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (61a9b27) 72.97% compared to head (cf8bd5d) 72.97%.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3449   +/-   ##
=======================================
  Coverage   72.97%   72.97%           
=======================================
  Files           8        8           
  Lines         618      618           
=======================================
  Hits          451      451           
  Misses        132      132           
  Partials       35       35           

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.