[4.2.2] (fontend):Adapt to the latest password rules，Optimize tenant list refresh

frontend/src/component/Password.tsx

@@ -16,7 +16,7 @@ import { Password } from '@oceanbase/ui';
 import type { PasswordProps } from '@oceanbase/ui/es/Password';
 
 const OCPPassword: React.FC<PasswordProps> = props => {
-  // 特殊字符支持 ~!@#%^&*_\-+=`|(){}[]:;',.?/
+  // 特殊字符支持 ~!@#%^&*_-+=|(){}[]:;,.?/
   const ocpPasswordRules = [
     {
       validate: (val?: string) => val?.length >= 8 && val?.length <= 32,
@@ -27,22 +27,35 @@ const OCPPassword: React.FC<PasswordProps> = props => {
     },
 
     {
-      validate: (val?: string) => /^[0-9a-zA-Z~!@#%^&*_\-+=|(){}\[\]:;,.?/]+$/.test(val),
-      message: formatMessage({
-        id: 'ocp-express.src.component.Password.ItCanOnlyContainLetters',
-        defaultMessage: '只能包含字母、数字和特殊字符（~!@#%^&*_-+=|(){}[]:;,.?/）',
-      }),
-    },
-
-    {
-      validate: (val?: string) =>
-        /^(?=(.*[a-z]){2,})(?=(.*[A-Z]){2,})(?=(.*\d){2,})(?=(.*[~!@#%^&*_\-+=|(){}\[\]:;,.?/]){2,})[A-Za-z\d~!@#%^&*_\-+=|(){}\[\]:;,.?/]{2,}$/.test(
-          val
-        ),
-
+      validate: (val?: string) => {
+        // 只能包含数字，大小写字母，特殊字符
+        if (/^[0-9A-Za-z~!@#%^&*\-_+=|(){}[\]:;,.?/]+$/.test(val)) {
+          let count = 0;
+          // 至少包含一个数字
+          if (/.*[0-9]{1,}.*/.test(val)) {
+            count = count + 1;
+          }
+          // 至少包含一个大写字母
+          if (/.*[A-Z]{1,}.*/.test(val)) {
+            count = count + 1;
+          }
+          // 至少包含一个小写字母
+          if (/.*[a-z]{1,}.*/.test(val)) {
+            count = count + 1;
+          }
+          // 至少包含一个 ~!@#%^&*\-_+=|(){}[\]:;,.?/
+          if (/[~!@#%^&*\-_+=|(){}[\]:;,.?/]/.test(val)) {
+            count = count + 1;
+          }
+          return count >= 3 ? true : false;
+        } else {
+          return true;
+        }
+      },
       message: formatMessage({
         id: 'ocp-express.src.component.Password.ItMustContainAtLeast',
-        defaultMessage: '大小写字母、数字和特殊字符都至少包含 2 个',
+        defaultMessage:
+          '包含以下四种类型字符至少三种及以上：数字（0~9）、大写字母（A~Z）、小写字母(a~z)、特殊符号  ~!@#%^&*_-+=|(){}[]:;,.?/',
       }),
     },
   ];

frontend/src/component/WhitelistInput/index.tsx

@@ -247,7 +247,12 @@ class WhitelistInput extends React.Component<WhitelistInputProps, WhitelistInput
                 const { label, value: tagValue, closable, onClose } = props;
                 return (
                   <Tag
-                    color={isWhitelistIP(tagValue as string) ? 'default' : 'red'}
+                    // tagValue 为空时会引起 validator isIP 报错
+                    color={
+                      !tagValue || (tagValue && isWhitelistIP(tagValue as string))
+                        ? 'default'
+                        : 'red'
+                    }
                     closable={closable}
                     onClose={onClose}
                     className="select-tag-render-item"

frontend/src/locale/en-US.js

@@ -1514,7 +1514,7 @@ export default {
   "ocp-express.Detail.TakeOver.JumpToViewHelp": "Jump to check for help?",
   "ocp-express.Compaction.Detail.InitiateAMerge": "Initiate Major Compaction",
   "ocp-express.Detail.SQLDiagnosis.SuspiciousSQL.TheTimeWhenTheSql": "Time When SQL Was Last Executed in Specified Period",
-  "ocp-express.src.component.Password.ItMustContainAtLeast": "It must contain at least two characters of each of the following types: uppercase letters, lower letters, digits, and special characters.",
+  "ocp-express.src.component.Password.ItMustContainAtLeast": "Contains at least three or more of the following four types of characters: numbers (0~9), uppercase letters (A~Z), lowercase letters (a~z), special symbols~!@#%^&*_-+=| (){}[]:;,.?/",
   "ocp-express.src.constant.backup.InitiateRecovery": "Initiate Recovery",
   "ocp-express.src.constant.oceanbase.Destination": "Destination",
   "ocp-express.SQLDiagnosis.Component.SQLDetailTabs.Operation": "Actions",
@@ -3545,6 +3545,7 @@ export default {
   "ocp-express.Cluster.Import.SelectCredentials.1": "Select a credential",
   "ocp-express.Compaction.DetailV4.IfThePeakMemoryUsageExceedsTheThreshold": 'If the peak memory usage exceeds the threshold, a dump will be triggered. You need to determine whether the parameter setting of "Dump water level percentage" is reasonable or expand the tenant memory.',
   "ocp-express.Detail.Overview.TheSysTenantCannotBe": "The system tenant cannot be deleted.",
+  "ocp-express.Detail.Overview.TheSysTenantCannotBeMeta": "This tenant cannot be deleted.",
   "ocp-express.Detail.Transaction.RefreshFrequency": "Refresh Frequency",
   "ocp-express.src.hook.useMenu.DiagnosticAnalysis": "Diagnosis",
   "ocp-express.Alarm.LogFilter.Keyword": "Keyword",

frontend/src/locale/zh-CN.js

@@ -3105,6 +3105,7 @@ export default {
   "ocp-express.Component.SQLDetail.SQLTunning.DiagnosisTitle": "诊断问题：{title}",
   "ocp-express.src.constant.compute.OcpAgentLog": "OCP Agent 日志",
   "ocp-express.Detail.Overview.TheSysTenantCannotBe": "sys 租户无法删除",
+  "ocp-express.Detail.Overview.TheSysTenantCannotBeMeta": "该租户无法删除",
   "ocp-express.src.constant.oceanbase.MovingIn": "迁入中",
   "ocp-express.OBProxy.New.DeploymentObproxy": "部署 OBProxy",
   "ocp-express.Inspection.Rule.InspectionRuleType": "巡检规则类型",
@@ -3143,7 +3144,7 @@ export default {
   "ocp-express.Inspection.Rule.CreateInspectionRule": "新建巡检规则",
   "ocp-express.src.constant.multiCluster.Failed": "失败",
   "ocp-express.Alarm.Rule.AddAlarmMetricModal.MetricAdded": "指标添加成功",
-  "ocp-express.src.component.Password.ItMustContainAtLeast": "大小写字母、数字和特殊字符都至少包含 2 个",
+  "ocp-express.src.component.Password.ItMustContainAtLeast": "包含以下四种类型字符至少三种及以上：数字（0~9）、大写字母（A~Z）、小写字母(a~z)、特殊符号  ~!@#%^&*_-+=|(){}[]:;,.?/",
   "ocp-express.Monitor.TopSQL.TopSQLModal.StartAndEndTimeCannot": "起止时间不能为空",
   "ocp-express.Detail.Overview.Restart": "重启",
   "ocp-express.Alarm.Event.Detail.RecoveryTime": "恢复时间",

frontend/src/page/Tenant/Detail/Database/index.tsx

@@ -11,7 +11,7 @@
  */
 
 import { formatMessage } from '@/util/intl';
-import { history, connect } from 'umi';
+import { history, connect, useSelector } from 'umi';
 import React, { useState } from 'react';
 import {
   Table,
@@ -60,6 +60,8 @@ const Database: React.FC<DatabaseProps> = ({
   },
   tenantData,
 }) => {
+  const { systemInfo } = useSelector((state: DefaultRootState) => state.global);
+
   const [connectionStringModalVisible, setConnectionStringModalVisible] = useState(false);
   const [keyword, setKeyword] = useState('');
   const [currentDatabase, setCurrentDatabase] = useState<API.Database | null>(null);
@@ -191,7 +193,7 @@ const Database: React.FC<DatabaseProps> = ({
       }),
       dataIndex: 'operation',
       render: (text: string, record: API.Database) => {
-        if ([...FORBID_OPERATION_DBLIST, 'information_schema'].includes(record.dbName)) {
+        if ([...FORBID_OPERATION_DBLIST, 'information_schema'].includes(record.dbName) || record?.dbName === systemInfo?.metaDatabaseName) {
           return '';
         }
         return (

frontend/src/page/Tenant/Detail/Overview/index.tsx

@@ -11,7 +11,7 @@
  */
 
 import { formatMessage } from '@/util/intl';
-import { history } from 'umi';
+import { history, useSelector } from 'umi';
 import {
   Button,
   Col,
@@ -78,6 +78,8 @@ const Detail: React.FC<NewProps> = ({
     params: { tenantId },
   },
 }) => {
+  const { systemInfo } = useSelector((state: DefaultRootState) => state.global);
+
   const [form] = Form.useForm();
   const { setFieldsValue, validateFields } = form;
 
@@ -404,7 +406,7 @@ const Detail: React.FC<NewProps> = ({
       (resourcePool.unitConfig?.maxCpuCoreCount ===
         currentModifyTenantZone?.resourcePool?.unitConfig?.maxCpuCoreCount &&
         resourcePool.unitConfig?.maxMemorySize ===
-          currentModifyTenantZone?.resourcePool?.unitConfig?.maxMemorySize)
+        currentModifyTenantZone?.resourcePool?.unitConfig?.maxMemorySize)
     ) {
       return message.info(
         formatMessage({
@@ -467,19 +469,22 @@ const Detail: React.FC<NewProps> = ({
             <Tooltip
               placement="topRight"
               title={
-                tenantData.name === 'sys' &&
-                formatMessage({
-                  id: 'ocp-express.Detail.Overview.TheSysTenantCannotBe',
-                  defaultMessage: 'sys 租户无法删除',
-                })
+                (tenantData.name === 'sys' &&
+                  formatMessage({
+                    id: 'ocp-express.Detail.Overview.TheSysTenantCannotBe',
+                    defaultMessage: 'sys 租户无法删除',
+                  }) || tenantData?.name === systemInfo?.metaTenantName && formatMessage({
+                    id: 'ocp-express.Detail.Overview.TheSysTenantCannotBeMeta',
+                    defaultMessage: '该租户无法删除',
+                  }))
               }
             >
               <Button
                 data-aspm-click="c304245.d308734"
                 data-aspm-desc="租户详情-删除租户"
                 data-aspm-param={``}
                 data-aspm-expo
-                disabled={tenantData.name === 'sys'}
+                disabled={tenantData.name === 'sys' || tenantData.name === systemInfo?.metaTenantName}
                 onClick={() => {
                   setShowDeleteTenantModal(true);
                 }}
@@ -619,13 +624,13 @@ const Detail: React.FC<NewProps> = ({
                   >
                     {tenantData?.locked
                       ? formatMessage({
-                          id: 'ocp-express.Detail.Overview.Locked',
-                          defaultMessage: '已锁定',
-                        })
+                        id: 'ocp-express.Detail.Overview.Locked',
+                        defaultMessage: '已锁定',
+                      })
                       : formatMessage({
-                          id: 'ocp-express.Detail.Overview.Unlocked',
-                          defaultMessage: '未锁定',
-                        })}
+                        id: 'ocp-express.Detail.Overview.Unlocked',
+                        defaultMessage: '未锁定',
+                      })}
                   </Text>
                 </Descriptions.Item>
                 <Descriptions.Item

frontend/src/page/Tenant/Detail/User/MySQL/index.tsx

@@ -44,6 +44,7 @@ export interface IndexProps {
 
 const Index: React.FC<IndexProps> = ({ tenantId }) => {
   const { tenantData } = useSelector((state: DefaultRootState) => state.tenant);
+  const { systemInfo } = useSelector((state: DefaultRootState) => state.global);
 
   const [keyword, setKeyword] = useState('');
   const [connectionStringModalVisible, setConnectionStringModalVisible] = useState(false);
@@ -256,7 +257,7 @@ const Index: React.FC<IndexProps> = ({ tenantId }) => {
       title: formatMessage({ id: 'ocp-express.User.MySQL.Locking', defaultMessage: '锁定' }),
       dataIndex: 'isLocked',
       render: (text: boolean, record: API.DbUser) =>
-        record.username === 'root' || record.username === 'proxyro' ? (
+        record.username === 'root' || record.username === 'proxyro' || record?.username === systemInfo?.metaUsername ? (
           <Switch size="small" checked={text} disabled={true} />
         ) : (
           <Switch
@@ -277,6 +278,9 @@ const Index: React.FC<IndexProps> = ({ tenantId }) => {
       }),
       dataIndex: 'operation',
       render: (text: string, record: API.DbUser) => {
+        if (record?.username === systemInfo?.metaUsername) {
+          return
+        }
         return (
           <Space size="middle">
             <a